PRS 420: Developing “Atlas” Components and Controls: PRS 420: Developing “Atlas” Components and Controls ASP.NET: Future Directions for Developing Rich Web Applications with “Atlas”


Agenda: Agenda Quick overview of the “Atlas” Framework Demos, demos, demos… Scenario: Photo Browsing Application Building script components and controls Enhancing Server Controls with “Atlas” Roadmap


“Atlas” Overview: “Atlas” Overview End-to-end application framework Enables building rich, interactive DHTML applications Component oriented framework Imperative and declarative programming models Integrates with ASP.NET Extensible Application framework Custom script components, controls, behaviors Custom server controls Enables complex script-based applications Makes script development more approachable


The Application: The Application Photo Browser


Architecture Diagram: Architecture Diagram “Atlas” Server Framework “Atlas” Client Framework and Services “Atlas”-enabled ASP.NET Pages Web Services (ASMX or WCF) HTML, Script, “Atlas” Markup “Atlas” Service Proxies


“Atlas” Approach to Development: “Atlas” Approach to Development Application development Simple inclusion of script-based functionality via script components, server controls Separation of UI and behavior Component development Enables disciplined approach to scripting Framework for encapsulating data, and logic Abstracts browser differences Provides building blocks for higher level development


Script Types and Components: Script Types and Components Scenario: Script code can be ad-hoc, unmaintainable, etc. Solution: Encapsulate data and logic into classes Expose intuitive object model “Atlas” provides OOP constructs for script Namespaces, classes, interfaces, inheritance, etc. “Atlas” enables classes to be wired together Web.Component Describe their object model Participate in dispose mechanism Support declarative usage


Implementing Script Types: Implementing Script Types Sequence Component


Communicating with the Server: Communicating with the Server Scenarios: Applications need to access data and other server-side infrastructure Solution: Expose server functionality as web services and access them using XMLHTTP “Atlas” provides key building blocks to address the scenario WebRequest abstracts XMLHTTP ServiceMethodRequest, and PageMethodRequest allow invoking WebMethods Auto-generated script proxies make it super simple DataSource allows retrieving and modifying data tables


Implementing Data Access: Implementing Data Access PhotoList Component


Script Controls: Script Controls Scenario: Applications provide dynamic and interactive user interfaces and visualize data Solution: Build and package UI logic as components associated with HTML markup “Atlas” Control Classes that derive from Web.UI.Control Web.UI.TextBox, Web.UI.ListView Core set of controls built-in Allows defining behavior separate from UI Can manipulate DOM, handle events, participate in validation etc.


Implementing Script Controls: Implementing Script Controls SlideShow Control


Server Controls: Server Controls Scenario: Server-side applications need to be enriched with client functionality Solution: Enhance server controls to generate “Atlas”-enabled pages while preserving server programming model “Atlas” server control and components framework Built on top of ASP.NET v2.0 IScriptComponent, ScriptManager RenderScript and related methods Server-side representations of bindings, actions, behaviors, … Server-side properties, events etc. Support for postback scenarios


Implementing “Atlas” Server Controls: Implementing “Atlas” Server Controls PhotoSelector Control PhotoDataSource Control


Roadmap: Roadmap Public developer previews and betas http://atlas.asp.net Updates, sample apps, quickstarts, and documentation released on an on-going basis Formal release with ASP.NET v-next Upcoming Additions New Controls: RichTextBox, DatePicker, … New Application Services: Culture Support for additional patterns and scenarios: Optimized network usage, Component model enhancements Improved support for debugging Enhanced integration with server controls framework


Community Resources: Community Resources At the PDC Ask the Experts – Tonight PNL06 – Panel discussion on Microsoft’s Web Platform 8:30 am tomorrow Labs: PRSHOL22 – Using “Atlas” to build applications After the PDC Related sessions to check out on the DVD PRS312 - ASP.NET: Future Directions for Developing Rich Web Applications with “Atlas” (Part 1) PRS401 – Developing ASP.NET Server Controls Atlas Community Site and Forums http://atlas.asp.net


Key Takeaways: Key Takeaways “Atlas” is an end-to-end application framework that integrates with ASP.NET and enables building script-based rich user experiences Makes script-based development more approachable Is extensible Think about enhancing user experiences in your applications Download the “Atlas” Preview bits today! Check out the samples and built-in features Build components for your scenarios Ask questions, send feedback, participate


Discussion: Discussion Questions and Answers…


Slide19: © 2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.


Appendix: Presentation Abstract: Appendix: Presentation Abstract This presentation takes an in-depth look at ASP.NET “Atlas” from the component developer’s perspective. The first half demonstrates extending the “Atlas” client script library to build classes, components, and controls that encapsulate UI logic, XMLHTTP-based data access, and provide support for imperative and declarative programming models. Next, the presentation explores enriching ASP.NET server controls and the server-based programming model with client-side functionality. Along the way, various script programming patterns, script debugging and related tools are demonstrated.


Appendix: Bonus Topics: Appendix: Bonus Topics “Atlas” Architecture Diagram in more detail Client Server Services Script Behaviors


Architecture Diagram DetailsClient: Architecture Diagram Details Client Script Core JavaScript extensions to Array, String, … OOP patterns and type system Base Class Library StringBuilder, Debug, Event, Serialization, … WebRequest, WebResponse, MethodRequest DataTable, DataSource Declarative Script Markup Component Model and UI Framework Component, IDisposable, TypeDescriptor, Binding, … Control, Behavior, Validator, Templates, DragDrop, Popup, UI Effects, … UI Controls TextBox, ListView, ItemView


Architecture Diagram Details Server: Architecture Diagram Details Server Server Control Framework Allows rendering UI markup, and script markup Describe corresponding script OM Web Services Bridge Support for .asmx and WCF services Automatic generation of script proxies Uses JSON serialization, GET/POST protocols App Services Bridge Expose server application services and .NET framework functionality for use from client Authentication, Profile, CultureInfo, …


Architecture Diagram Details Client Application Services: Architecture Diagram Details Client Application Services Safe mechanisms for enabling rich client user experiences and application integration Offline storage … More details to come


Script Behaviors: Script Behaviors Scenario: Add additional semantics to an existing control without creating a derived control for each time. Solution: Write extension components that can be associated with other components “Atlas” Behaviors Classes that derive from Atlas.UI.Behavior Examples: Web.UI.HoverBehavior, Web.UI.Draggable Components associated with a control Can respond to DOM events, manipulate DOM Usually annotate or modify existing HTML


Implementing Script Behaviors: Implementing Script Behaviors OverlayBehavior CrossFadeBehavior