Permalink
Browse files

Fixed steps, replaced 'view template' with 'template', fixed syntax f…

…or example structure.
  • Loading branch information...
1 parent 57051fb commit b5ece1a9b8053eca70d0f2fc072e907c1ed5097a Joe Catera committed Oct 1, 2012
Showing with 262 additions and 394 deletions.
  1. +13 −16 docs/dev_guide/code_exs/adding_assets.rst
  2. +6 −9 docs/dev_guide/code_exs/app_config.rst
  3. +2 −1 docs/dev_guide/code_exs/assets.rst
  4. +17 −22 docs/dev_guide/code_exs/binding_events.rst
  5. +12 −15 docs/dev_guide/code_exs/calling_yql.rst
  6. +3 −1 docs/dev_guide/code_exs/config.rst
  7. +7 −12 docs/dev_guide/code_exs/cookies.rst
  8. +2 −2 docs/dev_guide/code_exs/data.rst
  9. +17 −24 docs/dev_guide/code_exs/dynamic_assets.rst
  10. +2 −1 docs/dev_guide/code_exs/events.rst
  11. +18 −24 docs/dev_guide/code_exs/framed_assets.rst
  12. +6 −13 docs/dev_guide/code_exs/generating_urls.rst
  13. +14 −22 docs/dev_guide/code_exs/global_assets.rst
  14. +10 −18 docs/dev_guide/code_exs/htmlframe_view.rst
  15. +9 −16 docs/dev_guide/code_exs/i18n_apps.rst
  16. +3 −5 docs/dev_guide/code_exs/index.rst
  17. +2 −1 docs/dev_guide/code_exs/inter-mojit.rst
  18. +21 −30 docs/dev_guide/code_exs/intermojit_communication.rst
  19. +14 −19 docs/dev_guide/code_exs/multiple_mojits.rst
  20. +2 −1 docs/dev_guide/code_exs/other.rst
  21. +12 −21 docs/dev_guide/code_exs/query_params.rst
  22. +7 −14 docs/dev_guide/code_exs/route_config.rst
  23. +10 −18 docs/dev_guide/code_exs/scroll_views.rst
  24. +9 −16 docs/dev_guide/code_exs/simple_logging.rst
  25. +14 −18 docs/dev_guide/code_exs/simple_view_template.rst
  26. +14 −25 docs/dev_guide/code_exs/view_engines.rst
  27. +3 −2 docs/dev_guide/code_exs/views.rst
  28. +2 −7 docs/dev_guide/code_exs/views_multiple_devices.rst
  29. +11 −21 docs/dev_guide/code_exs/yui_modules.rst
