top

Adding Visual UI Components

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

This tutorial demonstrates how to include more than one component in an application simultaneously by developing two applications.

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

Prerequisites

To create applications that run on a TV screen, you need:

  • Samsung TV connected to the Internet
  • SDK or a text editor for creating HTML, JavaScript and CSS files (using Samsung Smart TV SDK is recommended)

Development Environment

Use Samsung Smart TV SDK to create the application. You can also use the emulator provided with the SDK to debug and test the application before uploading it in your TV. Later, you can run the application on a TV; see Testing Your Application on a TV. Note that applications may perform better on the TV than on the emulator.

You can find general instructions for creating applications in Implementing Your Application Code.

Source Files

Note

The files needed for the sample application are here.

  • The files needed for the Button and Label component sample application are here.
  • The files needed for the Check and Image component sample application are here.
  • The files needed for the List, Scroll, and Helpbar component sample application are here.
  • The files needed for the Loading component sample application are here.
  • The files needed for the Datepicker and Popup component sample application are here.
  • The files needed for the Input component sample application are here.
  • The files needed for the Video component sample application are here.

Visual UI Components

This tutorial task demonstrates how to include more than one component in an application by developing applications using the following UI elements:

Buttons and Label

The tutorial application consists of 4 buttons and a label. Focus can be moved among the buttons. When a button is pressed, the label displays the corresponding text.

  1. Add 4 buttons and a label component to the project:

    function SceneScene1(options) {
        this.options = options;
    
        var index,
            column,
            row;
    
    } // Declare index, column and row to move focus.
    
    SceneScene1.prototype.initialize = function () {
    
        -('#svecButton_ZPQO').sfButton({text:'Button1', width:'200px'});
        -('#svecButton_AVN3').sfButton({text:'Button3', width:'200px'});
        -('#svecButton_NYCS').sfButton({text:'Button2', width:'200px'});
        -('#svecButton_FJM6').sfButton({text:'Button4', width:'200px'});
        -('#svecLabel_G6NW').sfLabel({text:'label', width:'131px'});
        -('#svecLabel_G6NW').sfLabel({text:'Please Button Click..'});
    
        index = new Array(
            new Array('#svecButton_ZPQO', '#svecButton_NYCS'),
            new Array('#svecButton_AVN3', '#svecButton_FJM6')
        ); //Initialize buttons and 2X2 array
    
        this.column = 0;
        this.row = 0;
    }
    
  2. Add the following code to navigate among the buttons:

    SceneScene1.prototype.handleShow = function () {
        -('#svecButton_ZPQO').sfButton('focus');
    }
    
  3. Add the following code to the handleKeyDown() function:

    SceneScene1.prototype.handleKeyDown = function (keyCode) {
        switch (keyCode) {
            case sf.key.LEFT:
            case sf.key.RIGHT:
                -(index[this.column][this.row]).sfButton('blur');
                this.row = (this.row == 0 ? 1 : 0);
                -(index[this.column][this.row]).sfButton('focus');
                break;
            case sf.key.UP:
            case sf.key.DOWN:
                -(index[this.column][this.row]).sfButton('blur');
                this.column = (this.column ==0 ? 1 : 0);
                -(index[this.column][this.row]).sfButton('focus');
                break;
    
            // Apply this approach for moving focus in other components.
            case sf.key.ENTER:
                if(this.column == 0 && this.row == 0) {
                    -('#svecLabel_G6NW').sfLabel({text:'Clicked Button1!!'});
                } else if (this.column == 0 && this.row == 1) {
                    -('#svecLabel_G6NW').sfLabel({text:'Clicked Button2!!'});
                } else if (this.column == 1 && this.row == 0) {
                    -('#svecLabel_G6NW').sfLabel({text:'Clicked Button3!!'});
                } else if (this.column == 1 && this.row == 1) {
                    -('#svecLabel_G6NW').sfLabel({text:'Clicked Button4!!'});
                }
                break;
        } //the label displays text based on the button click.
    }
    

Figure. Main scene

Figure. Button click

Checkbox and Image

