Adobe AIR Development

[osus]

It does the trick and can be used as a workaround but, to be honest, beta4 sdk worked much better, more agile, faster, better in general.

[osus]

Hi Paulo,

I'm sure I had it working but after some days it seems to stop working (don't ask me why). Same sample does not work now

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	
	import qnx.fuse.ui.actionbar.ActionBar;
	import qnx.fuse.ui.core.Action;
	import qnx.fuse.ui.core.TabAction;
	import qnx.fuse.ui.events.DragEvent;
	import qnx.fuse.ui.listClasses.List;
	import qnx.ui.data.DataProvider;
	
	public class TestPush extends Sprite
	{
		private var actionBarOverflow:Sprite;
		private var content:Sprite = new Sprite();
		
		public function TestPush()
		{
			super();
			
			// support autoOrients
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			var dp:DataProvider=new DataProvider();
			dp.addItem({"label":"item1"});
			dp.addItem({"label":"item2"});
			dp.addItem({"label":"item3"});
			dp.addItem({"label":"item4"});
			dp.addItem({"label":"item5"});
			dp.addItem({"label":"item6"});
			dp.addItem({"label":"item7"});
			dp.addItem({"label":"item8"});
			dp.addItem({"label":"item9"});
			dp.addItem({"label":"item10"});
			var list:List=new List();
			list.dataProvider=dp;
			
			actionBarOverflow = new Sprite();
			
			var actBar:ActionBar=new ActionBar();
			actBar.showTabsFirstOnBar(false);
			actBar.reserveActionSpace(true);
			actBar.backButton = null; 
			
			actBar.tabOverflowParent = actionBarOverflow;
			actBar.width=stage.stageWidth;
			actBar.showTabsFirstOnBar(false);
			actBar.addAction(new TabAction("TEST"));
			actBar.addAction(new TabAction("TEST2"));
			actBar.addAction(new Action("Test1"));
			actBar.addAction(new Action("Test2"));
			actBar.addAction(new Action("Test3"));
			
			addChild(actionBarOverflow);
			addChild( content );
			content.addChild(list);
			content.addChild(actBar);
			
			list.width=stage.stageWidth;
			list.x=0;list.y=0;
			actBar.x=0;
			actBar.y=stage.stageHeight-actBar.height;
			list.height=stage.stageHeight-actBar.height;
		}
	}
}

This is what I see now. Tab flow seems to be under de list, the black rectangle between list and action bar is what appears after showing  overflow.

I've made differents tests adding before/after the compoenents but I am not able to make it work. The best is to show the overflow but then it never gets hidden.

Any idea?

[pgarcia]

Hi

There are two things that are missing in the code, that I forgot to mention before.

You can see the Tab overflow under your content because the content is not covering the whole area above the ActionBar, and  your content object is supposed to cover it all. If you take a look at Julian's example on this other thread, you will see that he adds a bitmap in the content object before adding it to the main sprite:

content.addChild( new Bitmap( new BitmapData( stage.stageWidth, stage.stageHeight, false, 0xFFFFFFFF ) ) );
(...)
addChild(content);

Now, for the tab overflow really shows up, you have to move the content yourself while the tab overflow menu opens. You can do that adding an event listener to the ActionBar and move the content.x accordingly, like this:

(...)
    list.height=stage.stageHeight-actBar.height;
			
    actBar.addEventListener( DragEvent.DRAG_MOVE, onDragMove );
}
		
private function onDragMove( event:DragEvent ):void
{
    slideX += event.deltaX;
    content.x = Math.round( slideX + stage.stageWidth );
}

Here the result code:

public class TestPush extends Sprite
{
	private var actionBarOverflow:Sprite;
	private var content:Sprite = new Sprite();
	
	private var slideX:Number = 0;
			
	public function TestPush()
	{
		
		super();
		
		// support autoOrients
		stage.align = StageAlign.TOP_LEFT;
		stage.scaleMode = StageScaleMode.NO_SCALE;
		stage.addEventListener( Event.RESIZE, function( e:Event ):void
		{
			actBar.y = stage.stageHeight - actBar.height;
		} );
		
		content.addChild( new Bitmap( new BitmapData( stage.stageWidth, stage.stageHeight, false, 0xffffff ) ) );
		// support autoOrients
		stage.align = StageAlign.TOP_LEFT;
		stage.scaleMode = StageScaleMode.NO_SCALE;
		
		var dp:DataProvider=new DataProvider();
		dp.addItem({"label":"item1"});
		dp.addItem({"label":"item2"});
		dp.addItem({"label":"item3"});
		dp.addItem({"label":"item4"});
		dp.addItem({"label":"item5"});
		dp.addItem({"label":"item6"});
		dp.addItem({"label":"item7"});
		dp.addItem({"label":"item8"});
		dp.addItem({"label":"item9"});
		dp.addItem({"label":"item10"});
		var list:List=new List();
		list.dataProvider=dp;
		
		actionBarOverflow = new Sprite();
		
		var actBar:ActionBar=new ActionBar();
		actBar.showTabsFirstOnBar(false);
		actBar.reserveActionSpace(true);
		actBar.backButton = null; 
		
		actBar.tabOverflowParent = actionBarOverflow;
		actBar.width=stage.stageWidth;
		actBar.showTabsFirstOnBar(false);
		actBar.addAction(new TabAction("TEST"));
		actBar.addAction(new TabAction("TEST2"));
		actBar.addAction(new Action("Test1"));
		actBar.addAction(new Action("Test2"));
		actBar.addAction(new Action("Test3"));
		
		addChild(actionBarOverflow);
		addChild( content );
		content.addChild(list);
		content.addChild(actBar);
		
		list.width=stage.stageWidth;
		list.x=0;list.y=0;
		actBar.x=0;
		actBar.y=stage.stageHeight-actBar.height;
		list.height=stage.stageHeight-actBar.height;
		
		actBar.addEventListener( DragEvent.DRAG_MOVE, onDragMove );
	}
	
	private function onDragMove( event:DragEvent ):void
	{
		slideX += event.deltaX;
		content.x = Math.round( slideX + stage.stageWidth );
	}
}

Let me know if it works for you.

Cheers

[osus]

it works perfect now Paulo.

Thank you very much for your support!