[ICS 499] My tour de Flex!

Premise:
Considering the commotion about OpenLaszlo and all things RIA, I decided this week to also speak about my experiences with trying out Flex 3. Flex is an open source Flash development framework designed from the ground up to facilitate the creation of Rich Internet Applications (RIAs) on the Flash platform (Flash 9). The Flex 3 SDK framework utilizes a mixture of a custom XML format called "MXML" and the OOP language, called ActionScript (3). ActionScript 3 is required in the recent release of the Flex 3 platform, as well as the Flash 9 platform.
In this blog entry I'll walk through my experiences developing in Flex by building a fun looking authentication application form.

Tools and requirements:

• Java Runtime Environment
• Flex 3 SDK
• Flex Builder (IDE) - The Eclipse-based IDE for the creation of Flash RIAs. Not only does the presence of an IDE significantly aid in the creation of Flex applications, but Flex Builder also has a design view and a code view, each with its own benefits, further improving ease-of-use and application development workflow. The only downfall is a hefty price after the 60-day trial of using the product. Of course you could either pay the fee, or switch to a light weight editor, such as vim, emacs, textpad, notepad, etc..
• Flash 9
  

Optional Tools and Mentions:

• Flex Charting: Aset of charting and graphing components, capable of generating Excel-style data representations, to aid in the visualization of data through Flex RIAs.
• Live Cycle Data Services (LCDS): Aserver-side application that expedites the speed of data synchronization between your middleware and your Flex application SWF (formerly, Flex Data Services).

All of the latest Flex related downloads can be found here.

So instead of starting out with the usual "Hello World!" application, I'll just start diving into the fun stuff and we'll go from there. I'll first build a simple version of the Login form, and then we'll apply Flex magic to create a more exciting user experience. All elements below were built using Flex Builder's. I would recommend snagging a copy for yourself, but you can always resort to using any text-editor of your choosing.

Applying the basic Flex Framework:
LogMeIn.mxml:

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

</mx:Application>

This code is the basic container for all your components and the basis of any Flex application. Flex Builder should also generate two important files in order to make this internet application work: first the embedded LogMeIn.swf and second, the LogMeIn.html itself. Run this in your favorite browser (Firefox for me) and you should see a blue-green colored background that fills the entire page.

Building the basic Login in form:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle">
  <mx:Panel id="loginPanel" width="309" height="182" title="Login Form" horizontalAlign="center" verticalAlign="middle">
    <mx:Form verticalCenter="true">
      <mx:FormItem required="true" label="Username" width="215">
        <mx:TextInput id="loginTI"/>
      </mx:FormItem>
      <mx:FormItem required="true" label="Password" width="215">
        <mx:TextInput id="passwordTI" displayAsPassword="true"/>
      </mx:FormItem>
      <mx:FormItem horizontalAlign="right" width="215">
        <mx:Button id="loginButton" label="Login" click=""/>
      </mx:FormItem>
    </mx:Form>
  </mx:Panel>
</mx:Application>

Here, we have a basic form with a submit button contained within a labeled panel. It's starting to look good so far, but nothing exactly works yet. Lets add some functionality to this component.

Adding some authentication logic:

  
<mx:Script>
  <![CDATA[
    import mx.controls.Alert;

    private function login():void {
      if (loginTI.text == "admin" && passwordTI.text == "admin") {
        Alert.show("Hurray!", "Login Message");
      }
      else {
        Alert.show("Incorrect login and password combination.", "Login Error");
      }
    }
  ]]>
</mx:Script>

For an incorrect login info...
And a successful login message...
Now that sure is one sexy Alert message, much better than those generated by Javascript's alert prompts. I'm somewhat impressed with this so far, but the interface can be improved to test out the power of Flex's physics engine. We can make the UI much more intuitive and surprisingly different from anything else. From here on, I'll be mimicking code produced by Doug Mccune, a fellow Flex developer.
The rest of the code is beyond the scope of this blog entry and will be featured as a download. I replaced the original form components within the panel to what was indicated in Doug's demo. Also the modified text input labels are enclosed in a "PhysicsContainer" class in order to provide that feeling of falling and manipulable objects.

