My Writings. My Thoughts.

Rapid client/server Flex application prototyping with fxDao

// July 1st, 2009 // 2 Comments » // fxDao

fxdaosmallAdobe Flex is a well known and widespread technology with a great and appreciated attitude to make development of software prototypes almost a joke (if you ever developed with Java Swing you perfectly know what I mean).

I refer to prototypes because when things become serious and you have to put code on the server side, basically to wipe out fake data and access real one, the development velocity begins to decrease.

Independently from the server side technologies and protocols you have chosen, you’ll have to write the code which will expose web services and data models. Generally this means that a boring, repetitive and, depending on the complexity of the application, not a really fast coding session is about to begin. Not to forget unit tests.

As a result of these considerations I developed fxDao.

The idea behind it is that Flex prototyped apps could use real data by defining ActionScript DAO classes which encapsulate data access logic, which means, SQL queries.

fxdaoclientOnce your prototyped (but really working) application will pass the POC phase, you can decide to rewrite ActionScript DAO classes in order to access server side web services. Since DAO classes communicate within the application by exchanging Value Objects (VO) and lists of VOs (the so called model), you don’t have to change a single line of code in the rest of the application.

Put in other and few words, fxDao is a simple PHP gateway used to execute queries on the server specifying them directly in your ActionScript code.

Query result is XML data packed with a REST approach but nobody prevent you to implement any other format. The format should possibly be the same of your web services, in orded to keep as much code reusable because VOs instantiation takes this data as its input.

I’m still in the POC phase of the project itself, which means that:

  • there is still some work to do on the server side, in order to make the gateway sound and secure and enable it to the use of transactions;
  • there is still some work to do on the client side, in order to provide ActionScript helper classes to facilitate the creation of query statements (think to the Active Record or Prepared Statement approach);
  • fxDao is open source and comes with a GNU General Puplic License so, if you like, you can contribute to its development. Any help will be very appreciated.

That said, you can download the first version of fxDao from the following URL: http://code.google.com/p/fxdao/

In this version fxDao is bundled with a simple Flex client which has the only purpose of testing installation. In the very next post I will show more details about how to write a very quick and simple Flex client which interacts with fxDao exploiting DAO classes.

See you soon.

How to add a line separator in a Flex Tree component

// May 8th, 2009 // No Comments » // Flex framework

Ever wanted to use a line separator in a Tree? It’s all a matter of customizing the Flex Tree and TreeItemRenderer and you can obtain what is shown in the example below.

Here are the steps to implement it:

  • define a property in your model to indicate that an item is a separator;
  • implement a customized TreeItemRenderer which stores a flag to keep track about the fact the node is a separator. This flag is used in some overridden methods to handle icon display and line drawing;
  • implement a customized Tree control which overrides some methods to avoid separator to be selected.

Let’s start by defining a property which indicates that an item in a tree is a separator. I keep things simple here and use a code snippet inspired by the Adobe Flex3 Component Explorer in MyTree.mxml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:my="my.controls.*"
    layout="vertical" backgroundColor="#777777" 
    viewSourceURL="srcview/index.html">
  <mx:XMLList id="treeData">
    <node label="Mail Box">
      <node label="Inbox">
        <node label="Marketing"/>
        <node label="Product Management"/>
        <node label="Personal"/>
      </node>
      <node label="Outbox">
        <node label="Professional"/>
        <node label="Personal"/>
      </node>
      <node separator="true" />
      <node label="Spam"/>
      <node label="Sent"/>
    </node> 
  </mx:XMLList> 
  <my:MyTree 
      width="100%" height="100%"
      dataProvider="{treeData}"
      labelField="@label" />
</mx:Application>

You can notice that to indicate a node is a separator I simply use a separator XML attribute whose value is set to true.

The second step consists of implementing a MyTreeItemRenderer class which extends TreeItemRenderer and declares a isSeparator property used to store information about whether the current node is a separator.

I then override the set data method in order to store isSeparator value as shown in the code below taken from MyTreeItemRenderer.as:

102
103
104
105
106
107
108
109

override public function set data(value:Object):void
{
  super.data = value;
 
  // Check whether current node is a separator
  isSeparator = (value != null && value.@separator != null
    && "true" == String(value.@separator).toLowerCase());
}

I also need to avoid icon display in separator nodes, so I have to set the visibility of the icon to false. I can’t do that in the set data method because in component creation life cycle visibility property is not yet available in that method. So I override the commitProperties method in the following way (code from MyTreeItemRenderer.as):

115
116
117
118
119
120
121
122

override protected function commitProperties():void
{
  super.commitProperties();
  if (isSeparator)
  {
    icon.visible = false; 
  }
}

To finish TreeItemRenderer customization I have to override the updateDisplayList method in order to draw a line in case the node is a separator. To do that I don’t reinvent the wheel and simply copy the algorithm from the HRule component. You can substitute you own drawing algorithm if you don’t like that. Here is the code of updateDisplayList method taken from MyTreeItemRenderer.as:

127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

