<commit_before>============
Frame Mojits
============

.. _mojito_fw_mojits-intro:

Introduction
============

Mojito comes with the built-in utility mojits that make developing applications easier. 
Mojito currently comes with the ``HTMLFrameMojit`` that constructs Web pages from the 
skeleton HTML to the styling and content and the ``LazyLoadMojit`` that allows you to 
lazily load mojit code. Mojito plans to offer additional frame mojits in the future.


.. _mojito_fw_mojits-htmlframe:

HTMLFrameMojit
==============

The ``HTMLFrameMojit`` builds the HTML skeleton of a Web page. When you use 
``HTMLFrameMojit`` the ``<html>``, ``<head>``, and ``<body>`` elements are automatically 
created and the content from child mojits are inserted into the ``<body>`` element.  
The ``HTMLFrameMojit`` can also automatically insert assets such as CSS and JavaScript 
files into either the ``<head>`` or ``<body>`` elements.

Because it builds the Web page from the framework to the content and styling, the 
``HTMLFrameMojit`` must be the top-level mojit in a Mojito application. As the top-level 
or parent mojit, the ``HTMLFrameMojit`` may have one or more child mojits.

To see examples of applications using ``HTMLFrameMojit``, see the 
code examples `Using the HTML Frame Mojit <../code_exs/htmlframe_view.html>`_ 
and `Attaching Assets with HTMLFrameMojit <../code_exs/framed_assets.html>`_.

.. _fw_mojits_htmlframe-config:

Configuration
-------------

As with defining instances of other mojit types, you define an instance of the 
``HTMLFrameMojit`` in 
`configuration object <../intro/mojito_configuring.html#configuration-object>`_ 
of ``application.json``. Because ``HTMLFrameMojit`` must be the top-level mojit, 
its instance cannot have a parent instance, but may have one or more child 
instances.

In the example ``application.json`` below, ``frame`` is an instance of 
``HTMLFrameMojit`` that has the ``child`` instance of the ``framed`` mojit. 
After the HTML skeleton is created, the ``HTMLFrameMojit`` will insert the 
value of the ``title`` property into the ``<title>`` element and the content 
created by the ``frame`` mojit into the ``<body>`` element.

.. code-block:: javascript

   [
     {
       "settings": [ "master" ],
       "specs": {
         "frame" : {
           "type" : "HTMLFrameMojit",
           "config": {
             "title": "Title of HTML page",
             "child" : {
               "type" : "framed"
             }
           }
         }
       }
     }
   ]

To have multiple child instances, the ``HTMLFrameMojit`` instance must use the 
``children`` object to specify the child instances. In this example ``application.json``, 
the ``page`` instance of ``HTMLFrameMojit`` uses the ``children`` object to specify three 
child instances that can create content for the rendered view.

.. code-block:: javascript

   [
     {
       "settings": [ "master" ],
       "specs": {
         "page" : {
           "type" : "HTMLFrameMojit",
           "config": {
             "deploy": true,
             "title": HTMLFrameMojit Example with Children",
             "child": {
               "type": "Body",
               "config": {
                 "children" : {
                   "nav": {
                     "type": ""Navigation"
                   },
                   "content": {
                     "type": "articleBuilder"
                   },
                   "footer" {
                     "type": "Footer"
                   }
                 }
               }
             }
           }
         }
       }
     }
   ]


.. _htmlframe_config-deploy:

Deploying to Client
###################

To configure Mojito to deploy code to the client, you set the ``deploy`` property of the 
`config <../intro/mojito_configuring.html#configuration-object>`_ object to ``true`` 
as shown below.

.. code-block:: javascript

   [
     {
       "settings": [ "master" ],
       "specs": {
         "frame" : {
           "type" : "HTMLFrameMojit",
           "config": {
             "deploy": true,
             "child" : {
               "type" : "framed"
             }
           }
         }
       }
     }
   ]


.. _config_deploy-what:

What Gets Deployed?
*******************

The following is deployed to the client:

- Mojito framework
- binders (and their dependencies)

When a binder invokes its controller, if the controller has the ``client`` or ``common`` 
affinity, then the controller and its dependencies are deployed to the client as well. If 
the affinity of the controller is ``server``, the invocation occurs on the server. In 
either case, the binder is able to transparently invoke the controller.

.. _htmlframemojit-assets:

Adding Assets with HTMLFrameMojit
---------------------------------

You specify the assets for ``HTMLFrameMojit`` just as you would specify assets 
for any mojit. The basic difference is that ``HTMLFrameMojit`` will 
automatically attach ``<link>`` elements for CSS and ``<script>`` elements 
for JavaScript files to the HTML page. When using assets with other mojits, 
you have to manually add ``<link>`` elements that refer to assets to templates.  
See `Assets <./mojito_assets.html>`_ for general information about using 
assets in Mojito.

