Windows Presentation Foundation and Windows Presentation Foundation and User Experience User Experience … and Atlas … and Atlas
Paul Cross
Richard Godfrey
Microsoft
AgendaAgenda
Aims• Suggest how we have got to ‘here’
• Show where Microsoft are heading as a ‘Roadmap’
Side-Aims• Provide examples and demos for illustration
Anti-Aims• Too much marketing • Show ‘how’ to use the technologies
• Dig into implementation depth
User Experience 'UX' MattersUser Experience 'UX' Matters
VHS VCR PVR (Windows MCE)
http://www.artlebedev.com/
What is UX?What is UX?
The world we are in …The world we are in …
The 'Real World'The 'Real World'
• Functionality traditionally comes first
• Little application development time for 'user experience' beyond prototypes• Cost/Value justification breaks down?
• Developers are not designers!
• Except some Web developers?
• Tooling inadequate
• Flash? CSS?
Consumers and the EnterpriseConsumers and the Enterprise
• Consumer activity drives enterprise activity• Windows
• Office
• XBox Live
• GPU
• Blogging
• Online Presence – Messenger, Yahoo, AOL, ICQ …
• …
Why does it matter now?Why does it matter now?
• It always mattered • Information Overload
• Real Business impact• Faster
• Make business decisions faster on more data
• Cheaper• Reduce costs
• Less training time (e.g. PoS operators)
• Reduce errors e.g. restricted UI, User self service
• Better• Enhanced user/customer experience
• Data visualisation
• ‘Stickiness’ e.g. Making it more stylish, approachable
Is it a Client or a Server?Is it a Client or a Server?
• Through the decades …• White coats
• The 50s: Scheduling Time• The 60s: Batch Processing• The 70s: Timesharing & OLTP
• Empowering the user• The 80s: PCs & Client-Server
• User self-service• The 90s: Internet & Services
• Community• The 00s: Users & Experiences?
• Observations• Computing power moving to the ‘edge’ of the network
• E.g. CPU, GPU• Mobile devices
• Move to user centricity• BUT … Issues with deployment, manageability, security …
• Rhetorical Question: Is the Thin Client era a stop-gap?
Where are we now (or nearly)?Where are we now (or nearly)?
• 'SOA' in the Enterprise
• Thin client experience seen as lacking (AJAX)
• 'Web 2.0' and 'Mashups' in the consumer space
• Designers engaged in the software lifecycle
• Tooling directed at the User Experience domain
• Agile development practices
Richness vs. ComplexityRichness vs. Complexity
UX RichnessUX Richness
Developer
Developer
Productivity
Productivity
ASP.NET 2.0(HTML)
Windows Forms 2.0
Direct 3D v9
AvailabiliAvailability: ty:
2005
DHTML
1997
Web Services &Offline/Online
support
DeveloperProductivity
NetworkDependency
Limited UserExperience
ComplexTo Develop
Easy ChangeManagement
Ease ofDeployment
Tough toDeploy
HeavyFootprint
DLL Hell
Rich UserExperience
Responsive
AJAX/AtlasAJAX/Atlas
AJAX is …AJAX is …
• Not a product
• Not a specification
• Not a standard
• Not a floor cleaning product
• Not the name of the son of Telamon of Salamis who fought against Troy
• Not an Amsterdam football team
AJAX isAJAX is
• Asynchronous Javascript And XML
• A layer of abstraction between the browser and the web server
• Available in Internet Explorer since 1999
• Improved UX through client-side interactions while data fetches are asynchronous
• According to some commentators, the future of all web development …
Typical Technologies for AJAXTypical Technologies for AJAX
• XHTML and CSS• Document Object Model (DOM)• XMLHttpRequest object• JavaScript• XML• XSLT• Etc.
DemoDemo
Atlas OverviewAtlas 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, behaviours
• Custom server controls
• Enables complex script-based applications• Makes script development more approachable
Atlas Approach to DevelopmentAtlas Approach to Development
• Application development• Simple inclusion of script-based functionality via script
components, server controls
• Separation of UI and behaviour
• Component development• Enables disciplined approach to scripting
• Framework for encapsulating data and logic
• Abstracts browser differences
• Provides building blocks for higher level development
Atlas Client OverviewAtlas Client Overview
• Collection of JavaScript (.js) files providing features for object-oriented development• Browser compatibility layer• Atlas core services
• Classes, namespaces, event handling, inheritance, data types and object serialisation
• Base class library• String builders, debuggers, timers and tracing
• Networking layer• Communication with web-based services and applications• Management of the asynchronous remote method calls
• UI layer providing a number of Atlas client capabilities:• Behaviours• The Atlas declarative syntax• UI components• Data binding
• Controls layer that creates Atlas-specific controls • Data-bound, scripted, drag and drop, auto-completion text box, ordinary
form controls, data-bound listview control, navigation controls
Atlas Server OverviewAtlas Server Overview
• Includes components in ASP.NET, including web services and server controls• Work in conjunction with Atlas client script libraries
• Leverages the following:• Profiles service• Membership service• Roles service• Personalisation services• Globalisation and culture-specific services
• Atlas server controls that resemble ASP.NET server controls• Emit Atlas client script• Simplify the process of producing Atlas client script• E.g. Buttons, labels, options, textboxes, check boxes, hyperlinks and
validation controls• Special Atlas controls that emit JavaScript to produce client
behaviours• HoverBehavior control, a ClickBehavior control, a Popup control and an
AutocompleteBehavior control
ASP.NET Atlas Server ExtensionsASP.NET Atlas Server Extensions
Atlas Server Controls
Atlas Server Controls
App Services Bridge
App Services Bridge
Web Services Bridge
Web Services Bridge
What is Atlas?What is Atlas?
Atlas Server Atlas Server FrameworkFramework
Atlas Client Framework and Atlas Client Framework and ServicesServices
Atlas Client Script LibraryAtlas Client Script Library
Controls, ComponentsControls, Components
Script CoreScript Core
Base Class LibraryBase Class Library
Component Model and UI FrameworkComponent Model and UI Framework
Browser Compatibility
Browser Compatibility
Atlas Client Application Services
Atlas Client Application Services
Local StoreLocal StoreBrowser
Integration
BrowserIntegratio
n
ASP.NET 2.0ASP.NET 2.0
Application Services
Application Services
Page Framework,Server Controls
Page Framework,Server Controls
Atlas-enabled Atlas-enabled ASP.NET PagesASP.NET Pages
Atlas-enabled Atlas-enabled ASP.NET PagesASP.NET Pages
Web ServicesWeb Services(ASMX or WCF)(ASMX or WCF)
Web ServicesWeb Services(ASMX or WCF)(ASMX or WCF)
HTML, Script,HTML, Script,AtlasAtlasMarkupMarkup
HTML, Script,HTML, Script,AtlasAtlasMarkupMarkup
AtlasAtlasServiceServiceProxiesProxies
AtlasAtlasServiceServiceProxiesProxies
Windows Presentation Windows Presentation FoundationFoundation
Windows Presentation Windows Presentation FoundationFoundation• Next generation framework for building smart clients
• That could only be built by very experienced graphic programmers previously
• Declarative (XAML) for designers• Object-based for developers
• Available for Windows Vista, Windows XP and Windows Server 2003
WinFXWinFXData Communication
Base Operating System Services
ObjectsObjects SQLSQLXMLXML WinFSWinFS ……
'DLinq'(ADO.NET)'DLinq'(ADO.NET)
'XLinq'(System.XML)
'XLinq'(System.XML)
StandardQueryOperators
StandardQueryOperators
Language Integrated QueryLanguage Integrated Query
……
Identity and AccessServices(AD-RMS, AD-STS, 'InfoCard')
Identity and AccessServices(AD-RMS, AD-STS, 'InfoCard')
CollaborationServices(People Near Me, …)
CollaborationServices(People Near Me, …)
……Windows WorkflowFoundation
(System.Workflow)
Windows WorkflowFoundation
(System.Workflow)
Presentation
ASP.NETWindowsForms
Windows Presentation Foundation
Composition EngineComposition Engine
Visual SystemVisual System
ElementsElements
DocumentsDocuments
Desktop Window Manager
Desktop Window Manager
HardwareRenderingHardwareRendering
Software RenderingSoftware Rendering
UIUI MediaMedia
ControlsControls
Designer ServicesDesigner Services
App ServicesApp Services
ApplicationServicesApplicationServices Controls InteropControls Interop
ApplicationHostingApplicationHosting
Application ServicesApplication Services
PagePage
ServerControlsServerControls
'Atlas' ClientScript Framework'Atlas' ClientScript Framework
'Atlas'ServicesBridge
'Atlas'ServicesBridge
…(DB2,Oracle,
…(DB2,Oracle,
Message Message
Channel (TCP, Peer, Security, Reliability, …)Channel (TCP, Peer, Security, Reliability, …)
Binding (WS-*, HTTP/XML, …)Binding (WS-*, HTTP/XML, …)
System.ServiceModelSystem.ServiceModel
Windows Communication Foundation
Web Services(HTTP, REST, XML-RPC, RSS, WS*, …)
Protocols(Pipes, IPvX/Sec, UDP, TCP, SMTP, …)
Contracts(XSL, XSD, WSDL, SDM,… )
Declarative Programming(XAML, Workflow, ASP.NET, …)
Integration
Transactions Storage
Protocols
Network Services
Base Class LibrariesBase Class Libraries
Memory ManagerMemory Manager
Hosting LayerHosting Layer
Code ExecutionCode Execution LoaderLoader SecuritySecurity SerializationSerialization
LightweightTransactionsLightweightTransactions
TransactionCoordinatorTransactionCoordinator
KernelTransactionManager
KernelTransactionManager
LoggingServiceLoggingService
KernelKernel
Hardware Abstraction LayerHardware Abstraction Layer
ProcessManagerProcessManager
SecurityReference Monitor
SecurityReference Monitor
LPCFacilityLPCFacility
MemoryManagerMemoryManager
PowerManagerPowerManager
ConfigManagerConfigManager
Plug andPlayPlug andPlay
TransactedNTFSTransactedNTFS
Cache ManagerCache
ManagerUniversalData Format
UniversalData Format
FilterEngineFilterEngine
TCP, UDPIPV4, IPV6TCP, UDPIPV4, IPV6 IPSECIPSEC QOSQOS HTTP
ListenerHTTPListener
Internet Connection FirewallInternet Connection Firewall
Demand Activation and Protocol HealthDemand Activation and Protocol Health
PNRPPNRP NativeWiFiNativeWiFi SIPSIP TCP
ListenerTCP Listener
UDP ListenerUDP Listener
IPC ListenerIPC Listener
Network Class LibraryNetwork Class Library
GDI/GDI+GDI/GDI+ WindowManagerWindowManager
GlobalAudio Engine
GlobalAudio Engine
Direct 3DGraphicsDirect 3DGraphics
Graphics driversGraphics drivers
DDIDDI InputManagerInputManager
AudioDriversAudioDrivers
DirectX GraphicsMini port
DirectX GraphicsMini port
RedirectorsRedirectors
SCSI/FCSCSI/FC 802.3802.3 802.11802.11 ....
Device Drivers
ManagementServices
(Event Logs,Tracing,Probes,
Auto Update,Admin)
ManagementServices
(Event Logs,Tracing,Probes,
Auto Update,Admin)
IO ManagerIO Manager
Application DeploymentEngine (Click-Once)
Application DeploymentEngine (Click-Once)
Identity &SecuritySystem
Identity &SecuritySystem
FAT 16/32FAT 16/32
FilterManagerFilterManager
DistributedFile SystemDistributedFile System
Virtual ShadowCopy ServiceVirtual ShadowCopy Service
File ReplicationServiceFile ReplicationService
Virtual DiskServiceVirtual DiskService
CLR
Windows Vista PlatformWindows Vista Platform
Full Trust or Web Browser App (.wba)
Click-Once Deployment
Windows Presentation Foundation Windows Presentation Foundation (1)(1)
Tool-ableDeclarative XAML
Data Driven
Windows Presentation Foundation Windows Presentation Foundation (2)(2)
Graphics Designer & Developer in Perfect Graphics Designer & Developer in Perfect Harmony Harmony
Unified API for UI, Documents, Media
Rich Control Set
Control Composition
Windows Presentation Foundation Windows Presentation Foundation (3)(3)
Animation
Hardware Rendering & Composition
Scalable UIRich Media
Vector Raster
Text
3DVideo
Windows Presentation Foundation Windows Presentation Foundation (4)(4)
Readability
Printing
Windows Presentation Foundation Windows Presentation Foundation (5)(5)
What couldn’t be done easily What couldn’t be done easily before?before?
• 2-dimensional and 3-dimensional graphics
• Animation
• Vector-based graphics
• the capability to zoom without distorting the image
• Audio and video integration
• Fixed and flow format documents
• Easy data binding, styling, templates
• WYSIWYG & vector-based printing
Windows Presentation FoundationWindows Presentation Foundation
DemoDemo
'WPF/E' Web Architecture'WPF/E' Web Architecture
Browser Application / OS
ContentPackage
XAML
ProgrammingModel
'WPF/E' Runtime
Plug-insPlug-ins Platform SpecificHosting ModelPlatform SpecificHosting Model
JavaScript
C# / VB.NET
Native API
XML - DataFonts Video/AudioImages
Native 'WPF/E' APINative 'WPF/E' API
UI & Rendering CoreUI & Rendering Core
Platform Abstraction LayerPlatform Abstraction Layer
'WPF/E' Features'WPF/E' Features
Core Runtime
Media Integration LayerMedia Integration Layer
AudioAudio VideoVideo
Composition EngineComposition Engine
Base ServicesBase Services
XML/XAML ParserXML/XAML Parser
AccessibilityAccessibility
Property SystemProperty System
Input and EventingInput and Eventing
TextText
ImagingImaging
2D2D
AnimationAnimation
Other ServicesOther Services
Core ControlsCore Controls
Basic LayoutBasic Layout
Container ControlsContainer Controls
SummarySummary
Richness vs. ComplexityRichness vs. Complexity
UX RichnessUX Richness
Developer
Developer
Productivity
Productivity
ASP.NET 2.0(HTML)
Windows Forms 2.0
Direct 3D v9
AvailabiliAvailability: ty:
2005 2006
DHTML(AJAX)
1997
ASP.NET 'Atlas'
Approachable
Direct 3Dv10
Richness
WindowsPresentationFoundation
Optimised Richness
& Approachable
What to use … and when?What to use … and when?
• Atlas Pros• Platform reach• Extends current web technology
(HTML, CSS, etc.)• Zero deployment
• WPF Pros
• Richest experience
• Offline capability
• ClickOnce deployment
• Text/Fonts
• Atlas Cons
• Learning curve (less with)
• Maintainability (less with)
• Requires Javascript on browser
• Restricted by Javascript and HTTP abilities
• Compatability?
• Tools lag
• WPF Cons
• Microsoft XP & Vista specific (for now)
• Client footprint required
• Tools lag
2006 2006 H2H2Vista Release(inc WPF)
2006 2006 H1H1
WPF Beta2
Platform RoadmapPlatform Roadmap
NowNow
WPF Feb CTPAtlas Mar CTP & Go Live Licence
20072007
Expression Interactive DesignerVS 'Orcas' (inc Atlas)
Next Session – WRK10104Next Session – WRK10104
• Workshop• A look at Atlas and WPF in action
• Q&A & Debate
• In Conwy 2 Room
Top Related