Skip to content
Browse files

Merge branch 'develop' of git://github.com/yahoo/mojito into develop

  • Loading branch information...
2 parents 73b4543 + d1953bb commit c8cef8681ef5adc60f984576cb0b965b7c7233bc @diervo diervo committed Oct 25, 2012
Showing with 2,924 additions and 2,039 deletions.
  1. +4 −11 bin/mojito
  2. +12 −6 docs/dev_guide/api_overview/index.rst
  3. +11 −8 docs/dev_guide/api_overview/mojito_action_context.rst
  4. +11 −5 docs/dev_guide/api_overview/mojito_addons.rst
  5. +4 −4 docs/dev_guide/api_overview/mojito_rest_lib.rst
  6. +32 −25 docs/dev_guide/code_exs/adding_assets.rst
  7. +14 −15 docs/dev_guide/code_exs/app_config.rst
  8. +2 −1 docs/dev_guide/code_exs/assets.rst
  9. +186 −118 docs/dev_guide/code_exs/binding_events.rst
  10. +108 −47 docs/dev_guide/code_exs/calling_yql.rst
  11. +5 −2 docs/dev_guide/code_exs/config.rst
  12. +34 −30 docs/dev_guide/code_exs/cookies.rst
  13. +2 −2 docs/dev_guide/code_exs/data.rst
  14. +62 −44 docs/dev_guide/code_exs/dynamic_assets.rst
  15. +2 −1 docs/dev_guide/code_exs/events.rst
  16. +41 −37 docs/dev_guide/code_exs/framed_assets.rst
  17. +42 −32 docs/dev_guide/code_exs/generating_urls.rst
  18. +43 −37 docs/dev_guide/code_exs/global_assets.rst
  19. +35 −33 docs/dev_guide/code_exs/htmlframe_view.rst
  20. +63 −46 docs/dev_guide/code_exs/i18n_apps.rst
  21. +14 −9 docs/dev_guide/code_exs/index.rst
  22. +2 −1 docs/dev_guide/code_exs/inter-mojit.rst
  23. +101 −72 docs/dev_guide/code_exs/intermojit_communication.rst
  24. +49 −40 docs/dev_guide/code_exs/multiple_mojits.rst
  25. +4 −3 docs/dev_guide/code_exs/other.rst
  26. +53 −41 docs/dev_guide/code_exs/query_params.rst
  27. +43 −34 docs/dev_guide/code_exs/route_config.rst
  28. +32 −31 docs/dev_guide/code_exs/scroll_views.rst
  29. +37 −30 docs/dev_guide/code_exs/simple_logging.rst
  30. +19 −24 docs/dev_guide/code_exs/simple_view_template.rst
  31. +17 −27 docs/dev_guide/code_exs/view_engines.rst
  32. +4 −2 docs/dev_guide/code_exs/views.rst
  33. +129 −30 docs/dev_guide/code_exs/views_multiple_devices.rst
  34. +43 −38 docs/dev_guide/code_exs/yui_modules.rst
  35. +246 −189 docs/dev_guide/faq/index.rst
  36. +1 −1 docs/dev_guide/getting_started/mojito_getting_started_tutorial.rst
  37. +2 −2 docs/dev_guide/intro/mojito_apps.rst
  38. +2 −2 docs/dev_guide/intro/mojito_binders.rst
  39. +265 −141 docs/dev_guide/intro/mojito_configuring.rst
  40. +3 −3 docs/dev_guide/intro/mojito_mojits.rst
  41. +58 −59 docs/dev_guide/intro/mojito_mvc.rst
  42. +2 −2 docs/dev_guide/reference/glossary.rst
  43. +2 −2 docs/dev_guide/reference/mojito_troubleshooting.rst
  44. +1 −0 docs/dev_guide/topics/index.rst
  45. +7 −9 docs/dev_guide/topics/mojito_assets.rst
  46. +11 −13 docs/dev_guide/topics/mojito_composite_mojits.rst
  47. +23 −23 docs/dev_guide/topics/mojito_data.rst
  48. +20 −22 docs/dev_guide/topics/mojito_extensions.rst
  49. +6 −8 docs/dev_guide/topics/mojito_framework_mojits.rst
  50. +259 −0 docs/dev_guide/topics/mojito_hosting_container_reqs.rst
  51. +126 −103 docs/dev_guide/topics/mojito_logging.rst
  52. +4 −6 docs/dev_guide/topics/mojito_npm.rst
  53. +42 −14 docs/dev_guide/topics/mojito_resource_store.rst
  54. +94 −99 docs/dev_guide/topics/mojito_run_dyn_defined_mojits.rst
  55. +280 −70 docs/dev_guide/topics/mojito_testing.rst
  56. +210 −133 docs/dev_guide/topics/mojito_using_contexts.rst
  57. 0 docs/{topics → }/getting-started-guide/Part-1%3A-Hello-World.md
  58. 0 docs/{topics → }/getting-started-guide/Part-2%3A-YQL-Data-Source.md
  59. 0 docs/{topics → }/getting-started-guide/Part-3%3A-Internationalization.md
  60. 0 docs/{topics → }/getting-started-guide/Part-4%3A-Client-Runtime.md
  61. 0 docs/{topics → }/getting-started-guide/Part-5%3A-Composite-Mojits.md
  62. +0 −200 docs/topics/_addons/composite.md
  63. +0 −52 docs/topics/_addons/cookie.md
