Consider the statements:

var Mapping:Object={hostComponent:”Button”,border:”3″,alpha:”.5″};
//var Mapping:Array=    new Array({hostComponent:”Button”,border:”3″,alpha:”.5″});
if(“hostComponent” in Mapping)
{
trace(“hostComponent exists as a key”);
}
else
{
trace(“hostComponent doesn’t exist as a key”);
}
if(“gradient” in Mapping)
{
trace(“gradient exists as a key”);
}
else
{
trace(“gradient doesn’t exist as a key”);
}

The statement

if (“hostComponent” in Mapping)

translates to ‘Is there a key in the hashmap Mapping(All Objects in Actionscript are hashmaps) that has the value “hostComponent”?’.

Notice that we use a string “hostComponent”. When you declare an Object like this:

var Mapping:Object={hostComponent:”Button”,border:”3″,alpha:”.5″};

The keys (hostComponent,border and alpha) to the left of the semicolon are converted to strings by the compiler. Hence, for our case of comparing the kind of keys we have used in our code, we need to use a string before the in keyword. Note that the LHS of the in keyword need not necessarily be a string. Please refer to Josh’s observations in the comments section.

The output for the above section of code is

hostComponent exists as a key

gradient doesn’t exist as a key

The output is the same if Mapping is an Array instead of an object because the internal implementation is through Associative Arrays.

I wanted to try my hand at creating a circular menu component using the new Spark components in Flex 4. Aesthetically, I felt a simple sector to represent each item of the menu wasn’t pleasing enough.  So instead, I went ahead and coded a primitive graphic called CircularTrapezoid. In simple terms, this is what you would be left with if you removed a sector of smaller radius from a sector of larger radius.  The buttons in the picture of the component (See image above)  are of the Circular Trapezoidal shape.

So laying these CircularTrapezoids out in a circle, I got done with the menu and then I thought “Why not use the same component to represent hierarchical data?”:- Similar to the data in Ely Greenfield’s random walk component. So I used the custom circular menu I’d made to represent the data at each level. The entire data can be fed in using XML and the component takes care of the internal splitting of input data into different layers. I also added a bread crumb for navigation and do note that I used the same CircularTrapezoid for skinning the buttons in the bread crumb.

I’ve used this hierarchical Data viewer in a simple application that categorizes a few music videos. The application requires a single SWFloader to load multiple youtube SWFs. I figured out how to do this thanks to a blogpost by Pamela Fox.

Here is a Demo of the component being used.

Click here for the source code.

Notes

Here are a few things I made note of which I hope will prove useful to others.

1. Skin Contract: The skinning contract may sound like a lot of red tape initially. But looking back, it was the most useful feature I’ve ever worked it. The ease with which you can change the appearance of your component at a later stage is mind blowing.
2. Shared Display Object: I had run into some unexpected behavior when I rotated the labels of the Circular Menu item buttons using the transformation matrix. Sometimes, whole CircularTrapezoids were not getting rendered. It’s then that I discovered the concept of Display Object Sharing among the elements of a group. Since I used matrix transformations in actionscript to perform the rotations, the framework could not make the necessary adjustments. I remedied this by enclosing the label in a Group exclusively meant for the label. Hence when changes were made to the layout of the label, the parent group made the necessary changes and rendered all its elements correctly.
3. To code in Skin or not to code in Skin: With the new Skin architecture of flex 4, I had at many instances been confused about whether to write a particular segment of code within the skin or within the main component.  But later on, it became clear that any “visual” part of the component and especially one that can be subject to change should be coded in the skin.
4. SkinPart: Despite the above argument, you do find some sections of skin declared again as a [SkinPart] within the main component. These should be items which you expect to find in all implementations of the component. For example, in <s:Button/> you will find a [SkinPart] labelDisplay declared with the component apart from being declared in the skin as all buttons have Labels.  They are probably declared as part of the main component for reasons like layouting or using data.
5. Layout:  In my opinion, though layouting seems to be “visual” in nature, it must not be handled in the skin, unless if it’s for a part that’s exclusive to just that skin. It ought to handled in updateDisplayList() of the main component code.
6. Difference between <s:Wipe  and < mx:Wipe : I tried using the new Spark Wipe effect by programmatically calling it using something like myWipe.play(). It didn’t work. I did some searching and found this page. So, to get the same behavior as the mx Wipe effect, you would have to use mx Wipe and the target should be enclosed within a halo container like mx:Box.

