Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Microsoft Expression Blend Vývoj WPF aplikací Dalibor Kačmář Microsoft.

Podobné prezentace


Prezentace na téma: "Microsoft Expression Blend Vývoj WPF aplikací Dalibor Kačmář Microsoft."— Transkript prezentace:

1 Microsoft Expression Blend Vývoj WPF aplikací Dalibor Kačmář Microsoft

2 funkce + vzhled + příbuznost + příběh = UX 1 = User eXperiance (zkušenost uživatele)

3

4

5

6 Windows Presentation Foundation –Jednotný přístup k UI, dokumentům a médiím >Integrace jako součást vývoje pocitů –Integrovaná, vektorově-orientovaný kompozitní engine >Využití výkonu PC formou grafických služeb –Deklarativní programování >Zapojíme designery přímo do vývoje aplikací

7 WPF je budoucností prezentační technologie Windows WPF je excelentní pro –Windows aplikace s komplexními scénáři vizualizace dat –Web portály, které chtějí posunout meze pocitů uživatelů Jiné technologie jsou dnes však stále dobrým řešením – Windows Forms je stále nejlepší řešení pro typické klientské Windows aplikace – DirectX je stále platformou pro extrémně náročnou grafiku (hry, CAD aplikace) – ASP.NET je řešením pro serverové, platformně neutrální aplikace

8

9 eXtensible Application Markup Language Deklarativní značkovací jazyk popisující uživatelská rozhraní

10 versus WPF je super! 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 );

12 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ální nástroj pro Web designéry Profesionální nástroj pro design Interakce Profesionální nástroj pro Grafické designéry Profesionální nástroj pro Management zdrojů 12

13 13 Vaše pískoviště se právě zvětšilo –Navrhněte nevídané Windows aplikace, které míchají to nejlepší z webu a desktopu –Spolupracujte s vývojáři za pomocí Visual Studia a získejte novou úroveň produktivity mezi designerem a vývojářem Umění a technologie –Namíchejte plné spektrum designerských elementů včetně vektorové grafiky, bitových obrázků, textu s vysokou kvalitou, videem a reálným 3D obsahem –Plný tollbox ovládacích prvků pro tvorbu přitažlivého UI Celá platforma –Využijte plného výkonu Windows Vista, od desktopu až po prohlížeč –Navrhněte úplnou uživatelskou zkušenost a bohatou grafikou, animacemi a interaktivním UI

14 Operační systém – Windows XP SP2, Windows Vista Procesor – 2GHz a více 1 GB RAM Disk – 20 MB Display – 1280 x 1024 Video karta – podpora DirectX 9.0, 256 MB RAM

15 Prostředí Microsoft Expression Blend

16 Aplikace Rozložení Ovládací prvky a styly Transfor- mace Data binding Akce Obsah Entity Text Media Animace Systém. zdroje

17 Canvas StackPanel DockPanel WrapPanel Grid

18 Práce se Layout systémem

19 Všechny standardní prvky jsou dostupné a některé nové Třídy jsou společné pro Windows Presentation Foundation –System.Windows.Controls, nikoli System.Windows.Forms.Controls

20 Individuální nastavení stylu komponent je neproduktivní Styl centralizuje nastavení –společné pro konkrétní element –pro společné vlastnosti různých elementů Nastavení jsou pojmenovaná nebo typově-orientovaná Vlastnosti definované stylem –Lze deklarativně dědit –Lze deklarativně předefinovat na úrovni elementu –Nastavit programově Styl lze kombinovat s datovou šablonou –Oddělení datové vazby od nastavení vzhledu

21 Ovládací prvky bez vzhledu –Poskytují implicitní look-and-feel, může být přepsán –Na rozdíl od stylu mění elementy použité pro vykreslení prvku a ne jen jejich atributy Logické stromy vs. Visuální stromy –Logický strom je binární reprezentací XAML souboru –Visuální strom je graf, který obsahuje všechny data potřebná pro složení a vykreslení stránky Přepište Visuální strom, aby jste změnili šablonu ovládacích prvků

22 Cat Dog Hello World!

23 Elementy UI stromu –Stejné jako jiné ovládací prvky a elementy –Mohou mít k sobě připojeny události, např. klik myši Rectangle Ellipse Polyline Polygon Path

24 Tvary jsou přístupné z kódu v pozadí Změna vlastnosti se automaticky projeví na obrazovce //...kód v pozadí hlava.Width = 200;

25 Jakýkoli element lze transformovat –Transformace nedeformuje kvalitu Transformace –Předdefinované >rotace, zvětšení, zkosení, posuv –a obecná maticová –3D ekvivalenty Vliv na umístění tvaru –LayoutTransform >Prvek je nejdříve transformován a pak aplikován layout –RenderTransform >Layout neví o transformaci

26 Vytvoření a použití stylu Vytvoření a použití šablony

27 Cíl –Jakákoli vlastnost nebo element Zdroj –CLR objekt –WPF element –ADO.NET –XML Různé modely –One Time –One Way –Two Way Control “Data Item” Property Binding Property

28 OneWay –Změna ve zdroji dat je automaticky propagována do UI –Typicky pro Read-only vlastnosti UI elementů TwoWay –Změny ve zdroji dat i UI jsou navzájem synchronizovány –Např. Editbox, CheckBox atd. OneWayToSource –Propagovány jsou pouze změny v UI zpět do datového zdroje OneTime –Zdroj inicializuje cíl pouze 1x –Typicky pro statický obsah nebo zobrazení aktuálního stavu

29 Datový kontext je místo, kde data binding hledá informace zdroji dat Definován na úrovni každého FrameworkElementu a FrameworkContentElementu Hledání zdroje dat začíná u elementu samotného a postupuje směrem ke kořeni dokumentu 3 2 1

30 Value= {Binding Path=PoziceX, Source={StaticResource mojeData}} Canvas.Left= {Binding Path=PoziceX, Source={StaticResource mojeData}} DataContext= {Binding Source={StaticResource mojeData}} Value= {Binding Path=PoziceX} Canvas.Left= {Binding Path=PoziceX} Image HorizontalSlider StackPanel

31 Datová šablona prezentuje informace datového zdroje konkrétního typu Často použita pro položky kolekce class Car { string Image {get;set;} string Model {get;set;} }

32 Databinding Property binding XML Data source

33 Triggery –Umožňuje, aby některé UI události byly zpracovány pomocí XAML, místo code-behind –Vhodné pro věci jako “mouse over” efekty –Typy Property a Event >Property trigger má uzavřený cyklus nastavení vlastnosti >Event trigger je pouhým „spouštěčem“ –Mění styl nebo spouštějí animaci Události –Ovládací prvky podporují všechny standardní události jako click, key press, selection changed, atd. –Události jsou zpracovány v code-behind souboru v jazycích C# nebo VB

34 Popisují animačnímu systému průběh –Např. změň šířku (Width) z 10 na 100 během 10 sekund Zbytek proveden automaticky –Bez nutnosti nastavit časovače –Bez nutnosti vlastního vykreslování Parametry animaceTyp animace Cíl animace Animovaná vlastnost

35 Storyboad –Koordinuje běh několika animací Trigger –Spouští animaci událostí nebo hodnotou vlastnosti Timeline –Definuje časový rozsah animace –Organizovány hierarchicky a paralelně Animation –Specifické pro animovanou vlastnost –24 typů animací >Např. Color/Point/Single/Double/Rect3DAnimation

36 Profesionální animace definovány sérií klíčových pozic objektů –Místo série animací, definuje tyto pozice Pro hladší průběh lze použít spline funkce

37 Animace v aplikaci

38 38 Windows Presentation Foundation Obohacený prohlížeč “Silverlight” + “AJAX” XAML, řízený kód, JavaScript Libovolný prohlížeč “AJAX” Microsoft Web PlatformaMicrosoft UX technologie XAML, řízený kód XBAP XAML /.NET FX Vysoká kvalita a výkon Plná integrace s desktopem „Za hranice prohlížeče“ Plná vývojová platforma XAML /.NET FX Grafika, média, animace Neutrální platforma Bezbariérová dostupnost Nízké latence, lepší UX Plná podpora standardů Dostupný Bohatý

39 39 Document Services User Interface Services Media Integration Layer Base Services 2D 3D AudioImaging Text Video Effects Composition Engine Animation XAML Accessibility Property System Input & Eventing Packaging Services Application Services Deployment Services Controls Layout Databinding XPS Documents

40 40 Prohlížeč Aplikace / OS Balíček obsahu XAML Programový Model “WPF/E” Runtime Plug-ins Platformově specifický model hostování Platformově specifický model hostování JavaScript C# / VB.NET Nativní API XML - DataFontyVideo/AudioObrázky Nativní “WPF/E” API UI & vykreslovací jádro Vrstva platformové abstrakce

41 Programming Model JavaScript “Atlas” C# / VB.NET Native API Payload XAML XML - DataFontsVideo/AudioImages IL “Atlas” Scripts JavaScript MB Media CLR Platforma UI CLR (v2) MSIL kompatibilní C# či Visual Basic Managed DOM manipulace Sandboxed Video WMA, WMV a MP3 kodek Alpha kanál HTTP Progressive Download HTTP Streaming Verze 2 RTSP DRM Vrstva integrace médií Audio Video Composition Engine Základní služby XML/XAML Parser Accessibility Property System Input and Eventing Text Imaging 2D Animation Další služby Core Controls Basic Layout Container Controls UI a vykreslování Platformy Podporované prohlížeče Internet Explorer FireFox Mozila Safari Opera Podpora OS: Win XP + OS X 10.*