Sorry, we could not display the entire diff because too many files (353) changed.
View
15 bin/mojito
@@ -4,14 +4,7 @@
* Copyrights licensed under the New BSD License.
* See the accompanying LICENSE file for terms.
*/
-var libpath, libmojito;
-try {
- // this is the normal location
- libmojito = require('mojito');
-}
-catch (e) {
- libpath = require('path'),
- // need to do this if mojito is installed via `npm link`
- libmojito = require(libpath.join(__dirname, '..', 'lib'));
-}
-libmojito.include('management/cli');
+var resolve = require('path').resolve,
+ mojito = require(resolve(__dirname, '../lib/mojito'));
+
+mojito.include('management/cli');
View
18 docs/dev_guide/api_overview/index.rst
@@ -3,15 +3,21 @@
Mojito API Overview
===================
-This section introduces some of the main features of the Mojito API. Please see the `Mojito API documentation <../../api/>`_ that has been built using `YUI Doc <http://yuilibrary.com/projects/yuidoc>`_ and is continuously updated.
+This section introduces some of the main features of the Mojito API. Please see the
+`Mojito API documentation <../../api/>`_ that has been built using
+`YUI Doc <http://yuilibrary.com/projects/yuidoc>`_ and is continuously updated.
The API contains the following five modules:
-- **ActionContext** - is a key module of the Mojito framework, giving you access to the frameworks features from within a controller function.
-- **Addons** - extensions that provide functionality that lives both on the server and/or client. Each addon provides additional functions through a namespace that is attached directly to the ``Action Context`` object available in every controller function.
-- **CommonLibs** - is a utility library containing methods to handle cookies, access input parameters, and make REST calls.
-- **MojitoClient** - is the client-side Mojito runtime module containing methods that allow inter-mojit communication through the ``mojitProxy`` object.
-
+- **ActionContext** - is a key module of the Mojito framework, giving you access to the frameworks
+ features from within a controller function.
+- **Addons** - extensions that provide functionality that lives both on the server and/or client.
+ Each addon provides additional functions through a namespace that is attached directly to the
+ ``Action Context`` object available in every controller function.
+- **CommonLibs** - is a utility library containing methods to handle cookies, access input
+ parameters, and make REST calls.
+- **MojitoClient** - is the client-side Mojito runtime module containing methods that allow
+ inter-mojit communication through the ``mojitProxy`` object.
- **MojitServer** - is the module that provides access to the Mojito server.
View
19 docs/dev_guide/api_overview/mojito_action_context.rst
@@ -4,16 +4,19 @@
Action Context
==============
-The Action Context is an essential element of the Mojito framework that gives you access to the frameworks features from within a controller function. To use the Action Context,
-you create an instance of the ``ActionContext`` class, which we will call ``ac`` for short. From ``ac``, you can call methods to execute mojit actions within either a server or
-client context. See the `ActionContext Class <../../api/classes/ActionContext.html>`_ for the methods available from ``ac``.
+The Action Context is an essential element of the Mojito framework that gives you access to the
+frameworks features from within a controller function. To use the Action Context, you create an
+instance of the ``ActionContext`` class, which we will call ``ac`` for short. From ``ac``, you can
+call methods to execute mojit actions within either a server or client context. See the
+`ActionContext Class <../../api/classes/ActionContext.html>`_ for the methods available from ``ac``.
-One of the most common methods used from an instance of the ``ActionContext`` class is ``done``, which lets you pass data from the controller to a view. In the example ``controller.server.js`` below,
-the ``done`` method sends the ``data`` object to the ``index`` view template.
+One of the most common methods used from an instance of the ``ActionContext`` class is ``done``,
+which lets you pass data from the controller to a view. In the example ``controller.server.js`` below,
+the ``done`` method sends the ``data`` object to the ``index`` template.
.. code-block:: javascript
- YUI.add('HelloMojit', function(Y) {
+ YUI.add('HelloMojit', function(Y, NAME) {
/**
* The HelloMojit module.
*
@@ -25,7 +28,7 @@ the ``done`` method sends the ``data`` object to the ``index`` view template.
* @class Controller
* @constructor
*/
- Y.mojito.controller = {
+ Y.namespace('mojito.controllers')[NAME] = {
init: function(config) {
this.config = config;
},
@@ -36,7 +39,7 @@ the ``done`` method sends the ``data`` object to the ``index`` view template.
* provides access to the Mojito API.
*/
index: function(ac) {
- var data = { "data":"data passed to the index view template" };
+ var data = { "data":"data passed to the index template" };
ac.done(data);
}
};
View
16 docs/dev_guide/api_overview/mojito_addons.rst
@@ -4,8 +4,10 @@
Addons
======
-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 controller function. See the `ActionContext Class <../../api/classes/ActionContext.html>`_ for the addon classes.
+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 controller function.
+See the `ActionContext Class <../../api/classes/ActionContext.html>`_ for the addon classes.
Addons allow you to do the following:
@@ -20,11 +22,13 @@ Addons allow you to do the following:
Syntax
######
-Using the ActionContext object ``ac``, you would call a ``{method}`` from an ``{addon}`` with the following syntax:
+Using the ActionContext object ``ac``, you would call a ``{method}`` from an ``{addon}`` with the
+following syntax:
``ac.{addon}.{method}``
-For example, to get all of the query string parameters, you would use the ``Params`` addon with the ``url`` method as seen here:
+For example, to get all of the query string parameters, you would use the ``Params`` addon with the
+``url`` method as seen here:
``ac.params.url()``
@@ -43,6 +47,8 @@ The following code examples use the addons in parentheses:
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 `Creating New Addons <../topics/mojito_extensions.html#creating-new-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
+`Creating New Addons <../topics/mojito_extensions.html#creating-new-addons>`_.
View
8 docs/dev_guide/api_overview/mojito_rest_lib.rst
@@ -17,7 +17,7 @@ instructs YUI to load the library. Once the library is loaded, you can use
.. code-block:: javascript
- YUI.add('MyModel', function(Y) {
+ YUI.add('MyModel', function(Y, NAME) {
...
// Make the REST call.
Y.mojito.lib.REST.GET("http://example.com");
@@ -33,9 +33,9 @@ the Recipe Puppy API.
.. code-block:: javascript
- YUI.add('ProductSearchModel', function(Y) {
- Y.mojito.models.RecipeSearch = {
- init: function(config) {
+ YUI.add('ProductSearchModel', function(Y, NAME) {
+ Y.namespace('mojito.models')[NAME] = {
+ init: function(config) {
this.config = config;
},
recipeSearch: function(count, cb) {
View
57 docs/dev_guide/code_exs/adding_assets.rst
@@ -1,5 +1,3 @@
-
-
==========
Adding CSS
==========
@@ -9,20 +7,21 @@ 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.
+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.
The global assets are located in the ``{app_dir}/assets`` directory as shown here:
@@ -37,7 +36,8 @@ The global assets are located in the ``{app_dir}/assets`` directory as shown her
|-- routes.json
|-- server.js
-In the ``simple`` mojit below, you see the local ``assets`` directory for CSS files only available to the ``simple`` mojit:
+In the ``simple`` mojit below, you see the local ``assets`` directory for CSS files only available
+to the ``simple`` mojit:
::
@@ -52,7 +52,8 @@ In the ``simple`` mojit below, you see the local ``assets`` directory for CSS fi
|-- tests/
`-- views/
-This code example only uses local CSS, so the ``simple.css`` file is placed in the ``assets`` directory under the ``simple`` mojit.
+This code example only uses local CSS, so the ``simple.css`` file is placed in the ``assets``
+directory under the ``simple`` mojit.
.. code-block:: css
@@ -66,15 +67,18 @@ 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:
+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 +88,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;
@@ -103,15 +107,18 @@ The ``index.hb.html`` view template below includes ``simple.css`` from the ``ass
</body>
</html>
-To access the global assets for the application, you use a similar syntax, replacing the mojit name with the application name. Thus, if the application name is ``simple_assets`` and ``simple.css``
+To access the global assets for the application, you use a similar syntax, replacing the mojit name
+with the application name. Thus, if the application name is ``simple_assets`` and ``simple.css``
is in ``simple_assets/assets/``, you would access ``simple.css`` with the following path:
``/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,11 +167,11 @@ 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
- YUI.add('simple', function(Y,NAME) {
+ YUI.add('simple', function(Y, NAME) {
/**
* The simple module.
*
@@ -176,7 +183,7 @@ To create and run ``simple_assets``:
* @class Controller
* @constructor
*/
- Y.mojito.controllers[NAME] = {
+ Y.namespace('mojito.controllers')[NAME] = {
init: function(config) {
this.config = config;
},
@@ -201,7 +208,8 @@ 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 +219,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,16 +255,15 @@ 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>`_
+- `Index Template <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/simple_assets/mojits/simple/views/index.hb.html>`_
- `Simple Assets Application <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/simple_assets/>`_
View
29 docs/dev_guide/code_exs/app_config.rst
@@ -1,5 +1,3 @@
-
-
=================================
Basic Configuring of Applications
=================================
@@ -9,14 +7,15 @@ 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``.
+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``.
.. code-block:: javascript
@@ -31,7 +30,9 @@ The ``application.json`` file is used to specify the mojits that your applicatio
}
]
-The routing configuration for Mojito applications is contained in ``routes.json``. In this example ``routes.json``, the Mojito server is told to call the ``index`` method in the controller when an HTTP GET is called on the root path.
+The routing configuration for Mojito applications is contained in ``routes.json``. In this example
+``routes.json``, the Mojito server is told to call the ``index`` method in the controller when an
+HTTP GET is called on the root path.
.. code-block:: javascript
@@ -46,25 +47,24 @@ 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``:
#. Create your application.
``$ mojito create app simple_config``
-
#. Change to the application directory.
-
#. Create your mojit.
``$ mojito create mojit SimpleMojit``
-
-#. To specify that your application use ``SimpleMojit``, replace the code in ``application.json`` with the following:
+#. To specify that your application use ``SimpleMojit``, replace the code in ``application.json``
+ with the following:
.. code-block:: javascript
@@ -79,7 +79,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
@@ -97,13 +97,12 @@ To set up and run ``simple_config``:
#. From the application directory, run the server.
``$ mojito start``
-
#. To view your application, go to the URL:
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
304 docs/dev_guide/code_exs/binding_events.rst
@@ -1,5 +1,3 @@
-
-
==============
Binding Events
==============
@@ -9,10 +7,11 @@ 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.
+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:
@@ -21,16 +20,24 @@ The following topics will be covered:
- binding events through the ``mojitProxy`` object
- making AJAX calls to YQL from the binder
+Prerequisite
+------------
+
+You will need to `get a Flickr API key <http://www.flickr.com/services/api/keys/apply/>`_
+to run this example.
+
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
@@ -52,36 +59,45 @@ 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:
+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:
.. code-block:: javascript
- YUI.add('PagerMojitModel', function(Y,NAME) {
+ YUI.add('PagerMojitModel', function(Y, NAME) {
...
/* Code for PagerMojitModel */
...
}, '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".
-Open the query in the YQL Console and click **TEST** to see the returned XML response.
+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".
-`select * from flickr.photos.search where text="Manhattan" <http://developer.yahoo.com/yql/console/#h=select%20*%20from%20flickr.photos.search%20where%20text%3D%22Manhattan%22>`_
+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**
+to see the returned XML response.
-The returned response contains photo information in the ``photo`` element. You extract the ``farm``, ``server``, ``id``, and ``secret`` attributes from each photo element to create the photo
-URI as seen here:
+``select * from flickr.photos.search where text="Manhattan" and api_key="{your_flickr_api_key}"``
+
+The returned response contains photo information in the ``photo`` element. You extract the ``farm``,
+``server``, ``id``, and ``secret`` attributes from each photo element to create the photo URI as
+seen here:
``http://farm + {farm} + static.flickr.com/ + {server} + / + {id} + _ + {secret} + .jpg``
-In the ``model.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.
+In the ``model.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) {
+ YUI.add('PagerMojitModel', function(Y, NAME) {
/**
* The PagerMojitModel module.
* @module PagerMojitModel
@@ -90,18 +106,18 @@ wraps the photo information in an object and stores those objects in the ``image
* Constructor for the Model class.
* @class Model
* @constructor
- */
- Y.mojito.models.simple = {
+ **/
+ 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/
- var API_KEY = "{your_api_key}";
+ var API_KEY = "{your_flickr_api_key}";
start = parseInt(start) || 0;
count = parseInt(count) || 10;
- q = 'select * from flickr.photos.search(' + start + ',' + count + ') where text="%' + query + '%" and api_key="' + API_KEY+'"';
+ q = 'select * from flickr.photos.search(' + start + ',' + count + ') where text="%' + query + '%" and api_key="' + API_KEY + '"';
Y.YQL(q, function(rawData) {
if (!rawData.query.results) {
callback([]);
@@ -129,28 +145,41 @@ wraps the photo information in an object and stores those objects in the ``image
};
}, '0.0.1', {requires: [ 'yql']});
-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>`_.
+
+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.
+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,
-the binder has a proxy object (``mojitProxy``) for interacting with the mojit it represents as well as with other mojits on the page.
-Methods can be called from the ``mojitProxy`` object that allow binders to listen for and fire events.
-
-The binder consists of a constructor, an initializer, and a bind function. The following describes each component and indicates when the ``mojitProxy`` object can be used.
-
-- **constructor** - creates the namespace for your binder that wraps the initialization code and binder.
-- **initializer** - is passed the ``mojitProxy`` where it can be stored and used to listen and fire events with other binders. The ``mojitProxy`` is the only gateway back into the Mojito framework for your binder.
-- **bind** - is a function that is passed a ``Y.Node`` instance that wraps the DOM node representing this mojit instance. The DOM event handlers for capturing user interactions should be attached in this function.
-
-The skeleton of the ``binders/index.js`` file below illustrates the basic structure of the binder. For more information, see `Mojito Binders <../intro/mojito_binders.html>`_.
+#############
+
+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, the binder has a proxy
+object (``mojitProxy``) for interacting with the mojit it represents as well as with other
+mojits on the page. Methods can be called from the ``mojitProxy`` object that allow
+binders to listen for and fire events.
+
+The binder consists of a constructor, an initializer, and a bind function. The following
+describes each component and indicates when the ``mojitProxy`` object can be used.
+
+- **constructor** - creates the namespace for your binder that wraps the initialization
+ code and binder.
+- **initializer** - is passed the ``mojitProxy`` where it can be stored and used to listen
+ and fire events with other binders. The ``mojitProxy`` is the only gateway back into the
+ Mojito framework for your binder.
+- **bind** - is a function that is passed a ``Y.Node`` instance that wraps the DOM node
+ representing this mojit instance. The DOM event handlers for capturing user interactions
+ should be attached in this function.
+
+The skeleton of the ``binders/index.js`` file below illustrates the basic structure of the
+binder. For more information, see `Mojito Binders <../intro/mojito_binders.html>`_.
.. code-block:: javascript
@@ -169,19 +198,22 @@ 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:
- attach ``onClick`` handlers to ``prev`` and ``next`` links
- invoke the ``index`` method of the controller through the ``mojitProxy`` object
- create an overlay with Flickr photo information received from YQL
-The ``binders/index.js`` for this code example is long and fairly involved, so we will dissect and analyze the code. Let's begin by looking at the ``bind`` function of ``index.js``,
-which allows mojits to attach DOM event handlers.
+The ``binders/index.js`` for this code example is long and fairly involved, so we will
+dissect and analyze the code. Let's begin by looking at the ``bind`` function of
+``index.js``, which allows mojits to attach DOM event handlers.
-In this code snippet of ``binders/index.js``, the ``bind`` function contains the nested ``updateDOM`` function that updates node content and attaches event handlers. Using the ``mojitProxy`` object,
-the nested ``flipper`` function calls the ``index`` function of the controller. The callback ``updateDOM`` is passed to ``index`` to update the content.
+In this code snippet of ``binders/index.js``, the ``bind`` function contains the nested
+``updateDOM`` function that updates node content and attaches event handlers. Using the
+``mojitProxy`` object, the nested ``flipper`` function calls the ``index`` function of the
+controller. The callback ``updateDOM`` is passed to ``index`` to update the content.
.. code-block:: javascript
@@ -208,8 +240,10 @@ the nested ``flipper`` function calls the ``index`` function of the controller.
...
-The event handler for mouseovers and mouseouts are handled by the ``showOverlay`` function, which creates the overlay containing photo information.
-In the code snippet below, ``showOverlay`` makes an AJAX call to YQL to get photo data that is placed in an unordered list for the overlay.
+The event handler for mouseovers and mouseouts are handled by the ``showOverlay`` function,
+which creates the overlay containing photo information. In the code snippet below,
+``showOverlay`` makes an AJAX call to YQL to get photo data that is placed in an unordered
+list for the overlay.
.. code-block:: javascript
@@ -228,7 +262,7 @@ In the code snippet below, ``showOverlay`` makes an AJAX call to YQL to get pho
Y.log('IMAGE ID: ' + imageId);
target.addClass('overlayed');
// Query for the image metadata
- var query = 'select * from flickr.photos.info where photo_id="' + imageId + '"';
+ var query = 'select * from flickr.photos.info where photo_id="' + imageId + '" and api_key="' + {your_flickr_api_key} + '"';
thatNode.one('#display').setContent('Loading ...');
Y.YQL(query, function(raw) {
if (!raw.query.results.photo) {
@@ -252,8 +286,10 @@ In the code snippet below, ``showOverlay`` makes an AJAX call to YQL to get pho
}
...
-Thus far, we've looked at the event handlers, but not the actual binding of the handlers to nodes. At the end of the ``bind`` function, you'll see three important lines (shown below) that
-bind the ``flipper`` and ``showOutlay`` functions to handle click and mouseover events.
+Thus far, we've looked at the event handlers, but not the actual binding of the handlers
+to nodes. At the end of the ``bind`` function, you'll see three important lines
+(shown below) that bind the ``flipper`` and ``showOutlay`` functions to handle click and
+mouseover events.
.. code-block:: javascript
@@ -268,13 +304,43 @@ 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.
+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 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
YUI.add('PagerMojitBinder', function(Y, NAME) {
+ var API_KEY = '{your_flickr_api_key}';
+ function parseImageId(link) {
+ var matches = link.match(/com\/(\d+)\/(\d+)_([0-9a-z]+)\.jpg$/);
+ return matches[2];
+ }
+ function parsePage(link) {
+ var matches = link.match(/page=(\d+)/);
+ return matches[1];
+ }
+
+ /**
+ * The PagerMojitBinder module.
+ * @module PagerMojitBinder
+ */
+ /**
+ * Constructor for the Binder class.
+ *
+ * @param mojitProxy {Object} The proxy to allow
+ * the binder to interact with its owning mojit.
+ * @class Binder
+ * @constructor
+ */
Y.namespace('mojito.binders')[NAME] = {
+ /**
+ * Binder initialization method, invoked
+ * after all binders on the page have
+ * been constructed.
+ */
init: function(mojitProxy) {
this.mojitProxy = mojitProxy;
},
@@ -317,7 +383,7 @@ the view template. The binder also has a couple of helper functions for parsing
Y.log('IMAGE ID: ' + imageId);
target.addClass('overlayed');
// Query for the image metadata
- var query = 'select * from flickr.photos.info where photo_id="' + imageId + '"';
+ var query = 'select * from flickr.photos.info where photo_id="' + imageId + '" and api_key="' + API_KEY + '"';
thatNode.one('#display').setContent('Loading ...');
Y.YQL(query, function(raw) {
if (!raw.query.results.photo) {
@@ -344,23 +410,18 @@ the view template. The binder also has a couple of helper functions for parsing
thatNode.all('#nav a').on('click', flipper, this);
}
};
- function parseImageId(link) {
- var matches = link.match(/com\/(\d+)\/(\d+)_([0-9a-z]+)\.jpg$/);
- return matches[2];
- }
- function parsePage(link) {
- var matches = link.match(/page=(\d+)/);
- return matches[1];
- }
- }, '0.0.1', {requires: ['mojito', 'yql', 'io', 'dump', 'mojito-client']});
-
+ }, '0.0.1', {requires: ['yql', 'io', 'dump']});
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.
+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.
-The ``routes.json`` file below configures two route paths for HTTP GET calls made on the root path. The ``perpage`` configuration, however, requires a query string with the ``page`` parameter,
-which is used for paging. The ``page`` parameter has the value ``:page``, which is a variable that is assigned a value by the controller that we're going to look shortly.
+The ``routes.json`` file below configures two route paths for HTTP GET calls made on the
+root path. The ``perpage`` configuration, however, requires a query string with the
+``page`` parameter, which is used for paging. The ``page`` parameter has the value
+``:page``, which is a variable that is assigned a value by the controller that we're
+going to look shortly.
.. code-block:: javascript
@@ -387,10 +448,13 @@ The controller for ``PagerMojit`` performs several functions:
- calls the ``getData`` function in the model to get photo data
- creates URLs for the **next** and **prev** links
-The `Params addon <../../api/classes/Params.common.html>`_ allows you to access variables from the query string parameters, the POST request bodies, or the routing systems URLs.
-In this code example, you use the ``getFromMerged`` method, which merges the parameters from the query string, POST request body, and the routing system URLs to give you access to
-all of the parameters. In the code snippet taken from ``controller.server.js`` below, the ``getFromMerged`` method is used to get the value for the ``page`` parameter and then calculate
-the index of the first photo to display:
+The `Params addon <../../api/classes/Params.common.html>`_ allows you to access variables
+from the query string parameters, the POST request bodies, or the routing systems URLs.
+In this code example, you use the ``getFromMerged`` method, which merges the parameters
+from the query string, POST request body, and the routing system URLs to give you access
+to all of the parameters. In the code snippet taken from ``controller.server.js`` below,
+the ``getFromMerged`` method is used to get the value for the ``page`` parameter and then
+calculate the index of the first photo to display:
.. code-block:: javascript
@@ -408,9 +472,11 @@ the index of the first photo to display:
}
...
-To get the photo data, the controller depends on the model to call YQL to query the Flickr API. Using ``actionContext.models.{model_name}`` lets you get a reference to the model.
-In this example controller, the model of the ``PagerMojit`` is accessed through ``actionContext.models.PageMojit``, allowing you to call ``getData`` and get the returned data from YQL
-in the callback function.
+To get the photo data, the controller depends on the model to call YQL to query the
+Flickr API. Using ``actionContext.models.{model_name}`` lets you get a reference to the
+model. In this example controller, the model of the ``PagerMojit`` is accessed through
+``actionContext.models.PageMojit``, allowing you to call ``getData`` and get the returned
+data from YQL in the callback function.
.. code-block:: javascript
@@ -444,9 +510,12 @@ in the callback function.
};
...
-The URLs for the **prev** and **next** links are created by passing the mojit instance, the method, and the query string parameters to the ``make`` method from the ``Url`` addon.
-The code snippet below creates the query string parameters with the `YUI QueryString module <http://yuilibrary.com/yui/docs/api/modules/querystring.html>`_.
-If the query string created by ``Y.QueryString.stringify`` is "page=2" , ``actionContext.url.make`` would return the URL ``{domain_name}:8666/?page=2``.
+The URLs for the **prev** and **next** links are created by passing the mojit instance,
+the method, and the query string parameters to the ``make`` method from the ``Url`` addon.
+The code snippet below creates the query string parameters with the
+`YUI QueryString module <http://yuilibrary.com/yui/docs/api/modules/querystring.html>`_.
+If the query string created by ``Y.QueryString.stringify`` is "page=2" ,
+``actionContext.url.make`` would return the URL ``{domain_name}:8666/?page=2``.
.. code-block:: javascript
@@ -460,12 +529,13 @@ If the query string created by ``Y.QueryString.stringify`` is "page=2" , ``actio
}
...
-Stitching the above code snippets together, we have the ``controller.server.js`` below. The ``index`` function relies on the model for data and
-the ``createLink`` function to create URLs for the **next** and **prev** links.
+Stitching the above code snippets together, we have the ``controller.server.js`` below.
+The ``index`` function relies on the model for data and the ``createLink`` function to
+create URLs for the **next** and **prev** links.
.. code-block:: javascript
- YUI.add('PagerMojit', function(Y,NAME) {
+ YUI.add('PagerMojit', function(Y, NAME) {
/**
* The PagerMojit module.
* @module PagerMojit */
@@ -475,7 +545,7 @@ the ``createLink`` function to create URLs for the **next** and **prev** links.
* @class Controller
* @constructor
*/
- Y.mojito.controllers[NAME] = {
+ Y.namespace('mojito.controllers')[NAME] = {
init: function(config) {
this.config = config;
},
@@ -526,21 +596,19 @@ 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``:
#. Create your application.
``$ mojito create app binding_events``
-
#. Change to the application directory.
-
#. Create your mojit.
``$ mojito create mojit PagerMojit``
-
-#. To configure you application to run on the client and use ``HTMLFrameMojit``, replace the code in ``application.json`` with the following:
+#. To configure you application to run on the client and use ``HTMLFrameMojit``, replace
+ the code in ``application.json`` with the following:
.. code-block:: javascript
@@ -561,7 +629,8 @@ 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,19 +651,19 @@ 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
- YUI.add('PagerMojit', function(Y,NAME) {
+ YUI.add('PagerMojit', function(Y, NAME) {
var PAGE_SIZE = 10;
/**
* Constructor for the Controller class.
* @class Controller
* @constructor
*/
- Y.mojito.controllers[NAME] = {
+ Y.namespace('mojito.controllers')[NAME] = {
init: function(config) {
this.config = config;
},
@@ -644,11 +713,13 @@ To set up and run ``binding_events``:
}
}, '0.0.1', {requires: ['dump']});
-#. To get Flickr photo information using YQL, replace the code in ``model.server.js`` with the following:
+#. To get Flickr photo information using YQL, replace the code in ``model.server.js`` with
+ the following:
.. code-block:: javascript
- YUI.add('PagerMojitModel', function(Y,NAME) {
+ YUI.add('PagerMojitModel', function(Y, NAME) {
+ var API_KEY = '{your_flickr_api_key}';
/**
* The PagerMojitModel module.
* @module PagerMojitModel
@@ -658,7 +729,7 @@ To set up and run ``binding_events``:
* @class Model
* @constructor
*/
- Y.mojito.models.PagerMojit = {
+ Y.namespace('mojito.models')[NAME] = {
init: function(config) {
this.config = config;
},
@@ -668,7 +739,7 @@ To set up and run ``binding_events``:
var API_KEY = "{your_api_key}";
start = parseInt(start) || 0;
count = parseInt(count) || 10;
- q = 'select * from flickr.photos.search(' + start + ',' + count + ') where text="%' + query + '%" and api_key="' + API_KEY+'"';
+ q = 'select * from flickr.photos.search(' + start + ',' + count + ') where text="%' + query + '%" and api_key="' + API_KEY+ '"';
Y.YQL(q, function(rawData) {
if (!rawData.query.results) {
callback([]);
@@ -696,11 +767,22 @@ 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
YUI.add('PagerMojitBinder', function(Y, NAME) {
+ var API_KEY = '{your_flickr_api_key}';
+ function parseImageId(link) {
+ var matches = link.match(/com\/(\d+)\/(\d+)_([0-9a-z]+)\.jpg$/);
+ return matches[2];
+ }
+ function parsePage(link) {
+ var matches = link.match(/page=(\d+)/);
+ return matches[1];
+ }
+
/**
* The PagerMojitBinder module.
* @module PagerMojitBinder
@@ -761,7 +843,7 @@ To set up and run ``binding_events``:
Y.log('IMAGE ID: ' + imageId);
target.addClass('overlayed');
// Query for the image metadata
- var query = 'select * from flickr.photos.info where photo_id="' + imageId + '"';
+ var query = 'select * from flickr.photos.info where photo_id="' + imageId + '" and api_key="' + API_KEY + '"';
thatNode.one('#display').setContent('Loading ...');
Y.YQL(query, function(raw) {
if (!raw.query.results.photo) {
@@ -788,17 +870,10 @@ To set up and run ``binding_events``:
thatNode.all('#nav a').on('click', flipper, this);
}
};
- function parseImageId(link) {
- var matches = link.match(/com\/(\d+)\/(\d+)_([0-9a-z]+)\.jpg$/);
- return matches[2];
- }
- function parsePage(link) {
- var matches = link.match(/page=(\d+)/);
- return matches[1];
- }
}, '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 +899,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;">
@@ -839,16 +910,13 @@ To set up and run ``binding_events``:
#. 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/binding_events/application.json>`_
- `Mojit Binder <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/binding_events/mojits/PagerMojit/binders/index.js>`_
- `Binding Events Application <http://github.com/yahoo/mojito/tree/master/examples/developer-guide/binding_events/>`_
-
-
View
155 docs/dev_guide/code_exs/calling_yql.rst
@@ -1,5 +1,4 @@
-
========================
Calling YQL from a Mojit
========================
@@ -9,10 +8,12 @@ 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/>`_.
+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/>`_.
The following topics will be covered:
@@ -22,7 +23,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,18 +32,24 @@ 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.
+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.
-To get photo data from Flickr, you use the YQL table ``flickr.photos.search``. This table allows you to get photos that are associated with a string. In the YQL statement below, we use the table to
-return Flickr photos whose title, description, or tags contain the text "muppet". Click on the YQL statement to open the YQL Console, and then click the **TEST** button to see the returned XML response.
+To get photo data from Flickr, you use the YQL table ``flickr.photos.search``. This table allows you
+to get photos that are associated with a string. In the YQL statement below, we use the table to
+return Flickr photos whose title, description, or tags contain the text "muppet". Click on the YQL
+statement to open the YQL Console, and then click the **TEST** button to see the returned XML
+response.
-`select * from flickr.photos.search where text="muppets" and api_key="9cc79c8bf1942c683b0d4e30b838ee9c" <http://developer.yahoo.com/yql/console/#h=select%20*%20from%20flickr.photos.search%20where%20has_geo%3D%22true%22%20and%20text%3D%22san%20francisco%22%20and%20api_key%3D%229cc79c8bf1942c683b0d4e30b838ee9c%22>`_
+`select * from flickr.photos.search where text="muppets" and api_key="84921e87fb8f2fc338c3ff9bf51a412e" <http://developer.yahoo.com/yql/console/#h=select%20*%20from%20flickr.photos.search%20where%20has_geo%3D%22true%22%20and%20text%3D%22san%20francisco%22%20and%20api_key%3D%2284921e87fb8f2fc338c3ff9bf51a412e%22>`_
-As you can see from the partial response from YQL below, the photo URIs are not returned, just metadata about the photos. You need to extract metadata and use it to form the
-photo URIs to get the photos. We'll look at the URI scheme for the photos next.
+As you can see from the partial response from YQL below, the photo URIs are not returned, just
+metadata about the photos. You need to extract metadata and use it to form the photo URIs to get
+the photos. We'll look at the URI scheme for the photos next.
.. code-block:: xml
@@ -55,14 +62,15 @@ photo URIs to get the photos. We'll look at the URI scheme for the photos next.
</results>
</query>
-Using the ``farm``, ``server``, ``id``, ``secret``, and ``title`` attributes from the response, you form the photo URIs using the following URI scheme:
+Using the ``farm``, ``server``, ``id``, ``secret``, and ``title`` attributes from the response, you
+form the photo URIs using the following URI scheme:
``http://farm + {farm} + static.flickr.com/ + {server} + / + {id} + _ + {secret} + .jpg``
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:
@@ -72,17 +80,22 @@ The mojit model for this code example does the following:
- forms the photo URIs
- passes photo information to the controller
-In the example ``model.server.js`` below, the ``search`` function creates the YQL statement and passes it to the ``YQL`` function made available by the `YQL Module of YUI <http://developer.yahoo.com/yui/3/yql/>`_.
+In the example ``model.server.js`` below, the ``search`` function creates the YQL statement and
+passes it to the ``YQL`` function made available by the
+`YQL Module of YUI <http://developer.yahoo.com/yui/3/yql/>`_.
-The ``YQL`` function makes the REST call to the YQL Web services, and the response is passed to an anonymous function. This function extracts the fields from the response that are needed to
-create the photo URIs and then stores those photo URIs, photo IDs, and titles in objects. These objects are stored in the ``photos`` array and passed to the controller through the ``callback`` function.
+The ``YQL`` function makes the REST call to the YQL Web services, and the response is passed to an
+anonymous function. This function extracts the fields from the response that are needed to
+create the photo URIs and then stores those photo URIs, photo IDs, and titles in objects. These
+objects are stored in the ``photos`` array and passed to the controller through the ``callback``
+function.
.. code-block: javascript
- YUI.add('flickrModel', function(Y,NAME) {
+ YUI.add('flickrModel', function(Y, NAME) {
// Flickr requires an API key
- var API_KEY = '9cc79c8bf1942c683b0d4e30b838ee9c';
- Y.mojito.models.flickr = {
+ var API_KEY = '84921e87fb8f2fc338c3ff9bf51a412e';
+ Y.namespace('mojito.models')[NAME] = {
init: function(config) {
this.config = config;
},
@@ -133,28 +146,38 @@ create the photo URIs and then stores those photo URIs, photo IDs, and titles in
};
}, '0.0.1', {requires: ['yql']});
-.. 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.
+.. 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.
+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.
+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`` template.
.. code-block:: javascript
- YUI.add('flickr', function(Y,NAME) {
- Y.mojito.controllers[NAME] = {
+ YUI.add('flickr', function(Y, NAME) {
+ Y.namespace('mojito.controllers')[NAME] = {
init: function(config) {
this.config = config;
},
@@ -178,7 +201,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,12 +210,12 @@ To set up and run ``model_yql``:
``$ mojito create app model_yql``
#. Change to the application directory.
-
#. Create your mojit.
``$ mojito create mojit flickr``
-#. To specify that your application uses ``HTMLFrameMojit`` and the child ``flickr`` mojit, replace the code in ``application.json`` with the following:
+#. To specify that your application uses ``HTMLFrameMojit`` and the child ``flickr`` mojit, replace
+ the code in ``application.json`` with the following:
.. code-block:: javascript
@@ -220,7 +243,8 @@ 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,16 +260,16 @@ 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:
+#. 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
- YUI.add('flickrModel', function(Y,NAME) {
+ YUI.add('flickrModel', function(Y, NAME) {
// Replace '{Flickr API Key}' with your own Flickr
// API key.
var API_KEY = '{Flickr API Key}';
- Y.mojito.models.flickr = {
+ Y.namespace('mojito.models')[NAME] = {
init: function(config) {
this.config = config;
},
@@ -296,20 +320,58 @@ To set up and run ``model_yql``:
};
}, '0.0.1', {requires: ['yql']});
-#. `Get a Flickr API key <http://www.flickr.com/services/api/keys/apply/>`_ and then replace the string ``'{Flickr API Key}'`` in your model with your API key.
+#. `Get a Flickr API key <http://www.flickr.com/services/api/keys/apply/>`_ and then replace the
+ string ``'{Flickr API Key}'`` in your model with your API key.
.. code-block:: javascript
- YUI.add('flickrModel', function(Y,NAME) {
+ YUI.add('flickrModel', function(Y, NAME) {
// Replace '{Flickr API Key}' with your own Flickr
// API key.
var API_KEY = '{Flickr API Key}';
...
}
-#. Modify the mojit controller to get data from the model by replacing the code in ``controller.server.js`` with the following:
+#. Modify the mojit controller to get data from the model by replacing the code in
+ ``controller.server.js`` with the following:
+
+ .. code-block:: javascript
+
+ 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.
+ if(ac.params.hasOwnProperty('url')){
+ var q =ac.params.url('q') || 'muppet',
+ page = (ac.params.url('page') || 0) /1,
+ count = (ac.params.url('size') || 20) /1;
+ }else{
+ var q =ac.params.getFromUrl('q') || 'muppet',
+ page = (ac.params.getFromUrl('page') || 0) / 1,
+ count = (ac.params.getFromUrl('count') || 20) / 1;
+ }
+ var start = page * count;
+ var model = ac.models.flickr;
+ model.search (q, start, count, function(photos) {
+ ac.done (
+ {
+ photos: photos,
+ page: page,
+ count: count,
+ start: start
+ }
+ );
+ });
+ }
+ };
+ }, '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
@@ -335,7 +397,8 @@ 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
@@ -350,17 +413,15 @@ To set up and run ``model_yql``:
#. From the application directory, run the server.
``$ mojito start``
-
#. To view your application, go to the URL below:
http://localhost:8666
-
#. Get 50 Flickr photos using the search query "mojito" with the following URL:
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
7 docs/dev_guide/code_exs/config.rst
@@ -1,7 +1,10 @@
+=============
Configuration
-#############
+=============
-These examples show you how to configure your applications, such as defining mojit instances, routing paths, logging levels, and more.
+
+These examples show you how to configure your applications, such as defining mojit instances,
+routing paths, logging levels, and more.
.. toctree::
:maxdepth: 1
View
64 docs/dev_guide/code_exs/cookies.rst
@@ -1,5 +1,3 @@
-
-
=============
Using Cookies
=============
@@ -9,29 +7,35 @@ Using Cookies
**Difficulty Level:** Beginning
Summary
-#######
+=======
This example shows how to read and write cookies in a Mojito application.
The following topics will be covered:
- using the `Params addon <../../api/classes/Params.common.html>`_ from the ``actionContext`` object
- getting and setting cookies from the mojit controller
-- 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
+- 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.
+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.
-The ``index`` function in the ``controller.server.js`` below shows how to use ``cookie.get`` and ``cookie.set``. The ``cookie.set`` method also allows you to pass a third parameter that
-contains the domain, the path, and the expiration date of the cookie. For those familiar with YUI 3, these methods for getting and setting cookies should be familiar as Mojito uses the `YUI 3 Cookie Module <http://developer.yahoo.com/yui/3/api/Cookie.html>`_.
+The ``index`` function in the ``controller.server.js`` below shows how to use ``cookie.get`` and
+``cookie.set``. The ``cookie.set`` method also allows you to pass a third parameter that
+contains the domain, the path, and the expiration date of the cookie. For those familiar with YUI 3,
+these methods for getting and setting cookies should be familiar as Mojito uses the
+`YUI 3 Cookie Module <http://developer.yahoo.com/yui/3/api/Cookie.html>`_.
.. code-block:: javascript
- YUI.add('CookieMojit', function(Y,NAME) {
- Y.mojito.controllers[NAME] = {
+ YUI.add('CookieMojit', function(Y, NAME) {
+ Y.namespace('mojito.controllers')[NAME] = {
init: function(config) {
this.config = config;
},
@@ -50,15 +54,19 @@ 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>`_
-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``.
+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
<div id="{{mojit_view_id}}" class="mojit">
<h2>{{title}}</h2>
<div>
- <p>This is a demo showing how to read read cookies from browser, and how to write cookies to browser from the Mojit.</p>
+ <p>This is a demo showing how to read read cookies from browser, and how to write cookies to
+ browser from the Mojit.</p>
</div>
<div>
<p>Value of request cookie sent by browser: {{request_cookie_value}}</p>
@@ -80,21 +88,19 @@ 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``:
#. Create your application.
``$ 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:
+#. 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 +120,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,14 +135,14 @@ To set up and run ``using_cookies``:
}
]
-#. Change to ``mojits/CookieMojit.``
-
-#. To set a cookie from your controller, replace the code in ``controller.server.js`` with the following:
+#. Change to ``mojits/CookieMojit``.
+#. To set a cookie from your controller, replace the code in ``controller.server.js`` with the
+ following:
.. code-block:: javascript
- YUI.add('CookieMojit', function(Y,NAME) {
- Y.mojito.controllers[NAME] = {
+ YUI.add('CookieMojit', function(Y, NAME) {
+ Y.namespace('mojito.controllers')[NAME] = {
init: function(config) {
this.config = config;
},
@@ -155,7 +161,8 @@ To set up and run ``using_cookies``:
};
}, '0.0.1', {requires: []});
-#. To display the cookie values set in your controller, replace the code in ``views/index.hb.html`` with the following:
+#. To display the cookie values set in your controller, replace the code in ``views/index.hb.html``
+ with the following:
.. code-block:: html
@@ -187,15 +194,12 @@ To set up and run ``using_cookies``:
#. From the application directory, run the server.
``$ mojito start``
-
#. To view your application, go to the URL below:
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
106 docs/dev_guide/code_exs/dynamic_assets.rst
@@ -1,5 +1,3 @@
-
-
===========================================
Dynamically Adding CSS to Different Devices
===========================================
@@ -9,28 +7,35 @@ 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
+- using the ``addAssets`` method in the controller to dynamically add assets to both the rendered
+default and device-specific templates
Implementation Notes
-####################
+====================
-The screenshot below shows the rendered iPhone view template with dynamically included CSS and JavaScript.
+The screenshot below shows the rendered iPhone template with dynamically included CSS and
+JavaScript.
.. image:: images/dynamic_assets.device_specific.preview.gif
:height: 400px
:width: 208px
-The ``application.json`` in this code example configures Mojito to deploy mojit code to the client and to use the ``HTMLFrameMojit``. To deploy mojit code to the client,
-you assign ``true`` to the ``deploy`` property as seen in the ``application.json`` below. The ``frame`` instance of ``HTMLFrameMojit`` becomes the parent mojit of the ``child``
-instance of type ``device``.
+The ``application.json`` in this code example configures Mojito to deploy mojit code to the client
+and to use the ``HTMLFrameMojit``. To deploy mojit code to the client, you assign ``true`` to the
+``deploy`` property as seen in the ``application.json`` below. The ``frame`` instance of
+``HTMLFrameMojit`` becomes the parent mojit of the ``child`` instance of type ``device``. The
+configurations for the context ``"device:iphone"`` define the identifier ``"iphone"``
+for file resources with the ``selector`` property, so Mojito will know to use the template
+``index.iphone.hb.html`` if the context is ``"device:iphone"``.
.. code-block:: javascript
@@ -41,20 +46,25 @@ instance of type ``device``.
"specs": {
"frame" : {
"type" : "HTMLFrameMojit",
+ "deploy": true,
"config": {
- "deploy": true,
"child" : {
"type" : "device"
}
}
}
}
+ },
+ {
+ "settings": [ "device:iphone" ],
+ "selector": "iphone"
}
]
-In the controller for the ``device`` mojit, the ``index`` function has to determine what device is making the request and then attach the appropriate meta data and CSS.
-To determine the calling device, you use the ``ActionContext`` object to access the ``device`` property of the ``context`` object. Below is a partial ``ActionContext`` object
-that contains the ``context`` object:
+In the controller for the ``device`` mojit, the ``index`` function has to determine what device is
+making the request and then attach the appropriate meta data and CSS. To determine the calling
+device, you use the ``ActionContext`` object to access the ``device`` property of the ``context``
+object. Below is a partial ``ActionContext`` object that contains the ``context`` object:
.. code-block:: javascript
@@ -74,15 +84,16 @@ that contains the ``context`` object:
...
}
-To dynamically add CSS and meta data from the controller, you use methods from the `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 dynamically add CSS and meta data from the controller, you use methods from the
+`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
- YUI.add('device', function(Y,NAME){
- Y.mojito.controllers[NAME] = {
+ YUI.add('device', function(Y, NAME){
+ Y.namespace('mojito.controllers')[NAME] = {
init: function(config) {
this.config = config;
},
@@ -113,8 +124,10 @@ 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, 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.
+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.
.. code-block:: html
@@ -133,7 +146,7 @@ the CSS is dynamically added, and the Handlebars expressions are replaced with v
};
// 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;
@@ -159,21 +172,19 @@ the CSS is dynamically added, and the Handlebars expressions are replaced with v
</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``
-
-#. To configure your application to use ``HTMLFrameMojit`` and include JavaScript, replace the code in ``application.json`` with the following:
+#. To configure your application to use ``HTMLFrameMojit`` and include JavaScript, replace the code
+ in ``application.json`` with the following:
.. code-block:: javascript
@@ -184,18 +195,22 @@ To create and run ``device_assets``:
"specs": {
"frame" : {
"type" : "HTMLFrameMojit",
- "config": {
"deploy": true,
+ "config": {
"child" : {
"type" : "device"
}
}
}
}
+ },
+ {
+ "settings": [ "device:iphone" ],
+ "selector": "iphone"
}
]
-#. 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
@@ -211,13 +226,13 @@ 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 code in ``controller.server.js`` with the following:
+#. 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
- YUI.add('device', function(Y,NAME){
- Y.mojito.controllers[NAME] = {
+ YUI.add('device', function(Y, NAME){
+ Y.namespace('mojito.controllers')[NAME] = {
init: function(config) {
this.config = config;
},
@@ -248,15 +263,16 @@ 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 the following:
+#. To create the default ``index`` template, replace the code in ``views/index.hb.html`` with
+ the following:
.. code-block:: html
<html>
<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;
@@ -275,7 +291,8 @@ To create and run ``device_assets``:
</body>
</html>
-#. To create the default iPhone view template, create the file ``views/index.iphone.hb.html`` with the following:
+#. To create the default iPhone template, create the file ``views/index.iphone.hb.html`` with
+ the following:
.. code-block:: html
@@ -294,7 +311,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;
@@ -319,7 +336,8 @@ To create and run ``device_assets``:
</ul>
</div>
-#. Create the file ``assets/simple.css`` for the CSS that is included in ``index.hb.html`` with the following:
+#. Create the file ``assets/simple.css`` for the CSS that is included in ``index.hb.html`` with the
+ following:
.. code-block:: css
@@ -337,7 +355,8 @@ To create and run ``device_assets``:
}
.toolbar li { display:inline; }
-#. Create the file ``assets/simple.iphone.css`` for the CSS that is included in ``index.iphone.hb.html`` with the following:
+#. Create the file ``assets/simple.iphone.css`` for the CSS that is included in
+ ``index.iphone.hb.html`` with the following:
.. code-block:: css
@@ -363,17 +382,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:
+#. 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
78 docs/dev_guide/code_exs/framed_assets.rst
@@ -1,5 +1,3 @@
-
-
====================================
Attaching Assets with HTMLFrameMojit
====================================
@@ -9,23 +7,27 @@ 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``,
-see the code example `Using the HTML Frame Mojit <./htmlframe_view.html>`_.
+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 template. To learn more about
+the ``HTMLFrameMojit``, see the code example `Using the HTML Frame Mojit <./htmlframe_view.html>`_.
.. code-block:: javascript
@@ -52,20 +54,23 @@ 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
-into the ``<body>`` tag.
+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 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,25 +85,26 @@ 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
- CSS at the following location: ``/static/{mojit_name}/assets/simple.css``
+.. 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:
+#. To configure your application to have assets, replace the code in ``application.json`` with the
+ following:
.. code-block:: javascript
@@ -125,7 +131,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,13 +147,13 @@ 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
- YUI.add('framed', function(Y,NAME) {
- Y.mojito.controllers[NAME] = {
+ YUI.add('framed', function(Y, NAME) {
+ Y.namespace('mojito.controllers')[NAME] = {
init: function(config) {
this.config = config;
},
@@ -167,14 +173,15 @@ 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;