Add tabs to your project

In Adobe AIR, you can create a TabbedPane object and Tab objects. Here's how to create the TabbedPane using the AIR SDK.

  1. Download the appframework.swc library, and add it to your project. Download the appframework.swc file from GitHub.
  2. Import the following APIs into your project.
    import qnx.fuse.ui.Application;
    import qnx.fuse.ui.navigation.Tab;
    import qnx.fuse.ui.navigation.TabbedPane;
  3. Import each tab file into your project. For this example, we will use three tabs created using the steps defined in Creating tabs.
    import qnx.samples.tabbedpane.tabs.Tab1;
    import qnx.samples.tabbedpane.tabs.Tab2;
    import qnx.samples.tabbedpane.tabs.Tab3;
  4. You need to extend the Application API in the primary class of your application.
    public class <ProjectName> extends Application
    {
    }
  5. Create a protected function that overrides the onAdd() function from qnx.fuse.us.Application.
    override protected function onAdded():void
    {
    }
  6. In the onAdd() function, invoke the superclass.
    super.onAdded();
  7. In the onAdd() function, create your TabbedPane() and define your tabs.
    var pane:TabbedPane = new TabbedPane();
    			
    var tabs:Vector.<Tab> = new Vector.<Tab>();
    			
    tabs.push( new Tab( "Tab 1", null, null, Tab1 ) );
    tabs.push( new Tab( "Tab 2", null, null, Tab2 ) );
    tabs.push( new Tab( "Tab 3", null, null, Tab3 ) );
    			
  8. In the onAdd() function, define your pane, specify the active tab.
    pane.tabs = tabs;
    pane.activeTab = tabs[ 1 ];
    scene = pane;

Code Sample: Add tabs to your project

package qnx.samples.tabbedpane
{
	import qnx.fuse.ui.Application;
	import qnx.fuse.ui.navigation.Tab;
	import qnx.fuse.ui.navigation.TabbedPane;
	import qnx.samples.tabbedpane.tabs.Tab1;
	import qnx.samples.tabbedpane.tabs.Tab2;
	import qnx.samples.tabbedpane.tabs.Tab3;

	public class TabbedPaneSample extends Application
	{
		public function TabbedPaneSample()
		{
		}

		override protected function onAdded():void
		{
			super.onAdded();
			
			var pane:TabbedPane = new TabbedPane();
			
			var tabs:Vector.<Tab> = new Vector.<Tab>();
			
			tabs.push( new Tab( "Tab 1", null, null, Tab1 ) );
			tabs.push( new Tab( "Tab 2", null, null, Tab2 ) );
			tabs.push( new Tab( "Tab 3", null, null, Tab3 ) );
			
			pane.tabs = tabs;
			pane.activeTab = tabs[ 1 ];
			scene = pane;
		}

	}
}

Specify an icon for a tab

You can specify an icon for a tab by specifying an image in the Tab class. To use the default icon, set the property to null.
  1. Import an image into your project.
  2. Define your image in your project.
    [Embed(source="TabIcon.png")] private var my_icon : Class;
  3. When you define your tab, specify your icon by using your variable.
    tabs.push( new Tab( "Tab 1", my_icon, null, Tab1 ) );