I’m really looking forward to feedback on the component. Please do use the comments for feedback or queries if any.

Reusing Video stored in ByteArray format using VideoDisplay Component

Assume the video is stored in the following variable

var videoArray:ByteArray=new ByteArray();
/*Code for storing the video in ByteArray format can be found in the Project Source, which is available at the end of the article*/

I’ve added a VideoDisplay component with id PreviewedVideo. Open a temporary file like so

Videofile=File.applicationStorageDirectory.resolvePath(“temp.flv”);

If the file already exists it must be deleted

if(Videofile.exists)
{
Videofile.deleteFile();
}

The following code shows how the data in the byte array is transferred to the file and how the VideoDisplay uses the file to play the Video

var stream:FileStream = new FileStream();
stream.open(Videofile, FileMode.WRITE);
stream.writeBytes(videoArray, 0, videoArray.bytesAvailable );
stream.close();
PreviewedVideo.source=Videofile.nativePath;
PreviewedVideo.play();

To stop the video from playing, all you need to do is

PreviewedVideo.close();

This stops the streaming of data from the file to the VideoDisplay component.
To get a complete idea please go through the source code.

->Find out how to use the application.

1. Insertion

2. Updation

3. Preview

->Click here to download the full source code for the application. The Zip also contains the .air file which you can use to install the application

While working with the SQLite integration provided by the AIR, there are many times when you might want to insert an entire object into the database. While trying to search for a solution to how to do this, I found that there weren’t any articles detailing the exact Actionscript Syntax on how this can be done.  Hence I’ve created an application that takes as input Image, Video and Audio files and then converts them to ByteArrays and allows you to store retrieve and update the converted information using a database. To show that stored ByteArray files can still be used, I have included a portion in the application to preview the stored files.

Syntax for storing Custom Objects

I will not be getting into the details of how to create a connection to the SQLite database. For more information on that go to

http://livedocs.adobe.com/flex/3/html/help.html?content=SQL_06.html

The only point to remember is that for an object, the data type is OBJECT or OBJE. Hence the CREATE statement for the database will look like this.

CREATE TABLE IF NOT EXISTS MMCollection (Name STRING PRIMARY KEY,      MultimediaClass  OBJECT);

Assuming that a connection has been established to the database using an instance of the SQLConnection class, the first thing to do is to create the insertion statement. This is done using the SQLStatement class as shown below. The code below is self explanatory. The statement is assigned to the required SQL connection and the query is also written to the text property of the statement.

var insertStmt:SQLStatement=new SQLStatement();
insertStmt.sqlConnection=conn;
var sql:String = “INSERT INTO MMCollection (Name,MObj)  VALUES (@pkey,@obj)”;
insertStmt.text = sql;

While writing the query notice the portions @pkey and @obj.   These two are part of the implementation of a feature called named parameters detailed here at http://livedocs.adobe.com/flex/3/html/help.html?content=SQL_09.html

How the parameters are understood by the framework is shown in the code snippet below.

insertStmt.parameters["@pkey"]=enteredName.text;//The input String from user
insertStmt.parameters["@obj"]=MediaCollection;//The Custom Class Object-(In Source code)

This is the only way possible to pass the parameter for complex types like Objects. It is also advised to use this even for simple data types like Strings as it is a good security measure to avoid SQL injection attacks.

After assigning the parameters the statement can be executed as shown below.

…
insertStmt.addEventListener(SQLEvent.RESULT,insertHandler);
insertStmt.addEventListener(SQLErrorEvent.ERROR,insertFaultHandler);
try{
insertStmt.execute();
}
catch(error:Error)
{
Alert.show(error.details,”Error”);
}
…

protected function insertHandler(event:SQLEvent):void
{
trace(“INSERT statement succeeded”);
Alert.show(“The Media was inserted”,”Acknowledgement”);
}
protected function insertFaultHandler(event:SQLErrorEvent):void
{
var error:Error=event.error;
trace(“Error message:”, error.message);
Alert.show(error.message,”Error”);
}

The above method is the asynchronous method of executing a query. It can also be done synchronously. But for more information on that go here. However for large object databases, it is advisable to use Asynchronous mode of execution.

To get a complete idea please go through the source code.

