We usually run Flex training for private clients of Farata Systems , but once in a while we teach public classes for people with different programming background (my next Flex class at New York University starts in November). All students usually get excited by Adobe Flex, but each of them comes with different understanding of how to do things right. So I “ll tell you the story that might have happened in a real life, but first, let me remind you of an old Indian tale about seven blind men and an elephant . In short, one blind man touched the elephant “s head, the other one touched the tail, someone was by the leg. And each of them visualized an elephant differently based on what he touched hellip; My students usually arrive to the classroom early, but this time three seats were empty. Five minutes later I got a phone call from one of them explaining that they got stuck in the elevator and will stay there for another fifteen minutes until the serviceman arrives. Needless to say that each of them had a laptop (do not leave home without it), so I gave them a short assignment to trying to help them use this time productively.
Here “s the assignment: Create a Window with a Panel that can resize itself by clicking on the button +/- that is located in the right corner of the panel. One click should minimize the panel “s height to 20 pixels, and a subsequent one should maximize to 100 pixels, and so on.
For example, these are the two states of such panel:
I forgot to tell you that one of these guys was a Cobol programmer, the other one had Java background, and the third one was a Smalltalk fan.
From Cobol to Flex
The Cobol programmer thought to himself, rdquo;We used to write long programs because during job interviews they usually ask how many lines of code did I write. These guys are different, so to earn a good grade, this program should be small rdquo;. He finished the program on time and this is what it looked like:
lt;?xml version= “1.0 ” encoding= “utf-8 “? gt;
lt;mx:Application xmlns:mx= “http://www.adobe.com/2006/mxml ” layout= “absolute ” gt;
lt;mx:Panel id= “thePanel ” title= “The Panell ” height= “90 ” width= “100% ” headerHeight= “20 ” / gt;
lt;mx:HBox width= “100% ” horizontalAlign= “right ” paddingRight= “2 ” gt;
lt;mx:Label text= “- ” fontSize= “16 ” width= “20 ” height= “17 ” fontWeight= “bold ”
id= “minimizeActions ”
click= “{if (minimizeActions.text== ‘+ ‘){
minimizeActions.text= ‘- ‘;
thePanel.height=100;
} else {
minimizeActions.text= ‘+ ‘;
thePanel.height=20;
}
} ” / gt;
lt;/mx:HBox gt;
lt;/mx:Application gt;From Java to Flex
The Java programmer thought, “The standard Flex Panel class does not have the property that remembers the current state of the Panel, but Flex components are easily extendable, so I “ll create a descendent of the Panel in ActionScript, add a private state flag (minimized) , public setter and getter, and resize function. This way my new Panel class will be reusable and self contained. rdquo; This is his reusable ActionScript class called ResizableJPanel:
package {
import mx.containers.Panel;
public class ResizableJPanel extends Panel {
// state of the panel
private var isPanelMinimized:Boolean;
public function get minimized():Boolean{
return isPanelMinimized;
}
public function set minimized(state:Boolean){
isPanelMinimized=state;
}
public function resizeMe():void{
if (minimized){
minimized=false;
height=maxHeight;
} else {
minimized=true;
height=minHeight;
}
}
}
}
This is Javist ‘s mxml code:
lt;?xml version= “1.0 ” encoding= “utf-8 “? gt;
lt;mx:Application xmlns:mx= “http://www.adobe.com/2006/mxml ” xmlns:local= “* ” layout= “absolute ” gt;
lt;local:ResizableJPanel id= “aPanel ” height= “90 ” width= “100% ”
title= “The Panel ” minHeight= “20 ” maxHeight= “100 ” headerHeight= “20 ” / gt;
lt;mx:HBox width= “100% ” horizontalAlign= “right ” paddingRight= “2 ” gt;
lt;mx:Label text= “- ” fontSize= “16 ” width= “20 ” height= “17 ” fontWeight= “bold ”
id= “minimizeActions ” click= “resizePanel(aPanel) ” / gt;
lt;/mx:HBox gt;
lt;mx:Script gt;
lt;![CDATA[
function resizePanel(thePanel:ResizableJPanel):void{
if (thePanel.minimized){
minimizeActions.text= “- “;
thePanel.resizeMe();
} else {
minimizeActions.text= “+ “;
thePanel.resizeMe();
}
}
]] gt;
lt;/mx:Script gt;
lt;/mx:Application gt;
From Smalltalk to Flex
The Smalltalk guy thought, “Let me see if the standard Panel is a dynamic class. If not I “ll extend it just to make it dynamic and will be assigning the panel “s state on the fly. I hope Yakov is not one of these object-oriented Nazis rdquo;. This is his panel ActionScript class that just adds a dynamic behavior to the Panel:
package{
import mx.containers.Panel;
public dynamic class ResizableSmtPanel extends Panel
{
}
}
His mxml class looked like this:
lt;?xml version= “1.0 ” encoding= “utf-8 “? gt;
lt;mx:Application xmlns:mx= “http://www.adobe.com/2006/mxml ” xmlns= “* ” layout= “absolute ” gt;
lt;ResizableSmtPanel title= “The Panel ” id= “thePanel ” height= “90 ” width= “100% ”
minHeight= “20 ” maxHeight= “100 ” headerHeight= “20 ” gt;
lt;/ResizableSmtPanel gt;
lt;mx:HBox width= “100% ” horizontalAlign= “right ” paddingRight= “2 ” gt;
lt;mx:Label text= “- ” fontSize= “16 ” width= “20 ” height= “17 ” fontWeight= “bold ”
id= “minimizeActions ” click= “resizePanel() ” / gt;
lt;/mx:HBox gt;
lt;mx:Script gt;
lt;![CDATA[
function resizePanel():void{
if (thePanel.minimized){
minimizeActions.text= “- “;
thePanel.minimized=false;
thePanel.height=thePanel.maxHeight;
} else {
minimizeActions.text= “+ “;
thePanel.minimized=true;
thePanel.height=thePanel.minHeight;
}
}
]] gt;
lt;/mx:Script gt;
Since we are not in the classroom, I “m not going to go to a code review and lengthy discussions, I will just say the I gave an “A rdquo; to each of these guys…and here ‘s the Flex version: lt;?xml version= “1.0 ” encoding= “utf-8 “? gt;
lt;mx:Application xmlns:mx= “http://www.adobe.com/2006/mxml ” xmlns= “* ” layout= “absolute ” gt;
lt;mx:Component className= “ResizablePanel ” gt;
lt;mx:Panel gt;
lt;mx:Script gt;
[Bindable]
public var minimized:Boolean = false;
lt;/mx:Script gt;
lt;/mx:Panel gt;
lt;/mx:Component gt;
lt;ResizablePanel title= “The Panel ” id= “thePanel ” minimized= “false ” height= “{thePanel.minimized?thePanel.minHeight:thePanel.maxHeight} ” width= “99% ”
minHeight= “20 ” maxHeight= “100 ” headerHeight= “20 “/ gt;
lt;mx:HBox width= “99% ” horizontalAlign= “right ” paddingRight= “2 ” gt;
lt;mx:Label text= “{thePanel.minimized? ‘+ ‘: ‘- ‘} ” fontSize= “16 ” width= “20 ” height= “17 ” fontWeight= “bold ”
id= “minimizeActions ” click= “{thePanel.minimized=!thePanel.minimized} ” / gt;
lt;/mx:HBox gt;
lt;/mx:Application gt;
What “s the morale of this story? Learn another language, no matter what ‘s your current background. Initially you will try to bring your own culture to this new language, but eventually your horizons will broaden, which will make you a better programmer.
P.S. Isn “t it funny that the Cobol guy “s version was the shortest one? But was it the best one? Can you offer a different solution?
yakovfain.com 