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 !