qnx.fuse.ui.buttons.SegmentedControl

SegmentedControl

Properties | Methods | Events | Examples


Packageqnx.fuse.ui.buttons
Classpublic class SegmentedControl
InheritanceSegmentedControl Inheritance UIComponent Inheritance flash.display.MovieClip
Implements IDataViewer

A segmented control is a series of connected radio buttons that enable the user to select a single item from a list of multiple items. The following figure shows a SegmentedControl instance with three buttons:

A segmented control.

You can skin the SegmentedControl component by defining the background skin and the button skins for the segmented control.



Class information:
BlackBerry 10 Version:   10.0.0
Found in:  qnxui.swc

View the examples

See also

Button
RadioButton
SegmentedTitleBar



Public Properties

 PropertyDefined By
 InheritedcontextActions : Vector.<ActionSet>
Gets or Sets a Vector of ActionSet objects.
UIComponent
 InheritedcontextMultiSelectText : String
Gets or Sets a String to be displayed when showing the Multi Select Context Menu.
UIComponent
 InheritedcurrentTheme : String
[read-only] Returns the current theme this component is styled with.
UIComponent
  dataProvider : IDataProvider
Gets or sets the DataProvider object used by the segmented control.
SegmentedControl
 InheritedexplicitHeight : Number
[read-only] Returns the explicit height (actual height, in pixels) of the UI component.
UIComponent
 InheritedexplicitWidth : Number
[read-only] Returns the explicit width (actual width, in pixels) of the UI component.
UIComponent
 Inheritedid : String
The id is a name for the component that can be used in CSS using the # selector.
UIComponent
 InheritedincludeInLayout : Boolean
Specifies whether or not the component should be included in its parent container's layout.
UIComponent
 InheritedlayoutData : Object
Gets or sets the layoutData.
UIComponent
 Inheritedlocale : String
Gets or sets the current locale of the component.
UIComponent
 InheritedminHeight : Number
Gets or sets the minimum preferred height of the control.
UIComponent
 InheritedminWidth : Number
Gets or sets the minimum preferred width of the control.
UIComponent
  selectedIndex : int
Gets or sets the currently selected index.
SegmentedControl
  selectedItem : Object
Gets or sets the currently selected item.
SegmentedControl
 InheritedstyleChildren : Boolean
Allows you to style the children of this component with CSS.
UIComponent

Protected Properties

 PropertyDefined By
 InheritedaccessibilityImplimentationClass : Class
UIComponent
  cssID : String
[override] [read-only] Returns the CSS ID of the component.
SegmentedControl
 InheritedexplicitLocale : Boolean
Set to true when the locale property has been set externally.
UIComponent
 InheritedinternalID : String
The Component's Id used for styling.
UIComponent
 InheritedlongPressEnabled : Boolean
Specifies whether the UIComponent can detect a long press.
UIComponent

Public Methods

 MethodDefined By
  
Creates a new SegmentedControl instance.
SegmentedControl
  
addItem(item:Object):void
Appends an item to the DataProvider.
SegmentedControl
  
addItemAt(item:Object, index:int):void
Adds an item to the DataProvider at a given index.
SegmentedControl
  
addItemsAt(items:Array, index:int):void
Adds items in the DataProvider at a given index, given an Array of items.
SegmentedControl
 Inherited
Cancels a long press from occuring on the component.
UIComponent
 Inherited
childChanged(resizedChild:DisplayObject = null):Boolean
Notifies the UIComponent that one or more of its children has changed in a manner that may affect this object's layout.
UIComponent
 Inherited
destroy():void
Call this method when you want to have your object collected by the garbage collector.
UIComponent
 Inherited
Returns the CSS selector for the object, composing it from its position in the display hierarchy and an optional ID selector.
UIComponent
  
getItemAt(index:int):Object
Gets the data object from the DataProvider at a given index.
SegmentedControl
 Inherited
Returns the size options for the given control.
UIComponent
  
Returns the TextFormat object for a specified state.
SegmentedControl
 Inherited
Calling this method results in a call to the components validateDisplayList() method before the display list is rendered.
UIComponent
 Inherited
Calling this method results in a call to the components validateProperties() method before the display list is rendered.
UIComponent
 Inherited
measure(availableWidth:Number, availableHeight:Number):LayoutMeasurement
This method calls doMeasure() in order to calculate the preferred size of the control.
UIComponent
  
removeAll():void
Removes all items from the DataProvider.
SegmentedControl
  
removeItem(item:Object):void
Removes an item from the DataProvider.
SegmentedControl
  
removeItemAt(index:int):void
Removes an item from the DataProvider at a given index.
SegmentedControl
  