This application consists of 3 checkboxes, 3 labels and one image component. Focus can be moved among the checkboxes. On selecting a checkbox, the image component displays the corresponding image.

  1. Add 3 checkboxes, 3 labels and an Image component to the project:

    function SceneScene1(options) {
        this.options = options;
        var index;  // declare index for checkbox.
    }
    
    SceneScene1.prototype.initialize = function () {
        -('#svecCheckBox1').sfCheckBox();
        -('#svecCheckBox2').sfCheckBox();
        -('#svecCheckBox3').sfCheckBox();
        -('#svecImage_PBN7').sfImage({src:'../../../../../../Images/Tulips.jpg'});
        -('#svecLabel_7AQ6').sfLabel({text:'Tulips', width:'131px'});
        -('#svecLabel_330C').sfLabel({text:'Koala', width:'131px'});
        -('#svecLabel_R2OC').sfLabel({text:'Penguins', width:'131px'});
        this.index = 0;   //initialize index 0 for give focus first checkbox.
    }
    
  2. Add code to navigate among the checkboxes in the handleKeyDown() function. When the focus is on a checkbox and the Enter key is pressed, the check property of the checkbox becomes true and the corresponding image gets loaded into the image component.

    SceneScene1.prototype.handleShow = function () {
        -('#svecCheckBox1').sfCheckBox('focus');
        -('#svecCheckBox1').sfCheckBox('check');
    }
    
    SceneScene1.prototype.handleKeyDown = function (keyCode) {
        switch (keyCode) {
            case sf.key.LEFT:
                break;
            case sf.key.RIGHT:
                break;
            case sf.key.UP:
                this.index--;
                if (this.index < 0) {
                    this.index = 0;
                }
                changeSelected(this.index, 0);
                break;
            case sf.key.DOWN:
                this.index++;
                if (this.index > 2) {
                    this.index = 2;
                }
                changeSelected(this.index, 0);
                // The second parameter( 0 or 1) 0 is to give the focus to the check box,
                // and 1 is to give focus and check the checkbox
                break;
            case sf.key.ENTER:
                changeSelected(this.index, 1);
                break;
        }
    }
    
  3. When the focus is on a checkbox and the Enter key is pressed, a new image is loaded onto the same Image component, based on the checkbox currently checked. The user can select only one checkbox at a time.

    changeSelected = function(index, chk) {
        if (index == 0) {
            -('#svecCheckBox1').sfCheckBox('focus');
            -('#svecCheckBox2').sfCheckBox('blur');
            -('#svecCheckBox3').sfCheckBox('blur');
            if(chk == 0) {
                return;
            }
            -('#svecImage_PBN7').sfImage({src:'../../../../../../Images/Tulips.jpg'});
            -('#svecCheckBox2').sfCheckBox('uncheck');
            -('#svecCheckBox3').sfCheckBox('uncheck');
            -('#svecCheckBox1').sfCheckBox('check');
        } else if (index == 1) {
            -('#svecCheckBox1').sfCheckBox('blur');
            -('#svecCheckBox2').sfCheckBox('focus');
            -('#svecCheckBox3').sfCheckBox('blur');
            if(chk == 0) {
                return;
            }
            -('#svecImage_PBN7').sfImage({src:'../../../../../../Images/Koala.jpg'});
            -('#svecCheckBox1').sfCheckBox('uncheck');
            -('#svecCheckBox3').sfCheckBox('uncheck');
            -('#svecCheckBox2').sfCheckBox('check');
        } else {
            -('#svecCheckBox3').sfCheckBox('focus');
            -('#svecCheckBox1').sfCheckBox('blur');
            -('#svecCheckBox2').sfCheckBox('blur');
            if(chk == 0) {
                return;
            }
            -('#svecImage_PBN7').sfImage({src:'../../../../../../Images/Penguins.jpg'});
            -('#svecCheckBox1').sfCheckBox('uncheck');
            -('#svecCheckBox2').sfCheckBox('uncheck');
            -('#svecCheckBox3').sfCheckBox('check');
        }
    }
    

Figure. Main scene

Figure. Focus on third checkbox

Figure. Third checkbox and the corresponding image

Helpbar, Scrollbar and Listbox

