Showing posts with label Adobe Air. Show all posts
Showing posts with label Adobe Air. Show all posts

Sunday, February 08, 2009

Adobe Air: Getting Started

I wanted to create this post because I needed a reference to where I am at with Adobe Air/Flex. Plus Vladimir Vivien said I needed to blog about what I have been doing. So here is what I have been doing:

I have mostly been creating Flex form based applications with datagrids that rely on RESTful Web services mostly running on Groovy/Grails but I have also created an Air application that communicates with TIBCO EMS. I want to go over the TIBCO integrated Air app, I call systemStatus. Basically, systemStatus makes an HTTP request to a URL like http://host:port/systemStatus and a TIBCO HTTP Receiver listens and responds after executing some processes on the ESB. The TIBCO project includes processes that execute some simple tasks, like queries on databases, and the results are accumulated and mapped to a pre-defined schema. The response is an XML document that looks something like this:

...
<resources>
    <resource>
        <name>Production Oracle</name>
        <type>database</type>
        <vendor>Oracle</vendor>
        <status>offline</status>
        <instance>server 1</instance>
    </resource>
.
.
.
</resources>
...


The XML is pretty simple, but it does what I need it to do. It basically gives us some META data and a status for each of the resources, like databases, which are dependencies of the deployed TIBCO projects. I am going to stay away from the details pertaining to the TIBCO application but if you need some help setting up something like this, just contact me.

Next we turn to the Air/Flex application. The Air application is made up of only a few major components: <mx:HTTPService>, <mx:Panel>, <mx:TextInput>, <mx:DataGrid> and <mx:Button>. At the simplest level, the <mx:HTTPService> makes the call to the TIBCO service and the <mx:DataGrid> handles and displays the XML results. I have added the <mx:TextInput> component so the app can be configured to point to different TIBCO environments running the deployed systemStatus TIBCO application that provides the XML results. Here is the meat of the Air application:

...
<mx:HTTPService id="systemStatusService" result="r_Handler(event)" resultFormat="e4x" fault="f_Handler(event)" url="http://{serverName}" />

<mx:Panel title="systemStatus" height="100%" width="100%" paddingTop="10" paddingLeft="10" paddingRight="10">

<mx:ControlBar horizontalAlign="left">
<mx:Label text="Server:Port"/>
<mx:TextInput id="serverNameInput" enter="setServerName()"/>
</mx:ControlBar>

<mx:Label text="Systems:"/>

<mx:DataGrid id="systemDG" width="100%" height="80%"
dataProvider="{systemStatusService.lastResult.resource}"
editable="true">
<mx:columns>
<mx:DataGridColumn dataField="vendor" headerText="Vendor" editable="false"/>
<mx:DataGridColumn dataField="name" headerText="Name" editable="false"/>
<mx:DataGridColumn dataField="instance" headerText="Instance" editable="false"/>
<mx:DataGridColumn dataField="type" headerText="Type" editable="false"/>
<mx:DataGridColumn dataField="status" headerText="Status" editable="false"/>
</mx:columns>
</mx:DataGrid>

<mx:ControlBar horizontalAlign="left">
<mx:Button id="refresh"
label="Refresh"
rollOver="refresh_rollOver(event);"
rollOut="refresh_rollOut(event);"
click="refresh_clickHandler();"/>
</mx:ControlBar>

</mx:Panel>
...


Here is a screen shot of the Air application:



The refresh button will initiate another request to the TIBCO service and if anything has changed, the XML results will reflect the changes and the <mx:DataGrid> will be updated.

This is a pretty simple idea, but it demonstrates how we can take one technology and combine it with other tools and technologies to create useful applications to make life easier.

Download the code:
systemStatus.zip