Synchronize Client Application using flex/

iStock_000001422752XSmallSometimes 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 / 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 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.

01-11-2009 21-53-36

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.

01-11-2009 21-59-31

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.


USE [Sales]


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





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,



[leadID] ASC





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

01-11-2009 22-06-17

In the “Database” section (red square) click the “Add new Database” icon 01-11-2009 22-08-11

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).

01-11-2009 22-12-06

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

01-11-2009 22-13-29

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:

01-11-2009 22-15-35

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:

01-11-2009 22-16-51

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:

01-11-2009 22-19-16

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:

01-11-2009 22-34-41

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

01-11-2009 22-45-41

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!

Submit to Hacker News

[NOTE] This post has been imported to Hugo from a Wordpress blog. It may be broken, missing images, code snippets or other information.

[NOTE] updated November 1, 2009. It's 3374 days old . This article may have outdated content.