In the example ``application.json`` below, the ``HTMLFrameMojit`` instance 
``frame`` has one child mojit with a CSS asset. Because the assets are 
listed in the ``top`` object, the ``HTMLFrameMojit`` will attach the ``<link>`` 
element pointing to ``index.css`` to the ``<head>`` element.

.. code-block:: javascript

   [
     {
       "settings": [ "master" ],
       "specs": {
         "frame" : {
           "type" : "HTMLFrameMojit",
           "config": {
             "child" : {
               "type" : "framed"
             },
             "assets": {
               "top": {
                 "css": [
                   "/static/framed/assets/css/index.css"
                 ]
               }
             }
           }
         }
       }
     }
   ]

The rendered view that was constructed by the ``HTMLFrameMojit`` should look 
similar to the HTML below.

.. code-block:: html

   <!DOCTYPE HTML>
   <html>
     <head><script type="text/javascript">var MOJITO_INIT=Date.now();</script>
       <meta name="creator" content="Yahoo! Mojito 0.1.0">
       <title>Powered by Mojito 0.1.0</title>
       <link rel="stylesheet" type="text/css" href="/static/framed/assets/css/index.css"/>
     </head>
     <body>
       <div id="yui_3_3_0_3_131500627867611" class="mojit">
         <h2 id="header">Framed Assets</h2>
         <p>Page Content</p>
       </div>
     </body>
   </html>


.. _mojito_fw_mojits-lazyloadmojit:

LazyLoadMojit
=============

``LazyLoadMojit`` allows you to defer the loading of a mojit instance by first 
dispatching the ``LazyLoadMoit`` as a proxy to the client. From the client, 
``LazyLoadMojit`` can then request Mojito to load the proxied mojit. This allows 
your Mojito application to load the page quickly and then lazily load parts of 
the page.

.. _mojito_fw_mojits-lazyload:

LazyLoadMojit
=============


.. _fw_mojits_lazyload-how:

How Does It Work?
-----------------

The ``LazyLoadMojit`` is really a proxy mojit that dispatches its binder and an 
empty DOM node to the client. From the client, the binder sends a request to the 
controller to execute the code of the proxied (original) mojit. The output from 
the executed mojit is then returned to the binder of the ``LazyLoadMojit``, which 
attaches the output to the empty DOM node. The binder of ``LazyLoadMojit`` destroys 
itself, leaving the DOM intact with the new content.

<commit_msg>Removed stray heading and section ID from older version of doc.<commit_after>============
Frame Mojits
============

.. _mojito_fw_mojits-intro:

Introduction
============

Mojito comes with the built-in utility mojits that make developing applications easier. 
Mojito currently comes with the ``HTMLFrameMojit`` that constructs Web pages from the 
skeleton HTML to the styling and content and the ``LazyLoadMojit`` that allows you to 
lazily load mojit code. Mojito plans to offer additional frame mojits in the future.


.. _mojito_fw_mojits-htmlframe:

HTMLFrameMojit
==============

The ``HTMLFrameMojit`` builds the HTML skeleton of a Web page. When you use 
``HTMLFrameMojit`` the ``<html>``, ``<head>``, and ``<body>`` elements are automatically 
created and the content from child mojits are inserted into the ``<body>`` element.  
The ``HTMLFrameMojit`` can also automatically insert assets such as CSS and JavaScript 
files into either the ``<head>`` or ``<body>`` elements.

Because it builds the Web page from the framework to the content and styling, the 
``HTMLFrameMojit`` must be the top-level mojit in a Mojito application. As the top-level 
or parent mojit, the ``HTMLFrameMojit`` may have one or more child mojits.

To see examples of applications using ``HTMLFrameMojit``, see the 
code examples `Using the HTML Frame Mojit <../code_exs/htmlframe_view.html>`_ 
and `Attaching Assets with HTMLFrameMojit <../code_exs/framed_assets.html>`_.

.. _fw_mojits_htmlframe-config:

Configuration
-------------

As with defining instances of other mojit types, you define an instance of the 
``HTMLFrameMojit`` in 
`configuration object <../intro/mojito_configuring.html#configuration-object>`_ 
of ``application.json``. Because ``HTMLFrameMojit`` must be the top-level mojit, 
its instance cannot have a parent instance, but may have one or more child 
instances.

In the example ``application.json`` below, ``frame`` is an instance of 
``HTMLFrameMojit`` that has the ``child`` instance of the ``framed`` mojit. 
After the HTML skeleton is created, the ``HTMLFrameMojit`` will insert the 
value of the ``title`` property into the ``<title>`` element and the content 
created by the ``frame`` mojit into the ``<body>`` element.

.. code-block:: javascript

   [
     {
       "settings": [ "master" ],
       "specs": {
         "frame" : {
           "type" : "HTMLFrameMojit",
           "config": {
             "title": "Title of HTML page",
             "child" : {
               "type" : "framed"
             }
           }
         }
       }
     }
   ]

