Flex and WPF: A comparison – Part 2b

In part-2a we saw some of the building blocks of WPF and how they are used to achieve the content-style separation. This post is a continuation and will focus on Flex’s approach.

Flex has adopted the web standards right from ground up. So if you are a web developer who has had any experience with HTML, CSS, Javascript it should be very natural to program in Flex. A direct one-one mapping looks like this:

HTML –> MXML

CSS –> CSS

Javascript –> Actionscript

 

MXML markup + code-behind

    MXML is the markup language that is used to describe the User Interface components in Flex. In concept it looks very similar to XAML, but since it is also like HTML, it has the familiar tags like <mx:Script/> and <mx:Style/>. The <mx:Script/> tag is used for inline code-behind whereas the <mx:Style/> describe the stylesheet elements for the UI elements. In a previous post I did a comparison of the code-behind models in Flex and WPF, which is slightly more detailed. Actionscript is the language used for the code-behind and its syntax is very similar to Javascript.

    The standard practice for describing UIs is to use MXML. Even the event-handlers are specified directly inside MXML. However it is also possible to bypass MXML completely and define the UI component completely in Actionscript. In the former approach, the MXML compiler will generate the Actionscript for you, which in turn gets compiled to SWF.

Databinding

    Databinding is definitely my favorite feature in Flex and it is extremely powerful. It is also very easy to make your model objects bindable by including a simple metadata tag like [Bindable] against the model property or object. This is simpler than the WPF approach where you will have to implement the INotifyPropertyChanged interface for the model object and manually fire the property change notifications. In Flex just by attaching the [Bindable] metadata tag you get FREE property change notifications. Of course if you want to customize the notifications, that too is possible. What I find really interesting is the part where you bind a UI element to a model object. Say I want to bind the text property of a <mx:Label/> to the firstName property of the Person object. The syntax would look something like this:

<mx:Script>

    [Bindable]

    var _person:Person = new Person(“Pavan”, “Podila”);

</mx:Script>

<mx:HBox>

    <mx:Label text=”{_person.firstName}”/>

</mx:HBox>

 

Since I made the _person instance [Bindable], the Label will automatically update its text property whenever _person.firstName changes. What is exciting is the fact that the curly braces syntax for data-binding can actually include Actionscript inside it! This is very useful in cases where I want to do a little bit of more formatting to the text. If I wanted my text to appear like “FirstName: PAVAN”, I could do this right inside the {}:

    <mx:Label text=”FirstName: {_person.firstName.toUpperCase()}“/>

Doing the same in WPF would have required me to write a class that implements the IValueConverter and then pass in the instance of my model as a parameter. So the syntax would look like below.

[Note that I am following the C#/XAML naming conventions, so my property names have the first letter of each word capitalized: FirstName, LastName.]

<Application.Resources>

    <local:StringToUpperCaseConverter x:Key=”stringConverter”/>

    <local:Person x:Key=”person” FirstName=”Pavan” LastName=”Podila”/>

</Application.Resources>

<Label Content=”{Binding Path=FirstName, Converter={StaticResource stringConverter}}”/>

Also my converter class would look like this:

    [ValueConversion(typeof (string), typeof (string))]

    public class StringToUpperCaseConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            string firstName = (string)value;

            return “FirstName: “ + firstName.ToUpper();

        }

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            return null;

        }

    }

That definitely is a lot more typing to do than the Flex’s approach. I see this is as a major benefit in Flex which I would love to have in WPF.

 

MXML components

    MXML components are reusable views in your application. Say you have a photo-viewer application that shows a list of photos. Each photo could be wrapped inside a MXML component that shows other information about the photo when you click on it. The view of the photo and the interaction can be captured inside this component and can be reused throughout your application. These components can also behave like the DataTemplates in WPF. You can create a property on the MXML component and set that as the model object. Inside the component you can data-bind to the properties of the model thus simulating the DataTemplate. Note that the property you create on your MXML component is your DataContext.

    ItemTemplates in WPF have a direct one-one mapping with the ItemRenderers in Flex. List based controls use the ItemRenderers to render each item in the list. Here is a simple example of an inline ItemRenderer.

<mx:DataGridColumn headerText=”Online” dataField=”online”>

<mx:itemRenderer>

<mx:Component>

<mx:CheckBox click=”data.online=!data.online” selected=”{data.online}”/>

</mx:Component>                        

</mx:itemRenderer>

</mx:DataGridColumn>

 

You can also create a separate MXML file, say Checkbox.mxml, that encapsulates the component. In that case you provide the name of the component to the itemRenderer property (itemRenderer=”Checkbox”, assuming Checkbox.mxml is in the same directory).

