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

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

Proč se uživatelská přívětivost nestala součástí software? Je to těžké! Animace 2D 3D Dokumenty Ovládací prvky se styly Video Windows Forms MFC Win32 HTML.

Podobné prezentace


Prezentace na téma: "Proč se uživatelská přívětivost nestala součástí software? Je to těžké! Animace 2D 3D Dokumenty Ovládací prvky se styly Video Windows Forms MFC Win32 HTML."— Transkript prezentace:

1 Proč se uživatelská přívětivost nestala součástí software? Je to těžké! Animace 2D 3D Dokumenty Ovládací prvky se styly Video Windows Forms MFC Win32 HTML DirectX Data Binding

2 Windows Presentation Foundation Dalibor Kačmář Academic Deloper Evangelist Microsoft s.r.o.

3 Agenda Přehled a architektura WPF Práce s daty Grafika Nasazení WPF aplikací

4 Potřeba lépe organizovat informace Výzvy Hardwarová inovace přestihuje software Displeje s vysokým DPI Široké obrazovky s možností rotace (TabletPC) GPU roste 3x rychleji než Moorův zákon Přetížení informacemi Dokumenty, hudba, video, fotografie apod. Potřeba lépe a chytřeji visualizovat informace

5 Jednotný přístup k UI, dokumentům a médiím Aplikační model Aplikační model Deklarativní programování - XAML Integrace médií Data binding Styly a témata Hostování uvnitř prohlížeče Grafický model Grafický model 2D & 3D grafika, rastrová grafika Text, video, audio, animace Model dokumentů Model dokumentů Variabilní rozložení Pokročilá typografie Řízení práv Media Integration Layer Media Integration Layer Element Services Aplikační model Model dokumentů Grafický model Composition and Rendering.NET Framework DirectX WPF Nástroje a jazyky

6 WPF komponenty 2D 3D AudioImaging Text Video Effects 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

7 Deklarativní tvorba aplikací Odděluje grafický návrh aplikace a aplikační logik Model známý z ASP.NET Návrh vzhledu pomocí jazyka XAML XAML převeden do zdrojového kódu a přeložen do binární formy XAML definuje i aplikace jako celku, zdrojů atd. Button btn = new Button(); btn.Background = Colors.Red; btn.Content = "Tlačítko!"; this.Children.Add( btn ); Tlačítko! Tlačítko!

8 Kombinace XAML a kódu Typicky je v XAML definován vzhled, animace, vazba na datové zdroje, zachycení a zpracování některých událostí V „kódu v pozadí“ je realizována aplikační logika Tlačítko! partial class Window1 : Window { Button tlacitko; void InitializeComponent() { tlacitko = new Button(); tlacitko.Background = “Red"; tlacitko.Click += btn_click; this.AddChild(tlacitko); } }; XAML partial class Window1 : Window { Window1() { InitializeComponent(); } public btn_click(object sender, RoutedEventArg e) { … } }; + Kód v pozadí

9 Deklarativní návrh vzhledu aplikace Nástroje - XamlPad - Expression Interactive Designer

10 Layout CanvasStackPanelDockPanelWrapPanelGrid Bez logiky layoutu – rozmístí prvky přesně podle souřadnic, plná kontrola Umístí prvky horizontálně nebo vertikálněAlokuje celou boční stranu jednomu prvku Umístí prvky horizontálně s možností „přepadnutí“ do dalšího řádku Organizace ve formě libovolné tabulky, nejpružnější řešení

11 Ovládací prvky Všechny standardní prvky jsou dostupné a některé nové Třídy jsou společné pro WPF System.Windows.Controls, ne System.Windows.Forms.Controls Vzhled plně oddělen od funkcionality a modifikovatelný prostřednictvím šablon Nevytvářet nové prvky, využít exitující logiku a definovat nový vzhled

12 Jak ovládací prvky fungují Prvky obsahují Commands – operace jako jsou Cut, Copy nebo Paste Properties – vlastnosti modifikující vzhled nebo chování Events – ovládací prvky vyvolávají události Metody – část funkcionality je dostupná formou metod Commands, Properties a Events dostupné v XAML Aplikační logika Data binding – vazba na datové zdroje Template – šablona definující vzhled prvku

13 Události WPF rozšiřuje standardní mechanismus.NET events Routed events Zpracovány v elementu, ale i ve všech „nadřazených“ elementech v tzv. logickém stromu Události mohou Probublat – prochází od zdroje směrem nahoru ve stromu být Tunelovány – začíná u kořene a sestupují dolů ke zdroji být Směrovány - zpracovává pouze zdroj události

14 Visual Studio 2005 Ovládací prvky ve WPF aplikacích Zpracování událostí

15 Data binding Proces propojení UI s aplikační logikou Snadná synchronizace dat s vizuální reprezentací Reflektuje na změny v UI i v datovém zdroji WPF propojuje „Dependency Properties“ s řadou datových zdrojů

16 Binding elementy Cíl (Binding Target) Libovolná vlastnost WPF elementu Zdroj (Binding Source) CLR objekt WPF Element ADO.NET (prostřednictvím Dataset) XMLKolekceModely One Time, One Way, Two Way, One Way To Source Dynamika Master-Detail scénáře Value Converter Ovládací prvek Objekt Property Data Binding Dependency Property Synchronizace Konverze Cíl Zdroj

17 Datový zdroj Zdroje.NET objekt – ObjectDataProvider XML dokument – XmlDataProvider Kolekce Připojeny k ItemControl prvkům nebo formou iterace Dynamická vazba volitelně (ObservableCollection ) Přístup k položkám kolekce Automatická synchronizace - INotifyPropertyChanged Datový kontext Místo, kde data binding hledá informace o zdroji dat Definován na úrovni elementů Prohledávání po celém stromu elementů

18 Datová šablona 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;} }

19 Spojení uživatelského rozhraní s datovým zdrojem

20 Styly a šablony ovládacích prvků 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 Triggery Vnáší do statického nastavení vlastností dynamiku Trigger umožňuje podmínečné nastavování vlastností TriggerSpuštění Jednoduchý, násobný Hodnotou vlastnosti visuálního elementu Datový Hodnotou objektu v DataContextu Event Příchodem události

22 Šablona ovládacího prvku Vzhled zcela oddělen od logiky „Navléká“ na prvek nový vzhled Je množinou Elementů, tvořících vzhled Triggerů, reagujících na změny Storyboardů, vytvářejících animace Logické stromy vs. Vizuální stromy Logický strom - binární reprezentace XAML Visuální strom - graf, který obsahuje všechna data potřebná pro složení a vykreslení okna Přepište vizuální strom - změníte vzhled

23 Logické a vizuální stromy Kočka Kočka Pes Pes Oblíbené zvíře Oblíbené zvíře Kočka Pes

24 Definice vzhledu ovládacích prvků Jednoduchý trigger

25 Novinky v grafice Plně integrována do programového modelu Může být součástí libovolného UI elementu Grafické tvary uspořádány do stromu elementů UI Odpadá nutnost neustále překreslovat okna Složitě manipulovat s vykreslenou grafikou WPF se za nás postará o překreslování Všechny elementy jsou vektorové, nikoli bitové mapy, tedy nezávislé na rozlišení!

26 Společné novinky v grafice Grafika nezávislá na rozlišení a zařízení Postavena na Device Independent Pixel Vylepšená přesnost Souřadný systém WPF a transformace - double WPF nabízí širší barevný gamut (scRGB) Pokročilá podpora grafiky a animací Transformace, hit testování, minimální překreslování, integrace animace Hardwarová akcelerace

27 Kompozice Proces složení více tvarů nebo obrázků ve výsledný výstup WPF na rozdíl od Win32 podporuje překrývání libovolných elementů (ne pouze celých oken) průhlednost používá anti-aliasing na hranách tvarů aplikaci transformace před kompozicí

28 Možnosti kompozice DrawingBrush Výplň vektorovým obrázkem VisualBrush Výplň UI elementem Zjednodušuje triky Reflexe UI Použití jako 3D textury

29 Visual-Layer programování Deklarativní popis není vždy vhodný WPF poskytuje „visual-layer“ API Vykreslování entit podle potřeby Metoda OnRender vykreslí jednotlivé entity Odlišný model překreslování Aplikace GDI+ nebo GDI32 Grafická karta Frame buffer obrazovky Windows WM_PAINT Invalidate WPF Aplikace Vizuální objekty

30 Grid DockPanel StackPanel TextBlock FrameworkElement 3D ve 2D světě Layout rozumí pouze 2D Použijeme obdélníkové okno do 3D světa Layout to vidí jako další element Viewport3D Model Kamera Světlo

31 Animace Proč? Silnější dojem z aplikací Vytváří přirozenější UI Plynulejší visuální přechody Animace kdekoli Jakoukoli vlastnost lze animovat Kdekoli ≠ všude Zvážit vhodnost Zdrženlivost je na místě Realizace animací deklarativně i kódem

32 Deklarativní animace 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í Storyboard.TargetProperty="(Ellipse.Width)" /> Parametry animace Typ animace Cíl animace Animovaná vlastnost

33 Grafické efekty v aplikaci a animace

34 Typy aplikací Plné lokální aplikace Instalovány na lokální počítač Přístup k systémovým zdrojům definován právy uživatele Web Browser aplikace Běží v prostředí prohlížeče s typickým vpřed-vzat navigací Omezení práv aplikace (Partial Trust) Aplikace nemůže požádat o dodatečná práva (běží nebo ne) Definice potřebných práv v projektu aplikace Vlastnost Lokání aplikace Browser aplikace Běhové prostředí Lokální OS IE 7 DůvěraPlnáOmezená DostupnostOnline/OfflineOnline Nasazení Nejlépe ClickOnce nebo MSI Nejlépe ClickOnce

35 Instalace ClickOnce Přirozený vývoj „bezdotykové instalace“ z.NET 1.x Založeno na HTTP protokolu pro.NET aplikace exe stažen, uložen, spuštěn ClickOnce Podporuje instalaci obou typů aplikací (plné i browser) 2 scénáře nasazení Online/offline Pouze online Odstraňuje problémy předchozí verze; nyní umí Podpora v nástrojích (VS 2005, SDK) Sledování postupu instalace Distribuce jiných souborů než assembly Možnost požádat o vyšší povolení Je vyžadován digitální podpis instalace

36 Instalace \demo\demo_1_ 0_0_0 demo. exe.manifest Aplikační manifest demo. exe.deploy *.*.deploy \demo\demo_1_ 0_0_0 Aplikační soubory \demo demo_1_0_0_0.application demo.application Manifest nasazení publish.htm setup.exe *.application - manifest nasazení, XML popis nasazení a update aplikace publish.htm – web stránka OnceClick nasazení setup.exe -.NET FX 2.0 bootstrap + další potřebné aplikaci potřebné pro běh aplikace (např. SQL Server Express), konfigurovatelné ve VS 2005 *.exe.manifest – aplikační manifest, XML popis požadované úrovně bezpečnosti asociovaných souborů dané verze *.*.deploy – soubory učené k nasazení, rozšířeny o přípomu.deploy z důvodu ochrany web serveru

37 Hostování aplikace v prohlížeči ClickOnce nasazení aplikace

38 Rekapitulace Nový a pružný model popisu uživatelského rozhraní WPF rozumí vašim datům Šablony dodávají vzhled i dynamiku Grafika dostupná deklarativně i programově 2D i 3D modely obohacené animací Přenesení výkonu na grafickou kartu Jednoduché nasazení a zvýšenou bezpečnost Stáhněte si.NET Framework 3.0 RC a vyzkoušejte si WPF

39 Odkazy MSDN Windows Vista Developer Center Microsoft.NET Framework Download platformy a ovládacích prvků ion/default.aspx ion/default.aspx ion/default.aspx Doporučení pro Windows Vista UX

40 © 2006 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.


Stáhnout ppt "Proč se uživatelská přívětivost nestala součástí software? Je to těžké! Animace 2D 3D Dokumenty Ovládací prvky se styly Video Windows Forms MFC Win32 HTML."

Podobné prezentace


Reklamy Google