Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
MSDN The Next Web NOW! 11/22/2006
Better User Experience with ASP.NET AJAX
Smith Suksmith
MVP - Solutions ArchitectDirector - Office of Computer Clustering Promotion
MSDN Seminar : The Next Web NOW!
MSDN The Next Web NOW! 11/22/2006
Is this the right direction?
MSDN The Next Web NOW! 11/22/2006
MSDN The Next Web NOW! 11/22/2006
Web 2.0 Overview
GET REMIX DELIVER
Official Data
Census, Government,
Traditional media
User Data
Blogs, Social software,
Photos, Audio, Video
Aggregated Data
Ranking, Public calendar
Metadata
Tags, geourl, Links,
trackback, session
Source: Peter Forret
Population stats,
Satellite maps,
TV programs, iTunes,
ISBN, Trailers
Blogs, Wikipedia,
Amazon review,
IMDB feedback,
podcasts, Flickr
Google Search,
Technorati Cosmos,
PageRank, SplogSpot,
Amazon Top Sellers,
Ebay reputation
Del.icio.us,
Flickr tags,
Technorati Cosmos,
Plazes geo-location
Aggregate
Annotate
Convert
Filter
Index
Map
Rank
Transform
Creative Commons,
Perpetual Beta,
Release early,
Release often,
Hacking is OK,
Trust your users,
Service –No software
Interface- REST
- RPC
- SOAP
Format- RSS
- Atom
- KML
- JSON
- iCal/hCal
- BitTorrent
Address- Permalink
- Granular
- Loosely
joined
Rich UI- AJAX
- DHTML
- Flash
VISUALIZE- Maps
- Calendar
SELF-SERVICE- Contextual
- Advertising
- Payment
DEVICES- PDA
- Phone
- Everywhere
mm
mm
MSDN The Next Web NOW! 11/22/2006
Web 2.0 vs SOA
Software as a service
Interoperability based on Web principles
Applications are platforms
Encourages unintended uses
Mashups
Rich user interface
Architecture of participation
Software as services
Interoperability based on Web standards
Applications are platforms
Permits unintended uses
Composite Applications
Little user interface guidance
Little prescription of user participation
Web 2.0 SOA
Source: Dion Hinchcliffe - http://web2.wsj2.com/continuing_an_industry_discussion_the_coevolution_of_soa_and.htm
MSDN The Next Web NOW! 11/22/2006
2.0 Model
MSDN The Next Web NOW! 11/22/2006
MSDN The Next Web NOW! 11/22/2006
MSDN The Next Web NOW! 11/22/2006
MSDN The Next Web NOW! 11/22/2006
What’s else?
MSDN The Next Web NOW! 11/22/2006
User Experience
MSDN The Next Web NOW! 11/22/2006
MSDN The Next Web NOW! 11/22/2006
What is user experience?
Coffee? Entertainment? Transportation?
Windows Vista Office 2007
MSDN The Next Web NOW! 11/22/2006
User Experience
MSDN The Next Web NOW! 11/22/2006
The first human-computer
interfaces were strictly
utilitarian.
UI Trends / The Early Years
MSDN The Next Web NOW! 11/22/2006
The next wave of computer
interfaces focused on
increasing productivity for
expert users.
UI Trends / The Command Line
MSDN The Next Web NOW! 11/22/2006
Graphical User Interface
(GUI)-based operating
systems strived for system-
wide consistency.
UI Trends / Dawn of the GUI
MSDN The Next Web NOW! 11/22/2006
..then the Web happened.
In the evolutionary history of
software user interfaces, the
advent of the World Wide Web
began a Cambrian explosion
of UI diversity.
Certain conventions such as:
- the shopping cart,
- tabs,
- navigation bars, and
- search boxes
catch on and are nearly
universally adopted.
UI Trends / The Web
MSDN The Next Web NOW! 11/22/2006
Operating systems respond to
user demand for compelling
user experience.
UI Trends / The Desktop
MSDN The Next Web NOW! 11/22/2006
While the web was influencing
operating system and
application user interfaces,
web applications were
becoming more robust and
desktop-like.
UI Trends / Blurring the Web/Desktop Boundary
MSDN The Next Web NOW! 11/22/2006
As web and desktop
technologies become more
intermingled, the distinction
between “web app” and
“desktop app” is becoming
less and less clear.
- iTunes Music store
- Google Desktop Search
- Dashboard Widgets built with
web technologies
UI Trends / Convergence
MSDN The Next Web NOW! 11/22/2006
Presentation Roadmap
HTM
L
ease-of-use, personalization, differentiation, richness
HTML + JScript
ASP.NET AJAX
WPF•the “Media Web”•unprecedented branding,
differentiation and personalization
•improved responsiveness and ease-of-use•Improved customization
•improved navigation•user tracking and customization
•greatest reach
Better user experience leads
to increased revenues
reven
ue/u
ser
MSDN The Next Web NOW! 11/22/2006
4 more Major releases this year
IIS 7.0 on Windows Vista
Unified configuration, administration, extensibility
SharePoint 2007
Collaboration, document management, portal, business intelligence, content management
Built on ASP.NET 2.0 with deep customization
Expression Web Designer
Rich HTML/ASP.NET web design tool
ASP.NET AJAX V1.0
MSDN The Next Web NOW! 11/22/2006
XmlHttp JavaScript
MSDN The Next Web NOW! 11/22/2006
ASP.NET AJAX
A framework for building next generation, cross-platform, browsing experiences
Ubiquitous, cross-platform, browser support
Most-productive framework for building AJAX-enabled web applications
Integrated with ASP.NET 2.0 and VS 2005
No cost, free tool support, easy to use
Fully supported Microsoft product
MSDN The Next Web NOW! 11/22/2006
Things we’ve learned along the way…
JavaScript is super flexible…
But not everyone likes JavaScript…
JavaScript becomes exponentially harder as the # of lines of JavaScript code increases
Solid JavaScript framework architecture critical to building real-world AJAX solutions
Infinite number of cool features to implement
But people want a stable, fully supported, API that they can use immediately…
MSDN The Next Web NOW! 11/22/2006
Introducing ASP.NET AJAX 1.0
Works on top of ASP.NET 2.0 and VS 2005
Delivers ASP.NET AJAX foundation “core”:
JavaScript type-system
JavaScript<->.NET Networking Serialization
JavaScript library of common routines
ASP.NET Server Control Integration
Fully supported Microsoft product
Standard 10 year product support lifecycle
MSDN The Next Web NOW! 11/22/2006
Server Side
Client Side Microsoft
AJAX Library
ASP.NET
AJAX
Extensions
ASP.NET
AJAX
Extensions
Value-Add
CTP
ASP.NET
AJAX
Toolkit
ASP.NET AJAX Extensions
MSDN The Next Web NOW! 11/22/2006
ASP.NET AJAX Web Server
IE
Firefox
Safari
Browser
ClientsMicrosoft AJAX
Library
PreviewGlitz.js
PreviewDragDrop.js
PreviewScript.js
AjaxWebForms.js
AjaxRuntime.js
JSON Bridge Support
Membership and
Personalization Support
ASP.NET Server Control
Integration
IIS and ASP.NET
Apache and PHP
ColdFusion
ASP.NET 2.0 AJAX
Extensions
ASP.NET AJAX
Control Toolkit
MSDN The Next Web NOW! 11/22/2006
Microsoft AJAX Library
Compatibility layer for browsers and platforms
Support for Windows Internet Explorer, Firefox/Mozilla, Safari
Script core runtime: a rich type system for JScript
Classes, namespaces, inheritance, interfaces
Event handlers
Object serialization
Base class library and networking services
Helper classes for developers (subset of .NET BCL)
Management of asynchronous network operations
Component model and UI framework
Declarative scripting (XML script definitions)
Extensible component and control model
Data binding, presentation, and validation
Client components for common scenarios –examples:
TextBox, Panel, Label, etc.
ListView and DataView for rendering templated data
UI behaviors such as drag and drop, tooltips, auto-completion
Microsoft AJAX Library
Controls and Components
Script Core
Base Class Library
Component Model and
UI Framework
Browser Compatibility
MSDN The Next Web NOW! 11/22/2006
ASP.NET 2.0 AJAX Extensions(Server-Centric Programming Model)
ASP.NET
Application
Services
Page
Framework,
Server Controls
Microsoft AJAX Library
Client
Application
Services
Component/UI
Framework,
Controls
Browser
Presentation
(HTML/CSS)
ASP.NET Application
Pages
UI Behavior
(Managed
Code)
Input Data
Updated UI + Behavior
Initial Rendering
(UI + Behavior)
MSDN The Next Web NOW! 11/22/2006
Client-Centric Programming Model
Browser
Presentation
(HTML/CSS)
ASP.NET AJAX
Service
ProxiesUI Behavior
(Script)
ASP.NET
Application
Services
Page
Framework,
Server Controls
ASP.NET Application
Pages
Web
Services
Microsoft AJAX Library
Client
Application
Services
Component/UI
Framework,
Controls
Initial Rendering
(UI + Behavior)
Data
Data
MSDN The Next Web NOW! 11/22/2006
ASP.NET AJAX 1.0
MSDN The Next Web NOW! 11/22/2006
ASP.NET AJAX Control Toolkit
Separate download from core ASP.NET AJAX
Great library of free ASP.NET AJAX enabled controls
Download from http://ajax.asp.net/
Developed using a collaborative source model
All source freely available with modification license
Both Microsoft & non-Microsoft developers can contribute
Already contains 30 really cool controls
Goal is to get 50-100 great controls over the next months
MSDN The Next Web NOW! 11/22/2006
AJAX Control Extenders
Controls that can AJAX-enable existing HTML UI and ASP.NET Server Controls
<asp:LinkButtonID=“ShowHideBtn" runat="server">Details...</asp:LinkButton>
<asp:Panel ID="detailsPanel" runat="server" CssClass="DetailsPanel">
Blah, Blah, Blah
<br />
Blah, Blah, Blah
<br />
Blah, Blah, Blah
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender TargetControlID="detailsPanel“
CollapseControlID="ShowHideBtn"
ExpandControlID="ShowHideBtn"
Collapsed="true"
SuppressPostBack="true"
runat="server“ />
MSDN The Next Web NOW! 11/22/2006
Using Extender Controls
MSDN The Next Web NOW! 11/22/2006
Some of the AJAX Control Toolkit Extenders
AutoCompleteTextBoxExtender
CollapsablePanelExtender
AnimationExtender
ConfirmButtonExtender
DragPanelExtender
DropShadowExtender
AlwaysVisibleExtender
DynamicPopulateExtender
FilteredTextBoxExtender
HoverMenuExtender
•ModalPopupExtender
•MutuallyExclusiveCheckboxExtender
•NumericUpDownExtender
•PasswordStrengthExtender
•PopUpControlExtender
•ResizableControlExtender
•RoundedCornersExtender
•SliderExtender
•TextBoxWaterMarkExtender
•UpdatePanelAnimationExtender
•ValidatorCalloutExtender
MSDN The Next Web NOW! 11/22/2006
AJAX Control Toolkit Extenders
MSDN The Next Web NOW! 11/22/2006
How Do I Get Started?
ASP.NET AJAX Community Technology PreviewReleases every 6-8 weeks
Installs on Microsoft® Visual Web Developer™ 2005 Express Edition and ASP.NET 2.0 (both available for free)
Go Live CTP –build live sites with ASP.NET AJAX today!
ASP.NET AJAX community site: http://ajax.asp.netDownload the latest bits
Tutorials, samples, forums, resources
Download the ASP.NET AJAX Control Toolkit
We want your feedback!
MSDN The Next Web NOW! 11/22/2006
Additional Resources
Client-Centric Programming Using the “Atlas” Client Script Library
http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032302261&Culture=en-US
ASP.NET AJAX Web site
http://ajax.asp.net
Blogs
http://ajax.asp.net/Roller/default.aspx?tabindex=0&mid=474
Nikhil’s Web Development Helper
http://projects.nikhilk.net/Projects/WebDevHelper.aspx
MSDN The Next Web NOW! 11/22/2006