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
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Community Library Released for client side Dialog package (plus more)

Greetings Playbook Developers:

 

I have released a community library to address some short comings of the current SDK that might be useful to other developers.  As new releases of the SDK become available, some features of this library may be removed or added to as needed.  Community contributions to this library are welcomed.

 

The main purpose of the library is to allow a developer to work as much as possible outside of the simulator and develop within a standard AIR application.  Even if the simulator was bug free, the very nature of the speed to deploy an application to the simulator does not provide rapid code-test-code cycles.

 

DOWNLOAD FROM:
http://code.google.com/p/playbook-as3-lib/

 

DIALOG SYSTEM:
The main part of the library deals with the Dialog system.  The dialog system does not work as a client library but as a service only available on the simulator.  A complete API copy of the dialog system, as a client library is available.  A developer only need to include the SWC library and change the import paths and any existing dialog windows will be available as an AIR application.  The look of the dialog windows 100% matches the current SDK.  Some additional features were added to the API including:


 1) Ability to add icons
 2) "Standard" icons for uniformity
 3) Airtime alert mechanism
 4) Finer placement of the dialog
 5) Arbitrary sizing on top of the standard dialog sizes
 6) Complete event notification on button presses
 7) Default button style

 

Additionally, since the dialog system is client side, developers can extend and create their own dialog windows as needed.  The source is provided, so it should be easy to pick up and extend as needed.  If it is not, please let me know so we can make it better.

 

The source code falls under the GNU license.  You can modify as you need to for your own purposes, but we hope to incorporate changes for others to benefit from.  I have found in having the dialogs client side saves me considerable development time.

 

There is a PDF in the top of the archive that documents the dialog API with code examples.


TEXT INPUT:
Additionally, a client TextInput control was added to work around the latest SDK that has the TextInput reliant on PPS in a similar fashion as the current dialog system.  Did not want to do this, but not being able to test as an AIR application for applications that have TextInput fell under the same reason why the dialog system was redone.  Use the same way as the SDK TextInput.  It is not 100% complete in terms of API, but time will correct this.  The Style of the TextInput is nearly that of the SDK TextInput except they (BB/QNX) does a better job with the border.  Developers can decide in what to do with that, but I plan to use the library while in AIR and then switch to the native SDK TextInput for the production build and test.

 

Other Items in the Library include (but not documented):
1) TimePicker: Select a clock time.
2) PreferenceFile: Read/Write XML preference files more easily.
3) PageViewStack: Create any number of pages and tween from one to another from left/right or top/bottom.
4) List: Defaults and ability to show a border around the list
5) CheckBox: Easier method to set the color of the label

 

Please post comments, suggestions to this thread so that changes can be available to all and new updates to the library can be possible.

 

Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Community Library Released for client side Dialog package (plus more)

pretty good setup and solid build! thanks john :smileyhappy:

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
Developer
UberschallSamsara
Posts: 1,017
Registered: ‎12-29-2010
My Device: PlayBook, Z10 LE, Dev Alpha C

Re: Community Library Released for client side Dialog package (plus more)

Cool stuff; hope to take a look at it soon.  Anything that can cut slow steps out of design iterations is a good thing!

 

Your post got me thinking about what else would be useful to do outside the simulator and the first thing to come to mind is the bezel interaction.  I'm not experienced enough with AS3 to come up w/the solution but thinking about it a bit (and maybe some or a lot of this just wouldn't work, just speculating):

 

1) Template code to create a standard app dimension larger than the 1024x600 pixel array

2) A top level "bezel" display object container that contains the actual app stage as a child.  Maybe the app stage would have to be a pseudo stage and have to have some template-ish name other than "stage" (i.e. it would not be the actual stage of the desktop AIR hosted app but would be something that is easy to refactor for deployment to the simulator once design iterations have slowed down).

3) Custom event dispatchers to dispatch swipe events when the mouse drags down from the bezel object into the app's pseudo stage, to mimic what the simulator sends to the app.

 

Reading the Adobe ASDocs, Stage is a class and "stage" in your app is a reference to such a class, and I didn't see anything indicating that Stage is a singleton class.  So maybe an app pseudo stage could have all Stage methods.

 

