Carla Mott's Blog

March 2008 Archives

Using jMaki in your web apps? Get a t-shirt.

I've noticed a few web sites are using jMaki in their web apps and thought that there are probably a lot more. If you are using jMaki I'd love to here about what you are using and alittle about your application. Let me know if I can post a link to your site on the jMaki site.

Don't forget to send me ( carla dot mott @ sun dot com) your address so I can send the t-shirt. Thanks for using jMaki!

jMaki 1.1 developer release available

There's a lot of new functionality in the developer release of jMaki 1.1. Performance enhancements, new widgets, upgrades to Yahoo 2.5 and Dojo 1.0.2, documentation and the new jMaki webtop are just some of what you will find.

The team has been busy creating new widgets such as a flow widget, bread crumbs, tag cloud and carousel are new. Thanks to the awesome work by SitePen, all jMaki native widgets have 2 new themes. Default theme is kame and also available is ocean. Finally, we have updated the jmaki-charting widget lib to support Google and Yahoo charts as well.

jMaki core has some performance upgrades where CSS is injected in the page along with JavaScript code and caching can be turned on. We see a 20-30% improvement. Also there are security improvements because we use the latest json.org secure json parser and only publish events and data to jMaki managed containers.

Yahoo 2.5 and Dojo 1.0.2 toolkits have been integrated and we support both Dojo .4.3 and 1.0.2 widgets in the same page. We also have brought back and improved the widget gallery.

We want to add more and more documentation in this release. Currently we have updated the Getting Started Guide for JSP and are working on the JSF version. The PHP version will follow soon. There are some new blogs on loading blog feeds like feedburner into a widget and supporting GWT with jMaki. Also see Arun's blog, jMaki on Rails. Finally much of the website has been translated to Japanese. Of course, we will be writing more documentation before this release goes final.

Finally, we are working on a new widget called jMaki webtop. The code is not yet available but will be soon. For now we have deployed it on jmaki.com so you can play around with jmaki webtop. You will notice that the widgets in webtop are the same widgets that are available to build jMaki applications. You will also notice that events can be sent and received in webtop just like jMaki web applications. Play around with the webtop and let us know what you think.

Glassfish and jMaki at EclipseCon

Today Ludo and I spoke at EclipseCon on Glassfish and jMaki. Our talk was well attended and well received. Here is an overview of the talk and some comments.

Ludo started the talk with a discussion about Glassfish V2 and V3. He mentioned that Glassfish v2 is enterprise-centric providing clustering, load-balancing and HA support. He also talked about the world record performance numbers we're seeing, specifically the JSP container and Grizzly siting the performance and scaling improvements there. He said "You no longer need to chose between Open Source and Performance". He also mentioned that GlassFish v3 is coming and is focused on having a small footprint, being modular and fast startup. He followed with a demo of the Glassfish Eclipse plugin using the V3 preview release that is avaliable today. The GlassFish community is active and growing with 5.5 million downloads, dozens of external contributors and over 7000 members.

Then I got to talk about jMaki and demo the latest release, jMaki 1.1 developer preview. I talked about what jMaki is and why folks would want to use it. The main points were client server framework, client side runtime to bootstrap widgets and provide publish and subscribe communication bus, the server runtime to inject necessary JavaScript code into web pages and XmlHttpProxy to access external RESTful web services. I got to demo the latest jMaki release using the Eclipse plugin. I then showed jMaki webtop, one of the latest features we are working on. See http://jmaki.com/webtop and I ended the talk with a demo of jMaki running on GlassFish with Comet enabled. This is a demo that ships with the jMaki standalone bundle. I like this demot because the audience can participate and each person's activity is broadcast to all who are connected.

Attendees wanted to know when GlassFish v3 will be available and they liked the demos especially the comet demo which I was told was pretty impressive.

I hope we impressed upon others that Sun is committed to providing plugins to Eclipse.

How to load blog feeds into jMaki widgets

Recently I wanted to load data from a blog feed into a jMaki widget. Here I describe how to do just that.

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.

This work is licensed under a Creative Commons License.