L’utilisation de mobiles se généralise et les applications présentes sur Smartphone ne cessent de répondre à des besoins toujours plus étendus. Pour vous aider à mieux comprendre cette technologie, Osaxis vous propose en deux parties une présentation des principes de fonctionnement de la programmation sous Palm WebOS, suivie d’un exemple d’application primée au concours « SFR jeunes talents ».
1. Présentation de Palm WebOS
WebOS est un système d’exploitation mobile conçu par Palm Inc, fonctionnant grâce à un noyau Linux. Il équipe actuellement les Smartphones Palm Pré ainsi que Palm Pixi, et devrait à l’avenir équiper toutes les tablettes Hewlett-Packard.
 |
L’interface utilisateur a été conçue pour être utilisée sur des appareils possédant un écran tactile. Cette interface est divisée en deux parties : une partie centrale présentant la liste des applications installées par l’utilisateur ou la liste des applications en cours d’exécution, et une partie inférieure pour les notifications, messages et autres informations. |
Sous WebOS, une carte est une application en cours d’exécution. Ce nom est en rapport avec les bords arrondis de l’interface graphique, rappelant la forme d’une carte de jeux. WebOS est un système d’exploitation multitâches, affichant la liste des applications en cours d’exécution sous forme de cartes alignées et manipulables tactilement (fermeture, navigation…).
Le menu de WebOS se compose de plusieurs vues, contenant chacune un groupe d’applications choisies par l’utilisateur. La navigation entre les vues se fait tactilement par glissement du doigt sur l’écran.
WebOS possède son propre catalogue d’applications, fournissant la liste de toutes les applications disponibles et téléchargeables. Il gère également les caractéristiques communes aux Smartphones actuels tels que le GPS, l’appareil photo et la navigation internet.
Pour résumer, WebOS est un système d’exploitation orienté Web proposant un certain nombre d’innovations telles que la recherche universelle, l’unification du carnet d’adresses ou encore la navigation Web avancée (navigation multi-onglets).
2. Principes de programmation
Le développement d’applications sous WebOS repose sur plusieurs standards ouverts issus du Web tels que HTML 5, JavaScript, XHTML, CSS et JSON. La conception d’applications WebOS autour de ces technologies permet, selon les équipes Palm, d’éviter aux développeurs l’apprentissage d’un nouveau langage de programmation.
Palm met également à disposition un kit de développement contenant un émulateur (Palm Pré, Pixi) et un SDK nécessaires à la réalisation d’application WebOS. De plus, un plugin, mis à disposition gratuitement, permet de développer les applications et de lancer l’émulateur à partir de l’environnement Eclipse.
Dans un second temps, il est possible de tester les applications en passant le téléphone en mode développeur. D’autre part, le WebOS Plugin Dévelopment Kit (PDK) permet aux développeurs d’améliorer ou d’étendre leurs applications WebOS en ajoutant leur propre module C ou C++ au système d’exploitation en fonction de leurs besoins.
WebOS inclut un framework nommé Mojo, possédant un éventail de méthodes de traitement et de stockage ainsi que des contrôles graphiques. Cette interface de programmation (Mojo API), permet d’uniformiser les éléments graphiques entre les applications et d’apporter une aide au développement.
Architecture d’une application
Toutes les applications WebOS possèdent la même architecture, dont la structure est la suivante:
 |
