blog.ashier.com http://blog.ashier.com flash / flex / air development Tue, 12 Aug 2008 14:48:52 +0000 http://wordpress.org/?v=2.6.1 en http://creativecommons.org/licenses/by/2.0/http://creativecommons.org/licenses/by/2.0/http://creativecommons.org/images/public/somerights20.gifSome Rights Reserved AMFPHP Advancements http://blog.ashier.com/2008/06/28/amfphp-advancements/ http://blog.ashier.com/2008/06/28/amfphp-advancements/#comments Fri, 27 Jun 2008 17:10:53 +0000 Ashier de Leon http://blog.ashier.com/?p=66 I still don’t know what new updates there may be, but I’m really glad that there are changes being done.

I’m looking forward to the changes in AMFPHP.

Thanks Wade.

]]> http://blog.ashier.com/2008/06/28/amfphp-advancements/feed/ PureMVC - SWFAddress Template http://blog.ashier.com/2008/05/14/puremvc-swfaddress-template/ http://blog.ashier.com/2008/05/14/puremvc-swfaddress-template/#comments Wed, 14 May 2008 12:03:18 +0000 Ashier de Leon http://blog.ashier.com/?p=64 I just noticed that the source code for Porting SWFAddress to PureMVC has been repackaged and modified by Pickle of http://allflashwebsite.com. Pickle made an awesome job converting it to a re-usable template for everyone. Wooooooot!

Go get the template now! View his post at http://allflashwebsite.com/article/pure-mvc-swfaddress-template-integrating-swfaddress-with-puremvc

]]> http://blog.ashier.com/2008/05/14/puremvc-swfaddress-template/feed/ Sending compressed bytes between as3 and PHP http://blog.ashier.com/2008/05/12/sending-compressed-bytes-between-as3-and-php/ http://blog.ashier.com/2008/05/12/sending-compressed-bytes-between-as3-and-php/#comments Mon, 12 May 2008 14:53:18 +0000 Ashier de Leon http://blog.ashier.com/?p=63 An awesome way to send compressed bytes outside of flash.

View link here.

]]> http://blog.ashier.com/2008/05/12/sending-compressed-bytes-between-as3-and-php/feed/ Deferred Instantiation http://blog.ashier.com/2008/04/07/deferred-instantiation/ http://blog.ashier.com/2008/04/07/deferred-instantiation/#comments Sun, 06 Apr 2008 19:22:48 +0000 Ashier de Leon http://blog.ashier.com/?p=61 Deferred instantiation is a common technique used to improve Flex application start-up time and to control when and how to instantiate child components within a container when the creationPolicy is set to none.

Last week, I was able to implement this into an application we're currently developing at work. It took me a while to figure it out but I must say, it is really handy. A ViewStack for example will allow switching from one child to another, but as the child of that container gets to be really complicated, it may highly affect your application's performance.

Why???
If no creationPolicy is specified for a container, that container inherits its parent's creationPolicy. If no creationPolicy is specified for the Application, it defaults to ContainerCreationPolicy.AUTO.

This is where Deferred Instantiation can save your day.

I have below a basic example of how you can implement Deferred Instantiation using createComponentFromDescriptor()

createComponentFromDescriptor allows you to create one child at a time.

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application
  3.     xmlns:mx="http://www.adobe.com/2006/mxml"
  4.     creationComplete="onCreationComplete()"
  5.     layout="absolute"
  6.     xmlns:components="components.*">
  7.    
  8.     <mx:Script>
  9.         <![CDATA[
  10.        
  11.             import mx.core.Container;
  12.             import mx.core.UIComponentDescriptor;
  13.             import mx.controls.Button;
  14.            
  15.             private var vsChildren:Array = new Array();
  16.            
  17.             private function onCreationComplete():void {
  18.                 for(var i:int = 0; i <vs.childDescriptors.length; i++) {
  19.                    
  20.                     var lbl:String = "";
  21.                     var descriptor:UIComponentDescriptor = UIComponentDescriptor(vs.childDescriptors[i]);
  22.                     var item:Button = new Button();
  23.                    
  24.                     item.addEventListener(MouseEvent.CLICK, onClick);
  25.                     item.label = descriptor.properties.label;
  26.                     item.data = {index:i};
  27.                     cb.addChild(item);
  28.                 }
  29.             }
  30.            
  31.             private function onClick(e:MouseEvent):void {
  32.                 var index:int = e.target.data.index;
  33.                 if(!vsChildren[index]) {
  34.                     vsChildren[index] = vs.createComponentFromDescriptor(vs.childDescriptors[index], true) as Container
  35.                     vs.selectedChild = vsChildren[index];
  36.                     vs.validateNow();
  37.                 }else {
  38.                     vs.selectedChild = vsChildren[index];
  39.                 }
  40.             }
  41.            
  42.         ]]>
  43.     </mx:Script>
  44.     <mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
  45.         <mx:HBox id="cb" width="100%"  horizontalAlign="center" verticalAlign="middle"/>
  46.         <mx:ViewStack id="vs" width="100%" creationPolicy="none" height="100%">
  47.             <components:Red label="Red" width="100%" height="100%" />
  48.             <components:Green label="Green" width="100%" height="100%" />
  49.             <components:Blue label="Blue" width="100%" height="100%" />
  50.         </mx:ViewStack>
  51.     </mx:VBox>
  52. </mx:Application>