<panel ... >
  <containers:PhysicsContainer id="canvas" width="100%" height="100%">
  <!-- Original login form -->
  ...
  <flexlib:PromptingTextInput id="loginTI" prompt="username" x="50" y="35"/>
  <flexlib:PromptingTextInput id="passwordTI" prompt="password" x="50" y="75" displayAsPassword="true"/>
  <mx:Button label="Login" x="158" y="115" click="login()"  />
  </containers:PhysicsContainer>
</panel>

When a person attempts to login with the wrong credentials, then the components would fall from their initial position due to some applied physics. These components are also draggable objects that can be manipulated and oriented however way you want.

Overall, these RIA platforms, including Flex have proven to be the next step in building a more interactive and responsive application for simple or complicated web interfaces. Flex, for instance, is an open source framework. This means that Adobe builds a bunch of "stuff" into the structure, which you can utilize in your applications seemlessly. What makes Flex so special is that it makes things incredibly easy to assemble through its component based framework—far, far easier than authoring custom applications in the Flash authoring tools presented in Adobe's Flash Professional. Flex comes with these essential UI components (Text input, labels, buttons, etc.), as well as additional ones to assist in laying out content. Flex also makes it incredibly simple to create your own custom components out of these components and has robust CSS support, making it quite easy to style your applications and even consume the same CSS files that you might use elsewhere on your website. And of course, it's easily portable. Just see for your self below.
This week's plans...
Flex is on my good side this week, so I'll be spending some time testing a prototype interface with OVID's VistA connector. My next blog entry will further expose the technology that Flex has to offer, with regards to its support for many data source providers, including HTTPService, WebServices and Remote Objects.

Just for fun, here's the embedded app for you to play with. It sure looks like another Flash application, but it's built using Flex!


Resources:
Learn Flex in a week
Adobe AIR application: Tour de Flex
Featured download: LogMeIn.zip

[ICS 499] OpenLaszlo...simply wow

It looks and feels like Flash, but its not necessarily that. OpenLaszlo is a Rich Internet Application (RIA) platform targeted for building desktop-like web applications. Its component based syntax for declarative programming provides an array of supported outputs, such as Flash, and recently, DHTML. In this entry, I'll give what seems to be a very clear cut example of a simple OLZ application.

Please note that this application is a derivative of Adam Wolff's screencast for OpenLaszlo 4 programming.

Defining and porting our data...
Laszlo follows the strong standard XPath data-binding API's, as well as components to facilitate communication with the back-end. XML is used as the standard representation format of every LZX application file. Any data source that negotiates with Laszlo applications are quite capable of generating XML dynamically. Such sources may include: JavaServer Pages, Servlets, Microsoft Active Server Pages, ColdFusion pages, CGI applications, PHP scripts, etc. To keep things simple for this example, I'll provide the raw XML file for my LZX application.

Here's my XML file, called places.xml:

<places>
<place street="750 Keeaumoku St" description="Walmart store"
name="Walmart" city="Honolulu, HI 96814"/>

<place street="1450 Ala Moana Blvd" description="Ala Moana Shopping Center"
name="Ala Moana Center" city="Honolulu, HI 96814"/>

<place street="1527 Keeaumoku St" description="Makiki District Park"
name="Makiki Park" city="Honolulu, HI 96822"/>
</places>

Creating an LZX application file:
Simply create a file and name it with the extension of ".lzx", then place the following inside it:

<canvas></canvas>

There you have it, your very first Laszlo application! I know it's not very impressive, but it only gets better.

Data source retrieval in LZX app:

<canvas>
<dataset src="places.xml" name="dsPlaces">
<window title="Places" width="200" height="250">
  <simplelayout/>
  <view>
    <text>
      <datapath xpath="dsPlaces:/places/place/@name" replication="lazy"/>
    </text>
  </view>
</window>
</canvas>

In this bit of code, I introduced a data set tag referencing to my local "places.xml" file, with a name tag of "dsPlaces." Next, "window" is a simple way of creating a draggable window panel with an optional fixed width and height. The window is the container object for our data set output. By following standard XPath for XML styled notation (/places/...), we can simply list all the names of places from the xml file. Also a special note on "lazy" replication: It simply is built into the OLZ runtime and acts as a catalyst for retrieving data faster and efficiently (similar to Google Maps rendering).

