top

Initializing UI Components

Published 2014-10-28 | (Compatible with SDK 3.5,4.5,5.0,5.1 and 2012,2013,2014 models)

Initializing UI Components

** This class will not be supported in 2015.

   All functionalities of AppsFramework are more improved, integrating with CAPH. Therefore Appsframework is not supported since 2015 Smart TV. To use functionalities of Appsframework, refer to here.

 

The UI Components of the UI API uses jQuery library and is defined as a jQuery plugin in the form sf____. To use the UI components, select the HTML element in which you wish to create the UI component, and call the UI component API method.

Initialize

If the first parameter is Object type, the UI component is initialized. The basic structure of the component and its style are set in the following files:

  • HTML

    <div id="btnClose"></div>
    
  • CSS

    #btnClose {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 150px;
    }
    

The following is the initialization code.

// initialize button
$("#btnClose").sfButton({
    text: "Close"
});

The rendered HTML is given below.

<div id="btnClose" class="sf-ui-button sf-ui-button-blur">
    <div class="sf-ui-button-l"></div>
    <div class="sf-ui-button-c sf-ui-common-ellipsis">Close</div>
    <div class="sf-ui-button-r"></div>
</div>

Calling the Component Methods

If the first parameter is String type, the UI component method is called. For the list of methods of the UI Components, see the UI Components API. The following code calls the focus method of sfList.

// initialize
$("#mainmenu").sfList({
    data: ["Home", "Menu1", "Menu2", "Menu3"],
    index: 0,
    itemsPerPage: 4
});

// apply the focus style to this list.
$("#mainmenu").sfList("focus");

Most of the methods are support chaining mechanism of jQuery. Methods returning its settings do not support chaining.

// gets the current focused index.
var index = $("#mainmenu").sfList("getIndex");

Note

The sample code for using UI components can be downloaded from (here).