replaceItem(newObject:Object, oldObject:Object):void
Replaces an item with a new item.
SegmentedControl
  
replaceItemAt(item:Object, index:int):void
Replaces the data at a given index.
SegmentedControl
 Inherited
setActualSize(w:Number, h:Number):void
Sets the width and height of the object without setting the explicitWidth and explicitHeight.
UIComponent
  
setBackgroundSkin(newSkin:Object):void
Sets the background skin for the segmented control.
SegmentedControl
  
setButtonSkin(newSkin:Object):void
Sets the button skin for the buttons in the segmented control.
SegmentedControl
  
setButtonWidthAtIndex(buttonWidth:int = 100, index:int = 0):void
Sets the button width of an item at the specified index.
SegmentedControl
 Inherited
setLayoutBounds(bounds:Rectangle):void
Sets the receiver's size and location to the rectangular area specified by the arguments.
UIComponent
 Inherited
setPosition(x:Number, y:Number):void
Sets the x and y position of the component.
UIComponent
  
setSelectionSkin(newSkin:Object):void
Sets the selection indicator skin for the segmented control.
SegmentedControl
  
setTextFormatForState(format:TextFormat, state:String):void
Sets the TextFormat object for the label for a given state.
SegmentedControl
 Inherited
updateDefaultLocale(updateChildren:Boolean = true):void
Updates the locale property to be the same as the locale of the device.
UIComponent
 Inherited
Lets a component that contains text know that it should update its font formats as the font settings have changed.
UIComponent
  
updateItem(value:Object, oldObject:Object):void
Updates an item with a new item at the same position in the DataProvider.
SegmentedControl
  
updateItemAt(value:Object, index:int):void
Updates the item at the specified index with a new item.
SegmentedControl
  
updateItemsAt(items:Array, index:int):void
Updates items in the DataProvider at a given index, given an Array of items.
SegmentedControl
 Inherited
Validates the display list of the component by calling the updateDisplayList().
UIComponent
 Inherited
Validates the component immediately by calling validateProperties(), validateSizes(), and validateDisplayList() if necessary.
UIComponent
 Inherited
Validates the properties of the component by calling the commitProperties() method.
UIComponent

Protected Methods

 MethodDefined By
 Inherited
allowShowContextMenu(target:IEventDispatcher):Boolean
When the user presses on the component this method is called with the object that dispatched the event.
UIComponent
 Inherited
Process properties of the component.
UIComponent
 Inherited
Process the state of the component.
UIComponent
 Inherited
Style the component after the style has changed.
UIComponent
 Inherited
doMeasure(availableWidth:Number, availableHeight:Number):LayoutMeasurement
Performs a measurement on the control, and returns a LayoutMeasurement instance containing the available width and height within the layout.
UIComponent
 Inherited
excemptFromCSSStyling(target:*, property:String = null):void
Exempts a property on an object from being styled by CSS.
UIComponent
 Inherited
flushCache():void
Invoked as part of parentLayoutChanged.
UIComponent
 Inherited
getStyleApplier():Function
A style applier is a method that gets called every time a property from the stylesheet should be applied to the component.
UIComponent
 Inherited
onAdded():void
Called when the instance is added to the stage.
UIComponent
 Inherited
Is called when a user is no longer long pressing on the component.
UIComponent
 Inherited
Is called when a user long presses on the component.
UIComponent
 Inherited
onRemoved():void
Called when the instance is removed from the stage.
UIComponent
 Inherited
Invalidates the parent's size and display list if includeInLayout property is set to true.
UIComponent
 Inherited
Calling this function will refresh the ContextMenu with whatever actions were set by contextActions.
UIComponent
 Inherited
Shows the context menu if there are contextActions associated with the control.
UIComponent
 Inherited
styleState():void
Style the component after state has changed.
UIComponent
 Inherited
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
Sets the size and position of the children of the component.
UIComponent

Events

 Event Summary Defined By
 InheritedDispatched when an action in the Context Menu is selected.UIComponent
  Dispatches a change event when the selection of the control changes.SegmentedControl
 InheritedDispatched when the Context Menu has closed to the DISMISSED state.UIComponent
 InheritedDispatched when the ContextMenu is closing to the DISMISSED state.UIComponent
 InheritedDispatched when the Context Menu has opened to the PEEK or EXPANDED state.UIComponent
 InheritedDispatched when the ContextMenu is opening from the DISMISSED state.UIComponent
 InheritedDispatched when the CrossCut multiselect has been canceled.UIComponent

Property Detail

cssID


cssID:String  [read-only]
[override]

Returns the CSS ID of the component. The CSS ID is used for identifying the type of component in CSS.

