Introduction à WebOS 3.0 (Enyo)

Ce didacticiel présente les principes de base du développement pour la plate-forme WebOS 3.0 en expliquant comment créer une application simple. Vous apprendrez à installer l'environnement de développement, à créer une application de style "Hello-World" et à l'exécuter pour tester votre travail..

Qu'est-ce que WebOS 3.0??

WebOS est le nouveau système d'exploitation HP permettant de développer des applications pour le pavé tactile HP. Le nom WebOS est plutôt approprié car les applications sont écrites en HTML, CSS et JavaScript. Oui, si vous connaissez ces choses, vous pouvez vraiment commencer tout de suite!

Le codage dans Enyo est très simple et clair et peut considérablement augmenter l’efficacité du processus de développement. Bien que le cadre ne cible actuellement aucune plateforme en dehors du touchpad, il s'agit toujours d'une innovation révolutionnaire qui mérite d'être examinée. D'accord, mettons les mains dans le cambouis avec le dernier système d'exploitation mobile de HP: WebOS 3.0.

Configuration de l'environnement

La première chose à faire est d'obtenir votre copie du kit de développement WebOS 3.0 SDK auprès de developer.palm.com. Assurez-vous de créer un compte en tant que membre de la communauté des développeurs..

Téléchargez le dernier SDK. Suivez la procédure pas à pas d'installation du kit SDK publiée sur le site de Palm. Vous pouvez suivre les mêmes étapes que pour installer WebOS 2.1 (Mojo) et apporter des modifications si nécessaire..

En plus du SDK, vous devrez également installer tout navigateur Web basé sur un kit, tel que Google Chrome ou Safari (utilisé dans ce tutoriel), ainsi qu'un éditeur de texte tel que Notepad ++. Vous pouvez utiliser n’importe quel éditeur de texte de votre choix, mais ce didacticiel utilisera Notepad ++. Maintenant nous avons tous les outils nécessaires au développement.

Configuration de l'application

Avant d'écrire le code, nous devons créer une structure de dossiers spécifique, particulièrement adaptée à Enyo. La structure de dossiers peut être créée manuellement ou à partir de la ligne de commande..

Si vous utilisez la ligne de commande pour générer votre dossier d'application, utilisez les commandes générées par le palmier à partir de la ligne de commande. En général, les variables de chemin sont définies automatiquement lors de l’installation du SDK. Si ce n’est pas le cas, vous devez définir manuellement les variables de chemin du système d’exploitation si vous souhaitez que les commandes Palm fonctionnent..

Palm-générer mon application

Cela crée un dossier nommé ?myapp?. Le dossier ?myapp? contient généralement ces fichiers:

  • appinfo.json
  • depend.js
  • myapp.js
  • myapp.css
  • index.html
  • icon.png

Vous pouvez créer manuellement tous ces fichiers avec n’importe quel éditeur de texte, à l’exception de l’un: icon.png. Ceci est l'icône de votre application et est évidemment un fichier image.

1. appinfo.json

Le fichier appinfo.json contient des métadonnées générales sur l'application:

 
 "id": "com.nom.mysapp", "version": "1.0.0", "fournisseur": "votrenom", "type": "web", "main": "index.html", " titre ":" myapp "," icon ":" icon.png " 
  • id: cela devrait être un identifiant unique pour votre application.
  • version: le numéro de version de votre application.
  • fournisseur: votre nom ou le nom de l'entreprise pour laquelle vous travaillez.
  • main: Ceci est un fichier HTML chargé pour la première fois au démarrage de l'application.
  • title: Le titre de votre application.
  • icon: une image d'icône pour votre application.

2. depend.js

Ce fichier contient les chemins de tous les fichiers * .js et * .css de l'application:

 
 enyo.depends ("myapp.js", "myapp.css",);

3. index.html

Ce fichier est l'endroit où notre programme commence. Il contient du code qui ressemble beaucoup à la liste ci-dessous:

 
   myapp       

Essayons de créer une application dans laquelle l'utilisateur inscrira son nom dans une zone de saisie et l'affichera dans une fenêtre contextuelle. Jusqu'à présent, nous n'avons rien écrit dans myapp.js. Copiez le texte ci-dessous dans myapp.js et enregistrez-le:

 
 enyo.kind (name: "myapp", genre: enyo.Control, content: "Bonjour, c'est ma première application WebOS");

Ici, nous créons un type nommé "myapp". Une sorte peut être un mélange de contrôles. Ici, nous ne faisons que montrer du texte: "Bonjour, c'est ma première application WebOS".

Pour afficher ce texte, nous avons utilisé un type appelé enyo.Control, un composant pouvant recevoir des événements d'interface utilisateur et contenir d'autres contrôles..

Dans index.html nous avons écrit une