Flex - the basics & databinding

By Apache on Wednesday 31 March 2010 23:16 - Comments (4)
Categories: Flex, Geekstuff, Views: 4.851

Flex

Origin
As some of you may know, flex is a product from adobe, and it runs using the flash player. People were creating forms and components in flash so adobe started standardizing UI component development and targetting "the enterprise". For more information you can always check out wikipedia

If you would like to know how I ended up with flex you can read my introduction blogpost.
Main ingredients: mxml, actionscript (& css)
If you are already familiar with html/javascript/css you will feel right at home. Both languages are members of the ecmascript family and have a similar syntax, but actionscript has typing and a more oo features like access modifiers, interfaces, ...

Css is similar to the version you already know from html, I won't go into detail yet (not that interesting anyway ;)). If you are interested you can play with it here.

The other main ingredient is mxml, this is a way to declaratively write down the layout. This has major advantages over just writing everything in actionscript.

When you start nesting panels in canvas's, and some custom components in that, in code you would get something like:


Flash ActionScript:
1
2
3
4
5
6
7
8
9
10
11
12
var p: Panel = new Panel();
            p.width = 500;
            p.layout = new VerticalLayout();

            var label: Label = new Label();
            label.text = "test";

            var tInput: TextInput = new TextInput();
            tInput.width = 200

            p.addChild(label);
            p.addChild(tInput);



or


XML:
1
2
3
4
5
6
<s:Panel width="500">
        <s:VGroup>
            <s:Label text="test" />
            <s:TextInput width="200" />
        </s:VGroup>
    </s:Panel>



You can have a rough visual image by the indenting of the declarative layout, it's cleaner to set multiple properties. But the important thing here is that in the end the compiler will also translate the mxml to actionscript for you. This means you can mix and match because each mxml component you declare is also a class that can extend an actionscript class or vice versa.


Here is an example. you can right click to view the source .
http://tweakers.net/ext/f/RJrgGnU3iTWXVhqNmRX40N2D/full.png


The most important thing to remember: mxml will also end up as actionscript. They can be mixed, and thus it's possible to use the code-behind pattern to completely seperate the declaration of the layout and the code. You can in the example that the calculation is made in the actionscript code and not in the mxml code. It might be a stupid example but keeps things clean.

One thing that might not be obvious, what if you do want to access a ui component from the actionscript that will only be declared in the mxml. Well just declare it in actionscript already and make sure the id-attribute in mxml matches the property name and type with the component from the parent class you are extending. The compiler will make sure it's the same component.
Data Binding & binding expressions
Databinding is really usefull for many things, so I build a couple of usefull examples. Together with the binding expressions we can use it for example to highlight things, to make components visible/invisible depending upon the state. But the basics it does is get rid of of 2 very common methods in a UI:

void setFormValues(Model model){}
Model getFromFormValues(){}

Those are filled by many textInput.setText(model.getName()) etc ... most of us have been there, this is painfull boilerplate, I can tell you that it's possible to get completely rid of this with data binding.

Data binding example:

XML:
1
2
3
4
5
6
7
8
9
10
11
<?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/halo" xmlns:local="*">
    <fx:Script>
        <![CDATA[
            /* add magical ingredient here :) */
            [Bindable]
            private var myText: String = "test";
        ]]>
    </fx:Script>
    <s:TextInput text="@myTtext}" id="textInputBinding" />
</s:Application>



