Introduction au développement de SDK webOS Partie 4

Ceci est le quatrième versement de notre série d’introduction webOS. Dans ce didacticiel, vous apprendrez à utiliser le widget Webview dans webOS pour afficher un site Web intégré à votre application. Nous ajouterons également une fonctionnalité permettant la réorganisation et la suppression des éléments de la liste..

La WebView

Pour commencer, allez-y et générez une nouvelle scène appelée article:

 palm-generate -t ​​new_scene -p "name = article" tutsplus 

Ensuite, éditez app / vues / article / article-scene.html contenir les éléments suivants:

 
Compétences pour payer les factures

Nous utilisons le même en-tête que dans notre scène principale. En-dessous, nous ajoutons le widget Webview. Notez que nous enveloppons la vue Web dans un wrapper-div, de cette façon
nous pouvons pousser la vue Web en dessous de l'en-tête.

Ajouter la classe supplémentaire à stylesheets / tutsplus.css.

 #webWrapper padding-top: 48px; 

Prochaine édition app / assistants / article-assistant.js et ajoutez la configuration du widget Webview:

 ArticleAssistant.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 besoin * / / * des widgets de configuration ici * / / * ajouter des gestionnaires d’événements pour écouter les événements des widgets * / this.controller.setupWidget ("myWebView", this.attributes = url: this.url,, this.model = ); ;

Ajoutez également le code nécessaire pour transmettre l'URL à la scène:

 function ArticleAssistant (url) / * c'est la fonction créateur de votre objet 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.url = url; 

Dès que la scène de l'article est appelée avec une URL, le widget Webview commence à charger le contenu du site..

Nous devons également modifier notre scène de liste pour appeler la scène de nouvel article lorsque nous tapons sur un élément. modifier app / assistants / list-assistant.js pour ça
et ajoutez la fonction handleTap:

 ListAssistant.prototype.handleTap = function (event) Mojo.Log.info ("L'index de l'événement est:" + event.index); Mojo.Log.info ("selected:" + event.item.guid); Mojo.Controller.stageController.pushScene ("article", event.item.guid); 

Le modèle de la liste contient la propriété guid, qui est l'URL du site Web. En utilisant l'objet event nous obtenons le guid du tapé
élément de la liste et le transmettre à la scène de l'article.

Ajoutez également un gestionnaire de bande de la liste à la fonction d'activation de ListAssistant:

 this.tapHandler = this.handleTap.bindAsEventListener (this); Mojo.Event.listen (this.controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler);

N'oubliez pas de nettoyer votre auditeur dans la fonction de désactivation:

 ListAssistant.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); ;

Voilà pour la webview. Créez, installez et exécutez l'application:

Liste d'éléments réordonner / supprimer

Ne serait-il pas intéressant de pouvoir modifier l'ordre des sites tutsplus dans la première scène? Supposons que vous vouliez d'abord Mobiletuts + au lieu de nettuts, ou si vous souhaitez supprimer un site qui ne vous intéresse pas? Je vais vous montrer comment faire cela avec des fonctionnalités de liste intégrées et des cookies..

Si vous lisez la partie 2 de cette série, nous avons fourni les données de la liste à partir d'un modèle statique. Changeons cela pour utiliser un modèle dynamique. Ouvrir app / assistants / main-assistant.js:

dans la fonction de configuration, remplacez:

 this.myListModel = items: [title: 'Nettuts', titleImage: 'images / nettuts.png', leftImage: 'images / tiny-net.jpg', col: '# 2e6a60',

avec

 this.myListModel = items: [];

Cela fournira un modèle de liste vide au moment de l’installation de la liste. Changez également les attributs de la liste:

 this.myListAttr = itemTemplate: "main / itemTemplate", swipeToDelete: true, renderLimit: 20, réordonnable: true;

Comme vous pouvez le constater, nous avons ajouté les propriétés swipeToDelete et reorderable et les avons définies sur true. Cela permettra de réorganiser la liste et de supprimer des éléments.

Ensuite, éditons la fonction activer et ajoutons quelques fonctions pour sauvegarder l’ordre de tri et les sites de tuts affichés. Pour ce faire, nous devons ajouter un cookie à l'application. Tout d'abord, le cookie 'TutsPlusCookie' est défini et chargé:

 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 * / var myCookie = new Mojo.Model.Cookie ('TutsPlusCookie'); var cookieData = myCookie.get () || ";

Si le cookie n'existe pas encore, nous définissons son contenu initial et sauvegardons. Si le cookie existe déjà, nous chargeons les données de celui-ci:

 if (cookieData == ") myCookie.put (tutsdata: '| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |'); var tutsdata =" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "; else var tutsdata = cookieData.tutsdata;

Laissez-moi vous expliquer le contenu du cookie un instant. Chaque site tutsplus a un identifiant défini (de 1 à 9). Le personnage "|" est utilisé comme un séparateur entre ces identifiants. le tutsdata variable définit l’ordre de tri des sites ainsi que les sites affichés. La valeur par défaut indique l'ordre de tri initial et définit également l'affichage des 9 sites. Vous verrez plus tard comment les fonctions de réorganisation et de suppression manipulent ces données et les stockent dans le cookie..

Nous devons également définir et ajouter deux écouteurs supplémentaires, l'un pour ListReorder et l'autre pour ListDelete. Nous ajoutons également une fonction pour charger les données dans le modèle de liste.

 this.loadData (tutsdata); this.tapHandler = this.handleTap.bindAsEventListener (this); this.reorderHandler = this.handleReorder.bindAsEventListener (this); this.deleteHandler = this.handleDelete.bindAsEventListener (this); Mojo.Event.listen (this.controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); Mojo.Event.listen (this.controller.get ('MaListe'), Mojo.Event.listReorder, this.reorderHandler); Mojo.Event.listen (this.controller.get ('MyList'), Mojo.Event.listDelete, this.deleteHandler); 

N'oubliez pas d'arrêter tous les auditeurs lorsque la scène est désactivée:

 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); Mojo.Event.stopListening (this.controller.get ('MyList'), Mojo.Event.listReorder, this.reorderHandler); Mojo.Event.stopListening (this.controller.get ('MyList'), Mojo.Event.listDelete, this.deleteHandler); ;

Regardons la nouvelle fonction this.loadData:

 MainAssistant.prototype.loadData = function (tutsdata) var newData = []; var k = 0; this.data = items: [id: 1, title: 'Nettuts', titleImage: 'images / nettuts.png', leftImage: 'images / tiny-net.jpg', col: '# 2e6a60',  id: 2, titre: 'Vectortuts', titleImage: 'images / vectortuts.png', leftImage: 'images / tiny-vector.jpg', col: '# 19487e', id: 3, titre: 'Psdtuts' , titleImage: 'images / psdtuts.png', leftImage: 'images / tiny-psd.jpg', col: '# a51500', id: 4, titre: 'Activetuts', titleImage: 'images / activetuts.png ', leftImage:' images / tiny-active.jpg ', col:' # a5290a ', id: 5, titre:' Aetuts ', titleImage:' images / aetuts.png ', leftImage:' images / tiny- ae.jpg ', col:' # 4a3a57 ', id: 6, titre:' Cgtuts ', titleImage:' images / cgtuts.png ', leftImage:' images / tiny-cg.jpg ', col:' # 73434f ', id: 7, titre:' Phototuts ', titleImage:' images / phototuts.png ', leftImage:' images / tiny-photo.jpg ', col:' # 2e92b2 ', id: 8, titre: 'Audiotuts', titleImage: 'images / audiotuts.png', leftImage: 'images / tiny-audio.jpg', col: '# 3d6b00', id: 9, titre: 'Mobiletut s ', titleImage:' images / mobiletuts.png ', leftImage:' images / tiny-mobile.png ', col:' # d19c00 '];

Tout d’abord, nous définissons les 9 sites tutsplus, ce qui n’a pas changé depuis la partie 2, lorsque nous avons défini une liste statique. Un changement: nous avons ajouté l'identifiant comme indiqué ci-dessus. Nous parcourons ensuite la chaîne passée en indiquant quels sites doivent être affichés et comment ils sont classés. Chaque site qui va être affiché est ajouté à un nouveau tableau, ce sera notre nouveau contenu pour le modèle de liste:

 var temp = tutsdata.split ('|'); pour (var i = 1; i < temp.length-1;i++)  for (var j=0;j < this.data.items.length;j++)  if (this.data.items[j].id==temp[i])  newData[k] =  id: this.data.items[j].id, title: this.data.items[j].title, titleImage: this.data.items[j].titleImage, leftImage: this.data.items[j].leftImage, col: this.data.items[j].col ; k++;   

Enfin, nous transmettons les nouvelles données à notre modèle de liste (vide lors de la configuration) et informons le modèle que les données ont changé (modèle modifié). C'est la même technique que nous avons utilisée dans la partie 3:

 this.myListModel ["items"] = newData; this.controller.modelChanged (this.myListModel, this); 

Les deux dernières choses qui manquent sont les fonctions de l'événement ListReorder et ListDelete. Commençons par l'événement handleReorder, qui sera appelé chaque fois que la liste sera réorganisée.

Avec l'aide des paramètres passés event.item, event.toIndex, et event.fromIndex, nous changeons le modèle de listes pour refléter le nouvel ordre de tri. Une nouvelle valeur de cookie est ensuite construite à partir du modèle et enregistrée dans le cookie de notre application..

 MainAssistant.prototype.handleReorder = function (event) Mojo.Log.info ("réorganiser l'événement% j", event.item, event.toIndex, event.fromIndex); var temp = "; this.myListModel.items.splice (event.fromIndex, 1); this.myListModel.items.splice (event.toIndex, 0, event.item); pour (var j = 0; j < this.myListModel.items.length;j++)  temp = temp + this.myListModel.items[j].id + '|';  var newtutsdata = '|' + temp; var myCookie = new Mojo.Model.Cookie('TutsPlusCookie'); myCookie.put( tutsdata: newtutsdata ); 

La fonction handleDelete fait presque la même chose, elle supprime d'abord l'élément supprimé du modèle de listes, puis construit à nouveau une nouvelle valeur de cookie à partir du modèle et enregistre.

 MainAssistant.prototype.handleDelete = function (event) Mojo.Log.info ("delete event" + event.item); this.myListModel.items.splice (this.myListModel.items.indexOf (event.item), 1); var temp = "; pour (var j = 0; j < this.myListModel.items.length;j++)  temp = temp + this.myListModel.items[j].id + '|';  var newtutsdata = '|' + temp; var myCookie = new Mojo.Model.Cookie('TutsPlusCookie'); myCookie.put( tutsdata: newtutsdata ); 

Vous pouvez maintenant réorganiser la liste dans la scène principale et même supprimer des éléments que vous ne souhaitez pas voir. Maintenez et faites glisser un élément pour le réorganiser. Pour supprimer un élément, glissez votre doigt dessus et il vous demandera si vous souhaitez le supprimer de la liste..

Emballer

Nous avons couvert de nombreux nouveaux sujets pour développer l'application tutsplus. Nous avons appris à utiliser le widget WebView pour afficher le contenu d'un site Web, puis à gérer la réorganisation et la suppression d'éléments de liste. J'espère que vous avez aimé lire et beaucoup appris!