Archive for Tips & Tricks

Get rid of character encoding problems with Java Servlets

// July 29th, 2009 // No Comments » // Tips & Tricks

If you need to send data from a Flex application to a Java Servlet pay attention: not every Java Servlet Container assumes by default that you are sending an UTF-8 encoded request.

To get rid of character encoding problems remember to add the following line of code in your doGet/doPost Servlet method before accessing any request parameter:

1

request.setCharacterEncoding("UTF-8");

That’s all!

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>