-
Salut, je suis James Long et je vais vous présenter Mortar.
-
Mortar est un ensemble de modèles de projets
-
destinés à débuter rapidement l'écriture d'une appli Web.
-
Pour commencer, allez sur le site pour développeurs
-
marketplace.firefox.com/developers.
-
Cliquez sur "Build your app"
-
puis sur "App Templates".
-
Voici la liste des modèles disponibles
-
et des instructions pour les installer.
-
Il y a également un lien vers le dépôt contenant Mortar sur Github,
-
qui contient tous les modèles disponibles comme des sous-projets.
-
Il y a les modèles app-stub, game-stub, une liste et un affichage à onglets.
-
Vous trouverez sur le site les instructions pour les installer
-
et d'autres informations à leur sujet.
-
Je vais commencer à partir d'ici.
-
App Stub est un modèle minimaliste avec quelques fonctionnalités déjà branchées
-
Voici à quoi il ressemble lorsque vous l'installez.
-
Il n'y a qu'un bouton pour installer l'application
-
En regardant le fichier index.html, on voit qu'il ne contient pas grand chose,
-
juste le nécessaire : un peu de HTML,
-
le bouton d'installation et la bibliothèque Require.js
-
Si vous ne connaissez pas Require.js, allez faire un tour sur RequireJS.org.
-
C'est un système de gestion de modules en JavaScript.
-
Le modèle contient également un fichier manifest.webapp pré-renseigné
-
et qu'il vous suffit de compléter
-
Ces fichiers sont dans le dossier www.
-
En retournant à la racine du projet, vous verrez d'autres dossiers et fichiers.
-
Les dossiers node_modules et tools contiennent essentiellement des fichiers pour Volo_
-
Tous vos fichiers seront dans www,
-
les autres fichiers ne sont pas directement utiles.
-
La plupart du temps vous travaillerez dans www.
-
Une autre chose à savoir est que le modèle embarque Volo, que je vais vous montrer
-
Volo est un outil de gestion de projets Web.
-
Il est écrit en node.js.
-
Si vous n'avez pas node vous allez devoir l'installer, mais c'est simple.
-
Il suffit d'aller sur nodejs.org, cliquer sur Install et récupérer l'exécutable. Une fois que Node est installé,
-
il suffit de taper "npm install -g volo".
-
Cela va installer volo globalement.
-
Voici quelques commandes Volo dont vous pourriez avoir besoin :
-
volo create est l'une delle.
-
Elle prend en paramètres le nom de votre application
-
et une référence Github ou l'URL d'un modèle comme le brouillon d'application.
-
et crée l'arborescence d'une application à partir de ce modèle.
-
C'est une méthode rapide pour créer des applications basées sur les modèles Mortar.
-
Voilà, à présent nous pouvons faire un cd dans le dossier de l'application
-
Une autre commande utile est volo serve
-
Elle lance un serveur local
-
qui vous permet de voir votre application dans un navigateur
-
volo add ajoute des dépendances JavaScript.
-
Par exemple pour utiliser Zepto tapez volo add zepto
-
En allant dans le dossier js/lib vous y trouverez zepto.
-
On peut à présent ajouter un require('zepto') au fichier app.js
-
En fait il y est déjà, assurons-nous juste qu'il trouve Zepto
-
Et voilà
-
Vous remarquerez qu'on inclut Zepto avec la fonction require
-
parce que nous utilisons require.js.
-
De ce fait, toutes les bibliothèques doivent être définies comme des modules
-
On utilise pour cela la fonction define().
-
Mais que se passe-t-il si vous voulez utiliser une bibliothèque tierce qui n'est pas un module ?
-
volo add peut encapsuler automatiquement une bibliothèque.
-
Par exemple, si vous voulez inclure cette bibliothèque de gestion de fontes, vous pouvez passer son URL à volo add.
-
Volo détecte qu'elle n'utilise pas de modules et vous demande quelles sont ses dépendances,
-
et quelle variable globale vous voulez exposer.
-
en fait, il modifie un objet jQuery pour qu'il n'exporte rien, mais on peut ignorer ça.
-
À présent je peux utiliser la bibliothèque jQuery Flot avec require.
-
-
Notez que je ne me soucie pas de la valeur de retour
-
Il y a deux commandes volo à essayer absolument.
-
volo build crée une version optimisée de votre application.
-
Il concatène et compresse tous les fichiers CSS et JavaScript
-
et les place dans le dossier www-build.
-
Tapez ensuite volo ghdeploy
-
La première fois, il vous demande le nom du dépôt où déployer.
-
S'il n'existe pas,
-
il va le créer et déployer l'application sur Github Pages.
-
-
C'est tout, je peux aller sur mon appli sur Github et elle fonctionne !
-
Notez l'URL où c'est hébergée sur Github.
-
En 10 secondes, j'ai pu déployer mon application.
-
Cela fonctionne que le dépôt existe ou pas,
-
puis ça pousse l'application dans la branche gh-pages.
-
Voilà, c'est tout pour Volo
-
Il y a également un modèle de jeu.
-
Si vous y jetez un œil, vous verrez qu'il contient un jeu très simple
-
qui vous permet de contrôler une boîte avec les touches fléchées.
-
C'est encore très basique, mais si vous regardez le code,
-
il contient une boucle de jeu complète, et une très utile bibliothèque de gestion des entrées.
-
Ce qui aide beaucoup.
-
Il y a également une fonction de rendu et une fonction principale qui contient la boucle principale du jeu.
-
Ce modèle aide à créer un jeu basique.
-
Les 2 derniers modèles permettent de créer des listes et des vues par onglets.
-
Ils contiennent la même chose que le modèle App Stub,
-
plus une bibliothèque avec des composants d'interface
-
Voici le modèle liste détaillée.
-
C'est ce que vous voyez lorsque vous l'installez. C'est une application fonctionnelle avec une liste et des vues détaillées.
-
Vous avez une liste d'items, sur lesquels vous pouvez cliquer pour en voir le détail.
-
ous pouvez les éditer,
-
vos modifications sont prises en compte,
-
et la liste rafraichie.
-
Vous pouvez également ajouter de nouveaux items
-
Et voilà !
-
Vous trouverez plus de détails sur la bibliothèque d'interface
-
dans le projet Mortar Layouts, dont le lien est dans le fichier README.
-
Il implémente cette interface utilisateur
-
et décrit comment l'utiliser et la modifier.
-
Je vais vous montrer comment l'écran d'affichage détaillé l'utilise.
-
Voici le fichier index.html.
-
Il y a deux balises spécifiques, x-view et x-listview.
-
x-listview implémente une structure listview, qui implémente un élément avec un en-tête et un pied de page,
-
et vous pouvez mélanger ces vues, en mettre une à l'intérieur de l'autre.
-
Il y a également des attributs spécifiques, comme data-view sur un bouton,
-
qui déclenche l'affichage d'une vue lorsque le bouton est pressé. Sa valeur est un sélecteur CSS.
-
Vous trouverez plus d'informations dans le dépôt de Mortar Layouts.
-
L'autre modèle est la vue par onglets,
-
qui est très similaire à la vue par liste, seul le HTML change un peu.
-
Il comporte une vue de liste comme le précédent,
-
mais elle est imbriquée dans la vue principale, qui comporte plusieurs sections,
-
pour simuler des onglets. Donc, si vous entrez là et consultez cet item,
-
puis changez de section,
-
vous remarquerez qu'il mémorise où j'étais et que je peux y revenir.
-
Tout cela est inclus dans la bibliothèque Mortar Layouts.
-
Voilà, si vous avez des problèmes,
-
n'hésitez pas àcréer des tickets sur Github.
-
Merci de votre attention !