42 Silverlight je podmnožinou WPF –Jedná se zatím o kódové jméno Jsou podobné –Podmožina jazyku XAML –Využívají se stejné nástroje ale zároveň různé –Velikost a vlastnosti: Silverlight ~ 1.1 MB (.NET 3.0 ~25MB) –Nepotřebuje.NET 3.0 ani WPF –Běží vždy v SandBoxu –Podpora více platforem >OS >Prohlížeč

43 Vytváříme Silverlight aplikaci

44 Silverlight plug-in pro prohlížeč –http://go.microsoft.com/fwlink/?LinkID=77792&clc id=0x409http://go.microsoft.com/fwlink/?LinkID=77792&clc id=0x409 Silverlight SDK –http://go.microsoft.com/fwlink/?linkid=77791&clci d=0x409http://go.microsoft.com/fwlink/?linkid=77791&clci d=0x409 Silverlight podpora ve VS 2005 –http://msdn2.microsoft.com/en- us/library/bb aspx#starting_with_wpf- e_topic5http://msdn2.microsoft.com/en- us/library/bb aspx#starting_with_wpf- e_topic5

45 11/19/ Microsoft Confidential – NDA Required

46 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ální nástroj pro Web designéry Profesionální nástroj pro design Interakce Profesionální nástroj pro Grafické designéry Profesionální nástroj pro Management zdrojů 46

47 47 Vaše pískoviště se právě zvětšilo –Navrhněte nevídané Windows aplikace, které míchají to nejlepší z webu a desktopu –Spolupracujte s vývojáři za pomocí Visual Studia a získejte novou úroveň produktivity mezi designerem a vývojářem Umění a technologie –Namíchejte plné spektrum designerských elementů včetně vektorové grafiky, bitových obrázků, textu s vysokou kvalitou, videem a reálným 3D obsahem –Plný tollbox ovládacích prvků pro tvorbu přitažlivého UI Celá platforma –Využijte plného výkonu Windows Vista, od desktopu až po prohlížeč –Navrhněte úplnou uživatelskou zkušenost a bohatou grafikou, animacemi a interaktivním UI

48 48 Rozšiřte si své portfolio –Navrhněte si UI elementy pro Windows aplikace –Perfektní spoluhráč pro Expression Blend Navržen pro Design –Moderní UI rozhraní napsané od počátku určené pro profesionální designery –Výkonné vektorové kreslící nástroje a nedestruktivní efekty Vaše vize, Neomezena –Zajišťuje integritu návrhu díky výměnnému XAML formátu a workflow –Exportujte své návrhy v XAML kódu a budou použitelné pro návrh libovolného UI a skinování ovládacích prvků

49 Nová éra, nové nástroje –Postaven na moderních standardech určených pro návrh webu s plnou podporou pro XHTML, CSS, XML, and XSLT –Drag and drop ASP.NET 2.0 –Spolupracujte s vývojáři ve Visual Studiu pro maximální flexibilitu návrhu web aplikacís Profesionální –Professional UI nabízí přesnou kontrolu nad rozložením stránky a formátováním –Vizuální návrháři a specializované panely pro práci s CSS styly Vyznáváte standardy –Vytvářejte vysoce kvalitní, dynamické a interaktivní stránky, které využívají plný výkon webu –Plná podpora pro standardy, přístupnost a kompatibilitu napříč prohlížeči

50 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 11/19/200650

51 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 51

52 WPF a Silverlight usnadňují vytvářet aplikace se zcela odlišnou zkušeností uživatele Silverlight pro vývoj interaktivních webových aplikací vycházející z XAML Expression studio pro tvorbu nových typů aplikací s intenzivním designem

53

54 Slovenský a český MSDN web –Semináře, produktové informace, proma, informace o podpoře,... >http://www.microsoft.com/slovakia/msdnhttp://www.microsoft.com/slovakia/msdn >http://www.microsoft.com/cze/msdnhttp://www.microsoft.com/cze/msdn CZ/SK technologické webcasty ke stažení >http://www.microsoft.com/cze/msdn/webcasts/default.mspxhttp://www.microsoft.com/cze/msdn/webcasts/default.mspx >Navíc si je můžete zdarma objednat na DVD » https://www.microsoft.com/cze/msdn/connection/default.mspx https://www.microsoft.com/cze/msdn/connection/default.mspx Slovenské příručky a praktická cvičení (HOL-y) –V průběhu jara na témata ASP.NET AJAX, Expression nástroje, XNA atd. >www.microsoft.com/slovakia/msdnwww.microsoft.com/slovakia/msdn

55


Stáhnout ppt "Microsoft Expression Blend Vývoj WPF aplikací Dalibor Kačmář Microsoft."

Podobné prezentace


Reklamy Google