Summary¶

This example shows how to configure the log levels for the client and the server in Mojito.

The following topics will be covered:

• configuring the logging levels
• displaying client-side and server-side logging
• using Y.log to set log levels

Implementation Notes¶

"log":{
  "client":{
    "level":"debug",
    "yui":true,
    "timestamp": false
  },
  "server":{
    "level":"debug",
    "yui":true,
    "timestamp": true
  }
}

Y.log("This message will be reported at the log level set in application.json or the default level.");
Y.log("This log message will be reported at the INFO log level.", "info");

Setting Up this Example¶

To set up and run simple_logging:

1. Create your application.

   $ mojito create app simple_logging

2. Change to the application directory.

3. Create your mojit.

   $ mojito create mojit log

4. To configure the log levels for the client and server, replace the code in

application.json with the following:

[
  {
    "settings": [ "master" ],
    "specs": {
      "frame": {
        "type": "HTMLFrameMojit",
        "config":{
          "deploy": true,
          "child":{
            "type": "log"
          }
        }
      }
    },
    "log":{
      "client":{
        "level":"debug",
        "yui":true,
        "timestamp": false
      },
      "server":{
        "level":"debug",
        "yui":true,
        "timestamp": true
      }
    }
  }
]

1. To configure routing, replace the code in routes.json with the following:

   [
     {
       "settings": ["master"],
       "root": {
         "verb": ["get"],
         "path": "/",
         "call": "frame.index"
       }
     }
   ]
   

2. Change to mojits/log.

3. Modify your controller so that one log message uses the default log level and one log message has the log level set by Y.log by replacing the code in controller.server.js with the following:

   YUI.add('log', function(Y, NAME) {
     Y.namespace('mojito.controllers')[NAME] = {
       init: function(config) {
         this.config = config;
       },
       index: function(ac) {
         Y.log('[CONTROLLER]: entering into controller index (...)',"info");
         var today = new Date(),
         data = {
           type : 'simple',
           time : {
             hours: today.getHours()%12,
             minutes: today.getMinutes()<10 ? "0" + today.getMinutes() : today.getMinutes(),
             period: today.getHours()>=12 ? "p.m." : "a.m."
           },
           show : true,
           hide : false,
           list : [
             {
               id: 2
             },
             {
               id: 1
             },
             {
               id: 3
             }
           ],
           hole : null,
           html : "<h3 style='color:red;'>simple html</h3>"
         };
         Y.log('[CONTROLLER]: Today ' +today);
         ac.done(data);
       }
     };
   }, '0.0.1', { requires: ['mojito']});
   

4. To display your client logging, replace the content of binders/index.js with the following:

   YUI.add('logBinderIndex', function(Y, NAME) {
     Y.namespace('mojito.binders')[NAME] = {
       init: function(mojitProxy) {
         Y.log('[BINDER]: Log message from init.',"info");
         this.mojitProxy = mojitProxy;
       },
       bind: function(node) {
         Y.log('[BINDER]: Log message from bind.',"info");
         this.node = node;
       }
     };
   }, '0.0.1', {requires: ['mojito-client']});
   

5. Modify the default template by replacing the code in views/index.hb.html with the following:

   <div id="{{mojit_view_id}}" class="mojit">
     <h2 style="color: #606; font-weight:bold;">Simple Log Configuration </h2>
     <div>This app is to demonstrate the the logging level and its configuration.
       <h3> Server Configuration </h3>
       <b>Log level: </b> DEBUG <br/>
       <b>Timestamp: </b> TRUE <br/>
       <h3> Client Configuration </h3>
       <b>Log level: </b> INFO <br/>
       <b>Timestamp: </b> FALSE <br/>
     </div>
   </div>
   

6. From the application directory, run the server.

   $ mojito start

7. Open the URL below in a browser and look at the output from the Mojito server. You should see the log messages from the controller that start with the string “[CONTROLLER]:”. Notice that the two messages have different log levels.

   http://localhost:8666/

8. Open your browser’s developer console, such as Firebug, and view the console logs. You should see the client log messages from the binder that start with the string “[BINDER]”.

Source Code¶

• Simple Logging App
• Logging Configuration
• Mojit Controller
• Binder