<canvas>
<dataset src="places.xml" name="dsPlaces">
<window name="main" title="Places" width="200" height="250" resizable="true">
  <simplelayout/>
  <view>
    <text onmouseover="this.setBGColor(0xDDDDFF)"
             onmouseout="this.setBGColor(null)>
      <datapath xpath="dsPlaces:/places/place/@name" replication="lazy"/>
      <handler name="onClick">
        details.datapath.setFromPointer(this.datapath)
      <handler>
    </text>
  </view>
  <scrollbar/>
</window>
<window name="details" title="$path{'@name'}" x="${main.x + main.width}" width="400" height="250">
  <datapath/&gt
  <text datapath="@description" fontsize="14" width="100%" multiline="true"/>
</window>
</canvas>

Added a little OLZ syntactic sugar for Javascript to allow mouse over effects to the text data.
Created a handler for when a user clicks on a data text --the data set that was clicked on would sync with the details window.

Defining your own window class:

<canvas>
<dataset src="places.xml" name="dsPlaces">
<window name="main" title="Places" width="200" height="250" resizable="true">
<simplelayout/>
 <view>
   <text onmouseover="this.setBGColor(0xDDDDFF)"
            onmouseout="this.setBGColor(null)>
     <datapath xpath="dsPlaces:/places/place/@name" replication="lazy"/>
     <handler name="onClick">
       var details = new detailswindow(canvas);
       details.datapath.setFromPointer(this.datapath);
     <handler>
   </text>
 </view>
<scrollbar/>
</window>
<class name="detailswindow" extends="window" title="$path{'@name'}"
   x="${main.x + main.width}" width="400" height="250" closeable="true">
 <datapath/&gt
 <method name="close">
    putAway.doStart();
 </method>
 <animatorgroup name="putAway" process="sequential" duration='300' start="false">
   <animator attribute="height" to="50"/><animator attribute="y" to="-50"/>
 </animatorgroup>
 <text datapath="@description" fontsize="14" width="100%" multiline="true"/>
</class>
</canvas>

Added extensible window class, called "detailswindow."
Demonstrated a named method handler for closing a window (animator).

Marketing this app by embedding a Google map via the GoogleMaps API:

<canvas>
<href="htmlview.lzx"/>
<dataset src="places.xml" name="dsPlaces">
<window name="main" title="Places" width="200" height="250" resizable="true">
  <simplelayout/>
  <view>
    <text onmouseover="this.setBGColor(0xDDDDFF)"
             onmouseout="this.setBGColor(null)>
      <datapath xpath="dsPlaces:/places/place/@name" replication="lazy"/>
      <handler name="onClick">
        var details = new detailswindow(canvas);
        details.datapath.setFromPointer(this.datapath);
      <handler>
    </text>
  </view>
  <scrollbar/>
</window>
<class name="detailswindow" extends="window" title="$path{'@name'}"
     x="${main.x + main.width}" width="400" height="250" closeable="true">
  <datapath/&gt
  <method name="close">
    putAway.doStart();
  </method>
  <animatorgroup name="putAway" process="sequential" duration='300' start="false">
    <animator attribute="height" to="50"/><animator attribute="y" to="-50"/>
  </animatorgroup>
  <text datapath="@description" fontsize="14" width="100%" multiline="true"/>
  <handler name="ondata">
    var fullAddress = datapath.xpathQuery('@street');
    fullAddress += ", " + datapath.xpathQuery('@city');
    map.setSrc("map.html?addr=" + fullAddress);
  </hander>
  <htmlview name="map" width="100%"/>
</class>
</canvas>

Here's a sample of an htmlview.lzx:

<canvas>
<window width="600" height="600" resizable="true" oninit="this.htmlview.setSrc('http://maps.google.com')">
<html name="htmlview" xoffset="8" yoffset="25" widthoffset="-20" heightoffset="-45"
oninit="this.bringToFront()"/>
</window>
</canvas>

This displays a map beneath the selected address of interest.

So as you can see, OpenLaszlo gives new meaning to web "mashups" by inherently being able to consume all sorts of data sources. RIAs do a very good job at utilizing an intuitive standard, like XML to bring many of these hierarchical components to life. Tomorrow, I plan on testing out yet another RIA platform, which went open source back in 2007, known as Adobe's Flex.

