Developer Resources:

Customer Quotes:

WebORB for .NET 4.3 is now integrated with the Amethyst IDE to enable drag and drop design, development, debugging and integration of Flex, Flash, AIR clients and .NET server applications right inside of Visual Studio. With this new build .NET developers will have access to all the design time, development and runtime integration tools running in an environment that they are most familiar with – Visual Studio.

Prerequisites

Create a Flex Project

Once you have installed the prerequisites, launch Visual Studio and select File>New Project>Amethyst>Flex  (You can select either Flex 3 or Flex 4.)  For this example, choose Flex 4 (assuming you downloaded the Flex 4 SDK).  Name your project MyFlexApp and select OK. You will be prompted to select the location of the Flex SDK since this will be the first time you’ve built a Flex application using Amethyst running in Visual Studio. Amethyst creates a default Flex application. Go ahead and compile the project by right clicking on MyFlexApp in the Solution Explorer and then select Build.

Create Your .NET Project and Service

Create your server-side application using WebORB’s built-in Visual Studio project templates.  To do this, select the solution node called MyFlexApp again and select Add > New Project. Then select the Visual C# node from the Installed Templates and drill down to Web > WebORB-enabled Web Site. WebORB includes Visual Studio templates.) Next name your website MyWebORBSite. Visual Studio imports the project into the Solution Explorer. Right click on MyWebORBSite and select Set as StartUp Project. Also right click on weborbconsole.html and select it as the startup page. The WebORB template automatically includes a template service under the App_Code node called SampleService.cs

Right click on the MyWebORBSite in the Solution Explorer and select Build Web Site. Then click on Debug at the top of the screen to run the application. Since you selected weborbconsole.html as your startup page, Visual Studio will load the WebORB Console in the browser, enabling you to verify that the web site is working properly.

Select the Services tab and drill down to into the .NET Assemblies until you get to the echo() method under MyWebORBSite > SampleService. This brings you to the Test Drive functionality within WebORB Management Console.  Here you can enter a value; click Invoke to invoke the selected method; and and receive a result, which enables you to inspect complete client-to-server side communication for proper operation.

Integrate .NET and Flex

Return to Visual Studio, locate and right click on the Services node in the MyFlexApp project and select Add WebORB Services. This is where you will see the integration between Amethyst and WebORB inside of Visual Studio. Amethyst opens up an instance of WebORB Service Browser. Here you will need to enter the location of the WebORB Server. Since you already have a WebORB Server installed as part of your server-side project you can simply go to the URL we opened before, which had the WebORB console running in the browser.

For example:

Click Load Services.  You’ll note that this Service Browser will return the same listing of services that were displayed in the WebORB console running in the browser.

Drill down to the SampleService node in the WebORB Service Browser. This is where it gets really interesting. See the list of frameworks listed on the right hand side of the WebORB Service Browser? That list represents WebORB’s built-in code generators.  You can select any one of those frameworks and then select Import Service and WebORB automatically generates the documented integration code and Amethyst deploys this code and project files right into the Amethyst/Flex project – all without ever leaving Visual Studio. For this example, select Flex Remoting/AS3 and then select Import Service.

Verify that you now have the generated project files in your Solution Explorer by drilling down to MyFlexApp > MyWebORBSite. You will see two files:

SampleService.as

SampleServiceModel.as

Upon clicking on the first file, a screen that displays the integration code that was generated for this service appears. This is all the code needed to enable the Flex client to communicate with WebORB. Notice, we were able to create that integration and test it even before the Flex client application was built.

Design the Flex Application

Next, you will create a very basic application that uses the generated code and communicates with WebORB. Open the MyFlexApp.mxml from the Solution Explorer and click on the Design view. This is Amethyst’s Designer running inside of Visual Studio. Now if you will remember, we had you create a .NET service that accepts a string and returns a string. What you are going to do in the Amethyst Designer is add the Flex UI components.  Open up the Toolbox. If you see a message that says “There are no usable controls in this group…”  click on Amethyst at the top of the screen and then click on Component Manager. Then select”Set Default” and “Yes”. This will add Amethyst Controls to the Toolbox.

Using the components, you will need to add the following to the design workspace:

  • Text input field that represents the client-side Input
  • Label that is labeled as Enter Value
  • Button that performs the method invocation. Label that button 'Send to Server'
  • Label that represents the returned value from the server
  • Label that is labeled as 'Server returned:'

Wire Flex Components to .NET Methods

Next you will need to wire the button to the actual method invocation. For this you will need to switch back to the Code view. Click the SampleService.as in the Solution Explorer to bring the generated code back into view. It looks something like this:

/***********************************************************************
The generated code provides a simple mechanism for invoking methods
on the MyWebORBSite.SampleService class using WebORB.
You can add the code to your Flex Builder project and use the
class as shown below:
 
import MyWebORBSite.SampleService;
import MyWebORBSite.SampleServiceModel;
 
[Bindable]
var model:SampleServiceModel = new SampleServiceModel();
var serviceProxy:SampleService = new SampleService( model );
 
// make sure to substitute foo() with a method from the class
serviceProxy.foo();
 
Notice the model variable is shown in the example above as Bindable.
You can bind your UI components to the fields in the model object.
************************************************************************/
 
package MyWebORBSite
{
import mx.rpc.remoting.RemoteObject;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.AsyncToken;
import mx.rpc.IResponder;
import mx.collections.ArrayCollection;
 
public class SampleService
{
private var remoteObject:RemoteObject;
private var model:SampleServiceModel;
 
public function SampleService( model:SampleServiceModel = null )
{
remoteObject  = new RemoteObject(“GenericDestination”);
remoteObject.source = “MyWebORBSite.SampleService”;
remoteObject.echo.addEventListener(“result”,echoHandler);
remoteObject.addEventListener(“fault”, onFault);
 
if( model == null )
model = new SampleServiceModel();
 
this.model = model;
}
 
public function setCredentials( userid:String, password:String ):void
{
remoteObject.setCredentials( userid, password );
}
 
public function GetModel():SampleServiceModel
{
return this.model;
}
 
public function echo(text:String, responder:IResponder = null ):void
{
var asyncToken:AsyncToken = remoteObject.echo(text);
if( responder != null )
asyncToken.addResponder( responder );
}
 
public virtual function echoHandler(event:ResultEvent):void
{
var returnValue:String = event.result as String;
model.echoResult = returnValue;
}
 
public function onFault (event:FaultEvent):void
{
Alert.show(event.fault.faultString, “Error”);
}
}
}

Next, select MyFlexApp.designer.as from the Solution Explorer and then select line 6 in the Code view, press enter to create line 7. Then copy and paste this portion of code from above onto line 7:

import MyWebORBSite.SampleService;
import MyWebORBSite.SampleServiceModel;
 
[Bindable]
var model:SampleServiceModel = new SampleServiceModel();
var serviceProxy:SampleService = new SampleService( model );

What you have just added is a bindable model, which will contain results from the remote method invocations as well as the actual service proxy - the SampleService ActionScript class is a proxy for the remote .NET service. Next, add a method by copying and pasting the following after the model and service declarations:

public function sendDataToServer(val:String):void 
{
serviceProxy.echo(val);
}

This performs the remote method invocation. When the result is received by Flex, the generated code will automatically update the model object.  This means that in the UI you can bind the label that displays the data received from the server to the property in the model. Click on SampleServiceModel.as to find the name of the property. In this example it is echoResult (this is found in the SampleServiceModel.as.

To bind the labels and the button in the Flex application to the property values in their respective fields field, go ahead and copy and paste the following into your MyFlexApp.mxml, replacing the content that is already there.

<?xml version=”1.0encoding=”utf-8″?>
<s:Application height=”600width=”800
xmlns:fx=”http://ns.adobe.com/mxml/2009
xmlns:mx=”library://ns.adobe.com/flex/mx
xmlns:s=”library://ns.adobe.com/flex/spark>
<fx:Script source=”MyFlexApp.designer.as/>
 
<mx:TextInput height=”22id=”myInputwidth=”160x=”132y=”27/>
<mx:Label height=”18id=”Label1text=”Enter value:width=”99
x=”28y=”31/>
<mx:Button height=”22id=”Button1label=”Send to serverwidth=”120
x=”28y=”62click=”{sendDataToServer( myInput.text )}”/>
<mx:Label fontWeight=”boldheight=”18text=”{model.echoResult}” 
width=”167x=”138y=”107/>
<mx:Label height=”18id=”Label3text=”Server returned:width=”96
x=”31y=”107/>
</s:Application>

Compile and Run the Application

Now you are ready to compile your Flex application. Right click on MyFlexApp in the Solution Explorer and select Build.

Once successfully compiled you can debug and run the application. Right click on MyFlexApp again and select Set as Startup Project. Run the Flex application.

Enter a value in the input field and the click Send to Server. The server should return the value you entered into the Flex client app.

What you have just witnessed is the successful round trip communication between a Flex application and a .NET service. Both client- and server-side projects were created, debugged and run inside of Visual Studio using the Amethyst/WebORB IDE plug-in.  This is very powerful because it demonstrates how .NET developers now have access to a streamlined workflow for developing end-to-end Adobe Flex, Flash and AIR applications connecting to .NET services using a single IDE – Visual Studio.

Next view this video to see how to use Visual Studio for debugging across both client- and server-side projects in a single session.