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
willfarnaby
Posts: 41
Registered: ‎12-15-2010
My Device: Not Specified

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

Looks good !

 

Regarding the Dialog System... is it simply to be used for prototyping in lieu of having to deal with the simulator and its dialog, um...  framework ? Or is your Dialog System intended to be an actual (and apparently more expressive) replacement that runs on the PlayBook ?

 

The reason I ask is because dialog semantics include modality and involve the UI event queue, threading, etc.

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 was intended to have a dialog system that works in AIR.  In my apps, I use it in the simulator/device to get around problems with the QNX dialog system.  It is only modal in the application.  It could be modified to be non-modal.

 

QNX dialog package does not let the developer change what is in the dialog (other than labels), or allow them to stylize it.

 

I rarely go into the simulator to do development.  It is just too slow to do rapid coding.  I only use the simulator to do spot checks and final testing.  I am working towards being able to simulator all the functionality that interacts with the application in AIR.

 

I dont know what you mean by "threading" since Flash is not multi-threaded, but maybe you're using that in a different context.

Please use plain text.
Developer
DT655
Posts: 71
Registered: ‎04-27-2011
My Device: Bold 9700 and Playbook 64
My Carrier: Rogers

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

I am using the community library to show a prompt dialog box and return the input by the user on programs start.

 

It works fine in the desktop playbook simulator, but only works there.

 

when I debug the application in the vmware playbook simulator, it shows a white screen, and no dialog box.

 

any suggestions?

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)

Can you post the code that you are using to setup the dialog system and the code that shows the dialog?
Please use plain text.
Developer
DT655
Posts: 71
Registered: ‎04-27-2011
My Device: Bold 9700 and Playbook 64
My Carrier: Rogers

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

sure,

 

 

if (!password.data.string) {
	//Call create password dialog box
	var createPass:PromptDialog = new PromptDialog();
	createPass.title = "Create New Password";
	createPass.message = "Enter a new password to be used for PPV.";
	createPass.addButton("OK");
	createPass.addButton("Cancel");
	createPass.dialogSize = '300, 230';
	createPass.addEventListener(DialogEvent.DIALOG_BUTTON_CLICKED, createPass1);
	createPass.show();
} else {
	//Call enter password dialog box
}
			

 

 

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)

Are you setting the static function in your root class?
Should not matter, but try no spaces in the dialogSize ("300,230")
Please use plain text.
Developer
DT655
Posts: 71
Registered: ‎04-27-2011
My Device: Bold 9700 and Playbook 64
My Carrier: Rogers

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

yes, I have the function in my main class as follows... this works fine.

 

 

private function createPass1(event:PromptDialogEvent):void
{
	if (event.responseBtnText == 'OK')
	{
		trace (event.text);
		var tmpPassword:flash.net.SharedObject;
		tmpPassword.data.string = "ppv";
		tmpPassword.flush();
	} else {
	}
}

 although it is not static.... This does work completly fine though if I run it on desktop, just not on bb sim.

 

Please use plain text.
Contributor
galaxyprune
Posts: 45
Registered: ‎03-07-2011
My Device: Not Specified

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

Hi, something i promised a while ago.

 

This is not done 100%. Still tweaking some little bits. Maybe someone wants to enhance my solution? :smileyhappy:


Some remarks:

Why?

- There is no native PopOver control available. I tried to make it as easy to use as possible.

Does it use any assets?

-  It relies 100% on the vector drawing. This might change in future because the vector rendering (see other posts) is not that good.

What kind of License? What about Commercial usage?

- Do whatever you want with the code!

This is poor Actionscript!

- Sry, Native Developer here. (Gimme the NDK!). 

 

More comming soon...Have fun!

 

Sample usage:

 

var p1:PopOver = new PopOver();
			p1.setSize(350,400);
			p1.PointTo(cameraRollButton);
			p1.Header("PopOver");
			
			var arrMonth:Array=[];
			// add objects with a label property
			arrMonth.push({label: "January"});
			arrMonth.push({label: "February"});
			arrMonth.push({label: "March"});
			arrMonth.push({label: "April"});
			arrMonth.push({label: "May"});
			arrMonth.push({label: "June"});
			arrMonth.push({label: "July"});
			arrMonth.push({label: "August"});
			arrMonth.push({label: "September"});
			arrMonth.push({label: "October"});
			arrMonth.push({label: "November"});
			arrMonth.push({label: "December"});
			
			var myList:List = new List();                        
			myList.enableShadows = true;
			myList.sizeUnit = SizeUnit.PERCENT;
			myList.size = 100;
			
			//set the dataProvider
			myList.scrollDirection = ScrollDirection.VERTICAL;
			myList.dataProvider = new DataProvider(arrMonth);
			
			p1.Body(myList);
			var c1:Label = new Label();
			c1.text = "footer";
			p1.Footer(c1);
			this.addChild(p3);
			p1.Show();
			
// More simple example
			var p2:PopOver = new PopOver();
			p2.ArrowDirection = PopOver.TOP;
