Tiré de http://blog.loicrebours.fr

1. Développer une application
Winows 8
Tiré du blog de Loic Rebours : http://blog.loicrebours.fr
Labo DEV.MS Bruxelles

3. Introduction
Clément Hallet – clement.hallet@supinfo.com

4. Introduction (de l’introduction)
Full screen (plus de chrome)
Touch (nativement)
Metro = guidelines graphique
Metro = typographie et iconographies fortes permettant une
utilisation simple et intuitive
Metro = fast&fluid ( donc utilisation des API asynchrones)

5. METRO

6. API asynchrones ?
• Processus lancé en parallèle de l'exécution de
l’appli
• Tant que l’appli n’a pas recu de réponse du
processus terminé, elle continue à s’executer.
• Exemple : pour un envoi de gros fichier, l’utilisateur
n’attendra pas la fin de l’envoi pour pouvoir
continuer à travailler sur l’app

7. Windows RT
Pour Windows Runtime
Des API’s créer pour les app METRO.
API’s utilisables depuis plusieurs langages / technos
différentes :
• XAML / C# ou VB .NET
•XAML + C++
•HTML5 / CSS / JS

8. Scheme

9. Windows RT
App’s sandboxées
Privillèges restreints, capabilities possibles pour les
étendre
Pour les habitués du dev .NET, les classes du
Framework ne seront pas accesiles pour des raisons
de sécurité (et accesoirement cette utilisation illéale
bloquera la publication de l’app sur le store)

10. SandBox?
• Moins de risque
• Environnement autonome,
cloisonné
• Une VM est donc une sandbox

11. Let’s create it
Vous aurez besoin de W8, et de VS 2012 avec
Blend.
Présence de templates :
•Blank app : projet vide avec le minimum pour faire une app METRO
•Grid app : proet avec 3 pages : item groupés, détails d’un groupe et détail d’un item
•Split app : projet avec 2 pages : groupe d’item, détails du groupe avec une vue maître/détails
•Class Library : permet de créer une librairie WinRT-compliant
•Windows Runtime Component : pour créer une librairie WinRT utilisable avec n’importe quelle techno
•Unit Test Iibrary : projet de test unitaires pour les app’s METRO

12. Let’s create a blank app

13. Let’s create a blank app
• Blank app
• Properties : metadatas de l’assembly
• Assets : logos de l’applications et l’image SplashScreen
• Common : contient une ressource dictionary avec plusieurs styles et templates réutilisables
• App.xaml : La logique de l’application. Affiche l’UI et gère le cycle de vie de l’application
• MainPage.xaml : Page affichée au lancement de l’application
• Package.appxmanifest : Fichier contenant les metadata de l’application. Il permet de définir les
orientations supportées par l’app, son logo, ses capabilities.

14. Package.appxmanifest
• Quatre onglets :
• Application UI : nom de l’app, description, orientation, logos, couleur de
bg, splashscreen, (dés)activation des toast
• Capabilities : séléctionner les privillèges de l’application
(Internet, Location, Microphone, Picture Library, Webcam, …)
• Declarations : permet d’ouvrir son application à d’autres app METRO.
Exemple : partages de fichiers, résultats de recherche parmis plusieurs
applications.
• Packaging : informations pour le déploiement et la publication de l’app

15. Hello World !
• MainPage.xaml
• Code-behind (MainPage.xaml.cs (car lié aux composant du XAML) )

16. Hello World !

17. Hello World !
• Vu que l’app est destinée à pleins d’appareils
différents, présence d’un émulateur pour la tester sous
différents affichages, orientation, …
• A droite de la fenêtre de l’émulateur, des outils pour simuler le
touch, le pinch, le zoom, es résolutions, orientations, la
géolocalisation, et pour prendre un screenshot (utile pour la
publication sur le store)

18. Avez-vous des questions ?
?

19. facebook.com/LaboDevM
S
@dev_ms
devms.org