0:00:01.584,0:00:05.150
Salut, je suis James Long et je vais vous présenter Mortar.

0:00:06.230,0:00:07.915
Mortar est un ensemble de modèles de projets

0:00:07.915,0:00:10.417
destinés à débuter rapidement l'écriture d'une appli Web.

0:00:10.417,0:00:13.098
Pour commencer, allez sur le site pour développeurs

0:00:13.098,0:00:17.212
marketplace.firefox.com/developers.

0:00:17.212,0:00:18.882
Cliquez sur "Build your app"

0:00:20.451,0:00:24.118
puis sur "App Templates".

0:00:24.118,0:00:27.179
Voici la liste des modèles disponibles

0:00:27.179,0:00:30.553
et des instructions pour les installer.

0:00:30.553,0:00:33.052
Il y a également un lien vers le dépôt contenant Mortar sur Github,

0:00:33.052,0:00:36.886
qui contient tous les modèles disponibles comme des sous-projets.

0:00:36.886,0:00:41.728
Il y a les modèles app-stub, game-stub, une liste et un affichage à onglets.

0:00:41.728,0:00:44.318
Vous trouverez sur le site les instructions pour les installer

0:00:44.318,0:00:48.052
et d'autres informations à leur sujet.

0:00:48.052,0:00:50.970
Je vais commencer à partir d'ici.

0:00:50.970,0:00:54.536
App Stub est un modèle minimaliste avec quelques fonctionnalités déjà branchées

0:00:54.536,0:00:56.681
Voici à quoi il ressemble lorsque vous l'installez.

0:00:56.681,0:00:58.781
Il n'y a qu'un bouton pour installer l'application

0:00:59.842,0:01:02.543
En regardant le fichier index.html, on voit qu'il ne contient pas grand chose,

0:01:02.543,0:01:05.851
juste le nécessaire : un peu de HTML,

0:01:05.851,0:01:10.932
le bouton d'installation et la bibliothèque Require.js

0:01:10.932,0:01:14.368
Si vous ne connaissez pas Require.js, allez faire un tour sur RequireJS.org.

0:01:14.368,0:01:18.515
C'est un système de gestion de modules en JavaScript.

0:01:18.515,0:01:22.661
Le modèle contient également un fichier manifest.webapp pré-renseigné

0:01:22.661,0:01:25.693
et qu'il vous suffit de compléter

0:01:25.693,0:01:28.785
Ces fichiers sont dans le dossier www.

0:01:28.785,0:01:32.102
En retournant à la racine du projet, vous verrez d'autres dossiers et fichiers.

0:01:32.102,0:01:36.215
Les dossiers node_modules et tools contiennent essentiellement des fichiers pour Volo_

0:01:36.215,0:01:38.798
Tous vos fichiers seront dans www,

0:01:38.798,0:01:41.863
les autres fichiers ne sont pas directement utiles.

0:01:41.863,0:01:44.626
La plupart du temps vous travaillerez dans www.

0:01:44.626,0:01:49.995
Une autre chose à savoir est que le modèle embarque Volo, que je vais vous montrer

0:01:49.995,0:01:52.801
Volo est un outil de gestion de projets Web.

0:01:52.801,0:01:54.151
Il est écrit en node.js.

0:01:54.151,0:01:57.167
Si vous n'avez pas node vous allez devoir l'installer, mais c'est simple.

0:01:57.167,0:02:02.786
Il suffit d'aller sur nodejs.org, cliquer sur Install et récupérer l'exécutable. Une fois que Node est installé,

0:02:02.786,0:02:08.368
il suffit de taper "npm install -g volo".

0:02:08.368,0:02:12.583
Cela va installer volo globalement.

0:02:12.583,0:02:14.398
Voici quelques commandes Volo dont vous pourriez avoir besoin :

0:02:14.398,0:02:15.937
volo create est l'une delle.

0:02:15.937,0:02:18.146
Elle prend en paramètres le nom de votre application

0:02:18.146,0:02:27.468
et une référence Github ou l'URL d'un modèle comme le brouillon d'application.

