Share
Cette série de didacticiels vous guidera tout au long du processus de démarrage du développement d'applications webOS. Dans ce tutoriel, vous apprendrez à installer l'environnement de développement webOS et à créer une application simple. Dans les parties suivantes de cette série, nous créerons une application utilisable qui vous permettra de parcourir et d’afficher les derniers articles sur le réseau Tuts +..
Aujourd'hui, les applications Web sont courantes grâce aux progrès des navigateurs Web modernes. Sur les appareils mobiles, cependant, la plupart des applications s'exécutent localement et sont construites avec un langage de programmation compilé tel que Objective-C ou Java. Étant donné qu'ils sont conçus pour un appareil mobile spécifique, il est très difficile de les transférer sur un site Web ou une autre plate-forme mobile..
Le système d'exploitation Palm pour appareils mobiles (Palm Pre et Pixi, par exemple) est appelé WebOS. Une des caractéristiques distinctives de webOS est qu’il crée toutes les applications Web des applications de périphérique créées avec HTML, CSS et Javascript à l’aide du framework Javascript Mojo. Même les applications Palm natives sur le périphérique sont des applications Web. À l'aide de HTML5, les applications webOS peuvent stocker des données localement, dessiner des graphiques 2D et effectuer des transitions / animations CSS. Ils peuvent également appeler des services Web via AJAX pour accéder à des données locales ou distantes..
La structure Javascript de Mojo suit vaguement le modèle MVC (Model-View-Controller). Les vues sont écrites en HTML et CSS, tandis que les contrôleurs contrôlant la logique de l'application sont écrits en Javascript. Mojo inclut également un ensemble d'éléments d'interface utilisateur communs, tels que des listes, des boutons, des conteneurs, des boîtes de dialogue, des indicateurs et des sélecteurs. Pour accéder aux couches inférieures du système d’exploitation, Mojo est livré avec un ensemble d’API Javascript permettant de s’interfacer avec les services du périphérique (alarmes, contacts, calendriers, photos, par exemple) ou avec des composants matériels (GPS, écran, appareil photo, bloc d’alimentation, etc.)..
En bref, si vous connaissez HTML, CSS et Javascript, vous pouvez facilement créer des applications pour webOS.!
Pour commencer à créer des applications pour webOS, vous devez télécharger et installer le kit de développement logiciel Palm webOS. Le kit de développement WebOS est disponible pour OS X, Linux et Windows. Vous devrez suivre les dernières instructions de Palm pour configurer votre environnement de développement webOS..
Une fois le SDK installé, vous pouvez utiliser n’importe quel éditeur de texte ou IDE pour créer vos fichiers de code source. Il existe un plugin de développement webOS disponible pour Eclipse, mais je préfère personnellement utiliser l'excellent Komodo Edit d'ActiveState avec un plugin tiers pour le développement webOS. Dans ce tutoriel, nous allons utiliser la méthode de ligne de commande.
Pour démarrer avec une application hello world, tapez ce qui suit à partir de votre ligne de commande / terminal:
Palm-générer helloWorld
Cette commande créera un répertoire nommé "helloWorld" qui inclura la structure de répertoire nécessaire à notre application..
Regardons cette structure un instant:
Examinons maintenant appinfo.json. Ouvrez le fichier dans votre éditeur de texte préféré:
"id": "com.votredomaine.helloworld", "version": "1.0.0", "fournisseur": "Mon entreprise", "type": "web", "principal": "index.html", "titre": "helloWorld", "icon": "icon.png"
Les paramètres les plus importants de ce fichier sont:
Ensuite, jetez un oeil à index.html. C'est un fichier HTML standard qui ouvre la voie à votre application en effectuant des tâches telles que le chargement de la structure mojo et de la feuille de style principale..
Bonjour le monde!
Pour tester notre application, nous allons utiliser l'émulateur webOS sur une version x86 de webOS exécutée avec VirtualBox. Toutes les fonctionnalités matérielles ne sont pas prises en charge sur l'émulateur. L’indisponibilité à la fois de la caméra de l’appareil et de la fonctionnalité multitouch à l’écran est un exemple des limitations du simulateur, mais des commandes spéciales peuvent nous aider à surmonter ces limitations. Par exemple, il est possible d’émettre une commande pour simuler un appel entrant ou un message texte..
Les commandes du système d'exploitation suivantes vont démarrer l'émulateur webOS:
Allez-y et exécutez une instance de l'émulateur. Jouez un peu avec la fonctionnalité.
Afin de conditionner notre application afin qu'elle puisse être exécutée sur webOS, tapez ce qui suit dans la ligne de commande à partir du répertoire qui contient le dossier "helloWorld":
paume-paquet helloWorld
Le résultat est notre fichier de package installable: com.votredomaine.helloworld_1.0.0_all.ipk. Notez que le nom de fichier contient l'ID et la version du fichier appinfo.json..
Maintenant, installez l'application avec la commande suivante:
palm-install com.votredomaine.helloworld_1.0.0_all.ipk
Lancer l'application dans l'émulateur:
Nous avons maintenant notre première application en cours d'exécution, mais ce n'est pas très excitant. Ajoutons un peu plus de contenu.
Pour remplir notre scène de vie, nous allons de l'avant et créons la première scène. Les scènes sont les mêmes que les différentes pages d'un site Web. Les scènes peuvent être poussées sur la scène, sorties de la scène ou échangées avec une autre scène.
palm-generate -t new_scene -p "name = first" helloWorld
Cela crée deux fichiers: la vue dans app / views / first / first-scene.html et l’assistant de la scène sur app / assistants / first-assistant.js..
Ouvrez first-scene.html et modifiez-le pour qu'il contienne les éléments suivants:
Première scèneBienvenue dans mon monde
Notez les noms de classe qui commencent par "palm-"; ces styles sont inclus dans le framework Mojo, mais peuvent être développés ou modifiés dans votre propre feuille de style.
Maintenant, nous éditons stage-assistant.js pour afficher notre nouvelle scène au démarrage de l'application:
Accentsconagua
function StageAssistant () / * c'est la fonction créatrice de votre objet assistant de scène * / StageAssistant.prototype.setup = function () / * cette fonction est destinée aux tâches de configuration qui doivent se produire lors de la création initiale de la scène * / Mojo.Controller.stageController.pushScene ("premier"); ; compressez l'application et réinstallez-la. Voici le résultat:
Ajoutons une scène de plus et appelons-le lorsque l'utilisateur appuie sur un bouton de la première scène:
palm-generate -t new_scene -p "name = second" helloWorld
Nous devons maintenant ajouter un bouton à la première scène. Modifiez le fichier first-scene.html comme suit:
Première scèneBienvenue dans mon monde
Pour voir réellement ce bouton, nous devons configurer le widget Bouton dans le code de configuration de l'assistant de la première scène. Modifions first-assistant.js pour le faire:
FirstAssistant.prototype.setup = function () / * cette fonction s’applique lors de la première création de la scène * / / * utilise Mojo.View.render pour restituer les modèles de vue et les ajouter à la scène, si nécessaire. * / / * Les widgets d'installation ici * / / * ajoutent des gestionnaires d'événements pour écouter les événements des widgets * / this.controller.setupWidget ("button1", this.attributes = , this.model = label: "OK", disabled: false); this.handleButton1 = this.handleButtonPress1.bindAsEventListener (this); Mojo.Event.listen (this.controller.get ("button1"), Mojo.Event.tap, this.handleButton1); Notez que nous référençons le bouton par son identifiant: "button1". Nous avons également ajouté des fonctionnalités permettant de faire quelque chose lorsque nous appuyons sur le bouton. Pour cela, nous créons d’abord un gestionnaire d’événements, this.handleButton1. Nous allons créer la fonction nécessaire handleButtonPress1 ensuite. La ligne suivante, Mojo.Event.listen, configure le bouton pour écouter les taps et appeler notre gestionnaire d'événements si un tap est reçu..
Créons notre gestionnaire d'événements qui gère les pressions sur les boutons. Notre gestionnaire d'événements pousse simplement notre deuxième scène sur la scène:
FirstAssistant.prototype.handleButtonPress1 = fonction (événement) Mojo.Controller.stageController.pushScene ("second"); Enfin, nous modifions second-scene.html pour contenir quelque chose d’utile:
Deuxième scèneC'est la deuxième scène
Ok, maintenant emballons et réinstallons. Cela devrait être le résultat final:
Vous venez de faire un tour d'horizon du développement d'applications pour webOS. Dans la prochaine partie de cette série, nous allons construire une application pour afficher et lire les derniers articles du réseau Tuts +. Laissez des commentaires et des commentaires ci-dessous pour nous dire ce que vous pensez de cette série!
