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);” />

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

Site of the Day 6/12/2010

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

http://www.insideria.com/2008/06/flex-ria-performance-considera-2.html

Site of the Day 6/11/2010

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

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

Site of the Day 6/10/2010

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

http://www.insideria.com/2008/03/flex-ria-performance-considera-1.html

Site of the Day 6/8/2010

This is the link to Adobe Developers site.

http://www.adobe.com/devnet/

Site of the Day 6/7/2010

This is a good practical site about examples on Flex.

http://blog.flexexamples.com/

Site of the Day 6/6/2010

Here is a simple article about Flex and ColdFusion RemoteObject/WebServices.

http://macmartine.com/blog/2008/04/flex_and_coldfusion_remoteobje.html

Site of the Day 6/4/2010

Here is one of many Flex blogs from Abobe.

http://blogs.adobe.com/gosmith/

Site of the Day 6/2/2010

Here is an article how to use ColdFusion 9 services with Flex.

http://balajisridhar.wordpress.com/2009/11/27/how-to-consume-cfaas-using-flex-client/

Site of the day 6/1/2010

Here is a link concerning Adobe Flex 4 information.

http://blogs.adobe.com/aharui/

Site of the Day 5/31/2010

Here is a link for the Official Adobe Flex team.

http://blogs.adobe.com/flex/

Site of the Day 5/30/2010

Here is a blog for the Adobe Flex Documentation team.

http://blogs.adobe.com/flexdoc/

Site of the Day 5/26/2010

Here is a site concerning PaperVision3D.

http://blog.papervision3d.org/

Site of the Day 5/25/2010

James Ward has a page which will see if your page is Flex instead of Flash.

http://www.jamesward.com/is_it_flex/

Site of the Day 5/24/2010

Flex on Google Android in Flash Player and AIR

http://www.jamesward.com/2010/05/21/flex-on-android-in-flash-player-and-air/

Site of the Day 5/22/2010

Here is an article in creating an ActionScript debugger.

http://labs.flexperiments.nl/asdebugger/

Site of the Day 5/21/2010

Here is a good article how to do a type ahead for a combobox in Flex.

http://labs.flexperiments.nl/alternative-combobox-for-flex/

Site of the Day 5/20/2010

Here is a good site for a Adobe Flex Tree (open-sourced).

http://labs.flexperiments.nl/flptree-2-0-better-faster-open-source/

Site of the Day 5/19/2010

This is a great site using CSS for Adobe Flex. The guy is correct that CSS is implemented terribly in Flex. Didn’t they think about how CSS works in a web page and just copy that idea???

http://fcss.flashartofwar.com/

Site of the Day 5/18/2010

The articles from Yakov Fain about Adobe Flex are excellent.

http://flexblog.faratasystems.com/author/yakov

Site of the Day 5/16/2010

Here is a good product to create wireframes for Adobe Flex.

http://www.balsamiq.com/blog

Site of the Day 5/15/2010

Here is a good article about the detail of the Flex Tree Control.

http://vipuljhawar.wordpress.com/2008/03/28/creating-a-dynamic-tree-in-flex/

Common Flex libraries

I’m going to add some Adobe Flex ActionScript libraries.

Open Source AS3 APIs

(UX) User Experience Post

I’m going to add links which pertain to (UX) User Experience and RIA. I will be adding more links since there is some good stuff.

A Flex Developer’s Guide to User Experience Work Flows and Best Practices
50 Most Usable RIAs
the Flex User Interface Discussion

Design elements and principles

Theresa Neil blog
Designing Web Interface blog
Bill Scott’s blog (Netflix)
Wireframes
Functioning Form
Info Design Patterns
Stop Design

Prototyping
Rapid Prototyping Tools

Messages and Images
CSS Message Boxes for different message types
Design

Opinion
Google not a nice place to work

Flex Tree Control using http service

I’ve been trying to get my two tree controls to work with 2 httpservices without any success since most of the examples are hard-coding the data (XML) inside mxml. Since I’m dense or whatever, I found this link which answered my problem. If I find another way to transform dynamic data I will post it as a different example. A co-worker of mine gave me the 2nd example.

EXAMPLE #1

answer link : example1

