Adobe AIR Development

[willfarnaby]

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.

[jtegen]

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.

[DT655]

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?

[jtegen]

Can you post the code that you are using to setup the dialog system and the code that shows the dialog?

[DT655]

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
}
			

[jtegen]

Are you setting the static function in your root class?
Should not matter, but try no spaces in the dialogSize ("300,230")

[DT655]

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.

[galaxyprune]

Hi, something i promised a while ago.

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

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;
		}
	}
}

[jtegen]

Are you setting the stage for the dialog package? In your root sprite, you need to call DialogBase.showOn = this.stage;

[DT655]

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