Building a Client-Side Flickr Widget - ASP.NET

The client-side Flickr widget is developed following the same principles as the clientside RSS widget.The server-side code does not fetch the Flickr HTML;instead,the client-side class does this via the Proxy.Get Xml method.It downloads the entire Flickr feed’s XML to the client, which allows the client-side class to offer paging functionality through all the photos it received right on the browser without making any asynchronous post backs or proxy calls.The user can look through the photos very quickly,and the returned XML is cached on the browser for 10 minutes. Sub sequent visits within 10 minutes delivers the photo’s XML from browser cache, and the widget loads instantly on the client without requiring any asynchronous post back or proxy calls.

The client-side class Fast Flickr Wid get is in the same format as the Fast Rss Wid get class.It’s available in Wid getsFast Flickr Wid get.js(see Example).

Constructor of load function of FastFlickrWidget

Constructor of load function of FastFlickrWidget(continued)

It takes the Flickr feed URL,a container div ID, and the next and previous link ID.These links are needed because the class toggles previous/next links based on page index during paging.

The showPhotos function (shown in Example) does all the work for creating a 3 × 3 table, images, and hyperlinks for the photo items.

The showPhotos function inFastDomainWidget.js

The showPhotos function inFastFlickrWidget.js (continued)

This is basically a direct convert of the server-side Flickr photo widget’s C# code to equivalent JavaScript code.You will see some reference to the Utility class in Java Script.It’s a custom-made class that has some handy JavaScript functions likedisplaying/hiding UI elements, dealing with DOM elements in a cross-browser fashion,and more.The Utility class is defined in the MyFramework.js file, which is available at the web root of the project.

The server-side web control contains minimal UI besides the settings panel.It contains an empty container and the previous/next links (see Example ).


In Page_Load event’s code behind class the FastFlickrWidget JavaScript class is constructed with parameters from State (shown in Example ).It also injects some script on the previous/next link’s click event so that it fires the client-side class’s previous and next function.

FastFlickrWidget web control’s Page_Load event

FastFlickrWidget web control’s Page_Load event (continued)

Page_Load event produces the necessary script block to instantiate the FlickrRssWidget class on the client and then fires its load function.Just like the RSS widget,it calls the client-side class’s load function when the OnPreRender handler code executes so that after asynchronous postback, the JavaScript can refresh the UI based on new settings (shown in Example ).

FastFlickrWidget web control’s OnPreRender event

The following are some benefits of the client-side widget over the server-side version:

• ViewState is not delivered to client during the first load or asynchronous postback because there’s almost no UI element.

• The Flickr photo XML is cached on the browser and saves roundtrips to the network.

• The proxy’s server-side caching (e.g.,thousands of users requesting the same interesting photos will not make thousands of calls to Flickr).

• Paging through photos is instant because it is done entirely on the client side, which makes this version a lot faster.

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

ASP.NET Topics