->Find out how to use the application.

1. Insertion

2. Updation

3. Preview

->Click here to download the full source code for the application. The Zip also contains the .air file which you can use to install the application

Installing LCDS and Flash Builder

Download and install the latest Beta Release of Flash Builder 4 from http://labs.adobe.com/technologies/flashbuilder4/ .

Download LiveCycle Data Services 3 from

http://labs.adobe.com/technologies/livecycle_dataservices3/. Install the executable (livecycle_dataservices3_b3_win_100509.exe) using the option “with tomcat” to C:/lcds3

Download Fiber modeler plugin from

http://labs.adobe.com/technologies/livecycle_dataservices3/. Extract the contents of the zip file (livecycle_dataservices3_modelerplugin_100509.zip) and copy the files under livecycle_dataservices3_modelerplugin_100509/plugins folder into C:\Program Files\Adobe\Adobe Flash Builder Beta 2\plugins.

The required software is now installed.

Google Maps Flash API

I have used the Google Maps flash API for working with maps. Go to

http://code.google.com/apis/maps/documentation/flash/

Sign up for an API key and download the SDK. You will need to put in the API key in your flex code. So store that safely. We will deal with how to make use of the library in the application in a later part of the post. You will be downloading a file called sdk.zip. Copy it to your desktop and extract to a folder called sdk.

Existing Database in MySQL

The database created using a simple MySQL command line client and is called Courier (Click here for .sql file). It comprises of 4 tables.

1.Centre – This is a list of all end points. They can be parcel offices or destinations of parcels. The schema is

2.Location – This is a list of all intermediary points where the delivery man can be. In a real time case a relay from the GPS system should be sent to update this table. Just a number is enough as primary ID. You may argue that there is no need for two tables(Centre and Location) here. However, in a real time case, this table will be constantly updated with GPS coordinates whereas the Centre table is more or less static and has a fixed set of values.

3.Delivery Man- This is a simple table mapping a delivery man to his current location.

4.PackageBox- This is the list of all packages.  The schema is shown below.

The important points to note here are the foreign key references. I’ve enlisted them here
1.Between the source attribute of the PackageBox table and the Centre Table.
2.Between the destination attribute of the PackageBox table and the Centre Table.
3.Between the deliveryman attribute of the PackageBox table and the DeliveryManTable.
4.Between the location attribute of the DeliveryMan table and the Location Table.

The Attributes have been named in such a way
{Attribute name}_{Primary key of the table it is referenced to}
So now that we have an idea of what the database is, let us see how to connect it to expose this database to the LCDS serve as data sources.

Configuring LCDS to the existing database

The fibre modeler plugin of Flash Builder uses the data sources configured on the web server to retrieve data from the tables of the database. Hence to make this data source, we must edit the configuration file of the web application. By default, there is a web application called lcds located at
C:\lcds\tomcat\webapps\lcds

We shall use this to create our datasources. Since the name is lcds there is a file called lcds.xml  in
C:\lcds\tomcat\conf\Catalina\localhost\

Make the following changes to the file
<Context privileged=”true” antiResourceLocking=”false” antiJARLocking=”false” reloadable=”true”>
<Transaction factory=”org.objectweb.jotm.UserTransactionFactory” jotm.timeout=”60″/>
<Resource name=”jdbc/courier” auth=”Container”
type=”javax.sql.DataSource”
username=”{your username}”
password=”{your password}”
driverClassName=”com.mysql.jdbc.Driver”
url=”jdbc:mysql://localhost:3306/courier?autoReconnect=true”/>
</Context>

Also, make sure that the MySQL Connector/J file is present in the tomcat’s lib folder.
Next, we must enable the RDSDispatchServlet which is present on the LCDS server and is used by Flash Builder+ Fibre Modeler Plugin to read the data sources. Go to
C:\lcds\tomcat\webapps\lcds\WEB-INF\web.xml

Uncomment the following section of the file
<servlet>
<servlet-name>RDSDispatchServlet</servlet-name>
<display-name>RDSDispatchServlet</display-name>
<servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>
<init-param>
<param-name>useAppserverSecurity</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>10</load-on-startup>
</servlet>
<servlet-mapping id=”RDS_DISPATCH_MAPPING”>
<servlet-name>RDSDispatchServlet</servlet-name>
<url-pattern>/CFIDE/main/ide.cfm</url-pattern>
</servlet-mapping>