cfm page containing the following xml data :
====================================
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<rows><node1 text=’Test last name,first middle initial’ data=’E020094 ;ZZ;ZZ;ZZ’ >
<node2 text=’tab1′ data=’E020094 ; 1;ZZ;ZZ’ >
<leaf text=’panel 1′ data=’E020094; 1;1;1′ />
</node2>
</node1>
</rows>

ActionScript code inside flex
====================================
// show errors from server
public function handleFault(event:FaultEvent,a_descr:String):void {

Alert.show(event.fault.faultString + ” ” + a_descr, “Error”);
} // end of handle fault…

flex mxml
====================================
<mx:HTTPService
id=”idloadtree2″ resultFormat=”e4x”
url=”https://server_name/flex/get_tree.cfm&#8221;
useProxy=”false” showBusyCursor=”true”
fault=”handleFault(event,’Get Tree 2′);” />

<mx:Tree id=”idtree2″ name=”Tree” height=”100%” width=”100%”
selectionColor=”#ffff33″ textSelectedColor=”#ff3333″
dataProvider=”{idloadtree2.lastResult}” labelField=”@text”
showRoot=”false” >

EXAMPLE #2

cfm page
================================================================
<cfsetting showdebugoutput=”no”>

<cfxml variable=”myxml”>
<root label=”root node”>
<branch label=”top level branch A”>
<leaf label=”leaf a” />
<leaf label=”leaf b” />
<branch label=”second level branch A-A”>
<leaf label=”leaf c” />
<leaf label=”leaf d” />
</branch>
</branch>
<branch label=”top level branch B”>
<leaf label=”leaf e” />
</branch>
</root>
</cfxml>
<cfoutput>#tostring(myxml)#</cfoutput>

 

Flex code
=================================================================
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”vertical” creationComplete=”init()”>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;

// second tree’s data
[Bindable] private var _myTreeCFM:XML;
// init function to get data from cfm page
private function init():void
{
getXML.send();
}
// when data comes back, it is XML, assign it to the variable
private function resultHandlerXML(e:ResultEvent):void
{
_myTreeCFM = e.result as XML;

}
// right like there will be any errors
private function faultHandler(e:FaultEvent):void
{
Alert.show(e.message.toString());
}

]]>
</mx:Script>

<mx:Label text=”CFM data” fontSize=”20″ fontWeight=”bold” color=”#FFFFFF”/>

<!– tree with cfm data –>
<mx:Tree id=”example_cfm”
labelField=”@label”
showRoot=”false”
dataProvider=”{_myTreeCFM}”
width=”400″ height=”300″ />

<!– get data from server –>
<mx:HTTPService id=”getXML”
url=”getXML.cfm”
resultFormat=”e4x”
result=”resultHandlerXML(event)”
fault=”faultHandler(event)”
showBusyCursor=”true” />
</mx:Application>

Flex : How to use the source path

I’ve wanted to use some of my ActionScript packages in a shared folder for multiple projects. The current default of the namespace is relative to the “SRC” folder. This isn’t a solution since I will have a “COM” folder under every “SRC” folder.

e.g. for src folder )
FOLDER ==> src –> com –> x –> y
NAMESPACE ==> xmls:example=”com.x.y.*”

 <example:wrap  x=”10″ y=”10″ id=”idtest” styleName=”style1″ themColor=”#77CCE1″ >
….
</example>

If you want to use a shared folder for some common code (AS packages), then you must first add a namespace and a source path to the package. I’ve tweaked my package location and import statement which Flex Builder nicely helps me greatly …:)
NAMESPACE ==> xmlns:exanple=”x.y.*”
SOURCE PATH ==> j:/shared_folder/flex_as/com (You will notice it is using a mapped drive to a shared folder for my flex actionscript code )

ACTUAL CODE ==>

<example:wrap x=”10″ y=”10″ id=”idtest1″ styleName=”style1″ themeColor=”#77CC1E” >
….
</example>

General Flex frameworks

Here is a bunch of links on the various Flex frameworks.

Mate
Swiz
Pure MVC
Cairngorm
Parsley

Flex and CSS

Here are some links concerning using CSS in Adobe Flex.

Intro to Flex CSS Styling
Flex 3 CSS List Reference

Discover the power of Flex and CSS
Flex CSS Explorer
Flex Filter Explorer
Flex Primitive Explorer

