Wednesday, October 14, 2009

Two-way Data Binding in Flex 3 and 4

Two-way data binding, aka bidirectional data binding, refers to two components acting as the source object for the destination properties of each other. I.e. if you have a variable defined, and a, let say, input field with this variable bound to text property of the field, when you change the field's text the variable is changed, and when you change the variable, the field's text property is changed. In Flex 3 this is possible using a combination of curly braces and <mx:binding/> statement.Below is the simple example illustrating this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="1024" minHeight="768">
 
 <mx:String id="myName"/>
 <mx:Binding source="nameInput.text" destination="myName" />
 
 <mx:TextInput id="nameInput" x="30" y="28"/>
 <mx:Label x="31" y="68" text="{myName}"/>
 
</mx:Application>
In Flex 4 this can be archived much easier, inline using declaration: @{bindable_property}.Code example:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
 <fx:Declarations>
  <fx:String id="myName"/>
 </fx:Declarations>
 
 <s:VGroup width="200" height="67" x="37" y="38">
  <s:TextInput id="nameInput" text="@{myName}"/>
  <mx:Spacer height="10"/>
  <s:SimpleText text="{myName}"/>
 </s:VGroup>
 
</s:Application>

Wednesday, September 30, 2009

Building Adobe Flex project with ANT on Windows

Have you ever?
Steps are easy. You download Apache Ant from the official web site. Unzip it, then set up system variables. On Windows they will be (and make sure you have Java JDK, not just JRE installed):

1. ANT_HOME=C:\Ant
2. JAVA_HOME=C:\JDK
3. Edit your PATH system variable and add the following separated by semi-colons:
C:\JDK\bin;C:\Ant\bin;

Note that you may install JDK and And in any other locations on your workstation.
Copy, or have Flex SDK you compile your Flex app with in accessible place. Then write build.properties.override file in the root of your project. File will be similar to:

# Use this file to set the path to your Flex SDKs
#
# flex.sdk.release = the normal Flex SDK
# flex.sdk.release is required
#
flex.sdk.release=/Flex-SDKs/3.4.0
Then you have to create build.xml file at the same location. This is the file, which will be launched by Ant. Actual compiler package, mxmlc.jar, is the part of Flex SDK. Making long story short, below is the example of build xml file.For my 'libs' Flex project library it will look like this:

<?xml version="1.0" encoding="utf-8"?>
























output="${build.dir}/${ant.project.name}.swc"
include-classes="com.bluecoat.utilities.Base64 com.bluecoat.utilities.ObjUtil com.bluecoat.utilities.PrintManager com.packeteer.ps.PSData com.packeteer.ps.PacketShaper">














Also I found this build.cmd is useful as well:

if "%ANT_HOME%" == "" set ANT_HOME=c:\ant
"%ANT_HOME%\bin\ant" -buildfile build.xml %1 %2 %3 %4 %5 %6 %7 %8 %9

Now all you have to do in order to build your project is to run 'build' command in Windows command line.
For more information you can read Using Apache Ant with the SDK tools.

Friday, September 25, 2009

Interviewing for Flex developer position

As another project is close to GA date, and I am seriously re-thinking of my position in the company, at current job, new questions of my knowledge of Flex framework have been raised.
Quick research of possible interview questions on the web revealed thatfollowing topics are not covered well, and not in the lists ofquestions for the interview! I am surprised - these topics areessential for Flex development:

  • How do you find loitering objects in Profiler?
  • Have you created custom UI Component?
  • Why would you override commitProperties(), createChildren(), updateDisplayList()?
  • Have you written unit test for Flex?
  • Have you ever build the Flex project with ANT? 
Be aware.
Here is a quick and simple reply to third question in this list: http://forums.adobe.com/message/2274149. On this topic also read: http://www.communitymx.com/content/article.cfm?page=1&cid=4BA51

Sunday, September 6, 2009

OpenDNS resolving DNS issues in Windows 7 RC

While almost everyone is out for Burning Man, and I am still wondering why I like computers the most spending one more sunny day in the office, I managed to resolve DNS problem on Windows 7 RC (6.1.7100). I should mention that I am having blue screen of death several times a week, but it is not what bothering me much. What is really annoying is I can't browse the internet. My browsers do not resolve the websites names. This problem is intermittent. I have to wait for a while, and names resolution is back. Rest of the web services are working, like skype, for example. Today I found the solution! It's OpenDNS (www.opendns.com), which provide their own DNS servers instead of my isp's.
My configuration is: wi-fi adapter, connected to the router provided by AT&T dsl service. All you need is to set openDNS' dns servers for your network adapter. Problem is gone.
I have to add that openDNS provides other useful services (you have to register though, and install their tiny client), like shortcuts and your network statistics.
Imagine typing in your browser 'picasa' instead 'http://picasaweb.google.com/eugeneka'. This is a shortcut.UPDATE: Chaning ISP from DSL AT&T to Comcast is resolving the incompatibility with Cisco VPN Client.

Tuesday, June 30, 2009

Adobe Flex: how to compare arrays

At some point I needed to compare two arrays: do they consist of the identical data? And I realized that there is no built-in function for this. I wrote the simple function which correctly compares two arrays and returns a boolean if arrays are the same:
/** Compare arrays */
private function matchArrays(a1:Array, a2:Array):Boolean {
   var len1:int = a1.length;
   if (len1 != a2.length) return false;
   for( var i:int = 0; i<len1; i++ ) {
      if (a1[i] != a2[i]) return false;
   }
   return true;
}
Funny thing about web development is that writing service functions like this we are reinventing a wheel again and again infinite number of times. I found similar function later in Adobe corelib library in com.adobe.utils.ArrayUtil :)

Friday, June 26, 2009

UI I have been working on is featured on YouTube!

Understanding Application Visibility with Blue Coat PacketShaper:
http://www.youtube.com/watch?v=Wt6wInTDe0A

This is an administrative UI for PacketShaper. We call it Sky UI. It's implemented on Adobe Flex 3.

Saturday, May 30, 2009

Flex: Showing data in the legend of a Pie Chart

By default the legend class does not allow to output actual data values. All it can show is the marker's label and color.
After searching the web, strangely enough, I did not find any published solution, and decided to extend the legend class in my application.
Today, I am sharing my work with you.

For the illustration I took an example from the official documentation of PieChart class. The name of the main application is TestLegend.mxml. All you need to do here is to add 'legendItemClass' property to the Legend tag. The Legend tag will look like:

<mx:Legend dataProvider="{chart}" legendItemClass="utilities.CustomPieLegendItem"/>

Next step is to create CustomPieLegendItem class, which extends LegendItem. I created a 'utilities' folder and added a new class there, in CustomPieLegendItem.as:

package utilities
{
import mx.charts.LegendItem;
import mx.charts.series.PieSeries;
import mx.collections.ArrayCollection;

public class CustomPieLegendItem extends LegendItem
{

public function CustomPieLegendItem()
{
super();
}

protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

var data:ArrayCollection = (element as PieSeries).dataProvider as ArrayCollection;
var dataNum:int = data.length;

for (var i:int=0; i<dataNum; i++) {
if (data[i].Country == this.label) {
// uncomment this line if you want to show all three data: Gold, Silver and Bronze
//this.label += " (" + data[i].Gold + "/" + data[i].Silver + "/" + data[i].Bronze + ")";
this.label += " (" + data[i].Gold + ")";
break;
}
}

super.updateDisplayList(unscaledWidth, unscaledHeight);

}
}
}

And voila!

I think this solution is pretty self explanatory. If not, don't hesitate to ask a question. :)

Working example you can see here.
Source code is available here.

I hope it helped you to save some time inventing the solution how to show the data in legend of the chart.