What You Need to Know about Adobe Flex (Part 2 of 2)

This is the second part of a 2 part series on Adobe Flex. What you need to know about Adobe Flex part 1 covered some of the basics of the framework and introduced some of it's strengths and weaknesses. With this second part we will dig deeper and explore Flex a bit further.

As a Flex designer there will be a few key concepts that you will need to be familiar with to be as efficient as possible in your position. The next few sections will be evaluating a few concepts that are integral to a Flex designers daily life.

Flex Components

Within the Flex framework is a miriade of components and utilities to help with your development. These components are the common components that are found in most RIAs, such as Buttons, Sliders, Containers, Services, Inputs, and Charts. You can see examples of these components in an application that has been provided by Adobe called Tour De Flex.

Along with the components provided by Adobe, other developers are often creating custom components. These components are spread out all over the web and also within the Tour De Flex application. With Tour De Flex you can also see examples of how to code with these components.

Flex Skinning

Now that you know about the Flex components you need to know how to customize the look and feel of the Flex components to make them yours and unique to your application - also called skinning.

As a designer you know though that Adobe is primarily a design company with the best in design tools. As such Adobe has built close integration between their design tools and their RIA tools. What this means for you as a designer is you can now design your Flex Component Skins in Photoshop, Illustrator, Fireworks, or the new RIA Design Application Flash Catalyst. With these applications you can design and export your entire application for immediate consumption into your Flex RIA due to the new FXG standard. Long story short, FXG allows for one common graphical language between all these applications and the development environment.

Now with the ability to put together your application and make it look however you wish you can create some amazing new RIAs. There are still a few more things to talk about to make you "in the know".

MXML (m - ecks - m - el) MXML is the XML based makeup language used to layout components in a Flex Application. When an application is compiled the MXML markup is translated to Actionscript and then compiled by the compiler. MXML is just a nice visual layout markup - making it much easier to "see" how an application is laid out in a simplified markup schema.

MXML 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/mx">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Label text="Feeds" left="10" top="10" fontSize="18"/>
	<s:List left="10" top="35" width="200" bottom="50" id="list">
	<s:TextInput bottom="10" left="10" width="150" id="addInput" toolTip="Add Feed URL Here"/>
	<s:Button label="+" left="170" width="40" id="adButton" bottom="10"/>
	<s:TextArea top="35" left="218" bottom="10" right="10" id="viewspace"/>
</s:Application>

I am guessing by reading the MXML that you can already "see" what this layout will produce, but if you can't here it is.

You will notice for this example that I made this a "flow" layout, so that the layout grows and stretches and changes based on the size of the application relative to the boundaries of the application. Due to the layout capabilities of Flex, even the most complicated layouts are done with ease - and will look the same on all browsers without any hacky css.

Actionscript

Actionscript (AS) is the scripting language that this entire horse and pony show runs on. As I mentioned before, ever line of MXML gets converted into AS before being compiled into the final SWF file. Currently the Actionscript Language API is in it's 3rd iteration - which is why you see people say AS3.

Actionscript is a ECMA script based language that is entirely event driven. Looking syntactically like a beautiful mutant baby between Java and Javascript, Actionscript is easy to pick up and required for your event scripting. Just getting started you will probably find yourself sprinkling a little AS3 in just your event handler functions, easily adding complex functionality to your own beautiful applications. Getting into AS3 scripting is when the guidance of a developer will be especially helpful.

Actionscript 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/mx">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable]
			public var dataProvider:ArrayCollection = new ArrayCollection();
			
			protected function addButton_clickHandler(event:MouseEvent):void
			{
				dataProvider.addItem( addInput.text );
			}
		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Label text="Feeds" left="10" top="10" fontSize="18"/>
	<s:List left="10" top="35" width="200" bottom="50" id="list" dataProvider="{dataProvider}"/>
	<s:TextInput bottom="10" left="10" width="150" id="addInput" toolTip="Add Feed URL Here"/>
	<s:Button label="+" left="170" width="40" id="addButton" bottom="10" click="addButton_clickHandler(event)"/>
	<s:TextArea top="35" left="218" bottom="10" right="10" id="viewspace"/>
</s:Application>

The above example is not another picture, interact with it! I built on my above example just a touch. It still doesn't DO much - but you can add text to the list on the left now thanks to the power of Actionscript.

Air

This last concept is something that I think scares and fascinates people. Now due to AIR you can immediately release your application to the desktop and mobile devices and take advantage of device capabilities such as camera and microphone support, making phone calls, connecting to GPS, file system access, and many others.

With your perfect and beautiful application running on the web you can shift to the desktop and with ease and take advantage of offline support and network detections. When I say "with ease" I'm not just using marketing jargon, I mean that you can just recompile your web app to an AIR desktop app in a few minutes and be done.

Yes, if you want to support device specific APIs then there is some added development that will need to be done, but right out of the gate your app can work on the desktop and look exactly as it does in the web.

And like Flash Player, AIR is a build once deploy anywhere development environment. I just have to build the application once and I can deploy to PC, Mac, or Linux without any additional changes, modifications, or tests. Another time saver! No longer do you have to worry about learning Mac development, PC, development, Mobile development, Linux development, and Web app development - just learn Flex development!

You probably are already used to running AIR apps such as:

Sliderocket

TweetDeck

Kuler

Understanding these points and the jargon used in Flex development will help you be more effective in the Flex development environment.