The default value is SegmentedControl.


Implementation

protected function get cssID():String

dataProvider


dataProvider:IDataProvider

Gets or sets the DataProvider object used by the segmented control. The DataProvider must be of type IDataProvider.


Implementation

public function get dataProvider():IDataProvider
public function set dataProvider(value:IDataProvider):void

See also

DataProvider

selectedIndex


selectedIndex:int

Gets or sets the currently selected index.

mySegment.selectedIndex = 2;
         

The default value is -1.


Implementation

public function get selectedIndex():int
public function set selectedIndex(value:int):void

selectedItem


selectedItem:Object

Gets or sets the currently selected item.


Implementation

public function get selectedItem():Object
public function set selectedItem(value:Object):void

Constructor Detail

SegmentedControl()


public function SegmentedControl()

Creates a new SegmentedControl instance.

Method Detail

addItem()


public function addItem(item:Object):void

Appends an item to the DataProvider.

The following example adds an object with the label Friday to the right-end of the SegmentedControl:

mySegment.addItem({label: "Friday" })
         

Adding or removing an item fires a DataProvider event, which causes the columns to be cleared and redrawn.

Parameters

item:Object — The object to add to the DataProvider.

addItemAt()


public function addItemAt(item:Object, index:int):void

Adds an item to the DataProvider at a given index.

In the following example, an object with the label Thursday is added to the penultimate position in the SegmentedControl:

mySegment.addItemAt({label: "Thursday" }, mySegment.dataProvider.length -1)
         

Adding or removing an item from the SegmentedControl dispatches a DataProvider event, which causes the columns to be cleared and redrawn.

Parameters

item:Object — The item to add.
index:int — The index at which to add the item.

addItemsAt()


public function addItemsAt(items:Array, index:int):void

Adds items in the DataProvider at a given index, given an Array of items.

Adding or removing an item fires a DataProvider event, which causes the columns to be cleared and redrawn.

Parameters

items:Array — An Array of items to add.
index:int — The index at which to add the item.

getItemAt()


public function getItemAt(index:int):Object

Gets the data object from the DataProvider at a given index.

Adding or removing an item fires a DataProvider event, which causes the columns to be cleared and redrawn.

Parameters

index:int — The index at which to return the item.

Returns

Object — Object The object in the DataProvider at the supplied index.

getTextFormatForState()


public function getTextFormatForState(state:String):TextFormat

Returns the TextFormat object for a specified state.

Parameters

state:String — The state for the TextFormat object to return.

Returns

TextFormat — The TextFormat object for the specified state.

See also

setTextFormatForState()
SkinStates

removeAll()


public function removeAll():void

Removes all items from the DataProvider.

Adding or removing an item triggers a DataProviderEvent on the dataProvider, which causes the columns to be cleared and redrawn.

removeItem()


public function removeItem(item:Object):void

Removes an item from the DataProvider.

Adding or removing an item fires a DataProvider event, which causes the columns to be cleared and redrawn.

Parameters

item:Object — The item to remove.


Throws

ArgumentError — Thrown if the item could not be found.

removeItemAt()


public function removeItemAt(index:int):void

Removes an item from the DataProvider at a given index.

Adding or removing an item fires a dDataProvider event, which causes the columns to be cleared and redrawn.

Parameters

index:int — The index location at which to remove the item.

replaceItem()


public function replaceItem(newObject:Object, oldObject:Object):void

Replaces an item with a new item.

Parameters

newObject:Object — The new item.
oldObject:Object — The current item to replace.


Throws

RangeError — Thrown if the specified index is less than 0, or greater than or equal to the length of the DataProvider.

See also

replaceItemAt()

replaceItemAt()


public function replaceItemAt(item:Object, index:int):void

Replaces the data at a given index.

Adding or removing an item fires a data provider event, which causes the columns to be cleared and redrawn.

Parameters

item:Object — The new item to add.
index:int — The index at which to add the item.

setBackgroundSkin()


public function setBackgroundSkin(newSkin:Object):void

Sets the background skin for the segmented control.

The newSkin parameter can be one of three different types: Class, String, or DisplayObject instance.

  • If you pass in a Class, a new instance of that class is created.
  • If you pass in a String, flash.utils.getDefinitionByName will be used to try and determine a class to use.
  • If you pass in a DisplayObject instance it is used as the skin the x and y values of the instance are set to 0.

Parameters

newSkin:Object — The skin to use for the background of the segmented control.

See also

SkinAssets

setButtonSkin()


public function setButtonSkin(newSkin:Object):void

Sets the button skin for the buttons in the segmented control. This skin is set on all the internal buttons in the control.

