Avi Zurel - @KensoDev

Synchronize Client Application using flex/WebOrb.net

Posted on Nov 1, 2009

Sometimes you need to create a Client Application that will sync itself automatically to changes, not necessarily made within your screen.

Let’s say you have a client that’s requesting an application for his sales team. He wants a special screen displaying the calls from clients and the client’s request taken by the secretary.

In addition, the client does not want to “refresh” the page, he wants it displayed the second it happens. I will show you a way to do this in minutes using WebOrb.net / flex and visual Studio.

Planning (Equipment)

  1. WebOrb installed on machine (Go now and download from the link below)
  2. Flex builder 3
  3. Visual studio or visual web developer express
  4. good mood

If you are not familiar with the amazing product called WebOrb.net you should really read about it some more.

I already installed WebOrb newest version on my machine and I will simply start this post from the point that the server is installed and configured. I do plan to post a series of posts about this product – the first one will also include installation and configuration.

If you need any help or explanations for now, please go to MidnightCoders website and have a look at this great tutorial here.

After installing the application and navigating to http://localhost/weborb30 you see the weborb admin console.

Now, the application is installed on the server. Lets move along and create our database shall we?

I created a database called Sales, I will create a table called sales_leads like shown in this image here.

By the way, I’m using a sql express 2008 database, but you can use any database you may want.

If you cannot understand from the picture, here is the table creation script so you can better understand and so you can copy+paste for your convenience.

[sql]

USE [Sales]

GO

/**\* Object: Table [dbo].[sales_leads] Script Date: 11/01/2009 22:01:48 ***/

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

CREATE TABLE [dbo].[sales_leads](

[leadID] [int] IDENTITY(1,1) NOT NULL,

[client_name] [nvarchar](50) NULL,

[client_phone] [nvarchar](50) NULL,

[comments] [nvarchar](2550) NULL,

CONSTRAINT [PK_sales_leads] PRIMARY KEY CLUSTERED

(

[leadID] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]

) ON [PRIMARY]

GO

[/sql]

Now, we have our database ready, let’s navigate our way inside the weborb admin console to Management –> Data Management

In the “Database” section (red square) click the “Add new Database” icon

The next 2 dialogs are simple – Just enter your username, password, server URI and click OK. You will be prompted to select your database from the list of db’s on the server.

After selecting a db it should be inside the “Database” section (bottom left).

Now, this is the part where it gets to be magical

Select your table you want to create a model for (right now there’s only one) and drag it into the main work surface

A dialog will popup.

Fill in the model name, server namespace, client namespace (these all are custom and you can fill in whatever naming conventions you are used to)

Here’s mine:

Make sure you check the “generate test drive” checkbox, this will generate server side/client side code for you. After you click save, your screen should look like this:

Above the model name you see an icon for a zip file, click it and the code will be downloaded. This generated both server side and client side code for you.

Click the build icon and then the download icon.

Here’s the file content:

OK, we are half way there.

Now, open the server project using visual studio, compile it, take the DLL and the config file it created and place it in the BIN folder inside weborb.

Should be something like c:\inetpub\wwwroot\weborb30\bin

Create a flex project, place the files inside this project, build and watch the magic happen.

Make sure you create a build reference to the weborb XML (Services) like so:

Here’s a screenshot of the final result, every change you make, every record you add is immediately transferred to the other client.

Usually, I publish source code with my posts, but this code was generated for me the same as it will be generated for you.

Feel free to comment with questions, I will do my best to answer them.

Good luck!