SWF:
(Please open the article to see the flash file or player.)

Download the source code here

]]> http://blog.ashier.com/2008/04/07/deferred-instantiation/feed/ Hiding Properties in Flex Components http://blog.ashier.com/2008/03/25/hiding-properties-in-flex-components/ http://blog.ashier.com/2008/03/25/hiding-properties-in-flex-components/#comments Tue, 25 Mar 2008 09:50:02 +0000 Ashier de Leon http://blog.ashier.com/2008/03/25/hiding-properties-in-flex-components/ When creating Flex components, all child components (buttons, combobox, etc..) you add are always publicly accessible. There is a way to hide this and this is by using the Metadata tag "Exclude"

Here is a common Flex Component Example:

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
  3.     <mx:Button x="167.5" y="146" label="Click Me" id="btn"/>
  4. </mx:Canvas>

In the example above, "btn" property is publicly accessible outside that component. For you to hide it, you must add an "Exclude" metadata tag.

Here's is an example:

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
  3.     <mx:Metadata>
  4.         [Exclude(name="btn", kind="property")]
  5.     </mx:Metadata>
  6.     <mx:Button x="167.5" y="146" label="Button" id="btn"/>
  7. </mx:Canvas>

Now, the "btn" property won't be accessible outside that component. will still be accessible but it won't show up in the code hinting. Thanks to Sid Maskit for pointing this out.

Sid Maskit provided ways on how to do this not using the [Exclude] metadata/

Other Exclude kinds are

[Exclude(name="direction", kind="property")]
[Exclude(name="setFocus", kind="method")]
[Exclude(name="focusIn", kind="event")]
[Exclude(name="horizontalGap", kind="style")]
[Exclude(name="focusInEffect", kind="effect")]

Resource Blog

]]> http://blog.ashier.com/2008/03/25/hiding-properties-in-flex-components/feed/ SWFAddress Ported to PureMVC - Updated for PureMVC 2.0.1 http://blog.ashier.com/2008/03/13/swfaddress-ported-to-puremvc-updated-for-puremvc-201/ http://blog.ashier.com/2008/03/13/swfaddress-ported-to-puremvc-updated-for-puremvc-201/#comments Wed, 12 Mar 2008 20:20:18 +0000 Ashier de Leon http://blog.ashier.com/2008/03/13/swfaddress-ported-to-puremvc-updated-for-puremvc-201/ I have updated my "SWFAddress Ported to PureMVC" example to support PureMVC 2.0.1

You can view the post here or if you want just download the latest file here.

]]> http://blog.ashier.com/2008/03/13/swfaddress-ported-to-puremvc-updated-for-puremvc-201/feed/ Wrapper Class for a RemoteObject http://blog.ashier.com/2008/03/06/wrapper-class-for-a-remoteobject/ http://blog.ashier.com/2008/03/06/wrapper-class-for-a-remoteobject/#comments Thu, 06 Mar 2008 12:41:56 +0000 Ashier de Leon http://blog.ashier.com/2008/03/06/wrapper-class-for-a-remoteobject/ There are alot of ways to connect to a remote service in Flex / Flash.

You can do it tag based:

PLAIN TEXT
Actionscript:
  1. <mx:Application
  2.     xmlns:mx="http://www.adobe.com/2006/mxml"
  3.     layout="absolute">
  4.    
  5.     <mx:RemoteObject id="blazeService" fault="onFault(event)" source="hello.Hello" endpoint="http://localhost:8400/hello/messagebroker/amf/" destination="Hello">
  6.         <mx:method name="sayHello" result="onResult(event)" />
  7.     </mx:RemoteObject>
  8.  
  9.     <mx:Script>
  10.    
  11.         <![CDATA[
  12.             import mx.messaging.channels.AMFChannel;
  13.             import mx.rpc.events.ResultEvent;
  14.             import mx.rpc.events.FaultEvent;
  15.            
  16.             private function onResult(e:ResultEvent):void {
  17.                 trace("Result" + e.result);
  18.             }
  19.            
  20.             private function onFault(e:FaultEvent):void {
  21.                 trace("fault");
  22.             }
  23.         ]]>
  24.     </mx:Script>
  25.    
  26. </mx:Application>

