Permalink
Browse files

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

…sour
  • Loading branch information...
2 parents ad2770a + 5198663 commit a851caffc81a96fe1f919b6c93c20d4194f7ca4a Bret Thaeler committed Sep 24, 2012
Showing with 494 additions and 229 deletions.
  1. +49 −23 docs/dev_guide/code_exs/dynamic_assets.rst
  2. +4 −4 docs/dev_guide/code_exs/route_config.rst
  3. +125 −21 docs/dev_guide/code_exs/views_multiple_devices.rst
  4. +196 −131 docs/dev_guide/intro/mojito_configuring.rst
  5. +33 −5 docs/dev_guide/topics/mojito_resource_store.rst
  6. +1 −1 docs/dev_guide/topics/mojito_using_contexts.rst
  7. +1 −1 examples/developer-guide/binding_events/mojits/PagerMojit/models/model.server.js
  8. +1 −1 lib/app/addons/rs/yui.server.js
  9. +6 −0 lib/app/autoload/controller-context.common.js
  10. +17 −3 lib/app/autoload/dispatch.common.js
  11. +28 −13 lib/app/autoload/mojito-client.client.js
  12. +3 −0 lib/dimensions.json
  13. +1 −1 package.json
  14. +1 −1 tests/func/applications/frameworkapp/common/mojits_subdir2/mojits/SimpleModel/models/model.common.js
  15. +1 −1 tests/func/applications/frameworkapp/usecase/mojits/Flickr/models/model.common.js
  16. +1 −1 tests/func/applications/frameworkapp/usecase/mojits/FlickrDetail/models/model.common.js
  17. +1 −1 tests/func/applications/frameworkapp/usecase/mojits/PagedFlickr/models/model.common.js
  18. +1 −1 tests/func/applications/frameworkapp/usecase/mojits/PagedFlickr2/models/model.common.js
  19. +1 −1 tests/func/applications/frameworkapp/usecase/mojits/PagedFlickr5/models/model.common.js
  20. +1 −1 tests/func/applications/frameworkapp/usecase/mojits/i18nMojit/models/model.server.js
  21. +1 −1 tests/func/applications/frameworkapp/usecase/mojits/i18n_Mojit/models/model.server.js
  22. +21 −17 tests/run.js
@@ -11,26 +11,33 @@ Dynamically Adding CSS to Different Devices
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
+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.
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 view 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 view 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 +48,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,8 +86,9 @@ 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``.
@@ -113,8 +126,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`` 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.
.. code-block:: html
@@ -173,7 +188,8 @@ To create and run ``device_assets``:
``$ 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 +200,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 contents of the file ``routes.json`` with the following:
.. code-block:: javascript
@@ -212,7 +232,8 @@ 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 view template by replacing the
+ code in ``controller.server.js`` with the following:
.. code-block:: javascript
@@ -248,7 +269,8 @@ 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`` view template, replace the code in ``views/index.hb.html`` with
+ the following:
.. code-block:: html
@@ -275,7 +297,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
@@ -319,7 +342,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 +361,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
@@ -368,7 +393,8 @@ To create and run ``device_assets``:
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
@@ -33,7 +33,7 @@ is created, which can then be associated in 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 could 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``,
+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
@@ -64,11 +64,11 @@ method ``post_params`` from the ``post-route`` mojit instance.
"verbs": ["get"],
"path": "/custom-route",
"call": "mapped_mojit.index"
- }
+ },
"another-route": {
- "verbs": ["post"]
+ "verbs": ["post"],
"path": "/*",
- "call": mojit-post-route.post_params"
+ "call": "mojit-post-route.post_params"
}
}
]
Oops, something went wrong.

0 comments on commit a851caf

Please sign in to comment.