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 !