The Beginner’s Guide to Using Ext with Delicious and Obtaining a Beautifully Interactive Site in no Time

In two relatively easy steps I will show you how you can integrate Delicious bookmarks into your sites. A little HTML and JavaScript knowledge is useful. If you have questions, feel free to leave a comment or mail me. First take a look at my improved prototype site: Recipebook 2.0. The grid featuring recipes is what we’ll be creating in this post. Previous coverage of the site’s architecture can be found here.

Time required: about an hour if you want to try and experiment

As I mentioned, the whole process involves 2 steps:

1. Getting the data
2. Displaying the data

There are many ways to do both, so I encourage experimentation.

Step 1. Getting the data

The data we want is a list of recipes stored as delicious bookmarks. You can find the “normal” delicious page with my recipes right here. To use this data inside an Ext application, we use the Ext.data package whose usage is shown in the image above. Don’t panic just yet, it looks complicated, but it really isn’t.

The store needs 2 components, firstly a proxy to get the data from the Internet and secondly, a reader that knows how the data is structured, and can parse it. For this the reader needs a record definition. All of this, boils down to only a few lines of code:

deliciousStore = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({
          url : 'http://feeds.delicious.com/v2/json/pbackx/recipes'
        }),
        reader: new Ext.data.JsonReader({
          }, Ext.data.Record.create([
              { name : 'url',   mapping : 'u' },
              { name : 'title', mapping : 'd' },
              { name : 'description', mapping : 'n'}
          ])
        )
      });

A few things worth noticing:

• The ScriptTagProxy is used. This is important because this avoids cross domain warnings in your application. This is a long subject, so I’m keeping this for later, or you can Google it yourself. Basically if you plan to use any URLs that are not withing your own domain (in this case I use delicious.com from recipebook20.com), you need a ScriptTagProxy.
• I build the URL based on the Delicious feed page. It will get the first 15 bookmarks from user “pbackx” (me) with tag “recipes” and return it in the JSON format.
• The reader is a JsonReader, exactly because the format downloaded from Delicious is JSON.
• The record contains the mappings. I figured this out by entering the URL in a browser and looking at the output. It’s not the most beautiful code in there, but it is pretty straightforward to figure it out. I mapped the fairly nonsensical name “u”, “d”, and “n” onto “url”, “title”, and “description”. If I use the store in my application, I can use the much more meaningful versions.

Now it’s just a matter of calling

deliciousStore.load()

to get all the data into your application.

Step 2. Using the data.

Once you got data in a store, there are many things to do with it, here I’ll show you how to get it in a GridPanel. Here is a simplified version of the GridPanel I use:

recipesGrid = new Ext.grid.GridPanel({
        height:300,
        width:300,
        title:'recipes',
        store: deliciousStore,
        cm: new Ext.grid.ColumnModel([{
          header: 'Link',
          dataIndex: 'url',
        },{
          header: 'Recipe name',
          dataIndex: 'title',
        }])
      });
      recipesGrid.render('recipeContent');

When this piece of code is executed, it will create a GridPanel that uses the store we defined as its datasource. There are 2 columns, one showing the URL and another the title (the mapping was also defined in the store). Obviously there are many parameters to tweak the display, but I will leave that up to you.

See it in action.

If you want to watch all this in action, I suggest you install Firefox and the Firebug extension. Open the Firebug display and go to recipebook20.com. The tabs with interesting information are “Net”, where you will see exactly which Delicious feeds are loaded and “Script”, which allows you to look at the full JavaScript code.

If you want to get started from a blank slate, here’s a zip file with only the code that was discussed in this post. This file does not include the Ext library, you will have to download that one yourself on the Ext site and you might need to adapt the path in the index.html to get it to work.

Happy experimenting.