Archive for the ‘Flex’ Category

dataprovider for datagrid

June 19, 2008

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” viewSourceURL=”../src/Layout02.mxml”>
<mx:Script>
<![CDATA[
private function myLabelFunc(item:Object, dataField:DataGridColumn):String
{
var p:String = item.Price? item.Price: "N/A";
return item.Year+" / " +p;
}
]]>
</mx:Script>
<mx:ArrayCollection id=”dgPD”>
<mx:source>
<mx:Object Artist1=”Pavement” Album1=”Slanted and Enchanted” Price1=”11.99″ Year=”2003″/>
<mx:Object Artist=”Finches” Album=”Daniel’s Song” Price2=”11.99″ Year=”2007″/>
<mx:Object Artist=”Pavarotti” Album=”Twilight” Price=”11.99″ Year=”1999″/>
<mx:Object Artist=”Other” Album=”Other” Price=”5.99″ Year=”2002″/>
</mx:source>
</mx:ArrayCollection>

<mx:VBox>
<mx:Label text=”Data matter!”/>
<mx:DataGrid id=”myDG” width=”400″ rowCount=”10″ dataProvider=”{dgPD}”>
<mx:columns>
<mx:DataGridColumn headerText=”ARTIST” dataField=”Artist”/>
<mx:DataGridColumn headerText=”ALBUM” dataField=”Album”/>
<mx:DataGridColumn headerText=”YEAR &amp; PRICE” labelFunction=”myLabelFunc”/>
<!–<mx:DataGridColumn headerText=”PRICE” dataField=”Price”/>–>
</mx:columns>
</mx:DataGrid>
</mx:VBox>

</mx:Application>

Use swc in flex

May 5, 2008

Scenario 1: You need to compile ActionScript code as a reusable component in Flex Builder.

Solutions: Follow the steps (FB plugin v3):

Step 1. Compile swc. First you will need to create a new “Flex Library Project”. Then copy all the actionscript code into the top folder of your project file, retaining the package/namespace structure (fig. 1)

The file structure and xml manifest file in Flex Library Project

In “src” folder, you would need a xml-manifest.xml file where you declare the class and id (optional, default to the class name anyways) (fig 1). Thirdly, you would need to define your namespace for the class that’s going to be referenced in MXML (or Flash?) like so: In the AS class fine, inside the class definition, just like the way as you declare a variable, add “public namespace fc;” (substitue “fc” with whatever your choice of namespace). If you’ve enabled “build automatically” (under “Project” menu command), FB will instantaneously build the deploy files for you the time you save the AS file. The result is the complied .swc file, which you can find in the “bin” folder in your library project.

Step 2. Use swc in your Flex project. You either need to copy the swc file(s) into the library-path folders as defined in your flex-config.xml, or explicitly tell Flex to use the swc you want in your current project. To do so, go to “Project properties”->”Flex Build Path”->”Library Path”->”Add SWC”. You can simply navigate to the swc file in the Flex library project as defined in Step 1. After Flex compiled the project, you can use the component as defined in your ActionScript code. Here is an extract:

<mx:HBox>
<mx:Label text=”Search by last name: “/>
<fc:AutoComplete id=”lastNameSrchAC” dataProvider=”{listInfo}” labelField=”lastName”/>
</mx:HBox>

See also: Namespaces in Flex and Soprano

E4X in ActionScript 3 and Flex 3

January 1, 2008

The following top AS3 classes, in conjunction with HTTPService and mx.rpc.events.ResultEvent classes are used in Flex (2+) to handle XML:

XML/XMLList/Namespace/QName

XMLList Class can be considered a collection of XML objects. It is a native ActionScript class that is advised to handle XML such as data binding. XMLNode has become the legacy class in AS 2.

So the first step of handling XML data is to deserialize an XML document or object into XMLList objects.

<mx:HTTPService id="dataFetcher" url="http://mysite/myData.xml" resultFormat="e4x" result="onData(event)" />

Remember you will almost always need to initialize the call by adding the following code to the “creationComplete” event handler of the mx:Application node:

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” creationComplete=”dataFetcher.send()”/>

To deserialize the an XML object (sample shown as follows), use ResultEvent Class, like so:

<delSum Test="1" timestamp="2007-12-10T21:07:48Z">
<del pId=”Dem” dNeed=”2029″ dTot=”4056″ dChosen=”991″ dToBeChosen=”3237″>
<Cand cId=”1746″ cName=”Clinton” dTot=”290″ d1=”+290″ d7=”+290″ d30=”+150″/>
<Cand cId=”1918″ cName=”Obama” dTot=”194″ d1=”+194″ d7=”+194″ d30=”+55″/>
</del>
<del pId=”GOP” dNeed=”1113″ dTot=”2225″ dChosen=”251″ dToBeChosen=”2153″>
<Cand cId=”893″ cName=”Romney” dTot=”109″ d1=”+109″ d7=”+109″ d30=”+1″/>
<Cand cId=”302″ cName=”Paul” dTot=”47″ d1=”+47″ d7=”+47″ d30=”0″/>
</del>
</delSum>

private function onData(event:ResultEvent):void
{
demData = event.result.del.(@pId==”Dem”).Cand.(@cName!=”Uncommitted”);
gopData = event.result.del.(@pId==”GOP”).Cand.(@cName!=”Uncommitted”);
}

Note that event.result represents the top node, which is <delSum> node in the XML document.

XML filtering:

To locate a set of XML objects that represents similar characteristics, use the parenthesis () to include sets of boolean statements, following a dot after the node you want to carry out the filtering against, like so:

var product1:XMLList = catalog.product.(@id==1);//Returning the product node or nodes if there are multiple products whose id is equal to 1

or

var productName:String = catalog.product.(price<50).name;//Returns the name node

or

var manufName:String = catalog.product.(price<50).@manufacturer;//Returns the manufacturer attribute under the name node

To get list of candidate names:

var _tst:XMLList = event.result.del.(@pId=="GOP").Cand.(@cName!="Uncommitted").@cName
trace((_tst[0] is XML)+”; “+_tst[0].nodeKind() )//Returns “true; attribute”
trace(gopData[0].@cName+”; “+(gopData[0].nodeKind())//Returns “Romney; element”

Types of node include: text, comment, processing-instruction, attribute, or element.

“a file found in the source-path must have the same package structure”

September 21, 2007

When compiling an ActionScript file, the source path needs to be clearly defined or otherwise the compiler will complain with the following message:

"A file found in the source-path must have the same package structure..."

This can be fixed by adding the “source-path” definition in the command line, like this:

H:\stuff\lab\AS3\test>c:\flex_sdk_2\bin\mxmlc -source-path=H:\stuff\lab\AS3\ EmployeeTestDrive.as

when compiling the following .as file which resides in “H:\stuff\lab\AS3\test” folder:

package test
{
import flash.display.Sprite;
import flash.text.TextField;


public class EmployeeTestDrive extends Sprite
{
private var _foo:TextField;
public function EmployeeTestDrive()
{
_foo = new TextField();
_foo.text = “hello world!”;
addChild(_foo);
var employee:Employee = new Employee(”sdk_dev222″);
}
}

}

////
class Employee
{
function Employee(id:String)
{

}
}