Hide
Search Results

Generating URLs

Time Estimate: 15 minutes

Difficulty Level: Intermediate

Summary

This example shows you a way to generate URLs to a particular view independent of the controller or action of the mojit.

The following topics will be covered:

  • configuring routing paths to call actions from mojit instances
  • creating a URL in the mojit controller with the Url addon

Implementation Notes

The route paths for this code example are defined in the routing configuration file routes.json. You can define any path and then associate that path with a mojit instance and an action. When the client makes an HTTP request on that path, the associated action on the mojit instance defined in application.json will be executed. Before creating the routes for the application, you first need to create the mojit instance.

In the application.json below, you configure the application to use an instance of the mojit GenURLMojit. The instance in this example is mymojit, but the instance name can be any string as defined by RFC 4627.

[
  {
    "settings": [ "master" ],
    "specs": {
      "mymojit": {
        "type": "GenURLMojit"
      }
    }
  }
]

In the routes.json, you not only can define route paths, but you can also configure Mojito to respond to specific HTTP methods called on those paths. The routes.json below defines two route paths that only respond to HTTP GET calls. When HTTP GET calls are made on these two paths, Mojito executes different methods from the mymojit instance. The index method is executed when the root path is called, and the contactus method is executed when the /some-really-long-url-contactus path is called. The routes.json file gives you the freedom to create route paths independent of the mojit controller.

[
  {
    "settings": ["master"],
    "root": {
      "verbs": ["get"],
      "path": "/",
      "call": "mymojit.index"
    },
    "contactus": {
      "verbs": ["get"],
      "path": "/some-really-long-url-contactus",
      "call": "mymojit.contactus"
    }
  }
]

The mojit controller, however, can use the Url addon to access the route paths defined in routes.json to create URLs. For example, in the controller.server.js below, the route path that calls the contactus action is formed with url.make in the index function. You just pass the instance and action to url.make to create the URL based on the path defined in routes.json.

YUI.add('GenURLMojit', function(Y, NAME) {
  Y.namespace('mojito.controllers')[NAME] = {

    index: function(actionContext) {
      var url = actionContext.url.make('mymojit', 'contactus', '');
      actionContext.done({contactus_url: url});
    },
    contactus: function(actionContext) {
      var currentTime = actionContext.intl.formatDate(new Date());
      actionContext.done({currentTime: currentTime});
    }
  };
}, '0.0.1', {requires: ['mojito-intl-addon', 'mojito-url-addon']});

Setting Up this Example

To set up and run generating_urls:

  1. Create your application.

    $ mojito create app generating_urls

  2. Change to the application directory.

  3. Create your mojit.

    $ mojito create mojit GenURLMojit

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

    [
      {
        "settings": [ "master" ],
        "specs": {
          "mymojit": {
            "type": "GenURLMojit"
          }
        }
      }
    ]
    
  5. To configure routing paths, replace the code in routes.json with the following:

    [
      {
        "settings": ["master"],
        "root": {
          "verbs": ["get"],
          "path": "/",
          "call": "mymojit.index"
        },
        "contactus": {
          "verbs": ["get"],
          "path": "/some-really-long-url-that-we-dont-need-to-remember-contactus",
          "call": "mymojit.contactus"
        }
      }
    ]
    
  6. Change to mojits/GenURLMojit.

  7. Enable the controller to create a URL using the route paths defined in routes.json by replacing the code in controller.server.js with the following:

    YUI.add('GenURLMojit', function(Y, NAME) {
      Y.namespace('mojito.controllers')[NAME] = {
    
        index: function(actionContext) {
          var url = actionContext.url.make('mymojit', 'contactus', '');
          actionContext.done({contactus_url: url});
        },
        contactus: function(actionContext) {
          var currentTime = actionContext.intl.formatDate(new Date());
          actionContext.done({currentTime: currentTime});
        }
      };
    }, '0.0.1', {requires: ['mojito-intl-addon', 'mojito-url-addon']});
    
  8. To display the rendered index template when HTTP GET is called on the root path, replace the code in views/index.hb.html with the following:

    <div id="{{mojit_view_id}}" class="mojit">
      <div>
        <p>This is the default page that is visible on the root path.</p>
        <p>The purpose of this demo is to show that as a developer, you don't have to remember any
        custom routing path you specify in routes.json configuration file.</p>
        <p>All you need is the mojit identifier (e.g. mymojit), and the action that you are calling
          on the mojit (e.g. contactus). See the mojits/GenURLMojit/controller.server.js for more details.
        </p>
      </div>
      <div style="text-align: center; background-color: #0776A0">
        <p>Click <a href="{{contactus_url}}">here</a> on how to Contact Us.</p>
      </div>
    </div>
    
  9. To display the rendered contactus template when the contactus action is executed, replace the code in views/contactus.hb.html with the following:

    <div id="{{mojit_view_id}}" class="mojit">
      <div>
        <p>This is the contact page last viewed on: <strong>{{currentTime}}</strong>
        </p>
      </div>
      <div>
        <p>Yahoo Inc, 701 First Avenue, Sunnyvale CA 94089</p>
      </div>
    </div>
    
  10. Run the server and open the following URL in a browser: http://localhost:8666/

  11. From your application, click on the here link to see the URL with the long path.