Widget Components

There are two UI components that are used frequently for building widgets. These two components are Tab Menu and Pagination. Both of the components are used in all of the news and search widgets.

Tab Menu is frequently used for splitting widget's content into separate tabs. Tab Menu component has few API methods that allows developers to easily manage as whole tab menu control as its separate tabs.

Example Tab Menu looks something like this:

First of all it is necessary to obtain tab menu object as shown in code below:

/**
 * Instantiate tab menu component
 */
var tabMenu = new UDW.Components.Tab();

For adding new tabs into the tab menu you need to use addTab method:

/**
 * @param String tabId unique identifier of the tab
 * @param Object javascript object specifying addition parameters
 */
tabMenu.addTab(
  'tabId',
  {
    label: 'First Tab',
    content: '<p>This is first tab</p>',
    active: true,
    callback: function(tabItem) {
        //rest of code here
    } 
  }
);

Shown method accepts two parameters tabId and parameters object. Structure of the parameters object is shown in the table below:

There is one more additional useful attribute that due to its complexity is not listed in the table and requires additional explanation.

Every tab item added to the tab menu can contain children items. Example of child items can be found in the news widgets. To add sub items(children) to the tab menu item you need to specify them as shown below:

tabMenu.addTab(
  'tabId',
  {
    label: 'First Tab',
    content: '<p>This is first tab</p>',
    active: true,
    callback: function(tabItem) {
        //rest of code here
    },
    subItems: {
        items: {
            'att':     UDW.str('Attention - Monthly'),
            'avgStay': UDW.str('Average Stay - Monthly'),
            'ppv':     UDW.str('Pages/Visit - Monthly')
        },
        callback: function(event, childItem) {
            //rest of code here
        }
    }
  }
);

As shown in the example sub items are passed as key/value pairs. Also additional callback parameter can be passed that is handled after sub item is clicked.

Other API methods that is supported by tab menu components are shown in table:

Internally all tab menu items are of type TabItem object that has several useful API methods. These methods are extremely useful while working with tab items and give developers additional flexibility. These API methods are listed in table below:

Pagination component is very useful UI component that potentially can be used for working with any type of content that requires splitting due to its large size. Implementation of component allows to easily navigate through content.

Example Pagination looks something like this:

Working with pagination component is bit complicated, but shown example and following explanations will clarify all details:

 
//obtain widget reference for later use
var widget = this;
 
/**
 * Instantiate Pagination component
 */
var pagination = UDW.Components.Pagination.getComponent(
    {
        currentPage: 1, //Specify current page to be selected
        rowsPerPage: 2, //Specify number of records to be shown on each page
        rowName: 'stories', //Specify collection name to be processed
        callback: function(rows) { //Specify callback function to be invoked for processing selected rows
            var htm = [];
            for (var i = 0; i < rows.length; i++) {
                htm.push('<p>' + rows[i].title + '</p>');
            }
            widget.setContent(htm.join(''));
        }
    }
);
 
/**
 * Add Pagination component to the widget's footer section
 */
widget.setToFooter(pagination);
 
/**
 * This is example result-set used for this example
 * collection contains objects collection named "stories"
 * which will be processed by pagination component
 */
var result = {
    stories: [
      {title: 'Story 1'},
      {title: 'Story 2'},
      {title: 'Story 3'},
      {title: 'Story 4'},
      {title: 'Story 5'},
      {title: 'Story 6'}
    ] 
};
 
/**
 * pass result-set to pagination component's process method
 */
pagination.process(result);

For testing this code just copy and paste it into the “this.onload” method of the HelloWorld widget and you will immediately see the result.