Creating tabs

You can create as many tabs as your application needs. Here's how to create a tab containing a label using the AIR SDK.

  1. Create a new ActionScript file in your project and name it for your tab. For example, call it Tab1.as.
  2. In the Tab1.as file, define your package using its source location in your project.
    package qnx.samples.tabbedpane.tabs
    {
    }
  3. Import these APIs into your file.
    import qnx.fuse.ui.navigation.Page;
    import qnx.fuse.ui.titlebar.TitleBar;
  4. Extend the Page API in the primary class of your application.
    public class Tab1 extends Page
    	{
    		public function Tab1()
    		{
    		}
    	}
  5. Create a protected function that overrides the onAdded() function from qnx.fuse.ui.titlebar.TitleBar.
    override protected function onAdded():void
    {
    }
  6. In the onAdded() function, invoke the superclass.
    super.onAdded();
  7. In the onAdd() function, create your TabbedPane() and define your tab.
    			titleBar = new TitleBar();
    			titleBar.title = "Tab 1";
  8. To add a Label to your tab, import the API into your file.
    import qnx.fuse.ui.text.Label;
  9. In the main class, define your label.
    private var myLabel:Label;
  10. In the onAdd() function, create your label.
    myLabel = new Label();
  11. Specify the label text, position and width.
    myLabel.width=250;
    myLabel.x = 300; 
    
    myLabel.y = 150;
    myLabel.text = "This is a tab!";
  12. Add the label to the stage.
    addChild(myLabel);

Code sample: Tabs

package qnx.samples.tabbedpane.tabs
{
	import qnx.fuse.ui.navigation.Page;
	import qnx.fuse.ui.titlebar.TitleBar;

	public class Tab1 extends Page
	{
        private var myLabel:Label;
		public function Tab1()
		{
		}
		
		override protected function onAdded():void
		{
			super.onAdded();
			titleBar = new TitleBar();
			titleBar.title = "Tab 1";

            // Create a label
            myLabel = new Label();
 		   myLabel.width=250;
 
  		myLabel.x = 300; 
			myLabel.y = 150;
			myLabel.text = "This is a tab!";
 
           addChild(myLabel);  
		}
	}
}

Add an action to your tab

You can add actions to your tab to perform tasks or manipulate information on the tab. Here's how to create two actions to change the text of the label created in the previous example.

  1. In the Tab1.as file, import the APIs into your project.
    import qnx.fuse.ui.core.Action;
    import qnx.fuse.ui.core.ActionBase;
  2. Define your actions in the main class of the project.
    private var LabelChnge:Action;
    private var LabelReset:Action;
  3. In the onAdd() function, set the label and icon for each action menu item. To use the default icon, specify null.
    LabelChnge = new Action( "Change Label", null );
    LabelReset = new Action( "Reset Label", null );
  4. Create an action menu, and push the labels to the tab.
    var a:Vector.<ActionBase> = new Vector.<ActionBase>();
    a.push( LabelChnge);
    a.push( LabelReset );
    actions = a;
  5. Create a new public function that overides the onActionSelected function in the qnx.fuse.ui.core.ActionBase API.
    override public function onActionSelected( action:ActionBase ):void
    {
    }
  6. In the onActionSelected() function, invoke the superclass.
    super.onActionSelected( action );
  7. In the onActionSelected() function, define what happens when each action is pressed. In this example, when LabelChnge is triggered, the myLabel.text changes to "Hello World", and when the LabelReset action is triggered, the myLabel.text is changes to "This is a tab!".
    if( LabelChnge == action )
    {
    	myLabel.text = "Hello World";			
    }
    else if( LabelReset == action )
    {
    	myLabel.text = "This is a tab!";
    }
  8. In the onActionSelected() function, refresh the label.
    addChild(myLabel);  

Code sample: Tab with actions

package qnx.samples.tabbedpane.tabs
{
	import qnx.fuse.ui.navigation.Page;
	import qnx.fuse.ui.titlebar.TitleBar;
	import qnx.fuse.ui.core.Action;
	import qnx.fuse.ui.core.ActionBase;

	public class Tab1 extends Page
	{
		private var LabelChnge:Action;
		private var LabelReset:Action;
        private var myLabel:Label;
		public function Tab1()
		{
		}
		
		override protected function onAdded():void
		{
			super.onAdded();
			titleBar = new TitleBar();
			titleBar.title = "Tab 1";

            // Create a label
            myLabel = new Label();
 		   myLabel.width=250;
 
  		  myLabel.x = 300; 
			myLabel.y = 150;
			myLabel.text = "This is a tab!";
 
            addChild(myLabel);  

            LabelChnge = new Action( "Change Label", null );
			LabelReset = new Action( "Reset Label", null );
			
			var a:Vector.<ActionBase> = new Vector.<ActionBase>();
			a.push( LabelChnge);
			a.push( LabelReset );
			actions = a;
		}

    	override public function onActionSelected( action:ActionBase ):void
		{
			super.onActionSelected( action );
			
			if( LabelChnge == action )
			{
				myLabel.text = "Hello World";			
			}
			else if( LabelReset == action )
			{
				myLabel.text = "This is a tab!";
			}
            addChild(myLabel);  
        }
	}
}