General Adobe Flash Collaborative Services information

Here are some links concerning Adobe Flash Collaborative Services.

Introduction to Adobe Flash Collaborative Services

General Flash Builder 4 tips/tricks

Here is a list of Flash Builder 4 tips and tricks.

Lots Of Great New ColdFusion Flash Builder Content On ADC
More info on Flash Builder 4 and Flex 4

Interesting ideas using Adobe Flex

This is the place I’m going to put interesting examples of Adobe Flex which don’t fall in the other categories.

Great Flex site

Ribbit – Voice enable Flex/AIR applications
Flex Paint 2.0 with Source Code
Universal Mind
Web App Solutions (WASI)
Flex Ramblings blog

Different Data Visualization techniques

Text to Speech
Preparing for Multi-touch in Flash – A Primer

Some Cool Apps from Adobe Solution Providers

Flex Performance Tips

I will place my flex performance tips on this post.

Flex RIA Performance Considerations Part 2: Application Startup
Comparing Web Services with Flex Remoting
Round up of ActionScript 3.0 and Flex optimization techniques and practices

HTML in Flex

I’ve been looking around for a solution, so I can put web pages (ie., cnn) into a Flex page. Some would say I should type in that html (www.cnn.com ?), but why and one can’t type in CNN. Others would say that Flex and HTML should be separated from each other. WHY? I wished Adobe would give off their high horse and fix this fundemental problem with Flash/Flex. The following links give Adobe response and some solutions might at least address the problem. I enjoy other persons creativity which others might call “hacks”.

Adobe’s response

Don’t use HTML in Flex
HTML in Flex on code.google
HTML in Flex
HTML in Flex #2
HTML in Flex example #1
HTML in Flex example #2

Mutliple articles about this subject

Flex 3D frameworks and components

I will place my 3d frameworks and components in this post.

Future of Flex 3D
Open Flux
Open Flux demos and Flex 4
Flash 3D
PaperVision tutorials
Away 3D
Drag and Drop Video

Spring Graph
Flex Data Visualization I
Flex Data Visualization II
Spring Graph
Mark Sheperd blog

Flex Components

These links concern general Flex components from various web site.

Fx Samples
Type Ahead
How to combine the power of a Flex Tree control within a ComboBox

FX components
Tour de Flex

effectCube

Advanced Components
FX:Script blog
Flex Componentor
Some great Flex UX components

Whiteboard Component

Rotate Image Example

Flex Dashboards

I’m going to put my Flex Dashboard links in this location.

Flex Dashboard Builder
Dashboard
Dashboard – with tabs and windows
Spreadsheet / OLAP builder
Source Code – Spreadsheet / OLAP builder

Flex Data Visualization

I’m going to put my Flex Data Visualization (chart) links in this location.

birdeye
degrafa Charts
3D Column Chart
Chart Range Selection
Some Flex Charts #1
iLOG Elixir
Chart DrillDown Animations
Some very cool Charts
Axiis – An Introduction and Tutorial

Different Data Visualization techniques

Date range selection for Flex charts

Flex development tools

I’m going to list various Flex tools to make your application better.

Similar to Firebug (fxspy)
Six Tools for Flex and AS3 Development

General Flex links

I’m going to put my general flex links which might or might be put on a different post.

Flex 3 References
Adobe Flex resources
Flex 3 Developer Guide
Flex 3.3 Language Reference
Adobe Flex 3 Data Visualization Developer Guide
Programming ActionScript 3.0
Adobe Flex 3 Help

Everything Flex
Inside RIA
Adobe Flex Extensions
Tour de Flex
Flex org

General Flex tutorials ( FLEX{er} )

Adobe Flex Team Blogs
Top security threats to Flash/Flex applications and how to avoid them – Part 1

Buzzy and me blog
Flex Geek blog
Peter Ent’s blog
Orlando Adobe Group
Abobe India blogs

Social bookmarking

Flash on settop box TV

Flash Flex Magazine

Flex Carousel links

I will start to add some interesting Flex carousel links on this page. I will use a different entry to show some Flex thumbnail links and visual roamer links. I’m trying to find out why one design pattern is better in certain circumstances and worse in others.

Carousel – by Coverflow