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
Highlighted
New Contributor
Posts: 6
Registered: ‎12-09-2010
My Device: Not Specified

Multiple Screen Application

Hi,

      I need to develop a multiscreen application on playbook. I refered the post "How to navigate the new page?" which is related to my need. But i am not satisfy with that post even though its marked as solved. If i add a new screen as a child, it added in to the same page(stage) . I need to push a new screen when some button action triggered by the user. If i close the new screen, the old screen should be shown to the user(Ex:In Blackberry we have UiApplication class to push and pop the screens).    Please help me on this.  My code is below.

 

Main Class:

package
{
 import Screen1.DcList;
 
 import flash.display.DisplayObjectContainer;
 import flash.display.Sprite;
 import flash.events.MouseEvent;
 import flash.text.TextField;
 import flash.text.TextFieldType;
 import flash.text.TextFormat;
 import flash.text.TextFormatAlign;
 
 import qnx.ui.buttons.Button;
 import qnx.ui.buttons.LabelButton;
 import qnx.ui.core.Container;
 import qnx.ui.core.ContainerAlign;
 import qnx.ui.core.ContainerFlow;
 import qnx.ui.core.Containment;
 import qnx.ui.listClasses.ScrollPane;
 import qnx.ui.text.Label;
 
 
 [SWF(width="1024", height="600", backgroundColor="#fffff", frameRate="30")]
 public class FirstApplication extends Sprite
 {
    
  public function FirstApplication()
  {
   
   var txtFormat:TextFormat = new TextFormat();
   txtFormat.bold = true;
   txtFormat.size = 20;
   txtFormat.color = 0xFFFFFF;  
   txtFormat.align = TextFormatAlign.LEFT;
   
   var scroSmiley FrustratedcrollPane = new ScrollPane();
   scro.visible=true;
   scro.borderColor=0x996600;//0xFF0000;
   scro.x=375;
   scro.y=30;
   scro.setSize(175,100);
   
   
   var loginContainer:Container = new Container();
   loginContainer.name="Login Details";
   loginContainer.setSize(300,200);
   loginContainer.align = ContainerAlign.NEAR;
   loginContainer.flow = ContainerFlow.VERTICAL;
   loginContainer.padding = 10;
   //loginContainer.containment = Containment.DOCK_RIGHT;   
   loginContainer.x = 375//(stage.stageWidth - loginContainer.width)/2;
   loginContainer.y = 100;//(stage.stageHeight - loginContainer.height)/2;
   
   var userName:Container = new Container();
   userName.name="User Name";
   //loginContainer.setSize(500,500);
   //userName.align = ContainerAlign.NEAR;
   userName.flow = ContainerFlow.HORIZONTAL;
   userName.padding = 50;
   userName.x = 300;
   userName.y = 200;
   //userName.containment = Containment.DOCK_RIGHT;    
   var userNameLabel:Label = new Label();
   userNameLabel.format = txtFormat;
   userNameLabel.text = "Username: ";
   userNameLabel.width = 150;
   
   var txtField:TextField = new TextField();
   txtField.border = true;
   txtField.width = 300;
   txtField.height = 40;
   txtField.visible = true;
   txtField.defaultTextFormat = txtFormat;
   txtField.multiline = true;
   txtField.borderColor=0xFFFFFF;   
   txtField.backgroundColor=0xFFFFFF;
   txtField.type = TextFieldType.INPUT;   
   txtField.text = "rameshl";
   txtField.x = userNameLabel.width+20;
   userName.addChild(userNameLabel);
   userName.addChild(txtField);
   
   var buttonHolder:Container = new Container();
   buttonHolder.name="Buttons";
   //loginContainer.setSize(500,500);
   //buttonHolder.align = ContainerAlign.NEAR;
   buttonHolder.flow = ContainerFlow.HORIZONTAL;
   buttonHolder.padding = 20;
   buttonHolder.containment = Containment.DOCK_RIGHT;
   buttonHolder.x = userName.x + 50;
   buttonHolder.y = userName.y + 100;
   
   var helloBut:LabelButton = new LabelButton();
   helloBut.label = "Login";
   helloBut.addEventListener(MouseEvent.CLICK,login);
   var closeBut:LabelButton = new LabelButton();
   closeBut.label = "Close";
   closeBut.x = helloBut.width+20;
   closeBut.addEventListener(MouseEvent.CLICK,closeApp);
   
   buttonHolder.addChild(helloBut);
   buttonHolder.addChild(closeBut);
   //closeBut.x = helloBut.width + 20;
   
   loginContainer.addChild(userName);
   loginContainer.addChild(buttonHolder);
   addChild(userName);
   addChild(buttonHolder);
   buttonHolder.layout();
   userName.layout();
   //addChild(loginContainer);
//   loginContainer.addChild(helloBut);
//   loginContainer.addChild(closeBut);
   
   //addChild(txtField);
   //scro.addScrollContent(userName); 
   //scro.addScrollContent(buttonHolder);
   
   //addChild(scro);   
   
   
   //loginContainer.layout();
   
   //stage.nativeWindow.visible=true;
  }
  
  private function closeApp(event:MouseEvent):void{
   stage.nativeWindow.close();
  }
  
  private function login(event:MouseEvent):void{
   
   var nextScreenSmiley Very HappycList;
   nextScreen = new DcList();
   //var displSmiley Very HappyisplayObjectContainer = new DisplayObjectContainer();
   //displ.addChild(nextScreen);
   addChild(nextScreen);
  }
 }
}

 

