Simple WDMF Walkthrough, with ROI

Last week, I struggled to install Microsoft SQL Server, gave up, and installed MySQL. This week, I’ll start working my way through the sample applications and documentation for WebORB Data Management for Flex (WDMF).

This blarticle will document a step-by-step walk-through of the creation of a WDMF-based application.

WDMF has been in WebORB for a few years now, but it has not been well-documented. These blog posts won’t fix its formal documentation — I’ll start addressing that soon — but they are a step in that direction.

Loading the Database

First, I loaded, into MySQL, the foodanddrinks sample database that ships with WebORB 4 for .NET. You can find it at

	C:\Program Files\WebORB for .NET\[version]\examples\flex\datamanagement\gettingstarted\FoodAndDrinks-MYSQL

…in which [version] stands for the version number of your installation of WebORB (say, 4.0.0.5).

WebORB 4 for .NET — which I’m going to call just ”WebORB” henceforth in this post — has, in its Management Console, a tab labelled “HELP/RESOURCES”, under which there’s a link labeled “Examples”, as shown below:

Clicking the “Examples” link brings up a tree menu, as shown below, which includes an entry labelled “FLEX EXAMPLES”.

Clicking the tree control through FLEX EXAMPLES->Data Management (WDMF)->Database Setup brings up the screen shown below:

Although the discussion in the main screen (“MySQL Database Installation”)  refers to MySQL Query Browser, which has been deprecated (as of December 18, 2009) in favor of MySQL Workbench, it is otherwise correct. (Updating WebORB’s documentation to correctly use MySQL Workbench instead of MySQL Query Browser has become another task on my to-do-list.) In MySQL Workbench’s Object Browser, the loaded foodanddrinks database looks as shown at right.

Connecting WebORB to the Database

Now that the foodanddrinks database is loaded into MySQL, we need to make WebORB aware of it. To do that, we’ll go back to WebORB’s management console’s “DATA MANAGEMENT” tab, which brings up a suite of data management control regions/pods, as shown below:

Having done all that, in the lower-left corner of the image above, see the word “DATABASES”? Just to the right of it is an icon of a vertical cylinder with a little green ‘+’ sign, which, if you hover over it, brings up the tooltip text “Ad New Database”. That’s exactly what we want to do — add the foodanddrinks database into WebORB — so we’ll click on the “Add New Database” icon. That brings up WebORB’s “Database Connection” dialog box, which I filled out as shown below (two images). The values you enter may differ.

The other image above shows the foodanddrinks database listed in WebORB’s management console’s DATABASES pod, with its tables (account, order, orderline, and product).

Building a Data Model

Now we need to create a data model based on the foodanddrinks database. We’ll do that by dragging and dropping it from the DATABASES pod up-and-right to the DATA MODELS’ table-display area, as shown below.

Dropping the database into this area brings up the “User Data Model” dialog box shown below.

I used the acronym “FAD” (Food And Drinks) to identify the namespaces; I’m not sure if that’s “best practice” or not (once I find out, I’ll update this post).

Exploring the Data Model

Notice that, in the ‘User Data Model” dialog above, I’ve checked the “Generate Test Drive” checkbox. Hold that in mind.

After creating the FoodAndDrinks data model, WebORB’s console looks like this:We see “FoodAndDrinks” listed in the DATA MODEL pod, and we see its tables listed in the table-display area. After resizing the window to make it  little smaller, and hovering the mouse over the “product” table, we see two little icons appear, as shown below.Hovering over the left-hand icon reveals the tooltip “Show records,” and pressing it displays a wealth of information, as shown below.
There is so much information presented on this screen that it’s hard to do it justice in a single blarticle. In this blarticle, I’m not going to dig deeply into this screen; I’ll come back to it in later blarticles.

Validating the Data Model

Our next step is to validate the data model. See the green tick-mark icon immediately above the “account” table in the table-display area? Hover the mouse over that (in the console, not over the image of the console in this blarticle!) and you’ll see a “Validate Model” tooltip, as shown below.

Click on the “Validate Model” icon. Of the three tabs below the the table display area — Table Data Preview, Output, and Validation Errors — the console will switch to Output, as shown below.
No errors — so far, so good.

Generating Code

Next, we’ll generate code, by clicking the “Build” icon — the one that looks like a gear, just rightward of the Validate Model icon, as shown at left. After the very slightest pause, entries in the Output tab will indicate that the code was successfully generated.

WebORB for .NET can generate code for either VB or C#; I chose C#. One might wonder (as I did) why WebORB generates code using C# 2.0, when C# version 4.0 was released earlier this year. Shouldn’t WebORB keep up with the latest versions? In this case, no — older is better, because it is the most widely-compatble. The latest C# compiler will accept C# v2 code, but older C# compilers won’t accept C# v4 code…unless it doesn’t use any of C# v4’s new features. And if you can’t use any new features, why not stick with the old version? Many of the features of C# 4 are super-cool (code contracts!  yea, Bertrand, et al.!), and could add a lot of value to WebORB’s users, but we can’t (yet) impose C# 4’s use on many of our customers, who are still using older versions (for their own reasons).

Auto-Deploying the Service

Now..a magic trick!    

Skip to icons rightward of the gear/Build icon, and you’ll see a icon that shows the Earth with a little green arrow; its tooltip is “Auto deploy server code”. Click it.

Now, what did these last two button-clicks do, exactly?

• Generated code for the server, and test-drive code for the client.
• Compiled the server-side code.
• Deployed the server-side code to WebORB.

As we always do after deploying a service to WebORB, let’s go to its SERVICES management console to verify that the service has been deployed properly. After clicking the Refresh icon (two blue arrows pointing at each other’s tails), and clicking down the .NET Assemblies tree control we find — voila! — the FoodAndDrinks.dll in the list, with a bunch of services listed in its FAD_Server namespace.

I think this auto-deployment is downright magical. (I can say that, because I’m new here, so I’m not patting myself on the back.) WebORB for .NET does it using .NET APIs, whereas WebORB for Java does something quite similar using a different set of APIs (obviously).

But wait! There’s more!

To see the “more,” first, we’ll pop over to Flash Builder and

1. Create a new Flex Project (specifying Flex SDK 3.5, since that’s what WebORB’s code generator currently emits), naming it “FAD_TestDrive” (or whatever);
2. Add the WebORB path name to the Flex project’s compiler options (-services “C:/Program Files/WebORB for .NET/[version]/\web-inf\flex\services-config.xml”), where [version] is your WebORB version number (e.g., -services “C:/Program Files/WebORB for .NET/4.0.0.5/\web-inf\flex\services-config.xml”);
3. Open the zip file at location “C:\Program Files\WebORB for .NET\[version]\weborbassets\wdm\output\FoodAndDrinks.zip”;



4. Extract the files to the default location (“C:\Program Files\WebORB for .NET\[version]\weborbassets\wdm\output\FoodAndDrinks\”;
5. Select the extracted “\FoodAndDrinks\client\src” folder, drag it to Flash Builder, and drop it on the root of the FAD_TestDrive project hierarchy, clicking the “Yes To All” button on any warning dialogs that might come up;
6. Select the extracted “\FoodAndDrinks\client\libs” folder, drag it to Flash Builder, and drop it on the root of the FAD_TestDrive project hierarchy, clicking the “Yes To All” button on any warning dialogs that might come up;
7. In Flash Builder’s Package Explorer, right-cick on the file testdrive.mxml; from the menu that pops up,  select “Set as Default Application” (thanks, Cyril!).

The resulting Flex project should look something like the one shown in Flash Builder’s Package Explorer at right.

WebORB generated this client-side project because we checked the “Generate Test Drive” checkbox in the “User Data Model” dialog box, way back in the “Building the Data Model” section of this blarticle. Remember when I told you to “hold that in mind”? This is why.

Running this Test Drive project brings up a bare-bones UI that communicates with the foodanddrinks database via WebORB, of which one screen is shown below.

This TestDrive UI is not cool-looking, but it works, and it works properly. It implements full CRUD (Create, Read, Update and Delete) for each table in the foodanddrinks database, with proper transaction processing, paging (see the “Page size” control in the upper-right corner of the image above?), and client notification.

This process has been so simple and painless that it’s easy to underestimate what’s been accomplished behind the scenes.WebORB’s generated code and run-time libraries, together, implement an architecture of design patterns and best practices that encapsulate the wisdom of the ages in n-tier enterprise application architectures, and make that wisdom available at the push of a button. It reminds me of an old joke.

A retired power-plant engineer’s quiet gardening is interrupted by a panicked call from his young replacement.”The plant has stopped! It’s producing no power at all! I’ve tried all of the emergency re-start procedures and nothing works! You’ve got to come back and fix it this week, or we’ll be bankrupt! We’ll pay you $100,000!  Come quick!”

The old engineer moves steadily through the silent power plant, examining every dial, switch, gauge, and lever. In less than an hour, he zeroes in on a single switch. He flips it, and the power plant roars back to life. The plant’s managers celebrate, patting each other on the back, until the old engineer says, casually, “I’ll take that $100,000 now, please.”

“You can’t be serious!” the plant manager cries. “We’re not paying you $100,000 to flip a switch!”

“That’s right,” the old engineer says. “I flipped the switch for free; the $100,000 is for knowing which switch to flip.”

Calculating ROI

With that in mind, there’s one more icon on WebORB’s console’s DATA MANAGEMENT tab that bears exploration in this blarticle: the “Calculate ROI” icon. It’s the little green dollar-sign icon, in the upper-right corner of the image below.

Pressing the “Calculate ROI” icon in WebORB’s data management console brings up the dialog below, which shows — for a given set of assumptions — the money saved by using WebORB rather than hand-writing (and testing, and debugging, and documenting, etc.) all of this code yourself.

With the default assumptions (which seem like reasonable defaults to me), using WebORB to produce the simple foodanddrinks database and its FAD_TestDrive application saved an eye-popping $23,645!

Using WebORB to handle remoting is way cool, especially when you’ve got to support a bunch of different client & server technologies at the same time. But I’ve gotta think that using WDMF is where you can save the really serious money. The bigger the project, the more you’ll save.

Now, WDMF has been in WebORB for a few years now…but it has never been documented before, aside from a few samples. WebORB 4 for .NET, released just a few months ago, included over 40 pages of WDMF documentation, making it easier to point-and-click your way to the highest-possible ROI.

So you can afford celebratory food and drinks all around.

Whee!