Button

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

The Button component handles all the events occurring on the click of a button.

** 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 extend the Button component horizontally and modify the text property.

 

Figure. Button component

Syntax $.fn.sfButton = function (options, index)
Parameter

options:

  • index - Index of a part of the Button
Value

The values for the options parameter are:

  • text - (string) - Button text

    Example

    $('#button').sfButton({text:['button text','test 1','test 2']});

  • focus - Gives the button focus

  • index (number) - Index of the item to be focused; default:0

    Example

    $('#button').sfButton('focus',this.idx);

  • blur - Removes focus from the button

    Example

    $('#button').sfButton('blur');
Properties
  • ID - Component ID uniquely identifying each component
  • Caption - Text in the Button
  • Margins Left and Top - Component position on the scene
  • Margins Width - Component width

The component property values added to the View area are available in the CSS file, but the read-only fields in the property panel are not available. These properties cannot be modified for the application.

You can modify the visual properties of the components in:

  • The CSS files under Code Edit Mode, or
  • The property box under Visual Mode

Figure. Button properties box

The default CSS code for the Button component is given below:

#SceneScene1 #svecButton_XQ89{
    position : absolute;
    left : 230px;
    top : 280px;
    width : 200px;
}

Figure. Button