Site of the Day 8/16/2010

AMF for the Apple iPhone

http://egnaro.com/post.cfm/amf-for-iphone

Site of the Day 7/31/2010

Here is good link concerning learning Flex features.

http://flexonblog.wordpress.com/

Site of the Day 7/29/2010

I’m going to explain how to send data from main Flex mxml file to a custom component. 

[UPDATE]

I’ll add some code to change components in the parent application from the custom component.

[CC]

ex.)

parentApplication.idhdivbox1.getDividerAt(0).visible = true;

or

parentApplication.[ID].[property or methods] = [value];

Lessons Learned : Try to keep the code inside the custom component small and send data (property) to the CC from the main mxml. Only if one can’t perform outside the custom component should you add ActionScript inside it. 

1.) Main mxml 

A.) Refer to custom component.

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;

xmlns:flexiframe=”com.google.code.flexiframe.*” 

xmlns:cpanel=”usa_components.*” 

horizontalAlign=”center” verticalAlign=”middle” 

left=”0″ top=”0″ 

applicationComplete=”onApplicationComplete(‘1’); ” 

viewSourceURL=”srcview/index.html” > 

B.) Setup bindable xml to custom component property. 

[Bindable] 

public var b_treexml:XMLListCollection = new XMLListCollection; 

C.) Put results from server into data provider of Tree component which is in the custom component. The first statement loads the results into the data provider. The second statement loads the results into a bindable var inside the custom components, so I can ‘EXPAND’ the tree at a 

public function set_tree1(e:ResultEvent):void {  

idCpanel.idtree.dataProvider = e.result; 

idCpanel.treeData2 = e.result as XML; 

} // end of set tree…. 

2.) Using custom component on main mxml 

<cpanel:cPanel prop1=”1″ prop2=”{b_treexml}” /> 

3.) Custom component 

A.) Setup bindable variables. 

// bindable variables

[Bindable

public var prop1:String; 

[Bindable

public var prop2:XMLListCollection; 

[Bindable

public var treeData2:XML; 

B.) I have a ‘EXPAND ALL’ button to expand the tree.

// open all nodes – tree2private function openAllNodes2():void {

 idtree.openItems = treeData2..*;

} // end of open all nodes….

<mx:Button label=”Expand ALL” click=”openAllNodes2();”

useHandCursor=”true” buttonMode=”true” mouseChildren=”false” />

C.) Here is the code for the Tree component inside the CC. Notice the ID.

<mx:Tree width=”100%” height=”100%”

dataProvider=”{prop2}”

labelField=”@label”

showRoot=”false”

change=”iFrame.source = (Tree(event.target).selectedItem.attribute(‘path’).toString());”

itemClick=”tree_itemClick(event);” />

Site of the Day 6/21/2010

Here is a great site from Adobe about learning about their products.

http://tv.adobe.com/

