Creating an AOL OpenBlog Reader: Part 1

Following the path of working with the AOL OpenBlog API, today kicks off a two part series on creating a blog reader application using Ext JS, a powerful JavaScript library which simplifies AJAX development through the use of reusable objects and widgets.

Ext JS started as a group of extensions to the Yahoo! User Interface library (YUI) by Jack Slocum. With it's most recent release of version 2.0, it's one of the simplest and most powerful JavaScript libraries on the market.

In this first part of our two part series, I'll walk through the process of creating the framework of the application. Today we'll concentrate more on Ext JS development with the creation of all the core widgets that make up the blog reader. The next post will cover a simple web service we'll need written in ColdFusion and then skinning our application using custom styles we can apply to our Ext JS UI components.

Perhaps the best place to start is to show you what we're about to create in just under 100 lines of code:

To get going with Ext JS, you'll first need to download it. Visit extjs.com and follow the links to download the latest version, 2.0. After extracting it to your application root, you should have the directory ext-2.0 available to you. This is where we'll be hooking in the core Ext JS scripts and styles during the development of our application. Create a new ColdFusion template as shown below:

<html>
<head>
<title>AOL OpenBlog Reader</title>

<!--- Ext JS styling --->
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" />

<!--- Ext JS core development scripts --->
<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0/ext-all-debug.js"></script>

<!--- blog reader script --->
<script type="text/javascript" src="blogReader.js"></script>

<style type="text/css">body{ margin: 20px; }</style>

</head>

<body>

	<!--- container for the blog reader --->
	<div id="grid-aolBlogs" />

</body>
</html>

The style and script links above are generally what you'll always use for development. They contain all the debugging and styling you will want to develop and prove concepts. Along with the Ext JS library is our own JavaScript file we'll use to develop our reader using Ext JS. Finally to render the reader, we simply need to define a <div /> tag to be used as the container.

After you've linked in these key assets, enter the code below in your blogReader.js file. This will be used not only to start development of the blog reader but to test our installation of Ext JS.

Ext.onReady( function() {
	alert( "Ext JS installed successfully!" );
} );

If you run the page and see the alert, you're good to go. Ext.onReady is a core function of Ext JS and should be used when you are relying on a complete DOM to create your application. Since this is Ext-specific, it's a perfect way to test the installation to ensure we're ready to go. Continuing with the development of the reader, we'll start by creating the top toolbar section of the application. Replace the alert() in the onReady block with the code below:

// configure objects to attach to the top toolbar
// text field used to query for all public blogs
// for a given screenname.
var txt_screenname = new Ext.form.TextField();

// button used to invoke the blog query action
var btn_submit = new Ext.Button(
    {
        text: "Go!",
        handler: function(){
            // get public blogs
        }
    }
);

// combo box, maintains the list of public blogs
// for a given screenname.
var cbx_blogs = new Ext.form.ComboBox(
    {
        editable:      false,
        displayField:  "title",
        mode:          "remote",
        triggerAction: "all",
        emptyText:     "Select a blog..."
    }
); 

// create the top toolbar of the grid.
var tb_gridHeader = new Ext.Toolbar(
    [
        "AOL Screenname:",
        txt_screenname,
        btn_submit,
        cbx_blogs
    ]
);

We first create instances of the objects which will make up the top toolbar separately. A text field is created which will be used to enter an AOL screenname to determine the public blogs the user may have. Next, a button is created to invoke the blog query functionality. Finally, a combo box is created which will be used to maintain the listing of public blogs returned for the given AOL screenname. Once the user selects the blog from the combo box, blog entries will populate in the grid in the center section of the blog reader. All the objects are attached to an instance of Ext.Toolbar as an array of objects.

To construct the grid, we'll use the code below. Since we currently don't have a service built yet, we're using dummy data:

// hard-coded data store used to demonstrate grid population
var ds_dummyData = new Ext.data.JsonStore(
    {
        root: "entries",
        fields: [ "authorName", "title", "content", "published" ],
        data:   {
            "entries": [
                            { "authorName": "bricemason",
                              "title":      "Some blog entry",
                              "content":    "Some blog content",
                              "published":  "2008-01-11 11:52:06" },
                            { "authorName": "bricemason",
                              "title":      "Another blog entry",
                              "content":    "more blog content",
                              "published":  "2008-01-11 11:52:07" },								  
                       ]
        }
    }
);

// create an empty bottom toolbar for the grid.
// this will be used for reading blog entries.
var tb_gridFooter = new Ext.Toolbar( { height: 150 } );

// create the grid 
var grid_aolBlogs = new Ext.grid.GridPanel(
    {
        store:    ds_dummyData,
        columns:  [
        { header: "Posted By", width: 150, sortable: true, dataIndex: "authorName" },
        { header: "Title",     width: 200, sortable: true, dataIndex: "title"      },
        { header: "Published", width: 200, sortable: true, dataIndex: "published"  }
                  ],
        loadMask: true,
        width:    555,
        height:   400,
        stripeRows: true,
        tbar:     tb_gridHeader,
        bbar:     tb_gridFooter,
        renderTo: "grid-aolBlogs"
    }
);

We start off by defining a data store which expects data in JSON format. Eventually, we'll be expecting this to be populated using a remote service but for now we have defined some data manually for the sake of filling in the grid control. The next declaration defines a simple bottom toolbar for our grid control. This will be used for populating the content of each blog entry when a row item is clicked in the grid. The final block of code defines the grid, using all the objects we've defined ahead of time. We configure the grid to work with our hard-coded store, mapping the columns with data items in the store using the dataIndex field. The top and bottom toolbars are defined as part of the grid using the tbar and bbar options respectively. Finally we define what element ID we want to render the control to.

Check back on Tuesday when we walk through the most important task of creating the web service used to query the AOL OpenBlog API for data to feed in to our application. For now, study up and explore the uses of Ext JS using the resources below:

Topic Centers

Submit Post

nevamind

nevamind

nevamind