Anyway, the basic idea is that maybe an easily refactored bit of template code could be wrapped around an app to allow faster design iterations involving the app menu & swipe gestures in ADL.

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: Community Library Released for client side Dialog package (plus more)

It might be possible to have an AIR application load the SWF and pass events to it for things like swipes, GPS, accelerometers, orientation changes, etc.  The message passing to the correct object would be the hard part.  I know as a module this could be done, just never tried it directly to a SWF.  Maybe some interface class that encapsulates certain things like QNXApplication, Device, GPS, etc.

 

Good idea.

Please use plain text.
Developer
UberschallSamsara
Posts: 1,017
Registered: ‎12-29-2010
My Device: PlayBook, Z10 LE, Dev Alpha C

Re: Community Library Released for client side Dialog package (plus more)

Fun with Tweeners:

 

In my local copy of PageViewStack.as I added the following:

 

In the class's constants declaratiions:

 

public static const ALPHA_XFADE : String = 'alpha-xfade';

 

 

 

At the end of PageViewStack.setPageIndex():

 

 

			else if( direction == ALPHA_XFADE )
			{
				page.alpha = 0.0;
				Tweener.addTween( this._current_page, {alpha:0.0,time:this.time} );
				Tweener.addTween( page, {alpha:1.0,time:this.time,onComplete:DonePage,onCompleteParams:[page]} );
			}

 

this can be a nice effect if your UI has a background image and you'd like to say crossfade it to a darkened and/or blurred version of the image, in order to momentarily bring the user's attention to the UI task they have chosen, and away from the awesomely pretty background image.

 

After playing with a few of these on some UI protos, I find the effect looks a bit clunky if the old and new page have UI buttons in the same location; might want to set visible = false on the old page's UI buttons before crossfading to the new page.

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: Community Library Released for client side Dialog package (plus more)

The text in the simulator does not change with the alpha level.  Works fine as an AIR application.  I registered this as an "issue" in the BB bug database and it is being looked into.  If that gets resolved on the PB, then cross fades like this will be cool.  Currently, you have to change the visibility before or after the effect depending on which way you are going.

Please use plain text.
Developer
UberschallSamsara
Posts: 1,017
Registered: ‎12-29-2010
My Device: PlayBook, Z10 LE, Dev Alpha C

Re: Community Library Released for client side Dialog package (plus more)

Oops.  Thanks for posting the bug report.  Obviously I had only tested this on the desktop.  Trying to do as much as possible there.

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: Community Library Released for client side Dialog package (plus more)

Reposted from another thread:

 

There is a library that includes PageViewStack that encapsulates pages that can be transitioned from one to another.

In your main sprite add an attribute:

private var stack : PageViewStack;

In the main constructor:

this.stack = new PageViewTack( this );
this.stack.time = 1.0; // duration of transition


For each "page" make it it's own class inherited from UIComponent.


In the main/root Sprite, add attributes for each page.


private var page1 : MyPage1;
private var page2 : MyPage2;


In the constructor, allocate these pages

this.page1 = new MyPage1();
this.page2 = new MyPage2();


Add the page to the page viewer. The first page added will be the default and will be shown automatically.

this.stack.addChild( this.page1 );
this.stack.addChild( this.page2 );


To move from one page to another, listen to an event from a swipe, button, list, etc. Just some user interaction.


For example, to move to page 1 ( from page 0 ) and have the page come in from the right (to left):


private function ShowPage2( event : Event ) : void
{

  this.stack.setPageIndex( 1, PageViewStack.RIGHT_LEFT );
}

Remember, array index starts at 0, so "page1" is at 0 index and "page 2" is at 1 index.


To go back to page 1 (index 0):


private function ShowPage1( event : Event ) : void
{
  this.stack.setPageIndex( 0, PageViewStack.LEFT_RIGHT );
}


You can also transition from top to bottom or bottom to top.


If you have a navigation/application bar along the top or bottom that is persistent no matter what page you are seeing, the class allows for "padding" on any side.

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: Community Library Released for client side Dialog package (plus more)

Sample FB4 project file to show the 2 page control of the PageViewStack class along with a singleton class for communication between the pages and the main root class.

Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Community Library Released for client side Dialog package (plus more)

Custom API + Examples!

 

examples are a great add on and should clear up any questions. thanks for the update john.

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.