To have multiple child instances, the ``HTMLFrameMojit`` instance must use the 
``children`` object to specify the child instances. In this example ``application.json``, 
the ``page`` instance of ``HTMLFrameMojit`` uses the ``children`` object to specify three 
child instances that can create content for the rendered view.

.. code-block:: javascript

   [
     {
       "settings": [ "master" ],
       "specs": {
         "page" : {
           "type" : "HTMLFrameMojit",
           "config": {
             "deploy": true,
             "title": HTMLFrameMojit Example with Children",
             "child": {
               "type": "Body",
               "config": {
                 "children" : {
                   "nav": {
                     "type": ""Navigation"
                   },
                   "content": {
                     "type": "articleBuilder"
                   },
                   "footer" {
                     "type": "Footer"
                   }
                 }
               }
             }
           }
         }
       }
     }
   ]


.. _htmlframe_config-deploy:

Deploying to Client
###################

To configure Mojito to deploy code to the client, you set the ``deploy`` property of the 
`config <../intro/mojito_configuring.html#configuration-object>`_ object to ``true`` 
as shown below.

.. code-block:: javascript

   [
     {
       "settings": [ "master" ],
       "specs": {
         "frame" : {
           "type" : "HTMLFrameMojit",
           "config": {
             "deploy": true,
             "child" : {
               "type" : "framed"
             }
           }
         }
       }
     }
   ]


.. _config_deploy-what:

What Gets Deployed?
*******************

The following is deployed to the client:

- Mojito framework
- binders (and their dependencies)

When a binder invokes its controller, if the controller has the ``client`` or ``common`` 
affinity, then the controller and its dependencies are deployed to the client as well. If 
the affinity of the controller is ``server``, the invocation occurs on the server. In 
either case, the binder is able to transparently invoke the controller.

.. _htmlframemojit-assets:

Adding Assets with HTMLFrameMojit
---------------------------------

You specify the assets for ``HTMLFrameMojit`` just as you would specify assets 
for any mojit. The basic difference is that ``HTMLFrameMojit`` will 
automatically attach ``<link>`` elements for CSS and ``<script>`` elements 
for JavaScript files to the HTML page. When using assets with other mojits, 
you have to manually add ``<link>`` elements that refer to assets to templates.  
See `Assets <./mojito_assets.html>`_ for general information about using 
assets in Mojito.

In the example ``application.json`` below, the ``HTMLFrameMojit`` instance 
``frame`` has one child mojit with a CSS asset. Because the assets are 
listed in the ``top`` object, the ``HTMLFrameMojit`` will attach the ``<link>`` 
element pointing to ``index.css`` to the ``<head>`` element.

.. code-block:: javascript

   [
     {
       "settings": [ "master" ],
       "specs": {
         "frame" : {
           "type" : "HTMLFrameMojit",
           "config": {
             "child" : {
               "type" : "framed"
             },
             "assets": {
               "top": {
                 "css": [
                   "/static/framed/assets/css/index.css"
                 ]
               }
             }
           }
         }
       }
     }
   ]

The rendered view that was constructed by the ``HTMLFrameMojit`` should look 
similar to the HTML below.

.. code-block:: html

   <!DOCTYPE HTML>
   <html>
     <head><script type="text/javascript">var MOJITO_INIT=Date.now();</script>
       <meta name="creator" content="Yahoo! Mojito 0.1.0">
       <title>Powered by Mojito 0.1.0</title>
       <link rel="stylesheet" type="text/css" href="/static/framed/assets/css/index.css"/>
     </head>
     <body>
       <div id="yui_3_3_0_3_131500627867611" class="mojit">
         <h2 id="header">Framed Assets</h2>
         <p>Page Content</p>
       </div>
     </body>
   </html>


.. _mojito_fw_mojits-lazyloadmojit:

LazyLoadMojit
=============

``LazyLoadMojit`` allows you to defer the loading of a mojit instance by first 
dispatching the ``LazyLoadMoit`` as a proxy to the client. From the client, 
``LazyLoadMojit`` can then request Mojito to load the proxied mojit. This allows 
your Mojito application to load the page quickly and then lazily load parts of 
the page.


.. _fw_mojits_lazyload-how:

How Does It Work?
-----------------

The ``LazyLoadMojit`` is really a proxy mojit that dispatches its binder and an 
empty DOM node to the client. From the client, the binder sends a request to the 
controller to execute the code of the proxied (original) mojit. The output from 
the executed mojit is then returned to the binder of the ``LazyLoadMojit``, which 
attaches the output to the empty DOM node. The binder of ``LazyLoadMojit`` destroys 
itself, leaving the DOM intact with the new content.


{'fraction_non_alphanumeric': 0.12595544522114066, 'fraction_numerical': 0.003527797739596263, 'mean_word_length': 2.4609993217273343, 'pattern_counts': {'":': 54, '<': 77, '<?xml version=': 0, '>': 77, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6262194', 'n_tokens_mistral': 4590, 'n_tokens_neox': 4435, 'n_words': 1602}