Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge branch 'docs_remove_init_controllers' into HEAD

Conflicts:
	docs/dev_guide/api_overview/mojito_addons.rst
	docs/dev_guide/code_exs/adding_assets.rst
	docs/dev_guide/code_exs/binding_events.rst
	docs/dev_guide/code_exs/route_config.rst
	docs/dev_guide/getting_started/index.rst
	docs/dev_guide/getting_started/mojito_getting_started_tutorial.rst
	docs/dev_guide/intro/mojito_configuring.rst
	docs/dev_guide/intro/mojito_mvc.rst
	docs/dev_guide/topics/index.rst
	docs/dev_guide/topics/mojito_assets.rst
	docs/dev_guide/topics/mojito_composite_mojits.rst
	docs/dev_guide/topics/mojito_data.rst
	docs/dev_guide/topics/mojito_extensions.rst
	docs/dev_guide/topics/mojito_framework_mojits.rst
	docs/dev_guide/topics/mojito_logging.rst
	docs/dev_guide/topics/mojito_resource_store.rst
	docs/dev_guide/topics/mojito_run_dyn_defined_mojits.rst
  • Loading branch information...
commit df58c4fe12b9a2afc191845064de6a2c6369869a 2 parents 97f5a62 + 3447b5a
@zhouyaoji zhouyaoji authored
Showing with 998 additions and 1,085 deletions.
  1. +0 −3  docs/dev_guide/api_overview/mojito_action_context.rst
  2. +13 −7 docs/dev_guide/api_overview/mojito_addons.rst
  3. +6 −4 docs/dev_guide/api_overview/mojito_client_obj.rst
  4. +7 −7 docs/dev_guide/api_overview/mojito_rest_lib.rst
  5. +6 −8 docs/dev_guide/code_exs/adding_assets.rst
  6. +67 −66 docs/dev_guide/code_exs/binding_events.rst
  7. +2 −6 docs/dev_guide/code_exs/calling_yql.rst
  8. +1 −6 docs/dev_guide/code_exs/cookies.rst
  9. +2 −6 docs/dev_guide/code_exs/dynamic_assets.rst
  10. +2 −1  docs/dev_guide/code_exs/events.rst
  11. +1 −3 docs/dev_guide/code_exs/framed_assets.rst
  12. +2 −6 docs/dev_guide/code_exs/generating_urls.rst
  13. +0 −3  docs/dev_guide/code_exs/htmlframe_view.rst
  14. +2 −6 docs/dev_guide/code_exs/i18n_apps.rst
  15. +2 −1  docs/dev_guide/code_exs/inter-mojit.rst
  16. +64 −72 docs/dev_guide/code_exs/intermojit_communication.rst
  17. +5 −15 docs/dev_guide/code_exs/multiple_mojits.rst
  18. +8 −6 docs/dev_guide/code_exs/overview.rst
  19. +32 −30 docs/dev_guide/code_exs/query_params.rst
  20. +42 −30 docs/dev_guide/code_exs/route_config.rst
  21. +22 −24 docs/dev_guide/code_exs/scroll_views.rst
  22. +29 −25 docs/dev_guide/code_exs/simple_logging.rst
  23. +34 −34 docs/dev_guide/code_exs/simple_view_template.rst
  24. +75 −67 docs/dev_guide/code_exs/view_engines.rst
  25. +2 −2 docs/dev_guide/code_exs/views.rst
  26. +57 −50 docs/dev_guide/code_exs/views_multiple_devices.rst
  27. +31 −30 docs/dev_guide/code_exs/yui_modules.rst
  28. +1 −0  docs/dev_guide/getting_started/index.rst
  29. +20 −30 docs/dev_guide/getting_started/mojito_getting_started_tutorial.rst
  30. +0 −1  docs/dev_guide/intro/index.rst
  31. +41 −17 docs/dev_guide/intro/mojito_configuring.rst
  32. +7 −140 docs/dev_guide/intro/mojito_mvc.rst
  33. +0 −2  docs/dev_guide/reference/mojito_troubleshooting.rst
  34. +0 −1  docs/dev_guide/topics/index.rst
  35. +1 −9 docs/dev_guide/topics/mojito_assets.rst
  36. +10 −13 docs/dev_guide/topics/mojito_composite_mojits.rst
  37. +59 −44 docs/dev_guide/topics/mojito_data.rst
  38. +3 −21 docs/dev_guide/topics/mojito_extensions.rst
  39. +8 −1 docs/dev_guide/topics/mojito_framework_mojits.rst
  40. +52 −47 docs/dev_guide/topics/mojito_npm.rst
  41. +196 −174 docs/dev_guide/topics/mojito_resource_store.rst
  42. +86 −64 docs/dev_guide/topics/mojito_run_dyn_defined_mojits.rst
  43. +0 −3  docs/dev_guide/topics/mojito_testing.rst
