Welcome!

Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex, Java IoT, Machine Learning

Adobe Flex: Article

Adobe Flex: Program in Style or an Elevator Pitch

All students usually get excited by Adobe Flex, but each of them comes with different understanding of how to do things right

From Farata  Systems blog

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…

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 minute 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,”I used to write long programs because during job interviews they would  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"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
     <mx:Panel id="thePanel" title="The Panel" height="90" width="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="{if (minimizeActions.text=='+'){
                          minimizeActions.text='-';
                          thePanel.height=100;
                      } else {
                         minimizeActions.text='+';
                          thePanel.height=20;
                      }
                     }" />
     </mx:HBox>  
</mx:Application>

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"?>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" layout="absolute"
     applicationComplete="minimizeActions.addEventListener(MouseEvent.CLICK, resizePanel);">
   <mx:Canvas id="theCanvas" height="100" width="100%" >                
     <local:ResizableJPanel id="thePanel"  height="90" width="100%"
             title="The Paaanel" 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"  />
     </mx:HBox>
   </mx:Canvas>        
  <mx:Script>
       <![CDATA[
        function resizePanel(event:MouseEvent):void{
         if (thePanel.minimized){
             minimizeActions.text="-";
             thePanel.resizeMe();
             theCanvas.height=thePanel.maxHeight;
         } else {
             minimizeActions.text="+";
             thePanel.resizeMe();
             theCanvas.height=thePanel.minHeight;
         }
    }

       ]]>
   </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?

More Stories By Yakov Fain