The important point here is the parameter useAppServerSecurity is by default true. Set it to false. That is the entire configuration that is required.  The next step is starting the server.

Starting the LCDS Server

Either

1. Go to Start->All Programs ->Adobe-> LiveCycle Data Services
2. Click on Start Samples Database
3. Click on Start LiveCycle Data Services Server.

Or

Execute these scripts in succession

1. C:\lcds\sampledb\startdb.bat
2. C:\lcds\tomcat\bin\startup.bat

The above are the two ways to start the server.

Start of application building

We shall go through this step by step
1.Open Flex Builder go to File->New Flex Project and give your project an appropriate name. I’ve named mine ParcelApplication. Under Server Technology choose
a.Application server type: J2EE
b.Check on Use remote object access service.
c.Select  LiveCycle Data services ES.

Leave the rest as default. Click Next.

2.Validate Configuration Screen: In this screen by the default path will be chosen. So unless there was a non standard installation no input needs to be given in this screen. Click on Validate Configuration and see if the the message “The web root folder and root URL are valid” appears on top. If it does, click Next. Else, there is something wrong with one of the paths. Check up for file path mistakes.

3.In the next menu, we shall include the libraries for the Google Maps Flash API. Click on the Add SWC button that has been highlighted in the picture below.

In the add SWC menu, click on browse. In the file browser window that will appear, find the map_flex_{version number}.swc file which will be under
Desktop\sdk\lib\   (if the sdk.zip folder was extracted to desktop)

Click Open on the File browser Menu. Click Ok on the Add SWC menu. Click Finish on build path menu.

4. Now that the project workspace, we can work on the RDS configuration. Click On Window (Alt+W) -> Preferences. On the list on the left of the Under Adobe, You will find RDS configuration window which looks like the image below.  Enter the configuration details as shown in the image and click on test connection (which has been highlighted in the image). If the connection is not established, then there must be an error in the path or the server must have stopped running.

5.We are now ready to create our Model

Creating a Model

We shall now look at how to use the fiber modeler plugin to make a model in Flash Builder.
1.Go to Window (Alt+W) -> Perspective -> and click on Data Model. The following image(click for larger image) shows what the data model looks like.  Click on the view Open Data Model for Active Project button (highlighted below) and you will now have the design view of the Model. You will notice that a file called ParcelApplication.fml has been created.  This is called the model file.

2.As highlighted in the image below(click for larger image), the RDS Data View menu lets you see all the databases that are available as datasources.

3.We will need all the tables. So just drag and drop the tables into the design view of ParcelApplication.fml.  You will be able to view the entities in the design view of the data model as shown in the image below(click to view larger image). You will also notice in the package explorer that a new package has been created with same name as the application which contains the classes generated by LCDS fiber modeler plugin for Flash Builder 4.

4.Click on the Deploy Model to LCDS Server button which is highlighted in the image above. And you get the menu shown below. Select the Create/Recreate option marked in red in the image. If you were doing this for a second time (say after including another table), then you need to use the Overwrite existing model option.

You can go to the tomcat command line output window and you will see the following lines displayed

This means that the model has been successfully deployed. Notice how it states that Fiber Assembler for all the four tables have been created.

5.Now switch back to Flash perspective. The image below(click for larger image) has a highlighted red box with a red circle inside it. The click the button in the circle and the menu that you see in the box drops down. Click on flash and the perspective changes. Select the ParcelApplication.mxml file.

6.If you select the data/services tab highlighted in the first image below(click to view larger image) and maximize it by double clicking on the tab, you will see that all the possible CRUD services have automatically been created. The list is also shown in the second image below(click to view larger image).

7.Now, I have posted a link to the code for logic involved in the application.

1. ParcelApplication.mxml – This is the source of the main application

2.ParcelApplication.fml – This is the model file’s source
It is fairly simple to understand and has been heavily commented for proper understanding. Please do feel free to comment and ask if you have any doubts.  This is all that needs to be done for parcel tracking application.

Creating the application to update the location of the parcel
Follow the same steps 1 and 2 of “Start of application building” as you did with the tracking application. Here, I have named the application ParcelLocationUpdater. We do not need to import any special libraries here. So we can click Finish at the Configure J2EE server page. Then follow these steps

