Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
New Developer
ramesh_bh
Posts: 47
Registered: ‎11-25-2010
My Device: Not Specified

How to create a tabs?

I want to create a tabs in my applicaiton, i found mx tab navigator, but i could not used in our playbook.

do we have any class related to this, if so please let me know. Please help

Please use plain text.
Developer
gluth
Posts: 192
Registered: ‎09-23-2009
My Device: 9860/PlayBook/Dev Alpha
My Carrier: Plus GSM

Re: How to create a tabs?

I would implement such idea like that:

 - main container - which will be reacting to all events and will switch screens

    - horizontal list - in TOP placeholder of contaner, it may contain screens to be switched, selection of this list will triger currently selected screen change

    - currently selected tab/screen - in 100% CONTAINED mode, replaced each time when list selection will change

 

Hope this helps.

Found my post helpfull? Like it! It solves your trouble? Help others and accept it as solution. Search before asking.
My apps: Secret Cod3s | Should my tablet be banned?
--
Jakub Nietrzeba
PGS Software S.A.
Your reliable partner in Poland - IT Outsourcing - BlackBerry, iPhone, Web and Standalone applications
Please use plain text.
New Developer
ramesh_bh
Posts: 47
Registered: ‎11-25-2010
My Device: Not Specified

Re: How to create a tabs?

Can you please post some lines of code, so that i can go ahead ...

Please use plain text.
Developer
gluth
Posts: 192
Registered: ‎09-23-2009
My Device: 9860/PlayBook/Dev Alpha
My Carrier: Plus GSM

Re: How to create a tabs?

Not in next 10h, I don't have dev env on this machine.

Found my post helpfull? Like it! It solves your trouble? Help others and accept it as solution. Search before asking.
My apps: Secret Cod3s | Should my tablet be banned?
--
Jakub Nietrzeba
PGS Software S.A.
Your reliable partner in Poland - IT Outsourcing - BlackBerry, iPhone, Web and Standalone applications
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: How to create a tabs?

Psedo code ideas:

 

  1. Create vertical container
  2. Add SegmentedControl along the top
  3. Override addChild function to cache an array of children but only really add the first child by calling super.addChild(...).  For each added child, update the dataProvider of the SegmentedControl.  Use the methods from DataContainer to help append (e.g. addItem(...) ).
  4. Add event listener from the SegmentedControl and change bottom view with the child at selectedIndex of the SegmentedControl.  Do that by removeChild(...) of this.getChildAt(this.numChildren-1) and super.addChild(...).

That should give you a tab control in theory.

 

Hope that helps.

Please use plain text.
Developer
pyth
Posts: 506
Registered: ‎01-19-2011
My Device: My Trusty Red Plane
My Carrier: Outer Space

Re: How to create a tabs?

I whipped up a piece of code for those who are also trying to do this (like me, who searched and found this thread). You need to know how to use containers though. It's also far from being perfect, but it shows what you need to do.

 

 

package
{
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

import qnx.ui.buttons.SegmentedControl;
import qnx.ui.core.Container;
import qnx.ui.core.ContainerFlow;
import qnx.ui.core.Containment;
import qnx.ui.core.SizeUnit;
import qnx.ui.data.DataProvider;
import qnx.ui.skins.buttons.RoundedButtonSkinBlack;
import qnx.ui.skins.buttons.SegmentedControlSkinBlack;
import qnx.ui.text.Label;


[SWF(height="600", width="1024", frameRate="30", backgroundColor="#ffffff")]
public class Tabs extends Sprite
{
private var base:Container, top:Container, bottom:Container;
private var containers:Array = new Array;
private var mySegment:SegmentedControl;

public function Tabs()
{
// create an array for the segmented control with objects
//that have label properties
var buttonArray:Array=[];
buttonArray.push({label:"Monday"});
buttonArray.push({label:"Tuesday"});
buttonArray.push({label:"Wednesday"});
buttonArray.push({label:"Thursday"});
buttonArray.push({label:"Friday"});

// create a segemented control
mySegment = new SegmentedControl();
mySegment.width = 1024;
// set the data provider
mySegment.dataProvider = new DataProvider(buttonArray);

base = new Container();
base.debugColor = 0x00ffff;
base.margins = Vector.<Number>([10,10,10,10]);
base.flow = ContainerFlow.VERTICAL;

top = new Container();
top.debugColor = 0xffff00;
top.margins = Vector.<Number>([10,10,10,10]);
top.size = 50;
top.sizeUnit = SizeUnit.PERCENT;
top.containment = Containment.DOCK_TOP;
top.flow = ContainerFlow.HORIZONTAL;

bottom = new Container();
bottom.debugColor = 0xff0000;
bottom.margins = Vector.<Number>([10,10,10,10]);
bottom.size = 50;
bottom.sizeUnit = SizeUnit.PERCENT;
bottom.containment = Containment.DOCK_BOTTOM;

//creating the tab contents
for (var i:Number = 0; i < 5; i++)
{
var con:Container = new Container();
con.debugColor = (0x00ff00 / 5) * (i + 1);
con.margins = Vector.<Number>([10,10,10,10]);
var l:Label = new Label();
l.text = "Blah " + i;
con.addChild(l);
containers.push(con);
}

// setting a predefined value
mySegment.selectedIndex = 0;
bottom.addChild(containers[0] as DisplayObject);
mySegment.addEventListener(MouseEvent.CLICK, setTab);


// add the control to the disply list
top.addChild(mySegment);
base.addChild(top);
base.addChild(bottom);

addChild(base);
base.setSize(stage.stageWidth,stage.stageHeight);
}

private function setTab(e:Event):void
{
bottom.removeChildAt(0);
bottom.addChild(containers[mySegment.selectedIndex] as DisplayObject);
trace(bottom.numChildren);
bottom.layout();
}
}
}

 have fun!

 

 

 

