UX-Technologien out-of-the-box:

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

More Information

• http://wpf.netfx3.com

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

Thank you !!!!

oliver.scheer@microsoft.com

http://blogs.msdn.com/olivers