or actionsript based:

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application
  3.     xmlns:mx="http://www.adobe.com/2006/mxml"
  4.     layout="absolute"
  5.     creationComplete="onCreationComplete()">
  6.    
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.rpc.events.FaultEvent;
  10.             import mx.rpc.events.ResultEvent;
  11.             import mx.messaging.ChannelSet;
  12.             import mx.messaging.channels.AMFChannel;
  13.             import mx.rpc.remoting.RemoteObject;
  14.            
  15.             private var ro:RemoteObject;
  16.             private function onCreationComplete():void {
  17.                
  18.                 var channelSet:ChannelSet = new ChannelSet();
  19.                 var amfChannel:AMFChannel = new AMFChannel();
  20.                 ro = new RemoteObject();
  21.                
  22.                 ro.addEventListener(ResultEvent.RESULT, onResult);
  23.                 ro.addEventListener(FaultEvent.FAULT, onFault);
  24.                
  25.                 amfChannel.uri = "http://localhost:8400/hello/messagebroker/amf/";
  26.                 channelSet.channels = [amfChannel];
  27.                
  28.                 ro.channelSet = channelSet;
  29.                 ro.source = "hello.Hello";
  30.                 ro.destination = "Hello";
  31.                 ro.getOperation("sayHello").send();
  32.                
  33.             }
  34.            
  35.             private function onResult(e:ResultEvent):void {
  36.                 trace("Result" + e.result);
  37.             }
  38.            
  39.             private function onFault(e:FaultEvent):void {
  40.                 trace("fault");
  41.             }
  42.            
  43.         ]]>
  44.     </mx:Script>
  45.    
  46. </mx:Application>

But eventually, you'll be required to re-use the code. There are a lot of ways to do this. You may extend the RemoteObject Class or wrap it in another class. It's up to you to decide which way you want. Anyway..

Here's the wrapper class.

RemoteObjectWrapper.as

PLAIN TEXT
Actionscript:
  1. package {
  2.    
  3.     import flash.events.EventDispatcher;
  4.    
  5.     import mx.messaging.ChannelSet;
  6.     import mx.messaging.channels.AMFChannel;
  7.     import mx.rpc.events.FaultEvent;
  8.     import mx.rpc.events.ResultEvent;
  9.     import mx.rpc.remoting.RemoteObject;
  10.    
  11.     public class RemoteObjectWrapper extends EventDispatcher {
  12.        
  13.         public function RemoteObjectWrapper (endpoint:String = null) {
  14.             super();
  15.             if(endpoint) {
  16.                 _endpoint = endpoint;
  17.                 initializeRemoteObject();
  18.             }
  19.         }
  20.        
  21.         private var remoting:RemoteObject;
  22.         protected function initializeRemoteObject():void {
  23.             try {
  24.                 remoting = new RemoteObject();
  25.                 remoting.addEventListener(ResultEvent.RESULT, onResult);
  26.                 remoting.addEventListener(FaultEvent.FAULT, onFault);
  27.                
  28.                 var channelSet:ChannelSet = new ChannelSet();
  29.                 var amfChannel:AMFChannel = new AMFChannel();
  30.                 amfChannel.uri = _endpoint;
  31.                 channelSet.channels = [amfChannel];
  32.                 remoting.channelSet = channelSet;
  33.                 remoting.source = _source;
  34.                 remoting.destination = _destination;
  35.             }catch(e:Error) {}
  36.         }
  37.        
  38.         public function send(method:String, param:Object = null):void {
  39.             if(!remoting) {
  40.                 initializeRemoteObject();
  41.             }
  42.             if(param) {
  43.                 remoting.getOperation(method).send(param);
  44.             }else {
  45.                 remoting.getOperation(method).send();
  46.             }
  47.         }
  48.        
  49.         private function onResult(result:ResultEvent):void {
  50.             dispatchEvent(new RemoteObjectWrapperEvent(RemoteObjectWrapperEvent.RESULT, result.result));
  51.         }
  52.        
  53.         private function onFault(fault:FaultEvent):void {
  54.             dispatchEvent(new RemoteObjectWrapperEvent(RemoteObjectWrapperEvent.FAULT, fault.fault));
  55.         }
  56.        
  57.         private var _endpoint:String;
  58.         public function set endpoint(_g:String):void {
  59.             _endpoint = _g;
  60.         }
  61.        
  62.         public function get endpoint ():String {
  63.             return _endpoint;
  64.         }
  65.        
  66.         private var _destination:String;
  67.         public function set destination(_g:String):void {
  68.             _destination = _g;
  69.         }
  70.        
  71.         public function get destination ():String {
  72.             return _destination;
  73.         }
  74.        
  75.         private var _source:String;
  76.         public function set source(_g:String):void {
  77.             _source = _g;
  78.         }
  79.        
  80.         public function get source ():String {
  81.             return _source;
  82.         }
  83.        
  84.     }
  85. };