When we add the [Bindable] to a property or a whole class (tean it will effect all it's properties) we are saying to the compiler: when this property changes we want a propertyChangeEvent to be thrown. This is effectively the [ur=http://en.wikipedia.org/wiki/Observer_pattern]Observer pattern[/url] generated completely automatically for you, if you want to check the details on this you can tell the compiler: -keep-generated-actionscript, and you will be able to see the "magic" behind.

In this case when the property myText gets updated the textinput component is listening and will update itself accordingly when the property myText changes.

You can see that there is bi-directional binding expression in the text property of the textinput. This is indicated by the @, if we don't put the @ our textinput will always display the latest version of the myText property but it will never change it when the text property itself changes. Both have it's uses and the bidirectional one can be overkill for certain usecases.

Here is an example of a binding expression for visibility

XML:
1
2
3
4
5
6
7
8
9
10
11
<?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/halo" xmlns:local="*">
    <fx:Script>
        <![CDATA[
            /* add magical ingredient here :) */
            [Bindable]
            private var isAdmin: Boolean = false;
        ]]>
    </fx:Script>
    <s:Button text="really neat button" visible="{isAdmin}" />
</s:Application>



It would make no sense at all here to use bidi binding since the button will not change the value of the boolean.

The important thing here is that binding is really powerful, it will save you lots of coding and can be used in creative ways.


Click more binding
examples. You can right click to view the source.
http://tweakers.net/ext/f/1jbBDlW7yb825l2wW1XTlHCY/full.png


That's it for these 2 subjects. Well what is coming up in the next one:
  • Custom components & concept of states
  • Custom components pt. 2 & adobe air
  • Server-side integration: flex & php, flex & java
  • A small flex application
  • Styling and skinning examples
  • Comparing series: html5, GWT, silverlight (will be interesting for me as well, I'm looking forward to discovering nice stuff here!)
  • ...
Feel free to ask questions or post your remarques as a comment and I will try to answer it in on of my posts asap. After I blogged about those themes I will try to handle some more specific "how do I do this"-or "how do I handle this specific use-case"-questions.

http://codecaster.nl/got/rmb/star1.gifhttp://codecaster.nl/got/rmb/star2.gifhttp://codecaster.nl/got/rmb/star3.gifhttp://codecaster.nl/got/rmb/star4.gifhttp://codecaster.nl/got/rmb/star5.gifhttp://codecaster.nl/got/rmb/stats.gif

Volgende: Flex - little black book 04-'10 Flex - little black book
Volgende: My trip down the rabbit hole 03-'10 My trip down the rabbit hole

Comments


By Tweakers user ZpAz, Wednesday 31 March 2010 23:43

Instead of only comparing to GWT you allso could take for examle sproutcore (used by Apple in Mobile Me and iWorks online, Cappuccino an 'cocoa' for the web framework, used by 280 slides or ExtJS in account.

By Tweakers user Alex), Thursday 1 April 2010 01:30

I know that Flex has been around longer, but I am wondering how it matches up to Silverlight. Version 4 is just around the corner, and my feeling tells me that Microsoft is way ahead of Flex. When I look at MXML and I compare it to XAML, I prefer XAML.

For example, DataBinding in XAML:

code:
1
<TextBox Text="{Binding Path=FirstName,Mode=TwoWay}" />



I just stick in an object with a FirstName-property, and it's hooked up.

Also, how does Flex compare to Silverlight when it comes to using serverside stuff, like web services?

By Tweakers user Apache, Thursday 1 April 2010 14:51

@ZpAz: thanks for the suggestions, I already used the gwt wrapper around extjs, when there was jsext and extjs, one was native, the other one was not. Confusing times.
You should read my introduction post to know that I quite dislike the idea of having a component based framework written in pure js/html/css because of it's limitations, but I will have a detailed look in the future to make a side-by-side comparison.

@Alex): where do you stick the object? :)
No seriously, it looks exactly the same in flex, only with a more verbose syntax

Flash ActionScript:
1
<s:TextInput text="@{firstName}" />



The @ implies bidirectionality. firstName points to this.firstName

But you can have:

Flash ActionScript:
1
<s:TextInput text="@{this.viewModel.invoice.description}" />



That's not an issue, it can be any path in your viewmodel, I will update my post tonight to reflect this possibility.

The way I see it so far is that the only thing it's way ahead at is that you need more characters to do the same thing than you do in flex ;)

By Tweakers user Alex), Wednesday 7 April 2010 20:37

In Silverlight you can assign the object from code behind, by setting the DataContext-property. You either set this on the object itself, or on a parent object. :)

Comments are closed