|
Développement d’une scène
L’interface graphique d’une application correspond à un ensemble de scènes. Une scène est une page HTML dont la création est identique à celle d’une page Web standard. Bien sûr, il est conseillé d’utiliser les contrôles fournis par le Framework Mojo, redéfinissant l’intégralité des contrôles de base tels que les boîtes à cocher, champs de saisie et autres. Voici un exemple présentant l’ajout d’un bouton dans une page :
WebOS
<div x-mojo-element=« Button » id=« buttonId » class=« buttonClass » name=« buttonName »></div>
HTML “classique”
<input type=« button » id=« buttonId » class=« buttonClass » name=« buttonName »></input>
Une scène se crée donc de la même façon qu’une page Web. Au niveau de l’architecture, chaque scène possède son propre dossier sous « VotreProjet/app/view/ ». En suivant les conventions de nommage, nous obtenons donc pour la scène « accueil » : « VotreProjet/app/view/accueil/accueil-scene.html »
Dans certains cas, il est possible d’avoir plusieurs fichiers HTML dans un dossier. Par exemple, si l’on souhaite ajouter une boîte de dialogue à la scène, un fichier HTML correspondant à celle-ci sera ajouté au dossier.
Chaque scène est associée à un fichier JavaScript communément appelé assistant. Cette association est décrite dans le fichier sources.json à la racine du projet. Dans notre exemple, nous devrons ajouter ces lignes à notre fichier d’association :
|
1 2 3 4 |
{ "scenes": "accueil", "source": "app/assistants/accueil-assistant.js" } |
Développement de l’assistant associé à la vue
Un assistant contient l’ensemble des événements ainsi que le code associé à une scène. La nomenclature d’une application WebOS étant très importante, ces fichiers sont toujours placés dans le dossier « VotreProjet/app/assistants/ » et dans notre exemple ce fichier prendra le nom de « accueil-assistant.js ».
Le cycle de vie d’une scène entraîne l’exécution de fonctions JavaScript telles que :
|
1 2 3 |
function AccueilAssistant() { //Création de l’objet assistant associé à la scène « accueil » } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
AccueilAssistant.prototype.setup = function() { //Appelé lors du chargement d’une scène } AccueilAssistant.prototype.activate = function() { //Appelé lorsqu’une scène devient active (visible) } AccueilAssistant.prototype.deactivate = function() { //Appelé lorsqu’une scène devient inactive (invisible) } AccueilAssistant.prototype.cleanup = function() { //Appelé lors du déchargement d’une scène } |
Le « setup » doit entre autres contenir la définition des événements intervenant dans une scène. Par exemple, un clic sur un bouton sera défini de la manière suivante :
|
1 |
this.controller.listen(this.controller.get('button1'),Mojo.Event.tap, this. button1Pressed.bind(this)); |
- « this.controller.listen » : utilisation de la méthode permettant d’associer une fonction à un événement ;
- « this.controller.get(‘button1’) » : récupération du bouton ayant pour identifiant ‘button1’ ;
- « Mojo.Event.tap » : description de l’événement que l’on souhaite associer (il s’agit ici de l’événement clic) ;
- « this.button1Pressed.bind(this) » : identification de la fonction JavaScript devant être appelée.
Il ne reste plus qu’à ajouter notre nouvelle fonction dans l’assistant contenant le code à exécuter lors du clic sur le bouton.
|
1 2 3 4 |
AccueilAssistant.prototype.button1Pressed = function() { //Code à exécuter Mojo.Log.info("Button1Pressed"); } |
En conclusion, nous pouvons faire l’analogie avec une application Web (.Net par exemple) dans laquelle une page ASP.Net correspond à une scène, et le « code behind » C# correspond à un assistant.
Localisation (Gestion du multilinguisme)
Les applications sont évidemment localisables, mais il faut être prudent et prévoir dès le départ cette fonctionnalité. Au démarrage, l’application prend par défaut la langue utilisée par le téléphone.
Comme vu précédemment, le code est écrit en deux parties : la scène et l’assistant, pour chaque page. La localisation pour ces deux parties est complètement différente, et il faut au maximum privilégier la gestion des textes dans l’assistant. En effet, pour l’assistant, un texte n’est pas obligatoirement mis en « dur », mais peut utiliser une clé qui permet au système d’aller chercher la valeur correspondante :
|
1 |
$('labelWelcome').update($L('Welcome')); |
- $(‘labelWelcome’) : récupère un élément nommé labelWelcome dans la page ;
- Update(…) : met à jour le texte de l’élément avec la valeur ;
- $L(‘Welcome’) : $L indique que la valeur entre parenthèses est localisée, et qu’il ne s’agit pas d’une valeur mais de la clé correspondant à la valeur.
Il faut ensuite créer à la racine du projet un dossier nommé « ressources » contenant un dossier pour chaque langue. (Par exemple, pour le français, un dossier fr_fr, pour l’anglais un dossier en_us, etc.). Dans chacun de ces dossiers, un ficher « strings.json » contient les traductions de chacune des clés utilisées dans les assistants. Exemple :
|
1 2 3 4 |
{ "Welcome":"Bonjour", "Other":"Autre" } |
Si une clé n’est pas définie, alors c’est la clé elle-même qui sera affichée dans la page. En fonction de la langue du téléphone, le système ira piocher automatiquement dans le dossier (fr_fr, en_us…) correspondant. Pour ce qui est des vues, il faut dans ce cas faire une copie complète de la page et la placer dans un dossier « VotreProjet/ressources/fr_fr/views/votrepagelocalise.html ». C’est dans cette copie que tous les textes seront remplacés par les textes traduits. Cette façon de faire implique au final une maintenance de deux fichiers (pour deux langues) pour une seule page, ce qui est très contraignant. Pour cette raison, il convient de privilégier au maximum la gestion des textes au niveau des assistants.
Base de données
Il existe trois façons de sauvegarder des données avec WebOS : « Cookie », « Dépôt » et « HTML 5 Database Object ».
- Cookie : cette approche est utile pour stocker de petites données comme des préférences ou un numéro de version. Les cookies sont limités à une taille de 4 Ko, et sont comparables aux cookies d’un navigateur conventionnel.
|
1 2 3 |
var cookie1 = new Mojo.Model.Cookie("test"); var expiration = new Date("December 30, 2010 00:00:00"); cookie1.put("This is my info", expiration); |
|
1 2 |
var cookie2 = new Mojo.Model.Cookie("test"); Mojo.Log.info("cookie2 value = " + cookie2.get()); |
- Dépôt : le Dépôt est un objet de stockage simple qui ne requiert pas au développeur de gérer la complexité d’un schéma SQL, ni la création de requête. Il est possible de stocker jusqu’à 1 Mo dans un dépôt. Cette méthode utilise le Framework de conversion JSON Object vers SQL et inversement. Dans l’exemple suivant, « monVoyage » est l’objet qui est stocké dans le dépôt. Cet objet peut être un tableau, une chaîne de caractères, un nombre etc…
|
1 2 |
var db = new Mojo.Depot({name:”demo”}, onSuccess, onFailure); db.add(“voyage”, monVoyage, onSuccess, onFailure) |
- HTML 5 Database Object : cette solution est à utiliser dans le cas où une base de données plus complète est nécessaire. Il s’agit d’un système de base de données intégré à HTML 5, permettant la création et l’utilisation classique de tables, requêtes, transactions etc… Dans cet exemple, « Request » est la chaîne de caractères contenant la requête SQL que l’on souhaite exécuter :
|
1 2 3 4 5 6 7 8 |
db = openDatabase(name:"project", version:"1", estimatedSize:"25000"); db.transaction( ( function (transaction) { transaction.executeSql(request,<a href=""></a>,successFunction,errorFunction;) } ).bind(this) ); |
Mise en application
La seconde partie de cet article sur WebOS, consultable d’ici peu sur ce blog, sera consacrée à la présentation de l’application « Holidays Trip », lauréate du prix spécial du jury lors du concours « SFR Jeunes talents » de cet été 2010.