Introduction au SDK Tizen lors du DevLab du 25/06/2013 au Réservoir

1. Présentation
du SDK Tizen

2. Présentation technique – développement sur Tizen
Accueil
Les outils proposés par le SDK
Hello world!
Le débogage des applications
Synthèse
Agenda
Tizen is a trademark of the Linux Foundation

3. 3 26 June, 2013
• Le SDK propose
– IDE
– Web Simulator
– Emulator
– Event Injector
– UI Builder
– Documents
– Sample applications
– Remote Inspector
– Localization Wizard
– Project Wizard
Les outils du SDK Tizen 2.0

4. 4 26 June, 2013
Vue par défaut de l’IDE
Project explorer
Connection explorer
Editor area
Outline/
Event Injector
Property/
HTML/
CSS PreviewProblems/
Console/
Pages

5. 5 26 June, 2013
Web Simulator
• Rendu des applications Web Tizen dans un simulateur
– Le panneau de configuration permet de simuler les différents aspects d’un mobile.
Configuration panel

6. 6 26 June, 2013
Emulator
• Emulator
– Les caractéristiques de l’émulateur sont configurables
– Permet de tester les applications sans passer par un terminal physique
• Connection Explorer
– Liste les terminaux connectés, y compris les émulateurs
– Possibilité de parcourir le système de fichiers des terminaux

7. • Permet de générer des événements et de les envoyer aux terminaux
– Evénements système
– Localisation
– NFC
– Capteurs
– Téléphonie
Event Injector

8. 8/39
UI Builder
• Permet de générer le code de l’interface
• A utiliser depuis un projet “Web UI builder”

9. 9/39
Documents
• Le SDK comprend une documentation complète
– Découvrir Tizen
– Guides & Tutoriels
– Spécifications des APIs
– Développement de la plateforme
Help->Help Contents

10. 10/39
Sample applications
• Apprendre plus vite grâce aux multiples exemples
– 15 applications de démonstration sont proposées

11. 2
Hello world!

12. 12/39
Création d’un nouveau projet
• Créer le projet
• Choisir un template
File -> New ->Tizen Web Project
Choix du nom de projet
Sélection du template

13. 13/39
Les fichiers contenus dans le projet
• Fichiers créés pour un projet vierge
• Fichiers créés pour un projet Web UI Builder
Fichier Description
config.xml Informations concernant les icones, la license, les
dimensions, etc.
index.html Page d’accueil de l’application
icon.png Icône représentant l’application dans le menu
main.js Code JavaScript principal
style.css Fichier CSS qui définit le style de l’application
File Description
page Un set de fichiers représentant une page de
l’application
app.xml Gère la hiérarchie des pages, les transitions, les
événements
tizen-ui-
builder-fw
Fichiers du framework définissant les classes de base
utilisées par les pagese
tizen-web-ui-
fw
Bibliothèque qui gère l’interface utilisateur

14. 14/39
config.xml - Feature
• Certaines APIs requièrent des privilèges : les « Features »

15. 15/39
Création d’un émulateur
• L’Emulator Manager permet de créer et gérer les émulateurs
– Cliquer sur dans le panneau Connection Explorer

16. 16/39
Lancer des applications sur l’émulateur
Run -> Run As ->Tizen Web Application

17. 3
Débogage des applications

18. 18/39
Ecrire du code
• “Contents Assist” suggère des fonctions ou mots clés
• “Jlint” affiche les erreurs de syntaxe et les avertissements

19. 19/39
Messages de log
• Les messages s’affichent dans la console
– console.log("console.log");
– info(“~”), warn(“~”), error(”~”), debug(“~”)

20. 20/39
Remote Inspector
• Debogage du JavaScript via l’Emulateur
Run ->Debug As -> Tizen Web Application

21. 21/39
En résumé

22. Information & Support
Page d’accueil : https://www.tizen.org Développeurs : https://developer.tizen.org
Source : https://source.tizen.org Bug tracker : https://bugs.tizen.org

23. 23 26 June, 2013
Merci

24. Tizen is a trademark of the Linux Foundation