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().
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
import mx.controls.Alert;
import mx.collections.*;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var loadedData:ArrayCollection;
public function init():void
{
// start the move listener
moveListener()
// get the remote data
getData()
}
1import mx.controls.Alert;
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.
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
public function moveListener():void
{
// mover event
outerCanvas.addEventListener( MouseEvent.MOUSE_DOWN, moveWindow );
}
public function getData():void
{
popData.getData();
}
public function moveWindow( event:MouseEvent ):void
{
var str:String = event.target.valueOf();
// if its a datagrid then don't do the move
if ( str.search("displayPeople") >= 1)
{
// Do nothing
}
else
{
stage.nativeWindow.startMove();
}
}
1public function moveListener():void
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.
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<mx:WebService id="popData" wsdl="http://url/wld/services/phoneBook.cfc?wsdl" showBusyCursor="true" useProxy="false">
<mx:operation name="getData" fault="faultHandler(event)" result="resultsHandler(event)" />
</mx:WebService>
1<mx:WebService id="popData" wsdl="http://url/wld/services/phoneBook.cfc?wsdl" showBusyCursor="true" useProxy="false">
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.
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
public function onMinimize():void
{
stage.nativeWindow.minimize();
}
public function onClose():void
{
stage.nativeWindow.close();
}
1public function onMinimize():void
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.
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
public function resultsHandler(event:ResultEvent):void
{
// trace(event.result)
displayPeople.dataProvider = popData.getData.lastResult
}
public function faultHandler(event:FaultEvent):void
{
Alert.show("Error: " + event.fault.faultString, "Application Error");
}
1public function resultsHandler(event:ResultEvent):void
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.
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
public function changeImage(img:String):void
{
userImage.visible = true
userImage.source = "http://url/wld/phonebook/" + img
}
1public function changeImage(img:String):void
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.
