Generic Widgets

There are few Generic Widgets supported by my web personalized start page system. Besides entire Widget API it is possible to use these generic widgets for your own widget enhancements. Currently there are three generic widgets that can be used for ascribed purposes: Feed, Tabbed Feed and Search.

To use one of generic widgets you need to write simple code as follows:

(function() {
 
    function MyTabbedNewsWidget() {        
 
        /**
         * Inherit from Tabbed Feed Widget
         */
        this.base = UDW.widgets['__tabbedfeed__'];
        this.base();
 
        //rest of code here
 
    };
 
    UDW.registerWidget('mytabbednewswidget', MyTabbedNewsWidget);
 
})();

Tabbed Feed widget is a powerful widget that allows to quickly and effectively build any type of news feed widgets. Most of news sites provide RSS Feed channels that can be used by third parties. Instead of using one RSS channel per widget we decided to build generic widget that could be able to handle multiple RSS channels from single or multiple sources.

For example consider CNN's RSS channels page, there are dozens of links to different RSS feeds. Using Tabbed Feed Widget it is possible to manage all of these channels at one time.

Let's look closer to these RSS feeds links:

1. http://rss.cnn.com/rss/edition_world.rss
2. http://rss.cnn.com/rss/edition_africa.rss
3. http://rss.cnn.com/rss/edition_americas.rss

Only deference among these links are keywords uniquely identifying channels(in this case: world, africa and americas). In most cases all RSS Feed providers use same generalized approach. These commonality gives us opportunity to use URI only once, only thing we need is to use placeholder for keyword that identifies particular channel.

In this particular case the URI template will look something like this: http:/ /rss.cnn.com/rss/edition_{tag}.rss

Based on these details we can easily implement fully functional widgets providing just necessary configuration parameters. Look at the code below:

(function() {
 
    function CBSNews() {
 
        /**
         * Inherit from tabbed feed widget
         */
        this.base = UDW.widgets['__tabbedfeed__'];
        this.base();
 
        /**
         * setup initial configuration
         */
        this.config = {
            name: 'cbsnews',
            iconId: 'cbsnews',
            title: UDW.str('CBS News'),
            content: ''
        };
 
        this.onload = function() {
 
            /**
             * Set tags and label mappings
             */
            this.setTagMap({
                'Top Stories': 'CBSNewsMain',
                'U.S.': 'CBSNewsNational',
                'World': 'CBSNewsWorld',
                'Politics': 'CBSNewsPolitics',
                'Sci-Tech': 'CBSNewsSciTech',
                'Health': 'CBSNewsHealth',
                'Entertainment': 'CBSNewsEntertainment',
                'Business': 'CBSNewsBusiness',
                'CBS News Video': 'CBSNewsVideo',
                'CBS Evening News': 'CBSNewsEveningNews',
                '48 Hours': 'CBSNews48Hours',
                '60 Minutes': 'CBSNews60Minutes',
                'Strange News': 'CbsNewsApStrange',
                'PC Answer' : 'CBSNewsPCAnswer'
            });
 
            /**
             * Set initial tags to be displayed after load
             */
            this.setInitialTags(['Top Stories', 'Entertainment', 'Strange News', 'Business']);
 
            /**
             * Set URI pattern to be used for generating feed URIs
             */
            this.setFeedURI('http://feeds.cbsnews.com/{tag}');
 
            /**
             * Set logo of the widget
             */
            this.setLogo('cbsnews', 'cbsnews.gif', 'CBS News');
 
            /**
             * Render configured widget
             */
            this.render();
 
        };
 
    };
 
    UDW.registerWidget('cbsnews', CBSNews);
 
})();

Shown code will produce following widget:

If you carefully read the code it must be clear already how fast it is possible to create widget for desired RSS feed providers. But lets look closer at API methods provided by tabbed feed widget.

Below are listed all supported API methods:

this.setTagMap({
    'Top Stories': 'CBSNewsMain',
    'U.S.': 'CBSNewsNational',
    'World': 'CBSNewsWorld'
});

this.setInitialTags([
    'Top Stories', 
    'Entertainment', 
    'Strange News', 
    'Business'
]);

this.setFeedURI('http://feeds.cbsnews.com/{tag}');

this.setLogo('cbsnews', 'cbsnews.gif', 'CBS News');

this.render()

As far as most well known search engines opened their search providing search results in various formats(e.g RSS or Atom feed) it became possible to build custom search widgets. Like with tabbed feeds sometimes it is better to combine these search engines into one single widget. Examples of these type of widgets could be found among already implemented PHPCow widgets(Web Search, News Search, Blog Search, Video Search). But of course these already implemented widgets are not complete as far as there are much more search result providers in the globe. For these purposes we implemented Generic Search Widget that will help you to build your own search widgets, grouping various search engine service providers into the single implementation.

Usage of this widget has a lot in common with previously described tabbed feed widget, but it is much more simpler. All you need is to add as many search engines to the widget instance as you like.

Code shown below is complete implementation of News Search widget:

(function() {
 
    function NewsSearch() {
 
        /**
         * Inherit form Search Widget
         */
        this.base = UDW.widgets['__searchwidget__'];
        this.base();
 
        /**
         * Set initial configuration
         */
        this.config = {
            name: 'newssearch',
            iconId: 'newssearch',
            title: UDW.str('News Search'),
            content: ''
        };
 
        this.onload = function() {
 
            this.setTitle(this.getValue('title') || 'Universal News Search');
 
            /**
             * This and following methods with same name will register search engines
             */ 
            this.addEngine('google', {
                label: 'Google',
                uri: 'http://news.google.com/news?hl=en&q={query}&ie=UTF-8&output=rss', 
                active: true
            });                
            this.addEngine('yahoo', {
                label: 'Yahoo',
                uri: 'http://news.search.yahoo.com/news/rss?p={query}&ei=UTF-8'
            });
            this.addEngine('live', {
                label: 'Live',
                uri: 'http://search.live.com/news/results.aspx?q={query}&format=rss'
            });
            this.addEngine('ask', {
                label: 'Ask.com',
                uri:   'http://news.ask.com/newsrss?q={query}&o=0&l=dir'
            });
 
            /**
             * Render pre-configured widget
             */
            this.render();
 
        };
 
    }
 
    UDW.registerWidget('newssearch', NewsSearch);
 
})();

Shown code will produce following widget:

There are only two API methods provided by Search widget that are listed below:

this.addEngine('live', {
    label: 'Live',
    uri: 'http://example.com/news?q={query}&alt=rss'
});

this.render()