1.Select Data(Alt+t)  -> Connect to LCDS and you will get the following screen. Select ParcelApplication.DeliveryMan, which is the same Data Source that was used in the previous application and click Finish. Remember that only if the same data source that was used in the earlier application is used in this application, the Automatic Sync functionality of LCDS can be used. What is the automatic Syn feature. According to this, if there are two flex applications which use the same data source. Then if one of them has a Bindable data type(like arraycollection or Datagrid) bound to a service call, a change or update made by the other application will automatically be reflected in the bindable arraycollection or DataGrid.

2.If you now look at the Data/Services tab, you will see that the services have been imported. Similarly, import ParcelApplication.Location.

3.Switch to design view and from the components menu select Datagrid (look at the image below). Drag and drop it twice to the design view.  Look at the second image below to see if the result is the same.

4. I have named the first DataGrid locationDataGrid and the second one deliveryManDataGrid. Drag and drop the getAll() service under Location Services to locationDataGrid. See image below.

5.Repeat the process for the getAll() service of DeliveryMan Object as well.

6.If you look at the deliveryManDataGrid, it does not let you see the entire details of the location corresponding to the deliveryman. Let us generate a details form for this so that we can see what the exact data is. Right click on the dataGrid for location and click generate details form as shown below.

7.You will then be asked what type of form to choose. Choose Flex form which will enable the DCD form. Click OK

8.In the following form, Master details have automatically been selected. The other options are to bind the form to a service call (input and output) as well as to bind the call to a data type. However for our example, we need only to select the Master details. Click Next.

9.In this menu, you can include what properties are shown. Since we want to see all the details of the location corresponding to the delivery man object that is selected in the data grid, click all details as shown in the image below.

10.You will see the generated form as shown below

11.We shall now run the program and take a look at what we get. If you click on any one of the entries in the deliveryManDataGrid, you can view the corresponding values in the details form.

12.Now what we will do is add a button to replace the value of the location attribute corresponding to the item selected in the deliveryManDataGrid with the selected item in the locationDataGrid. Drag and Drop a button from the components menu and right click to choose generate service call.(click to view larger image)

13.In the next menu that appears choose, the service call to be generated and Click OK.

14.The following is the Code that is generated.
protected function button_clickHandler(event:MouseEvent):void
{
updateDeliverymanResult.token = deliverymanService.updateDeliveryman(/*enter the value for*/deliveryman);
}
15.We shall now take a look at what needs to be added to the code to perform the updation.

protected function button_clickHandler(event:MouseEvent):void
{
var deliveryman:Deliveryman=deliverManDataGrid.selectedItem as Deliveryman;
deliveryman.locationLocationid=locationDataGrid.selectedItem as Location;
updateDeliverymanResult.token = deliverymanService.updateDeliveryman(deliveryman);
}

As you can see, what the code essentially does is assigns the value of the location object selected in the Location datagrid to the location attribute of the selected DeliveryMan Object in the other datagrid and calls the service to update that Delivery man object.
16.    Presto!! The application for updating the location of the delivery man ready now. I have changed the text in the button to UPDATE for it be more in context.   Here are screen shots of it working.

Running both applications

Please play the video whose link is given in the introduction section to see how to run the two applications together. Hence, we have created two applications.
1.An application that accesses a database for a courier company and displays the location of a package on a map given the package number as input.
2.An application that updates the location of the package in the database. Hence, in a real time situation, this application can be called by a system which is hooked to the GPS coordinates of the delivery truck and hence update the location of the delivery truck in the data base.
We have demonstrated how to create a model from a MySQL database and also shown how useful the automatic data source sync feature of LCDS is. Please do post any comments if you experience any problems while trying out these features.

1. Importing the Service to Flash builder.
2. Configuring the return type.
3. Binding the data to the UI component.

However, we shall first take a look at the database and the backend service provider before doing that. As is usually the case with DCD, I shall show you how to do all the development on the flex side without writing any code.

Database

This Web Service accesses a MySQL database table called Centre which has the following schema.

The database is simple to create using a MySQL command line client.

Backend

The language used for coding is C#. There are three files here

1. Centre.cs – This C# class represents a data tuple from the Centre table of the database.
2. CentreInterface.cs –This C# class contains the method that establishes a connection to the database using Odbc classes and retrieves the list of Centre tuples.
3. CentreXml.aspx – This is the aspx page that returns the XML file containing the required data.

