Skip to content
This repository has been archived by the owner on Oct 30, 2018. It is now read-only.

Commit

Permalink
Merge branch 'develop' of git://github.com/yahoo/mojito into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
diervo committed Oct 25, 2012
2 parents 73b4543 + d1953bb commit c8cef86
Show file tree
Hide file tree
Showing 351 changed files with 6,792 additions and 9,482 deletions.
15 changes: 4 additions & 11 deletions bin/mojito
Expand Up @@ -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');
18 changes: 12 additions & 6 deletions docs/dev_guide/api_overview/index.rst
Expand Up @@ -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.


Expand Down
19 changes: 11 additions & 8 deletions docs/dev_guide/api_overview/mojito_action_context.rst
Expand Up @@ -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.
*
Expand All @@ -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;
},
Expand All @@ -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);
}
};
Expand Down
16 changes: 11 additions & 5 deletions docs/dev_guide/api_overview/mojito_addons.rst
Expand Up @@ -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:

Expand All @@ -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()``

Expand All @@ -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>`_.


8 changes: 4 additions & 4 deletions docs/dev_guide/api_overview/mojito_rest_lib.rst
Expand Up @@ -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");
Expand All @@ -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) {
Expand Down
57 changes: 32 additions & 25 deletions docs/dev_guide/code_exs/adding_assets.rst
@@ -1,5 +1,3 @@


==========
Adding CSS
==========
Expand All @@ -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:

Expand All @@ -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:

::

Expand All @@ -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
Expand All @@ -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

Expand All @@ -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;
Expand All @@ -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``:

Expand Down Expand Up @@ -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.
*
Expand All @@ -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;
},
Expand All @@ -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

Expand All @@ -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;
Expand Down Expand Up @@ -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/>`_


0 comments on commit c8cef86

Please sign in to comment.