 |
|||||||||
|
|||||||||
|
|
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,”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 ”. He finished the program on time and this is what it looked like:
<?xml version="1.0" encoding="utf-8"?>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.” 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:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" layout="absolute">
<local:ResizableJPanel id="aPanel" height="90" width="100%"
title="The Panel" minHeight="20" maxHeight="100" headerHeight="20" />
<mx:HBox width="100%" horizontalAlign="right" paddingRight="2">
<mx:Label text="-" fontSize="16" width="20" height="17" fontWeight="bold"
id="minimizeActions" click="resizePanel(aPanel)" />
</mx:HBox>
<mx:Script>
<![CDATA[
function resizePanel(thePanel:ResizableJPanel):void{
if (thePanel.minimized){
minimizeActions.text="-";
thePanel.resizeMe();
} else {
minimizeActions.text="+";
thePanel.resizeMe();
}
}
]]>
</mx:Script>
</mx:Application>
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”. 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:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute">
<ResizableSmtPanel title="The Panel" id="thePanel" height="90" width="100%"
minHeight="20" maxHeight="100" headerHeight="20">
</ResizableSmtPanel>
<mx:HBox width="100%" horizontalAlign="right" paddingRight="2">
<mx:Label text="-" fontSize="16" width="20" height="17" fontWeight="bold"
id="minimizeActions" click="resizePanel()" />
</mx:HBox>
<mx:Script>
<![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;
}
}
]]>
</mx:Script>
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” to each of these guys...and here's the Flex version:<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute">
<mx:Component className="ResizablePanel">
<mx:Panel>
<mx:Script>
[Bindable]
public var minimized:Boolean = false;
</mx:Script>
</mx:Panel>
</mx:Component>
<ResizablePanel title="The Panel" id="thePanel" minimized="false" height="{thePanel.minimized?thePanel.minHeight:thePanel.maxHeight}" width="99%"
minHeight="20" maxHeight="100" headerHeight="20"/>
<mx:HBox width="99%" horizontalAlign="right" paddingRight="2">
<mx:Label text="{thePanel.minimized?'+':'-'}" fontSize="16" width="20" height="17" fontWeight="bold"
id="minimizeActions" click="{thePanel.minimized=!thePanel.minimized}" />
</mx:HBox>
</mx:Application>
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?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:states>
<mx:State name="minimize">
<mx:SetProperty target="{label1}" name="text" value="+"/>
<mx:SetProperty target="{panel1}" name="height" value="20"/>
<mx:SetEventHandler target="{label1}" name="click"
handler="{currentState= ''}"/>
<mx:Label text="-" fontSize="16" width="20" height="17" fontWeight="bold"
click="{currentState= 'minimize'}" id="label1"/>
</mx:HBox>
Yes, Flex states is a valid solution for this example. It remains to be
seen if states are applicable for screen with lots of controls/pages.
