|
AIR Phone Book application - Part 2 (Functions and WebService) |
||||||||
As our application starts I want to fire the request for data, so we call an init() method on initialization. Also I have turned the flex chrome off here with 'showFlexChrome="false"'.
The init() method calls an event listener that controls the window movement (Drag and drop) and makes a call to getData().
2 import mx.collections.*;
3 import mx.rpc.events.FaultEvent;
4 import mx.rpc.events.ResultEvent;
5 import mx.collections.ArrayCollection;
6
7 [Bindable]
8 private var loadedData:ArrayCollection;
9 public function init():void
10 {
11 // start the move listener
12 moveListener()
13 // get the remote data
14 getData()
15 }
The moveListener() method adds a listener to the outerCanvas element which forms the application 'border'. When this event is fired it calls moveWindow.
The getData() function calls the webservice, and specifies which method to call.
2 {
3 // mover event
4 outerCanvas.addEventListener( MouseEvent.MOUSE_DOWN, moveWindow );
5 }
6
7 public function getData():void
8 {
9 popData.getData();
10 }
11 public function moveWindow( event:MouseEvent ):void
12 {
13 var str:String = event.target.valueOf();
14
15 // if its a datagrid then don't do the move
16 if ( str.search("displayPeople") >= 1)
17 {
18 // Do nothing
19 }
20 else
21 {
22 stage.nativeWindow.startMove();
23 }
24 }
The moveWindow function also contains a check to see if the datagrid was the event target, as this was interfering with the functionality of the Datagrid. It would be interesting to see if anyone else has a more elegant solution to this, rather than a specific element check.
To populate our datagrid we need to use a data provider. In FLEX applications I usually use the RemoteObject function, but for AIR I've been using the WebService tag.
2 <mx:operation name="getData" fault="faultHandler(event)" result="resultsHandler(event)" />
3 </mx:WebService>
The final two 'chrome' functions we need are the minimize and close functions. I will detail handling custom chrome in another article.
2 {
3 stage.nativeWindow.minimize();
4 }
5
6 public function onClose():void
7 {
8 stage.nativeWindow.close();
9 }
Our WebService is referencing two functions. A results handler and a fault handler.
2 {
3 // trace(event.result)
4 displayPeople.dataProvider = popData.getData.lastResult
5 }
6
7 public function faultHandler(event:FaultEvent):void
8 {
9 Alert.show("Error: " + event.fault.faultString, "Application Error");
10 }
The resultsHandler() simply assigns the datagrids dataprovider as the result of the WebService call. By adding DataGridColumn's to the datagrid with the right naming convention our results from the returned query object will map directly to our datagrid.
The faultHandler() function simply Alerts a user to a fault event.
Lastly I have a function that assigns the image source dynamically based on the click event in the datagrid.
2 {
3 userImage.visible = true
4 userImage.source = "http://url/wld/phonebook/" + img
5 }
So that completes the Phone Book AIR application. There are one or two tweaks I'd like to make in the image handling, but otherwise its exactly the spec I had in mind.
You can view the full code here.
|
Adobe AIR Web Service Hello World test application |
||||||||
I've recently been looking at putting together some AIR applications. I've used FLEX for a few years now, and have only just come up with some useful AIR ideas, so I thought I'd build an application or two.
Usually I would use flash remoting, but I haven't spent too much time investigating how this works in AIR, so I've opted for the old school Web Service.
In the middle of my newest AIR application I stumbled upon an issue. No matter what I did I was receiving a 'HTTP Error' response from my Web Service. After stumbling around in the dark for a while tweaking code to no avail, I decided to write the most basic Web Service I could think of.
So here is 'Hello World', as a Web Service call from AIR.
Firstly create a call to your Web Service. In this case it was a local file. Point the wsdl variable at the fully qualified path to your service. I am using a coldFusion back end, so it is a CFC. This is also where you specify the fault handler and result handlers. You can add as many 'operation' methods here as you want, that way you address specific functions in your service individually.
2 <mx:operation name="sayHello" fault="faultHandler(event)" result="resultsHandler(event)" />
3 </mx:WebService>
4 <mx:Button x="10" y="10" label="Click me" click="getData()"/>
5
6</mx:WindowedApplication>
I've also added a button that will call a function to action the service call.
Next we will add the functions.
2<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3
4<mx:Script>
5 <![CDATA[
6 import mx.rpc.events.ResultEvent;
7 import mx.rpc.events.FaultEvent;
8 import mx.controls.Alert;
9
10 private function getData():void{
11 getMessages.sayHello();
12
13 }
14
15 private function faultHandler(event:FaultEvent):void
16 {
17 Alert.show("Error: " + event.fault.faultString, "Application Error");
18 }
19
20 private function resultsHandler(event:ResultEvent):void
21 {
22 Alert.show(String(event.result))
23
24 }
25
26 ]]>
27</mx:Script>
A getter function, that will actually send the Service request, a fault handler that will simply Alert the user to a fault event, and a result handler that Alerts the user to whatever message is returned from the Web Service.
The CFC
The CFC service is a simply object to return a string. Just make sure that your 'Access' is set to remote.
2
3
4 <cffunction name="sayHello" displayname="sayHello" hint="it says hello" access="remote" output="true" returntype="String">
5
6 <cfset var message = "Hello world">
7
8 <cfreturn message/>
9 </cffunction>
10
11</cfcomponent>
So we end out with:
|
Adobe releases Tour-de-Flex as Eclipse plugin |
||||||||
I was directed to the Adobe Developer Connection site by a colleague the other day, and told to go look at 'Tour-de-Flex'.
Its an AIR/Web application that hosts a whole range of example FLEX and AIR resources.
Its also available as a handy eclipse plugin, if you are that way inclined :-)
I've had a brief look around it, and it looks pretty good, very handy having code examples and themes right there on your desktop.
Also gave me some interesting trains of thought of the next AIR application I have in mind....
|
Adobe brings AIR to Linux |
||||||||
Adobe delivers AIR to Linux platforms!
Adobe finally brings the AIR SDK to a variety of linux platforms. Handy if your home development network is Ubuntu based.
Full article here:
