Summary¶

This example shows how to include the YUI module Storage Lite in a Mojito application. The example uses the Storage Lite module to create a notepad application. Any text that you input into the application will persist between page views and browser sessions.

The following topics will be covered:

• adding YUI modules to the autoload directory
• accessing YUI modules from a mojit

Implementation Notes¶

YUI.add('gallery-storage-lite', function (Y) {
   ...
}, '1.0.0', { requires: ['event-base', 'event-custom', 'event-custom-complex', 'json']});

YUI.add('NotepadBinderIndex', function (Y, NAME) {
  Y.namespace('mojito.binders')[NAME] = {
    init: function(mojitProxy) {
      this.mp = mojitProxy;
    },
    bind: function(node) {
      ...
    }
  };
  // See autoload/storage-lite.client.js
}, '0.0.1', {requires: [  'gallery-storage-lite' ]});

...
  bind: function(node) {
    // Based on http://yuilibrary.com/gallery/show/storage-lite
    var keyname = 'storage-lite-example', notes = node.one('#notes');
    // Populate the textarea with the stored note
    // text on page load.
    notes.set('value', Y.StorageLite.getItem(keyname) || '');
    // Save the contents of the textarea after
    // each keystroke.
    notes.on('keyup', function() {
      Y.StorageLite.setItem(keyname, notes.get('value'));
    });
  }
...

Setting Up this Example¶

To set up and run yui_module:

1. Create your application.

   $ mojito create app yui_module

2. Change to the application directory.

3. Create your mojit.

   $ mojito create mojit Notepad

4. To specify that your application use the Notepad mojit and be deployed to the client, replace the code in application.json with the following:

   [
     {
       "settings": [ "master" ],
       "specs": {
         "notepad": {
           "type": "HTMLFrameMojit",
           "config": {
             "deploy": true,
             "title": "Notepad Example",
             "child": {
               "type": "Notepad"
             }
           }
         }
       }
     }
   ]
   

5. To configure the routing for your application, replace the code in routes.json with the following:

   [
     {
       "settings": [ "master" ],
       "/": {
         "call": "notepad.index",
         "path": "/",
         "verbs": ["get"]
       }
     }
   ]
   

6. Create the autoload directory for storing the Storage Lite module.

   $ mkdir autoload

7. Get the Storage Lite module and place it in the autoload directory.

   $ wget -O autoload/storage-lite.client.js https://raw.github.com/rgrove/storage-lite/master/src/storage-lite.js --no-check-certificate

8. Change to mojits/Notepad.

9. Replace the code in controller.server.js with the following:

   YUI.add('Notepad', function(Y, NAME) {
     Y.namespace('mojito.controllers')[NAME] = {
       index: function(ac) {
         ac.done();
       }
     };
   }, '0.0.1', {requires: ['mojito']});
   

10. To create the binder for getting user input and storing it with the Storage Lite module, replace the code in binders/index.js with the following:

    YUI.add('NotepadBinderIndex', function (Y, NAME) {
      Y.namespace('mojito.binders')[NAME] = {
        init: function(mojitProxy) {
          this.mp = mojitProxy;
        },
        /**
        * @method bind
        * @param {Node} YUI Node
        */
        bind: function(node) {
          // Based on http://yuilibrary.com/gallery/show/storage-lite
          var keyname = 'storage-lite-example', notes = node.one('#notes');
          // Populate the textarea with the stored
          // note text on page load.
          notes.set('value', Y.StorageLite.getItem(keyname) || '');
          // Save the contents of the textarea after
          // each keystroke.
          notes.on('keyup', function() {
            Y.StorageLite.setItem(keyname, notes.get('value'));
          });
        }
      };
      // See autoload/storage-lite.client.js
    }, '0.0.1', {requires: [ 'gallery-storage-lite' ]});
    

11. To display a form that allows users to input text, replace the code in views/index.hb.html with the following:

    <div id="{{mojit_view_id}}">
      <h1>Storage Lite: Simple Notepad Example</h1>
      <form>
        <p>Anything you type in this textarea will
        be stored and persisted between page views and browser sessions using the
        <a href="http://github.com/rgrove/storage-lite/">Storage Lite</a> YUI module by
        Ryan Grove.</p>
        <p><textarea id="notes" cols="80" rows="8"></textarea>
        </p>
      </form>
    </div>
    

12. From the application directory, run the server.

    $ mojito start

13. Go to the application at the URL below and enter some text into the form.

    http://localhost:8666/

14. Point to the same URL in a new tab. You should see the same text that you entered in the form before.

15. Open the same URL in a new browser window. Once again, you should see the same text that you entered earlier.

Source Code¶

• YUI Module App
• Mojit Binder