Flex Primer for the C# Dot Net Developer - Part 1
I’ve been developing with C# and Asp.Net since its beta version and enjoy using it as a development platform. When I started learning Flex, I was often reminded of my Dot Net developing experiences and often translated concepts in my mind to help me learn. This article runs through a very basic C# Web Form and translates the code to an ActionScript 3.0/MXML Flex application. This article assumes that you are already familiar with developing with either C#.Net or Flex 2 and wish to learn the other.
This article won’t cover setting up an initial empty project for your application. Please refer to your IDE’s documentation on how to do this. Microsoft’s free Visual Web Developer 2005 Express IDE is easy to install and has a wizard for creating and new applications. Likewise, for Flex you can install the free Eclipse IDE and add the free Flex SDK to it. I happen to like FlexBuilder 2.0.1 (which is Eclipse with the Flex SDK preinstalled) and find that to be worth the small price tag.
The first thing to note is Dot Net and Flex use very different methods for publishing and deploying applications. The purpose of this article is to show the similarities of both the markup language and programming language when using C#. A Dot Net developer should find it easy to learn and feel comfortable with Flex development. Hopefully this article helps some of you to do just that.
In this first article I will start off with something simple, but slightly more advanced than a “Hello World!” application. I’ll break up the code to show side-by-side comparisons, then include the full source code at the bottom of the article.
Legend:
C#.Net Version: Click here to view Dot Net demo
Flex Version: Click here to view Flex 2 demo
The document type and namespace declarations:
You can use an XML based markup language to define the user interface for either platform. The first few lines of the document define it’s XML type and available namespaces.
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
The scripts that handle the application:
There are some subtle syntax differences between ActionScript 3.0 and C# but a developer versed in one should pick up the other pretty easily. ActionScript 3.0 uses ECMAScript language specification so if you’re already familiar with JavaScript you can catch on even faster. Compare the two scripts below to see if you can spot the differences and similarities.
<script runat="server">
void Find_onClick (Object sender, EventArgs e)
{
String prg = Program_txt.Text;
String cat = Type_cbo.SelectedItem.Text;
if (prg == "") {
Message_txt.Text = "You've chosen to list everything in the " + cat + " category.";
}
else {
Message_txt.Text = "You've chosen to search for '" + prg + "' in the " + cat + " category.";
}
}
</script>
<mx:Script>
<![CDATA[
private function Find_onClick (event:Event):void
{
var prg:String = Program_txt.text;
var cat:String = Type_cbo.selectedItem.label;
if (prg == "") {
Message_txt.text = "You've chosen to list everything in the " + cat + " category.";
}
else {
Message_txt.text = "You've chosen to search for '" + prg + "' in the " + cat + " category.";
}
}
]]>
</mx:Script>
The markup that describes the user interface:
As you can see below the Dot Net server side controls are very similar in syntax to Flex controls. The Dot Net controls are preceded with the “asp:” namespace and the Flex controls are preceded with “mx:”. Both sets of controls use the attribute “id” to identify the control as well as other similar attributes like “text”. Event handling can be applied to a control in a similar way. In this example the Dot Net application assigns an “onclick” event handler to it’s Find button and the Flex application assigns a similar event handler called simply “click”.
<body>
<form id="form1" runat="server">
<div align="center">
<asp:Label id="Program_lbl" runat="server" text="Program"/>
<asp:TextBox id="Program_txt" runat="server"/>
<asp:Label id="Type_lbl" runat="server" text="Type:"/>
<asp:DropDownList id="Type_cbo" runat="server">
<asp:ListItem value="0" text="Dance" />
<asp:ListItem value="1" text="Literature" />
<asp:ListItem value="2" text="Music" />
<asp:ListItem value="3" text="Theater" />
<asp:ListItem value="4" text="Visual Arts" />
<asp:ListItem value="5" text="Prof. Development" />
</asp:DropDownList>
<asp:Button id="Find_btn" runat="server" text="Find" onclick="Find_onClick" />
</div>
<div align="center">
<asp:Label id="Message_txt" runat="server"/>
</div>
</form>
</body>
<mx:VBox width="100%">
<mx:HBox width="100%" horizontalAlign="center">
<mx:Label id="Program_lbl" text="Program:"/>
<mx:TextInput id="Program_txt"/>
<mx:Label id="Type_lbl" text="Type:"/>
<mx:ComboBox id="Type_cbo">
<mx:Array>
<mx:Object data="1" label="Dance" />
<mx:Object data="2" label="Literature" />
<mx:Object data="3" label="Music" />
<mx:Object data="4" label="Theater" />
<mx:Object data="5" label="Visual Arts" />
<mx:Object data="6" label="Prof. Development" />
</mx:Array>
</mx:ComboBox>
<mx:Button label="Find" id="Find_btn" click="Find_onClick(event)"/>
</mx:HBox>
<mx:HBox width="100%" horizontalAlign="center">
<mx:Label id="Message_txt"/>
</mx:HBox>
</mx:VBox>
Ending the document:
</html>
</mx:Application>
The entire source code:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script runat="server">
void Find_onClick (Object sender, EventArgs e)
{
String prg = Program_txt.Text;
String cat = Type_cbo.SelectedItem.Text;
if (prg == "") {
Message_txt.Text = "You've chosen to list everything in the " + cat + " category.";
}
else {
Message_txt.Text = "You've chosen to search for '" + prg + "' in the " + cat + " category.";
}
}
</script>
<body>
<form id="form1" runat="server">
<div align="center">
<asp:Label id="Program_lbl" runat="server" text="Program"/>
<asp:TextBox id="Program_txt" runat="server"/>
<asp:Label id="Type_lbl" runat="server" text="Type:"/>
<asp:DropDownList id="Type_cbo" runat="server">
<asp:ListItem value="0" text="Dance" />
<asp:ListItem value="1" text="Literature" />
<asp:ListItem value="2" text="Music" />
<asp:ListItem value="3" text="Theater" />
<asp:ListItem value="4" text="Visual Arts" />
<asp:ListItem value="5" text="Prof. Development" />
</asp:DropDownList>
<asp:Button id="Find_btn" runat="server" text="Find" onclick="Find_onClick" />
</div>
<div align="center">
<asp:Label id="Message_txt" runat="server"/>
</div>
</form>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
private function Find_onClick (event:Event):void
{
var prg:String = Program_txt.text;
var cat:String = Type_cbo.selectedItem.label;
if (prg == "") {
Message_txt.text = "You've chosen to list everything in the " + cat + " category.";
}
else {
Message_txt.text = "You've chosen to search for '" + prg + "' in the " + cat + " category.";
}
}
]]>
</mx:Script>
<mx:VBox width="100%">
<mx:HBox width="100%" horizontalAlign="center">
<mx:Label id="Program_lbl" text="Program:"/>
<mx:TextInput id="Program_txt"/>
<mx:Label id="Type_lbl" text="Type:"/>
<mx:ComboBox id="Type_cbo">
<mx:Array>
<mx:Object data="1" label="Dance" />
<mx:Object data="2" label="Literature" />
<mx:Object data="3" label="Music" />
<mx:Object data="4" label="Theater" />
<mx:Object data="5" label="Visual Arts" />
<mx:Object data="6" label="Prof. Development" />
</mx:Array>
</mx:ComboBox>
<mx:Button label="Find" id="Find_btn" click="Find_onClick(event)"/>
</mx:HBox>
<mx:HBox width="100%" horizontalAlign="center">
<mx:Label id="Message_txt"/>
</mx:HBox>
</mx:VBox>
</mx:Application>
March 25th, 2007 at 9:22 am
A primer on how to hook up data would be excellent.
Perhaps, a webservice to a C# data access component
August 24th, 2007 at 8:08 pm
>Likewise, for Flex you can install the free Eclipse IDE and add the free Flex SDK to it. I happen to like
>FlexBuilder 2.0.1 (which is Eclipse with the Flex SDK preinstalled) and find that to be worth the small price
>tag
Does Eclipse IDE+SDK do everything that FlexBuilder does?
My hours have been cut back and money is tight right now. Can I get by with the free software?
August 25th, 2007 at 7:36 am
The free SDK contains command line tools and framework to compile Flex apps. You need to purchase the Eclipse plugin to get the WYSIWYG designer with drag and drop controls.
October 5th, 2007 at 3:32 pm
Great tutorial/comparison between .NET and Flex. Its obvious that the Flex demo looks a lot better than the basic asp.net gui…as the default Flex look and feel or did you add a theme?
October 5th, 2007 at 3:44 pm
Thanks. The Flex version is the default look and feel out of the box. No skinning or anything done.
April 4th, 2008 at 7:46 am
Thanks for giving comparing both.
This is my mail id:ambatisreedhar@gmail.com
Could you please provide me some more links (Flex with dotnet)?
Regards,
Sreedhar
April 15th, 2008 at 11:31 am
Is there any interoperability between C# .NET and Flex? Can I use this SDK from the .NET environment? If so, can you point me at any links that might be helpful?