The application consists of a listbox with 5 list items, a scrollbar, and a helpbar. Focus can be moved among the list items in the listbox. The scrollbar moves when the focus is moved among the list items.

  1. Add a list box with 5 list elements, a scrollbar, and a helpbar to the project.

  2. Initialize the listbox component with the list items to add. The helpbar is initialized with the help items. In the code given below, the second line, and the last 4 lines are user defined code. The rest is generated automatically:

    SceneScene1.prototype.initialize = function () {
        var data = ['First', 'Second', 'Third', 'Forth', 'Fifth'];  //Initilize the listbox with the list items.
    
        -('#svecListbox_QKNM').sfList({data:data, index:'0', itemsPerPage:'5'});
        -('#svecVertical_scrollbar_BEI0').sfScroll({page:'5'});
        -('#svecKeyHelp_IIZH').sfKeyHelp({
            'user': 'SamSung SDK',
            'red': 'Stop',
            'green':'Start',
            'enter': 'Enter',
            'updown' :'UpDown'
            'return': 'Back'
        });
        //Initialize the hellpbar with the help menu.
    }
    
  3. Set the focus on the scrollbar as follows:

    SceneScene1.prototype.handleShow = function () {
        -('#svecVertical_scrollbar_BEI0').sfScroll('focus');    //Give focus to scrollbar
    }
    
  4. Add the following code to move the scrollbar. The focus on the listbox item is moved based on the position of the scrollbar:

    SceneScene1.prototype.handleKeyDown = function (keyCode) {
        var idx;
        switch (keyCode) {
            case sf.key.LEFT:
                break;
            case sf.key.RIGHT:
                break;
            case sf.key.UP:
                -('#svecVertical_scrollbar_BEI0').sfScroll('prev');
                idx = -('#svecListbox_QKNM').sfList('getIndex');
                if(idx == 0) {
                     break;
                }
                -('#svecListbox_QKNM').sfList('prev');
                break;
            case sf.key.DOWN:
                -('#svecVertical_scrollbar_BEI0').sfScroll('next');
                idx = -('#svecListbox_QKNM').sfList('getIndex');
                if(idx == 4) {
                    break;
                }
                -('#svecListbox_QKNM').sfList('next');
                break;
            case sf.key.ENTER:
                break;
        }      // Code to move the scrollbar, and the focus on the list item based on the postion of the scrollbar.
    }
    

Figure. First scene

Figure. Focus on the third item

Loading Image

The loading image component is an advanced component that can be used in conjuction with other components. It is a loading indicator informing the user that an image is being loaded.

This tutorial application has two Scenes - Scene1 and Scene2. The loading image component is present in Scene1. When the user switches to another Scene, the loading image component appears for a short span of time, depending on the timer value set. To use the loading image component:

  1. Add a loading image, helpbar and label in Scene1:

    SceneScene1.prototype.initialize = function () {
        -('#svecKeyHelp_YE4F').sfKeyHelp({'enter':'Next Scene', 'return':'Return'});
        -('#svecLoadingImage_1LKN').sfLoading();
        -('#svecLabel_YQ4I').sfLabel({text:'LoadingImage_Tutorial', width:'210px'});
    }
    
  2. Add the second Scene - Scene2 with a label in it.

  3. Show the loading image component. To prevent the component from staying on the screen forever, set the timer for the component. The code of the timeout function is given below. The application displays the loading image for 3 seconds, after which it is hidden, and Scene2 appears on the screen:

    SceneScene1.prototype.handleKeyDown = function (keyCode) {
        switch (keyCode) {
            case sf.key.LEFT:
                break;
            case sf.key.RIGHT:
                break;
            case sf.key.UP:
                break;
            case sf.key.DOWN:
                break;
            case sf.key.ENTER:
                -('#svecLoadingImage_1LKN').sfLoading('show');
                this.t = setTimeout("-('#svecLoadingImage_1LKN').sfLoading('hide');" +
                    "-.sfScene.hide('Scene1');" +
                    "-.sfScene.show('Scene2');", 3000); // Call the show function of loading image
                    //After the set time, call the hide function of loading image and the scene is changed.
                break;
        }
    }
    

Figure. Scene1

Figure. Loading Image icon on Scene2 loading

Figure. Scene2

Input

The application has an input element, two labels and a helpbar. The Input element has a keypad and a text box. The input given using the key pad gets typed in the text box. The return function of the Input element prints the returned value in the text box.

  1. Create a project that has an Input component, two labels, and a helpbar. The IME is automatically initialized. The helpbar is initialized with the items for which help is provided. In the code below, the portion shown in bold is the user defined code. The rest is generated automatically.

    function  SceneScene1(options) {
        this.options = options;    
    }
    
    SceneScene1.prototype.initialize  = function () {
        -('#svecLabel_1').sfLabel({text:'Input  text', width:'131px'});
        -('#svecLabel_2').sfLabel({text:'text  here', width:'131px'});
        -('#svecKeyHelp_IIZH').sfKeyHelp({
            'leftright': 'Call the IME',
            'Enter': 'Input text',
            'return' : 'Return'
        }); // Define helpbar
    
         -("input_01").sfTextInput({
            text : "Input text",
            maxlength : 10,		
            ontextchanged : function(text){
                alert("This function is called when a WORD is changed")
                alert("Current text : " + text)
            },
            oncomnplete : function(text){
                if (text){
                    -('#svecLabel_2').html(text);
                }else{
                    -('#svecLabel_2').html("Cancel");			
                }
            }		
        )};		
    }
    
  2. When the Right or Left key is pressed, the focus is placed on the input element, and the text can be typed in using the keypad of the input element.

    SceneScene1.prototype.handleKeyDown = function (keyCode) {
        switch (keyCode) {
            case sf.key.LEFT:
            case sf.key.RIGHT:
                document.getElementById("input_01").focus();
                // set the focus on the text box of the IME
                break;
            case sf.key.UP:
                break;
            case sf.key.DOWN:
                break;
            case sf.key.ENTER:
                break;
        }
    }
    