0:02:27.468,0:02:29.512
et crée l'arborescence d'une application à partir de ce modèle.

0:02:29.512,0:02:33.816
C'est une méthode rapide pour créer des applications basées sur les modèles Mortar.

0:02:33.816,0:02:39.245
Voilà, à présent nous pouvons faire un cd dans le dossier de l'application

0:02:39.245,0:02:42.147
Une autre commande utile est volo serve

0:02:42.147,0:02:44.338
Elle lance un serveur local

0:02:44.338,0:02:51.285
qui vous permet de voir votre application dans un navigateur

0:02:51.285,0:02:56.182
volo add ajoute des dépendances JavaScript.

0:02:56.182,0:03:04.256
Par exemple pour utiliser Zepto tapez volo add zepto

0:03:04.256,0:03:07.317
En allant dans le dossier js/lib vous y trouverez zepto.

0:03:10.132,0:03:14.663
On peut à présent ajouter un require('zepto') au fichier app.js

0:03:14.663,0:03:25.770
En fait il y est déjà, assurons-nous juste qu'il trouve Zepto

0:03:26.970,0:03:28.818
Et voilà

0:03:28.818,0:03:31.598
Vous remarquerez qu'on inclut Zepto avec la fonction require

0:03:31.598,0:03:33.605
parce que nous utilisons require.js.

0:03:33.605,0:03:37.731
De ce fait, toutes les bibliothèques doivent être définies comme des modules

0:03:37.731,0:03:40.030
On utilise pour cela la fonction define().

0:03:40.030,0:03:43.799
Mais que se passe-t-il si vous voulez utiliser une bibliothèque tierce qui n'est pas un module ?

0:03:43.799,0:03:48.068
volo add peut encapsuler automatiquement une bibliothèque.

0:03:48.068,0:03:54.550
Par exemple, si vous voulez inclure cette bibliothèque de gestion de fontes, vous pouvez passer son URL à volo add.

0:03:54.550,0:03:59.654
Volo détecte qu'elle n'utilise pas de modules et vous demande quelles sont ses dépendances,

0:03:59.654,0:04:02.832
et quelle variable globale vous voulez exposer.

0:04:02.832,0:04:11.500
en fait, il modifie un objet jQuery pour qu'il n'exporte rien, mais on peut ignorer ça.

0:04:11.500,0:04:13.823
À présent je peux utiliser la bibliothèque jQuery Flot avec require.

0:04:13.823,0:04:18.263


0:04:18.263,0:04:24.765
Notez que je ne me soucie pas de la valeur de retour

0:04:24.765,0:04:28.083
Il y a deux commandes volo à essayer absolument.

0:04:28.083,0:04:30.749
volo build crée une version optimisée de votre application.

0:04:30.749,0:04:34.969
Il concatène et compresse tous les fichiers CSS et JavaScript

0:04:36.599,0:04:40.587
et les place dans le dossier www-build.

0:04:40.587,0:04:44.037
Tapez ensuite volo ghdeploy

0:04:44.037,0:04:47.484
La première fois, il vous demande le nom du dépôt où déployer.

0:04:48.899,0:04:51.746
S'il n'existe pas,

0:04:51.746,0:04:54.632
il va le créer et déployer l'application sur Github Pages.

0:04:54.632,0:04:59.055


0:04:59.055,0:05:07.057
C'est tout, je peux aller sur mon appli sur Github et elle fonctionne !

0:05:07.057,0:05:10.885
Notez l'URL où c'est hébergée sur Github.

0:05:10.885,0:05:13.832
En 10 secondes, j'ai pu déployer mon application.

0:05:13.832,0:05:16.158
Cela fonctionne que le dépôt existe ou pas,

0:05:16.158,0:05:20.343
puis ça pousse l'application dans la branche gh-pages.

0:05:20.343,0:05:22.988
Voilà, c'est tout pour Volo

0:05:22.988,0:05:25.308
Il y a également un modèle de jeu.

0:05:25.308,0:05:29.490
Si vous y jetez un œil, vous verrez qu'il contient un jeu très simple