override protected function updateDisplayList(
    unscaledWidth:Number, unscaledHeight:Number):void
{
  // Get graphics
  var g:Graphics = graphics;
  g.clear();
 
  // Call super method
  super.updateDisplayList(unscaledWidth, unscaledHeight);
 
  // Draw the line if current node is separator
  if (isSeparator)
  {
    //
    // Code taken from the HRule drawing algorithm.
    //
    ...

The TreeItemRenderer customization is almost done. At this point the separator is displayable in the tree but I still need to prevent mouse hovering and selection. To to that I implement a MyTree class which extends Tree. The first step consists of associating the MyTree ItemRenderer to the itemRenderer property of the MyTree class. I do that in class constructor of MyTree.as:

25
26
27
28
29
30

public function MyTree()
{
  super();
 
  itemRenderer = new ClassFactory(MyTreeItemRenderer);
}

Then I have to override both mouseOverHandler and mouseDownHandler methods in order to avoid node to be highlighted and selected. Here is the code from MyTree.as:

41
42
43
44
45
46
47
48

override protected function mouseOverHandler(event:MouseEvent):void 
{
 var item:IListItemRenderer = mouseEventToItemRenderer(event);
 if (item != null && !MyTreeItemRenderer(item).isSeparator) 
 {
        super.mouseOverHandler(event);
 }
}
53
54
55
56
57
58
59
60

override protected function mouseDownHandler(event:MouseEvent):void 
{
 var item:IListItemRenderer = mouseEventToItemRenderer(event);
 if (item != null && !MyTreeItemRenderer(item).isSeparator) 
 {
        super.mouseDownHandler(event);
 }
}

That’s it! You can download the full source code here or by right clicking on the example you find on the top of the page. I hope this helps you. Enjoy Flex coding!

How to implement bidirectional binding in Flex

// March 12th, 2008 // No Comments » // Tips & Tricks

In this post I’ll show you how to implement a bidirectional binding between a DataGrid and a Form in such a way that any change in the Form will automatically affect data displayed in the DataGrid.

To obtain such a bidirectional binding we have to:

  • define a model object
  • define a binding between Form fields and object properties
  • define a binding between DataGrid and the model object

Here is the simplified code to realize all this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:wg="com.webgriffe.samples.*">
  <mx:ArrayCollection id="employees">
    <wg:Person>
      <wg:name>Christina Coenraets</wg:name>
      <wg:phone>555-219-2270</wg:phone>
      <wg:email>ccoenraets@fictitious.com</wg:email>
    </wg:Person>
    <wg:Person>
      <wg:name>Joanne Wall</wg:name>
      <wg:phone>555-219-2012</wg:phone>
      <wg:email>jwall@fictitious.com</wg:email>
    </wg:Person>
   <wg:Person>
     <wg:name>Maurice Smith</wg:name>
     <wg:phone>555-219-2012</wg:phone>
     <wg:email>maurice@fictitious.com</wg:email>
   </wg:Person>
  </mx:ArrayCollection>  <wg:Person id="per"
    name="{inName.text}"
    phone="{inPhone.text}"
    email="{inEmail.text}" />
    <mx:Panel title="DataGrid e Form - binding bidirezionale">
    <mx:Label text="Select a row in the DataGrid control."/>
    <mx:DataGrid id="dg" dataProvider="{employees}"
      itemClick="per=Person(event.currentTarget.selectedItem);">
      <mx:columns>
        <mx:DataGridColumn
            dataField="name"
            headerText="Name"/>
        <mx:DataGridColumn
            dataField="phone"
            headerText="Phone"/>
        <mx:DataGridColumn
            dataField="email"
            headerText="Email"/>
      </mx:columns>
    </mx:DataGrid>
    <mx:Form>
      <mx:FormItem label="Name">
        <mx:TextInput id="inName" text="{per.name}"/>
      </mx:FormItem>
      <mx:FormItem label="Phone">
        <mx:TextInput id="inPhone" text="{per.phone}"/>
      </mx:FormItem>
      <mx:FormItem label="Email">
        <mx:TextInput id="inEmail" text="{per.email}"/>
      </mx:FormItem>
    </mx:Form>
  </mx:Panel>
</mx:Application>

Flex and logical AND (&&) operator usage inside mxml code

// August 29th, 2007 // 2 Comments » // Tips & Tricks

While developing Flex applications you may need to use logical AND operator (&&) inside mxml code, as in the following code example:

1
2
3
4
5
6
7
8
9

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="vertical">
    <mx:CheckBox label="Check me" id="cb1" click="{}" />
    <mx:CheckBox label="Check me" id="cb2" click="{}"/>
    <mx:Button label="Now you can click me" id="bt1"
      enabled="{cb1.selected && cb2.selected}" />
</mx:Application>

Actually the Flex compiler won’t compile this code blaming that the entity name must immediately follow the ‘&’ in the entity reference that is trying to interpret the first & as the starting name of an entity.

You can find a couple of solutions here. The one I prefer consists of replacing the & character into its equivalent html entity & but you can also implement the solution below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="vertical">
    <mx:Script>
    <![CDATA[
      private function and(p1:Boolean, p2:Boolean):Boolean {
        return p1 && p2;
      }
    ]]>
    </mx:Script>
    <mx:CheckBox label="Check me" id="cb1" click="{}" />
    <mx:CheckBox label="Check me" id="cb2" click="{}"/>
    <mx:Button label="Now you can click me" id="bt1"
      enabled="{and(cb1.selected, cb2.selected)}" />
</mx:Application>
Newer Entries »