Second Page:

package Screen1
{
 import flash.display.Sprite;
 import flash.events.MouseEvent;
 
 import qnx.ui.buttons.LabelButton;
 import qnx.ui.listClasses.ScrollPane;
 
 [SWF(width="1024", height="600", backgroundColor="#fffff", frameRate="30")]
 public class DcList extends Sprite
 {
  public function DcList()
  {
   var scroSmiley FrustratedcrollPane = new ScrollPane();
   scro.visible=true;
   scro.borderColor=0x996600;//0xFF0000;
   scro.x=375;
   scro.y=30;
   scro.setSize(175,100);
   
   var helloBut:LabelButton = new LabelButton();
   helloBut.label = "Test";
   //helloBut.addEventListener(MouseEvent.CLICK,login);
   var closeBut:LabelButton = new LabelButton();
   closeBut.label = "Screen1";
   closeBut.x = helloBut.width+20;
   closeBut.addEventListener(MouseEvent.CLICK,closeApp);
   
   scro.addScrollContent(closeBut);
   addChild(scro);
  }
  
  private function closeApp(event:MouseEvent):void{
   stage.nativeWindow.close();
  }
 }
}

 

Thanks,

Ramesh.L

Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: Multiple Screen Application

Without pouring over your code, the general approach is to have each screen/page as its own display element (extend Sprite or UIComponent).  The first screen (be it login) is added to the main Sprite with addChild.  When some action happens (button or swipe), the "current" page is removed with removeChild and the "new" page is added with addChild.  when yo want to go back, the opposite will occur.

 

If you want to transition from one page to another, you need to add (addChild) the "new" page to the right of the screen (stage.stageWidth).  Without removing the "current" page, set the new page at x = stage.stageWidth, y = 0.  Use Tweener to slide both pages to the left so that:

Page 1 new x = -stage.stageWidth and Page 2 new x = 0.

 

To return to the original page, use Tweener so page 1 x = 0 and page 2 x = stage.stageWidth.  At the end of the tween (onComplete), then remove page 2 with removeChild.

 

Very simple encapsulating class can take a lot of the grunt work with this.

 

Hope this helps some.

New Contributor
Posts: 6
Registered: ‎12-09-2010
My Device: Not Specified

Re: Multiple Screen Application

Hi..

      Thanks for reply.. but i am confusing about this design method. How can we track our display object to remove and add(back and forth). Anyway I have started the development....  Lets see..

 

 

Thanks and Regards,

Ramesh.L

Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: Multiple Screen Application

Typically in the class that is managing the pages you keep an array of DisplayObjects that were added.  If you override addChild(...), you can maintain the array and then call super.addChild if it is the first page being added.  I also keep an attribute like _current_page (of type DisplayObject) so you know which is the current page.  So it is easy to move that page after setting a new page.  Something like (pseudo code):

 

 

///////////////////////////////////////////////////////////////
public function setPage( value : int ) : void
{
  var page : DisplayObject = this._pages[ value ] as DisplayObject;
  page.x = stage.stageWidth;
  super.addChild( page );

  Tweener.addTween( this._current_page, {x:-stage.stageWidth,onComplete:setNewPage(page)} );
  Tweener.addTween( page, {x:0} );
}

////////////////////////////////////////////////////////////
private function setNewPage( pg : DisplayObject ) : void
{
  super.removeChild( this._current_page );
  this._current_page = page;
}

////////////////////////////////////////////////////////////
override public function addChild( child : DisplayObject ) : DisplayObject
{
  this._pages.push( child );
  if( this._pages.length == 1 )
  {
    super.addChild( child );
    this._current_page = child;
  }
  return child;
}

 

 

New Developer
Posts: 12
Registered: ‎09-21-2009
My Device: Not Specified

Re: Multiple Screen Application

Hi,

 

I am creating an app with first screen having few buttons (Say Button 1,2 and 3) and when clciked each button opens a new page having their own functionality. I am successfully able to do that using Tweener.

 

I have few questions though. How do I achieve the following ? I just need to know the logic/concept or the class which I should use.

I want even the swipe on the first page towards right should open Page 1 and swipe on Page 2 should open Page 3 and swipe on Page 3 should bring back the home screen.

Same should happen in reverse manner for left swipe.

 

I also want to know whether Tweener will work on the Simulator (Just to let you know VMWare is not working on Vista 64 bit so I am still not able to test my application on simulator).

 

Appreciate your help.

 

Thanks,

Nitin 

Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: Multiple Screen Application

There is no QNX class to manage pages, but there is a library that allows you to manage pages as you describe (PageViewStack). Description of the library and in this case, sample FB4 project will show you an example:

 

http://supportforums.blackberry.com/t5/Tablet-OS-SDK-for-Adobe-AIR/Community-Library-Released-for-cl...

 

It might be good for you as-is or as a starting point.

 

Tweener works fine in the simulator.  The above mentioned class uses that as well.