// Point to will use the boundaries of the provided displayobject  to position the arrow
			p2.PointTo(infoButton);
			// Set Body
			var b:Label = new Label();
			b.text = "Simple PopOver";
b.width = 200;
b.height = 200;
			b.wordWrap = true;
			p2.Body(b);
			this.addChild(p);
			p2.Show();

 

 

And the PopOver class:

 

package toolkit
{
	import caurina.transitions.Tweener;
	
	import flash.display.BitmapData;
	import flash.display.BitmapDataChannel;
	import flash.display.DisplayObject;
	import flash.display.GradientType;
	import flash.display.Shape;
	import flash.display.SpreadMethod;
	import flash.display.Sprite;
	import flash.filters.DropShadowFilter;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.utils.getDefinitionByName;
	
	import qnx.ui.core.Container;
	import qnx.ui.core.ContainerAlign;
	import qnx.ui.core.ContainerFlow;
	import qnx.ui.core.Containment;
	import qnx.ui.core.SizeUnit;
	import qnx.ui.text.Label;

	public class PopOver extends Container
	{
		// PopOver Default Properties
		private var _IsVisible:Boolean = false;
		private var _IsDirty:Boolean = true;
		private var _height:int = 200;
		private var _width:int = 350;
		
		private var _header:Container;
		private var _footer:Container;
		private var _body:Container;
		
		private var _arrow:Shape;
		
		// Actionscript 3 does not support enumerations like in C++ or Java.
		public static const LEFT:int = 270; 
		public static const RIGHT:int = 90; 
		public static const TOP:int = 0; 
		public static const BOTTOM:int = 180; 
		
		// Required for Animation
		private var InX:int = 0;
		private var InY:int = 0;
		private var OutX:int = 0;
		private var OutY:int = 0;
		
		public var ArrowDirection:int = TOP;
		private var _vessel:Vector.<int> = new Vector.<int>();
		
		private var mat:Matrix;
		private var bmp:BitmapData;
		
		// Create PopOver
		public function PopOver()
		{
			this.visible = false;
			this.alpha = 0;
			this.flow = ContainerFlow.VERTICAL;
			//this.debugColor = 0xffff00;
			this.margins = Vector.<Number>([0,0,0,0]);
			this.setSize(_width, _height);
			
			// Maybe we will need a header
			_header = new Container();
			//_header.debugColor = 0xff0000;
			_header.containment = Containment.DOCK_TOP;
			_header.sizeUnit = SizeUnit.PIXELS;
			_header.size = 0;
			
			// No Point without a body
			_body = new Container();
			//_body.debugColor = 0x00ff00;
			_body.margins = Vector.<Number>([0,0,0,0]);

			
			// Maybe we will need a footer
			_footer = new Container();
			//_footer.debugColor = 0x0000ff;
			_footer.containment = Containment.DOCK_BOTTOM;
			_footer.sizeUnit = SizeUnit.PIXELS;
			_footer.size = 0;
			
			// Arrow to indicate content
			_arrow = new Shape();
	
			this.addChild(_body);
			this.addChild(_arrow);
		}
		
		public function PointTo(obj:DisplayObject):void
		{
			if(obj != null)
			{
				switch(ArrowDirection)
				{
					case TOP:
						this.x = (obj.x+obj.width/2)-this.width/2;
						this.y = obj.y+obj.height+8;
						break;
					case RIGHT:
						this.x = obj.x-this.width-8;
						this.y = obj.y-this.height/2;
						break;
					case BOTTOM:
						this.x = (obj.x+obj.width/2)-this.width/2;
						this.y = obj.y-this.height-8;
						break;
					case LEFT:
						this.x = obj.x+obj.width+8;
						this.y = obj.y-this.height/2;
						break;
				}
				
				// Save properties for Arrow Drawing
				_vessel.push(obj.x,obj.y,obj.width,obj.height);
				
				// Position the PopOver within the visible stage nicely
				// Optimizations are welcome
				
				if(this.x < 10)this.x = 10;else if(this.x+this.width > 1024-10)this.x = 1024-this.width-10;
				if(this.y < 10)this.y = 10;else if(this.y > 600-10)this.y = 600-10;
				
			}
		}
		
		public function isDragAble(value:Boolean):void
		{
			trace("PopOver.isDragAble > NotImplemented");
		}
		
		public function Body(item:DisplayObject):void
		{
			_body.addChild(item);
			_IsDirty = true;
		}
		
		public function Footer(item:DisplayObject):void
		{
			_footer.size = item.height;
			_footer.addChild(item);
			if(!this.contains(_footer)) this.addChild(_footer);
			_IsDirty = true;
		}
		
		public function Header(item:Object):void
		{
			if(item != null)
			{
				if("String" == flash.utils.getQualifiedClassName(item))
				{
					var txt:String = (item as String);
					item = new Label();
					with (item)
					{
						text = txt;
						format = new TextFormat(null,24,0x333333,true,null,null,null,null,"center",5,5);
						width = _width;
						height = 36;
					}
				}
				_header.addChild(item as DisplayObject);
				_header.size = (item as DisplayObject).height;
				if(!this.contains(_header)) this.addChild(_header);
				_IsDirty = true;
			}
		}
		
		private function DrawHeader():void
		{
			mat = new Matrix();
			mat.createGradientBox(_header.width,_header.height,Math.PI/2);
			
			with(_header.graphics)
			{
				clear();
				lineStyle(2,0xB7B7B7);
				beginGradientFill(GradientType.LINEAR,[0xB7B7B7,0x999999],[1.0,1.0],[0,255],mat);
				drawRoundRectComplex(-1,-1,this.width+2,_header.height+2,10,10,0,0);
				endFill();
			}
		}
		
		private function DrawFooter():void
		{
			mat = new Matrix();
			mat.createGradientBox(_footer.width, _footer.height, Math.PI/2);
			
			with(_footer.graphics)
			{
				clear();
				lineStyle(2,0xB7B7B7);
				beginGradientFill(GradientType.LINEAR,[0x999999,0xB7B7B7],[1.0,1.0],[0,255],mat);
				drawRoundRectComplex(-1,-1,this.width+2,_footer.height+2,0,0,10,10);
				endFill();
			}
				
		}
		private function DrawBody():void
		{
			bmp = new BitmapData(100,100,true,0x50FF0000);
			bmp.noise(0,70,75); 
			
			with(this.graphics)
			{
				clear();
				lineStyle(2,0xB7B7B7);
				beginBitmapFill(bmp);
				drawRoundRectComplex(-1,-1,this.width+2,this.height+2,10,10,10,10);
				endFill();
			}
		}
		private function DrawArrow():void
		{
			with(_arrow.graphics)
			{
				clear();
				mat = new Matrix();
				mat.createGradientBox(20, 10, Math.PI/2);
				beginGradientFill(GradientType.LINEAR,[0xB4B4B4,0x979797],[1.0,1.0],[0,255],mat);
				moveTo(0,10);
				lineTo(10,0);
				lineTo(20,10);
				lineTo(0,10);
				endFill();
			}
			
			_arrow.rotation = ArrowDirection;
			
			switch(ArrowDirection)
			{
				case TOP:
					_arrow.y = -12;
					_arrow.x = _vessel[0]+_vessel[2]/2-this.x-10;
					break;
				case RIGHT:
					_arrow.y = _vessel[1]+_vessel[3]/2-this.y-10;
					_arrow.x = this.width+12;
					break;
				case BOTTOM:
					_arrow.y = this.height+12;
					_arrow.x = _vessel[0]+_vessel[2]/2;
					break;
				case LEFT:
					_arrow.y = _vessel[1]+_vessel[3]/2;
					_arrow.x = -12;
					break;
			}
			
		}
		public function Show():void
		{
			if(_IsDirty) Render();
			this.visible = true;
			Tweener.addTween(this, {alpha:0.95, y:InY, x:InX, time:0.5, transition:"exponential"});
		}
		
		public function Hide():void
		{
			Tweener.addTween(this, {alpha:0, y:OutY, x:OutX, time:0.5, transition:"exponential", 
				onComplete:function():void
				{
					this.visible = false;
				}});
		}
		
		private function Render():void
		{
			// Layout Container for proper rendering
			this.layout();
			
			// Set animation properties
			InX = this.x;
			InY = this.y;
			switch(ArrowDirection)
			{
				case TOP:
					OutX = this.x;
					OutY = this.y-10;
					break;
				case RIGHT:
					OutX = this.x+10;
					OutY = this.y;
					break;
				case BOTTOM:
					OutX = this.x;
					OutY = this.y+10;
					break;
				case LEFT:
					OutX = this.x-10;
					OutY = this.y;
					break;
			}
			
			// Header
			if(_header.size > 0) DrawHeader();
			
			// Body
			DrawBody();
			
			// Footer
			if(_footer.size > 0) DrawFooter();
			
			// Arrow
			DrawArrow();
			
			// Effects
			this.filters = [new DropShadowFilter(4,ArrowDirection+90,0,1,10,10,1,3)];
			
			_IsDirty = false;
		}
	}
}

 

 

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)

Are you setting the stage for the dialog package? In your root sprite, you need to call DialogBase.showOn = this.stage;
Please use plain text.
Developer
DT655
Posts: 71
Registered: ‎04-27-2011
My Device: Bold 9700 and Playbook 64
My Carrier: Rogers

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

yes as below:

 

 

public function PPV()
{
	super();
	DialogBase.showOn = this.stage;
			
	//DONE support autoOrients
	stage.align = StageAlign.TOP_LEFT;
	stage.scaleMode = StageScaleMode.NO_SCALE;

        ....

 thanks for your replies btw.

 

it works completely fine when I run it via desktop... just doesn't work in vmachine

 

Please use plain text.