Click on the files to view the source. Essentially what CentreXML.aspx returns is an XML file which can be viewed as an equivalent of an array of Centre Classes.

Importing the HTTP Service to Flex

We can now turn our attention to Flex.

1.If you don’t already have Flash Builder, download and install Flash Builder 4 from this URL http://labs.adobe.com/technologies/flashbuilder4/.

2.First create a new Project

Go to File->New -> Flex Project.

3.In the Screen that appears, enter an appropriate Project name and click Finish.

4.Make sure that the perspective is Flash Perspective. In this perspective, there is a tab called Data/Services (shown in the image below). In the Data/Services window, choose Connect to Data/Service.(Click to view larger version of the image)

5.In the Connect to Data/Services Menu, click on HTTP and  then next as shown below

6.The Connect to Http Service menu looks like this(shown below)

The first option of “Do you want to use a base URL as a prefix for all operation URLs?” can be selected if all the operations come under the same URL. If the URL changes in this case the updation of the address has only to be done once. This is convenient if there are a lot of operations. However in our case we only have one operation and we will not specify a base URL.

As shown above, there is an Operations table. Under the Operation Name column, you can fill the name with which the operation will be known as on the flex side. Under the method column, choose GET. Under the URL column, give the path of your .aspx page. Then give a valid service name under Service details. For our example, I have chosen the name CentreService.

Click Finish.

7.If you now take a look at the Data/Services Tab, this is what you this is what you will see (image below).

(Click on image to see full image)

If you notice, the data type returned by the GetCentres function is a generic type object. Now wouldn’t it be nice if you had the same data custom data type returned on flex as you had on your backend. This is possible now and we shall look into that in the next section.

Configuring the return type

As said in the last point we can make a class equivalent that we had on the .NET side on the flex side. DCD now lets you automatically generate Value Objects(VOs). Lets see how this is done. For this, right click on the GetCentres():Object function highlighted in the previous picture and click Configure Return Type. The following is the menu you will end up with.

Select Auto-detect the return type as this is the first time the data is going to be introspected. If the destination is authenticated, then choose authentication required and it will prompt for username and password. The “Use an existing data type” (second option) can be selected in two cases

1.    A Built in data type
2.    A custom data type which has already been configured before.
Click on Next and you get the menu shown below.

There are two ways you can make the Value Object(VO) which is the equivalent Actionscript class.  The first way involves Flash Builder communicating with the back end and doing introspection. If it’s a service that requires parameters, there are two ways.
1.    Entering into the table. This is the first option shown in the image above.
2.    Entering the URL (query string) which contains the parameters. This is more convenient if you don’t want to enter the values in the table
The Second method is resorted to if your backend has not been developed fully (but you know the XML format that is returned) or if the server is down. In both these cases flash builder cannot introspect the back end directly. For that, choose the “Enter a sample XML/JSON response” option. Here you can enter the format of the data that is returned.
In our example there are no parameters required. Hence directly click Next and the menu below is got.

What we get from the back end is an array of Centre Classes. Hence, we are interested in the Centre data. Go to the Select root Combo box and choose “Centre” like shown below

You will get the following screen after selection

Click on finish and you will now see how the Data/Services tab has changed(Click to view a larger image).

Data Binding

Under the components menu (highlighted in red in the image below), choose Controls-> DataGrid. Click the image to view a larger image.

Choose DataGrid and drag and drop it into the design view. Right click on the Data Grid and click Bind to data. You will get a menu that looks like the image  below.

Enter the name of the service as CentreService and the function as GetCentres() as shown in the image above. Click Ok.

The above image shows what the datagrid will look like. The columns have automatically named according to the name of the members of the Custom type Centre.  All you need to do now is run the program (CTRL + F11) and you will see how the data from the database is completely populated in the Datagrid.  

No code written again
We managed to connect to a .NET based HTTP service from the Data/Services menu. We were able to configure the returned XML to a strong data type through automatically generated VOs. We ultimately connected the data returned from the backend to a Visual component (Data Grid). This is my second post on DCD. All the flex coding yet again was done without writing a single line of code. The workflow is very smooth and user friendly. Please feel free to post any queries after you have tried it.

More articles on using Flash Builder 4 can be found at http://sujitreddyg.wordpress.com/flash-builder-4/