Flex Remote Object examples

  • I’m going to put my notes on how to have RemoteObject work for Adobe Flex Builder 3 for the desktop and server.  I personally like the idea of coding on the server since there are less surprises.
  • 1.) Creating an Application from your desktop 

  • Following these steps when creating your flex project. project name : test_rs1 project location : d:\\cf9\wwwroot\apps\flex\test_rs1 

    Application Type : Web Application 

    Application server type: ColdFusion 

    Use remote object access service [ checked ] 

    ColdFusion Flash Remoting [ checked ] 

    ColdFusion Installation type: standalone 

    Web Root: d://cf9/wwwroot 

    Root URL: http://localhost:8500/ 

    ColdFusion WAR: d:/cf9/wwwroot/cfusion-ear/cfusion-war/ 

    Main source folder: src 

    Output folder URL: bin-debug 

    * Flex App: I copied this code and compiled the code via the ‘run’ button. 

    <?xml version=”1.0″ encoding=”utf-8″?> 

    <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” 

    layout=”absolute” viewSourceURL=”srcview/index.html”> 

    <mx:Script> 

    <![CDATA[ 

    import mx.controls.Alert; 

    import mx.rpc.events.FaultEvent; 

    import mx.rpc.Fault; 

    import mx.rpc.events.ResultEvent; 

    // send 

    public function WelcomeMsg():void { 

    Alert.show(test_name.text); 

    ws.WelcomeMsg(test_name.text ); 

    // result 

    private function onResult( e : ResultEvent ) :void { 

    msg.text = e.result.toString(); 

    // error msg 

    private function onFault( e : FaultEvent ) :void { 

    msg.text = e.fault.faultString; 

    ]]> 

    </mx:Script> 

    <mx:RemoteObject id=”ws” 

    destination=”ColdFusion” 

    source=”apps.flex.test_rs1.src.NEWCFComponent” > 

    <mx:method name=”WelcomeMsg” 

    result=”onResult(event)” 

    fault=”Alert.show(event.fault.message, ‘Erro’)” /> 

    </mx:RemoteObject> 

    <!– 

    <mx:method name=”WelcomeMsg” 

    result=”onResult(event)” 

    fault=”Alert.show(event.fault.message, ‘Erro’)” /> 

    –> 

    <mx:Button x=”284″ y=”10″ label=”Get Welcome Message.” 

    click=”WelcomeMsg()” /> 

    <mx:TextInput id=”msg” x=”481″ y=”10″ width=”300″ /> 

    <mx:TextInput id=”test_name” x=”116″ y=”10″ width=”150″ /> 

    <mx:Label x=”10″ y=”12″ text=”Enter your name:” /> 

    </mx:Application>

    * ColdFusion CFC: Save this cfc as [NEWCFComponent.cfc] in the same folder as src. You will notice that I append to a log file so I can verify that the cfc is being executed.

    <cfcomponent displayname=”CF_Service” output=”false”> 

    <cffunction access=”remote” returntype=”string”>
    <cfargument required=”yes” default=”default message… “> 

    <cfset v_now = Now() & ” <br />” >
    <cffile action=”append” addnewline=”yes”
    file=”#GetDirectoryFromPath(GetBaseTemplatePath())#cfc_log_file.html”
    output=”#v_now# date=YO, #test_name#!” fixnewline=”no” > 

    <cfreturn “YO, #test_name#!”>
    </cffunction> 

    </cfcomponent> 

    * Test CFC: One should make sure one doesn’t get an error from this specific method in the CFC. One should use default values for all of the CFC arguments. 

    http://localhost:8500/apps/flex/test_rs1/src/NEWCFComponent.cfc?method=WelcomeMsg 

    * Run a Flex Application via the ‘RUN’ button. After you compile the application, it will launch a browser of the flex page. One will put your ‘name’ in the first box and click on the button. You will notice the ‘YO’ and your name in the second box coming from the cfc.

    https://localhost:8500/flex/test_rs2/bin-debug/test_rs2.html

  •  

    2.) Create a Flex Application on your web server 

  • * Following these steps when creating your flex project.project name : test_rs1 project location : \\[server-name]\reg\apps\flex\test_rs1 

    Application Type : Web Application 

    Application server type: ColdFusion 

    Use remote object access service [ checked ] 

    ColdFusion Flash Remoting [ checked ] 

    ColdFusion Installation type: J2EE

    Web Root: \\[server_name]\regroot\

    Root URL: https://domain_name.com/

    ColdFusion WAR: \\[server_name]\regroot\cfusion-ear\cfusion-war\

    Main source folder: src 

    Output folder URL: bin-debug 

    * Flex App: I copied this code and compiled the code via the ‘run’ button.

    <?xml version=”1.0″ encoding=”utf-8″?>

    <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;

    layout=”absolute” viewSourceURL=”srcview/index.html”>

    <mx:Script>

    <![CDATA[

    import mx.controls.Alert;

    import mx.rpc.events.FaultEvent;

    import mx.rpc.Fault;

    import mx.rpc.events.ResultEvent;

    // send

    public function WelcomeMsg():void {

    Alert.show(test_name.text);

    ws.WelcomeMsg(test_name.text );

    }

    // result

    private function onResult( e : ResultEvent ) :void {

    msg.text = e.result.toString();

    }

    // error msg

    private function onFault( e : FaultEvent ) :void {

    msg.text = e.fault.faultString;

    }

    ]]>

    </mx:Script>

    <mx:RemoteObject id=”ws”

    destination=”ColdFusion”

    source=”flex.test_rs2.src.NEWCFComponent” >

    <mx:method name=”WelcomeMsg”

    result=”onResult(event)”

    fault=”Alert.show(event.fault.message, ‘Erro’)” />

    </mx:RemoteObject>

    <mx:Button x=”284″ y=”10″ label=”Get Welcome Message.”

    click=”WelcomeMsg()” />

    <mx:TextInput id=”msg” x=”481″ y=”10″ width=”300″ />

    <mx:TextInput id=”test_name” x=”116″ y=”10″ width=”150″ />

    <mx:Label x=”10″ y=”12″ text=”Enter your name:” />

    </mx:Application>

    ColdFusion CFC: Save this cfc as [NEWCFComponent.cfc] in the same folder as src. You will notice that I append to a log file so I can verify that the cfc is being executed.

    <cfcomponent displayname=”CF_Service” output=”false”>

    <cffunction name=”WelcomeMsg” access=”remote” returntype=”string”>

    <cfargument name=”test_name” type=”string” required=”yes” default=”default message… “>

    <cfset v_now = Now() & ” <br />” >

    <cffile action=”append” addnewline=”yes”

    file=”#GetDirectoryFromPath(GetBaseTemplatePath())#cfc_log_file.html”

    output=”#v_now# date=YO, #test_name#!” fixnewline=”no” >

    <cfreturn “YO, #test_name#!”>

    </cffunction>

    </cfcomponent>

    * Test CFC: One should make sure one doesn’t get an error from this specific method in the CFC. One should use default values for all of the CFC arguments. 

    http://[domain-name.com]/flex/test_rs1/src/NEWCFComponent.cfc?method=WelcomeMsg 

    * Run a Flex Application via the ‘RUN’ button. After you compile the application, it will launch a browser of the flex page. One put you ‘name’ in the first box and click on the button. You will notice the ‘YO’ and your name in the second box.

    https://[domain-name.com]/flex/test_rs2/bin-debug/test_rs2.html

  • Site of the Day 6/15/2010

    Here is a good site using ColdFusion and Flex.

    http://flexcf.com/home

    Site of the Day 6/13/2010

    Here is the fourth part of an article to increase performance of Flex applications.

    http://www.insideria.com/2008/07/flex-ria-performance-considera-3.html