ux-technologien out-of-the-box:
TRANSCRIPT
UX-Technologien out-of-the-box: AJAX, WPF, Silverlight
Oliver ScheerEvangelist / Microsoft Deutschland
ASP.NET AJAX
• ASP.NET AJAX Library
– Only scripts for the client (browser)
– Can be used from PHP
• ASP.NET AJAX Extensions
– Client- and server-side Extensions
– ASP.NET 2.0 integration
• ASP.NET AJAX Control Toolkit
– Community Driven
– 34 Controls
ASP.NET AJAX Architecture
Microsoft AJAX Library
Browsers (IE, Firefox, Safari, others)
Browser Compatibility
Asynchronous Communications
Script Core Library
Base Class Library
XHTML/CSS Server Scripts
Client Server
ASP.NET 2.0
PageFramework andServer Controls
ApplicationServices
ASP.NET AJAX Extensions
AJAXServer Controls
AsynchronousCommunications
ApplicationServices Bridge
ASPX ASMX
Level 1 – ASP.NET AJAX Extensions
4
ASP.NET AJAX
UpdatePanel, Toolkit
More Information
• http://ajax.asp.net
• http://ajax.asp.net/ajaxtoolkit
WPF = Windows Presentation Foundation
• 1 – Engine
– Draws „Pixel“ on desktop
– Convergence of media (2D, 3D, Video, Audio, Vektor, Bitmap)
• 2 – Framework based on this engine
– C#, VB, etc.
– XAML !!!!
– Enables interop between designer and Developer
• 3 – Part of .NET Framework 3.0
– Access to all elements of the class library
Excursion: XAML
• XAML = eXtensible Application Markup Language
– XML File, describes the UI, Look & Feel
– Can be created with Notepad
– Many 3rd Party Tools
– Expression Studio 1st Choice-Format XAML
<Canvas xmlns=„…" xmlns:x=„…" ><Rectangle Width="200" Height="100" Fill="Black" /><Ellipse Width="200" Height="100" Stroke="Orange" />
</Canvas>
<Canvas xmlns=„…" xmlns:x=„…" >
</Canvas>
<Canvas xmlns=„…" xmlns:x=„…" ><Rectangle Width="200" Height="100" Fill="Black" />
</Canvas>
Segoe UIConvergence
Windows Presentation Foundation
Designer & Developer Workflow with WPF
Cross Platform
Cross Browser
Media Experiences
.NET
Plug-In
RIA
Legend
V1.1
Legend
V1.0
.NET for Silverlight
XAML
Pre
sen
tati
on
Co
reNetworking
JSON
RESTPOX
RSS
Data
LINQ XLINQ
DLR
Ruby Python
WPF
Extensible Controls
BCL
Generics Collections
Inputs
KeyboardMouse Ink
Media
VC1 WMA MP3
Browser Host
MS AJAX
Library
DOM
Integration
UI Core
Images
Vector Text
Animation
DRM
Media
Controls
Layout Editing
CLR Execution Engine
Deploy
Friction-Free
Installer
Auto-
Updater
Application
Services
SOAP
Silverlight
• Version 1.0 Beta
– JavaScript
• Version 1.1 Alpha
– JavaScript
– .NET CLR
Why Silverlight V1.0?
Richer Media(WMV
Investments)
Broad Reach
Visual Studio
Expression Studio
Silverlight development with JavaScript
• Silverlight development is similar to HTML devevelopment
– Presentation format for Silverlight is XAML> XAML is XML (markup)
– Silverlight V1.0 programming language is JavaScript
• AJAX tricks work with Silverlight
• Minimum tools are a text editor and a web browser
Designer and Development Tools
• Developers (focus of this session)
– Visual Studio 2005 and Orcas
– Firebug
– Any text editor
• Designers
– Expression Blend and Design> DES02: Building Rich Web Experiences (4/30, 15:00)
– XAML exporters> Adobe Illustrator, Office (good for font subsetting), Others…
Silverlight V1.0 Components
• Key Components in Silverlight V1.0
– 2D Grapics (shapes, transformations, cliping, masking)
– Animations
– Input: Mouse and Keyboard
– Media (WMV, WMA, MP3)
– Imaging (JPG, PNG)
– Text (static and flow)
– HTTP downloader
– XAML Parser (includes CreateFromXAML API)
– JavaScript DOM
Media
• Media Features
– Video: WMV V7, V8, V9, VC-1
– Audio: WMA V7, V8, V9 (standard), MP3
– Multiple options for deploying media> HTTP progressive download> Integration with Windows Media Server
– Extensive WMV eco-system
Silverlight JavaScript Basics
• Silverlight XAML elements are scriptable via the browser script engine (JavaScript)
• Scriptable objects are obtained via findName
– Scriptable objects (elements) can be controlled via properties andmethods
– Models JavaScript and HTML DOM interaction
– findName is equivalent to document.getElementById()
– Supports tree walking via children collection
• Position set using "Canvas.Top" and "Canvas.Left"
Size can be scaled or set via Height/Width
Silverlight
Media Integration
More Information
• All Alphas, Betas, SDKs, Trials, Samples
• www.silverlight.net
