Vyvíjame novú generáciu aplikácií [nielen pre Windows Vista]Roman RussevAcademic Developer EvangelistMicrosoft

Web alebo Windows?

Dátová vrstva a iné vrstvy

pre n vrstvový model (C#,

VB.NET, T-SQL)

Aplikačná

vrstva (C#,

VB.NET)

Prezentačná

vrstva

funkcie

=

UX1

UX1 = User eXperiance (používateľská skúsenosť)

+ vzhľad

+ vzťah

+ príbeh

WPF Demo

Prospector

XBAP

XBAP DemoAMG

WPFE Demo

Vista.si

WPFE DemoBurton

Predchádzajúce ukážky boli možné len vďaka

Windows Presentation Foundation– Jednotný prístup k UI,

dokumentom a médiám> Integrácia ako súčásť vývoja

pocitov– Integrovaný, vektorovo-orientovaný

kompozitný engine> Využitie výkonu PC v oblasti jeho

grafických služieb– Deklaratívne programovanie

> Zapojíme designerov priamo do vývoja aplikácií

Windows Presentation FoundationWPF je budúcnosť prezentačnej

technológie Windows• WPF je excelentné pre

– Windows aplikácie s komplexnými scenármi vizualizácie dát– Web portály, ktoré chcú posunúť medze pocitov používateľov

• Iné technológie sú však stále dobrým riešením– Windows Forms je stále najlepšie riešenie pre typické

klientské Windows aplikácie– DirectX je stále platformou pre extrémne náročnú grafiku

(hry, CAD aplikácie)– ASP.NET je riešením pre serverové, platformovo neutrálne

aplikácie

Architektúra

Čo to je XAML?

eXtensible Application Markup Language

Deklaratívny značkovací jazyk popisujúci používateľské rozhrania

Prečo deklaratívny?

versus

<Button Background="Red">WPF je super!</Button><Button Background="Red">WPF je super!</Button>

Button btn = new Button();btn.Background = Colors.Red;btn.Content = " WPF je super!";this.Children.Add( btn );

Button btn = new Button();btn.Background = Colors.Red;btn.Content = " WPF je super!";this.Children.Add( btn );

C++C#

VB.NET

PapierJPG / TIFF

PSDPPT

MOV / WMV

XAML

Neštandardnýkód

XHTMLCSS / XSLT

XMLASP.NET

AJAX

Designer Developer

XAML

11/19/200613

Demo

Časti WPF aplikácie

Aplikácia

Rozloženie

Ovládacie prvky a

štýly

Data bindingAkcie

Obsah

Animácie

Layout• Canvas

• StackPanel

• DockPanel

• WrapPanel

• Grid

Ovládacie prvky

• Všetky štandardné prvky sú dostupné

• Niektoré sú nové

• Triedy sú spoločné pre Windows Presentation Foundation– System.Windows.Controls namiesto

System.Windows.Forms.Controls

Štýl

• Ovládacie prvky bez vzhľadu– Poskytujú implicitný look-and-feel, vzhľad môže byť prepísaný

• Logické stromy vs. Vizuálne stromy– Logický strom predstavuje binárnu reprezentáciu XAML súboru– Vizuálny strom je graf, ktorý obsahuje všetky dáta potrebné pre

poskladanie a vykreslenie stránky

• Prepísaním Vizuálneho stromu dosiahneme zmenu štýlu ovládacích prvkov

Logické a Vizuálne stromy

<StackPanel>

<ListBox>

<ListBoxItem>Cat</ListBoxItem>

<ListBoxItem>Dog</ListBoxItem>

</ListBox>

<Button>Hello World!</Button>

</StackPanel>

Data Binding

• Cieľ– Akákoľvek vlastnosť alebo element

• Zdroj– CLR objekt– WPF element– ADO.NET– XML

• Rôzne modely– One Time– One Way– Two Way

Control

“Data Item”

Property

Binding

Property

Akcie

• Trigger– Umožňuje, aby niektoré UI udalostí boli spracované pomocou

XAML, a nie pomocou code-behind– Vhodné pre veci ako napríklad “mouse over” efekty

• Udalosti - events– Ovládacie prvky podporujú všetky štandardné udalosti ako click,

key press, selection changed, atd.– Udalosti sú spracované v code-behind súbore v jazykoch C# alebo

VB

22

WPF Vlastnosti

2D

3D

AudioImaging

TextVideoEffects

Composition Engine

Animation

XAML

Accessibility

Property System

Input & Eventing

Document Services

Packaging Services

Application Services

Deployment Services

Controls

Layout

Databinding

User Interface Services

Media Integration Layer Base Services

XPS Documents

Demo

“WPF” aplikácia

24

MS Webová platforma

Windows Presentation Foundation

Prehliadač s rozš. funkcionalitou“WPF/E” + “AJAX”

XAML, riadený kód, JavaScript

JavaScript

Ľubovolný prehliadač“AJAX”

Microsoft Web Platforma Microsoft UX technológie

XAML, riadeny kód

XBAP

XAML / .NET FX

Vysoka kvalita a výkon

Plná integrácia s desktopom

„Za hranice prehliadača“

Úplná vývojová platforma

XAML / .NET FX

Grafika, média, animácie

Neutrálna platforma

Bezbariérova dostupnosť

Nízke latencie, lepší UX

Plna podpora štandardov

Dostu

pn

ý

Boh

atý

25

“WPF/E” Vlastnosti

Document Services

User Interface Services

Media Integration Layer Base Services

2D

3D

AudioImaging

TextVideoEffects

Composition Engine

Animation

XAML

Accessibility

Property System

Input & Eventing

Packaging Services

Application Services

Deployment Services

Controls

Layout

Databinding

XPS Documents

26

“WPF/E” ArchitektúraPrehliadač Aplikácia / OS

Baličekobsahu

XAML

ProgramovýModel

“WPF/E” Runtime

Plug-insPlug-ins Platformovo špecifickýmodel hostovaniaPlatformovo špecifickýmodel hostovania

JavaScript

C# / VB.NET

Natívne API

XML - DátaFonty Video/AudioObrázky

Natívne “WPF/E” APINatívne “WPF/E” API

UI & vykresľovacie jadroUI & vykresľovacie jadro

Vrstva platformovej abstrakcieVrstva platformovej abstrakcie

27

ProgrammingModel

JavaScript “Atlas”

C# / VB.NET

Native API

Payload XAML

XML - DataFonts Video/AudioImages

IL“Atlas” Scripts

JavaScript

“WPF/E” Architektúra1.1

MB

Media

CLR

Platforma

UI

Vrstva integrácie médií

Audio Video

Composition Engine

Základné služby

XML/XAML Parser

Accessibility

Property System

Input and Eventing

Text

Imaging

2D

Animation

Ďalšie služby

Core Controls

Basic Layout

Container Controls

UI a vykresľovanie

Video• WMA, WMV a MP3 kodek• Alpha kanál• HTTP Progressive Download• HTTP Streaming

Verzia 2• RTSP• DRM

CLR (v2)• MSIL kompatibilita• C# alebo Visual Basic• Managed DOM manipulácia• Sandboxed

Platformy•Podporované prehliadače

• Internet Explorer 6.0 +• FireFox 1.0 +• Mozila 1.0 +• Safari 1.0 +• Opera 7.0 +

• Podpora OS:• Win XP +• OS X 10.*

“WPF/E” a WPF

• “WPF/E” je podmnožinou WPF– Ide o dočasný kódovy názov

• Sú podobné– Podmožina jazyka XAML– Využívajú sa rovnaké nástroje

• ale zároveň iné– Veľkosť a vlastnosti: “WPF/E” ~ 1.1 MB (.NET 3.0 ~25MB)– Nepotrebuje .NET 3.0 ani WPF– Beží vždy v SandBoxu– Podpora viacerých platforiem

>OS>Prehliadač

Demo

“WPF/E” aplikácia

Inštalácia

• “WPF/E” plug-in pre prehliadač–http://go.microsoft.com/fwlink/?LinkID=777

92&clcid=0x409

• “WPF/E” SDK–http://go.microsoft.com/fwlink/?linkid=777

91&clcid=0x409

• “WPF/E” podpora vo VS 2005–http://msdn2.microsoft.com/en-us/library/b

b190632.aspx#starting_with_wpf-e_topic5

Expression Studio

11/19/200631 31 Microsoft Confidential – NDA Required

Whether you are designing rich standards-based websites, ultimate experiences on the desktop, or managing digital assets and content, Expression professional design tools give you the flexibility and freedom to bring your vision to reality.

Profesionálny nástroj pre

Web designerov

Profesionálny nástroj pre

design Interakcie

Profesionálny nástroj pre

Grafických designerov

Profesionálny nástroj pre

Management zdrojov

32

Expression Blend

33

Vaše pieskovisko sa práve zväčšilo– Navrhujte unikátne

aplikácie, ktoré spájajú to najlepšie z webu a desktopu

– Spolupracujte s vývojarmi Visual Studia a získajte novú úroveň produktivity medzi designerom a vývojarom

Umenie a technológia– Spojte plné spektrum

grafických prvkov, vrátane vektorovej grafiky, bitových obrázkov, textu s vysokou kvalitou, vídeom a reálnym 3D obsahom

– Plný toolbox ovládacich prvkov pre tvorbu príťažlivého UI

Celá platforma– Využite plný výkon OS

Windows Vista, od desktopov až po prehliadač

– Navrhnite úžasnú používateľskú skúsenosť s bohatou grafikou, animáciami a interaktívnym UI

Expression Design

34

Rozšírte svoje portfólio– Navrhnite vlastné UI

elementy pre Windows aplikáce

– Perfektný spoluhráč pre Expression Blend

Navrhnutý pre Design– Moderné UI rozhranie

napísané a od začiatku určené pre profesionálnych designerov

– Výkonné vektorové kresliace nástroje a nedeštruktívne efekty

Vaša vízia,Neobmedzená– Zaisťuje integritu návrhu

vďaka výmennému XAML formátu a workflow

– Exportujte svoje návrhy v XAML kóde a tieto budú použiteľné pre návrh ľubovoľného UI a skinovania ovládacich prvkov

Expression Web

Nova éra, nové nástroje– Postavený na moderných

štandardoch určených pre návrh webu s plnou podporou pre XHTML, CSS, XML, and XSLT

– Drag and drop ASP.NET 2.0– Spolupracujte s vývojármi

vo Visual Studiu pre maximálnu flexibilitu návrhu web aplikácií

Profesionálne– Professional UI ponúka

presnú kontrolu nad rozloženim stránky a formátovaním

– Vizuálni designeri a špecializované panely pre prácu s CSS štýlmi

Pracujete so štandardami– Vytvárajte vysokokvalitné,

dynamické a interaktívne stránky, ktoré využívajú plný výkon webu

– Plná podpora pre štandardy, prístupnosť a kompatibilita vo všetkých prehliadačoch

Tame Your Media– Manage all of your media

assets in one place with extensive annotations, metadata, search, and browsing (even while offline)

– Support for over 100 different media formats and file types, including images, fonts, and video

Your Workflow,Enhanced– Rename, convert, tag, and

batch process files quickly, and use powerful search to find and retrieve the files you need

– Edit images and keep track of changes with version control and folder watching

Presentation is Everything– Export files to multiple

formats,build slide shows and videos, or create professional Web galleries

– Includes Expression Media Encoder, for conversion,enhancement, and compression of rich Web video

Expression Media

11/19/200636

Tame your Video Compression Workflow– Batch import WMV, AVI,

MPEG, QT, and more via plug-ins.

– Integrate easily into existing workfow

– Powerful command-line encoder for application and server-based integration

Enhance Effortlessly– Trim, crop, resize, add

bumpers, markers, overlays, and more to your video

– Professional effects and alpha compositing support

– Extensible metadata management for asset tracking

Publish for the Web and beyond– Stunning quality with Emmy®

Award winning Windows Media & SMPTE VC-1 compression

– Customizable publishing profiles for desktop, Web, and devices.

– Template-based “WPF/E” publishing for cross-platform, cross-browser playback

a feature of Expression Media

Expression Media Encoder

37

Záver

• WPF a WPF/E uľahčujú tvorbu aplikácií s úplne odlišnou používateľskou skúsenosťou

• „WPF/E“ pre vývoj interaktívnych webových aplikácií vychádzajúcich z jazyka XAML

• Expression studio pre tvorbu nových typov aplikácií s intenzívnym designom

Zdroje

• http://msdn.microsoft.com/wpfe

• http://channel9.msdn.com/playground/wpfe/

• http://blogs.msdn.com/mharsh

• http://blogs.msdn.com/jstegman

Lokálne vývojárske zdroje

• Slovenský a český MSDN web– Semináre, produktové informácie, proma, informácie o podpore, ...

> http://www.microsoft.com/slovakia/msdn > http://www.microsoft.com/cze/msdn

• CZ/SK technologické webcasty k stiahnutiu> http://www.microsoft.com/cze/msdn/webcasts/default.mspx > Naviac je možné zadarmo objednať na DVD» https://www.microsoft.com/cze/msdn/connection/default.mspx

• Slovenské príručky a praktické cvičenia (HOL-y)– V priebehu 2kv. na témy ASP.NET AJAX, Expression nástroje, XNA

atď.> www.microsoft.com/slovakia/msdn

Ako registrovať spravodaj?

• Pomocou profil centra– http://www.microsoft.com/slovakia/profilecenter

• Alebo priamo na adrese– https://profile.microsoft.com/RegSysProfileCenter/SubCntAvailable.

aspx?lcid=1051

“WPF/E” plug-in

