BlackBerry 10 AIR按钮介绍

BlackBerry 10 AIR按钮介绍(1)

为你的应用程序选择按钮

黑莓10 SDK 的Adobe AIR API包含各种按钮实现。每一个实现换肤功能和可定制的。

黑莓10 SDK 的Adobe AIR API提供了以下按钮类型：

类	图像	描述
Button		Button类是一个基本的切换按钮实现。它是所有其他的按钮类型的基类。
CheckBox		复选框类是一个的复选框实现，它允许用户切换标识为on和off
IconButton		IconButton类定义了一个包含图标的按钮。
LabelButton		LabelButton类定义了一个按钮，它包含一个String串。
RadioButton		RadioButton类定义了一个简单的单选按钮实现。它被按下之后，保持在选定的状态下。当一个单选按钮被选中时，它的侦听器会运行。
SegmentedControl		SegmentedControl类定义了一组相互关联的单选按钮，允许用户从一组相关的选项中选择一个选项。
ToggleSwitch		ToggleSwitch类是一个简单的切换开关，让用户将沿轨道在两种状态之间切换的实现。

BlackBerry 10 AIR按钮介绍(2)

创建toggle button
下面我们用一个简单的例子来展示Button的使用。

创建工程，在其中包含下列类

import qnx.fuse.ui.buttons.Button; 
import flash.events.MouseEvent;

public class ShowButton extends Sprite{
private var myButton:Button = new Button(); 

public function ShowButton(){
//定位button和设置大小
myButton.setPosition(200,200); 
myButton.width = 100; 
myButton.height = 50; 
  
// 设置属性 
myButton.toggle = true; 
  
// 当button被点击，响应myButtonEvent
myButton.addEventListener(MouseEvent.CLICK, myButtonEvent); 
  
//加 button 到舞台. 
this.addChild(myButton);
}

private function myButtonEvent(event:MouseEvent) { 
    // 输出信息到控制台  
    // 当button是down状态，返回true. 
    trace ("myButton has been clicked, current toggle state is:" + myButton.selected); 
}
}
BlackBerry 10 AIR按钮介绍(3)

创建checkBox
下面用一个简单例子展示如何使用CheckBox。
 

创建工程，在其中包含下列类
import qnx.fuse.ui.buttons.CheckBox;
import flash.events.MouseEvent;