The newSkin parameter can be one of three different types: Class, String, or DisplayObject instance.

  • If you pass in a Class, a new instance of that class is created.
  • If you pass in a String, flash.utils.getDefinitionByName will be used to try and determine a class to use.
  • If you pass in a DisplayObject instance it is used as the skin the x and y values of the instance are set to 0.

Parameters

newSkin:Object — The button skin.

See also

SkinAssets

setButtonWidthAtIndex()


public function setButtonWidthAtIndex(buttonWidth:int = 100, index:int = 0):void

Sets the button width of an item at the specified index.

The following listing sets the width of the second button to 200 pixels.

mySegment.setButtonWidthAtIndex(200, 1);
         

This operation will override the current width of the target button, other button widths will not be changed. If the width of the control cannot accomodate the sum of all set button widths, some buttons will not be shown.

Setting the width to zero or undefined will remove the explicit button width constraint from the button at the specified index.

Parameters

buttonWidth:int (default = 100) — The new width to set. The default is 100 (pixels).
index:int (default = 0) — The index of the button to set. The default is 0.

setSelectionSkin()


public function setSelectionSkin(newSkin:Object):void

Sets the selection indicator skin for the segmented control. The selection skin is the highlight that indicates which element in the segmented control is selected.

The newSkin parameter can be one of three different types: Class, String, or DisplayObject instance.

  • If you pass in a Class, a new instance of that class is created.
  • If you pass in a String, flash.utils.getDefinitionByName will be used to try and determine a class to use.
  • If you pass in a DisplayObject instance it is used as the skin the x and y values of the instance are set to 0.

Parameters

newSkin:Object — The skin to use for the selection indicator of the segmented control.

See also

SkinAssets

setTextFormatForState()


public function setTextFormatForState(format:TextFormat, state:String):void

Sets the TextFormat object for the label for a given state.

Valid state parameter values are:

  • selected
  • default

In the following example, the a TextFormat object is applied to the selected state label:

var myFormat:TextFormat = new TextFormat();
myFormat.font = "Myriad Pro";
myFormat.size = 22;
myFormat.color = 0xFFFFFF;        
var segmentedControl:SegmentedControl = new SegmentedControl();
segmentedControl.setTextFormatForState(myFormat, SkinStates.UP);
         

Parameters

format:TextFormat — The TextFormat object to apply to the label.
state:String — The state for which to apply the TextFormat object.

See also

SkinStates
getTextFormatForState()

updateItem()


public function updateItem(value:Object, oldObject:Object):void

Updates an item with a new item at the same position in the DataProvider.

Parameters

value:Object — The new item.
oldObject:Object — The current item to replace.

See also

updateItemAt()

updateItemAt()


public function updateItemAt(value:Object, index:int):void

Updates the item at the specified index with a new item.

Parameters

value:Object — The new item.
index:int — The index of the item to replace.


Throws

RangeError — Thrown if the specified index is less than 0, or greater than or equal to the length of the DataProvider.

See also

updateItem()

updateItemsAt()


public function updateItemsAt(items:Array, index:int):void

Updates items in the DataProvider at a given index, given an Array of items.

Updating an item fires a DataProvider event, which causes the columns to be cleared and redrawn.

Parameters

items:Array — An Array of items to update.
index:int — The index at which to update the items.

Event Detail

change


Event Object Type: flash.events.Event
Event.type property = flash.events.Event.CHANGE

Dispatches a change event when the selection of the control changes.

Examples

The following example creates a SegmentedControl instance.

package
{
    import flash.display.Sprite;
    
    import qnx.fuse.ui.buttons.SegmentedControl;
    import qnx.ui.data.DataProvider;    
    
    [SWF(height="600", width="1024", 
    frameRate="30", backgroundColor="#FFFFFF")]
    public class SegmentedControlExample extends Sprite
    {
        public function SegmentedControlExample()
        {    
            initializeUI();
        }
        
        private function initializeUI():void
        {
            // create an array for the segmented control with objects
            // that have label properties
            var buttonArray:Array=[];
            buttonArray.push({label:"AM"});
            buttonArray.push({label:"FM"});
            buttonArray.push({label:"HD"});
            
            // create a segemented control
            var mySegment:SegmentedControl = new SegmentedControl();
            mySegment.x = 100;
            mySegment.y = 100;
            mySegment.width = 400;            
            // set the data provider
            mySegment.dataProvider = new DataProvider(buttonArray);
            // set the selected index to be the 3rd item in the dataProvider
            mySegment.selectedIndex = 2;
            // add the control to the display list
            this.addChild(mySegment);
        }
        
    }
}
     




comments powered by Disqus