1. Importing the Service to the Flex Client Side
2. Binding the services to UI components.

All the development on the Flex side will be done without writing a single line of code.

Database

This Web Service accesses a MySQL database table called Centre which has the following schema.

The database was created using the MySQL command line client and the Odbc classes of .NET were used to connect to the database as shown in the code (refer next section for code).

Backend

The language used for coding on the back end is C#. For those who are not familiar with how to implement Web Services on .NET here is a tutorial

http://msdn.microsoft.com/en-us/library/87h5xz7x%28VS.80%29.aspx

These are the files that you will need for reference.

1. Service.asmx
2. Service.cs
3. Centre.cs

There are two functions called getCentres() and getCentreNames() in Service.cs. The first function retrieves all the tuples in the database and returns them as an Array of Centre Objects. The second function retrieves the list of CentreName attributes alone and returns them as an array of strings.

WSDL

Now, how does one access the two functions talked about above from the flex client by means of Web services? One way of doing that is using a WSDL.  WSDL (Web Service Description Language) is a standard XML based language used to describe or model web services. For more information, go to the wikipedia link.

For all Web Services created in Visual Studio, the WSDL is automatically generated. If the Web Service is deployed on a server, then the path of the WSDL is usually (unless specified otherwise by the user)

http://{serverpath}/{context of the web application}/{Name of the services file- In our example, it is services.asmx}?WSDL

This fact is to be borne in mind. The above path will be referred as WSDL path henceforth.

Importing the Web Services to Flex

We can now turn our attention to Flex.

1. If you don’t already have Flash Builder, download and install Flash Builder 4 from this URL http://labs.adobe.com/technologies/flashbuilder4/.

2.First create a new Project . Go to File->New -> Flex Project.

3.In the Screen that appears, enter an appropriate Project name and click Finish.

4.Make sure that the perspective is Flash Perspective. In this perspective, there is a tab called Data/Services (shown in the image below). In the Data/Services window, choose Connect to Data/Service.

5. In the Connect to Data/Service Window, select Web Service and click next.

6. The next menu is a screen which prompts for the Specific WSDL to introspect. Remember the WSDL path that we defined in the previous section. Enter this in the box marked in Red below.  The Service name, service package and Data type package are filled in automatically by Flash Builder. Since the name of the .asmx file is Service, the Service name has the same value by default. Let us rename the service to CentreService so that the name sounds more specific.

7. In the next screen, the web services are introspected and it is possible to see the list of web service operations available. Check on the two function names.

8. Click on Finish and in the same Data/services tab we talked about in step 3, one can view the different operations that were imported.

Hence, in these simple steps, we have imported the operations from a .NET Based Web Service to a flex front end.

DCD Data Binding

For an example of how easy Data Centric Development has made things consider this.

-> Switch to design view (Ctrl+Shift+`).

-> Choose the component’s tab from the left(as higlighted in red in the image below- Click to see full image)

-> Drag and drop the list to the design view and resize it to on the basis of the number of values in the database.

-> Right click on the List and click Bind To Data

-> Since this is being done for the first time, in the Bind to Data Menu that appears, the Radio Button for New Service Call is checked. Here choose CentreService the Combo box titled Service and for Operation choose getCentreNames():String[].

-> That’s it. Flash builder has generated all the code that’s required. All you need to do is run the program(Ctrl + F11) and you can see how all the elements from the database are populated in the list.

-> Not had enough? Here is more. The same way a list was drag and dropped into the Design View, drag and drop a DataGrid into the design view and repeat the same process.

-> Instead of the getCentreNames():String[] option in under operations, choose getCentres():Centre[].

-> Run the program again and you can see that the table is shown exactly how it was in the database except for the fact that it is flex and looks way better.

-> The Value Object (VO) for the corresponding Class Centre in C# was automatically generated by Flash Builder. Here, a VO is essentially the C# class written in ActionScript. This can be reused for any other purpose as a strong type.

Amazing Workflow

If we consider that the back end work was already done, we managed to connect the web service to the UI components on the Flex Client side in a matter of no time. And all this without writing a single line of code in the Flash Builder.  Now isn’t that simply awesome. Flash Builder + DCD rocks!!

For more articles on Flash Builder 4, visit

http://sujitreddyg.wordpress.com/flash-builder-4/