View
3  docs/dev_guide/api_overview/mojito_action_context.rst
@@ -29,9 +29,6 @@ One of the most common methods used from an instance of the ``ActionContext`` cl
* @constructor
*/
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
/**
* Method corresponding to the 'index' action.
*
View
20 docs/dev_guide/api_overview/mojito_addons.rst
@@ -2,6 +2,7 @@
Action Context Addons
=====================
+<<<<<<< HEAD
The Action Context uses a mechanism called addons to provide functionality that lives both
on the server and client. Each addon provides additional functions through a namespacing
object, which is appended to the ``ActionContext`` object that is available in every
@@ -9,6 +10,7 @@ controller function. See the `ActionContext Class <../../api/classes/ActionConte
for the addon classes.
The Action Context addons allow you to do the following:
+=======
- access assets, such as CSS and JavaScript files
- get configuration information
@@ -18,10 +20,11 @@ The Action Context addons allow you to do the following:
- get and set HTTP headers
- create URLs
-.. _addons-syntax:
+
+.. _mojito_addons-syntax:
Syntax
-######
+======
Using the ``ActionContext`` object ``ac``, you would call a ``{method}`` from an
``{addon}`` with the following syntax:
@@ -33,10 +36,11 @@ with the ``url`` method as seen here:
``ac.params.url()``
+
.. _addons-requiring:
Requiring Addons
-################
+================
Prior to version 0.5.0, Mojito attached addons to the ``ActionContext`` object for
every HTTP request and mojit instance. As a result, you were able to use
@@ -79,10 +83,11 @@ The list below shows what strings are used to require addons.
and Assets.
-.. _addons-exs:
+
+.. _mojito_addons-exs:
Addon Examples
-##############
+==============
The following code examples use the addons in parentheses:
@@ -93,10 +98,11 @@ The following code examples use the addons in parentheses:
- `Internationalizing Your Application <../code_exs/i18n_apps.html>`_ (``Intl``)
- `Using Multiple Mojits <../code_exs/multiple_mojits.html>`_ (``Composite``)
-.. _addons-creating:
+
+.. _mojito_addons-create:
Creating Addons
-###############
+===============
Because customized addons are not part of the standard API, but an extension of the API, the
instructions for creating addons can be found in
View
10 docs/dev_guide/api_overview/mojito_client_obj.rst
@@ -1,5 +1,3 @@
-
-
=============
Client Object
=============
@@ -9,8 +7,10 @@ created. The ``client`` object can be used to pause and resume mojits running wi
See `Class Y.mojito.Client <../../api/classes/Y.mojito.Client.html>`_ in the
`Mojito API Reference <../../api/>`_ for more details.
+.. _mojito_client_obj-pause:
+
Pausing Mojits
-##############
+==============
From the ``client`` object, you call the ``pause`` method as seen below to prevent any code from
executing outside of the individual binders (within the Mojito framework) and to call ``onPause()``
@@ -18,8 +18,10 @@ on all binders.
``Y.mojito.client.pause()``
+.. _mojito_client_obj-resume:
+
Resuming Mojits
-###############
+===============
From the ``client`` object, you call the ``resume`` method as seen below to immediately execute all
cached operations and notify all of the binders through the ``onResume`` function.
View
14 docs/dev_guide/api_overview/mojito_rest_lib.rst
@@ -1,5 +1,3 @@
-
-
============
REST Library
============
@@ -8,8 +6,10 @@ Mojito has a library to make it easier to make a REST calls to Web services from
implementation details, see `Class Y.mojito.lib.REST <../../api/classes/Y.mojito.lib.REST.html>`_
in the Mojito API documentation.
+.. _mojito_rest_lib-incl:
+
Including Library
-#################
+=================
To use the REST library, include the string 'mojito-rest-lib' in the ``requires`` array, which
instructs YUI to load the library. Once the library is loaded, you can use
@@ -25,8 +25,11 @@ instructs YUI to load the library. Once the library is loaded, you can use
// Ask YUI to load the library w/ 'mojito-rest-lib'.
}, '0.0.1', {requires: ['mojito', 'mojito-rest-lib']});
+
+.. _mojito_rest_lib-ex:
+
Example
-#######
+=======
In the model for the ``recipeSearch`` mojit below, the REST library is used to make a GET call to
the Recipe Puppy API.
@@ -35,9 +38,6 @@ the Recipe Puppy API.
YUI.add('ProductSearchModel', function(Y, NAME) {
Y.namespace('mojito.models')[NAME] = {
- init: function(config) {
- this.config = config;
- },
recipeSearch: function(count, cb) {
var url = 'http://www.recipepuppy.com/api/';
var params = {
View
14 docs/dev_guide/code_exs/adding_assets.rst
@@ -199,14 +199,12 @@ To create and run ``simple_assets``:
* @constructor
*/
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
- /**
- * Method corresponding to the 'index' action.
- * @param ac {Object} The action context that
- * provides access to the Mojito API.
- */
+
+ /**
+ * Method corresponding to the 'index' action.
+ * @param ac {Object} The action context that
+ * provides access to the Mojito API.
+ */
index: function(ac) {
var data = {
title: "Simple Assets",
View
133 docs/dev_guide/code_exs/binding_events.rst
@@ -11,9 +11,11 @@ Binding Events
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.
+
+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.
The following topics will be covered:
@@ -40,12 +42,13 @@ 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.
+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.
-To configure Mojito to run on the client, you simply set the ``"deploy"`` property to
-``true`` in ``application.json`` as seen below.
+To configure Mojito to run on the client, you simply set the ``"deploy"``
+property to ``true`` in ``application.json`` as seen below.
.. code-block:: javascript
@@ -72,8 +75,8 @@ 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:
+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:
.. code-block:: javascript
@@ -83,10 +86,10 @@ is used to get Flickr photo information. To access the utility in your model, sp
...
}, '0.0.1', {requires: ['yql']});
-This code example uses the ``flickr.photos.search`` table to get information for photos
-that have a title, description, or tags containing a string. For example, the YQL
-statement below returns Flickr photo information for those photos that have a title,
-description, or tags containing the string "Manhattan".
+This code example uses the ``flickr.photos.search`` table to get information
+for photos that have a title, description, or tags containing a string. For
+example, the YQL statement below returns Flickr photo information for those
+photos that have a title, description, or tags containing the string "Manhattan".
Copy the query below into the `YQL Console <http://developer.yahoo.com/yql/console/>`_,
replace ``{your_flickr_api_key}`` with your own Flickr API key, and then click **TEST**
@@ -100,11 +103,13 @@ the photo URI as seen here:
``http://farm + {farm} + static.flickr.com/ + {server} + / + {id} + _ + {secret} + .jpg``
+
In the ``model.server.js`` of ``PagerMojit`` shown below, the ``YQL`` function uses the YQL
statement above to get photo data, then parses the returned response to create the photo
URIs. The model then wraps the photo information in an object and stores those objects in
the ``images`` array that is sent to the controller through the ``callback`` function.
+
.. code-block:: javascript
YUI.add('PagerMojitModel', function(Y, NAME) {
@@ -428,6 +433,7 @@ the ``requires`` array.
};
}, '0.0.1', {requires: ['yql', 'io', 'dump']});
+
.. _events_notes-paging:
Using Paging
@@ -565,9 +571,7 @@ create URLs for the **next** and **prev** links.
* @constructor
*/
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(actionContext) {
var page = actionContext.params.getFromMerged('page');
var start;
@@ -684,56 +688,55 @@ To set up and run ``binding_events``:
* @class Controller
* @constructor
*/
- Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
- index: function(actionContext) {
- var page = actionContext.params.getFromMerged('page');
- var start;
- page = parseInt(page) || 1;
- if ((!page) || (page<1)) {
- page = 1;
- }
- // Page param is 1 based, but the model is 0 based
- start = (page - 1) * PAGE_SIZE;
- var model = actionContext.models.PagerMojit;
- // Data is an array of images
- model.getData('mojito', start, PAGE_SIZE, function(data) {
- Y.log('DATA: ' + Y.dump(data));
- var theData = {
- data: data, // images
- hasLink: false,
- prev: {
- title: "prev" // opportunity to localize
- },
- next: {
- link: createLink(actionContext, {page: page+1}),
- title: "next"
- },
- query: 'mojito'
- };
- if (page > 1) {
- theData.prev.link = createLink(actionContext, {page: page-1});
- theData.hasLink = true;
+ Y.namespace('mojito.controllers')[NAME] = {
+
+ index: function(actionContext) {
+ var page = actionContext.params.getFromMerged('page');
+ var start;
+ page = parseInt(page) || 1;
+ if ((!page) || (page<1)) {
+ page = 1;
}
- actionContext.done(theData);
- });
- }
- };
- // Generate the link to the next page based on:
- // - mojit id
- // - action
- // - params
- function createLink(actionContext, params) {
- var mergedParams = Y.mojito.util.copy(actionContext.params.getFromMerged());
- for (var k in params) {
- mergedParams[k] = params[k];
+ // Page param is 1 based, but the model is 0 based
+ start = (page - 1) * PAGE_SIZE;
+ var model = actionContext.models.PagerMojit;
+ // Data is an array of images
+ model.getData('mojito', start, PAGE_SIZE, function(data) {
+ Y.log('DATA: ' + Y.dump(data));
+ var theData = {
+ data: data, // images
+ hasLink: false,
+ prev: {
+ title: "prev" // opportunity to localize
+ },
+ next: {
+ link: createLink(actionContext, {page: page+1}),
+ title: "next"
+ },
+ query: 'mojito'
+ };
+ if (page > 1) {
+ theData.prev.link = createLink(actionContext, {page: page-1});
+ theData.hasLink = true;
+ }
+ actionContext.done(theData);
+ });
+ }
+ };
+ // Generate the link to the next page based on:
+ // - mojit id
+ // - action
+ // - params
+ function createLink(actionContext, params) {
+ var mergedParams = Y.mojito.util.copy(actionContext.params.getFromMerged());
+ for (var k in params) {
+ mergedParams[k] = params[k];
+ }
+ return actionContext.url.make('frame', 'index', Y.QueryString.stringify(mergedParams));
}
- return actionContext.url.make('frame', 'index', Y.QueryString.stringify(mergedParams));
- }
}, '0.0.1', {requires: ['dump', 'mojito-url-addon', 'mojito-params-addon']});
+
#. To get Flickr photo information using YQL, create the file ``models/model.server.js`` with
the code below. Be sure to replace the ``'{your_flickr_api_key}'`` with your own
Flickr API key.
@@ -752,9 +755,7 @@ To set up and run ``binding_events``:
* @constructor
*/
Y.namespace('mojito.models')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
getData: function(query, start, count, callback) {
var q = null;
// Get Flickr API key: http://www.flickr.com/services/api/keys/apply/
View
8 docs/dev_guide/code_exs/calling_yql.rst
@@ -193,9 +193,7 @@ the ``index`` template.
YUI.add('flickr', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(ac) {
var q = ac.params.getFromUrl('q') || 'muppet',
page = (ac.params.getFromUrl('page') || 0) / 1,
@@ -356,9 +354,7 @@ To set up and run ``model_yql``:
YUI.add('flickr', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(ac) {
// Use aliases to params addon
// if they exist.
View
7 docs/dev_guide/code_exs/cookies.rst
@@ -41,9 +41,6 @@ Mojito uses the `YUI 3 Cookie Module <http://developer.yahoo.com/yui/3/api/Cooki
YUI.add('CookieMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
index: function(actionContext) {
var requestCookieValue = actionContext.cookie.get('request_cookie');
// Or use this API to set a session cookie
@@ -155,9 +152,7 @@ To set up and run ``using_cookies``:
YUI.add('CookieMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(actionContext) {
var requestCookieValue = actionContext.cookie.get('request_cookie');
// Or use this API to set a session cookie
View
8 docs/dev_guide/code_exs/dynamic_assets.rst
@@ -101,9 +101,7 @@ seen above. To add metadata for the iPhone, the ``addBlob`` method is called fro
YUI.add('device', function(Y, NAME){
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(ac) {
var device = ac.context.device, css = '/static/device/assets/simple';
if (device === 'iphone') {
@@ -243,9 +241,7 @@ To create and run ``device_assets``:
YUI.add('device', function(Y, NAME){
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(ac) {
var device = ac.context.device, css = '/static/device/assets/simple';
if (device === 'iphone') {
View
3  docs/dev_guide/code_exs/events.rst
@@ -2,7 +2,8 @@
Events
======
-These examples show you how to create, bind, listen to, and use events in your applications.
+These examples show you how to create, bind, listen to, and use events in your
+applications.
.. toctree::
:maxdepth: 1
View
4 docs/dev_guide/code_exs/framed_assets.rst
@@ -165,9 +165,7 @@ To create and run ``framed_assets``:
YUI.add('framed', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(ac) {
var data = {
title: "Framed Assets",
View
8 docs/dev_guide/code_exs/generating_urls.rst
@@ -84,9 +84,7 @@ the path defined in ``routes.json``.
YUI.add('GenURLMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(actionContext) {
var url = actionContext.url.make('mymojit', 'contactus', '');
actionContext.done({contactus_url: url});
@@ -156,9 +154,7 @@ To set up and run ``generating_urls``:
YUI.add('GenURLMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(actionContext) {
var url = actionContext.url.make('mymojit', 'contactus', '');
actionContext.done({contactus_url: url});
View
3  docs/dev_guide/code_exs/htmlframe_view.rst
@@ -165,9 +165,6 @@ To set up and run ``htmlframe_mojit``:
YUI.add('framed', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
index: function(ac) {
ac.done({app_name:'Framed Mojit'});
}
View
8 docs/dev_guide/code_exs/i18n_apps.rst
@@ -89,9 +89,7 @@ language support. You also need to include the
YUI.add('i18n', function(Y, NAME) {/
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(ac) {
// Default.
ac.done(
@@ -200,9 +198,7 @@ To set up and run ``locale_i18n``:
YUI.add('i18n', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(ac) {
// Default.
ac.done(
View
3  docs/dev_guide/code_exs/inter-mojit.rst
@@ -2,7 +2,8 @@
Inter-Mojit Communication
=========================
-This code example shows how a mojit can communicate with the client and other mojits.
+This code example shows how a mojit can communicate with the client and
+other mojits.
.. toctree::
:maxdepth: 1
View
136 docs/dev_guide/code_exs/intermojit_communication.rst
@@ -11,15 +11,15 @@ Inter-Mojit Communication
Summary
=======
-This example shows how to configure mojits to communicate with each other through event
-binding.
+This example shows how to configure mojits to communicate with each other
+through event binding.
The following topics will be covered:
- structuring your mojits for intercommunication
- implementing binders for each mojit to listen to and trigger events
-- using the `Composite addon <../../api/classes/Composite.common.html>`_ to execute code
- in child mojits
+- using the `Composite addon <../../api/classes/Composite.common.html>`_
+ to execute code in child mojits
.. _code_exs_intermojit-notes:
@@ -31,12 +31,13 @@ Implementation Notes
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``. The
-``"deploy"`` property of the ``"frame"`` object is assigned the value ``"true"`` to
-configure Mojito to send code to the client for execution.
+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``.
+The ``"deploy"`` property of the ``"frame"`` object is assigned the value
+``"true"`` to configure Mojito to send code to the client for execution.
.. code-block:: javascript
@@ -81,12 +82,12 @@ configure Mojito to send code to the client for execution.
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 in the controller of the child mojit
-``MasterMojit`` is called instead.
+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 in the controller of the child mojit ``MasterMojit`` is called instead.
.. code-block:: javascript
@@ -111,41 +112,41 @@ has no ``index`` function, the ``index`` function in the controller of the chil
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`` 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 ``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`` 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 it gives the ``MasterMojit`` access to the child mojits through addons.
-The ``MasterMojit`` can execute the ``index`` functions of the child mojits by calling
-the ``done`` method from the ``Composite`` addon.
+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 it gives the ``MasterMojit`` access
+to the child mojits through addons. The ``MasterMojit`` can execute the
+``index`` functions of the child mojits by calling the ``done`` method from
+the ``Composite`` addon.
.. code-block:: javascript
YUI.add('MasterMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
"index": function(actionContext) {
actionContext.composite.done();
}
};
}, '0.0.1', {requires: ['mojito', 'mojito-composite-addon']});
-The binder for the ``MasterMojit`` listens for events from the ``SenderMojit``. Once an
-event is received, the ``MasterMojit`` then broadcasts that event to its child mojits. The
-child mojit ``ReceiverMojit`` will then intercept the broadcasted events, which we look at
-later in:ref:`impl_notes-receiver_mojit`.
+The binder for the ``MasterMojit`` listens for events from the ``SenderMojit``.
+Once an event is received, the ``MasterMojit`` then broadcasts that event to
+its child mojits. The child mojit ``ReceiverMojit`` will then intercept the
+broadcasted events, which we look at later in:ref:`impl_notes-receiver_mojit`.
-So, how do mojits listen to events from other mojits or broadcast events? On the client,
-each mojit binder can use the ``mojitProxy`` object to interact with other mojits on the
-page. In the ``binders/index.js`` of the ``MasterMojit`` below, the ``mojitProxy`` object
-is used to listen to hyperlink events and then to broadcast an event to the child mojits.
-The first arguments passed to the ``listen`` and ``fire`` methods are the event types.
+So, how do mojits listen to events from other mojits or broadcast events? On
+the client, each mojit binder can use the ``mojitProxy`` object to interact
+with other mojits on the page. In the ``binders/index.js`` of the
+``MasterMojit`` below, the ``mojitProxy`` object is used to listen to hyperlink
+events and then to broadcast an event to the child mojits. The first arguments
+passed to the ``listen`` and ``fire`` methods are the event types.
.. code-block:: javascript
@@ -175,13 +176,14 @@ The first arguments passed to the ``listen`` and ``fire`` methods are the event
};
}, '0.0.1', {requires: ['mojito-client']});
-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 template
-through Handlebars expressions.
+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 template through Handlebars
+expressions.
.. code-block:: html
@@ -204,14 +206,15 @@ through Handlebars expressions.
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 template.
+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 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``.
+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``.
.. code-block:: javascript
@@ -235,9 +238,9 @@ passed to the ``MasterMojit``.
};
}, '0.0.1', {requires: ['node','mojito-client']});
-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``.
+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
@@ -261,20 +264,18 @@ link URL to the ``MasterMojit``.
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.
+The ``ReceiverMojit`` is responsible for capturing events that were broadcasted
+by ``MasterMojit`` and then displaying the photo associated with the link that
+was clicked.
-In the controller for ``ReceiverMojit``, the additional function ``show`` displays a photo
-based on the query string parameter ``url`` or a default photo. The ``show`` function gets
-invoked from the binder, which we'll look at next.
+In the controller for ``ReceiverMojit``, the additional function ``show`` displays
+a photo based on the query string parameter ``url`` or a default photo. The ``show``
+function gets invoked from the binder, which we'll look at next.
.. code-block:: javascript
YUI.add('ReceiverMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
index: function(actionContext) {
actionContext.done({title: 'This is the receiver mojit'});
},
@@ -411,9 +412,6 @@ To set up and run ``inter-mojit``:
YUI.add('MasterMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(spec) {
- this.spec=spec;
- },
"index": function(actionContext) {
actionContext.composite.done();
}
@@ -480,9 +478,6 @@ To set up and run ``inter-mojit``:
YUI.add('SenderMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
index: function(actionContext) {
actionContext.done({title: 'List of images for testing'});
}
@@ -543,9 +538,6 @@ To set up and run ``inter-mojit``:
YUI.add('ReceiverMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(spec) {
- this.spec = spec;
- },
"index": function(actionContext) {
actionContext.done({title: 'This is the receiver mojit'});
},
View
20 docs/dev_guide/code_exs/multiple_mojits.rst
@@ -112,9 +112,7 @@ method in the children mojits becomes accessible in the ``index.hb.html`` templa
YUI.add('FrameMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(actionContext) {
actionContext.composite.done({template: {title: "Parent Frame"}});
}
@@ -229,9 +227,7 @@ To set up and run ``multiple_mojits``:
YUI.add('FrameMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(actionContext) {
actionContext.composite.done({template: {title: "Parent Frame"}});
}
@@ -266,9 +262,7 @@ To set up and run ``multiple_mojits``:
YUI.add('HeaderMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(actionContext) {
actionContext.done({title: "Header"});
}
@@ -298,9 +292,7 @@ To set up and run ``multiple_mojits``:
YUI.add('BodyMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(actionContext) {
actionContext.done({title: "Body"});
}
@@ -328,9 +320,7 @@ To set up and run ``multiple_mojits``:
YUI.add('FooterMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(actionContext) {
actionContext.done({title: "Footer"});
}
View
14 docs/dev_guide/code_exs/overview.rst
@@ -2,10 +2,10 @@
Overview of Code Examples
=========================
-The code examples intend to provide solutions for common problems. Each example requires
-creating an application, but code modifications are minimized for simplification and to
-isolate the problem that the code example is solving. To optimize your learning
-experience, the required time and
+The code examples intend to provide solutions for common problems. Each example
+requires creating an application, but code modifications are minimized for
+simplification and to isolate the problem that the code example is solving.
+To optimize your learning experience, the required time and
skill level are given at the beginning of each example.
.. _code_exs_overview-prereqs:
@@ -22,11 +22,13 @@ Format of Code Examples
In general, the code examples have the following format:
-**Time Estimate / Difficulty Level** - approximates the time required to finish the example and the difficulty level to help you choose examples.
+**Time Estimate / Difficulty Level** - approximates the time required to finish
+the example and the difficulty level to help you choose examples.
**Summary** - description of the code example and the topics covered.
-**Implementation Notes** - includes a screenshot of the running application and an explanation of code snippets that are considered essential to the example.
+**Implementation Notes** - includes a screenshot of the running application and
+an explanation of code snippets that are considered essential to the example.
**Setting Up This Example** - steps for creating and running the code example.
View
62 docs/dev_guide/code_exs/query_params.rst
@@ -11,12 +11,13 @@ Using Query Parameters
Summary
=======
-This example shows how to access query parameters from the URL, the POST body, and the
-routing configuration of your Mojito application.
+This example shows how to access query parameters from the URL, the POST body,
+and the routing configuration of your Mojito application.
The following topics will be covered:
-- using the `Params addon <../../api/classes/Params.common.html>`_ to access parameters
+- using the `Params addon <../../api/classes/Params.common.html>`_ to access
+ parameters
- setting and getting parameters from your route configuration
.. _code_exs_qp-notes:
@@ -24,17 +25,18 @@ The following topics will be covered:
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 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`` template. By default, the function sends data to the template with the same
-name.
+``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`` template. By default, the function sends data to the
+template with the same name.
.. code-block:: javascript
@@ -65,10 +67,10 @@ name.
...
}, '0.0.1', {requires: ['dump', 'mojito-params-addon']});
-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`` template, where the array is available through the ``params``
-variable.
+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`` template, where the array
+is available through the ``params`` variable.
.. code-block:: javascript
@@ -92,8 +94,9 @@ variable.
...
}, '0.0.1', {requires: ['dump', 'mojito-params-addon']});
-The ``example3`` function below uses ``params.getFromRoute()`` to access the parameters
-that are specified in ``routes.json``, which we will look at in the next code snippet.
+The ``example3`` function below uses ``params.getFromRoute()`` to access the
+parameters that are specified in ``routes.json``, which we will look at in
+the next code snippet.
.. code-block:: javascript
@@ -116,11 +119,11 @@ that are specified in ``routes.json``, which we will look at in the next code sn
...
}, '0.0.1', {requires: ['dump', 'mojito-params-addon']});
-In the ``routes.json`` file below, you see parameters are set for the ``example3`` and
-``example4`` route. Notice that ``example3`` only accepts HTTP GET calls, whereas
-``example4`` allows both HTTP GET and POST calls. Storing parameters in your routing
-configuration allows you to associate them with a function, an HTTP method, and a URL
-path.
+In the ``routes.json`` file below, you see parameters are set for the
+``example3`` and ``example4`` route. Notice that ``example3`` only accepts
+HTTP GET calls, whereas ``example4`` allows both HTTP GET and POST calls.
+Storing parameters in your routing configuration allows you to associate
+them with a function, an HTTP method, and a URL path.
.. code-block:: javascript
@@ -159,11 +162,12 @@ path.
In the ``example4`` function below, you find the parameters catch-all method
-``params.getFromMerged``. Using ``params.getFromMerged``, you can get the query string
-parameters, the POST body parameters, and the parameters set in ``routes.json`` at one
-time. You can also get a specific parameter by passing a key to
-``params.getFromMerged(key)``. For example, ``params.getFromMerged("from")`` would return
-the value "routing" from the parameters set in the ``routes.json`` shown above.
+``params.getFromMerged``. Using ``params.getFromMerged``, you can get the query
+string parameters, the POST body parameters, and the parameters set in
+``routes.json`` at one time. You can also get a specific parameter by passing
+a key to ``params.getFromMerged(key)``. For example,
+``params.getFromMerged("from")`` would return the value "routing" from the
+ parameters set in the ``routes.json`` shown above.
.. code-block:: javascript
@@ -269,9 +273,7 @@ To set up and run ``using_parameters``:
YUI.add('QueryMojit', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(actionContext) {
actionContext.done('Mojito is working.');
},
View
72 docs/dev_guide/code_exs/route_config.rst
@@ -11,18 +11,18 @@ Configuring Routing
Summary
=======
-This example shows how to configure routing for your Mojito application. In Mojito,
-routing is the mapping of URLs to mojit actions.
+This example shows how to configure routing for your Mojito application.
+In Mojito, routing is the mapping of URLs to mojit actions.
.. _code_exs_routing-notes:
Implementation Notes
====================
-Before you create routes for your application, you need to specify one or more mojit
-instances that can be mapped to URLs. In the ``application.json`` below, the
-``mapped_mojit`` instance of ``RoutingMojit`` is created, which can then be associated in
-a route defined in ``routes.json``.
+Before you create routes for your application, you need to specify one or
+more mojit instances that can be mapped to URLs. In the ``application.json``
+below, the ``mapped_mojit`` instance of ``RoutingMojit`` is created, which
+can then be associated in a route defined in ``routes.json``.
.. code-block:: javascript
@@ -37,12 +37,13 @@ a route defined in ``routes.json``.
}
]
-The example ``routes.json`` below associates the ``mapped_mojit`` instance defined in
-``application.json`` with a path and explicitly calls the ``index`` action. If the
-controller for ``RoutingMojit`` had the function ``myFunction``, you would use the
-following to call it: ``mapped_mojit.myFunction``. Based on the ``custom-route`` route
-below, when an HTTP GET call is made on the URL ``http:{domain}:8666/custom-route``, the
-``index`` action is called from the ``custom-route`` instance.
+The example ``routes.json`` below associates the ``mapped_mojit`` instance
+defined in ``application.json`` with a path and explicitly calls the
+``index`` action. If the controller for ``RoutingMojit`` had the function
+``myFunction``, you would use the following to call it: ``mapped_mojit.myFunction``.
+Based on the ``custom-route`` route below, when an HTTP GET call is made on
+the URL ``http:{domain}:8666/custom-route``, the ``index`` action is called
+from the ``custom-route`` instance.
.. code-block:: javascript
@@ -58,13 +59,14 @@ below, when an HTTP GET call is made on the URL ``http:{domain}:8666/custom-rout
]
The name of the mojit instance is arbitrary. For example, the mojit instance
-``mapped_mojit`` above could have just as well been called ``mojit-route``. Just remember
-that the name of the mojit instance in ``routes.json`` has to be defined and have a mojit
-type in ``application.json``.
+``mapped_mojit`` above could have just as well been called ``mojit-route``.
+Just remember that the name of the mojit instance in ``routes.json`` has to
+be defined and have a mojit type in ``application.json``.
-You can also configure multiple routes and use wildcards in ``routes.json``. The modified
-``routes.json`` below uses the wildcard to configure a route for handling HTTP POST
-requests and calls the method ``post_params`` from the ``post-route`` mojit instance.
+You can also configure multiple routes and use wildcards in ``routes.json``.
+The modified ``routes.json`` below uses the wildcard to configure a route
+for handling HTTP POST requests and calls the method ``post_params`` from the
+``post-route`` mojit instance.
.. code-block:: javascript
@@ -84,9 +86,9 @@ requests and calls the method ``post_params`` from the ``post-route`` mojit inst
}
]
-The ``routes.json`` above configures the routes below. Notice that the wildcard used for
-the path of ``"another-route"`` configures Mojito to execute ``post_params`` when
-receiving any HTTP POST requests.
+The ``routes.json`` above configures the routes below. Notice that the wildcard
+used for the path of ``"another-route"`` configures Mojito to execute
+``post_params`` when receiving any HTTP POST requests.
- ``http://localhost:8666/custom-route``
- ``http://localhost:8666/{any_path}``
@@ -105,8 +107,8 @@ To set up and run ``configure_routing``:
#. Create your mojit.
``$ mojito create mojit RoutingMojit``
-#. To create an instance of ``RoutingMojit``, replace the code in ``application.json``
- with the following:
+#. To create an instance of ``RoutingMojit``, replace the code in
+ ``application.json`` with the following:
.. code-block:: javascript
@@ -122,8 +124,8 @@ To set up and run ``configure_routing``:
}
]
-#. To map routes to specific actions of the mojit instance, replace the code in
- ``routes.json`` with the following:
+#. To map routes to specific actions of the mojit instance, replace the
+ code in ``routes.json`` with the following:
.. code-block:: javascript
@@ -148,16 +150,26 @@ To set up and run ``configure_routing``:
}
]
- The ``mapped_mojit`` instance is created in ``application.json`` and configured here to
- be used when HTTP GET calls are made on the paths ``/index`` or ``/show``.
+ The ``mapped_mojit`` instance is created in ``application.json`` and
+ configured here to be used when HTTP GET calls are made on the paths
+ ``/index`` or ``/show``.
#. Change to ``mojits/RoutingMojit``.
-#. Modify your controller to contain the ``index`` and ``show`` actions by replacing the
- code in ``controller.server.js`` with the following:
+#. Modify your controller to contain the ``index`` and ``show`` actions by
+ replacing the code in ``controller.server.js`` with the following:
.. code-block:: javascript
- YUI.add('RoutingMojit', function (Y, NAME) {
+ YUI.add('RoutingMojit', function(Y, NAME) {
+ Y.namespace('mojito.controllers')[NAME] = {
+
+ index: function(ac) {
+ ac.done(route_info(ac));
+ },
+ show: function(ac){
+ ac.done(route_info(ac));
+ }
+ };
// Builds object containing route information
function route_info(ac) {
var methods = "",
View
46 docs/dev_guide/code_exs/scroll_views.rst
@@ -12,8 +12,8 @@ Summary
=======
This example shows how to include the
-`YUI ScrollView Module <http://developer.yahoo.com/yui/3/scrollview/>`_ in your mojit's
-template.
+`YUI ScrollView Module <http://developer.yahoo.com/yui/3/scrollview/>`_
+in your mojit's template.
The following topics will be covered:
@@ -25,14 +25,15 @@ The following topics will be covered:
Implementation Notes
====================
-The following screenshots show you how the application appears on different devices.
+The following screenshots show you how the application appears on different
+devices.
.. image:: images/scroll_view.preview.gif
:height: 368px
:width: 401px
-In the ``application.json`` file for this code example, the customized CSS are specified
-in the ``assets`` array as seen below.
+In the ``application.json`` file for this code example, the customized
+CSS are specified in the ``assets`` array as seen below.
.. code-block:: javascript
@@ -60,17 +61,16 @@ in the ``assets`` array as seen below.
}
]
-The mojit controller provides the photo URLs for the scrollable content widget. In the
-``controller.server.js`` below, the ``photos`` array that contains the photo URLs and the
-text for the image ``alt`` attribute is passed to the ``index`` template.
+The mojit controller provides the photo URLs for the scrollable content widget.
+In the ``controller.server.js`` below, the ``photos`` array that contains the
+photo URLs and the text for the image ``alt`` attribute is passed to the
+``index`` template.
.. code-block:: javascript
YUI.add('scroll', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(ac) {
// Populate Template
ac.done({
@@ -98,12 +98,12 @@ text for the image ``alt`` attribute is passed to the ``index`` template.
};
}, '0.0.1', {requires: ['mojito']});
-In the ``index.hb.html`` below, the YUI ScrollView module is included with ``YUI.use``.
-To create the scrolling content widget, you need to create a container, a header, and
-content frame with ``div`` tags that use YUI-specific IDs and render a ScrollView object.
-For detailed instructions, see the
-`Getting Started <http://developer.yahoo.com/yui/3/scrollview/#start>`_ section on the
-YUI 3: ScrollView page.
+In the ``index.hb.html`` below, the YUI ScrollView module is included with
+``YUI.use``. To create the scrolling content widget, you need to create a
+container, a header, and content frame with ``div`` tags that use YUI-specific
+IDs and render a ScrollView object. For detailed instructions, see the
+`Getting Started <http://developer.yahoo.com/yui/3/scrollview/#start>`_ section
+on the YUI 3: ScrollView page.
.. code-block:: html
@@ -195,8 +195,8 @@ To set up and run ``scroll_views``:
]
#. To configure routing to call the ``index`` action from the instance of the
- ``HTMLFrameMojit`` when an HTTP GET call is made on the route path, replace the code
- in ``routes.json`` with the following:
+ ``HTMLFrameMojit`` when an HTTP GET call is made on the route path, replace
+ the code in ``routes.json`` with the following:
.. code-block:: javascript
@@ -212,16 +212,14 @@ To set up and run ``scroll_views``:
]
#. Change to ``mojits/scroll``.
-#. To have the controller send image data to the template for the scrolling widget,
- replace the code in ``controller.server.js`` with the following:
+#. To have the controller send image data to the template for the scrolling
+ widget, replace the code in ``controller.server.js`` with the following:
.. code-block:: javascript
YUI.add('scroll', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(ac) {
// Populate Template
ac.done({
View
54 docs/dev_guide/code_exs/simple_logging.rst
@@ -11,7 +11,8 @@ Simple Logging
Summary
=======
-This example shows how to configure the log levels for the client and the server in Mojito.
+This example shows how to configure the log levels for the client and the
+server in Mojito.
The following topics will be covered:
@@ -29,10 +30,11 @@ Implementation Notes
Log Configuration
-----------------
-Logging is configured in the ``application.json`` file with the ``log`` object. The
-``log`` object can contain a ``client`` object and/or a ``server`` object to configure
-logging for the client and server respectively. In the example ``log`` object below, you
-can see that you can configure the levels and some elements of the output for logs. See
+Logging is configured in the ``application.json`` file with the ``log``
+object. The ``log`` object can contain a ``client`` object and/or a
+``server`` object to configure logging for the client and server respectively.
+In the example ``log`` object below, you can see that you can configure the
+levels and some elements of the output for logs. See
`Log Defaults <../topics/mojito_logging.html#log-defaults>`_ for the list of configuration
properties and their default values.
@@ -56,8 +58,8 @@ properties and their default values.
Log Levels
----------
-Mojito has the following five log levels that you configure in ``application.json`` or set
-with ``Y.log``.
+Mojito has the following five log levels that you configure in
+``application.json`` or set with ``Y.log``.
- ``DEBUG``
- ``INFO``
@@ -65,23 +67,25 @@ with ``Y.log``.
- ``ERROR``
- ``MOJITO``
-Setting a log level of ``WARN`` will filter out all ``DEBUG`` and ``INFO`` messages, while
-``WARN``, ``ERROR``, and ``MOJITO`` log messages will be processed. To see all log
-messages, set the log level to ``DEBUG``. The ``MOJITO`` log level is for showing Mojito
-framework-level logging that indicate important framework events are occurring.
+Setting a log level of ``WARN`` will filter out all ``DEBUG`` and ``INFO``
+messages, while ``WARN``, ``ERROR``, and ``MOJITO`` log messages will be processed.
+To see all log messages, set the log level to ``DEBUG``. The ``MOJITO`` log level
+is for showing Mojito framework-level logging that indicate important framework
+events are occurring.
.. _logging_notes-set_levels:
Setting Log Level with Y.log
----------------------------
-The function ``Y.log`` takes two parameters. The first parameter is the log message, and
-the second parameter is used to indicate the log level. When the second parameter is
-omitted, the log message will be reported at the default or configured log level.
+The function ``Y.log`` takes two parameters. The first parameter is the log
+message, and the second parameter is used to indicate the log level. When the
+second parameter is omitted, the log message will be reported at the default
+or configured log level.
-For example, the first use of ``Y.log`` below will report the message at the log level
-that is configured in ``application.json`` or use the default. The second use of ``Y.log``
-will use the log level ``INFO``.
+For example, the first use of ``Y.log`` below will report the message at the
+log level that is configured in ``application.json`` or use the default. The
+second use of ``Y.log`` will use the log level ``INFO``.
.. code-block:: javascript
@@ -160,9 +164,7 @@ To set up and run ``simple_logging``:
YUI.add('log', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(ac) {
Y.log('[CONTROLLER]: entering into controller index (...)',"info");
var today = new Date(),
@@ -233,14 +235,16 @@ To set up and run ``simple_logging``:
#. From the application directory, run the server.
``$ mojito start``
-#. Open the URL below in a browser and look at the output from the Mojito server. You
- should see the log messages from the controller that start with the string
- "\[CONTROLLER]:". Notice that the two messages have different log levels.
+#. Open the URL below in a browser and look at the output from the Mojito
+ server. You should see the log messages from the controller that start
+ with the string "\[CONTROLLER]:". Notice that the two messages have
+ different log levels.
http://localhost:8666/
-#. Open your browser's developer console, such as Firebug, and view the console logs. You
- should see the client log messages from the binder that start with the string "\[BINDER]".
+#. Open your browser's developer console, such as Firebug, and view the console
+ logs. You should see the client log messages from the binder that start with
+ the string "\[BINDER]".
.. _code_exs_logging-src:
View
68 docs/dev_guide/code_exs/simple_view_template.rst
@@ -12,13 +12,13 @@ Summary
=======
This example shows how to create a simple view for Mojito applications with
-`Handlebars <http://handlebarsjs.com/>`_. Note that because Handlebars is a superset
-of `Mustache <http://mustache.github.com/>`_, there is an overlap of some syntax and
-nomenclature.
+`Handlebars <http://handlebarsjs.com/>`_. Note that because Handlebars is a
+superset of `Mustache <http://mustache.github.com/>`_, there is an overlap
+of some syntax and nomenclature.
-Mojito views are template files that are rendered into HTML and served to a device.
-These template files are simply called *templates* in this example and throughout the
-Mojito documentation.
+Mojito views are template files that are rendered into HTML and served to a
+device. These template files are simply called *templates* in this example
+and throughout the Mojito documentation.
The following topics will be covered:
@@ -32,17 +32,19 @@ The following topics will be covered:
Implementation Notes
====================
-In the following screenshot, you see the HTML page that was rendered from the template.
+In the following screenshot, you see the HTML page that was rendered from
+the template.
.. image:: images/simple_view_preview.jpg
:height: 288px
:width: 226px
-In Mojito applications, the controller is responsible for passing data to the template.
-From the below code snippet taken from ``controller.server.js``, you see the ``index``
-function creating a ``data`` object and passing it to the ``done`` method. The ``done``
-method called on ``ac``, the `ActionContext <../../api/classes/ActionContext.html>`_
-object, sends the ``data`` object to the template ``index.hb.html``.
+In Mojito applications, the controller is responsible for passing data to
+the template. From the below code snippet taken from ``controller.server.js``,
+you see the ``index`` function creating a ``data`` object and passing it to the
+``done`` method. The ``done`` method called on ``ac``, the
+`ActionContext <../../api/classes/ActionContext.html>`_ object, sends the
+``data`` object to the template ``index.hb.html``.
.. code-block:: javascript
@@ -63,18 +65,18 @@ object, sends the ``data`` object to the template ``index.hb.html``.
};
...
-In the ``index`` template of this code example, the properties of the ``data`` object are
-placed in Handlebars expressions that are evaluated by Mojito when the template is rendered.
-In Handlebars templates, the property names in double braces, such as ``{{type}}``, are
-expressions.
+In the ``index`` template of this code example, the properties of the ``data``
+object are placed in Handlebars expressions that are evaluated by Mojito when
+the template is rendered. In Handlebars templates, the property names in double
+braces, such as ``{{type}}``, are expressions.
The double braces with a pound are used for lists or conditional
-expression, such as ``{{#show}...{{/show}``. Handlebars also has a built-in conditional
-structure that allow you to form the same conditional expression in the following
-way: ``{{#if show}}...{{/if}}``
+expression, such as ``{{#show}...{{/show}``. Handlebars also has a built-in
+conditional structure that allow you to form the same conditional expression
+in the following way: ``{{#if show}}...{{/if}}``
-You also use double braces with a pound to access properties within an object, which is
-how the ``hours`` property of the ``time`` object is accessed here.
+You also use double braces with a pound to access properties within an object,
+which is how the ``hours`` property of the ``time`` object is accessed here.
.. code-block:: html
@@ -92,8 +94,8 @@ how the ``hours`` property of the ``time`` object is accessed here.
<div>html: {{{html}}}</div>
</div>
-See the `Handlebars expressions <http://handlebarsjs.com/expressions.html>`_ in the
-Handlebars documentation for more information.
+See the `Handlebars expressions <http://handlebarsjs.com/expressions.html>`_
+in the Handlebars documentation for more information.
.. _code_exs_view-setup:
@@ -109,8 +111,8 @@ To set up and run ``simple_view``:
#. Create your mojit.
``$ mojito create mojit simple``
-#. To specify that your application use the ``simple`` mojit, replace the code in
- ``application.json`` with the following:
+#. To specify that your application use the ``simple`` mojit, replace the
+ code in ``application.json`` with the following:
.. code-block:: javascript
@@ -125,8 +127,8 @@ To set up and run ``simple_view``:
}
]
-#. To configure the routing for your application, replace the code in ``routes.json`` with
- the following:
+#. To configure the routing for your application, replace the code in
+ ``routes.json`` with the following:
.. code-block:: javascript
@@ -142,16 +144,14 @@ To set up and run ``simple_view``:
]
#. Change to ``mojits/simple``.
-#. Modify the mojit controller to pass data to the view by replacing the code in
- ``controller.server.js`` with the following:
+#. Modify the mojit controller to pass data to the view by replacing the
+ code in ``controller.server.js`` with the following:
.. code-block:: javascript
YUI.add('simple', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
index: function(ac) {
var today = new Date(),
data = {
@@ -168,8 +168,8 @@ To set up and run ``simple_view``:
};
}, '0.0.1', {requires: []});
-#. Modify your ``index`` 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
View
142 docs/dev_guide/code_exs/view_engines.rst
@@ -11,10 +11,11 @@ Creating and Using a View Engine Addon
Summary
=======
-This example shows how to install a third-party rendering engine (Embedded Javascript),
-create a view engine addon that uses the installed rendering engine, and create a template
-for the view engine. Mojito uses the
-`Handlebars <https://github.com/wycats/handlebars.js/>`_ rendering engine by default.
+This example shows how to install a third-party rendering engine
+(Embedded Javascript), create a view engine addon that uses the
+installed rendering engine, and create a template for the view engine.
+Mojito uses the `Handlebars <https://github.com/wycats/handlebars.js/>`_
+rendering engine by default.
The following topics will be covered:
@@ -27,11 +28,11 @@ The following topics will be covered:
Implementation Notes
====================
-Before you create your application, you should take a look at the following sections to
-better understand how the application works. The focus here is to give you a practical
-example that you can use to add your own view engines and also to show some of important
-points of using view engines in Mojito applications. For more comprehensive but less
-hands-on documentation, see
+Before you create your application, you should take a look at the following
+sections to better understand how the application works. The focus here is
+to give you a practical example that you can use to add your own view engines
+and also to show some of important points of using view engines in Mojito
+applications. For more comprehensive but less hands-on documentation, see
`Developer Topics: View Engines <../topics/mojito_extensions.html#view-engines>`_.
.. _ve_addon_notes-what:
@@ -39,29 +40,31 @@ hands-on documentation, see
What Is a View Engine?
----------------------
-A view engine is code that applies data returned by the controller to a view. This is most
-often done by interpreting the view as a template. View engines in Mojito can function at
-either the application or mojit level. This example uses an application-level view engine
-addon, allowing multiple mojits to use it although the example only uses one mojit.
+A view engine is code that applies data returned by the controller to a view.
+This is most often done by interpreting the view as a template. View engines
+in Mojito can function at either the application or mojit level. This example
+uses an application-level view engine addon, allowing multiple mojits to use it
+although the example only uses one mojit.
.. _ve_addon_notes-install:
Installing a Rendering Engine
-----------------------------
-You could write your own rendering engine or copy code into your Mojito application, but
-this example follows the most common use case of installing a rendering engine with
-``npm``. We will be installing the rendering engine `EJS <http://embeddedjs.com/>`_ with
-``npm``.
+You could write your own rendering engine or copy code into your Mojito
+application, but this example follows the most common use case of installing
+a rendering engine with ``npm``. We will be installing the rendering engine
+ `EJS <http://embeddedjs.com/>`_ with ``npm``.
-Because your Mojito application is simply a ``npm`` module, you can have a ``node_modules``
-directory for locally installing other modules. Thus, from your application directory, you
-would use the following ``npm`` command to install ``ejs``:
+Because your Mojito application is simply a ``npm`` module, you can have a
+``node_modules`` directory for locally installing other modules. Thus, from
+your application directory, you would use the following ``npm`` command to
+install ``ejs``:
``{app_dir}/ $ npm install ejs``
-After you have installed ``ejs``, a ``node_modules`` directory will be created with the
-contents similar to the following:
+After you have installed ``ejs``, a ``node_modules`` directory will be created
+with the contents similar to the following:
::
@@ -96,8 +99,9 @@ Creating the View Engine Addon
------------------------------
The view engine addon like other addons is simply a YUI module that lives in the
-``addons/view-engines`` directory. For the application-level view engine addons that this
-example is using, the view engine addon will be in ``{app_dir}/addons/view-engines``.
+``addons/view-engines`` directory. For the application-level view engine addons
+that this example is using, the view engine addon will be in
+``{app_dir}/addons/view-engines``.
.. _ve_addon_create-req:
@@ -106,8 +110,9 @@ Requirements
The view engine addon must have the following:
-- a ``YUI.add`` statement to register the addon. For example, we register the view engine
- addon with the name ``addons-viewengine-ejs`` in our code example as seen below.
+- a ``YUI.add`` statement to register the addon. For example, we register the
+ view engine addon with the name ``addons-viewengine-ejs`` in our code example
+ as seen below.
.. code-block:: javascript
@@ -117,9 +122,9 @@ The view engine addon must have the following:
}, '0.1.0', {requires: []});
-- a prototype of the object has the following two methods ``render`` and ``compiler`` as
- shown below. We will look at the ``render`` and ``compile`` methods more closely in the
- next section.
+- a prototype of the object has the following two methods ``render`` and
+ ``compiler`` as shown below. We will look at the ``render`` and ``compile``
+ methods more closely in the next section.
.. code-block:: javascript
@@ -135,8 +140,8 @@ The view engine addon must have the following:
}
...
-- an object that is assigned to ``Y.mojito.addons.viewEngines.{view_engine_name}``. In our
- example, the constructor ``EjsAdapter`` is assigned to the namespace
+- an object that is assigned to ``Y.mojito.addons.viewEngines.{view_engine_name}``.
+ In our example, the constructor ``EjsAdapter`` is assigned to the namespace
``Y.namespace('mojito.addons.viewEngines').ejs`` or ``Y.mojito.addons.viewEngines.ejs``.
.. code-block:: javascript
@@ -154,12 +159,13 @@ The view engine addon must have the following:
render and compile
##################
-The ``render`` method renders the template and sends the output to the methods
-``adapter.flush`` or ``adapter.done`` that execute and return the page to the client.
+The ``render`` method renders the template and sends the output to the
+methods ``adapter.flush`` or ``adapter.done`` that execute and return the
+page to the client.
-The implementation of how the ``render`` method is up to the developer. You could write
-code or use a library to render the template, but in this example we use the instance
-``ejs`` to compile the view.
+The implementation of how the ``render`` method is up to the developer.
+You could write code or use a library to render the template, but in this
+example we use the instance ``ejs`` to compile the view.
.. code-block:: javascript
@@ -196,9 +202,9 @@ code or use a library to render the template, but in this example we use the ins
},
...
-The ``compile`` method is required to run the command ``mojito compile views``. In our
-example, the ``compile`` method also reads the template file and returns a string to
-``render`` so that it can be rendered by ``ejs``.
+The ``compile`` method is required to run the command ``mojito compile views``.
+In our example, the ``compile`` method also reads the template file and returns
+a string to ``render`` so that it can be rendered by ``ejs``.
.. code-block:: javascript
@@ -209,27 +215,29 @@ example, the ``compile`` method also reads the template file and returns a strin
}
-In the above code snippet, the ``compile`` method simply returns the template file to the
-``render`` method, where the instance of the EJS rendering engine calls ``render`` to
-render the template file into a string. The implementation of the ``compile`` method in
-the addon could have been written to call ``ejs.render``.
+In the above code snippet, the ``compile`` method simply returns the template
+file to the ``render`` method, where the instance of the EJS rendering engine
+calls ``render`` to render the template file into a string. The implementation
+of the ``compile`` method in the addon could have been written to call
+``ejs.render``.
.. _ve_addon_notes-ejs_templates:
EJS Templates
-------------
-EJS is similar to ``ERB`` that is used by `Ruby on Rails <http://rubyonrails.org/>`_. The
-embedded JavaScript is wrapped in ``<%`` and ``%>``. If you want to evaluate code so that
-the returned value is inserted into the HTML string, you use ``<%=`` as seen
-below, where the variable ``title`` is substituted with a value.
+EJS is similar to ``ERB`` that is used by
+`Ruby on Rails <http://rubyonrails.org/>`_. The embedded JavaScript is
+wrapped in ``<%`` and ``%>``. If you want to evaluate code so that
+the returned value is inserted into the HTML string, you use ``<%=`` as
+seen below, where the variable ``title`` is substituted with a value.
.. code-block:: html
<h2> <%= title %></h2>
-You can do most of the same things with EJS as you can with JavaScript. For example,
-you can iterate through an array in the same way as shown here:
+You can do most of the same things with EJS as you can with JavaScript.
+For example, you can iterate through an array in the same way as shown here:
.. code-block:: html
@@ -239,9 +247,9 @@ you can iterate through an array in the same way as shown here:
<% } %>
</ul>
-EJS also has view helpers for creating links and forms, much like ``ERB``. See
-`Getting Started with EJS <http://embeddedjs.com/getting_started.html>`_ for more
-information.
+EJS also has view helpers for creating links and forms, much like ``ERB``.
+See `Getting Started with EJS <http://embeddedjs.com/getting_started.html>`_
+for more information.
.. _code_exs_view_engine_addon-setup:
@@ -258,8 +266,8 @@ To set up and run ``adding_view_engines``:
``$ mojito create mojit myMojit``
-#. To specify that your application use ``myMojit``, replace the code in ``application.json`` with
- the following:
+#. To specify that your application use ``myMojit``, replace the code in
+ ``application.json`` with the following:
.. code-block:: javascript
@@ -275,8 +283,8 @@ To set up and run ``adding_view_engines``:
]
-#. To configure routing so controller functions using different templates are used, replace the code
- in ``routes.json`` with the following:
+#. To configure routing so controller functions using different templates are
+ used, replace the code in ``routes.json`` with the following:
.. code-block:: javascript
@@ -350,9 +358,6 @@ To set up and run ``adding_view_engines``:
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
default_ve: function(ac) {
ac.done({
"title": "Handlebars at work!",
@@ -375,8 +380,8 @@ To set up and run ``adding_view_engines``:
};
}, '0.0.1', {requires: ['mojito', 'myMojitModelFoo']});
-#. Create the template ``views/default_ve.hb.html`` that uses Handlebar expressions with
- the following:
+#. Create the template ``views/default_ve.hb.html`` that uses Handlebar
+ expressions with the following:
.. code-block:: html
@@ -397,7 +402,8 @@ To set up and run ``adding_view_engines``:
</ul>
</div>
-#. Create the template ``views/added_ve.ejs.html`` that uses EJS with the following:
+#. Create the template ``views/added_ve.ejs.html`` that uses EJS with the
+ following:
.. code-block:: html
@@ -414,15 +420,17 @@ To set up and run ``adding_view_engines``:
#. From your application directory, start Mojito.
``$ mojito start``
-#. Open the following URL in your browser to see the template rendered by the Handlebars
- rendering engine.
+#. Open the following URL in your browser to see the template rendered by the
+ Handlebars rendering engine.
`http://localhost:8666/ <http://localhost:8666/>`_
-#. Now see the template rendered by the EJS rendering engine at the following URL:
+#. Now see the template rendered by the EJS rendering engine at the following
+ URL:
`http://localhost:8666/ejs <http://localhost:8666/ejs>`_
-#. Great, your application is using two different rendering engines. You should now be
- ready to add your own view engine that uses a rendering engine such as Jade.
+#. Great, your application is using two different rendering engines. You should
+ now be ready to add your own view engine that uses a rendering engine such as
+ Jade.
.. _code_exs_view_engine_addon-src:
View
4 docs/dev_guide/code_exs/views.rst
@@ -2,8 +2,8 @@
Views
=====
-These examples show you how to create templates, use Handlebars expressions, and pass data from the
-mojit controller to the templates.
+These examples show you how to create templates, use Handlebars expressions,
+and pass data from the mojit controller to the templates.
.. toctree::
:maxdepth: 1
View
107 docs/dev_guide/code_exs/views_multiple_devices.rst
@@ -11,9 +11,9 @@ Creating Views for Different Devices
Summary
=======
-This example shows how to create specialized views for different wireless devices, such as
-iPhones, BlackBerries, and Android phones. Each device uses different templates but the
-same data from the controller.
+This example shows how to create specialized views for different wireless
+devices, such as iPhones, BlackBerries, and Android phones. Each device
+uses different templates but the same data from the controller.
The following topics will be covered:
@@ -27,7 +27,8 @@ The following topics will be covered:
Implementation Notes
====================
-The following screenshots show you how the application appears on different devices.
+The following screenshots show you how the application appears on different
+devices.
.. image:: images/preview.iphone.gif
:height: 368px
@@ -51,13 +52,14 @@ Configuring Application to Use Device-Specific Templates
Context Configurations
######################
-Mojito allows you to map contexts to a set of configurations based on runtime factors.
-The context is defined by the ``setting`` property in the JSON configuration files.
-The default value for ``setting`` is ``master``. Mojito will first look to see if a base
-context wasset on the command line with the ``--context`` option, then at the HTTP headers
-and query string. In this example, we want contexts defined for different devices,
-so, in the ``application.json`` file, we'll define contexts
-for Android, Blackberry, and iPhone with the following:
+Mojito allows you to map contexts to a set of configurations based on runtime
+factors. The context is defined by the ``setting`` property in the JSON
+configuration files. The default value for ``setting`` is ``master``.
+Mojito will first look to see if a base context wasset on the command line
+with the ``--context`` option, then at the HTTP headers and query string.
+In this example, we want contexts defined for different devices, so, in
+the ``application.json`` file, we'll define contexts for Android, Blackberry,
+and iPhone with the following:
.. code-block:: javascript
@@ -80,18 +82,20 @@ for Android, Blackberry, and iPhone with the following:
}
]
-You can also have contexts for environment, language, and region configurations, or create
-custom contexts. See `Using Context Configurations <../topics/mojito_using_contexts.html>`_.
+You can also have contexts for environment, language, and region configurations,
+or create custom contexts.
+See `Using Context Configurations <../topics/mojito_using_contexts.html>`_.
.. _device_context-select:
selector Property
#################
-How does Mojito know which template file to use for a device? Mojito identifies files
-resources using the ``selector`` property in configuration files. In the
-``application.json`` file, we can use the contexts for our devices with the ``selector``
-property so Mojito knows what file resources to use for contexts associated with devices.
+How does Mojito know which template file to use for a device? Mojito identifies
+files resources using the ``selector`` property in configuration files. In the
+``application.json`` file, we can use the contexts for our devices with the
+``selector`` property so Mojito knows what file resources to use for contexts
+associated with devices.
.. code-block:: javascript
@@ -108,8 +112,9 @@ property so Mojito knows what file resources to use for contexts associated with
"selector": "iphone"
}
-For example, when given the context ``device:iphone``, Mojito will look for file resources
-that have the identifier ``iphone``. For more information about the ``selector`` property,
+For example, when given the context ``device:iphone``, Mojito will look for
+file resources that have the identifier ``iphone``. For more information about
+the ``selector`` property,
see `Resource Store: selector Property <../topics/mojito_resource_store.html#selector-property>`_.
.. _device_context-determine:
@@ -117,19 +122,20 @@ see `Resource Store: selector Property <../topics/mojito_resource_store.html#sel
Determining Context
###################
-Mojito uses two ways to determine which device is making an HTTP request for a page. The
-first way is to use the value assigned to the query string parameter ``device``. For
-example, if Mojito received an HTTP GET request on the URL below, it would render the
-iPhone view into HTML and serve the page to the device.
+Mojito uses two ways to determine which device is making an HTTP request for a
+page. The first way is to use the value assigned to the query string parameter
+``device``. For example, if Mojito received an HTTP GET request on the URL
+below, it would render the iPhone view into HTML and serve the page to the
+device.
::
http://localhost:8666?device=iphone
-Mojito also uses the HTTP User-Agent header field to decide which view to render and serve.
-In this example HTTP header, the User-Agent field indicates that the HTTP request is
-coming from an Android device, so Mojito would use the Android template and serve the
-rendered HTML to the device.
+Mojito also uses the HTTP User-Agent header field to decide which view to
+render and serve. In this example HTTP header, the User-Agent field indicates
+that the HTTP request is coming from an Android device, so Mojito would use
+the Android template and serve the rendered HTML to the device.
::
@@ -147,17 +153,17 @@ Creating Templates for Devices
------------------------------
For each device's customized view, you need to create a template.
-This code example uses the templates to create customized views for iPhones, Android
-phones, and BlackBerries.
+This code example uses the templates to create customized views for
+iPhones, Android phones, and BlackBerries.
.. _device_views_templates-naming:
Naming Convention for Templates
###############################
-The naming convention for template files has the following syntax, where ``{selector}``
-is the string identifier (defined by the ``selector`` property) of a device, such as
-"iphone":
+The naming convention for template files has the following syntax, where
+``{selector}``is the string identifier (defined by the ``selector`` property)
+of a device, such as "iphone":
``{action}.{selector}.{rendering_engine}.html``
@@ -166,16 +172,17 @@ is the string identifier (defined by the ``selector`` property) of a device, suc
Templates for This Example
##########################
-This code example uses the following template files, where ``hb`` represents
-the Handlebars rendering engine:
+This code example uses the following template files, where ``hb``
+represents the Handlebars rendering engine:
- ``index.iphone.hb.html``
- ``index.android.hb.html``
- ``index.blackberry.hb.html``
-Thus, if an iPhone was making an HTTP GET request on the ``index`` (action) file and the
-template was being rendered by the Handlebars rendering engine, Mojito would use
-``index.iphone.hb.html`` and serve the rendered view to the iPhone.
+Thus, if an iPhone was making an HTTP GET request on the ``index`` (action)
+file and the template was being rendered by the Handlebars rendering engine,
+Mojito would use ``index.iphone.hb.html`` and serve the rendered view to the
+iPhone.
.. _code_exs_device_views-setup:
@@ -192,8 +199,8 @@ To set up and run ``device_views``:
``$ mojito create mojit device``
-#. To configure you application, replace the code in ``application.json`` with the
- following:
+#. To configure you application, replace the code in ``application.json``
+ with the following:
.. code-block:: javascript
@@ -221,7 +228,8 @@ To set up and run ``device_views``:
}
]
-#. To configure routing, replace the code in ``routes.json`` with the following:
+#. To configure routing, replace the code in ``routes.json`` with the
+ following:
.. code-block:: javascript
@@ -243,9 +251,7 @@ To set up and run ``device_views``:
YUI.add('device', function(Y, NAME) {
Y.namespace('mojito.controllers')[NAME] = {
- init: function(config) {
- this.config = config;
- },
+
/* Method corresponding to the 'index' action.
*
* @param ac {Object} The action context that
@@ -257,8 +263,8 @@ To set up and run ``device_views``:
};
}, '0.0.1', {requires: []});
-#. To modify the default template, replace the code in ``views/index.hb.html`` with the
- following:
+#. To modify the default template, replace the code in ``views/index.hb.html``
+ with the following:
.. code-block:: html
@@ -290,7 +296,8 @@ To set up and run ``device_views``:
</body>
</html>
-#. For the iPhone view, create the ``views/index.iphone.hb.html`` file with the following:
+#. For the iPhone view, create the ``views/index.iphone.hb.html`` file with the
+ following:
.. code-block:: html
@@ -322,8 +329,8 @@ To set up and run ``device_views``:
</body>
</html>
-#. For the Android view, create the ``views/index.android.hb.html`` file with the
- following:
+#. For the Android view, create the ``views/index.android.hb.html`` file with
+ the following:
.. code-block:: html
@@ -355,8 +362,8 @@ To set up and run ``device_views``:
</body>
</html>
-#. For the BlackBerry view, create the ``views/index.blackberry.hb.html`` file with the
- following:
+#. For the BlackBerry view, create the ``views/index.blackberry.hb.html`` file
+ with the following:
.. code-block:: html
View
61 docs/dev_guide/code_exs/yui_modules.rst
@@ -12,10 +12,10 @@ Summary
=======
This example shows how to include the YUI module
-`Storage Lite <http://yuilibrary.com/gallery/show/storage-lite>`_ in a Mojito application.
-The example uses the Storage Lite module to create a notepad application.
-Any text that you input into the application will persist between page views and browser
-sessions.
+`Storage Lite <http://yuilibrary.com/gallery/show/storage-lite>`_ in a Mojito
+application. The example uses the Storage Lite module to create a notepad
+application. Any text that you input into the application will persist between
+page views and browser sessions.
The following topics will be covered:
@@ -37,33 +37,34 @@ Adding YUI Modules
Location
########
-To add YUI modules that all your mojits can access, place the modules in the ``autoload``