Vyvíjame novú generáciu aplikácií [nielen pre Windows Vista] Roman Russev Academic Developer...
-
Upload
alden-wollen -
Category
Documents
-
view
228 -
download
1
Transcript of Vyvíjame novú generáciu aplikácií [nielen pre Windows Vista] Roman Russev Academic Developer...
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