Building Widgets ASP.NET

Now that you’ve seen how to implement WidgetContainer, let’s look at how you build the widgets it hosts.First, we’ll create a simple widget to display Flickr photos, followed by another widget to display RSS and Atom feeds.

Building a Flickr Photo Widget

Let’s look first at a simple Flickr photo widget that downloads photos from Flickr and displays them in a 3 × 3 grid, as shown in Figure

The Flickr widget downloads the Flickr photo stream as XML and parses using LINQ to XML and the photo grid is dynamically rendered

The Flickr widget downloads the Flickr photo stream as XML and parses using LINQ to XML and the photo grid is dynamically rendered

The wid get downloads Flickr photos as an XML feed from the Flickr web site and then renders a 3 × 3 grid with the pictures.

You need to first obtain an application key from the Flickr developer zone and pass it at the end of the URL.The key I have embedded inside the project may not work if the request quota has already been exceeded.

The URL returns recent Flickr photos uploaded by the user as XML:

However, the XML does not contain the URL of the photo file. It needs to be builtdynamically.

The first step is to down load and parse the XML using LINQ to XML,which is available in .NET 3.5.Here’s an easy way to prepare a XElement from an URL:

var xroot = XElement.Load(url);

Next we convert each photo node inside the XML to an object of the Photo Info class for convenient processing:

This will produce one Photo In fo object for each <photo> node in the XML.Paging support has been added to it to select nine photos at a time by using the Skip and Take functions:

This takes only nine photos from the current pageI ndex.Page index is changed when the user clicks the next or previous links. The Skip method skips the number of items in the XML, and the Take method takes only the specified number of nodes from XML.

A 3 × 3 HTML table renders the photos from the collection of PhotoInfo objects:

The reasoning behind using Html Generic Control instead of Html Link is that Html Link does not allow you to add controls inside its Controls collection.This is a limitation of the Html Link class in ASP.NET 2.0.

The Photo Page Url property of PhotoInfo class gives the URL of the photo. There’s no special logic inside the PhotoInfo class besides the public properties:

When the wid get loads, it checks whether it’s a first-time load or a post back.If it’s a first-time load, then it fetches the XML photo feed from Flickr and stores it in the cache.When it’s a post back, it renders the photos from the cached XML.

First the widget loads its UI state, down loads the Flickr photo XML, and shows the pictures in the grid.But when the page is having a postback,the widget just shows the last pictures.The reason you need to render the pictures again on post back is that the pictures are shown dynamically and are not part of the HTML markups that ASP.NET creates.If they are declaratively specified in the .ascx file, then ASP.NET would have created that itself.

The content of the FlickrWidget.ascx page is the following:

In the Visual Studio designer, the Flickr widget web control looks pretty simple, as shown in Figure.

There’s a blank panel in the middle of the control that shows the pictures. The Prev and Next LinkButtons do the pagination. The radio buttons are part of the settings area that you see only when you click on the edit link on the widget header area, as shown in Figure

At design view, the widget is nothing but a regular web control; use Visual Studio’s Visual Designer to design the UI,

At design view, the widget is nothing but a regular web control; use Visual Studio’s Visual Designer to design the UI,

Settings contain options to customize a widget, such as different types of photo streams from Flickr

Settings contain options to customize a widget, such as different types of photo streams from Flickr

Flickr widget UI controls

Let’s explain what the controls do on the Flickr widget UI.The simplest part is the pagination where the click handlers of the Previous and Next LinkButtons do the paging:

When a user changes the type of photo to show, this information is stored in the widget’s state. The widget’s state is simple XML in this format:<state><type>MostRecent</type><tag>Pretty</tag></state>

The state is loaded using LINQ to XML’s XElement class:

This is a read-only property that loads the widget instance’s state XML and returns an XElement reference to it.The host that is the widget container for this widget returns the state content.If no state was stored before, it creates a default state XML with default selections.

Reading and writing to individual properties in the state is very easy when we have a XElement object to work with:

After changing the state,it is saved permanently in the database by calling the IWidgetHost.SaveState function. Here’s the code that collects current settings from the UI and stores in widget instance’s state:

Whatever is stored here is stored permanently in the database. If the user closes the browser and visits again, these states will be retrieved from the database. However, temporary state variables, like PageIndex, are not stored as state. They are stored in the ViewState:

So far we made a regular ASP.NET web control. This control becomes a widget when the IWidget interface is implemented on it. The implementation is straightforward:

void IWidget.Init(IWidgetHost host)

Most of implementations are blank because there’s nothing special to do here other than show and hide the settings area.

The Flickr photo widget is now ready. Put it in the widgets folder, create a row in widget table in the database,and it’s good to go.The user will see the widget listed in the Add Stuff area, as shown in Figure,and can add it to the page.

Widget table entry for the Flickr photo widget

Widget table entry for the Flickr photo widget

The widget is marked as IsDefault=True, so it is added automatically to the first page for first-time visitors.

Building an Atom or RSS Widget

In this section, you will see how to build a simple RSS widget, like the one shown in Figure

The RSS widget shows feed items as links

The RSS widget shows feed items as links

RSS is arguably the most popular widget for a start page because it serves the core functionality of web portals,to aggregate content from different sources. Users use RSS to read news and blogs,and to subscribe to groups, bulletins, notifications,and so on.Nowadays RSS is an almost universal format for content syndication. It is nothing but a fixed and formatted XML feed that is universally agreed upon. Atom,which is another format, is also quite popular.So, the widget you will make will be able to parse both RSS and Atom format feeds.

The RSS widget stores the URL and the number of articles to show on the widget inside its State.Just like a Flickr photo widget, you can customize the number of items you want to see from the settings area.You can also change the feed URL and read a different feed.State handling is handled the same way as a Flickr photo widget,by storing the count and feed URL inside State.

The UI contains the settings panel and a DataList that is bound to a collection of feed items at runtime, as shown in Example

RSS Widget .ascx content

The DataList shows a list of hyperlinks where each hyperlink is bound to a title,description, and a link property at runtime. From the code, a projection with properties named title, description,and link is bound to the DataList. The function Show Feeds loads the feeds using LINQ to XML and then converts the feed XML to a projection using a LINQ expression, as shown in Example

Loading feeds and converting to a projection

Loading feeds and converting to a projection(continued)

The ShowFeeds function first loads the XML feed from the feed URL usin Http Web Request. Then it passes the response stream to an XmlReader, which, in turn, gets passed into a XElement.Load function. XElement.Load loads the XML, parses it,and builds an XElement object model of nodes and attributes.Based on the XML feed format (RSS or Atom),different type of nodes and attributes appear in XElement.So,a LINQ expression converts both types of object models to a projection with title,description, and link properties. Once the projection is prepared,it is bound to the FeedList DataList control. The DataList binds one hyperlink for each item in the project and thus shows the feed items.

Now that you have learned how to build wid gets, you will learn some frame work level challenges that need to be solved to make wid gets work properly on the Start page.Some of these challenges are handling post back in different scenarios, implementing security, and handling Profile objects from web services.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

ASP.NET Topics