View
29 docs/dev_guide/code_exs/adding_assets.rst
@@ -1,5 +1,3 @@
-
-
==========
Adding CSS
==========
@@ -9,17 +7,17 @@ Adding CSS
**Difficulty:** Beginner
Summary
-#######
+=======
-This example shows how to include assets (CSS) in the view template of a mojit.
+This example shows how to include assets (CSS) in the template of a mojit.
The following topics will be covered:
- configuring an application to have assets
-- including assets in the view template
+- including assets in the template
Implementation Notes
-####################
+====================
Each application has an ``assets`` directory for placing global CSS files that can be accessed by all of your mojits. Each mojit has its own ``assets`` directory for local CSS files
that are only accessible by the mojit.
@@ -66,15 +64,15 @@ This code example only uses local CSS, so the ``simple.css`` file is placed in t
}
.toolbar li { display:inline; }
-The CSS files in the mojit ``assets`` directory can be accessed in the view template using the following path syntax:
+The CSS files in the mojit ``assets`` directory can be accessed in the template using the following path syntax:
``/static/{mojit}/assets/{css_file}.css``
This code example uses the ``simple`` mojit and the ``simple.css`` asset. To access ``simple.css``, you would use the following path:
``/static/simple/assets/simple.css``
-The ``index.hb.html`` view template below includes ``simple.css`` from the ``assets`` directory using the path above.
+The ``index.hb.html`` template below includes ``simple.css`` from the ``assets`` directory using the path above.
.. code-block:: html
@@ -84,7 +82,7 @@ The ``index.hb.html`` view template below includes ``simple.css`` from the ``ass
<script type="text/javascript">
// Changes background color of the header.
// Note: JavaScript code should not be hard
- // coded into the view template. It's done
+ // coded into the template. It's done
// here to simplify the code example.
function setColor(id, color) {
document.getElementById(id).style.backgroundColor = color;
@@ -108,10 +106,10 @@ is in ``simple_assets/assets/``, you would access ``simple.css`` with the follow
``/static/simple_assets/assets/simple.css``
-.. note:: For the purpose of simplifying this code example, the ``setColor`` function was hardcoded into the view template. In your Mojito applications, you should avoid mixing the business and presentation logic of your application by hardcoding JavaScript into your view template.
+.. note:: For the purpose of simplifying this code example, the ``setColor`` function was hardcoded into the template. In your Mojito applications, you should avoid mixing the business and presentation logic of your application by hardcoding JavaScript into your template.
Setting Up this Example
-#######################
+=======================
To create and run ``simple_assets``:
@@ -160,7 +158,7 @@ To create and run ``simple_assets``:
``$ cd mojits/simple``
-#. Modify your controller to pass an array of objects to the view template by replacing the code in ``controller.server.js`` with the following:
+#. Modify your controller to pass an array of objects to the template by replacing the code in ``controller.server.js`` with the following:
.. code-block:: javascript
@@ -201,7 +199,7 @@ To create and run ``simple_assets``:
};
}, '0.0.1', {requires: []});
-#. Include the assets in your view template by replacing the code in ``views/index.hb.html`` with the following:
+#. Include the assets in your template by replacing the code in ``views/index.hb.html`` with the following:
.. code-block:: html
@@ -211,7 +209,7 @@ To create and run ``simple_assets``:
<script type="text/javascript">
// Changes background color of the header.
// Note: JavaScript code should not be hard
- // coded into the view template. It's done
+ // coded into the template. It's done
// here to simplify the code example.
function setColor(id, color) {
document.getElementById(id).style.backgroundColor = color;
@@ -247,13 +245,12 @@ To create and run ``simple_assets``:
#. From the application directory, run the server.
``$ mojito start``
-
#. To view your application, go to the URL:
http://localhost:8666
Source Code
-###########
+===========
- `Mojit Assets <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/simple_assets/mojits/simple/assets/>`_
- `Index View Template <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/simple_assets/mojits/simple/views/index.hb.html>`_
View
15 docs/dev_guide/code_exs/app_config.rst
@@ -1,5 +1,3 @@
-
-
=================================
Basic Configuring of Applications
=================================
@@ -9,12 +7,12 @@ Basic Configuring of Applications
**Difficulty Level:** Beginning
Summary
-#######
+=======
This example shows how to configure a mojit and the routing for your application.
Implementation Notes
-####################
+====================
The ``application.json`` file is used to specify the mojits that your application can use. The example ``application.json`` below specifies that the application use the mojit ``SimpleMojit``.
@@ -46,11 +44,11 @@ The routing configuration for Mojito applications is contained in ``routes.json`
}
]
-The ``index`` method is a canned method in the controller when you create a mojit. To learn how to create view templates that get data from the controller,
+The ``index`` method is a canned method in the controller when you create a mojit. To learn how to create templates that get data from the controller,
see `Creating a Simple View with Handlebars <simple_view_template.html>`_.
Setting Up this Example
-#######################
+=======================
To set up and run ``simple_config``:
@@ -59,7 +57,6 @@ To set up and run ``simple_config``:
``$ mojito create app simple_config``
#. Change to the application directory.
-
#. Create your mojit.
``$ mojito create mojit SimpleMojit``
@@ -79,7 +76,7 @@ To set up and run ``simple_config``:
}
]
-#. To configure routing, create the file ``routes.json`` with the following:
+#. To configure routing, replace the code in ``routes.json`` with the following:
.. code-block:: javascript
@@ -103,7 +100,7 @@ To set up and run ``simple_config``:
http://localhost:8666
Source Code
-###########
+===========
- `Simple Config Application <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/simple_config/>`_
View
3 docs/dev_guide/code_exs/assets.rst
@@ -1,5 +1,6 @@
+======
Assets
-######
+======
These examples show you how to add assets such as CSS and JavaScript to your application.
View
39 docs/dev_guide/code_exs/binding_events.rst
@@ -1,5 +1,3 @@
-
-
==============
Binding Events
==============
@@ -9,7 +7,7 @@ Binding Events
**Difficulty Level:** Advanced
Summary
-#######
+=======
This example shows how to bind events to a mojit, configure code to run on the client, and make AJAX calls to the YQL Web service. The application listens for events and then makes AJAX calls to
YQL to get Flickr photo information.
@@ -22,10 +20,10 @@ The following topics will be covered:
- making AJAX calls to YQL from the binder
Implementation Notes
-####################
+====================
Configuring the Application to Run on the Client
-================================================
+------------------------------------------------
Mojito lets you configure applications to run on either the server or client side. This example uses binders that are deployed to the client, so we need to configure Mojito to deploy
the application to the client, where it will be executed by the browser.
@@ -52,7 +50,7 @@ To configure Mojito to run on the client, you simply set the ``"deploy"`` proper
]
Getting Data with YQL in the Model
-==================================
+----------------------------------
In the mojit model, the `YUI YQL Query Utility <http://developer.yahoo.com/yui/3/yql/>`_ is used to get Flickr photo information. To access the utility in your model, specify ``'yql'``
in the ``requires`` array as seen in the code snippet below:
@@ -132,12 +130,12 @@ wraps the photo information in an object and stores those objects in the ``image
For a more detailed explanation about how to use YQL in your Mojito application, see `Calling YQL from a Mojit <calling_yql.html>`_. For more information about YQL, see the `YQL Guide <http://developer.yahoo.com/yql/guide>`_.
Binding Events
-==============
+--------------
This section will discuss the basics of binding events in Mojito and then look at the binder used in this code example.
Binder Basics
--------------
+#############
A mojit may have zero, one, or many binders within the ``binders`` directory. Each binder will be deployed to the browser along with the
rest of the mojit code, where the client-side Mojito runtime will call it appropriately. On the client,
@@ -169,7 +167,7 @@ The skeleton of the ``binders/index.js`` file below illustrates the basic struct
}, '0.0.1', {requires: ['mojito']});
Examining the PageMojitBinder
------------------------------
+#############################
This code example uses the binder ``PageMojitBinder`` to perform the following:
@@ -269,7 +267,7 @@ bind the ``flipper`` and ``showOutlay`` functions to handle click and mouseover
...
After a little analysis, the full ``binders/index.js`` below should be easier to understand. The binder attaches event handlers to nodes, invokes a function in the controller, and updates the content in
-the view template. The binder also has a couple of helper functions for parsing and requires the IO and YQL modules, which are specified in the ``requires`` array.
+the template. The binder also has a couple of helper functions for parsing and requires the IO and YQL modules, which are specified in the ``requires`` array.
.. code-block:: javascript
@@ -355,7 +353,7 @@ the view template. The binder also has a couple of helper functions for parsing
}, '0.0.1', {requires: ['mojito', 'yql', 'io', 'dump', 'mojito-client']});
Using Paging
-============
+------------
The paging for this code example relies on the application configuration to set route paths and the controller to create links to access previous and next pages.
@@ -526,7 +524,7 @@ the ``createLink`` function to create URLs for the **next** and **prev** links.
}, '0.0.1', {requires: ['dump']});
Setting Up this Example
-#######################
+=======================
To set up and run ``binding_events``:
@@ -561,7 +559,7 @@ To set up and run ``binding_events``:
}
]
-#. To configure routing to call the ``index`` action from the instance of the ``HTMLFrameMojit``, create the file ``routes.json`` with the following:
+#. To configure routing to call the ``index`` action from the instance of the ``HTMLFrameMojit``, replace the code in ``routes.json`` with the following:
.. code-block:: javascript
@@ -582,8 +580,8 @@ To set up and run ``binding_events``:
]
#. Change to ``mojits/PageMojit``.
-
-#. To have the controller get data from the model and create links for paging, replace the code in ``controller.server.js`` with the following:
+#. To have the controller get data from the model and create links for paging, replace the code in ``controller.server.js``
+ with the following:
.. code-block:: javascript
@@ -696,7 +694,8 @@ To set up and run ``binding_events``:
};
}, '0.0.1', {requires: ['yql']});
-#. To create the binder for click events and invoke the ``index`` function of the controller, create the file ``binders/index.js`` with the following:
+#. To create the binder for click events and invoke the ``index`` function of the controller, replace the code in ``binders/index.js``
+ with the following:
.. code-block:: javascript
@@ -798,7 +797,7 @@ To set up and run ``binding_events``:
}
}, '0.0.1', {requires: ['yql', 'io', 'dump']});
-#. To display links to photos and associated photo data in the rendered view template, replace the code in ``views/index.hb.html`` with the following:
+#. To display links to photos and associated photo data in the rendered template, replace the code in ``views/index.hb.html`` with the following:
.. code-block:: html
@@ -824,10 +823,6 @@ To set up and run ``binding_events``:
{{/data}}
</ul>
</div>
- <!--
- <div id="display" style="position: absolute; right: 0; top: 100px; background-color: pink; text-align: center;">Model Unknown
- </div>
- -->
<div style="width: 50%; float: right">
<!-- load image here dynamically -->
<div id="display" style="margin: 0 auto;">
@@ -845,7 +840,7 @@ To set up and run ``binding_events``:
http://localhost:8666
Source Code
-###########
+===========
- `Application Configuration <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/binding_events/application.json>`_
- `Mojit Binder <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/binding_events/mojits/PagerMojit/binders/index.js>`_
View
27 docs/dev_guide/code_exs/calling_yql.rst
@@ -1,5 +1,4 @@
-
========================
Calling YQL from a Mojit
========================
@@ -9,7 +8,7 @@ Calling YQL from a Mojit
**Difficulty Level:** Intermediate
Summary
-#######
+=======
This example shows how to use YQL to get Flickr images from a Mojito application. YQL allows you to get data from many sources in the form of JSON, JSONP, and XML.
For more information about YQL, see the `YQL Guide <http://developer.yahoo.com/yql/guide/>`_. For this example, you will need to `get a Flickr API key <http://www.flickr.com/services/api/keys/apply/>`_.
@@ -22,7 +21,7 @@ The following topics will be covered:
- calling the YQL Web service with the `YQL Module of YUI <http://developer.yahoo.com/yui/3/yql/>`_
Implementation Notes
-####################
+====================
The following screenshot shows the grid of Flickr images retrieved by YQL.
@@ -31,7 +30,7 @@ The following screenshot shows the grid of Flickr images retrieved by YQL.
:width: 401px
Forming the YQL Statement and Flickr Photo URI
-==============================================
+----------------------------------------------
The mojit model needs a method to access data. This code example uses YQL to access Flickr data, so we need to form the YQL statement to get the Flickr image information. Because the response from
the YQL statement contains photo information and not the URIs to images, you also need to form the URI scheme for Flickr photos.
@@ -62,7 +61,7 @@ Using the ``farm``, ``server``, ``id``, ``secret``, and ``title`` attributes fro
Having formed the YQL statement and the Flickr photo URI to get data, we can create the model.
Creating the Model
-==================
+------------------
The mojit model for this code example does the following:
@@ -136,20 +135,20 @@ create the photo URIs and then stores those photo URIs, photo IDs, and titles in
.. note:: If you are new to the Node.js world, when you create models for your applications, take these words to heart: **DON'T WRITE BLOCKING CODE**. Models need to be asynchronous in order to allow the rest of Mojito execution to continue, so you cannot call any model functions synchronously. You must call them with a callback function to be executed when the model receives its data. Because you don't know when the model is getting its data, you have to assume that it may block.
Calling the Model from the Controller
-=====================================
+-------------------------------------
The controller in this code example performs the following functions:
- gets the query string parameters using the `Params addon <../../api/classes/Params.common.html>`_
- passes the query string parameters to the ``search`` function of the model
-- receives the ``photos`` array from the ``search`` function and sends an object to the view template
+- receives the ``photos`` array from the ``search`` function and sends an object to the template
The ``index`` function in the ``controller.server.js`` below uses the ``getFromUrl`` method of the ``Params`` addon to get the query string parameters to form the YQL statement. The YQL Statement and
the `paging and limit parameters <http://developer.yahoo.com/yql/guide/paging.html>`_ are then passed to the ``search`` function of the model.
To access model functions from the controller, you use the Action Context (``ac``) object with the following syntax: ``ac.models.{model_name}``. This code example uses the ``flickr`` mojit, so to
access the model from the controller, you would use ``ac.models.flickr`` as seen in the ``model.server.js`` below. Once the callback function passed to ``search`` returns the array of photo objects,
-the ``done`` method sends the ``photos`` array and the query string parameters to the ``index`` view template.
+the ``done`` method sends the ``photos`` array and the query string parameters to the ``index`` template.
.. code-block:: javascript
@@ -178,7 +177,7 @@ the ``done`` method sends the ``photos`` array and the query string parameters t
}, '0.0.1', {requires: []});
Setting Up this Example
-#######################
+=======================
To set up and run ``model_yql``:
@@ -187,7 +186,6 @@ To set up and run ``model_yql``:
``$ mojito create app model_yql``
#. Change to the application directory.
-
#. Create your mojit.
``$ mojito create mojit flickr``
@@ -220,7 +218,7 @@ To set up and run ``model_yql``:
}
]
-#. To configure the routing to call the ``index`` method an instance of ``HTMLFrameMojit``, create the file ``routes.json`` with the following:
+#. To configure the routing to call the ``index`` method an instance of ``HTMLFrameMojit``, replace the code in ``routes.json`` with the following:
.. code-block:: javascript
@@ -236,7 +234,6 @@ To set up and run ``model_yql``:
]
#. Change to ``mojits/flickr``.
-
#. Modify the mojit model to call YQL to get Flickr photos by replacing the code in ``models/model.server.js`` with the following:
.. code-block:: javascript
@@ -345,7 +342,7 @@ To set up and run ``model_yql``:
};
}, '0.0.1', {requires: []});
-#. Create the file ``assets/index.css`` for the application's CSS with the following:
+#. Replace the contents of ``assets/index.css`` for the application's CSS with the following:
.. code-block:: css
@@ -371,7 +368,7 @@ To set up and run ``model_yql``:
border-color:#000;
}
-#. Modify your ``index`` view template by replacing the code in ``views/index.hb.html`` with the following:
+#. Modify your ``index`` template by replacing the code in ``views/index.hb.html`` with the following:
.. code-block:: html
@@ -396,7 +393,7 @@ To set up and run ``model_yql``:
http://localhost:8666?q=mojito&size=50
Source Code
-###########
+===========
- `Mojit Model <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/model_yql/mojits/flickr/models/model.server.js>`_
- `Mojit Controller <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/model_yql/mojits/flickr/controller.server.js>`_
View
4 docs/dev_guide/code_exs/config.rst
@@ -1,5 +1,7 @@
+=============
Configuration
-#############
+=============
+
These examples show you how to configure your applications, such as defining mojit instances, routing paths, logging levels, and more.
View
19 docs/dev_guide/code_exs/cookies.rst
@@ -1,5 +1,3 @@
-
-
=============
Using Cookies
=============
@@ -9,7 +7,7 @@ Using Cookies
**Difficulty Level:** Beginning
Summary
-#######
+=======
This example shows how to read and write cookies in a Mojito application.
@@ -20,7 +18,7 @@ The following topics will be covered:
- using the `Cookie addon <../../api/classes/Cookie.server.html>`_ and the `YUI Cookie module <http://developer.yahoo.com/yui/3/cookie/>`_ to get and set cookies
Implementation Notes
-####################
+====================
To access many methods on the Mojito JavaScript library, you use `ActionContext addons <../../api/classes/ActionContext.html>`_. In this code example,
the `Cookie addon <../../api/classes/Cookie.server.html>`_ is used to call the methods ``getCookie`` and ``setCookie`` to get and set cookies.
@@ -50,7 +48,7 @@ contains the domain, the path, and the expiration date of the cookie. For those
};
}, '0.0.1', {requires: []});
-The code below from the ``index`` view template interpolates the value of the variable ``{{request_cookie_value}}`` from the controller and uses the `YUI Cookie module <http://developer.yahoo.com/yui/3/api/module_cookie.html>`_
+The code below from the ``index`` template interpolates the value of the variable ``{{request_cookie_value}}`` from the controller and uses the `YUI Cookie module <http://developer.yahoo.com/yui/3/api/module_cookie.html>`_
to set and get a cookie. To use the YUI Cookie module, first include the module with ``YUI().use`` and then call ``Y.Cookie.get`` and ``Y.Cookie.set``.
.. code-block:: html
@@ -80,7 +78,7 @@ to set and get a cookie. To use the YUI Cookie module, first include the module
</script>
Setting Up this Example
-#######################
+=======================
To set up and run ``using_cookies``:
@@ -89,11 +87,9 @@ To set up and run ``using_cookies``:
``$ mojito create app using_cookies``
#. Change to the application directory.
-
#. Create your mojit.
``$ mojito create mojit CookieMojit``
-
#. To configure your application to use the ``HTMLFrameMojit`` and its child mojit ``CookieMojit``, replace the code in ``application.json`` with the following:
.. code-block:: javascript
@@ -114,7 +110,7 @@ To set up and run ``using_cookies``:
}
]
-#. To configure routing, create the file ``routes.json`` with the following:
+#. To configure routing, replace the code in ``routes.json`` with the following:
.. code-block:: javascript
@@ -129,8 +125,7 @@ To set up and run ``using_cookies``:
}
]
-#. Change to ``mojits/CookieMojit.``
-
+#. Change to ``mojits/CookieMojit``.
#. To set a cookie from your controller, replace the code in ``controller.server.js`` with the following:
.. code-block:: javascript
@@ -193,7 +188,7 @@ To set up and run ``using_cookies``:
http://localhost:8666
Source Code
-###########
+===========
- `Mojit Controller <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/using_cookies/mojits/CookieMojit/controller.server.js>`_
- `Using Cookie Application <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/using_cookies/>`_
View
4 docs/dev_guide/code_exs/data.rst
@@ -1,6 +1,6 @@
-
+===========
Data Access
-###########
+===========
These examples show how your applications can get data using YQL, cookies, or parameters.
View
41 docs/dev_guide/code_exs/dynamic_assets.rst
@@ -1,5 +1,3 @@
-
-
===========================================
Dynamically Adding CSS to Different Devices
===========================================
@@ -9,22 +7,22 @@ Dynamically Adding CSS to Different Devices
**Difficulty:** Intermediate
Summary
-#######
+=======
-This example shows how to dynamically include assets (CSS) in the rendered view template of a mojit.
-The assets in this example are included in the rendered default view template and
-device-specific view templates.
+This example shows how to dynamically include assets (CSS) in the rendered template of a mojit.
+The assets in this example are included in the rendered default template and
+device-specific templates.
The following topics will be covered:
- configuring an application to dynamically include assets
- using the ``addAssets`` method in the controller to dynamically add assets to both the rendered
-default and device-specific view templates
+default and device-specific templates
Implementation Notes
-####################
+====================
-The screenshot below shows the rendered iPhone view template with dynamically included CSS and
+The screenshot below shows the rendered iPhone template with dynamically included CSS and
JavaScript.
.. image:: images/dynamic_assets.device_specific.preview.gif
@@ -90,7 +88,7 @@ To dynamically add CSS and meta data from the controller, you use methods from t
`Assets addon <../../api/classes/Assets.common.html>`_. In the ``controller.server.js`` below, the
``index`` function determines the calling device using the ``context`` object seen above.
To add metadata for the iPhone, the ``addBlob`` method is called from the ``Assets`` addon.
-The appropriate CSS file is dynamically attached to the view template with ``ac.assets.addCss``.
+The appropriate CSS file is dynamically attached to the template with ``ac.assets.addCss``.
.. code-block:: javascript
@@ -126,7 +124,7 @@ The appropriate CSS file is dynamically attached to the view template with ``ac.
};
}, '0.0.1', {requires: []});
-The ``index.iphone`` view template below contains CSS for controlling the orientation of the page,
+The ``index.iphone`` template below contains CSS for controlling the orientation of the page,
which is needed for displaying the page correctly on an iPhone. When the template is rendered, the
CSS is dynamically added, and the Handlebars expressions are replaced with values. If the device
making the call is an iPhone, the ``viewport`` meta data will also be added dynamically.
@@ -148,7 +146,7 @@ making the call is an iPhone, the ``viewport`` meta data will also be added dyna
};
// Changes background color of the header.
// Note: JavaScript code should not be hard coded
- // into the view template. It's done
+ // into the template. It's done
// here to simplify the code example.
function setColor(id, color) {
document.getElementById(id).style.backgroundColor = color;
@@ -174,16 +172,14 @@ making the call is an iPhone, the ``viewport`` meta data will also be added dyna
</div>
Setting Up this Example
-#######################
+=======================
To create and run ``device_assets``:
#. Create your application.
``$ mojito create app device_assets``
-
#. Change to the application directory.
-
#. Create your mojit.
``$ mojito create mojit device``
@@ -215,7 +211,7 @@ To create and run ``device_assets``:
}
]
-#. To configure routing, replace the contents of the file ``routes.json`` with the following:
+#. To configure routing, replace the code in ``routes.json`` with the following:
.. code-block:: javascript
@@ -231,8 +227,7 @@ To create and run ``device_assets``:
]
#. Change to ``mojits/device``.
-
-#. Modify your controller to dynamically add assets to the rendered view template by replacing the
+#. Modify your controller to dynamically add assets to the rendered template by replacing the
code in ``controller.server.js`` with the following:
.. code-block:: javascript
@@ -269,7 +264,7 @@ To create and run ``device_assets``:
};
}, '0.0.1', {requires: []});
-#. To create the default ``index`` view template, replace the code in ``views/index.hb.html`` with
+#. To create the default ``index`` template, replace the code in ``views/index.hb.html`` with
the following:
.. code-block:: html
@@ -278,7 +273,7 @@ To create and run ``device_assets``:
<head>
<script type="text/javascript">
// Changes background color of the header.
- // Note: JavaScript code should not be hard coded into the view template. It's done
+ // Note: JavaScript code should not be hard coded into the template. It's done
// here to simplify the code example.
function setColor(id, color) {
document.getElementById(id).style.backgroundColor = color;
@@ -317,7 +312,7 @@ To create and run ``device_assets``:
};
// Changes background color of the header.
// Note: JavaScript code should not be hard coded
- // into the view template. It's done
+ // into the template. It's done
// here to simplify the code example.
function setColor(id, color) {
document.getElementById(id).style.backgroundColor = color;
@@ -388,18 +383,16 @@ To create and run ``device_assets``:
#. From the application directory, run the server.
``$ mojito start``
-
#. To view your application, go to the URL:
http://localhost:8666
-
#. To see the page rendered for the iPhone, view the above URL from an iPhone or use the URL below
with the device parameter:
http://localhost:8666?device=iphone
Source Code
-###########
+===========
- `Assets <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/device_assets/mojits/device/assets/>`_
- `Views <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/device_assets/mojits/device/views/>`_
View
3 docs/dev_guide/code_exs/events.rst
@@ -1,5 +1,6 @@
+======
Events
-######
+======
These examples show you how to create, bind, listen to, and use events in your applications.
View
42 docs/dev_guide/code_exs/framed_assets.rst
@@ -1,5 +1,3 @@
-
-
====================================
Attaching Assets with HTMLFrameMojit
====================================
@@ -9,22 +7,22 @@ Attaching Assets with HTMLFrameMojit
**Difficulty:** Intermediate
Summary
-#######
+=======
-This example shows how to configure an application to use the HTML Frame Mojit (``HTMLFrameMojit``) with predefined assets (CSS) that are attached to the rendered view template of a mojit.
+This example shows how to configure an application to use the HTML Frame Mojit (``HTMLFrameMojit``) with predefined assets (CSS) that are attached to the rendered template of a mojit.
The following topics will be covered:
- configuring the application to use the ``HTMLFrameMojit``
-- configuring the ``HTMLFrameMojit`` to automatically include assets in the rendered view template
+- configuring the ``HTMLFrameMojit`` to automatically include assets in the rendered template
Implementation Notes
-####################
+====================
This example code's ``application.json``, shown below, configures the application to use the HTML Frame Mojit and to include CSS assets. The ``HTMLFrameMojit`` creates the
HTML skeleton and includes the CSS in the ``<head>`` tag because of the ``"top"`` property. To configure Mojito, place the CSS at the bottom, wrap the ``css`` array in the
"bottom" property. You can also include JavaScript by including the path to JavaScript files in a ``js`` array. If you do not use the ``HTMLFrameMojit``,
-you have to explicitly include assets as `static resources <../intro/mojito_static_resources.html>`_ in your view template. To learn more about the ``HTMLFrameMojit``,
+you have to explicitly include assets as `static resources <../intro/mojito_static_resources.html>`_ in your template. To learn more about the ``HTMLFrameMojit``,
see the code example `Using the HTML Frame Mojit <./htmlframe_view.html>`_.
.. code-block:: javascript
@@ -52,20 +50,20 @@ see the code example `Using the HTML Frame Mojit <./htmlframe_view.html>`_.
}
]
-The view template ``index.hb.html`` below uses the asset ``index.css``, but you do not need to include them in the file. If you use the same name for your CSS file as the name of your view
-template and place the CSS in the mojit ``assets`` directory, ``HTMLFrameMojit`` will automatically include the assets in the ``<head>`` tag for you and then inject the rendered view template
+The template ``index.hb.html`` below uses the asset ``index.css``, but you do not need to include them in the file. If you use the same name for your CSS file as the name of your view
+template and place the CSS in the mojit ``assets`` directory, ``HTMLFrameMojit`` will automatically include the assets in the ``<head>`` tag for you and then inject the rendered template
into the ``<body>`` tag.
-For example, the ``mojits/framed/assets/index.css`` file will automatically be included in the ``<head>`` tag of the rendered ``mojits/framed/views/index.hb.html`` view template.
-When the ``index.hb.index`` view template below is rendered, it will be embedded in an HTML skeleton that includes a ``<html>``, ``<head>``, and ``<body>`` tags. If the ``/assets/index.css`` file exists,
+For example, the ``mojits/framed/assets/index.css`` file will automatically be included in the ``<head>`` tag of the rendered ``mojits/framed/views/index.hb.html`` template.
+When the ``index.hb.index`` template below is rendered, it will be embedded in an HTML skeleton that includes a ``<html>``, ``<head>``, and ``<body>`` tags. If the ``/assets/index.css`` file exists,
it will automatically be injected into the ``<head>`` tag.
.. code-block:: html
<script type="text/javascript">
// Changes background color of the header.
// Note: JavaScript code should not be hard
- //coded into the view template. It's done
+ //coded into the template. It's done
// here to simplify the code example.
function setColor(id, color) {
document.getElementById(id).style.backgroundColor = color;
@@ -80,24 +78,21 @@ it will automatically be injected into the ``<head>`` tag.
</ul>
</div>
-.. note:: If you do not use the ``HTMLFrameMojit`` or use CSS with a different name than the view template, you will have to explicitly reference your CSS files in the ``assets`` directory. For example, if you have ``/mojits/{mojit_name}/assets/simple.css``, you can use the HTML ``<link>`` tag to reference the
+.. note:: If you do not use the ``HTMLFrameMojit`` or use CSS with a different name than the template, you will have to explicitly reference your CSS files in the ``assets`` directory. For example, if you have ``/mojits/{mojit_name}/assets/simple.css``, you can use the HTML ``<link>`` tag to reference the
CSS at the following location: ``/static/{mojit_name}/assets/simple.css``
Setting Up this Example
-#######################
+=======================
To create and run ``framed_assets``:
#. Create your application.
``$ mojito create app framed_assets``
-
#. Change to the application directory.
-
#. Create your mojit.
``$ mojito create mojit framed``
-
#. To configure your application to have assets, replace the code in ``application.json`` with the following:
.. code-block:: javascript
@@ -125,7 +120,7 @@ To create and run ``framed_assets``:
}
]
-#. To configure routing, create the file ``routes.json`` with the following:
+#. To configure routing, replace the code in ``routes.json`` with the following:
.. code-block:: javascript
@@ -141,8 +136,7 @@ To create and run ``framed_assets``:
]
#. Change to ``mojits/framed``.
-
-#. Modify your controller to pass an array of objects to the view template by replacing the code in ``controller.server.js`` with the following:
+#. Modify your controller to pass an array of objects to the template by replacing the code in ``controller.server.js`` with the following:
.. code-block:: javascript
@@ -167,14 +161,14 @@ To create and run ``framed_assets``:
};
}, '0.0.1', {requires: []});
-#. Include the assets in your view template by replacing the code in ``views/index.hb.html`` with the following:
+#. Include the assets in your template by replacing the code in ``views/index.hb.html`` with the following:
.. code-block:: html
<script type="text/javascript">
// Changes background color of the header.
// Note: JavaScript code should not be hard
- //coded into the view template. It's done
+ //coded into the template. It's done
// here to simplify the code example.
function setColor(id, color) {
document.getElementById(id).style.backgroundColor = color;
@@ -189,7 +183,7 @@ To create and run ``framed_assets``:
</ul>
</div>
-#. Create the file ``assets/index.css`` for the CSS of your page with the following:
+#. Replace the contents of ``assets/index.css`` for the CSS of your page with the following:
.. code-block:: css
@@ -215,7 +209,7 @@ To create and run ``framed_assets``:
http://localhost:8666
Source Code
-###########
+===========
- `Assets <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/framed_assets/mojits/framed/assets/>`_
- `Index View Template <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/framed_assets/mojits/framed/views/index.hb.html>`_
View
19 docs/dev_guide/code_exs/generating_urls.rst
@@ -1,5 +1,3 @@
-
-
===============
Generating URLs
===============
@@ -9,7 +7,7 @@ Generating URLs
**Difficulty Level:** Intermediate
Summary
-#######
+=======
This example shows you a way to generate URLs to a particular view independent of the controller or action of the mojit.
@@ -19,7 +17,7 @@ The following topics will be covered:
- creating a URL in the mojit controller with the `Url addon <../../api/classes/Url.common.html>`_
Implementation Notes
-####################
+====================
The route paths for this code example are defined in the routing configuration file ``routes.json``. You can define any path and then associate that path with a mojit instance and an action.
When the client makes an HTTP request on that path, the associated action on the mojit instance defined in ``application.json`` will be executed. Before creating the routes for the application,
@@ -87,20 +85,17 @@ based on the path defined in ``routes.json``.
}, '0.0.1', {requires: ['mojito-intl-addon']});
Setting Up this Example
-#######################
+=======================
To set up and run ``generating_urls``:
#. Create your application.
``$ mojito create app generating_urls``
-
#. Change to the application directory.
-
#. Create your mojit.
``$ mojito create mojit GenURLMojit``
-
#. To configure your application to use ``GenURLMojit``, replace the code in ``application.json`` with the following:
.. code-block:: javascript
@@ -137,7 +132,6 @@ To set up and run ``generating_urls``:
]
#. Change to ``mojits/GenURLMojit``.
-
#. Enable the controller to create a URL using the route paths defined in ``routes.json`` by replacing the code in ``controller.server.js`` with the following:
.. code-block:: javascript
@@ -158,7 +152,7 @@ To set up and run ``generating_urls``:
};
}, '0.0.1', {requires: ['mojito-intl-addon']});
-#. To display the rendered ``index`` view template when HTTP GET is called on the root path, replace the code in ``views/index.hb.html`` with the following:
+#. To display the rendered ``index`` template when HTTP GET is called on the root path, replace the code in ``views/index.hb.html`` with the following:
.. code-block:: html
@@ -173,7 +167,7 @@ To set up and run ``generating_urls``:
</div>
</div>
-#. To display the rendered ``contactus`` view template when the ``contactus`` action is executed, replace the code in ``views/contactus.hb.html`` with the following:
+#. To display the rendered ``contactus`` template when the ``contactus`` action is executed, replace the code in ``views/contactus.hb.html`` with the following:
.. code-block:: html
@@ -188,11 +182,10 @@ To set up and run ``generating_urls``:
</div>
#. Run the server and open the following URL in a browser: http://localhost:8666/
-
#. From your application, click on the `here <http://localhost:8666/some-really-long-url-that-we-dont-need-to-remember-contactus>`_ link to see the URL with the long path.
Source Code
-###########
+===========
- `Routing Configuration <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/generating_urls/routes.json>`_
- `Mojit Controller <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/generating_urls/mojits/GenURLMojit/controller.server.js>`_
View
36 docs/dev_guide/code_exs/global_assets.rst
@@ -1,5 +1,3 @@
-
-
===================
Using Global Assets
===================
@@ -9,7 +7,7 @@ Using Global Assets
**Difficulty:** Intermediate
Summary
-#######
+=======
This example shows how to configure and use global assets in Mojito applications. In this example, the ``HTMLFrameMojit`` inserts global assets into the rendered view.
See `Adding CSS <./adding_assets.html>`_ for an example that uses mojit-level assets.
@@ -21,15 +19,15 @@ The following topics will be covered:
- static URLs to global assets
Implementation Notes
-####################
+====================
What Are Assets?
-================
+----------------
Assets are resources that are required on the clients. These resources are primarily CSS but can also be JavaScript. Your assets should not be the core components of your application.
Location of Assets
-==================
+------------------
Mojito applications can have both global and local assets. Global assets are placed in the ``assets`` directory under the application directory. Assets at the mojit level are placed in the ``assets``
directory under the mojit directory.
@@ -58,26 +56,26 @@ The directory structure of this example below shows the location of the global `
└── server.js
Static URLs to Assets
-=====================
+---------------------
-Mojito provides static URLs to application-level and mojit-level assets. You can refer to these assets in your view templates, or if you are using the ``HTMLFrameMojit``, you configure your
+Mojito provides static URLs to application-level and mojit-level assets. You can refer to these assets in your templates, or if you are using the ``HTMLFrameMojit``, you configure your
application to automatically insert the assets into the rendered view.
Syntax
-------
+######
For application-level assets, the static URL has the following syntax:
``/static/{application_name}/assets/{asset_file}``
Examples
---------
+########
The path to the application-level asset ``sadwalrus.jpeg`` of the ``global_assets`` application would be the following:
``/static/global_assets/assets/sadwalrus.jpeg``
-In the view template, the application-level assets above can be referred to using the static URLs as seen here.
+In the template, the application-level assets above can be referred to using the static URLs as seen here.
.. code-block:: html
@@ -86,7 +84,7 @@ In the view template, the application-level assets above can be referred to usin
</div>
Configuring HTMLFrameMojit to Include Assets
-============================================
+--------------------------------------------
When using the ``HTMLFrameMojit``, assets are listed in the ``assets`` object in ``application.json.`` The ``assets`` object can contain a ``top`` object and/or a ``bottom`` object.
The assets listed in ``top`` will be inserted into the ``head`` element of the HTML page. The assets listed in ``bottom`` are inserted at the bottom of the ``body`` element.
@@ -125,20 +123,17 @@ In the example ``application.json`` below, which is taken from this code example
Setting Up this Example
-#######################
+=======================
To set up and run ``global_assets``:
#. Create your application.
``$ mojito create app global_assets``
-
#. Change to the application directory.
-
#. Create your mojit.
``$ mojito create mojit OhHai``
-
#. To specify that your application use ``HTMLFrameMojit`` with a child mojit, replace the code in ``application.json`` with the following:
.. code-block:: javascript
@@ -171,7 +166,7 @@ To set up and run ``global_assets``:
}
]
-#. To configure routing, create the file ``routes.json`` with the following:
+#. To configure routing, replace the code in ``routes.json`` with the following:
.. code-block:: javascript
@@ -200,7 +195,6 @@ To set up and run ``global_assets``:
- ``$ wget -O assets/favicon.ico http://static.treehugger.com/images/favicon.ico``
#. Change to ``mojits/OhHai``.
-
#. Modify the mojit controller to get data from the model by replacing the code in ``controller.server.js`` with the following:
.. code-block:: javascript
@@ -213,7 +207,7 @@ To set up and run ``global_assets``:
};
}, '0.0.1', {requires: ['mojito']});
-#. Modify your ``index`` view template to explicitly include the global asset ``sadwalrus.jpeg`` by replacing the code in ``views/index.hb.html`` with the following:
+#. Modify your ``index`` template to explicitly include the global asset ``sadwalrus.jpeg`` by replacing the code in ``views/index.hb.html`` with the following:
.. code-block:: html
@@ -224,15 +218,13 @@ To set up and run ``global_assets``:
#. From the application directory, run the server.
``$ mojito start``
-
#. To view your application with the sad walrus image, go to the URL:
http://localhost:8666
-
#. View the source code to see that the global asset ``ohhai.css`` was inserted into the ``head`` element.
Source Code
-###########
+===========
- `Application Configuration <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/global_assets/application.json>`_
- `Assets <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/global_assets/assets/>`_
View
28 docs/dev_guide/code_exs/htmlframe_view.rst
@@ -1,5 +1,3 @@
-
-
==========================
Using the HTML Frame Mojit
==========================
@@ -9,20 +7,20 @@ Using the HTML Frame Mojit
**Difficulty Level:** Intermediate
Summary
-#######
+=======
-This example shows how to use the HTML Frame Mojit ( ``HTMLFrameMojit``) to create the skeleton of an HTML page and embed rendered view template into the page. The ``HTMLFrameMojit`` creates
-the ``<html>``, ``<head>``, and ``<body>`` tags and embeds the rendered view templates of the child mojits into the ``<body>`` tag. To be clear, although the name ``HTMLFrameMojit`` contains
+This example shows how to use the HTML Frame Mojit ( ``HTMLFrameMojit``) to create the skeleton of an HTML page and embed rendered template into the page. The ``HTMLFrameMojit`` creates
+the ``<html>``, ``<head>``, and ``<body>`` tags and embeds the rendered templates of the child mojits into the ``<body>`` tag. To be clear, although the name ``HTMLFrameMojit`` contains
the string "frame", the ``HTMLFrameMojit`` does **not** create HTML ``frame`` or ``iframe`` elements. This example only uses one child mojit, but you can configure the application to use many child mojits.
For more information, see `HTMLFrameMojit <../topics/mojito_framework_mojits.html#htmlframemojit>`_.
The following topics will be covered:
- creating the framework for an HTML page
-- embedding a rendered child mojit's view templates into the HTML page
+- embedding a rendered child mojit's templates into the HTML page
Implementation Notes
-####################
+====================
The screenshot below shows the page served by your application, where the visible content is created by the child mojit of ``HTMLFrameMojit``.
@@ -93,16 +91,14 @@ The ``HTMLFrameMojit`` mojit can be used to allow dynamic run-time selection of
language defaults. These subjects are discussed in `Internationalizing Your Application <i18n_apps.html>`_.
Setting Up this Example
-#######################
+=======================
To set up and run ``htmlframe_mojit``:
#. Create your application.
``$ mojito create app htmlframe_mojit``
-
#. Change to the application directory.
-
#. Create your mojit.
``$ mojito create mojit framed``
@@ -128,8 +124,7 @@ To set up and run ``htmlframe_mojit``:
}
]
-
-#. To configure routing, create the file ``routes.json`` with the following:
+#. To configure routing, replace the code in ``routes.json`` with the following:
.. code-block:: javascript
@@ -145,7 +140,6 @@ To set up and run ``htmlframe_mojit``:
]
#. Change to ``mojits/framed``.
-
#. Modify the controller of the ``framed`` mojit by replacing the code in ``controller.server.js`` with the following:
.. code-block:: javascript
@@ -161,7 +155,7 @@ To set up and run ``htmlframe_mojit``:
};
}, '0.0.1', {requires: ['mojito']});
-#. Modify the default view template by replacing the code in ``views/index.hb.html`` with the following:
+#. Modify the default template by replacing the code in ``views/index.hb.html`` with the following:
.. code-block:: html
@@ -185,20 +179,18 @@ To set up and run ``htmlframe_mojit``:
">{{app_name}}</h2>
</div>
-The HTML fragment in the view template above will be embedded in the ``<body>`` tag by ``HTMLFrameMojit``.
+ The HTML fragment in the template above will be embedded in the ``<body>`` tag by ``HTMLFrameMojit``.
#. From the application directory, run the server.
``$ mojito start``
-
#. To view your application, go to the URL:
http://localhost:8666
Source Code
-###########
+===========
- `Application Configuration <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/htmlframe_mojit/application.json>`_
- `HTML Frame Application <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/htmlframe_mojit/>`_
-
View
25 docs/dev_guide/code_exs/i18n_apps.rst
@@ -1,5 +1,3 @@
-
-
===================================
Internationalizing Your Application
===================================
@@ -9,7 +7,7 @@ Internationalizing Your Application
**Difficulty Level:** Intermediate
Summary
-#######
+=======
This example shows how to use the i18n support built into Mojito that includes top-level defaults and the capability to override the default languages of countries.
@@ -21,10 +19,10 @@ The following topics will be covered:
- specifying the resource bundles for the YUI Internationalization utility
Implementation Notes
-####################
+====================
Resources Bundles for Languages
-===============================
+-------------------------------
Mojito uses the `YUI 3 Internationalization <http://developer.yahoo.com/yui/3/intl/#switchingLangs>`_ utility to support internationalization. To use the YUI Internationalization utility in Mojito,
you create resource bundles in JSON that specify the keys and values for the strings that need localizing. These resource bundles are JavaScript files that are placed in the ``lang`` directory of the mojit.
@@ -59,7 +57,7 @@ and the ``TITLE`` key with its value. The YUI Internationalization utility is in
}, "3.1.0", {requires: ['intl']});
Using the intl Addon
-====================
+--------------------
In the ``controller.server.js`` file below, the ``intl.lang`` and ``intl.formData`` methods rely on the YUI Internationalization utility to select the language and format of the title and date.
The YUI Internationalization utility uses the ``Intl.lookupBestLang`` method to determine the best language based on an application's request and a module's language support. You also need to
@@ -85,7 +83,7 @@ include the `Intl addon <../../api/classes/Intl.common.html>`_ by adding the str
}, '0.0.1', { requires: ['mojito-intl-addon']});
Configuring a Mojit to Run on Client
-####################################
+------------------------------------
When trying to deliver HTML pages with the language and date format preferred by the user, it's best to rely on the user's browser settings. YUI, when running on the client side,
can detect the browser settings to select the default translation and date format. During server-side execution, however, the preferred language and date format is determined by
@@ -116,20 +114,17 @@ To configure Mojito to run on the client, you simply set the ``"deploy"`` proper
]
Setting Up this Example
-#######################
+=======================
To set up and run ``locale_i18n``:
#. Create your application.
``$ mojito create app locale_i18n``
-
#. Change to the application directory.
-
#. Create your mojit.
``$ mojito create mojit i18n``
-
#. To configure you application to have the mojit code run on the client, replace the code in ``application.json`` with the following:
.. code-block:: javascript
@@ -151,7 +146,7 @@ To set up and run ``locale_i18n``:
}
]
-#. To configure routing, create the file ``routes.json`` with the following:
+#. To configure routing, replace the code in ``routes.json`` with the following:
.. code-block:: javascript
@@ -167,7 +162,6 @@ To set up and run ``locale_i18n``:
]
#. Change to ``mojits/i18n``.
-
#. Replace the code in ``controller.server.js`` with the following:
.. code-block:: javascript
@@ -234,7 +228,7 @@ To set up and run ``locale_i18n``:
);
}, "3.1.0", {requires: ['intl']});
-#. To modify the index view template to show a localized message, replace the code in ``views/index.hb.html`` with the following:
+#. To modify the index template to show a localized message, replace the code in ``views/index.hb.html`` with the following:
.. code-block:: javascript
@@ -251,13 +245,12 @@ To set up and run ``locale_i18n``:
#. Configure your browser to use French as the default language. To change the language preferences of Firefox or Chrome, see the `Firefox instructions <http://support.mozilla.com/en-US/kb/Options%20window%20-%20Content%20panel?s=change+preference+language&as=s#w_languages>`_ and `Chrome instructions <http://www.google.com/support/chrome/bin/answer.py?hl=en&answer=95416&from=95415&rd=1>`_.
#. Now go to your `application URL <http://localhost:8666>`_ and see the page display French.
-
#. To force the page to display a specific language and date format, you can also use the query string parameter ``lang.`` The URL below uses the ``lang`` parameter to display the page in Australian English:
http://localhost:8666?lang=en-AU
Source Code
-###########
+===========
- `Resource Bundles for Languages <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/locale_i18n/mojits/i18n/lang/>`_
- `Mojit Controller <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/locale_i18n/mojits/i18n/controller.server.js>`_
View
8 docs/dev_guide/code_exs/index.rst
@@ -1,5 +1,3 @@
-
-
=========================
Overview of Code Examples
=========================
@@ -8,12 +6,12 @@ The code examples intend to provide solutions for common problems. Each example
skill level are given at the beginning of each example.
Prerequisites
-#############
+=============
Complete the `Getting Started tutorial <../getting_started/>`_.
Format of Code Examples
-#######################
+=======================
In general, the code examples have the following format:
@@ -31,7 +29,7 @@ In general, the code examples have the following format:
.. note:: The steps in **Setting Up This Example** assume that you are running the examples on a local host. Thus, the links provided to the application URL will look like the following: ``http://localhost:8666/{code_example}``. To view examples running on a remote server, point your browser to the appropriate application URL.
Table of Contents
-#################
+=================
.. toctree::
:maxdepth: 2
View
3 docs/dev_guide/code_exs/inter-mojit.rst
@@ -1,5 +1,6 @@
+=========================
Inter-Mojit Communication
-#########################
+=========================
This code example shows how a mojit can communicate with the client and other mojits.
View
51 docs/dev_guide/code_exs/intermojit_communication.rst
@@ -1,5 +1,3 @@
-
-
==================================
Allowing Inter-Mojit Communication
==================================
@@ -9,7 +7,7 @@ Allowing Inter-Mojit Communication
**Difficulty Level:** Intermediate
Summary
-#######
+=======
This example shows how to configure mojits to communicate with each other through event binding.
@@ -20,12 +18,12 @@ The following topics will be covered:
- using the `Composite addon <../../api/classes/Composite.common.html>`_ to execute code in child mojits
Implementation Notes
-####################
+====================
.. _impl_notes-app_config:
Application Configuration
-=========================
+-------------------------
The ``application.json`` for this example defines the hierarchy and relationship between the mojits of this application and configures the application to run on the client.
In the ``application.json`` below, the ``HTMLFrameMojit`` is the parent of the ``MasterMojit``, which, in turn, is the parent of the ``SenderMojit`` and ``ReceiverMojit``.
@@ -70,7 +68,7 @@ The ``"deploy"`` property of the ``"frame"`` object is assigned the value ``"tru
]
Routing Configuration
-=====================
+---------------------
In the ``routes.json`` below, two route paths are defined . The route configuration for the root path specifies that the ``index`` method of the ``frame`` instance of ``HTMLFrameMojit`` be
called when HTTP GET calls are received. Recall that the ``HTMLFrameMojit`` is the parent of the other mojits. Because the ``HTMLFrameMojit`` has no ``index`` function, the ``index`` function
@@ -95,10 +93,10 @@ in the controller of the child mojit ``MasterMojit`` is called instead.
]
Master Mojit
-============
+------------
The ``MasterMojit`` performs three major functions, each handled by a different file. The controller executes the ``index`` methods of the children mojits. The binder listens for events and then
-broadcasts those events to its children. Lastly, the ``index`` view template displays the content created by the child mojits. We'll now take a look at each of the files to understand how they perform
+broadcasts those events to its children. Lastly, the ``index`` template displays the content created by the child mojits. We'll now take a look at each of the files to understand how they perform
these three functions.
The ``controller.server.js`` below is very simple because the main purpose is to execute the ``index`` functions of the child mojits. The Action Context object ``actionContext`` is vital because
@@ -145,7 +143,7 @@ passed to the ``listen`` and ``fire`` methods are the event types.
* mojit to attach DOM event handlers.
* @param node {Node} The DOM node to which
* this mojit is attached.
- */
+ **/
bind: function(node) {
this.node = node;
}
@@ -154,7 +152,7 @@ passed to the ``listen`` and ``fire`` methods are the event types.
In the ``application.json`` file discussed in :ref:`impl_notes-app_config`, four mojit instances were declared: ``frame``, ``child``, ``sender``, and ``receiver``. Because the ``child`` instance
of ``MasterMojit`` is the parent of the ``sender`` and ``receiver`` mojit instances, the controller can execute the code in the child mojit instances by calling ``actionContext.composite.done()``
-in the controller. As you can see below, the output from the ``sender`` and ``receiver`` instances can be inserted into the view template through Handlebars expressions.
+in the controller. As you can see below, the output from the ``sender`` and ``receiver`` instances can be inserted into the template through Handlebars expressions.
.. code-block:: html
@@ -171,10 +169,10 @@ in the controller. As you can see below, the output from the ``sender`` and ``re
</div>
Sender Mojit
-============
+------------
The ``SenderMojit`` listens for click events and then forwards them and an associated URL to the ``MasterMojit``. Because the controller for the ``SenderMojit`` does little but send some text,
-we will only examine the binder and index view template.
+we will only examine the binder and index template.
The binder for the ``SenderMojit`` binds and attaches event handlers to the DOM. In the ``binders/index.js`` below, the handler for click events uses the ``mojitProxy`` object to fire the event to the binder for the ``MasterMojit``. The URL of the clicked link is passed to the ``MasterMojit``.
@@ -200,7 +198,7 @@ The binder for the ``SenderMojit`` binds and attaches event handlers to the DOM.
};
}, '0.0.1', {requires: ['node','mojito-client']});
-The ``index`` view template for the ``SenderMojit`` has an unordered list of links to Flickr photos. As we saw in the binder, the handler for click events passes the event and the link URL
+The ``index`` template for the ``SenderMojit`` has an unordered list of links to Flickr photos. As we saw in the binder, the handler for click events passes the event and the link URL
to the ``MasterMojit``.
.. code-block:: html
@@ -223,7 +221,7 @@ to the ``MasterMojit``.
.. _impl_notes-receiver_mojit:
Receiver Mojit
-==============
+--------------
The ``ReceiverMojit`` is responsible for capturing events that were broadcasted by ``MasterMojit`` and then displaying the photo associated with the link that was clicked.
@@ -276,32 +274,29 @@ the ``MasterMojit``. When the event is captured, the ``mojitProxy`` object is us
* mojit to attach DOM event handlers.
* @param node {Node} The DOM node to which
* this mojit is attached.
- */
+ **/
bind: function(node) {
this.node = node;
}
};
}, '0.0.1', {requires: ['mojito-client']});
Setting Up this Example
-#######################
+=======================
To set up and run ``inter-mojit``:
#. Create your application.
``$ mojito create app inter-mojit``
-
#. Change to the application directory.
-
#. Create the mojits for the application.
``$ mojito create mojit MasterMojit``
``$ mojito create mojit SenderMojit``
``$ mojito create mojit ReceiverMojit``
-
#. To configure your application to use the mojits you created, replace the code in ``application.json`` with the following:
.. code-block:: javascript
@@ -342,7 +337,7 @@ To set up and run ``inter-mojit``:
}
]
-#. To configure routing for the root path and the path ``/receiver/show``, create the file ``routes.json`` with the following:
+#. To configure routing for the root path and the path ``/receiver/show``, replace the code in ``routes.json`` with the following:
.. code-block:: javascript
@@ -363,7 +358,6 @@ To set up and run ``inter-mojit``:
]
#. Change to ``mojits/MasterMojit``.
-
#. To allow the ``MasterMojit`` to execute its children mojits, replace the code in ``controller.server.js`` with the following:
.. code-block:: javascript
@@ -402,14 +396,14 @@ To set up and run ``inter-mojit``:
* mojit to attach DOM event handlers.
* @param node {Node} The DOM node to which
* this mojit is attached.
- */
+ **/
bind: function(node) {
this.node = node;
}
};
}, '0.0.1', {requires: ['mojito-client']});
-#. Modify the ``index`` view template to include output from the ``SenderMojit`` and ``ReceiverMojit`` by replacing the code in ``views/index.hb.html`` with the following:
+#. Modify the ``index`` template to include output from the ``SenderMojit`` and ``ReceiverMojit`` by replacing the code in ``views/index.hb.html`` with the following:
.. code-block:: html
@@ -429,7 +423,6 @@ To set up and run ``inter-mojit``:
#. Change to the ``SenderMojit`` directory.
``$ cd ../SenderMojit``
-
#. Replace the code in ``controller.server.js`` with the following:
.. code-block:: javascript
@@ -468,7 +461,7 @@ To set up and run ``inter-mojit``:
};
}, '0.0.1', {requires: ['node','mojito-client']});
-#. To provide an unordered list of image links to the ``index`` view template of the ``MasterMojit``, replace the code in ``views/index..hb.html`` with the following:
+#. To provide an unordered list of image links to the ``index`` template of the ``MasterMojit``, replace the code in ``views/index.hb.html`` with the following:
.. code-block:: html
@@ -490,7 +483,6 @@ To set up and run ``inter-mojit``:
#. Change to the ``ReceiverMojit`` directory.
``$ cd ../ReceiverMojit``
-
#. To display an image associated with a clicked link, replace the code in ``controller.server.js`` with the following:
.. code-block:: javascript
@@ -538,7 +530,7 @@ To set up and run ``inter-mojit``:
* mojit to attach DOM event handlers.
* @param node {Node} The DOM node to which
* this mojit is attached.
- */
+ **/
bind: function(node) {
this.node = node;
}
@@ -553,7 +545,7 @@ To set up and run ``inter-mojit``:
<div id="view" style="margin: auto auto;"></div>
</div>
-#. To create the view template that displays the photo of the clicked link, create the file ``views/show.hb.html`` with the following:
+#. To create the template that displays the photo of the clicked link, create the file ``views/show.hb.html`` with the following:
.. code-block:: html
@@ -567,13 +559,12 @@ To set up and run ``inter-mojit``:
#. From the application directory, start the server.
``$ mojito start``
-
#. To view your application, go to the URL:
http://localhost:8666
Source Code
-###########
+===========
- `Application Configuration <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/inter-mojit/application.json>`_
- `Master Mojit Controller <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/inter-mojit/mojits/MasterMojit/controller.server.js>`_
View
33 docs/dev_guide/code_exs/multiple_mojits.rst
@@ -1,5 +1,3 @@
-
-
=====================
Using Multiple Mojits
=====================
@@ -9,20 +7,20 @@ Using Multiple Mojits
**Difficulty Level:** Intermediate
Summary
-#######
+=======
This example shows how to use a parent mojit with multiple child mojits to create an HTML page.
The following topics will be covered:
- configuring the application to use multiple mojits
-- including the output from different mojits in one view template
-- embedding the rendered view template into the HTML frame
+- including the output from different mojits in one template
+- embedding the rendered template into the HTML frame
.. tip:: To learn how to use the Mojito built-in mojit ``HTMLFrameMojit`` to aggregate and display the output from child mojits, see `Using the HTML Frame Mojit <./htmlframe_view.html>`_.
Implementation Notes
-####################
+====================
In the screenshot below, you see an HTML page divided into header, body, and footer sections that were created by individual mojits.
@@ -92,7 +90,7 @@ gets output from the other mojits because that happens in the controller of the
]
In ``controller.server.js`` of the ``FrameMojit``, the ``Composite`` addon allows the parent mojit to execute the child mojits defined in ``application.json`` that we looked at earlier.
-After the children mojits are executed, the data that is passed to the ``done`` method in the children mojits becomes accessible in the ``index.hb.html`` view template of ``FrameMojit``,
+After the children mojits are executed, the data that is passed to the ``done`` method in the children mojits becomes accessible in the ``index.hb.html`` template of ``FrameMojit``,
which we will take a look at next.
.. code-block:: javascript
@@ -109,7 +107,7 @@ which we will take a look at next.
}
}, '0.0.1', {requires: []});
-The ``index.hb.html`` view template of ``FrameMojit``, shown below, has variables from the children mojits in different ``div`` tags. The variables ``header``, ``body``, and ``footer`` are in triple braces,
+The ``index.hb.html`` template of ``FrameMojit``, shown below, has variables from the children mojits in different ``div`` tags. The variables ``header``, ``body``, and ``footer`` are in triple braces,
which allows you to return unescaped HTML.
.. code-block:: html
@@ -128,16 +126,14 @@ which allows you to return unescaped HTML.
</div>
Setting Up this Example
-#######################
+=======================
To set up and run ``multiple_mojits``:
#. Create your application.
``$ mojito create app multiple_mojits``
-
#. Change to the application directory.
-
#. Create the mojits for the HTML frame, body, header, and footer.
``$ mojito create mojit FrameMojit``
@@ -176,7 +172,7 @@ To set up and run ``multiple_mojits``:
}
]
-#. To configure routing, create the file ``routes.json`` with the following:
+#. To configure routing, replace the code in ``routes.json`` with the following:
.. code-block:: javascript
@@ -207,7 +203,6 @@ To set up and run ``multiple_mojits``:
]
#. Change to ``mojits/FrameMojit``.
-
#. To allow the ``FrameMojit`` to execute its child mojits, replace the code in ``controller.server.js`` with the following:
.. code-block:: javascript
@@ -259,7 +254,7 @@ To set up and run ``multiple_mojits``:
};
}, '0.0.1', {requires: []});
- The ``done`` method will make its parameters available to the view template.
+ The ``done`` method will make its parameters available to the template.
#. Replace the code in ``views/index.hb.html`` with the following:
@@ -269,7 +264,7 @@ To set up and run ``multiple_mojits``:
<h3>{{title}}</h3>
</div>
- This HTML fragment will be included in the header section of the default view template of ``FrameMojit``.
+ This HTML fragment will be included in the header section of the default template of ``FrameMojit``.
#. Change to ``BodyMojit`` directory.
@@ -298,7 +293,7 @@ To set up and run ``multiple_mojits``:
<h4>{{title}}</h4>
</div>
- This HTML fragment will be included in the body section of the default view template of ``FrameMojit``.
+ This HTML fragment will be included in the body section of the default template of ``FrameMojit``.
#. Change to the ``FooterMojit`` directory.
@@ -327,18 +322,18 @@ To set up and run ``multiple_mojits``:
<h3>{{title}}</h3>
</div>
- This HTML fragment will be included in the footer section of the default view template of ``FrameMojit``.
+ This HTML fragment will be included in the footer section of the default template of ``FrameMojit``.
#. From the application directory, run the server.
``$ mojito start``
-
#. To view your application, go to the URL:
http://localhost:8666
+
Source Code
-###########
+===========
- `Application Configuration <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/multiple_mojits/application.json>`_
- `Multiple Mojit Application <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/multiple_mojits/>`_
View
3 docs/dev_guide/code_exs/other.rst
@@ -1,5 +1,6 @@
+=====
Other
-#####
+=====
These code examples deal with a variety of issues that don't fit into any one category. In the future, new categories for code examples
may be created for some of these examples.
View
33 docs/dev_guide/code_exs/query_params.rst
@@ -1,5 +1,3 @@
-
-
======================
Using Query Parameters
======================
@@ -9,7 +7,7 @@ Using Query Parameters
**Difficulty Level:** Intermediate
Summary
-#######
+=======
This example shows how to access query parameters from the URL, the POST body, and the routing configuration of your Mojito application.
@@ -19,14 +17,14 @@ The following topics will be covered:
- setting and getting parameters from your route configuration
Implementation Notes
-####################
+====================
The mojit controller of this code example has four functions, each using methods from the ``Params`` addon to access different types of parameters. Let's start by learning how
to access the query string parameters in the first function.
The ``example1`` function below gets all of the query string parameters using ``params.getFromUrl``. To get a specific parameter, just pass a key to ``params.getFromUrl(key)``.
In the code below, the key-value pairs that are fetched by ``params.getFromUrl()`` are wrapped in objects that are pushed to the array ``paramsArray``. The array is assigned to ``params``,
-which is then passed to the ``example1`` view template. By default, the function sends data to the view template with the same name.
+which is then passed to the ``example1`` template. By default, the function sends data to the template with the same name.
.. code-block:: javascript
@@ -41,7 +39,7 @@ which is then passed to the ``example1`` view template. By default, the function
// Create an object for each key-value pair and
// push those objects to an array, which is then
// assigned to 'params' that is available in
- // index view template (index.hb.html).
+ // index template (index.hb.html).
Y.Object.each(params, function(param, key) {
paramsArray.push({key: key, value: param});
});
@@ -57,7 +55,7 @@ which is then passed to the ``example1`` view template. By default, the function
...
The ``example2`` function below uses ``params.getFromBody()`` to extract parameters from the POST body. Once again, the array of objects containing the key-value pairs is passed to
-the ``example2`` view template, where the array is available through the ``params`` variable.
+the ``example2`` template, where the array is available through the ``params`` variable.
.. code-block:: javascript
@@ -172,20 +170,17 @@ return the value "routing" from the parameters set in the ``routes.json`` shown
For more information, see the `Params addon <../../api/classes/Params.common.html>`_ in the Mojito API documentation.
Setting Up this Example
-#######################
+=======================
To set up and run ``using_parameters``:
#. Create your application.
``$ mojito create app using_parameters``
-
#. Change to the application directory.
-
#. Create your mojit.
``$ mojito create mojit QueryMojit``
-
#. To specify that your application use ``QueryMojit``, replace the code in ``application.json`` with the following:
.. code-block:: javascript
@@ -201,7 +196,7 @@ To set up and run ``using_parameters``:
}
]
-#. To configure the routing for your application, create the file ``routes.json`` with the following:
+#. To configure the routing for your application, replace the code in ``routes.json`` with the following:
.. code-block:: javascript
@@ -239,7 +234,6 @@ To set up and run ``using_parameters``:
]
#. Change to ``mojits/QueryMojit``.
-
#. Modify the controller to access different query parameters by replacing the code in ``controller.server.js`` with the following:
.. code-block:: javascript
@@ -322,7 +316,7 @@ To set up and run ``using_parameters``:
};
}, '0.0.1', {requires: ['dump']});
-#. To display the key-value pairs from the query string parameters, create the view template ``views/example1.hb.html`` with the following:
+#. To display the key-value pairs from the query string parameters, create the template ``views/example1.hb.html`` with the following:
.. code-block:: html
@@ -336,7 +330,7 @@ To set up and run ``using_parameters``:
</ul>
</div>
-#. To display the key-value pairs from the POST request body parameters, create the view template ``views/example2.hb.html`` with the following:
+#. To display the key-value pairs from the POST request body parameters, create the template ``views/example2.hb.html`` with the following:
.. code-block:: html
@@ -365,7 +359,7 @@ To set up and run ``using_parameters``: