Walks like a duck, talks like a duck

By Apache on Sunday 30 May 2010 23:20 - Comments (3)
Categories: Flex, Geekstuff, Work, Views: 12.327

Some of you may already be familiar with duck typing from other languages like groovy.

If not you can ready about it here: http://en.wikipedia.org/wiki/Duck_typing

Anyway, I was working on a presentation, and in my example I was selecting Product-objects. And I didn't want to immediatly create InvoiceItems because 1) I didn't have an invoice object yet 2) it would require a really complex structure where I'm selecting Products and then when it's selected and/or the amount goes above 0 convert it to a different type of object and have the item renderer deal with it ... again complex solutions.

Then I remembered an idea I had on friday for an extension of the datagrid control without having to invasively extend the object to support certain action you want your custom component to have, like checkbox selection, custom background color for a row, etc

What I came up with was using the ObjectProxy class to wrap a real domain object but next to it takes any property you set on it. So you can store whatever ui state data on the object that behaves exactly like the business object, also when iterating over all the object properties or serializing the object.

I know you can just declare a class dynamic in actionscript, but this isn't what you want on a real domain object, it has fixed properties and you usually want to persist it in the end.

Little example how it looks

XML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<s:List width="100%" height="100%" allowMultipleSelection="true">
        <s:dataProvider>
            <util:DynamicElementArrayList origSource="{AppModel.products}" id="dynList" />
        </s:dataProvider>
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:HGroup width="100%" height="25" verticalAlign="middle" doubleClickEnabled="true" doubleClick="data.amount++">
                        <s:CheckBox selected="@{data.selected}" /> 
                        <s:Label text="{data.name}" /><mx:Spacer width="100%" /><s:Label text="{data.price}" />
                        <s:ComboBox selectedItem="@{data.amount}" requireSelection="true">
                            <s:ArrayCollection>
                                <fx:Array>
                                    <fx:Number>1</fx:Number>
                                    <fx:Number>2</fx:Number>
                                    <fx:Number>3</fx:Number>
                                    <fx:Number>4</fx:Number>
                                    <fx:Number>5</fx:Number>
                                </fx:Array>
                            </s:ArrayCollection>
                        </s:ComboBox>
                    </s:HGroup>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>



The dynamicElementArrayList will just wrap each object inside a DynamicElement class.

And the core of the DynamicElement are these 2 simple overrides:

Flash ActionScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
flash_proxy override function getProperty(name:*):* {
            if (wrappedObject.hasOwnProperty(name))
            {
                return super.getProperty(name);
            } else {
                return dynamicProperties[name];
            }
        }
        
        flash_proxy override function setProperty(name:*, value:*):void {
            var oldValue: *;
            if (wrappedObject.hasOwnProperty(name))
            {
                oldValue = wrappedObject[name]; 
                super.setProperty(name, value);
            } else {
                oldValue = dynamicProperties[name];
                dynamicProperties[name] = value;
            }
            
            // binding
            this.dispatchEvent(new PropertyChangeEvent(PropertyChangeEvent.PROPERTY_CHANGE, false, false, null, this, oldValue, value, this));
        }



Similar things can be done in php using __get() and __set(), and probably in other languages as well.

In the end it allows me to have this screen backed by regular old domain objects, but I can also get/set the metadata I need for the ui, without having to create new classes every time.

http://tweakers.net/ext/f/0R7pI6hMfL8tuLPEAOxB2wqo/full.png

can be handled as, where obj.selected and obj.amount are not on the original object, and the ObjectUtil.toString does not show the new dynamic properties and also identifies the object class as the original domain class.

Flash ActionScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
for each (var obj: Object in dynList)
                {
                    trace("----------------------------");
                    if (obj.selected)
                    {
                        trace(ObjectUtil.toString(obj));
                        trace("amount: " + obj.amount);
                    }
                    else
                    {
                        trace("not selected:");
                        trace(ObjectUtil.toString(obj));
                    }
                    
                }



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

Flex - little black book

By Apache on Sunday 4 April 2010 22:47 - Comments (5)
Categories: Flex, Geekstuff, Views: 15.934

As an IT guy, when you are going out, there is only one big problem, all the girls are hitting on you!

So to keep track of all this data and to further clarify what my last post was about I came up with the little black book. Technically it mostly demonstrated the mixing of ActionScript and MXML, with the code behind pattern and declaring ActionScript domain models as mxml.

Everything else depends upon databinding.
http://tweakers.net/ext/f/eP166GKwnuDTuzFRoD3sdStD/full.png

If you want some more technical background read my previous post, and to view the source, just right click the app and click view source.

More coming soon!

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

Flex - the basics & databinding

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

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

My trip down the rabbit hole

By Apache on Wednesday 31 March 2010 22:58 - Comments are closed
Categories: Flex, Geekstuff, Java, Life, Work, Views: 2.625

Hello everybody,

Since what you can read below is merely meta-data about how I arrived at the subject of my blog. It probably won't be very interesting, except if you want some background info on how I ended up being a flex-guy. Feel free to skip ahead to my next blogpost immediately.
Introduction
Since this is my first blogpost on tweakblogs and my previous blog has been at least 5 years ago, I used to blog about php/css/js and how they related to a little hobby project I had back in the days. Other than just an introduction it will help you understand where I am coming from and how I ended up here, writing about something called "flex". And with the release of flex 4 the timing seems right to highlight some of the features.
The first steps
Almost 10 years ago, inspired by reading /14 on got, I started messing about with PHP to have some dynamic content on my website. Then at school we had to build a project so I decided to do what everybody was doing at that time, I built my own forum-software. That inspired a me to develop a silly little framework, the big hype back then was templating engines to seperate layout from business logic. This was already better than echo'n code in php, but it still wasn't component based, so a good friend and co-developer Yannick Houbrix and I did some experiments on mixing components and templates.

With limited results such as these.

http://tweakers.net/ext/f/Inp9qJNKOdIjEUp0TM2bQvmK/full.jpg

http://tweakers.net/ext/f/IgjJlnC6pfU20HGMA1LfgYr0/full.jpg


What I had learned so far:
  • PHP was not without flaws
  • Most of the frameworks available for PHP were immature at that time
  • Everybody wanted to invent his version of the wheel
  • Using html, & javascript to write "components" is painful
  • Just reloading to see your result is fun, quick and keeps you "agile"
School: time for experimenting
At school we started with some other languages, pascal, C, vb6, cobol, etc but later the focus shifted more towards java and it's frameworks like swing, jdbc, hibernate, spring, .. I remember that we got lucky with that one because spring was really becoming popular in those days.

For my internship the same friend as I worked on the php framework with and I, got a great chance to develop an eclipse RCP application, and it was my first experience with real use-cases and the UI's and custom components they require. I really like the SWT/JFace combination. It worked more intuitive than the swing TableModel (try setting a default column width) and overall it was pretty painless even though everything was new to us (and we had nobody to guide us during development since they had no in-house java-devs).


http://tweakers.net/ext/f/371vFq9PcfaV0QUpFh3t55T0/full.png

http://tweakers.net/ext/f/qrZuNA7rH3giqiSrDPo7llJc/full.png


Again some valuable conclusions for myself.
  • Java is what I want, has more language features that I was missing before
  • There are some really nice mature frameworks based on nice ideas (object relational mapping, dependency injection, etc)
  • Building UI's and custom components is actually kinda fun
  • SWT/JFace had nice UI concepts such as data providers, label providers, ... they form a nice layer between the ui and the domain
  • Deployment/updates are easier to deploy on the web
I think you can conclude that I like to try new technologies, new frameworks, it's my passion. But since there is more demand for webapps than client apps on the professional market I went looking my dream stack.
Starting as a "consultant" & "The Dream Stack"
On the server-side I was already pretty hooked on java/spring/hibernate, although it doesn't need to be spring or hibernate specifically, but the basics I want is an orm and a di framework (other frameworks are added if the requirements warrant them). The ui technology was more difficult. I did some JSF@school but that definitely couldn't convince me, we mostly blamed the "young" age of the technology, it was the apache myfaces first release, but as time would tell it didn't change much.

I started a project where I was trusted with picking the stack so I gave GWT a try, and I have to say, the basic idea is fine, gmail was already there and many developers where dreaming of creating ajax apps as nice as gmail. But when I started looking for some components what I basically found were wrappers around existing html/javascript/css components, I know that now there are more native GWT components but at that time, it was a bit disappointing but already better than doing things manually.

And then when I started at my first "real" job as a java consultant, I was lucky enough to come into contact with a great flex-developer, and they actually gave me a chance to play around with flex and before I knew it I was working on a Java/spring/jpa/flex3 project (using graniteds as a remoting solution, but more on that in a later blogpost)
What to expect?
And this is where my next post will start, explaining in detail some of the strong points of flex, that imho make it stand out from other UI frameworks. I am sure there will be room for discussions like "flex vs html5" and "the flashplayer is a tool of satan". I have already converted some colleagues to using flex, and I have many others asking me for a tutorial in flex, or some extra explanation, and this is one of the major reasons of starting this blog. Not that there aren't plenty of good flex resources already, but I as soon as I get passed the basics in the first 3-4 posts, so I can refer to my earlier posts with more advanced themes like remoting (and the implications that arise when using orm/proxies/lazy-loading), some common ui usecases, some example apps and hopefully you readers will supply me with some questions/point of views that I can write about. , I will go on to the nice and funky stuff that isn't so obvious :)

And it doesn't have to be "just flex", sometimes I have funny stories about my life as well.

Btw: the reason why I chose have an English blog, I work in Brussels and I have some nice French speaking colleagues, so this is a nice compromise ;)

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