The feed I want to read is coming from The Aquarium. I want to view the the title and the first 60 characters of each blog entry using the jMaki blockList widget since it automatically handles paging. The Aquarium uses Feedburner to publish blog entries so I looked for a Feedburner API to read the feed. It also needs to support https to avoid security notifications since the page will be on a java.net project. I found an API that returns the data in JSON format which allows me to provide a callback function to handle the data. This is exactly what I needed since jMaki widgets expect data in JSON format.

To get the data I added the following call to my page.

        <script>
             function processTAFeed(_in) {
             window.taItems= _in;
         }
           </script>
         <script type="text/javascript" 
src="https://api.feedburner.com/format/1.0/JSONP?uri=TheAquarium_en&callback=processTAFeed">
             </script>

The data is now available in the variable taItems in the window object. Next I want to get the data in the widget. First I add the tag to the page that specifies the widget and then I use the value binding option to pass the data. Using the @ notation tells the jMaki client runtime that following is a variable that needs to be resolved so the contents of window.taItem is placed in the value attribute. The tag looks like:

  <a:widget name="jmaki.blockList" 
       args="{filter : 'jmaki.widgets.jmaki.blockList.TAFilter'}" 
       value="@{window.taItems}"  />
                     

Notice that I specified the filter jmaki.widgets.jmaki.blockList.TAFilter. Filters are called by the jMaki client runtime and allow me to manipulate the data before it is passed to the widget.

Before looking at the filter, let's look at the template file for this widget. The blockList widget displays data in a repeating format as specified by the template in component.htm. I updated that template to include the data I want to display and wrote a filter to load the values in the template. Specifically I will replace link, title and shortContent.

<div id="${uuid}" class="jmk-blocklist jmakiBackround">
    <div id="${uuid}_content" class="jmk-blocklist-content">
        <ul id="${uuid}_list">
        </ul>
    </div>
    <div id="${uuid}_nav" class="jmk-blocklist-nav">
            <div id="${uuid}_previous" class="previous">Previous</div>
            <div id="${uuid}_mid" class="mid"></div>
            <div id="${uuid}_next" class="next">Next</div>
    </div>
    <div id="${uuid}_template" style="display:none">
        <div  class="jmk-blocklist-item">
            <a href="@{link}">@{title}</a>
            @{shortContent}<br/> 
        </div>
    </div>
</div>

Now let's look at the filter code as the final step.

jmaki.widgets.jmaki.blockList.TAFilter = function(_in) {
    var maxLength = 60;
    var _rows = [];

    for (var _i=0; _i < _in.feed.items.length;_i++) {
      var _des = _in.feed.items[_i].body;
      
        var rex = new RegExp("\\\\n", "g");
        _des =  _des.replace(rex," ");

        rex = new RegExp("\\\\\"","g");
        _des =  _des.replace(rex,"\"");
        var rex2 = new RegExp("<p>.*?</p>");
        var content = _des.match(rex2)[0];

      if (content.length > maxLength) {
          content = content.substring(0, maxLength) + "... 
";
      }
      var row = {      
         title : _in.feed.items[_i].title,
         link : _in.feed.items[_i].link,
         date : _in.feed.items[_i].date,
         body : _des,
         shortContent : content
      };
      _rows.push(row);
    }
    return _rows;  
}

The data returned from the feed has several properties such as link, date, title, body. The link and title properties are used without modification. The body property contains the entire blog but recall that I only want to display the first 60 characters. With Greg's help we figured out how to normalize the data and pickup the first paragraph using regular expressions. The blockList takes each row array and creates an entry in a list. The filter needs a bit more work because there is the case where a link tag can appear in the first 60 characters and the closing tag is after the first 60 characters.

Support for the value binding attribute has been available in jMaki since the 1.0 release. As a result of this exercise, we'll create a feedReader widget. ]]> 2008-02-13T00:13:21Z 2008-02-13T00:13:14Z tag:weblogs.java.net,2008:/blog/carlavmott/259.9186 2008-02-13T00:13:14Z

 <a:widget name="Ext.grid"
    value="{columns : [
     { label : 'Title', id : 'title'},
     { label :'Author', id : 'author'},
     { label : 'ISBN', id : 'isbn'},
     { label : 'Description', id : 'description'}
     ],
     rows : [
     { title : 'Book Title 1', author : 'Author 1', isbn: '4412', description : 'A Some long description'},
     { id : 'bar', title : 'Book Title 2', author : 'Author 2', isbn : '4412', description : 'A Some long description'}
     ]
     }" />

Building on the Get Widget Data Sample that is part of the jMaki bundle, I added Google Gears so that it will be called when the save icon of the editor is clicked. The data in the editor is saved locally each time the editor save button is clicked. I kept the functionality of sending the data back to the server by simply adding a 'submit' button which does a jmaki.doAjax call sending the contents of the editor to a server side component.

If you are using NetBeans you can install the Google Gears Extension comp lib and add the appropriate code by dragging from the palette. To install a comp lib go to tools -> palette -> add jMaki library. If you are not using NetBeans then follow the instructions on Greg's blog on adding google gears extension to you app.

In order to save the editor contents to the local storage add the following code (in addition to the extension handler) to the onSave handler in the glue.js file.

// map topics ending with  /onSave to the handler

jmaki.subscribe("*onSave", function(args) {
    // empty the table then save it
    jmaki.publish("/google/gears/execute",
    { query : 'delete from jmaki',
     callback : function() {
       jmaki.log("Removing Previous Values");
       jmaki.publish("/google/gears/execute",
          { query : 'insert into jmaki values (?, ?)',
             args : [args.value, new Date()],
         callback : function() {
             jmaki.log("Saved " + args.value);
         }
        });
       }
    });
});

This handler gets called each time an onSave event occurs and saves data locally. A real app may use a specific topic for the editor in case other widgets in the application fire an onSave event. In this example I clear the local store each time I save.

I add a button to the the page which will push the contents of the editor to a server side components which can then save the data in a data base there. I've included the code snippet for the button and the editor widgets here:

 <div id="main">
                <div id="leftSidebar">
                    <a:widget name="yahoo.button" value="{label : 'Submit contents', action : {topic : '/submitData'}}"/>
                  
                    
                </div> <!-- leftSidebar -->

                <div id="content" style="height:400px">
                    
                    <a:widget name="dojo.editor" id="myeditor" value="@{window.editorData}" />

                </div> <!-- content -->       
            </div> <!-- main -->

In PHP the code looks like:

 <div id="main">
                <div id="leftSidebar">
                    <?php
  addWidget( array ( "name" =>"yahoo.button" value=>"{label : 'Submit contents', action : {topic : '/submitData'}}" )); 
?>
                  
                    
                </div> <!-- leftSidebar -->

                <div id="content" style="height:400px">
                    
                    <?php
  addWidget( array ( "name" =>"dojo.editor" id=> "myeditor" value=>"Edit this value." )); 
?>

                </div> <!-- content -->       
            </div> <!-- main -->

Notice that I use the id attribute on the editor widget tag. I did this because it is easy to get the widget later in the handler. I also set the topic in the button widget tag so I can easily set the handler.

I now need to add a handler for the button which sends data back to the server. The complete code for glue.js is listed below:

jmaki.namespace("jmaki.listeners");

jmaki.subscribe("/submitData", "jmaki.listeners.editorListener");

jmaki.listeners.editorListener = function(args) {
    var editorId = jmaki.getWidget('myeditor');
    var contentValue = editorId.getValue();
    if ( typeof contentValue != 'undefined' ) {
        jmaki.log("Editor content=  " + contentValue);
        // send data back to server
         jmaki.doAjax({method: "POST",
                               url: "Service.jsp",
                               content: {message: contentValue },
                               callback: function(_req) {
                                   // handle any errors
                               }
                           });
    } 
};

// map topics ending with  /onSave to the handler

jmaki.subscribe("*onSave", function(args) {
    // empty the table then save it
    jmaki.publish("/google/gears/execute",
    { query : 'delete from jmaki',
     callback : function() {
       jmaki.log("Removing Previous Values");
       jmaki.publish("/google/gears/execute",
          { query : 'insert into jmaki values (?, ?)',
             args : [args.value, new Date()],
         callback : function() {
             jmaki.log("Saved " + args.value);
         }
        });
       }
    });
});

jmaki.subscribe("/jmaki/runtime/extensionsLoaded", function() {

  jmaki.publish("/google/gears/execute", 
    { query : 'select * from jmaki order by Timestamp desc',
     callback : function(_rs) {
         if (typeof _rs != "undefined" &&
             typeof _rs.isValidRow != "undefined" &&
             _rs.isValidRow()) {
             // set data on the global window object for later access
             if (typeof _rs.field != "undefined") window.editorData = _rs.field(0);
             else window.editorData = "";
             jmaki.log("Loaded Editor Data: " + editorData);
         } else {
             window.editorData = "";
             jmaki.log("No data available");
         }
         jmaki.log('done');
     }
    });
    
});

The code above shows how I used the settings in the tag to access the editor widget and also send data to the server. When the 'Submit contents' button is clicked the function jmaki.listeners.editorListener is called. That function looks up the editor widget using the id that we set on the widget tag. It then calls a function in the wrapper that returns the contents of the editor. The jmaki.doAjax call send the data back to a server component called Service.jsp.

That's it. I have created a war file of the demo app and posted here so you can see working app. ]]>