<object id="WpfeControl" width="400" height="100" classid="CLSID:32C73088-76AE-40F7-AC40-81F62CB2C1DA"  <param name="BackgroundColor" value="#ffebcd" /> <param name="SourceElement" value=null /> <param name="Source" value="HelloWorld.xaml" /> <param name="WindowlessMode" value="true" /> <param name="MaxFrameRate" value="30" /> <param name="OnError" value="myErrorHandler" /></object> 

<Canvas/>

• Rodičovský prvok všetkých elementov

• Môže obsahovať ďalšie elementy <Canvas/>

• z-order určený poradím prvkov vložených do elementov– posledne deklarované objekty sú

zobrazené jako prvé

Základné objekty

• Ellipse

• Rectangle (dá sa nastaviť zaoblenie rohov)

• Line

• Polygon – uzatvorený objekt

• Polyline – nemusí byť uzatvorený

• Path – obsahuje čiary, krivky a oblúky

• TextBlock – pre zobrazenie textových informácií

Multimédia

• Image–Podpora PNG, JPG

• MediaElement–Podpora WMA, WMV, MP3–metody: play(), pause(), stop()

Průhlednost

• Opacity – vlastnost elementů– 0.0 ... 1.0 (neprůhledný)

• OpacityMask – Styl průhlednosti– používá všechny typy štětců

Štětce

• SolidColorBrush – “black” = “#000000” = “#ff000000“

• LinearGradientBrush

• RadialGradientBrush

• ImageBrush

RenderTransform

• RotateTransform– Rotace objektu o určitý počet stupňů

• SkewTransform– Zkosení objektu dle osy X a Y

• ScaleTransform– Rozšíření, zkrácení objektu dle osy X a Y

• TranslateTransform– Posun objektu dle osy X a Y

• TransformGroup– Pro případ, kdy chceme použít více transformací na jeden

objekt

Animace

• Objekty musí mít jméno –x:name = "objekt"

• EventTrigger–RoutedEvent = událost pro spuštění

triggeru

• EventTrigger.Action–Pro animaci použijeme element StoryBoard

<StoryBoard/>

• Může obsahovat více animací

• Animace se provádí změnou vlastností jednotlivých elementů– DoubleAnimation = vlastnosti typu Double– ColorAnimation

>Pro animaci Stroke či Fill se provádí animace vlastnosti Color prvku SolidBrush

– PointAnimation

Události

• V XAML kódu– Událost = "javascript:funkce"

• V kódu stránky– Definovat javascript funkci: funkce (sender, args)– Není nutné definovat parametry

• Nejčastější události:– MouseLeftButtonDown, MouseLeftButtonUp,

MouseEnter (přejezd myší nad elementem), MouseLeave a MouseMove

– Loaded = vyvoláno těsně před zobrazením elementu

Přístup vně “WPF/E”

• document.getElementById()– Najdeme embedded prvek

• Embedded prvek– findName()

function changeEllipseColor2(sender, args) {

var ag6 = document.getElementById("ag6"); ag6.findName("myEllipse").fill = "red";

}

createFromXaml()

• Pro dynamickou tvorbu vlastností a elementů

function createEllipse(sender, args)

{ var agControl = document.getElementById("ag7");

var e = agControl.createFromXaml('<Ellipse Height="200" Width="200" Fill="Blue"/>');

var canvas = sender; canvas.children.Add(e);

}

Interakce s animací

• StoryBoard metody– begin, stop, resume, pause– Nutné pojmenovat element

function animation_stop(sender, args)

{ sender.findName("animation").stop(); }

function animation_pause(sender, args)

{ sender.findName("animation").pause(); }

function animation_begin(sender, args)

{ sender.findName("animation").begin(); }

“WPF/E” roadmapa

CTP vlastnosti

• Cca 1.1 Mb core, <5 Mb všechny vlastnosti– IE, FF, Safari– WinXP+, Mac OS X

• Audio, Video (WMV, WMA, MP3) a obrázky (PNG, JPG)

• Vektorová grafika, text, animace

• Základní elementy umožňující vytvářet vlastní ovládací prvky

• Asynchronní downloader

• Programovací jazyk JavaScript

V1 vlastnosti

• Integrace s Windows Media Server

• Podpora balíčků

• Z-Order

• Control context menu

V2

• Integrace s CLR

• Podpora v nástrojích

• Text input

• Ovládací prvky (Tree, Mřížka, Panely, ...)

• Lokalizace runtime atd. (včetně ČR a SK)

• 3D

• Dialogová okna

• Možnost využití hardwarové akcelerace

Roadmapa

• CTP – Únor 2007

• V1 release to web – Mix 2007– Zaměřené na Webovou část– CTP pro V2

• V2 - PDC 2007 říjen 2007