public class ShowCheckBox extends Sprite{
private var myCheckBox:CheckBox = new CheckBox();
public function ShowCheckBox (){

//定位和设置大小
myCheckBox.setPosition(200,300); 
myCheckBox.width = 150;  

// Set up checkbox label 
myCheckBox.label = "Enable setting"; 
//This is optional, requires LabelPlacement 
myCheckBox.labelPlacement = LabelPlacement.TOP; 
  
// 当checkbox被点击，响应myCheckBoxEvent
myCheckBox.addEventListener(MouseEvent.CLICK, myCheckBoxEvent); 
  
//加控件到舞台. 
this.addChild(myCheckBox);
}

private function myCheckBoxEvent(event:MouseEvent) { 
    // 输出信息到控制台  
    // 当button是down状态，返回true. 
    trace ("myCheckBox has been clicked, current toggle state is:" + myCheckBox.selected); 
}

BlackBerry 10 AIR按钮介绍(4)

创建LabelButton
下面用一个例子展示如何使用LabelButton.

创建工程，在其中包含下列类
import qnx.fuse.ui.buttons.LabelButton; 
import flash.events.MouseEvent;
//The following three imports are for the optional text formatting step. 
import qnx.fuse.ui.text.TextFormat; 
import qnx.fuse.ui.text.TextAlign; 
import qnx.fuse.ui.skins.SkinStates;

public class ShowLabelButton extends Sprite{
private var myLabelButton：LabelButton= new LabelButton(); 
public function ShowLabelButton (){
//定位button和设置大小

myLabelButton.setPosition(200,450);          
myLabelButton.width = 150; 
myLabelButton.height = 80;  

// 设置label属性
myLabelButton.label = "Login";
  
// 当button被点击，响应labelButtonClicked
myLabelButton.addEventListener(MouseEvent.CLICK, labelButtonClicked); 
//加 button 到舞台. 
this.addChild(myLabelButton);

// Create a new TextFormat instance. 
var buttonDownFormat:TextFormat = newTextFormat(); 
// Set font, size, color, alignment. 
buttonDownFormat.font = "Slate Pro"; 
buttonDownFormat.size = 30; 
buttonDownFormat.color = 0xFFFFFF; 
buttonDownFormat.align = TextAlign.CENTER; 
  
// Second format type. 
var buttonUpFormat:TextFormat = newTextFormat(); 
buttonUpFormat.font = "Slate Pro"; 
buttonUpFormat.size = 30; 
buttonUpFormat.color = 0xCC0000; 
buttonUpFormat.align = TextAlign.CENTER; 
  
// Third format type. 
var buttonDisabledFormat:TextFormat = newTextFormat(); 
buttonDisabledFormat.font = "Slate Pro"; 
buttonDisabledFormat.size = 30; 
buttonDisabledFormat.color = 0xCCCCCC; 
buttonDisabledFormat.align = TextAlign.CENTER;

// Apply formats to Button for different Button states. 
myLabelButton.setTextFormatForState(buttonDownFormat,SkinStates.DOWN); 
myLabelButton.setTextFormatForState(buttonUpFormat,SkinStates.UP); 
myLabelButton.setTextFormatForState(buttonDisabledFormat,SkinStates.DISABLED);
}

privatefunction labelButtonClicked(event:MouseEvent) { 
    // 输出click event到控制台. 
    trace("myLabelButton clicked!"); 
}
}
其实上面的代码都不复杂，有机会大家可以运行看看效果。

BlackBerry 10 AIR按钮介绍(5)

创建ToggleSwitch
下面用一个简单例子展示如何使用ToggleSwitch。

创建工程，在其中包含下列类
import qnx.fuse.ui.buttons.ToggleSwitch;
import flash.events.Event;

public class ShowToggleSwitch extends Sprite{private var myToggleSwitch:ToggleSwitch= new ToggleSwitch();     
public function ShowToggleSwitch (){

//定位和设置大小
myToggleSwitch.setPosition(200,450); 
myToggleSwitch.width = 200; 

//Set content for the text elements of the switch.
myToggleSwitch.defaultLabel = "NO"; 
myToggleSwitch.selectedLabel = "YES"; 

//Set padding spacing on displayed switch text. 
myToggleSwitch.labelPadding = 20;
  
//Call myToggleEvent function when switch is toggled. 
myToggleSwitch.addEventListener(Event.SELECT, myToggleEvent); 
  
//Add switch to stage. 
this.addChild(myToggleSwitch);
}

private function myToggleEvent(e:Event) {       
    //Output selection event to console. myToggleSwitch.selected  
    //returns true when button is in the active state. 
      if ( myToggle.selected == true ){ 
            trace("Toggle is ON"); 
      } 
      else{ 
            trace("Toggle is OFF"); 
      } 
}
}
BlackBerry 10 AIR按钮介绍(6)

创建SegmentedControl
下面的例子展示了如何使用SegmentedControl控件
 

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:"Mon"});
            buttonArray.push({label:"Tues"});
            buttonArray.push({label:"Thurs"});
            
            // 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);
            mySegment.addItem({label: "Fri" }); 
            // Add item to dataProvider at specific location. 
            mySegment.addItemAt({label: "Wed" }, mySegment.dataProvider.length -2); 
            // set the selected index to be the 3rd item in the dataProvider
            mySegment.selectedIndex = 3;
            // add the control to the display list
            this.addChild(mySegment);
        }
}
}