Skip to main content

How to load blog feeds into jMaki widgets

Posted by carlavmott on March 7, 2008 at 12:12 AM PST

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 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.

             function processTAFeed(_in) {
             window.taItems= _in;
         <script type="text/javascript"

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">
    <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 id="${uuid}_template" style="display:none">
        <div  class="jmk-blocklist-item">
            <a href="@{link}">@{title}</a>

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
    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.

Related Topics >>