Sam Shrefler

After my last tutorial/post about using JSON, Mark Piller from TheMidnightCoders commented that my requested functionality (Easily pass back client classes back and forth) could be completed using his product, WebOrb.NET. Thanks Mark!

After further investigation, I was still a little confused as how to accomplish this using a non-beta, standard (free) version of WebOrb.NET. Well, it turns out; WebOrb v2.0 works great with AMF0, the remoting format from Flash 8. This led me to Renaun’s RemoteObjectAMF0 which easily plugs into a Cairngorm ServiceLocator. So there’s the pieces, now to put together the puzzle.

First you will need the following for this tutorial: Visual Studio 2005, Adobe Flex Builder 2.0, Renaun’s RemoteObjectAMF0 (link), and Cairngorm (link).

Install WebOrb 2.0. Following all the system defaults should work just fine.

Open Visual Studio and Create a New Web Service: File -> New -> Website -> Empty Web Site.
Create a new C# Class: File -> New -> File -> Class -> Name the class EmployeeService.cs. You may be prompted about placing the cs file in the App_Code Folder, choose Yes.

A file EmployeeService.cs will be created in the App_Code Folder. Open EmployeeService.cs. Enter the following code.

[csharp]
using System;
using System.Web;
using Weborb.Util;
using net.shrefler.vo;

namespace net.shrefler.service
{
public class EmployeeService
{
public EmployeeService()
{
}

public EmployeeVO[] getEmployees()
{
EmployeeVO[] emps = new EmployeeVO[2];
EmployeeVO emp = new EmployeeVO();

emp.firstName = “Sam”;
emp.lastName = “Shrefler”;
emps[0] = emp;
emp = new EmployeeVO();
emp.firstName = “Your”;
emp.lastName = “Name”;
emps[1] = emp;

return emps;
}
}
}
[/csharp]

Create a new C# Class: File -> New -> File -> Class -> Name the class EmployeeVO.cs. You may be prompted about placing the cs file in the App_Code Folder, choose Yes.

A file EmployeeVO.cs will be created in the App_Code Folder. Open EmployeeVO.cs. Enter the following code.

[csharp]
using System;
using System.Web;

namespace net.shrefler.vo
{
public class EmployeeVO
{
public string firstName;
public string lastName;

public EmployeeVO()
{
}
}
}
[/csharp]

Next we’ll need to add WebOrb to our application. In your webroot folder should be a weborb directory. Copy “weborb.dll” from its bin directory into a bin directory in your new website. Then copy “weborb.config” and “web.config” from the weborb root directory to the root of your local website.

Open weborb.config and add the following code inside the tag.

[xml]

net.shrefler.EmployeeVO
net.shrefler.EmployeeVO

[/xml]

Rather than describing all the flex code: I decided to just use the Source View. So here is the flex code: (link)

I hope this helps everyone as much as I hope it will help me. As always, comments are appreciated. Good Luck!

Don’t have enough time to wait for Adobe to release .NET Remoting for Flex?  Not quite ready to dive into Flourine?  Not able to purchase or install webOrb.NET on your server?  Dreading working with XML and WebServices?  Me Too, Me Too, Me Too, Me Too.  Luckily, I’ve found something that seems to have made my life a little easier for the time being.  JSON - as originally explained by Mike Chambers here. JSON for Actionscript 3.0, a jewel written by Darron Schall for Adobe, in the corelib released by Adobe and JSON.net for .NET.

JSON - pronounced Jason - allows you to serialize and deserialize data. 

Broken down:  You can send a bunch of different data types from .NET <-> Flex including Arrays and Objects and Arrays of Objects.  Where I see room for improvement would be after getting a generic object, being able to automatically convert that to a ValueObject (TransferObject) on both the client and server side.  Until that happens, I’ll just take care of it manually - unless someone has a better recommendation. 

On With The Show:

First you will need the following to follow this tutorial:  Visual Studio 2005, Adobe Flex Builder 2.0, JSON.net

Open Visual Studio and Create a New Web Service: File -> New -> Website -> ASP.NET Web Service.

 A file Service.asmx will be created and in the folder “App_Code” Sective.cs will be created.  Open Service.cs.  Enter the following code.

[csharp]
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using Newtonsoft.Json;

public class Employee
{
public int id = 0;
public string firstName = “”;
public string lastName = “”;
}

public class Service : System.Web.Services.WebService
{
public Service () {
}

[WebMethod]
public string GetEmployee() {
Employee e = new Employee();
e.id = 12345;
e.firstName = “Sam”;
e.lastName = “Shrefler”;

string output = JavaScriptConvert.SerializeObject(e);

return output;
}
}
[/csharp]

Next, you’ll need to copy “Newtonsoft.Json.dll” and “Newtonsoft.Json.XML” into your App_Code directory.  Next, right-click the Project and go to “Add Reference”.  Select Browse then Find “Newtonsoft.Json.dll” and hit OK.  A Bin directory should be created containing the “Newtonsoft.Json.dll” and “Newtonsoft.Json.XML” in your project.  Right click on Service.asmx and go to “View in Browser”.   A Service Description should come up.  Click “GetEmployee” then click “Invoke”.  If all is working properly, you should see the following output:

[xml]

{”id”:12345,”firstName”:”Sam”,”lastName”:”Shrefler”}
[/xml]

Great!  Your Webservice is ready to go.  Next we’ll move to the client-side: Flex!

Create a new Project. In the main mxml file, add the following code:

[as]



import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
import com.adobe.serialization.json.JSON;

private function onJSONLoad(event:ResultEvent):void
{
//get the raw JSON data and cast to String
var rawData:String = String(event.result);

//De-serialize the object
var employee:Object = JSON.decode(rawData);

//Add the Object to an Array
var arr:Array = new Array();
arr.push(employee);

//create a new ArrayCollection passing the de-serialized Object Array
//ArrayCollections work better as DataProviders, as they can
//be watched for changes.
var dp:ArrayCollection = new ArrayCollection(arr);

//pass the ArrayCollection to the DataGrid as its dataProvider.
grid.dataProvider = dp;
}
]]>

[/as]

Compile and Build the application. You should see the data grid populated with one record straight from ASP.NET. Future enhancements I’d like to make to this application will be to clean the source, implement cairngorm in the flex code, and find a way to automatically transfer from generic objects to value objects in both Flex and .NET.

I hope this helps and any feedback is appreciated!