MoSync : Création de projet HTML5

Vous pouvez utiliser MoSync pour créer une application en HTML5 et JavaScript sans avoir à écrire même pas une ligne en C/C++. Ce cours indique comment créer un projet où vous pouvez construire des applications mobiles en utilisant uniquement HTML5 et JavaScript, ou en ajoutant le pouvoir du C/C++.

Le support des applications HTML5 par MoSync

MoSync contient un système de widgets natif, l’un des types de widgets est le WebView. Ceci veut dire que que vous pouvez utiliser les technologies Web pour créer vos applications. Par contre, ces applications seront uniquement compatibles avec les mobiles supportant nativement les technologies Web à travers Wormhole ou autre.
Vous pouvez à partir de MoSync 2.7, créer des applications natives avecc HTML, CSS et javascript et les déployer dans les app-stores comme des applications standalone. Vous pouvez utiliser des standards web les librairies JavaScript telles ques jQuery et jQTouch, et réutiliser votre code Web existant.
Vous pouvez programmer votre application entière en HTML, CSS et JavaScript ou vous pouvez mixer les technologies Web avec le C++ qui vous donnera accès aux fonctionnalités non disponibles dans HTML5. Selon les langages et les librairies que vous voulez utiliser, vous pouvez écrire la grande partie de la logique de l’application en JavaScript, ou vous pouvez utiliser le C++ pour la logique de l’application et utiliser l’HTML et le CSS pour l’interface utilisateur.

Les templates HTML5/Javascript

Pour commencer, ouvrez l’IDE MoSync, sélectionnez File > New > Project, créez un projet HTML5/JavaScript, et sélectionnez HTML5 Project template comme présenté dans la capture d’écran suivante :

Ceci vous donnera un projet HTML5 qui est prêt pour la compilation et l’exécution. Vous n’avez pas besoin de n’écrire aucune ligne de C++ si vous choisissez cette option.
Si vous auriez besoin d’accéder au code écrit en C++ depuis JavaScript, vous devriez créer un projet en utilisant la template HTML5/C++ Project. La différence entre un HTML5 Project et un HTML5/C++ Project est que le dernier est configuré pour supporter les communications entre JavaScript et C++.
Les templates sont des applications à part entière. Voici comment l’application template s’affiche lorsqu’elle s’exécute. Dans les 2 applications le texte changera lorsque vous touchez l’écran. Dans une template d’application HTML5/C++ Project, le mobile va également vibrer.

Veuillez noter que vous pouvez manuellement ajouter le code nécessaire pour les interactions JavaScript/C++ dans un projet HTML5 Project, dans le cas où vous voulez ajouter des fonctionnalités qui nécessitent que programmiez en C++ (par exemple, pour accéder aux fonctionnalités natives du mobile qui ne sont pas implémentées par le widget navigateur WebView).

La structure du système de fichier

Un projet HTML5 a un répertoire nommé /LocalFiles. C’est là où vous devriez mettre vos fichiers média, HTML, CSS et JavaScript.

Voici les détails techniques. Le contenu de /LocalFiles est packagé dans une étape de compilation nommée ‘Bundle’, vers un fichier LocalFiles.bin dans le répertoire /Resources. Dans /Resources, il y’a un fichier nommé Resource.lst, qui inclut LocalFiles.bin. Lors du démarrage de l’application, ce fichier est décompressé et ses contenus sont copiés dans le système de fichier réservé pour l’application dans le mobile.

Ceci est le structure du système de fichier que vous aurez lorsque vous créez un projet template (Veuillez noter que LocalFiles.bin ne sera créé que lorsque vous compilez le projet).

La différence entre 2 projets template est que HTML5/C++ Project template contient un fichier nommé bridge.js, qui fournit un support de communication entre JavaScript et C++.

Le fichier main.cpp contient le code qui crée une WebAppMoblet. Une moblet est une classe qui gère les événements dans une application. La WebAppMoblet est une moblet conçue pour être utilisée dans les applications Web. Elle fait appel à une Widget WebView (i.e., un navigateur plein écran).

Dans le cas d’un HTML5 project, vous n’avez pas besoin de modifier quoi que ce soit dans main.cpp.

Si vous voulez fournir des fonctionnalités qui font appel à du code C++ depuis JavaScript, vous pouvez éditer main.cpp pour y inclure ces fonctionnalités. L’application template exemple contient du code qui fait vibrer le mobile quand l’écran est touché.