In my last post I showed you how to install Weborb .Net connector, now I'd like to build a little example using this technology: we will create an object from the server side and send it to the client. It's a very simple example but I think it is the better way to understand the most important functionality of Weborb.
For this example we will use IIS 6.0 and .NET 2.0 for the server side, while for the client we use a simple Flex 3 application.

The server side classes that we build for this project are:

Person.vb
DBManage.vb
DBDelegate.vb


Person class is made by three attributes: idPerson (numeric), name (String) and surname (String). This class is the VO (value object) that we want to manage both in the server and in the client side, so we have to build an ActionScript Class which references the service side class from the client.
The DBManage class has the methods to manage the persistence of data and it will be the remote object called by our flex client, through a Remote Object.

Here is the code of the class:

<Serializable()> Public Class Person
Public idPerson As Integer
Public name As String
Public surname As String
End Class



Public Class DBManage
Function tryPerson() As Person
Dim p As Person
p = New Person()
p.idPerson = 1
p.name = "Mario"
p.surname = "Rossi"
Return p
End Function
End Class



Public Class DBDelegate
Public Function tryPersonWebOrb() As Person
Dim db As DBManage
db = New DBManage()
Return db.tryPerson()
End Function
End Class


with these classes we can create a small DLL file, called weborbTrial.dll.

Before building the client we have to configure the Virtual Directory in IIS in which we will install the Weborb classes and also the client application. So we have to create a virtual directory in our IIS with permission of write and read. For information on how to install Weborb in this Directory you can see my last post.

After the installation we can carry on building the client application. First of all we have to copy into the subdirectory “bin” of our Weborb directory the weborbTrial.dll file. After we can start to create a new Flex Project. Open your Flex Builder and create a new Project. In the first screen insert the name of the Project, select the Flex Checkbox and choose the ASP.NET server configuration and click Next.

In the second screen in the web application Run field insert the URL of our virtual directory and the field below insert the locale directory of the application; then in the last field insert the bin-debug directory of the application. Click finish and the project is created.

Before starting to write the client application, open the properties of our project and in the compiler section add this line: -services [ourDirectory]\WEB-INF\services-config.xml.

First of all we have to create the VO ActionScript class, corresponding to Person.java:

package vo
{
import mx.collections.ArrayCollection;

[Bindable]
[RemoteClass(alias="weborbTrial.Person")]
public class Person
{
public function Person(){}

public var idPerson:Number;

public var name:String;

public var surname:String;
}
}


Now we can create our client. For this example we use a simple button for call the method of the remote object defined in the Application. If the connection with the server works in the right way, we should see in the Panel the object created by the server class.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>

<![CDATA[

import vo.Person;

import mx.collections.ArrayCollection;

import mx.rpc.events.FaultEvent;

import mx.controls.Alert;

import mx.rpc.events.ResultEvent;

//Result Event of the Remote Object

private function exec(event:ResultEvent):void{

var p:Person = new Person;

p= event.result as Person;

Name.text = p.name;

Surname.text = p.surname;

}

//Fault Event of the Remote Object

private function fault(event:FaultEvent):void{

Alert.show(event.message.toString());



}

private function addPerson():void{



exampleService.tryPersonWebOrb();

}

]]>

</mx:Script>

<mx:VBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">

<mx:Panel title="Weborb .NET Example">



<mx:Form width="20%" height="40%" paddingBottom="30" paddingLeft="30" paddingRight="30" paddingTop="30">



<mx:FormItem label="Name">

<mx:TextInput id="Name" />

</mx:FormItem>

<mx:FormItem label="Surname">

<mx:TextInput id="Surname" />

</mx:FormItem>



</mx:Form>



</mx:Panel>



<mx:Button click="addPerson()" label="Pick a Person from .NET Server"/>

</mx:VBox>



<mx:RemoteObject id="exampleService" destination="GenericDestination" source="weborbTrial.DBDelegate" fault="fault(event)">

<mx:method name="tryPersonWebOrb" result="exec(event)" />

</mx:RemoteObject>

</mx:Application>


It is important to focus our attention on the definition of the remote object. This object is connecting to server by a default destination and channel defined in the remote-config.xml file, but it is possible to create our destination and channel and we can also define the source in the destination's property in the remote-config.xml file.

It's no hard to see that the our client application could work well also with a different server backend, with only minor changes to the configuration parameters.

Enjoy yourself with Weborb!

When you want to assign a tooltip to a UIComponent, you simply set the variable "tooltip" to a custom String. You don't have many chances to customize it, except from the string itself. On the contrary you can use the ToolTipManager to customize tooltips for your entire application; this class has properties such as hideDelay/showDelay, hideEffect/showEffect and toolTipClass, with which you can change the UI for all your tooltips; the ToolTipManager lets you create and destroy tooltips progamatically also with the two methods createToolTip and destroyToolTip.
In this post I want to show you how to customize a tooltip in a specified view only, without interfere with the rest of your application. You can use two strategies:
- manage the popup by yourself, creating/destroying it and let it interact with the mouse events
- use the tooltip manager
We are going to explore the latter.
The UIComponent class dispatches some tooltip related events:

- toolTipCreate Dispatched by the component when it is time to create a ToolTip. UIComponent
- toolTipEnd Dispatched by the component when its ToolTip has been hidden and will be discarded soon. UIComponent
- toolTipHide Dispatched by the component when its ToolTip is about to be hidden. UIComponent
- toolTipShow Dispatched by the component when its ToolTip is about to be shown. UIComponent
- toolTipShown Dispatched by the component when its ToolTip has been shown. UIComponent
- toolTipStart Dispatched by a component whose toolTip property is set, as soon as the user moves the mouse over it.

The first one is dispatched before the effective creation of the tooltip. This event has a writable property called toolTip that can be used to specify a custom class to be created in place of the standard one (that is the class specified in ToolTipManager.toolTipClass).
You have to implements the IToolTip interface that has two properties:

- screen : Rectangle
- text : String

You get the screen property extending the UIComponent class, so you have to implement only a setter/getter for text.
Actually using this property is not necessary, let's see an example:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">

 <mx:Script>
  <![CDATA[
   import mx.core.IToolTip;
   import mx.events.ToolTipEvent;

   private function toolTipCreateHandler(event:ToolTipEvent):void
   {
     var tooltip:IToolTip = new CustomToolTip();
     tooltip.width = 200;
     tooltip.height = 100;
     event.toolTip = tooltip;
   }

  ]]>
 </mx:Script>

 <mx:Button label="ToolTip example" toolTip=" " toolTipCreate="toolTipCreateHandler(event)" />

</mx:Application>


and the tooltip class

package
{
 import mx.containers.Canvas;
 import mx.controls.Label;
 import mx.core.IToolTip;


   override protected function createChildren():void
   {
    if(!helloWorld)
    {
     helloWorld = new Label();
     helloWorld.text = "Hello world";
     addChild(helloWorld);
    }
   }

   public function get text():String
   {
    return null;
   }


   public function set text(value:String):void
   {
   }
 }
}


As you can see we are not using the text property of the ITooltip interface, but it's important to note that we have to set tooltip to something different than null or empty string otherwise the TooltipManager will not be activated.