Creating a RSS Feed Reader

Tutorial » Creating a RSS Feed Reader

In this tutorial we're going to create a rss reader with jQuery EasyUI framework.

We will use following plugins:

layout: create the application user-interface.
datagrid: show the rss feed list.
tree: show the feed channels.

Step 1: Create Layout

<body class="easyui-layout">
	<div region="north" border="false" class="rtitle">
		jQuery EasyUI RSS Reader Demo
	</div>
	<div region="west" title="Channels Tree" split="true" border="false" style="width:200px;background:#EAFDFF;">
		<ul id="t-channels" url="data/channels.json"></ul>
	</div>
	<div region="center" border="false">
		<div class="easyui-layout" fit="true">
			<div region="north" split="true" border="false" style="height:200px">
				<table id="dg" 
						url="get_feed.php" border="false" rownumbers="true"
						fit="true" fitColumns="true" singleSelect="true">
					<thead>
						<tr>
							<th field="title" width="100">Title</th>
							<th field="description" width="200">Description</th>
							<th field="pubdate" width="80">Publish Date</th>
						</tr>
					</thead>
				</table>
			</div>
			<div region="center" border="false" style="overflow:hidden">
				<iframe id="cc" scrolling="auto" frameborder="0" style="width:100%;height:100%"></iframe>
			</div>
		</div>
	</div>
</body>

Step 2: Handling events for datagrid

At this point we need to process some events triggered by users.

This example uses 'onSelect' event to display the feed content and 'onLoadSuccess' event to select the first row.

Step 3: Handling events for tree

When tree data is loaded, we need to select the first leaf node, call 'select' method to select that node. Use the 'onSelect' event to get the selected node, so we can get the corresponding 'url' value. Finally we call 'load' method of datagrid to refresh the feed list data.

Download the EasyUI example:

easyui-rssreader-demo.zip