Creating an RSS Feed Reader App (Part 2)

Presto makes it easy to create applications that utilize enterprise data and services. This 2-part article discusses how to create a simple enterprise App using Presto Mashups and jQuery.  The example that will be covered throughout the article is the RSS Feed Reader App.

The RSS Feed Reader App displays a set of tabs representing available feeds when the App is rendered.  The first tab is selected by default and feeds are rendered when a tab is selected.  You can follow along with the article by searching for “RSS Feed Reader” in the search box of your Presto server.

Part 1 covers how to display dynamic tabbed content in your App.  It provides the steps to create an App JavaScript class, discusses how to use App properties, and demonstrates how to render content based on properties. Part 2 covers displaying RSS feeds within your App.  It provides the details necessary to retrieve feed data from a Mashup and demonstrates how to render Mashup data using Presto DataTable and RSS components.

Give your App Behavior with Event Binding

Adding behavior to our App requires that we bind event handlers to DOM elements.  As we saw in part 1, the jQuery tabs function makes it easy to bind a handler function to the show event.  The show event is fired when a tab is selected.

The handler function receives an event object representing the event that fired and a ui object representing the selected tab.  In this case, we are interested in the index of the tab selected which is passed to our _tabShowHandler method.

The rssServiceIdIndex is used to determine the serviceId of the RSS Mashup associated with the tab selected.  We then retrieve a jQuery object representing the <div> element containing the tab's content.  The jQuery is method allows us to evaluate the :empty expression to determine if the RSS feed has already been retrieved and rendered.  This check avoids additional delay if the user returns to a previously selected tab.  If the tab content is empty, we retrieve the RSS feed and render the results.

Render App Content on Demand

When a tab is shown, we want the content from the appropriate RSS Mashup to be rendered.  The serviceId provides the unique service identifier for the Mashup we intend to retrieve RSS feed data from.

The method first retrieves a jQuery object representing the <div> that we generated in part 1 to contain the tab content.  We then get a connection from the mashlet.getConnection() method in order to retrieve the apiUrl and construct the uri for our request.  When selecting the ArtimaArticles tab in our example, the uri variable would be initialized with the following.

Notice that the uri refers to the same resource as our resource URL in part 1.  The uri is defined with the unique serviceId according to the tab selected and the operation (getFeed) we wish to execute.  We then initialize a hash that represents the prestoRequest that will retrieve our mashup data.  The prestoRequest hash provides the request details necessary to enable Presto JavaScript components to retrieve and render Mashup data.

Rendering Feeds Using DataTable and RSS Components

Presto provides a number of JavaScript components that make it simple to render Mashup data.  The Presto.DataTable uses the API we generated to retrieve Mashup data for Presto UI components.  In our example, we use the Presto.view.RSS component to display RSS feed data.

The Presto.view.RSS component requires the rss library which is defined in our App specification. 

Once this requirement is met, the _renderRssContent method can utilize these components to render the RSS feed data

The method first instantiates a Presto.DataTable instance with the api we created.  We then create a Presto.view.RSS component instance with the dataTable to populate the feed data and the tabContent jQuery object.  The Presto RSS component that appends the feed content is generated to the provided tabContent instance.  Next, the load method is invoked on the dataTable.  This retrieves the RSS Mashup data which is then rendered by the Presto RSS component. Finally, the RSS component renders the feed data within the tabContent.

When the RSS Feed Reader App is viewed in your browser, the feed content is rendered as shown in the following figure.

That concludes part 2 which demonstrated the ease of rendering RSS feeds in an App using Presto and jQuery. The completed App can now be included in any HTML page, iGoogle, or even Sharepoint by using the provided Presto App embedding capabilites.  Simply check out the “Embed” toolbar when accessing the RSS Feed Reader App for details.