Figure. Main scene

Figure. IME call

Figure. Text message input

Video

The tutorial application contains a listbox, label, helpbar and video component. When an item in the list box is clicked, the corresponding video starts playing.

To make the application:

  1. Create a project that has a video, label, list and helpbar component.

  2. Initialize the List entry data, label, image and video URL elements.

    my_play_list = [{
        url: 'http://samsung.com/Video/TV.mp4',
        title: 'Samsung TV'
    }, {
       url: 'http://samsung.com/Video/Argentina.mp4',
       title: 'Football'
    }, {
       url: 'http://samsung.com/Video/movie.mp4',
       title: 'Movie Trailer'
    }]; // Define object array of video URL
    
  3. Initialize the helpbar and video player area setting:

    SceneScene1.prototype.initialize = function () {
    
        listbox2_dataVYRYTY_copy_O78P7K = [
            'Samsung TV',
            'Football',
            'Movie Trailer'
        ];    //  Declare dateentry of listbox2
    
        -('#svecImage_44YD').sfImage({src:'images/frame.png'});
        -('#svecKeyHelp_TDQN').sfKeyHelp({
            'PLAY':'Play',
            'PAUSE':'Pause',
            'STOP':'Stop',
            'REW':'Rew',
            'FF':'FF',
            'RETURN':'Return'
        });   //  Initialize helpbar
        -('#svecListbox2_UVMS').sfListbox2({
            data:listbox2_dataVYRYTY_copy_O78P7K,
            width:'200',
            height:'31',
            itemsPerPage:'3',
            horizontal:'false'
        });
        -('#svecLabel_R2Z6').sfLabel({
            text:'TV',
            width:'410px'
        });
        -.sfVideo('setKeyFunc', -.sfKey.LEFT, function(){
            -.sfVideo('stop', true);
        })              //  setKeyFunc - Left key : video stop
    
        my_play_list = [{
            url: 'http://samsung.com/Video/TV.mp4',
            title: 'Samsung TV'
        }, {
            url: 'http://samsung.com/Video/Argentina.mp4',
            title: 'Football'
        }, {
            url: 'http://samsung.com/Video/movie.mp4',
            title: 'Movie Trailer'
        }];  //  Define object array of video URL
    
        playerSetting = {
            sec : 0,
            screenSize : {
                left : 465,
                top : 135,
                width : 382,
                height: 150
            }  // Set Partial play size. The controller will be attached below this area.
            -.sfVideo('setPlayerPosition', playerSetting);      // Show video frame.
        }
    
  4. Write a keyHandler to get the index of the current list box to be selected. After getting the index value of the current list item, play the corresponding video item that has been selected. This code is usually written in the Enter key event as shown below:

    SceneScene1.prototype.handleShow = function () {
        alert("SceneScene2.handleShow()");
        // this function will be called when the scene manager show this scene
        -('#svecListbox2_UVMS').sfListbox2('focus');
    }  // Set focus listbox.
    
    SceneScene1.prototype.handleKeyDown = function (keyCode) {
        switch (keyCode) {
            case sf.key.UP:
                -('#svecListbox2_UVMS').sfListbox2('prev');
                break;
            case sf.key.DOWN:
                -('#svecListbox2_UVMS').sfListbox2('next');
                break;
            case sf.key.ENTER:
            case sf.key.PLAY:
                var i = -('#svecListbox2_UVMS').sfListbox2('getIndex');
                -.sfVideo('setItem', my_play_list[i]);
                -.sfVideo('play', playerSetting);
                break;
                 //  Playing video.
        }
    }
    

Key functions

The key functions for the video component are as follows:

Play and resume the video from last pause.
Fast rewind (speed x1, x2, x3).
Fast forward (speed x1, x2, x3).
Pause, and the progress bar appears on the screen.
Stop and go back to the preview screen.
Adjust the volume.

Figure. Video Player - Main scene

Figure. Video component - video application

Figure. Video component - video application

Figure. Video Player - Main scene

Figure. Video component - video application

Figure. Video component - video application