developer

Using the HTML Frame Mojit

Time Estimate: 15 minutes

Difficulty Level: Intermediate

Summary

This example shows how to use the HTML Frame Mojit ( HTMLFrameMojit) to create the skeleton of an HTML page and embed rendered template into the page. The HTMLFrameMojit creates the <html>, <head>, and <body> tags and embeds the rendered templates of the child mojits into the <body> tag. To be clear, although the name HTMLFrameMojit contains the string “frame”, the HTMLFrameMojit does not create HTML frame or iframe elements. This example only uses one child mojit, but you can configure the application to use many child mojits. For more information, see HTMLFrameMojit.

The following topics will be covered:

  • creating the framework for an HTML page
  • embedding a rendered child mojit’s templates into the HTML page

Implementation Notes

The screenshot below shows the page served by your application, where the visible content is created by the child mojit of HTMLFrameMojit.

https://s.yimg.com/oo/cms/products/mojito/code_exs/images/htmlframe.preview_309269175.gif

The HTMLFrameMojit is a reusable component that is available in every Mojito application. To configure the HTMLFrameMojit, you use the application.json file. In this example application.json, the frame object has a type property that specifies that HTMLFrameMojit create the HTML framework and embed the rendered view from the child mojit.

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

The Mojito server returns the HTML below to the client. The HTMLFrameMojit is responsible for the tags that comprise the skeleton of the HTML page and inserting the value of the title property in application.json into the <title> element, and the child mojit creates the content that is embedded in the <body> tag. In this example, the child mojit creates the <div> tag and its content.

<!DOCTYPE HTML>
  <html>
    <head>
      <meta name="creator" content="Yahoo Mojito 0.0.1">
      <title>HTMLFrameMojit Example</title>
    </head>
    <body>
      <div id="framed-inst" class="mojit">
      <h2 style="
        border-style: solid;
        border-width: 10px;
        border-color: #3D362D;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 0px;
        background-color: #F7F6F4;
        text-align: center;
        font-weight: bold;
        font-size:2.0em;
        color: #FF9900;
        width: 90%;
      ">Framed Mojit</h2>
    </div>
  </body>
</html>

The HTMLFrameMojit mojit can be used to allow dynamic runtime selection of running on the client or server. You can also use HTMLFrameMojit to include assets and control language defaults. These subjects are discussed in Internationalizing Your Application.

Setting Up this Example

To set up and run htmlframe_mojit:

  1. Create your application.

    $ mojito create app htmlframe_mojit

  2. Change to the application directory.

  3. Create your mojit.

    $ mojito create mojit framed

  4. To configure the application to use the HTMLFrameMojit, replace the code in application.json with the following:

    [
      {
        "settings": [ "master" ],
        "specs": {
          "frame" : {
            "type" : "HTMLFrameMojit",
            "config": {
              "title": "HTMLFrameMojit Example",
              "child" : {
                "type" : "framed"
              }
            }
          }
        }
      }
    ]
    
  5. Update your app.js with the following to use Mojito’s middleware, configure routing and the port, and have your application listen for requests:

    'use strict';
    
    var debug = require('debug')('app'),
        express = require('express'),
        libmojito = require('mojito'),
        app;
    
        app = express();
        app.set('port', process.env.PORT || 8666);
        libmojito.extend(app);
    
        app.use(libmojito.middleware());
    
    
        app.get('/status', function (req, res) {
            res.send('200 OK');
        });
        app.get('/', libmojito.dispatch('frame.index'));
    
        app.listen(app.get('port'), function () {
            debug('Server listening on port ' + app.get('port') + ' ' +
            'in ' + app.get('env') + ' mode');
        });
        module.exports = app;
    
  6. Confirm that your package.json has the correct dependencies as show below. If not, update package.json.

    "dependencies": {
        "debug": "*",
         "mojito": "~0.9.0"
    },
    "devDependencies": {
        "mojito-cli": ">= 0.2.0"
    },
    
  7. From the application directory, install the application dependencies:

    $ npm install

  8. Change to mojits/framed.

  9. Modify the controller of the framed mojit by replacing the code in controller.server.js with the following:

    YUI.add('framed', function(Y, NAME) {
      Y.namespace('mojito.controllers')[NAME] = {
        index: function(ac) {
          ac.done({app_name:'Framed Mojit'});
        }
      };
    }, '0.0.1', {requires: ['mojito']});
    
  10. Modify the default template by replacing the code in views/index.hb.html with the following:

    <div id="" class="mojit">
      <h2 style="
        border-style: solid;
        border-width: 10px;
        border-color: #3D362D;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 0px;
        background-color: #F7F6F4;
        text-align: center;
        font-weight: bold;
        font-size:2.0em;
        color: #FF9900;
        width: 90%;
      "></h2>
    </div>
    

    The HTML fragment in the template above will be embedded in the <body> tag by HTMLFrameMojit.

  11. From the application directory, run the server.

    $ node app.js

  12. To view your application, go to the URL:

    http://localhost:8666