Yakov Fain is a Java Champion and a co-founder of the IT consultancy Farata Systems and the product company SuranceBay. He wrote a thousand blogs (http://yakovfain.com) and several books about software development. Yakov authored and co-authored such books as "Angular 2 Development with TypeScript", "Java 24-Hour Trainer", and "Enterprise Web Development". His Twitter tag is @yfain

Comments (2) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
Daniel Szmulewicz 06/19/08 12:08:17 PM EDT

Shalom,

OK, so this post is two years old, but I just found it today and appreciated it a lot. Very instructive, indeed. Since you asked for more versions to achieve the desired resizeable canvas, may I offer mine. It is in the line of the Flex version offered at the end, only simplified.

Here it is:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute">
<mx:Script>
[Bindable]
public var minimized:Boolean = false;
</mx:Script>

<mx:Panel title="The Panel" id="thePanel" height="{minimized?thePanel.minHeight:thePanel.maxHeight}" width="99%" minHeight="20" maxHeight="100" headerHeight="20"/>

<mx:HBox width="99%" horizontalAlign="right" paddingRight="2">
<mx:Label text="{minimized?'+':'-'}" fontSize="16" width="20" height="17" fontWeight="bold" click="{minimized=!minimized}" />
</mx:HBox>
</mx:Application>

Thanks again.

Daniel Szmulewicz

PS: I'm looking for a job. Do I win one?

AJAXWorld News Desk 09/23/06 03:16:38 PM EDT

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.

@ThingsExpo Stories
SYS-CON Events announced today that Fusic will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Fusic Co. provides mocks as virtual IoT devices. You can customize mocks, and get any amount of data at any time in your test. For more information, visit https://fusic.co.jp/english/.
SYS-CON Events announced today that Ryobi Systems will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Ryobi Systems Co., Ltd., as an information service company, specialized in business support for local governments and medical industry. We are challenging to achive the precision farming with AI. For more information, visit http:...
SYS-CON Events announced today that Keisoku Research Consultant Co. will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Keisoku Research Consultant, Co. offers research and consulting in a wide range of civil engineering-related fields from information construction to preservation of cultural properties. For more information, vi...
SYS-CON Events announced today that B2Cloud will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. B2Cloud specializes in IoT devices for preventive and predictive maintenance in any kind of equipment retrieving data like Energy consumption, working time, temperature, humidity, pressure, etc.
SYS-CON Events announced today that N3N will exhibit at SYS-CON's @ThingsExpo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. N3N’s solutions increase the effectiveness of operations and control centers, increase the value of IoT investments, and facilitate real-time operational decision making. N3N enables operations teams with a four dimensional digital “big board” that consolidates real-time live video feeds alongside IoT sensor data a...
SYS-CON Events announced today that Daiya Industry will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Daiya Industry specializes in orthotic support systems and assistive devices with pneumatic artificial muscles in order to contribute to an extended healthy life expectancy. For more information, please visit https://www.daiyak...
SYS-CON Events announced today that Interface Corporation will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Interface Corporation is a company developing, manufacturing and marketing high quality and wide variety of industrial computers and interface modules such as PCIs and PCI express. For more information, visit http://www.i...
SYS-CON Events announced today that Mobile Create USA will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Mobile Create USA Inc. is an MVNO-based business model that uses portable communication devices and cellular-based infrastructure in the development, sales, operation and mobile communications systems incorporating GPS capabi...
In his session at @ThingsExpo, Greg Gorman is the Director, IoT Developer Ecosystem, Watson IoT, will provide a short tutorial on Node-RED, a Node.js-based programming tool for wiring together hardware devices, APIs and online services in new and interesting ways. It provides a browser-based editor that makes it easy to wire together flows using a wide range of nodes in the palette that can be deployed to its runtime in a single-click. There is a large library of contributed nodes that help so...
Elon Musk is among the notable industry figures who worries about the power of AI to destroy rather than help society. Mark Zuckerberg, on the other hand, embraces all that is going on. AI is most powerful when deployed across the vast networks being built for Internets of Things in the manufacturing, transportation and logistics, retail, healthcare, government and other sectors. Is AI transforming IoT for the good or the bad? Do we need to worry about its potential destructive power? Or will we...
SYS-CON Events announced today that mruby Forum will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. mruby is the lightweight implementation of the Ruby language. We introduce mruby and the mruby IoT framework that enhances development productivity. For more information, visit http://forum.mruby.org/.
SYS-CON Events announced today that Suzuki Inc. will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Suzuki Inc. is a semiconductor-related business, including sales of consuming parts, parts repair, and maintenance for semiconductor manufacturing machines, etc. It is also a health care business providing experimental research for...
SYS-CON Events announced today that Nihon Micron will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Nihon Micron Co., Ltd. strives for technological innovation to establish high-density, high-precision processing technology for providing printed circuit board and metal mount RFID tags used for communication devices. For more inf...
SYS-CON Events announced today that SIGMA Corporation will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. uLaser flow inspection device from the Japanese top share to Global Standard! Then, make the best use of data to flip to next page. For more information, visit http://www.sigma-k.co.jp/en/.
With major technology companies and startups seriously embracing Cloud strategies, now is the perfect time to attend 21st Cloud Expo October 31 - November 2, 2017, at the Santa Clara Convention Center, CA, and June 12-14, 2018, at the Javits Center in New York City, NY, and learn what is going on, contribute to the discussions, and ensure that your enterprise is on the right path to Digital Transformation.
SYS-CON Events announced today that MIRAI Inc. will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. MIRAI Inc. are IT consultants from the public sector whose mission is to solve social issues by technology and innovation and to create a meaningful future for people.
While some developers care passionately about how data centers and clouds are architected, for most, it is only the end result that matters. To the majority of companies, technology exists to solve a business problem, and only delivers value when it is solving that problem. 2017 brings the mainstream adoption of containers for production workloads. In his session at 21st Cloud Expo, Ben McCormack, VP of Operations at Evernote, will discuss how data centers of the future will be managed, how th...
SYS-CON Events announced today that Enroute Lab will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Enroute Lab is an industrial design, research and development company of unmanned robotic vehicle system. For more information, please visit http://elab.co.jp/.
Agile has finally jumped the technology shark, expanding outside the software world. Enterprises are now increasingly adopting Agile practices across their organizations in order to successfully navigate the disruptive waters that threaten to drown them. In our quest for establishing change as a core competency in our organizations, this business-centric notion of Agile is an essential component of Agile Digital Transformation. In the years since the publication of the Agile Manifesto, the conn...
The Internet giants are fully embracing AI. All the services they offer to their customers are aimed at drawing a map of the world with the data they get. The AIs from these companies are used to build disruptive approaches that cannot be used by established enterprises, which are threatened by these disruptions. However, most leaders underestimate the effect this will have on their businesses. In his session at 21st Cloud Expo, Rene Buest, Director Market Research & Technology Evangelism at Ara...