0:05:29.490,0:05:32.082
qui vous permet de contrôler une boîte avec les touches fléchées.

0:05:32.082,0:05:34.897
C'est encore très basique, mais si vous regardez le code,

0:05:34.897,0:05:41.676
il contient une boucle de jeu complète, et une très utile bibliothèque de gestion des entrées.

0:05:41.676,0:05:46.181
Ce qui aide beaucoup.

0:05:46.181,0:05:51.371
Il y a également une fonction de rendu et une fonction principale qui contient la boucle principale du jeu.

0:05:58.308,0:06:01.398
Ce modèle aide à créer un jeu basique.

0:06:01.398,0:06:03.775
Les 2 derniers modèles permettent de créer des listes et des vues par onglets.

0:06:03.775,0:06:09.078
Ils contiennent la même chose que le modèle App Stub,

0:06:09.078,0:06:10.946
plus une bibliothèque avec des composants d'interface

0:06:10.946,0:06:16.524
Voici le modèle liste détaillée.

0:06:16.587,0:06:19.321
C'est ce que vous voyez lorsque vous l'installez. C'est une application fonctionnelle avec une liste et des vues détaillées.

0:06:19.321,0:06:22.015
Vous avez une liste d'items, sur lesquels vous pouvez cliquer pour en voir le détail.

0:06:27.675,0:06:30.227
ous pouvez les éditer,

0:06:30.227,0:06:31.980
vos modifications sont prises en compte,

0:06:31.980,0:06:35.086
et la liste rafraichie.

0:06:45.948,0:06:47.874
Vous pouvez également ajouter de nouveaux items

0:06:47.874,0:06:48.748
Et voilà !

0:06:48.748,0:06:55.184
Vous trouverez plus de détails sur la bibliothèque d'interface

0:06:55.184,0:06:59.059
dans le projet Mortar Layouts, dont le lien est dans le fichier README.

0:06:59.059,0:07:04.071
Il implémente cette interface utilisateur

0:07:04.071,0:07:06.631
et décrit comment l'utiliser et la modifier.

0:07:06.631,0:07:09.354
Je vais vous montrer comment l'écran d'affichage détaillé l'utilise.

0:07:09.354,0:07:12.482
Voici le fichier index.html.

0:07:12.482,0:07:18.902
Il y a deux balises spécifiques, x-view et x-listview.

0:07:18.902,0:07:24.487
x-listview implémente une structure listview, qui implémente un élément avec un en-tête et un pied de page,

0:07:24.487,0:07:28.499
et vous pouvez mélanger ces vues, en mettre une à l'intérieur de l'autre.

0:07:28.499,0:07:35.802
Il y a également des attributs spécifiques, comme data-view sur un bouton,

0:07:35.807,0:07:40.790
qui déclenche l'affichage d'une vue lorsque le bouton est pressé. Sa valeur est un sélecteur CSS.

0:07:40.790,0:07:43.666
Vous trouverez plus d'informations dans le dépôt de Mortar Layouts.

0:07:43.666,0:07:46.608
L'autre modèle est la vue par onglets,

0:07:46.608,0:07:50.990
qui est très similaire à la vue par liste, seul le HTML change un peu.

0:07:50.990,0:07:54.042
Il comporte une vue de liste comme le précédent,

0:07:54.042,0:07:58.101
mais elle est imbriquée dans la vue principale, qui comporte plusieurs sections,

0:07:58.194,0:08:03.590
pour simuler des onglets. Donc, si vous entrez là et consultez cet item,

0:08:03.590,0:08:04.983
puis changez de section,

0:08:04.983,0:08:10.910
vous remarquerez qu'il mémorise où j'étais et que je peux y revenir.

0:08:11.306,0:08:14.205
Tout cela est inclus dans la bibliothèque Mortar Layouts.

0:08:15.220,0:08:17.304
Voilà, si vous avez des problèmes,

0:08:17.304,0:08:19.159
n'hésitez pas àcréer des tickets sur Github.

0:08:19.558,0:08:21.001
Merci de votre attention !