top

Customizing UI Components

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

Customizing 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.

 

You can customize images, image sizes and UI component styles using CSS, including:

 

Rendering HTML from a UI Component

In the UI API, UI Components are based on jQuery, which has its own CSS namespaces (for example sf-ui-button, sf-ui-list).

The name spaces are added to the DIV selected with jQuery.

The following line of code creates the HTML explained below.

// creates button
$("#button1").sfButton({text: 'OK'};

Before rendering, the HTML is as follows:

<div id="button1"></div>

After rendering, the HTML is as follows:

<div id="button1" 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">
        text
    </div>
    <div class="sf-ui-button-r"></div>
</div>

All styles are created with CSS classes. To customize the styles, you must override them.

Customizing all the Components in the Application

All the components used in the application can be customized by overriding the CSS classes.

/* overrides button */
.sf-ui-button div {
    height: 25px;
}

.sf-ui-button-l {
    width: 0px;
    background: url('') no-repeat;
}

.sf-ui-button-c {
    width: 200px;
    line-height: 20px;
    text-align: left;
    font-size: 16px;
    color: #ff0000;
    background: url(images/mybutton.png) repeat-x;
}

.sf-ui-button-r {
    width: 0px;
    background: url('') no-repeat;
}

.sf-ui-button-focus .sf-ui-button-l.focus {
    background: url('') no-repeat;
}

.sf-ui-button-focus .sf-ui-button-c.focus {
    color: #0000ff;
    background: url(mybutton_focused.png) repeat;
}

.sf-ui-button-focus .sf-ui-button-r.focus {
    background: url('') no-repeat;
}

Defining the Class for Customizing Components

The sample class for customizing components, sfScroll, creates the HTML code described below. Before initialization, the HTML is as follows:

<div id="scroll1"></div>

After initialization, the HTML is as follows:

<div id="scroll1" class="sf-ui-scroll">
    <div class="sf-ui-scroll-bg">
        <div class="sf-ui-scroll-bg-top"></div>
        <div class="sf-ui-scroll-bg-middle"></div>
        <div class="sf-ui-scroll-bg-bottom"></div>
    </div>
    <div class="sf-ui-scroll-body">
        <div class="sf-ui-scroll-body-top"></div>
        <div class="sf-ui-scroll-body-middle"></div>
        <div class="sf-ui-scroll-body-bottom"></div>
    </div>
</div>

To remove the background of the scroll, define it as shown below in the myScroll class and apply it.

$("#scroll1").sfScroll({pages:20});
.myScroll.sf-ui-scroll .sf-ui-scroll-bg{
    display: none;
}
<div id="scroll1" class="myScroll">
    <div id="scroll1" class="myScroll sf-ui-scroll">
        <div class="sf-ui-scroll-bg">  <!-- this background  will be hidden by "display:none" property. -->
        <div class="sf-ui-scroll-bg-top"></div>
        <div class="sf-ui-scroll-bg-middle"></div>
        <div class="sf-ui-scroll-bg-bottom"></div>
    </div>
    <div class="sf-ui-scroll-body">
        <div class="sf-ui-scroll-body-top"></div>
        <div class="sf-ui-scroll-body-middle"></div>
        <div class="sf-ui-scroll-body-bottom"></div>
    </div>
</div>

Customizing a Specified Component

Components specified by an ID can be customized as shown below.

#scroll1.sf-ui-scroll .sf-ui-scroll-bg{
    display: none;
}