IBM® Extensions to the Dojo Toolkit

Atom library, data store, and widgets

Atom widgets usage examples:

See the documentation package for the feed used in these demonstrations:

<?xml version='1.0' encoding='utf-8'?>
<feed xmlns='http://www.w3.org/2005/Atom' xml:lang='en-US'>
	<title>Example.com</title>
	<link rel="alternate" type="text/html" href="http://example.com/" hreflang="en" title="Example.com" />
	<subtitle type='text'>Example.com's Sample Feed</subtitle>
	<rights>Copyright Example.com</rights>
	<id>http://example.com/samplefeed.xml</id>
	<updated>2007-08-07T20:00:00-05:00</updated>
	<link rel="self" type="application/atom+xml" href="http://www.example.com/samplefeed.xml"/>
	<entry>
		<title>Test Entry #1</title>
		<id>http://example.com/samplefeed.xml/entry/1</id>
		<link rel='alternate' href='http://example.com/1.html'/>
		<summary type='html'>
			<p>This is a sample entry in our Atom feed.  It is simply a large paragraph in the summary.<p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras cursus. Aliquam eget metus sed leo lacinia 
			rutrum. Nunc lacus lacus, viverra placerat, laoreet nec, placerat vel, eros. Donec nec magna id sem commodo rutrum. 
			Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean pede. Quisque vel 
			leo. In vitae nisi. Curabitur sodales congue nibh. Maecenas ultrices ante nec ipsum. Aenean quis nibh. Aenean semper, 
			quam vitae ullamcorper euismod, arcu leo tincidunt nunc, vel pulvinar turpis dolor a elit. Praesent nonummy nunc 
			faucibus nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus laoreet, 
			ante auctor condimentum venenatis, magna quam varius elit, at feugiat dolor metus id quam. Etiam enim.<p>
		</summary>
		<author>
			<name>Test User</name>
			<email>test@example.com</email>
		</author>
		<updated>2007-08-07T04:00:00-05:00</updated>
	</entry>
	<entry>
		<title>Test Entry #2</title>
		<id>http://example.com/samplefeed.xml/entry/2</id>
		<link rel='alternate' href='http://example.com/2.html'/>
		<summary type='text'>
			This is a sample entry in our Atom feed.  It is simply a large paragraph in the summary. This is straight text.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras cursus. Aliquam eget metus sed leo lacinia 
			rutrum. Nunc lacus lacus, viverra placerat, laoreet nec, placerat vel, eros. Donec nec magna id sem commodo rutrum. 
			Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean pede. Quisque vel 
			leo. In vitae nisi. Curabitur sodales congue nibh. Maecenas ultrices ante nec ipsum. Aenean quis nibh. Aenean semper, 
			quam vitae ullamcorper euismod, arcu leo tincidunt nunc, vel pulvinar turpis dolor a elit. Praesent nonummy nunc 
			faucibus nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus laoreet, 
			ante auctor condimentum venenatis, magna quam varius elit, at feugiat dolor metus id quam. Etiam enim.
		</summary>
		<author>
			<email>test@example.com</email>
		</author>
		<updated>2007-08-07T06:00:00-05:00</updated>
	</entry>
</feed>

Three top-level widgets are included in the ibm_atom package: FeedViewer, FeedEntryViewer, and FeedEntryEditor. FeedViewer is used to view the dates and titles of entries in a feed. It can be instantiated in markup or programmatically. See the following example of creating a feed viewer declaratively:

<div dojoType="ibm_atom.widget.FeedViewer" 
	 widgetId="fv1"
	 url="samplefeed.xml"
	 entrySelectionTopic="atomfeed/entry/topic" />

Note that if the code above is put into a test page, the example is completely unstyled and simple. To fix this, pull in the style sheets from the test pages.

The FeedEntryViewer and FeedEntryEditor widgets are identical with the exception that the editor widget has controls for creating new entries and editing existing ones. The FeedEntryEditor widget can be instantiated in markup like this:

<div dojoType="ibm_atom.widget.FeedEntryViewer" 
	 widgetId="feedEditor"
	 enableMenu="true"
	 enableMenuFade="true"
	 enableEdit="true"
	 displayEntrySections="title,authors,summary"
	 entrySelectionTopic="atomfeed/entry/topic" />

Remember: The entrySelectionTopic that is common to both the FeedViewer and the FeedEntryEditor. This is the event that ties the two together. If the entrySelectionTopic attribute is defined properly on each, then the two widgets can communicate between each other and update themselves appropriately.