Layout dev/design in Flex - for HTML developers

Introduction

So, you’ve probably heard quite a few people talk about this thing called “Flex” and want to know more.. or you are yet to be convinced that creating layouts with the Flash Engine is as easy and readable as in HTML. Whatever your reasons are I’m sure this article would open your eyes to how comfortable the transition between technologies are and how empowered you will feel after realizing the flexibility and scalability of your Flex layouts.

Contents:

1. What is Flex? 2. What is MXML? 3. Why Flex for Content Driven Web Sites? - CSS for Flex - Comparison between HTML and MXML - Form Elements made easier 4. Creating typical HTML layouts with MXML - Layout 1: Simple Relative positioned Layout - Layout 2: Simple Absolute positioned Layout - Layout 3: Advanced 3 Column Relative Constraint Based Layout 5. Going beyond HTML limitations 6. Conclusion

What is Flex for HTML developers?

Flex is the result of some brilliant minds that realized there was a big gap between the everyday website developer and flash developer. Many ambitious website developers have tried taking on Flash only to be scared away by its alien layout. (in terms of building web sites) It’s hard to make sense of building a website when you’re provided with things like “movie clips”, “timelines” a Photoshop like toolbox and a big white canvas. Its clear that the Flash IDE was never designed for optimal website development. What Adobe did was is that they made the decision to create a Framework that gives developers the power to create Flash applications featuring a mark-up language called MXML which you will discover is very similar to HTML. Everything in the Flex framework however is compiled to Actionscript when you’re building your application. Whenever something in your application front end goes beyond the scope of MXML you use Actionscript (much like you would use Java script). In this article I will only be explaining how to create layouts though which is what MXML was designed for. Many HTML developers are big advocates of the global open-source community and use software that is free to develop their websites. You will be pleased to know that Flex Framework is open-source and for that reason anyone can create their own Flex sites without having to spend money. It will however make your life easier if you develop your websites using the commercial “Flex Builder” that runs on the open-source Eclipse platform. The builder comes with great debugging abilities, syntax highlighting, auto-code completion and some other great attributes.

What is MXML?

MXML is a declarative markup language that is based on the XML language. It is used to describe the interface of an Flex application with very little syntax, allowing you not to worry about the more complicated code in the background. Many of the concepts of MXML are the same in HTML. You type your code loosely with nested elements; it is descriptive and simple to understand.

• <mx:Button width="300" height="25" label="Hello World!"/>

Why Flex for Content Driven Web Sites?

Well, why not. Before it was impossible to imagine that using Flash would be as easy as writing HTML. Flash used to be a design tool that required a big learning curve for front end developers as it was a tool geared towards designers. In fact until Flex showed up this was the case. Flex is not Flash , it is a development platform and the learning curve to start using it is not as steep as you may imagine. There have been many arguments as to why you should stick with HTML but I wont go into that in this article. All that we’re interested in now is whether it is faster, easier and can do everything we would be able to do in HTML and work the same way across browsers without hacks and additional effort.

CSS for Flex

If you’re familiar with CSS you’ll be pleased to know that you can continue with this style of designing in Flex. They have changed a lot of things inside CSS however to accommodate the components. There are many additional parameters for form elements etc. Some parameters that are obsolete in Flex were also removed such as display and float. There are many methods of implementing CSS in your website, the principles are somewhat the same as it is in HTML. The biggest difference is that you don’t have to specify a style parameter when you’re adding inline styles inside your tags. You can just add the parameters loosely.

Comparison between HTML and MXML

I want to start with a statement that I intend to defend in the later examples: Adobe has managed to reflect the way we think of layout design in HTML in Flex. To start with an example, instead of div we use Canvas that is used for applying absolute positioning: In HTML:

• <div align="center" width="300" height="300" style="background-color:yellow;" />

In Flex:

• <mx:Canvas width="300" height="300" horizontalCenter="0" backgroundColor="Yellow"/>

For dealing with horizontal and vertical layouts they have supplied us with Hbox and Vbox that allows us to constrain content to certain directions relatively. In HTML:

• <div style="header"> <span style="headerText">Website Title</span> <span style="headerTextDescription">headerTextDescription </span> </div>

In Flex:

• <mx:HBox styleName="header"> <mx:Text styleName="headerText" text="Website Title"/> <mx:Text styleName="headerTextDescription" text="This is a description"/> </mx:HBox>

You have other out of the box components that help you deal with content with ease in Flex. Such as:

• <mx:Text text="Hello World!"/> <mx:Image source="@Embed(source='myImage.png')"/>

Flex has also added the ability to use HTML formatting instead of regular text so that you can add html tags for bold, italics etc. It is however a very limited subset of HTML though so don’t expect tags like <h1> out of the box. The goal is not to have a browser within the browser. To achieve consistent formating in Flex you use CSS. Since MXML is stricter then HTML in terms of XML standard compliance you have to enclose it with CDATA tags.

• <mx:Text> <mx:htmlText> <![CDATA[ <a href="google.com" style="myLinks" />Google</a> <p style="myStyle">This is a paragraph </p> ]]> </mx:htmlText> </mx:Text>

Now let’s move on and see how Adobe have made it really easy to create complex layouts with the use of a few Flex containers.

Form Elements made easier

Adobe has put an exceptional amount of effort into making sure that you can create advanced forms with a minimal amount of effort. Below is an example of just how simple it is:

• <mx:Form> <mx:FormHeading label="My Account"/> <mx:FormItem> <mx:Text text="Username:"/> <mx:TextInput width="130"/> </mx:FormItem> <mx:FormItem> <mx:Text text="Password:"/> <mx:TextInput displayAsPassword="true" width="130"/> </mx:FormItem> <mx:FormItem> <mx:CheckBox label="Remember Me"/> </mx:FormItem> <mx:FormItem> <mx:Button label="Submit"/> </mx:FormItem> </mx:Form>

Creating typical HTML layouts with MXML

Layout 1: Simple Relative positioned Layout

For this example we’ll be using the HBox and VBox components to create our layout. Source Code: Click here Live Demo: Click here

Layout 2: Simple Absolute positioned Layout

For this Example we’ll be using the Canvas component to create our layout. Source Code: Click here Live Demo: Click here

Layout 3: Advanced 3 Column Relative Constraint Based Layout

For this Example we’ll be using the Canvas component to create our layout. We use a fairly unconventional container that replaces the Grid element that was used before Flex 3 Beta 3. The beauty of this layout is that you can have the content specifying the dimensions of its parent container. We call it “content” dimensions, it is an alternative to percentage and fixed dimensions. This sort of layout is perfect for creating what we’re trying to achieve. Like tables you use rows and columns but we think of them more as guidelines for anchoring than boxes drawn with lines. Source Code: Click here Live Demo: Click here

Going beyond HTML limitations

The real fun starts here. Its all great being able to replicate simple HTML layouts but if that was all that we were trying to achieve there would be no point in using Flex. I wont go into great detail since that is not the point of this article. It is important however to explain to you what you can achieve with your website if you wanted to reap the benefits of running it on the flash engine. The biggest limitation of all in Web Design would be browser compatibility. Since Flash runs on every browser and platform in exactly the same way this concept flies right out the window. You can apply pretty much any effect you desire and have your site behave just as a desktop application would with drag and drop, min/maximize, fade in/out etc. Instead of thinking of a site with pages you think of it as changes in states. Those states can behave in any way you would like.. whether its zooming, flying, dissolving, exploding… the options are limitless. Some of these effects can be done just with MXML so you would only need to touch on Actionscript when you want something a little more advanced. You can import swf animations that you’ve created in the Flash IDE or import graphics and videos using the components oriented to each media type. The controls in Flex give you great power to modify the playback of a video, the properties of a bitmap and so much more. There are sites out there that let you do image editing, video editing and text authoring that run of the flash engine. Infact.. im writing this on a Flex application: www.buzzword.com If you’re familiar with the layer modes in Photoshop you’d be pleased to know that many of those can be used on any type of component you’re using in Flex… such as multiply. The other great advantage of developing your website to run on the Flash engine is that your website is ready out of the box to be compiled with the Air runtime. This will allow you to run your websites/applications as regular desktop programs.

Conclusion

Knowing what you now know about Flex, you can rest assured that this is not something scary, expensive, hard to learn technology but something in your reach, free, easy to learn and familiar. This article merely scratches the surface to explain the similarities that Flex shares with HTML. There are a fortune of new things that will empower you as a layout designer/developer. I hope that you will give Flex a try and make your own conclusion whether it is the right tool for you. Good luck!