Compare Revisions

Using App templates

Change Revisions

Revision 303097:

Revision 303097 by markg on

Revision 330521:

Revision 330521 by jlongster on

Title:
App templates
App templates
Slug:
Apps/App_templates
Apps/App_templates
Content:

Revision 303097
Revision 330521
n11      To help you start writing web apps quickly, we provide a ten11      To help you start writing web apps quickly, we provide a fe
>mplate project which has a lot already set up. At its core, it is>w templates which has a lot already set up. Each template is a st
> a static web project and tools to help build and deploy. Technic>atic web project with tools to help build and deploy.
>ally, the static web project borrows a lot of techniques from <a  
>href="http://html5boilerplate.com/" title="http://html5boilerplat 
>e.com/">html5boilerplate</a> and <a href="https://github.com/volo 
>js/volo" title="https://github.com/volojs/volo">volo</a> is used  
>to automate building and deployment. 
n17      <li>Many of the helpful tricks and techniques from html5boin17      <li>A minimal and well-formed HTML structure
>lerplate for creating HTML5 apps 
nn27      <li>pre-built layouts (from some of the templates)
28      </li>
n29      Eventually, we will provide a few different templates that n31      You can view all of the available templates in the <a href=
>will provide additional capabilities for various kinds of apps. A>"https://github.com/mozilla/mortar" title="https://github.com/moz
>s of now, the "App Stub" template is available. It is a minimal t>illa/mortar">mortar</a> repo. The following are available:
>emplate that only provides tools to get started, and doesn't come 
> with any built-in user interface or other visual things. 
n31    <p>n33    <ul>
32      These templates are generated by a project called "mortar" 34      <li>
>which is available on <a href="https://github.com/mozilla/mortar/ 
>" title="https://github.com/mozilla/mortar/">github</a>. You can  
>contribute or file bugs there. 
35        <a href="https://github.com/mozilla/mortar-app-stub" titl
 >e="https://github.com/mozilla/mortar-app-stub">mortar-app-stub</a
 >>: a blank template that comes only with the basic things require
 >d to get started
36      </li>
37      <li>
38        <a href="https://github.com/mozilla/mortar-list-detail">m
 >ortar-list-detail</a>: comes with a layouts library and sets up a
 > list-detail layout for you
39      </li>
40      <li>
41        <a href="https://github.com/mozilla/mortar-game-stub">mor
 >tar-game-stub</a>: a minimal web game template that handles input
 > and a render loop
42      </li>
33    </p>43    </ul>
n35      Starting with the Templaten45      Starting with the App Stub Template
n38      You can download the zip file for the App Stub template&nbsn48      You can simply use git to get the template from <a href="ht
>p;<a href="http://mozilla.github.com/mortar/builds/app-stub.zip" >tps://github.com/mozilla/mortar-app-stub" title="https://github.c
>title="http://mozilla.github.com/mortar/builds/app-stub.zip">here>om/mozilla/mortar-app-stub">this repo</a>:
></a>. Unzip it and it's ready to use! You can use these commands  
>also: 
n41wget http://mozilla.github.com/mortar/builds/app-stub.zipn51git clone git@github.com:mozilla/mortar-app-stub.git myapp
42unzip app-stub.zip
43mv app-stub &lt;project-name&gt;
n55volo create myproject http://mozilla.github.com/mortar/builds/appn63volo create myproject mozilla/mortar-app-stub
>-stub.zip 
n64      All your HTML, CSS, and javascript are under the <code>www<n72      All your HTML, CSS, and javascript are under the <code>www<
>/code> directory, so start coding! You'll see a bunch of stuff in>/code> directory, so start coding! You'll see a bunch of stuff in
> there, but feel free to remove anything you don't need. Some of > there, but feel free to remove anything you don't need.
>the extra files like icons and crossdomain.xml, as well as the in 
>itial HTML, came from <a href="http://html5boilerplate.com/" titl 
>e="http://html5boilerplate.com/">html5boilerplate</a>, so you can 
> learn more about those there. 
n67      The template uses <a href="http://requirejs.org/" title="htn75      The template uses <a href="http://requirejs.org/" title="ht
>tp://requirejs.org/">require.js</a> to manage javascript. If you >tp://requirejs.org/">require.js</a> to manage javascript. If you 
>look in <code>www/js/app.js</code> you'll see that it loads in jQ>look in <code>www/js/app.js</code> you'll see that it defines the
>uery from the Google CDN or locally if it fails. The marketplace > main module and loads a few libraries like <a href="http://zepto
>js library is also included, which enables <a href="https://devel>js.com/" title="http://zeptojs.com/">zepto</a>. The marketplace j
>oper.mozilla.org/en-US/docs/Apps/In-app_payments" title="https://>s library is also included, which enables <a href="https://develo
>developer.mozilla.org/en-US/docs/Apps/In-app_payments">in-app pay>per.mozilla.org/en-US/docs/Apps/In-app_payments" title="https://d
>ments</a> and <a href="https://github.com/mozilla/receiptverifier>eveloper.mozilla.org/en-US/docs/Apps/In-app_payments">in-app paym
>" title="https://github.com/mozilla/receiptverifier">receipt veri>ents</a> and <a href="https://github.com/mozilla/receiptverifier"
>fication</a>. You don't need this if you're a free app without in> title="https://github.com/mozilla/receiptverifier">receipt verif
>-app payments.>ication</a>. You don't need this if you're a free app without in-
 >app payments.
n73define("app", function(require) {n81define(function(require) {
n76      That defines the main module for your app, and you should sn84      That defines the main module for your app, and you should s
>tart coding within the function. You can use <code>require</code>>tart coding within the function. You can use <code>require</code>
> to load in other modules, the same way jQuery is loaded. Check o> to load in other modules, the same way zepto is loaded. Check ou
>ut the <a href="http://requirejs.org/docs/api.html" title="http:/>t the <a href="http://requirejs.org/docs/api.html" title="http://
>/requirejs.org/docs/api.html">require.js API</a> to learn more ab>requirejs.org/docs/api.html">require.js API</a> to learn more abo
>out modules.>ut modules.
nn86    <div class="note">
87      <p>
88        <strong>Note</strong>: Be default, modules are loaded fro
 >m <code>www/js/lib</code>. If you want to load something from <co
 >de>www/js</code>, which is your working directory, use the syntax
 > <code>require('./mylib')</code> instead of just <code>require('m
 >ylib')</code>
89      </p>
90    </div>
t79      You can edit CSS in <code>www/css/app.css</code>. Typicallyt92      You can edit CSS in <code>www/css/app.css</code>. Typically
> you should <code>@import</code> additional CSS files at the top > you should <code>@import</code> additional CSS files at the top 
>of this file instead of using the <code>&lt;link&gt;</code> tag t>of this file instead of using the <code>&lt;link&gt;</code> tag t
>o include them. <code>defaults.css</code> is imported by default.>o include them. This allows the volo optimizer to inline all the 
> This allows the volo optimizer to inline all the CSS when buildi>CSS when building for deploying.
>ng for deploying. 

Back to History