and the event:

RemoteObjectWrapperEvent.as

PLAIN TEXT
Actionscript:
  1. package {
  2.    
  3.     import flash.events.Event;
  4.    
  5.     public class RemoteObjectWrapperEvent extends Event {
  6.    
  7.         public static const RESULT:String = "result";
  8.         public static const FAULT:String = "fault";
  9.        
  10.         public var data:Object = new Object();
  11.        
  12.         public function RemoteObjectWrapperEvent (type:String, _data:Object){
  13.             super(type);
  14.             data = _data;
  15.         }
  16.  
  17.         override public function clone():Event {
  18.                return new RemoteObjectWrapperEvent(type, data);
  19.         }
  20.  
  21.     }
  22.  
  23. }

sample usage:

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application
  3.     xmlns:mx="http://www.adobe.com/2006/mxml"
  4.     creationComplete="onCreationComplete()"
  5.     layout="absolute">
  6.    
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import RemoteObjectWrapperEvent;
  10.             import RemoteObjectWrapper;
  11.            
  12.             private var ro:RemoteObjectWrapper;
  13.             private function onCreationComplete():void {
  14.                 ro = new RemoteObjectWrapper();
  15.                 ro.addEventListener(RemoteObjectWrapperEvent.RESULT, onResult);
  16.                 ro.addEventListener(RemoteObjectWrapperEvent.FAULT, onFault);
  17.                 ro.endpoint = "http://localhost:8400/hello/messagebroker/amf/";
  18.                 ro.source = "hello.Hello";
  19.                 ro.destination = "Hello";
  20.                
  21.                 ro.send("sayHello");
  22.                
  23.             }
  24.            
  25.             private function onResult(e:RemoteObjectWrapperEvent):void {
  26.                 trace("Result" + e.data);
  27.             }
  28.            
  29.             private function onFault(e:RemoteObjectWrapperEvent):void {
  30.                 trace("fault");
  31.             }
  32.            
  33.         ]]>
  34.     </mx:Script>
  35.    
  36. </mx:Application>

So, I think you see the difference. For me, having a wrapper class makes the code a lot more easy to understand, will lessen errors that might occur, and the nicest thing is you have a code that is easy to maintain.

If you don't want to add compiler options, this is the also one way to do it.

~ Ashier

]]> http://blog.ashier.com/2008/03/06/wrapper-class-for-a-remoteobject/feed/ “BlazeDS Revealed!”, with Tom Jordahl of Adobe http://blog.ashier.com/2008/02/29/blazeds-revealed-with-tom-jordahl-of-adobe/ http://blog.ashier.com/2008/02/29/blazeds-revealed-with-tom-jordahl-of-adobe/#comments Fri, 29 Feb 2008 09:45:17 +0000 Ashier de Leon http://blog.ashier.com/2008/02/29/blazeds-revealed-with-tom-jordahl-of-adobe/ Today I attended an online meeting where Tom Jordahl of Adobe presented BlazeDS.

Here is a description of BlazeDS provided by Tom Jordahl:

Recently Adobe announced the release of BlazeDS which will make some key server technologies open source and free to use in any application. These technologies are critical to building great applications with Flex and AIR. Tom will talk about exactly what you get in BlazeDS and how it relates to LiveCycle Data Services and will detail some of the reasons why you might want to use these server technologies. He will also explain how ColdFusion developers can take advantage of BlazeDS in their applications.

The presentation lasted almost an hour and it was really fun. It was a great presentation and I'm looking forward for another BlazeDS related presentation.

The whole meeting was recorded. If you're interested, you can view the presentation here.

]]> http://blog.ashier.com/2008/02/29/blazeds-revealed-with-tom-jordahl-of-adobe/feed/