• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sviluppare applicazioni Metro con Windows 8 e WinRT
 

Sviluppare applicazioni Metro con Windows 8 e WinRT

on

  • 1,266 views

These slides have been presented at the XeDotNet meeting on May 3rd 2012.

These slides have been presented at the XeDotNet meeting on May 3rd 2012.

Statistics

Views

Total Views
1,266
Views on SlideShare
1,266
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Sviluppare applicazioni Metro con Windows 8 e WinRT Sviluppare applicazioni Metro con Windows 8 e WinRT Presentation Transcript

    • agenda sviluppare applicazioni metro con windows 8 e winrtandrea boschin – MVP Silverlight, Metro Insider
    • agenda sviluppare applicazioni metro con windows 8 e winrtandrea boschin – MVP Silverlight
    • agendametro guidelines XeDotNet andrea@boschin.itmetro applications & winrt q&a @aboschintools & templates desktop codeblock68 feedbackfeatures 10
    • agendametro guidelines XeDotNet andrea@boschin.itmetro applications & winrt q&a @aboschintools & templates desktop codeblock68 feedbackfeatures 10
    • metro guidelines o collezione di regole di design o hanno lo scopo di migliorare la user experience o adottate da Windows Phone 7 o basate su 5 «pillar» • be authentically digital • do more with less • be fast and fluid • show pride in craftsmanship • win as onemetro guidelines
    • metro guidelineswin as one be autentically digital do more with l o riconoscimento della natura digitale dello strumento o rimozione di #skeuomorphic design o rimozione del chrome: il contenuto è la struttura o valorizzazione del colore o valorizzazione dello spazio
    • metro guidelineswin as one be autentically digital do more with l o riconoscimento della natura digitale dello strumento o rimozione di #skeuomorphic design o rimozione del chrome: il contenuto è la struttura o valorizzazione del colore o valorizzazione dello spazio
    • metro guidelineswin as one be autentically digital do more with l Il design è skeuomorfico. nel tentativo di imitare la realtà l’interfaccia stanca l’occhio senza dare un valore aggiunto Il design è minimale. tralasciando di imitare la realtà sfrutta al meglio lo strumento digitale
    • metro guidelineswin as one be autentically digital do more with l Il design è skeuomorfico. nel tentativo di imitare la realtà l’interfaccia stanca l’occhio senza dare un valore aggiunto Il design è minimale. tralasciando di imitare la realtà sfrutta al meglio lo strumento digitale
    • metro guidelinesntically digital do more with less be fast and fluid o elogio della semplicità o rimozione di elementi inutili o rimozione di feature ridondanti e sofisticate o ottenere lo scopo con il minimo sforzo possibile "sai di aver raggiunto la perfezione non quando non hai più nulla da aggiungere ma quando non ti resta altro da togliere.“ Antoine de Saint-Exupéry
    • metro guidelinesntically digital do more with less be fast and fluid o elogio della semplicità o rimozione di elementi inutili o rimozione di feature ridondanti e sofisticate o ottenere lo scopo con il minimo sforzo possibile "sai di aver raggiunto la perfezione non quando non hai più nulla da aggiungere ma quando non ti resta altro da togliere.“ Antoine de Saint-Exupéry
    • metro guidelinesmore with less be fast and fluid show pride in cra o la rapidità compensa la scarsità di elementi nella UI o la fluidità nell’interfaccia comunica continuità o l’uso di animazioni da un feedback all’utente
    • metro guidelinesmore with less be fast and fluid show pride in cra o la rapidità compensa la scarsità di elementi nella UI o la fluidità nell’interfaccia comunica continuità o l’uso di animazioni da un feedback all’utente
    • metro guidelinese fast and fluid show pride in craftsmanship win o cura nei particolari o accuratezza nelle scelte o completezza nelle feature o pulizia nel colore e nel carattere
    • metro guidelinese fast and fluid show pride in craftsmanship win o cura nei particolari o accuratezza nelle scelte o completezza nelle feature o pulizia nel colore e nel carattere
    • metro guidelinesftsmanship win as one be autentically digital do o è incoraggiata la collaborazione tra le applicazioni o esporre interfaccia di share o accettare lo share proposto da altre applicazioni o l’unione fa la forza (win as one)
    • metro applications & winrt o metro style application applicazione basata su un nuovo ambiente sandboxed che può essere scaricata mediante il Windows 8 Store. o winrt nuovo runtime che incapsula le api di basso livello di Windows 8 mediante un paradigma object oriented o windows metadata (winmd)metro applications & winrt metadati esposti come assembly .NET per condividere i servizi di winrt tra diversi linguaggi
    • metro applications & winrtmetadata metro style applications windows ru o create per essere multi piattaforma • Intel • ARM o ottimizzate per luso con touch e mouse • design touch-first • i controlli supportano egregiamente anche il mouse o si possono realizzare in vari linguaggi • XAML + C# o VB.NET • XAML + C++ • HTML5 + CSS3 + Javascript
    • metro applications & winrtmetadata metro style applications windows ru o create per essere multi piattaforma • Intel • ARM o ottimizzate per luso con touch e mouse • design touch-first • i controlli supportano egregiamente anche il mouse o si possono realizzare in vari linguaggi • XAML + C# o VB.NET • XAML + C++ • HTML5 + CSS3 + Javascript
    • metro applications & winrtmetadata metro style applications windows ru User Interface HTML5/CSS XAML DirectX Controls Data Binding SVG Tiles Input Accessibility Printing Devices Communications & Data Geolocation Portable Sensors NFC Contracts Local & Cloud Storage Web Notifications Streams Media Visual Background Playback Capture PlayTo XML Networking SMS Effects Transfer Fundamentals Application Services Threading/Timers Memory Management Authentication Cryptography Globalization
    • metro applications & winrtmetadata metro style applications windows ru User Interface HTML5/CSS XAML DirectX Controls Data Binding SVG Tiles Input Accessibility Printing Devices Communications & Data Geolocation Portable Sensors NFC Contracts Local & Cloud Storage Web Notifications Streams Media Visual Background Playback Capture PlayTo XML Networking SMS Effects Transfer Fundamentals Application Services Threading/Timers Memory Management Authentication Cryptography Globalization
    • metro applications & winrtcations windows runtime windows metadata o multipiattaforma • pensato per essere consumato da diversi linguaggi • è la parte del sistema veramente x-platform o object oriented • incapsula le API di Windows e le rende Object Oriented • basato su COM (IUnknown e IInspectable) Your Windows Windows 8 Managed Runtime API Code
    • metro applications & winrtcations windows runtime windows metadata o multipiattaforma • pensato per essere consumato da diversi linguaggi • è la parte del sistema veramente x-platform o object oriented • incapsula le API di Windows e le rende Object Oriented • basato su COM (IUnknown e IInspectable) Your Windows Windows 8 Managed Runtime API Code
    • metro applications & winrtcations windows runtime windows metadata Metro style Apps Desktop Apps View XAML HTML / CSS JavaScript Controller Model C/C++ C#, VB HTML C C# (Chakra) JavaScri C++ VB pt Windows Runtime APIs System Services Communication Graphics & Devices & & Data Media Printing Application Model Internet .NET Win32 SL Explorer Windows Kernel Services Kerne l
    • metro applications & winrtcations windows runtime windows metadata Metro style Apps Desktop Apps View XAML HTML / CSS JavaScript Controller Model C/C++ C#, VB HTML C C# (Chakra) JavaScri C++ VB pt Windows Runtime APIs System Services Communication Graphics & Devices & & Data Media Printing Application Model Internet .NET Win32 SL Explorer Windows Kernel Services Kerne l
    • metro applications & winrts runtime windows metadata metro style applic o espongono i metadati di winrt • formato binario derivato di metadati CLI • abilitano la condivisione multi-language • i namespace Windows.* sono esposti tramite winmd o creazione di componenti per winrt • generati nativamente dai compilatori C++, C# e VB.NET • i propri componenti come winmd sono visibili a Javascript • ci sono numerose limitazioni nei tipi da esporre a JS
    • metro applications & winrts runtime windows metadata metro style applic o espongono i metadati di winrt • formato binario derivato di metadati CLI • abilitano la condivisione multi-language • i namespace Windows.* sono esposti tramite winmd o creazione di componenti per winrt • generati nativamente dai compilatori C++, C# e VB.NET • i propri componenti come winmd sono visibili a Javascript • ci sono numerose limitazioni nei tipi da esporre a JS
    • metro applications & winrts runtime windows metadata metro style applic Projection IInspectable C++ App IUnknown Projection C#/VB App CLR Object Projection HTML App Chakra Windows Metadata
    • metro applications & winrts runtime windows metadata metro style applic Projection IInspectable C++ App IUnknown Projection C#/VB App CLR Object Projection HTML App Chakra Windows Metadata
    • tools & templates o Windows 8 Consumer Preview o Visual Studio 11 + Blend o Progetti Metro o Metro Simulatortools & templates
    • tools & templatesSimulator Windows 8 Consumer Preview Vi o download • setup http://windows.microsoft.com/en-US/windows-8/download • iso images http://windows.microsoft.com/en-US/windows-8/iso o versioni • x86 (32bit), x64 (64bit) • Inglese, Cinese, Francese, Tedesco e Giapponese o requisiti • 1GB ram • 1GHz processor • Installazione fisica, VHD o virtuale • consigliato • VMWare player o VirtualBox
    • tools & templatesSimulator Windows 8 Consumer Preview Vi o download • setup http://windows.microsoft.com/en-US/windows-8/download • iso images http://windows.microsoft.com/en-US/windows-8/iso o versioni • x86 (32bit), x64 (64bit) • Inglese, Cinese, Francese, Tedesco e Giapponese o requisiti • 1GB ram • 1GHz processor • Installazione fisica, VHD o virtuale • consigliato • VMWare player o VirtualBox
    • tools & templatesumer Preview Visual Studio 11 + Blend Prog o Download • Visual Studio 11 + Blend http://msdn.microsoft.com/en-us/windows/apps/hh852659 • Tools & SDK http://msdn.microsoft.com/en-us/windows/apps/br229516 o Visual Studio • nuova interfaccia Metro style • nuove feature • template di progetto per applicazioni Metro o Blend • integra versione per HTML5 • piuttosto instabile la parte XAML (ma migliorera...)
    • tools & templatesumer Preview Visual Studio 11 + Blend Prog o Download • Visual Studio 11 + Blend http://msdn.microsoft.com/en-us/windows/apps/hh852659 • Tools & SDK http://msdn.microsoft.com/en-us/windows/apps/br229516 o Visual Studio • nuova interfaccia Metro style • nuove feature • template di progetto per applicazioni Metro o Blend • integra versione per HTML5 • piuttosto instabile la parte XAML (ma migliorera...)
    • tools & templates11 + Blend Progetti Metro Metro Simulator o Visua Studio 11 • integra nuovi template di progetto per Javascript, C# e C++ o Template • applicazione Metro • blank • grid • split • class library Metro • utile anche per produrre ".winmd"
    • tools & templates11 + Blend Progetti Metro Metro Simulator o Visua Studio 11 • integra nuovi template di progetto per Javascript, C# e C++ o Template • applicazione Metro • blank • grid • split • class library Metro • utile anche per produrre ".winmd"
    • tools & templatesgetti Metro Metro Simulator Windows 8 Con o simulatore • consente di debuggare senza un device touch • simula orientamento, snapping, etc.. • simula anche sensore GPS o come si avvia? • modalità di avvio di Visual Studio
    • tools & templatesgetti Metro Metro Simulator Windows 8 Conn device touchetc..io
    • demo
    • features o javascript o C# o programmazione asincrona o navigazione & appbar o layout & orientation o controlli o charm & contracts o tilesfeatures
    • featuresntracts tiles javascript o C# programmazione a o Javascript + HTML5 + CSS3 PRO • interessante soluzione con skill di HTML5 + CSS3 (ma non basta) • set di «controlli» che aiutano molto • blend for HTML è eccellente CONS • quello che scrivete non è cross-platform • javascript non è da tutti o C# + XAML PRO • recuperati il 99% degli skill Silverlight • un linguaggio efficace che risolve problemi CONS • siete fuori moda
    • featuresntracts tiles javascript o C# programmazione a o Javascript + HTML5 + CSS3 PRO • interessante soluzione con skill di HTML5 + CSS3 (ma non basta) • set di «controlli» che aiutano molto • blend for HTML è eccellente CONS • quello che scrivete non è cross-platform • javascript non è da tutti o C# + XAML PRO • recuperati il 99% degli skill Silverlight • un linguaggio efficace che risolve problemi CONS • siete fuori moda
    • featuresavascript o C# programmazione asincrona navig o modello completamente asincrono • le api di WinRT sono molto spesso asincrone • per convenzione i metodi asincrono hanno il suffisso «Async» • ad esempio • accesso alla rete • filesystem • message dialog • etc... o in precedenza asincrono significava • hard to write • hard to understand • hard to maintain il codice asicroni è focalizzato a gestire la complessità dell’asincronia piuttosto che lobbiettivo finale
    • featuresavascript o C# programmazione asincrona navig o modello completamente asincrono • le api di WinRT sono molto spesso asincrone • per convenzione i metodi asincrono hanno il suffisso «Async» • ad esempio • accesso alla rete • filesystem • message dialog • etc... o in precedenza asincrono significava • hard to write • hard to understand • hard to maintain il codice asicroni è focalizzato a gestire la complessità dell’asincronia piuttosto che lobbiettivo finale
    • featuresavascript o C# programmazione asincrona navig o prima - callback ed eventi public void CallMyMethod() { MyServiceClient client = new MyServiceClient(); client.MyMethodCompleted += HandleMyMethodCompleted; client.MyMethodAsync(); } private void HandleMyMethodCompleted(object sender, AsyncEventArgs e) {} o oggi - keyword «async + await» public async void CallMyMethod() { MyServiceClient client = new MyServiceClient(); await client.MyMethodAsync(); }
    • featuresavascript o C# programmazione asincrona navig o prima - callback ed eventi public void CallMyMethod() { MyServiceClient client = new MyServiceClient(); client.MyMethodCompleted += HandleMyMethodCompleted; client.MyMethodAsync(); } private void HandleMyMethodCompleted(object sender, AsyncEventArgs e) {} o oggi - keyword «async + await» public async void CallMyMethod() { MyServiceClient client = new MyServiceClient(); await client.MyMethodAsync(); }
    • featuresavascript o C# programmazione asincrona navig o basato su Task Parallel Library • la chiamata asincrona restituisce un «future» object (Task) • Task, Task<T>, e una serie di altre interfacce • il codice successivo è considerato la «task continuation» • il codice è del tutto simile a quello di una chiamata sincrona • Mantenuto lo stato tra prima e dopo la chiamata • Gestione delle eccezione con try-catch • il «future» può essere manipolato • es: WhenAny e WhenAll controllano collection di Task • differenze tra .NET Framework e WinRT future objects • WinRT non dispone di alcuni metodi • usare AsTask() per ottenere un future di .NET
    • featuresavascript o C# programmazione asincrona navig o basato su Task Parallel Library • la chiamata asincrona restituisce un «future» object (Task) • Task, Task<T>, e una serie di altre interfacce • il codice successivo è considerato la «task continuation» • il codice è del tutto simile a quello di una chiamata sincrona • Mantenuto lo stato tra prima e dopo la chiamata • Gestione delle eccezione con try-catch • il «future» può essere manipolato • es: WhenAny e WhenAll controllano collection di Task • differenze tra .NET Framework e WinRT future objects • WinRT non dispone di alcuni metodi • usare AsTask() per ottenere un future di .NET
    • featuresione asincrona navigazione & appbar layout & o o modello di applicazione • composta da numerose pagine (modello web) • navigazione tra pagine con passaggio di parametri • in App.xaml.cs viene creato un "Frame" • ciascuna pagina detiene un riferimento al frame o strumenti • metodi per la navigazione • Navigate(), GoBack(), GoForward(), StopLoading() • proprietà per verificare lo stato della navigazione • CanGoBack, CanGoForward • eventi di navigazione • Navigated, Navigating, NavigationFailed, NavigationStopped o persistenza • metodi per persistere e ripristinare lo stato • GetNavigationState, SetNavigationState
    • featuresione asincrona navigazione & appbar layout & o o modello di applicazione • composta da numerose pagine (modello web) • navigazione tra pagine con passaggio di parametri • in App.xaml.cs viene creato un "Frame" • ciascuna pagina detiene un riferimento al frame o strumenti • metodi per la navigazione • Navigate(), GoBack(), GoForward(), StopLoading() • proprietà per verificare lo stato della navigazione • CanGoBack, CanGoForward • eventi di navigazione • Navigated, Navigating, NavigationFailed, NavigationStopped o persistenza • metodi per persistere e ripristinare lo stato • GetNavigationState, SetNavigationState
    • featuresione asincrona navigazione & appbar layout & o o application bars • appaiono con swipe o right click • top & bottom sono esposte dalloggetto Page • il contenuto è discrezionale (non fisso come in WP7) o principi • nav bar: nella posizione top • thumbnails di accesso rapido (es: IE10) • sezioni dellapplicazione • app bar: nella posizione bottom • comandi globali (sulla sinistra) • comandi contestualizzati (sulla destra)
    • featuresione asincrona navigazione & appbar layout & o o application bars • appaiono con swipe o right click • top & bottom sono esposte dalloggetto Page • il contenuto è discrezionale (non fisso come in WP7) o principi • nav bar: nella posizione top • thumbnails di accesso rapido (es: IE10) • sezioni dellapplicazione • app bar: nella posizione bottom • comandi globali (sulla sinistra) • comandi contestualizzati (sulla destra)
    • featuresazione & appbar layout & orientation controlli c o layout • privilegiato lo spazio orizzontale a quello verticale • deve tenere in considerazione diversi form-factor • la differenza di spazio tra form-factors va utilizzata • in alternativa usare ViewBox per adattare la dimensione o strumenti • in XAML: Grid, StackPanel, Canvas to the rescue • disponibilità di controlli per implementare pagine e "hub" o ViewState • indica lorientamento e lo stato "visuale" • FullScreenLandscape • Filled • Snapped • FullScreenPortrait • è obbligatorio gestirla
    • featuresazione & appbar layout & orientation controlli c full screen landscape full screen portraitorizzontale a quello verticaleerazione diversi form-factor tra form-factors va utilizzata ewBox per adattare la dimensione snappedPanel, Canvas to the rescue i per implementare pagine e "hub"e lo stato "visuale"cape filledt
    • controlliorientation controlli charm & contracts tiles o nuovi controlli metro-style • FlipView : singolo elemento • ListView : lista verticale • GridView : list orizzontale • ListView e GriddView supportano il grouping o nuovi template per ItemsPanel • WrapGrid • VariableSizedWrapGrid • CarouselPanel o SemanticZoom • controllo che utilizza GridView e/o ListView • per navigare si usa pich & zoom • per zoom semantico si intende lo zoom nel raggruppamento • anni > foto negli anni • giorni > appuntamenti
    • featuresorientation controlli charm & contracts tiles o nuovi controlli metro-style • FlipView : singolo elemento • ListView : lista verticale • GridView : list orizzontale • ListView e GriddView supportano il grouping o nuovi template per ItemsPanel • WrapGrid • VariableSizedWrapGrid • CarouselPanel o SemanticZoom • controllo che utilizza GridView e/o ListView • per navigare si usa pich & zoom • per zoom semantico si intende lo zoom nel raggruppamento • anni > foto negli anni • giorni > appuntamenti
    • featuresorientation controlli charm & contracts tiles o transizioni • gestiscono lingresso e luscita di elementi • Cr • Cr • applicate in un ItemsControl con • Dr • ChildrenTransitions • Fa • ItemContainerTransitions • Fa • ContentTransitions • Po • applicate nei controlli • Po • Transitions • Re • Se • tipi: • Se • EntranceThemeTransition • Sp • RepositionThemeTransition • Ta • Ta o animazioni • Sp • gestiscono varie situazioni
    • features orientation controlli charm & contracts tilesresso e luscita di elementi • CrossSlideBackThemeAnimation • CrossSlideHintThemeAnimationtemsControl con • DropTargetItemThemeAnimation ansitions • FadeInThemeAnimationinerTransitions • FadeOutThemeAnimationansitions • PopInThemeAnimationntrolli • PopOutThemeAnimations • RepositionThemeAnimation • SelectDownThemeAnimation • SelectUpThemeAnimationhemeTransition • SplitCloseThemeAnimationThemeTransition • TapDownThemeAnimation • TapUpThemeAnimation • SplitOpenThemeAnimatione situazioni
    • featuresn controlli charm & contracts tiles javascript o charms • rappresentano le 4 azioni di una applicazione • search : ricerca • share : condivisione • devices : connessione a dispositivi • settings : impostazioni o contracts • sono le modalità con cui una applicazione espone uno charm • si impostano dal manifest • si gestiscono implementando la gestione di eventi • esempio – search contract • espone windows.search • gestisce levento di ricerca "da charm" • gestisce levento di ricerca "dallesterno" • eventuamente supportare i "suggerimenti"
    • featuresn controlli charm & contracts tiles javascript o charms • rappresentano le 4 azioni di una applicazione • search : ricerca • share : condivisione • devices : connessione a dispositivi • settings : impostazioni o contracts • sono le modalità con cui una applicazione espone uno charm • si impostano dal manifest • si gestiscono implementando la gestione di eventi • esempio – search contract • espone windows.search • gestisce levento di ricerca "da charm" • gestisce levento di ricerca "dallesterno" • eventuamente supportare i "suggerimenti"
    • features& contracts tiles javascript o C# programmaz o a cosa serve? • è lelemento più visto dellapplicazione • una tile ben fatta può migliorare la percezione dellutente o come funziona? • esiste sempre almeno una tile square di default • opzionalmente si può definire la versione wide • la tile può contenere un badge • mediante notifiche è possibile cambiare aspetto, dimensione e contenuto scegliendo tra uno dei template disponibili • una notifica ha formato XML e può contenere diverse versioni della tile o come si aggiorna? • si manda una notifica locale dallapplicazione stessa • si riceve una notifica push • la notifica può avere una scadenza oltre la quale la tile torna al default o inoltre • è possibile creare una coda di notifiche (max 5)
    • features& contracts tiles javascript o C# programmaz o a cosa serve? • è lelemento più visto dellapplicazione • una tile ben fatta può migliorare la percezione dellutente o come funziona? • esiste sempre almeno una tile square di default • opzionalmente si può definire la versione wide • la tile può contenere un badge • mediante notifiche è possibile cambiare aspetto, dimensione e contenuto scegliendo tra uno dei template disponibili • una notifica ha formato XML e può contenere diverse versioni della tile o come si aggiorna? • si manda una notifica locale dallapplicazione stessa • si riceve una notifica push • la notifica può avere una scadenza oltre la quale la tile torna al default o inoltre • è possibile creare una coda di notifiche (max 5)
    • contacts o Feedback su: • http://xedotnet.org/feedbacandrea@boschin.it k o Codice evento@aboschin • S3YLMcodeblock68feedback10