-----------------------------------------------------------------------
I'm a bird from outer space. But I'm not flappy o.o
Please use plain text.
Contributor
sillyPanda
Posts: 42
Registered: ‎02-23-2011
My Device: Not Specified

Re: How to create a tabs?

Hi,

 

Thanks for sharing the code. It do works.

However, I encountered a strange issue when I tried to apply customized button skin to my customized labelbuttons, the skin settings did not take affect.

 

Only the label, width and height etc can be applied for the buttons.

 

I tried same skin on buttons which are outside of segmentcontrol, the skin settings do applied.

 

 

Any Idea?

 

Thanks in advance for the help.

 

 

Code Snapshot:

 

===============================

(1) In TabBar class, creating my own buttons

 

            var buttonArray:Array=[];
            
            var button1:MyButton = new MyButton("Tab1");
            var button2:MyButton = new MyButton("Tab2");
            var button3:MyButton = new MyButton("Tab3");
            var button4:MyButton = new MyButton("Tab4");
            var button5:MyButton = new MyButton("Tab5");
            
            buttonArray.push(button1);
            buttonArray.push(button2);
            buttonArray.push(button3);
            buttonArray.push(button4);
            buttonArray.push(button5);

 

(2) In MyButton class,

 

    public class MyButton extends LabelButton
    {
        public function MyButton(label:smileyfrustrated:tring)
        {
            super();          
            
            
            this.label = label;
            
            this.height = 35;
            
            this.width = 70;
            
            // var mySkin:MySkin = new MySkin(colors:MyColorsSet);
            var mySkin:MySkin = new MySkin();
            this.setSkin(mySkin);
        }
    }

 

(3) In MySkin Class

 

        override protected function initializeStates():void
        {
            
            upSkin = new Sprite();
            upSkin.graphics.beginFill(0xFF6600);
            upSkin.graphics.drawRoundRect(0,0,200,200, 4, 4);
            upSkin.graphics.endFill();
            
            downSkin = new Sprite();
            downSkin.graphics.beginFill(0x333333);
            downSkin.graphics.drawRoundRect(0,0,200,200, 4, 4);
            downSkin.graphics.endFill();
            
            disabledSkin = new Sprite();
            disabledSkin.graphics.beginFill(0xCC0000);
            disabledSkin.graphics.drawRoundRect(0,0,200,200, 4, 4);
            disabledSkin.graphics.endFill();
            
            selectedSkin = new Sprite();
            selectedSkin.graphics.beginFill(0x000000);
            selectedSkin.graphics.drawRoundRect(0,0,200,200, 4, 4);
            selectedSkin.graphics.endFill();
            
            
            setSkinState(SkinStates.UP, upSkin );
            setSkinState(SkinStates.SELECTED,selectedSkin );
            setSkinState( SkinStates.DISABLED, disabledSkin );
            setSkinState( SkinStates.DOWN, downSkin );
            showSkin( upSkin );            
        }

Please use plain text.