[ICS 499] Setting up shop...

My fellow colleague and I began configuring our working server this past weekend for the OVID project. Just to reiterate from my previous post, OpenVistA Interface Domain (OVID) is a Medsphere project that interfaces a layer for communication between applications and OpenVistA data. We checked out a copy on both of our machines without a hitch. The code builds successfully on both Eclipse and Netbeans, though some of the jar classes are meant to run correctly on Java 1.5.x -- class build number should be '49'. We were planning this week to speak to two other people regarding the configuration and setup of our environment. One person being a long-time Medsphere associate, Andy Pardue, and the other a head developer of the lzVistA project, Wally Cash. Although communication was a bit limited due to the Easter weekend, we were still able to get Apache's Tomcat running, OpenLaszlo installed, and the OVID code to build.

Here are some notes for the upcoming releases of the OVID project from Medsphere. I'm excited to see that they're planning on putting out a central codebase repository. It'll be interesting to see which route they'll take as a choice of their SCM system. Hopefully if we get in contact with Andy Pardue, then we'll have some say in the matter of its open release to the public.

• Create a comprehensive set of acceptance tests. Right now, our tests are spread out and not validated. Having these tests will allow us to quickly add new classes while validating current functionality.
  
• Refactor the connection logic to make it easy to choose between RPCBroker and VistaLink. RIght now, we are reliant on VistaLink. RPCBroker would be a better choice for some platforms.
• Refactor the FM logic to enable richer queries.
• We're readying the codebase to be placed in an online repository to make it easier to collaborate.

I'll be spending some time looking over examples on developing in OpenLaszlo, along with putting up the sample Patient Dashboard on our web server. In my opinion, I think we are getting off on the right foot, and it seems that it's the perfect time to hop into this project early on during its development stages. Hopefully with enough support from the community, especially from those who may benefit from this cause, we should indeed witness a strong push into the spotlight.

[ICS 499] OVID is checking in...

In recent news, Medsphere released an open source tool set, called OpenVistA Interface Domain (OVID) which equips developers with tools for messaging with OpenVistA (OV) data. To my surprise, it had basically achieved all that I had hoped for for my BMXNet conversion to Java. This release enables developers the ability to communicate with OpenVistA data through either Remote Procedure Calls (RPC) or directly through FileMan (FM) calls by way of constructed Java bindings. Since this piece of the puzzle has finally made its way into the open source community for medical health record software systems, developers are now relieved of many cross-cutting concerns regarding support for multi-data providers, OS platform support and web-based integrations. Members of this project team have taken it to the next level by demonstrating a web application comprised of intricate web services (built in Java). Their demo release is packaged with this Web Service Definition Lanaguage (WSDL) driven application (Patient Dashboard, a.k.a. lzDashboard) made entirely in OpenLaszlo (OLZ). OLZ is an event-driven, object-oriented programming language for creating dynamic, data-driven applications. OLZ serves as one good candidate for building formal interfaces that access real patient health record databases. Since information management is a vital essence in the distribution and viewing of patient records, seeking for these resourceful tools will hold greater value and support to the community of users.
New plan...
So rather than going with my original plan of rebuilding this exact tool layer, I've decided to consume this resource by including it in a live source code management environment. Obviously, Medsphere isn't absolutely there with providing a central repository due to strict litigation and licensing. However, their open source awareness is pretty much their lively hood. Medsphere has gone through many changes recently and some of which have had an enormous impact on myself and others. They recently updated their website which now looks very much like a Web2.0 site, and are now participants of the popular social networking service, called Twitter. As for the rest, they are still considered the high-end advocates of health and technology related informatics. So, I've decided, with granted permissions from Medsphere associates (Ben Mehling) to allow me to migrate OVID to some suggested SCM (Google Projects or Github). I'm not sure about when the planning will take place, but in the mean time I'll be trying out the OVID library classes and possibly implementing my own extensions or participate in the continuation of Medsphere's OLZ application, called lzVistA. I'll elaborate more on the Rich Internet Application (RIA), lzVistA in a later post.