CSS styles, skins

    Styling a Flex application means creating a CSS file (or a group of CSS files) that provides the appearance for the different UI elements. Most CSS files would include customized values for many of the UI element properties. But if you want more fine-grained control on the appearance one can also create something called the Skins. A skin file is also a CSS file but can include components from a compiled SWF file. The SWF may have custom rendered skins, also called programmatic skins. Here is a nice article on creating skins for Flex.

Packaging into SWC, SWF and modules

    SWF is the final version of a compiled Flex application. It may also have a bunch of dependencies on Actionscript/Component libraries. These libraries are compiled as SWC. The other option for packaging is to use Flex Modules. Bruce Phillips did a good post on this topic and covers all the necessary material.

 

Technorati tags: , , ,
Advertisements

10 Responses to “Flex and WPF: A comparison – Part 2b”

  1. Scott Barnes Says:

    Flex and WPF have natural gaps in terms of being different from one another. Comparison of the two is flawed, as it would be equal to say FLEX vs SWING? Flex is housed within a constrictive Sandbox firstly, and does not have the power or capabilities of breaching out of this sandbox.

    Apollo may open that up further, but thats a different discussion.

    What you have here is two distinct types of RIA Technologies and although they associate themselves with RIA they however are distinctly different.

    FLEX falls under the category of what I’d call RIA – Live, where its dependent on an external hosting agent – this being browser, and since its housed within has to therefore adhere to the hosting agents security model.

    WPF falls under what I’d call RIA – Beyond, it has no master other then the native operating system, Windows Vista or XP. It however relies on .NET 3.0 being pre-installed before its execution but however, it does provide more expansion in terms of functionality and less on constraints.

    Although the languages are very similiar, they however have different objectives and purposes and equally important power. To compare UI for UI is only scratching the surface on both of these pieces as once a designer/developer moves past the initial “rigging stage” (ie allocating the UI Architecture) they then break into data injection and behaviours associated to these.

    I understand the motivation but i’d be inclined to wait for WPF/E vs FLEX rather then WPF as these two will have a very similiar distribution and security model (although WPF/E is purpose fit for other reasons).

    Scott Barnes
    Web Developer Evangelist
    Microsoft.

  2. pavanpodila Says:

    Scott,
    I see your point but I am doing this comparison from the programmability point of view. Both these technologies provide similar features (barring the security sandboxing and deployment models) and it is worth noting how these features are similar and also different. For example some of RIA architectures like Cairngorm are very well applicable for WPF and in fact I am using a modded version of Caringorm for my own WPF projects. Additionally there are other good practices which I think can be leveraged when doing WPF development.

    These posts are not meant to judge which is the better platform but rather knowing the similarities and the differences — so that developers can see how much of a learning curve they have to climb when using either of these technologies.

  3. Michael Latta Says:

    Thanks for the comparison. Being familiar with WPF but working for the moment on a flex application until silverlight 2.0 comes out, this was very helpful. I think the article shows several similarities, and some places where each technology could benefit from looking at the other. I wish WPF binding was as easy as [bindable], but I wish flex did a better job with integrating the markup and the code views. I hope that Silverlight 2.0 really gives flex a run for its money as that will keep both technologies moving forward to the benefit of all the users.

  4. Michael Latta Says:

    One thing you did miss in your comparison is that DataTemplates can be based on the datatype of the object they represent. So for a non-homogeneous array of data a list would render different templates for different data objects. This can be a huge value in many situations. There are also ways to compute the data template at run-time allowing things like theming and context aware rendering. It is not clear yet how much of this flexibility will be present in the Silverlight control system, but here is hoping.

  5. WPF vs Flex Says:

    […] How Flex approaches a problem? […]

  6. Thalia Says:

    An outstanding share! I’ve just forwarded this onto a co-worker who had been conducting a little homework on this. And he actually bought me lunch simply because I stumbled upon it for him… lol. So let me reword this…. Thanks for the meal!! But yeah, thanx for spending some time to talk about this matter here on your web page.

  7. personal loans Says:

    I like the helpful information you supply in your articles.
    I’ll bookmark your blog and test again right here frequently. I’m
    rather sure I will be told plenty of new stuff right right here!

    Best of luck for the following!

  8. Как отделить мух от колет? | ActionScript 3 Says:

    […] Behind Code behind in Flex and WPF Flex and WPF: A comparison – Part 2b Code-Behind and Flex 2.0 (Partial Classes) Building components by using code behind Creating […]

  9. Johnb426 Says:

    Hello! This post could not be written any better! Reading through this post reminds me of my good gdffcffdadke


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: