Skip to main content

Loading data into jMaki widgets

Posted by carlavmott on April 16, 2008 at 5:22 PM PDT

I've gotten a few questions about how to get datainto jMaki widgets. This blogs describes the different ways in jMaki to load data into widgets.

Let's look at the JSP tag for including a jMaki accordionMenu widget in your web application.

 <a:widget name="jmaki.accordionMenu"
      value="{menu : [
       {label: 'Links',
            menu: [
                { label : 'Sun.com',
                  href : 'http://www.sun.com'},
                { label : 'jMaki.com',
                  href : 'http://www.jmaki.com'}
                ]
       },
       {label: 'Actions',
            menu: [
                { label : 'Select',
                  action :{topic: '/foo/select',
                         message: { targetId : 'bar'}}
                },
                { label :'Set Content',
                  action :{topic: '/foo/setContent',
                         message: { value : 'test.jsp'}}
                }
                ]}
                ]
       }" /> 

jMaki uses the attributes value and service to pass data to the widgets wrappers. The value attribute is used when the data is located in the page itself and therefore static. We use this feature in the code snippet that is dropped into a page when using an IDE so we don't have to provide a server side component just to get the widget to render correctly. The code snipet allows users to start with a working example which can be easily modified to learn more about the widget and the data model for that widget.

In the tag above the value attribute is set equal to the JSON representation of the data described in the data models for that widget. The data model pages describe the format for the different widgets in jMaki. All the code snipets provided for the IDE follow the data models for the supported platforms, Java, PHP and Ruby.

The value attribute can also be passed a client side value expression. I described how to use the value expression in my last blog,
How to load blog feeds into jMaki widgets
. Basically, the data is loaded into a local JavaScript variable which is assigned to the value attribute using the "@" character.

Often you will want to load data that is not statically located in the page and in jMaki this is done through the service attribute. The next example shows how to get data from a server side component in your application. The tag above now becomes:

 <a:widget name="jmaki.accordionMenu"
      service="data.jsp" />   

As a quick example I will put the data I want to load into the file data.jsp as follows:

 {menu : [
       {label: 'Links',
            menu: [
                { label : 'Sun.com',
                  href : 'http://www.sun.com'},
                { label : 'jMaki.com',
                  href : 'http://www.jmaki.com'}
                ]
       },
       {label: 'Actions',
            menu: [
                { label : 'Select',
                  action :{topic: '/foo/select',
                         message: { targetId : 'bar'}}
                },
                { label :'Set Content',
                  action :{topic: '/foo/setContent',
                         message: { value : 'test.jsp'}}
                }
                ]}
                ]
       }

What really is happening here is when data.jsp is processed non-JSP commands are echoed out as they appear in the file. As a result the data I need is returned in JSON format which is what the widget is expecting. This is just an easy way to see how to use the service attribute without having to write a server side component. In reality, you will have to collect the data, format in JSON and print it out. The jMaki 1.1 release contains Java helper classes to create JSON object literals. You can also take a look at Jennifer's blog. The main point is that getting data from a server side component is done using the service attribute.

In PHP the same thing can be done as follows:

 <?php  addWidget( array("name" => "jmaki.accordionMenu",
    "service" => "data.php"
        ));
?>

The data is in a file called data.php (notice it looks just like data.jsp).

{menu : [
       {label: 'Links',
            menu: [
                { label : 'Sun.com',
                  href : 'http://www.sun.com'},
                { label : 'jMaki.com',
                  href : 'http://www.jmaki.com'}
                ]
       },
       {label: 'Actions',
            menu: [
                { label : 'Select',
                  action :{topic: '/foo/select',
                         message: { targetId : 'bar'}}
                },
                { label :'Set Content',
                  action :{topic: '/foo/setContent',
                         message: { value : 'test.php'}}
                }
                ]}
                ]
       }

The jMaki runtime passes the attributes from the tag to the widget constructors. In the case of the service attribute, the widgets make a jmaki.doAjax call to retrieve the data when the widget is initialized. To update the data once the widget has been initialized, you can write a handler which makes additional jmaki.doAjax calls and sends that data to the widget. See my blog on How to implement data pagination in jMaki tables for an example.

jMaki also provides an XMLHttpProxy so you can safely and easily access RESTful Web Services outside the application domain. To access a service through the proxy you use the service attribute too. In this case the tag looks like:

<a:widget name="jmaki.accordionMenu"
      service="/xhp?id=rss" />

By design you will need to use a token key to identify the service to access. The token key is specified in a file called xhp.json in the resources directory. An entry in the xhp.json file looks like:

 {"id": "rss",
      "url":"http://weblogs.java.net/blog/ludo/index.rdf",
      "xslStyleSheet": "rss.xsl"
     } 

The id is "rss" and this entry specifies the name of the style sheet to apply to the returned data by the proxy. In this example, the data is coming back as XML so we want to convert it to JSON. The current style sheet recognizes RSS 1, RSS2, ATOM 1 and ATOM 2 and converts the XML data to JSON. The style sheet is called rss.xsl and is called by the proxy server before the data is handed to the widget.

See Arun's blog jMaki - Accessing External Services for more details on how to access external services using jMaki.

Related Topics >>

Comments

I tried the examples using RoR. The data returned by the file is dumped directly on to the page - the menu does not load it - in fact if I use service attribute the apps url gets changed (it should call the service in an ajax way and the data returned should be loaded by the menu directly). Would you let me know the correct way to use this in the RoR environment?