Share
Dans ce tutoriel, vous apprendrez à créer une application webOS pour afficher tous les sites du réseau tuts +. Ceci est le deuxième volet d'une série sur le développement mobile webOS. Lisez la première partie de cette série pour une introduction générale à la plateforme et vous familiariser avec les outils nécessaires au développement d'applications webOS..
Pour commencer, ouvrez une invite de commande / terminal et tapez ce qui suit:
palm-générer tutsplus
Cela créera le répertoire "tutsplus" et la structure de répertoire nécessaire pour les applications webOS.
Téléchargez les images pour les tuts + sites attachés à ce post. Copiez les fichiers dans le répertoire app / images, puis copiez le fichier tuts_icon.png dans le répertoire tutsplus..
Nous examinons maintenant de plus près "tutsplus / appinfo.json". Ouvrez le fichier appinfo.json dans votre éditeur de texte favori et modifiez-le comme suit:
"id": "com.mycompany.tutsplus", "version": "1.0.0", "vendor": "MyCompany", "type": "web", "main": "index.html", " titre ":" TutsPlus "," icon ":" tuts_icon.png "
Allez-y et changez les valeurs "id" et "vendor" par vous aussi.
Pour remplir notre scène de vie, nous allons de l'avant et créons la première, ou "scène" principale:
palm-generate -t new_scene -p "name = main" tutsplus
Cela créera deux fichiers: la vue dans app / views / main / main-scene.html et l’assistant de la scène sur app / assistants / main-assistant.js.
Maintenant, ouvrez main-scene.html et ajoutez la première partie, l'en-tête:
Compétences pour payer les factures
La classe "en-tête multi-ligne palm-page" est l'une des nombreuses fonctions incluses dans le framework Mojo, mais nous allons définir les classes supplémentaires présentes dans le fragment HTML ci-dessus. Editez stylesheet / tutsplus.css pour cela et ajoutez ces définitions de classe:
.tuts-header position: fixed; z-index: 1000; largeur: 100%; hauteur: 35px; remplissage: 10px 0 0; marge: 0; -webkit-palm-mouse-target: ignorer; .title-image position: fixed; en haut: 16px; à gauche: 14px; .main-title position: absolute; taille de police: 24px; à gauche: 60px; en haut: -4px; largeur: 220px;
Comme vous pouvez le constater, nous utilisons les propriétés CSS standard à une exception près:
-webkit-palm-mouse-target: ignorer;
Cette propriété non standard indique à l'en-tête d'ignorer les clics..
REMARQUE:
Et si vous voulez regarder les éléments DOM et les styles CSS de votre application? Utilisez l'inspecteur de palme.
Nous ajoutons maintenant la viande de notre application à la scène, un widget de liste:
Nous allons plonger dans les listes pour un moment. Les listes sont probablement le widget le plus utilisé dans webOS. Ils nous permettent d'afficher des données en colonnes et bien plus encore. Les listes webOS incluent les fonctionnalités suivantes:
Nous nous dirigeons vers app / assistants / main-assistant.js pour configurer notre scène et la liste qu’elle contient. Nous définissons d’abord les données nécessaires pour remplir notre liste:
MainAssistant.prototype.setup = function () / * cette fonction est destinée aux tâches de configuration à exécuter lors de la création initiale 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 de configuration ici * / / * ajouter des gestionnaires d'événements pour écouter les événements des widgets * / this.myListModel = items: [title: 'Nettuts', titleImage: 'images / nettuts.png', leftImage: 'images / tiny-net.jpg', col: '# 2e6a60', titre: 'Vectortuts', titleImage: 'images / vectortuts.png', leftImage: 'images / tiny-vector.jpg', col: ' # 19487e ', title:' Psdtuts ', titleImage:' images / psdtuts.png ', leftImage:' images / tiny-psd.jpg ', col:' # a51500 ', titre:' Activetuts ', titleImage : 'images / activetuts.png', leftImage: 'images / tiny-active.jpg', col: '# a5290a', titre: 'Aetuts', titleImage: 'images / aetuts.png', leftImage: 'images /tiny-ae.jpg ', col:' # 4a3a57 ', titre:' Cgtuts ', titleImage:' images / cgtuts.png ', leftImage:' images / tiny-cg.jpg ', col:' # 73434f ' , title: 'Phototuts', titleImage: 'images / phototuts.png', leftImage: 'images / tiny-photo.jpg', col: '# 2e92b2', title: 'Audiotuts', titleImage: 'images /audiotuts.png ', leftImage:' images / tiny-audio.jpg ', col:' # 3d6b00 ', titre:' Mobiletuts ', titleImage:' images / mobiletuts.png ', leftImage:' images / tiny- mobile.png ', col:' # d19c00 '];
Notez que myListModel a une propriété nommée "items". Le widget Liste s'attend à trouver une propriété dans le modèle de données qui contient un tableau d'objets. Ce nom de propriété doit être "items". Dans notre cas, nous définissons les informations sur le réseau tutsplus. Chaque élément contient des propriétés représentant le titre, les images et la couleur de chaque site. Ces propriétés peuvent être utilisées dans la liste en l'incluant dans le modèle de liste. Une liste est rendue à l'aide d'un modèle, alors allons-y et créons la nôtre: app / views / main / itemTemplate.html. Editez le nouveau modèle pour contenir les éléments suivants:
#Titre
Notre modèle indique à la liste comment afficher chaque élément de son modèle. Nous voulons afficher le titre et l'image de notre modèle, nous incluons donc les balises spéciales # leftImage et # title. Celles-ci sont remplacées par les données de notre modèle lorsque la ligne est rendue..
Ensuite, ajoutez la classe "grid-cell" aux feuilles de style feuilles de style / tutsplus.css:
.grille-cellule couleur: # 000; .grid-cell.selected color: #fff; arrière-plan: #ccc; bordure: 1px solide # 00f;
Ces deux classes définissent l'apparence d'une ligne de liste dans son état non sélectionné et sélectionné.
Retournez à app / assistants / main-assistant.js et ajoutez la déclaration nécessaire pour configurer notre liste:
Accentsconagua
#Titrethis.myListAttr = itemTemplate: "main / itemTemplate", renderLimit: 20,; this.controller.setupWidget ("MyList", this.myListAttr, this.myListModel); ; Dans myListAttr, nous indiquons à la liste le modèle à utiliser; nous spécifions notre modèle que nous venons de créer. Comme vous pouvez le voir dans l’appel setupWidget, nous passons l’identifiant de la liste, les paramètres et le modèle..
Nous devons également modifier app / assistants / stage-assistant.js pour afficher la scène principale au démarrage de l'application:
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 ("main"); ; Tout est fini, voyons à quoi ressemble notre application… lancez l'émulateur, empaquetez-la et installez-la sur l'émulateur:
paume-paquet tutsplus paume-installation com.mycompany.tutsplus_1.0.0_all.ipk
Vous cherchez plutôt bien, vous ne pensez pas? Tout cela avec seulement quelques lignes de code. Ajoutons quelques fonctionnalités supplémentaires. Qu'en est-il de ce qui se passe lorsque l'utilisateur clique sur une ligne de la liste? Très bien, allez-y et ajoutez ce qui suit à app / assistants / main-assistant.js:
MainAssistant.prototype.activate = function (event) / * place ici les gestionnaires d’événements qui ne devraient être effectifs que lorsque cette scène est active. Par exemple, les gestionnaires de clés qui observent le document * / this.tapHandler = this.handleTap.bindAsEventListener (this); Mojo.Event.listen (this.controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); ; MainAssistant.prototype.handleTap = function (event) Mojo.Log.info ("L'index de l'événement est:" + event.index); Mojo.Log.info ("selected:" + event.item.title); this.title = event.item.title; this.titleImage = event.item.titleImage; this.col = event.item.col; Mojo.Controller.stageController.pushScene ("liste", this.title, this.titleImage, this.col); Enregistrement: Comme vous le voyez ci-dessus, nous avons ajouté une instruction Mojo.Log.info au code. Parfois, votre application ne démarre pas ou ne fonctionne pas ou vous souhaitez simplement imprimer des informations de débogage. Mojo.Log.info vous aidera à le faire. Pour voir la sortie produite par Mojo.Log.info, utilisez la commande suivante:
bûche de bois
(com.mycompany.tutsplus pour notre application)
Cette fois-ci, nous ajoutons l'appel Mojo.Event.listen à la méthode activate de MainAssistant. Chaque fois que l'application est activée (la scène est enfoncée ou une autre scène est ouverte et notre scène est à nouveau affichée), le code d'activation est appelé.
Nous créons un gestionnaire (this.taphandler) et l'appelons lorsque nous détectons un tap (Mojo.Event.listTap) dans notre liste (this.controller.get ('MyList')
Regardons notre fonction handler handleTap. Lorsque la liste est tapée, la fonction reçoit un objet pair. Ce qui nous intéresse, c'est la propriété event.index, qui contient quelle ligne de la liste a été exploitée. Heureusement pour nous, l’objet événement contient également les propriétés de l’élément de ligne du tapoté tiré du modèle. event.item.title à titre d'exemple contiendra "Mobiletuts" si on clique sur cette ligne.
Nous collectons toutes les données que nous souhaitons utiliser en dehors de l'objet événement et appelons finalement notre nouvelle scène "liste". Notez comment nous ajoutons les données que nous voulons transmettre à cette scène dans l'appel pushScene. Vous pouvez ajouter autant de paramètres que vous le souhaitez.
MainAssistant.prototype.deactivate = function (event) / * supprime tous les gestionnaires d’événements que vous avez ajoutés à l’activation et effectue tout autre nettoyage qui devrait avoir lieu avant que cette scène n’apparaisse ou qu'une autre ne soit placée au-dessus * / Mojo.Event.stopListening .controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); ; Notez que nous ajoutons également un Mojo.Event.stopListening à la méthode de désactivation de MainAssistant. De cette façon, notre application n'écoute plus les éléments de la liste lorsqu'une scène différente est placée dessus et nous ne rencontrons aucun gestionnaire d'événements errant lorsque l'application est quittée..
Ce qui reste à faire est de créer la nouvelle liste de scènes:
palm-generate -t new_scene -p "name = list" tutsplus
Ensuite, éditez app / views / list / list-scene.html:
Maintenant, éditez app / assistant / list-assistant.js:
function ListAssistant (title, titleimage, col) / * il s'agit de la fonction de création de votre assistant de scène. Tous les paramètres supplémentaires (après le nom de la scène) transmis à pushScene seront transmis. La référence au contrôleur de scène (this.controller) n'ayant pas encore été établie, toute initialisation nécessitant le contrôleur de scène doit être effectuée dans la fonction de configuration ci-dessous. * / this.title = title; this.titleimage = titleimage; this.col = col; ListAssistant.prototype.setup = function () / * cette fonction est destinée aux tâches de configuration à exécuter lors de la création initiale de la scène * / / * utilise Mojo.View.render pour restituer les modèles de vue et les ajouter à la scène, si nécessaire * / / * installez les widgets ici * / / * ajoutez des gestionnaires d'événements pour écouter les événements des widgets * / this.controller.get ('result'). innerHTML = "Vous avez sélectionné" + this.title + "dans la liste . " this.controller.get ('image'). innerHTML = "
" Notez comment nous copions les paramètres passés dans de nouvelles variables pour une utilisation ultérieure. Nous mettons également à jour le code HTML de notre scène pour afficher les paramètres passés.
Reconditionnez l'application, installez-la et lancez-la. Appuyez sur une ligne de la liste pour voir comment la nouvelle scène est poussée et afficher la ligne que vous avez sélectionnée.!
Félicitations, nous avons couvert toute une gamme de sujets dans cette deuxième partie. Vous avez appris à créer une liste, à la remplir de données, à l'afficher, puis à réagir aux interactions de l'utilisateur. Dans la partie suivante, nous allons remplir notre scène de liste de fonctionnalités: obtenez les derniers tutoriels et articles du flux RSS du site sélectionné et affichez-les dans une liste. Nous espérons que vous restez et laissez vos commentaires dans la section commentaires!
"