Adobe Flex 2.0 training day 2: Layout day !
7 November , 2006
Posted by on
Except the fact that the train has a small delay of 6 minutes, I was good on time for the second day of the flex training at the Adobe Offices in Brussels. This day was the real one and only design and layout day ! I think our master trainer Simon Slooten loved this day ;-).
An overview of what we learned today:
- We started with using a constraint based layout in Flex 2.0: it actually mean that we think about how objects can grow in size when we resize the browser window. (eg. think about a datagrid control). This is very important because when we work with x and y coordinates to layout our application there is no resizing or positioning of the objects when we resize the browser window. So we have to tell the Flash player how resizing has to be done and that is exactly a constraint based layout. (e g: start this textField always at a given place or a button can move towards a Label but not go over the Label). Constraints in Flex are nothing more then properties of a component so we just have to play around with the settings till we have the desired results ! Flex makes live soo much easier !
- The second thing on layout is using view states. View states are the answer to the question: How do you want to do screen layout changes. When we think back about Flash and RIA development it was very difficult to make some “pages” with a different layout. One time Macromedia invented screens as you know as a attempt to fullfill this statement. Screens are actually really cool but… nobody uses it :-). With the use of view states we can make now “pages” with different layout very very easy so again… Flex makes live a lot easier for a develloper/designer !
- And yes you also can use the view states in a main application when working with custom made components who also have their own view states. Imagine you have a main application that holds three different view states for three different components. The three different states in the main application can trigger view states for the three custom components so combinations are endless !
- Oh yes I almost forget : you sure most of the time use view states on given events (eg when mouse rolls over a container). But please promis me to think about usability also because I guess you do not want to support the British epilepsy federation by using tooo much color and screen changings 🙂 (does I sound like some person called Mr Nielsen ?)
- The next logical unit today was on how we can control the navigation in a Flex 2.0 applications. We already know how we can control the X and Y coordinates of a given object on the screen but we can use also the z coordinate ! This means that everything is on top of each other. Therefore we use the wonderfull ViewStack component. It can be eg a stack of panels. An other cool thing to know is that all navigator containers are based on a dataProvider propery to push data in a component. So give the viewStack an id and use that id as a databinding property of a navigation container and it all works !! An important propery is also the creationPolicy property. When using this you must think about following question: Imagine that you have an application that uses 20 components, must all components be instantiated and be drawn and next be placed invisible on top of each other , or only the visible ones at the start of the application?? Maybe yes maybe not and you can use the creationPolicy property to tell the Flash player what should be instantiated. Maybe you want your page to be build up like a traditional HTML page (bit by bit); then you use queued as a value for that property.
- We also cool other navigation components like the TabNavigator, Accordion, ButtonBar, ToggleButtonBar,.. But one really cool feature is the ApplicationControlBar: imagine you want a navigation to be visible on the top of the page but even when you scroll down the page. Then you can set the ApplicationControlBar to be docked , so It always stayes at the top.
- Very imporant for applications is that you can make them have the look the client asks. Maybe even the client has a styleguide on how their brand has to be used. There are three ways in Flex 2.0 to customize the look and feel of an application:
- Using the style properties of each component, one by one (width, color, edges,…)
- Using a CSS stylesheet (intern or extern)
- SKINNING : Go to \\\\Program Files\Adobe\Flex Builder 2\Flex SDK 2\frameworks\themes\AeonGraphical Source\AeonGraphical.fla and customize this Flash file. This Flash file contains all of the design Flex uses as default SKIN. So if you are a designer you can easily make your whole Flex 2.0 application looks like the client describes in his styleguide. When you are done editing, just save it as <clientStyle>.FLA and use the theme property of the application mxml tag to load your custom skin ! The skin will be compiled and included in the resulting SWF file !
- Next logical thing to do wass applying behaviours on components. It are some kind of effects. We also have a way to say when a effect has to be executed. It is actually like some kind of an event but now called triggers. You can also using multiple effects at the same trigger by using the Parallell and the Sequence tags. Something similar are the transitions where the effects are triggered automatically when a value of the currentState changes.
- Because we behave well today 🙂 we had some time left to already start with the first unit for day three focussing on using MXML and Actionscript data models. Normally Macromedia (before merger) had no interests in how you implemented something because they just want you to implement it and the way how you did that is not important. But Flex 2.0 data modelling is actually based on the MVC (Model View Controller) data model. It is a three layer data model that separates the view (communication with the user), data (model) and the controller (logic of the application). You can use in Flex 2.0 a Model tag to make a data object and bind it with some hard coded properties of the object but that is actually a quick and dirty way so better do not do it. Instead use Actionscript classes as a data model. Most important is that you have to wrap every class in a package. A component is actually also a class so when you make a class, you can use it as a component also. But you can not instantiate properties via the constructor of the class by using MXML tags. So do not forget, when we use MXML to instantiate a object from a class, you must have a constructor in that class that do not accepts parameters.
Pffew… a busy but interesting layout and design day 🙂