ailon's DevBlog: Development related stuff in my life

Flex 4 for Silverlight/.NET Developers. Part 1. Introduction

11/9/2010 11:22:34 AM

As readers of this blog probably know, my main occupation over the last couple of years was .NET (WPF/Silverlight/WP7) side of amCharts product line. If you are familiar with the product you know that it started as Adobe Flash product and now expanded into Adobe Flex world too. I always wanted to be able to understand first hand what’s going on in our Flash/Flex products but was delaying the dive into Adobe world time after time. Now I finally got an opportunity to do something with Flex and had no excuse to skip it once again.

I decided to give Adobe’s own video course titled “Flex in a Week” a try and finished “Day 1” at this point. From the first second I felt that I’m looking at everything through .NET (WPF/Silverlight) developer’s perspective and thought that I’m probably not alone at this and it could be useful for people like me to have some articles about Flex targeted at .NET developers. So here we go…

Disclaimer: I’m not leaving .NET or something like that. This is just a side project to widen my personal professional horizons and be in the loop of stuff happening in other parts of amCharts product family and RIA world.

Tooling

I won’t try to disprove the myth that developers working on MS stack are very dependent on tooling and start straight from the tools.

The Visual Studio equivalent in Flex 4 world is called Flash Builder (formerly Flex Builder). Here’s how it looks

Flash Builder

It’s an Eclipse based IDE which is available as both Eclipse plugin or standalone package. I haven’t worked much with it yet but from what I’ve seen even though it’s not as sexy as VS2010 or Blend it looks like a pretty capable decent modern IDE with all the color-coding, code completion, design mode, property editors and other stuff one would expect.

Flex itself is an open source framework and it’s SDK is available for free. Flash Builder on the other hand is a commercial product which will set you back from $249 for Standard Edition to $699 for Premium Edition. There’s a 60 day trial which I’m currently using, but there’s no equivalent of Express editions of Visual Studio. So if you want an official professional IDE be prepared to shell out real money.

Terminology and conventions

Flex projects are compiled into SWF files (pronounced as “swiff”) which are equivalent of XAP in Silverlight. You can run Flex projects in browser via Flash Player or on desktop/mobile via AIR runtime. However (at least as I understand it at this point) unlike Silvelright you have to decide upfront if your project is targeted at Flash Player or AIR.

image

Flex uses a markup language called MXML for declarative UI layout (XAML in Silverlight) and ActionScript for code. ActionScript is ECMAScript based language (think JavaScript on steroids). A default MXML page looks like this:

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
   3:                xmlns:s="library://ns.adobe.com/flex/spark" 
   4:                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
   5:     <fx:Declarations>
   6:         <!-- Place non-visual elements (e.g., services, value objects) here -->
   7:     </fx:Declarations>
   8: </s:Application>
Pretty familiar, eh?

Visual Studio solution equivalent is called workspace, projects are just projects. Projects can be packaged (exported) into a single FXP file (for easy sharing?) and imported back into workspace.

What we, .NET developers, call controls is called components in Flex world. In standard component world there are 2 sets of components with basically equivalent default look and feel. Why is that? Well, historical reasons.

First is the older MX library which can be customized via property settings and styled with CSS (!) but has a hardcoded layout. So, if you want to customize it beyond what you can achieve via properties, you have to create your own class inherited from the standard component.

The new component library is called Spark and can be customized via what .NET developers call templates, which are called skins in Flex. The skinning/templating mechanism is pretty similar to Silverlight. One thing I’ve noticed so far is that Flex skins (can) contain ActionScript code.

   1: <s:Button x="70" y="126" label="Button" skinClass="mySkin"/>

As for custom/user components there doesn’t seem to be any differentiation like in Silverlight (user controls vs. custom controls).

Classes are named using Pascal case notation which was called “upper camel case” in the videos. Differently from .NET world all class members are named using camel case.

Data binding is done using curly bracket syntax where you just place the name of the object and property to bind to:

   1: <s:Panel x="38" y="12" width="198">
   2:     <s:TextInput id="myTextBox" text="test" x="14" y="12"/>
   3:     <s:Label text="{myTextBox.text}"  x="14" y="46"/>
   4: </s:Panel>

This code results in the output like this:

image

As you can see even though obviously there are differences so far it doesn’t feel like a totally unfamiliar ground for Silverlight developers.

to be continued …

Tags:

blog comments powered by Disqus
Copyright © 2003 - 2018 Alan Mendelevich
Powered by BlogEngine.NET 2.5.0.6