WebORB is a cross-platform integration server that provides universal connectivity for desktop, browser and mobile clients and corresponding .NET classes, WCF, SOAP and REST services, data and media. Development teams all over the world also use WebORB's productivity tools to get their applications to market faster with greater business success and so can you.
WebORB for .NET is an amazing piece of software. In going over the
documentation and examples its easy to see how you can use WebORB and .NET to communicate to your Flash, Flex, AJAX, or (support coming) Silverlight applications. The best thing about WebORB for .NET is that it’s free. You can
purchase support for the product if you or your company needs it or your can their
Professional Services people assist in any projects you might have (Note: I’m not affiliated with The Midnight Coders).
To go through this tutorial you will need the following:
1.
Visual Studio 2008 (I used the professional edition, the
Express and Standard Editions should work though)
2.
WebORB for .NET
3.
Windows with IIS installed
4. A copy of
Flex Builder 3 (the evaluation version will work if you don’t own Flex Builder or if your brave you can use the
Flex SDK)
Start by creating a new project in Visual Studio. Pick the “Class Library” template from the list of choices and call the new project “MyWebORBExample” and then click “Ok”.
Rename the class file to “MyClass.cs” an change the class’s name from “Class1″ to “MyClass”.
Now we’ll add a method to the class that we can use to communicate back and forth to Flex. Add a new method called “SayHello”:
using System;
using System.Web;
namespace MyWebORBExample
{
public class MyClass
{
public string SayHello(string name)
{
return "Hello: " + name;
}
}
}
|
We simply pass in a string and get a string back that says hello back. Not hard stuff. Go ahead and compile that code. If the code compiles without error, set the project to build the assembly in “Release” mode and rebuild the solution. Thats all we need to do for now with the C# part of this.
Now we can cheat just a little bit. If you’ve already installed WebORB for .NET then you can go into the WebORB Management Console. If you haven’t installed WebORB for .NET then now would be a good time. On my machine the address is:
http://localhost/weborb30/weborbconsole.html
The WebORB Management Console is a powerful tool for working with your projects. I won’t go into detail and what all it’s capable of other than what we will be doing in this tutorial. Click on the “Management” tab and you will see a “Deployed assemblies” area under the “Services” sub-tab. Now we’ll copy that released assembly we just built into WebORB. Copy the “MyWebORBExample.dll” from the release folder into “C:\Inetpub\wwwroot\weborb30\bin” (modify this path if your installation of IIS or WebORB are different). Now go back to the WebORB Management Console and hit the “Refresh” – you should see the assembly show up.
Click on the little grey arrow beside the assembly name and expand it. You’ll notice that the WebORB Management Console begins reflecting on the assembly showing us some information on our class and it’s method(s). You might also notice when you click on “MyClass” the “Code Generator” tab opens and some code is generated for us to call this assembly from Flex/Flash. How cool is that?
Well it gets even more cool when you click on the “sayHello” method below the “MyClass”. Now the “Test Drive” tab opens and we can actually call this method from the WebORB Management Console. Go ahead and call the method now to see how it works. Type in a value (your name) and then press the “Invoke” button. You should see something like this:
Time to fire up Flex Builder 3 and create a new Flex Builder project. Call the project “MyWebORBExampleClient” and make sure the “Application server type” is set to “ASP.NET” and press “Next”.
Click the “Use Internet Information Services (IIS)” radio button on the next screen and fill in the rest of the values with how your IIS and WebORB is setup and make sure to press the “Validate Configuration” button and press “Finish”.
We need to do one more modification to the project before we start on the MXML. Open the project properties from the menu at the top of Flex Builder and insert this into the Flex Compiler’s additional arguments:
-services c:\Inetpub\wwwroot\weborb30\web-inf\flex\services-config.xml
|
- Again, if your paths are different then adjust these to your settings. Also note that if your path contains spaces you need to wrap the path in quotes like this:
-services "c:\Inetpub\wwwroot\A SPACE IN THE PATH\weborb30\web-inf\flex\services-config.xml"
|
Click the “Apply” button and then close the window.
We are now ready to write some MXML. Click on the “Design” button in Flex Builder. Now drag a “MX:Panel” from the “Components” area onto the designer surface. Adjust the size to be a little bit bigger than the default and if you want you can set the constraints in the “Flex Properties” panel to be centered on the screen. Finally we need to drag an MX:TextInput, MX:Button, MX:Label, and MX:TextArea onto the panel control. Change the button’s “ID” property to “submit_btn”, it’s “On Click” to “submitClicked();” and it’s “Label” property to “Submit”. Change the label control’s “Text” property to “Enter Your Name:”. Finally set the “ID” property of the InputText control to “input_txt” and the TextArea’s “ID” property to “output_txt”.
Click on the “Source” button now (its right beside the “Design” button at the top of the designer screen). Here is the MXML so far:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel width="418" height="222" layout="absolute" horizontalCenter="0" verticalCenter="0" backgroundColor="#EEEEEE" fontFamily="Verdana" fontSize="12">
<mx:TextInput x="134" y="25" id="input_txt" width="173"/>
<mx:Button x="315" y="25" label="Submit" id="submit_btn" click="submitClicked();"/>
<mx:TextArea x="10" y="80" width="377" height="82" id="output_txt"/>
<mx:Label x="10" y="27" text="Enter Your Name:" fontFamily="Verdana" fontSize="12"/>
</mx:Panel>
</mx:Application>
|
We will now “cheat” a little by taking that code the WebORB Management Console generated for us earlier and we will use it in here. Go back into the WebORB Management Console and click on “MyClass” so the code generator shows up. Off to the bottom right you will see a “Download Code” button. Click on that and save the resulting file to your file system. Go grab that Zip file and extract it somewhere. Now go back into Flex Builder and from the “Flex Navigator” panel right-click on the “src” folder and choose “New -> Folder”. Name the new folder “MyWebORBExample”. Again from the “Flex Navigator” panel right-click on the “src” folder and choose “Import” from the resulting menu. In the “Import” dialog that opens expand the “General” folder and pick “File System”.
Click on the “Next” button. Browse to where you put those extracted files and select them and then press the “Finish” button.
The result should be this:
Open up those files we just imported and have a look at them. Up in the comments section of the “MyClass.as” you’ll see that they even included some sample code to make this work. Go ahead and switch to the “MyWebORBExampleClient.mxml” window. Add the following code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import MyWebORBExample.MyClass;
import MyWebORBExample.MyClassModel;
[Bindable]
private var model:MyClassModel = new MyClassModel();
private var serviceProxy:MyClass = new MyClass( model );
private function submitClicked():void
{
serviceProxy.SayHello(input_txt.text);
}
]]>
</mx:Script>
<mx:Panel width="418" height="222" layout="absolute" horizontalCenter="0" verticalCenter="0" backgroundColor="#EEEEEE" fontFamily="Verdana" fontSize="12">
<mx:TextInput x="134" y="25" id="input_txt" width="173"/>
<mx:Button x="315" y="25" label="Submit" id="submit_btn" click="submitClicked();"/>
<mx:TextArea text="{model.SayHelloResult}" x="10" y="80" width="377" height="82" id="output_txt"/>
<mx:Label x="10" y="27" text="Enter Your Name:" fontFamily="Verdana" fontSize="12"/>
</mx:Panel>
</mx:Application>
|
First we imported the two ActionScript files we had imported earlier. Then we use a slightly modified version of the code that the generated MyClass.as had up in the comments. We set the model variable as bindable so it can be bound to other UI controls – like our output_txt control. We added an event handler for the “Submit” button’s click and then we added the data binding to the output_txt control:
<mx:TextArea text="{model.SayHelloResult}" x="10" y="80" width="377" height="82" id="output_txt"/>
|
Run the project from Flex Builder and you should be able to type in your name and then hit the “Submit” button and see the result:
