Tutorial: Using WebORB for .NET with Flex and C#

Post to Twitter

The Midnight Coders are a Texas based company that provides many solutions for developers. Ah, Texas! What a great state with great food! Today I’m going to talk about one of these solutions: WebORB for .NET

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:

Have fun!

Post to Twitter

This entry was posted in ActionScript, C#, Flex, WebORB. Bookmark the permalink.

26 Responses to Tutorial: Using WebORB for .NET with Flex and C#

  1. Great tutorial, thanks for the detailed article

  2. Pingback: Giant Flying Saucer » Blog Archive » Building a simple chat application with C#, Microsoft’s Velocity, WebORB for .NET, and Flex Builder 3

  3. farhan says:

    Hi a very nice article for startup..

    where can we get the samples (apart from the one in the management console) for the weborb data management with different use cases..

    I have been trying out for some time and completely lost….

    Thanks

  4. tin says:

    Hi, this article is very important for new programming with Flex + .Net

    I hope will many more article access database with Flex + .Net

    Thanks

  5. Ryan says:

    I just followed your article and it worked great! I expected some things to go wrong, but they didn’t. Thanks a lot man!

  6. Khanh says:

    Thanks for your article!

  7. shweta says:

    This is really very good article.It helped me to startup with Flex.
    Thanks for this !!

  8. Indrajit Roy says:

    Hi I have followed all the step mention above in the Article. But when I am Running the Flex Application . It is showing “The page cannot be found ” . The URL in the address Bar is

    http://localhost/weborb30/MyWebORBExampleClient-debug/MyWebORBExampleClient.html.

    Can any one please help me out in this .
    Thanks
    Indrajit Roy

  9. Joel says:

    hmm im having this problem:
    ArgumentError: Error #2004: One of the parameters is invalid. url: ‘http:weborb.aspx’

  10. Vikas Chandgothia says:

    Hi this artical is really too much for beginers…. I m just going to try this…. Thanks a lot for this.

    Cheers
    Vikas Chandgothia

  11. Khanh says:

    i build my project follow your direction but i met an error “Send Failed”, can you help me.
    Thanks

  12. Alexandre says:

    Hi, great article! thank you.

    But i’m getting an error:

    [RPC Fault faultString="Send failed" faultCode="Client.Error.MessageSend" faultDetail="Channel.Connect.Failed error NetConnection.Call.Failed: HTTP: Failed: url: 'https:weborb.aspx'"]

    I don’t know what to do. The WebORB console is working fine.

    Any one got an ideia?

    Thanks!

  13. Chad Lung says:

    @Alexandre,

    It doesn’t make sense it would be using HTTPS:
    ‘https:weborb.aspx’

  14. kukumalim says:

    hi , this tutorial is useful for me.
    can you help me create example connect to SQL server 2005 by weborb for .net using flex.
    thanks in advance

  15. Pingback: Getting Perl and Flex talking via XML « Giant Flying Saucer

  16. Vijay says:

    Its a fantastic example thanks a lot.

    If possible could you please provide Flash AS3 with webORB for .net example like.

    I really need this.

    Vijay

  17. Rajesh Yadav says:

    Hi,
    This is very nice article to connect ASP .Net using WebORB

    Thanks

  18. Tola Anjorin says:

    This isnt really where to post this but i really need help.

    I am using weborb and vb.net. And i have been able to build and use my classes. However, i just created a class in vb.net that writes a query result to an excel sheet. It actually uses a com object namely

    Microsoft.Office.Interop.Excel

    However, when try to test in the weborb admin console.

    It says “Cannot create ActiveX component”

    Please i need help.

    Thanks

  19. Piyush says:

    FINALLY A TUTORIAL THAT ACTUALLY WORKS!!!

    It’s super friendly and a great step by step way of doing this…

    My flex finally talks to my .aspx code.

    I’ve spend 10 hours trying to figure this out and now that I have a working example, I can work OFF IT! WOHOOOOOOOOOOOOOOO.

    Okay i’m out. :)

  20. suresh says:

    very good tutorial for beginners, i followed all steps but i am getting this error “A file found in a source-path must have the same package structure ‘MyWebORBFirst’, as the definition’s package, ‘MyWebOrbFirst’…i spent so many hours to resolve it…but cudnot find any solution…can any body help me please..

  21. Darshan says:

    Very Nice….

  22. Jeroen says:

    Although WebORB comes with an extensive developers guide, a simple tutorial to get you started like this is missing. Keep up the good work!

  23. Deepak says:

    Hi, Very good work.

    I would like to use Microsofts WCF service in Flex.

    How can I use WebORB to achieve this? Please guide me or send me links.

    Thanks

  24. Chad Lung says:

    @Deepak,

    WebOrb 4 for .NET was just released, I’d start there: http://www.themidnightcoders.com/products/weborb-for-net/overview.html

    Their forums are also pretty active.

    Chad

  25. Mark says:

    I am working on my own project but getting
    ArgumentError: Error #2004: One of the parameters is invalid. url: ‘http:weborb.aspx’
    at flash.net::NetConnection/connect()
    at mx.messaging.channels::NetConnectionChannel/internalConnect()[E:\dev\4.y\frameworks\projects\rpc\src\mx\messaging\channels\NetConnectionChannel.as:240]
    at mx.messaging.channels::AMFChannel/internalConnect()[E:\dev\4.y\frameworks\projects\rpc\src\mx\messaging\channels\AMFChannel.as:307]
    at mx.messaging::Channel/connect()[E:\dev\4.y\frameworks\projects\rpc\src\mx\messaging\Channel.as:884]
    at mx.messaging::ChannelSet/connectChannel()[E:\dev\4.y\frameworks\projects\rpc\src\mx\messaging\ChannelSet.as:1707]
    at mx.messaging::ChannelSet/reconnectChannel()[E:\dev\4.y\frameworks\projects\rpc\src\mx\messaging\ChannelSet.as:1809]
    at flash.utils::Timer/_timerDispatch()
    at flash.utils::Timer/tick()
    Any idea?

  26. Pingback: WebORB « Pedro Flores Blog

Comments are closed.