Apache Flex in Action

Intuitive UI that can run in Desktop, Web, Mobile & TV.

Originated from Adobe and now available as opensource under Apache. Download Binaries from here:

1. Create an Empty folder 👿 (Ya, I know, you have to do this) where you want to keep the binaries to be installed before running the installer.

1. Following IDEs are supportive. IntelliJIDEA, FlashBuilder and Eclipse. IDEA is my favorite and below screen can help to start creating a new project. After the installation is complete configure your IDE for Flex SDK and we are all set to start building an application.

Lets see the below example UI. Its a web application where UI is completely separated from backend development and deployment. The same application can be packed for Adobe AIR Runtime as well so that it can run as a desktop application too. Meaning install the application in the desktop and can be opened as a desktop app.

Facts needed to know to start programming the Flex.

1. Like every scripting language flex store the files using an extension “.mxml”. Its an XML developed by Macromedia and hence MXML. 🎰
2. Secret of communication across the components done through events. Defining(Adding & Removing Event Listeners dynamically), Generating and Bubbling Events. 🗯
3. Compilation of the views(.mxml files) results to .SWF(Small Web Format) files. 💻
4. Like an XML these components (.mxml files) will be having XML elements and ActionScript(.as) embedded inside. 🔆
5. Like the namespaces in XML (Its fine even if you don’t know) there are two available types in Flex SDK. 🔅

👉 Language specific: Example: xmlns:fx="http://ns.adobe.com/mxml/2009". Explains about the version of the mxml language we are using.

👉 Component specific: Again of two types. 1. Halo(mx). 2. Spark(s).

xmlns:mx="library://ns.adobe.com/flex/halo"

xmlns:s="library://ns.adobe.com/flex/spark"

To understand the difference between Halo and Spark, we need to know how to build a view and its skinning mechanism. Skinning means, defining colors, fonts, styles, etc. Similar like XML element has an attribute Ex: <s:Button color:red/> or <mx:Button color:red/>. This skinning is limited and you can apply the standard CSS attributes in most cases.

But, when you have a creative component imagined in your dreams that’s the time we need a skin customization where you define your custom attributes as a new skin component which is not part of the standard Flex SDK. Using this custom mechanism you can draw a shape inside the browser and that opens up the gates for creative implementations.

These custom skinning supported by spark components Ex: <s:SparkSkin /> whereas Halo is not. Definition of the custom skin built in Spark, can be applied inside a Halo component too.

Imagine a button that has oval shape one side and arrow on another side, written in a file TestCustomSkin.mxml. Now the way how we will apply this skin to a halo component is listed as below.

Take a look at the live application(If you don’t have flash it goes back to EXTJS version of the same application) as screenshoted below. This is the UI rendered by browser using the flash player. The same application can also be build as a desktop application and will be run by AIR run-time instead of browser, with no single change to the views(mxml component).

View the source here

Let’s get into the source code using a working example on github.

bin-debug, html-template, bin-release, src are the primary directories. When we start the application in debug mode, IDE will create the bin-debug directory with all the compiled files placed into it. Files compiled into this usually having a higher size than the production ready compilations from bin-release. html-template is having the basic run-time needed and useful only during development.

6. Communication over HTTP in ActionScript: ☎️

We are using HTTPService object from Flex SDK to communicate over HTTP.

Specification of result format using ECMAscript for XML(e4x) is important. Missing this will cause the response processor to fail.

7. StopPropagation & PreventDefault: 🛑

These are simple and important things to understand in ActionScripting. Every action that generates an event will bubbled up, to all the listeners who are registered to listen. But when you are in a need to stop this bubbling as you already handled it and not required to handle it again thats the time you want to stop the event propagation further using stopPropagation().

➕ Add a listener: someComponent.addEventListener( TimerEvent.TIMER, functionToCall );

➖ Remove the event listener: someComponent.removeEventListener( MouseEvent.MOUSE_DOWN, functionToCall);

preventDefault → as the name itself explains, the default behavior will be stopped to execute if that can be cancelled. As an example imagine the highlighted click in the below screen.

When User clicked on which generates a MouseEvent, the panel must be hidden from the view, written in a separate function and should call to execute.

Object Created as below which acts like a button upon setting a “buttonmode’’`s style set to to “true”

And here is the event listener.

Taking a look at the event handler, the first two lines are are stopping the mouse click event bubbling further and also preventing its default behavior of a click in the browser. Though here preventDefault harms nothing, I showed as an example. When you want to type a character into a text box, the visibility of that character is what the default behavior is and you can stop that visibility in the text box by preventing it using preventDefault().

After understanding the stopPropagation() and preventDefault(), take a look at this complete component code of the right panel(id=rightCanvas).

and finally make the panel resizable to the target canvas. Its an inbuilt feature of Canvas.

Another important thing to learn is to Add and Removing Event Listeners on fly. Here is an example that tells how to add and remove a listener. We can add and remove to an external component or to the same where you are writing the code.

Take a look at the right panel in allibilli.com example listed above.

Event bubbling mechanism:

Component 3 is the event generator and now the event is propagated to multiple components to handle up to ChildComp 1 and ChildComp R because there are the listeners defined. This is what called Event Bubbling.

The Pre-loader: Keeps the user live on your page while the app is loading from the server. This is important to let the user know you are downloading the app progressively and will be loaded shortly for those users who are on low network bandwidth. In other cases, they load instantly. If your app is growing bigger in size means you have a problem with the application design. You should break down the Applications into multiple swf files and load them only as needed during runtime.

🚥 Pitfalls:

1. All Flex based applications requires Adobe Flash Player to run. Considering the Flash player opportunities that it provides, its also opens up the gate to run the code that you can’t see from the debugger tools out of your browser.
2. Its possible Malicious native-code to execute, potentially without a user being aware. Requires a constant upgrades of the player which is not in the control of an enterprise when customers are using it.
3. Flex provides extreme control of customization. Your custom web component imagination can easily comes into action using Flex unlike building the same in JavaScript & SVG which requires more effort.
4. ECMAscript for XML ( E4X) has had comparatively limited success of adoption comparing with the power of JSON adoption.
5. With no question Flex is one of the greatest toolkit I used to build the best UI interfaces. Its the time for HTML5 to provide the same set of features and flexibility for engineers to provide.

Many thanks to rajaboopathy3782 for reviewing and keeping the content simple.

Find the publication here: https://medium.com/thinkspecial

Gopi Krishna Kancharla- Founder of http://allibilli.com