Shaun Mccran

My digital playground
 
28
J
U
L
2009

Finding the system file storage in AIR

Posted By : Shaun
Related Categories: File Interactions, RIA, AIR, ActionScript

When progamming an AIR application, you may want to make use of the applicationStorageDirectory available via the flash.filesystem package to store temporary files/folders. You can find where your system is storing these files by doing something like the following:

view plain print about
1var f:File = File.applicationStorageDirectory.resolvePath("Test.txt");
2trace(f.nativePath + ' is where my file is stored');

This will give you an absolute path to the local system file storage location. Handy for multi platform applications, as Pc and MAC based systems will use different default storage directories.

Comments Comments (0) | Print Print | Send Send | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 351 Views
 
12
J
U
N
2009

Opening a new window from a flex / AIR application

Posted By : Shaun
Related Categories: RIA, Flex, AIR

I was sure I had done this before, somewhere but I couldn't find the code anywhere. So I've knocked together a really quick and simple example.

I want to be able to open a new site in a pop up from an AIR application. To do this I need to use the 'urlRequest' function to create a url request. Then insert that into a 'navigateToURL' method, specifying that you want a new window '_new'.

Here is the complete example.

view plain print about
1<?xml version="1.0" encoding="utf-8"?>
2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3
4<mx:Script>
5    <![CDATA[
6
7     public function goToUrl(link:String):void
8     {
9        var urlRequest:URLRequest = new URLRequest('http://' + link);
10        navigateToURL(urlRequest, "_new");
11     }
12        
13    ]]>
14</mx:Script>
15    
16    <mx:Canvas x="10" y="10" width="321" height="146" backgroundColor="#FFFFFF">
17        <mx:Form x="10" y="52">
18            <mx:FormItem label="URL">
19                <mx:TextInput id="urlTxt"/>
20            </mx:FormItem>
21        </mx:Form>
22        <mx:Button x="10" y="114" label="Go to" click="goToUrl(urlTxt.text)"/>
23        <mx:Label x="10" y="10" text="New Window test" />
24    </mx:Canvas>
25    
26</mx:Application>

Works like this.

View demo.

Comments Comments (0) | Print Print | Send Send | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 105 Views
 
06
A
P
R
2009

Adding custom Chrome to your AIR application

Posted By : Shaun
Related Categories: RIA, AIR

Whilst creating my last AIR application I found that the standard 'Chrome' that is provided by the OS just didn't match the application look and feel at all.

After a little searching I found that there are a few key elements in your application that you need to change to remove the standard operating system Chrome, and stop Flex builder from replacing it with its own.

Firstly in your application-app.xml document look for the 'systemChrome' xml value. Setting this to none will disable the operating system Chrome. As we are using the 'WindowedApplication' Flex builder will automatically start using its own Chrome framework, so we need to turn that off too.

view plain print about
1<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
2<systemChrome>none</systemChrome>
3
4<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
5<transparent>true</transparent>

This is done in the WindowedApplication code, set showFlexChrome="false" and that will disable Flex from using its default Chrome.

view plain print about
1<?xml version="1.0" encoding="utf-8"?>
2<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()" showFlexChrome="false">

Now that we have completely turned it all off, we need to build our own. In this application I am using a canvas with rounded corners that is 15 pixels larger than the application canvas, to give the impression of a border all the way around. Inside that canvas I've added two controls.

view plain print about
1<mx:Label text="_" styleName="controls" toolTip="Minimize" x="173" y="-2" click="onMinimize()" />
2<mx:Label text="X" styleName="controls" toolTip="Close" x="184" y="1" click="onClose()" />

These simply replicate the functionality that the minimise and close buttons give a user on a standard window. The functions they call are:

view plain print about
1public function onMinimize():void
2     {
3         stage.nativeWindow.minimize();
4     }
5    
6     public function onClose():void
7     {
8         stage.nativeWindow.close();
9     }

And with that you fully customise the look and feel of your applications Chrome.

Comments Comments (0) | Print Print | Send Send | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 121 Views
 
03
A
P
R
2009

AIR Phone Book application - Part 3 (Full code)

Posted By : Shaun
Related Categories: RIA, Flex, Flex Remoting, AIR

Below is the full code in one run for the PhoneBook AIR application.

view plain print about
1<?xml version="1.0" encoding="utf-8"?>
2<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()"
3    height="280" width="294" horizontalAlign="center" verticalAlign="middle" showFlexChrome="false">
4
5<mx:Script>
6    <![CDATA[
7    
8     import mx.controls.Alert;
9 import mx.collections.*;
10 import mx.rpc.events.FaultEvent;
11 import mx.rpc.events.ResultEvent;
12 import mx.collections.ArrayCollection;
13
14     [Bindable]
15     private var loadedData:ArrayCollection;
16
17 public function init():void
18 {
19        // start the move listener
20        moveListener()
21     // get the remote data
22     getData()
23 }
24
25 public function moveListener():void
26 {
27        // mover event
28        outerCanvas.addEventListener( MouseEvent.MOUSE_DOWN, moveWindow );     
29 }
30
31 public function getData():void
32 {
33     popData.getData();
34 }
35
36     public function moveWindow( event:MouseEvent ):void
37     {
38        var str:String = event.target.valueOf();
39
40         // if its a datagrid then don't do the move
41         if ( str.search("displayPeople") >= 1)
42         {
43             // Do nothing
44         }
45         else
46         {
47             stage.nativeWindow.startMove();
48         }
49     }
50    
51     public function onMinimize():void
52     {
53         stage.nativeWindow.minimize();
54     }
55    
56     public function onClose():void
57     {
58         stage.nativeWindow.close();
59     }
60
61     public function resultsHandler(event:ResultEvent):void
62     {
63        // trace(event.result)
64        displayPeople.dataProvider = popData.getData.lastResult
65     }
66
67     public function faultHandler(event:FaultEvent):void
68     {
69        Alert.show("Error: " + event.fault.faultString, "Application Error");
70     }
71
72     public function changeImage(img:String):void
73     {
74         userImage.visible = true
75         userImage.source = "http://www.url.co.uk/wld/phonebook/" + img
76     }
77
78 ]]>
79</mx:Script>
80
81<mx:Style>
82    .header {color: #70c7f1;}
83    .greyHeader {color: #777879;}
84    .controls {color: #000000; font-size: 13pt;}
85</mx:Style>
86
87     <mx:WebService id="popData" wsdl="http://www.url.co.uk/wld/services/phoneBook.cfc?wsdl" showBusyCursor="true" useProxy="false">
88 <mx:operation name="getData" fault="faultHandler(event)" result="resultsHandler(event)" />
89 </mx:WebService>
90
91     <mx:Fade id="fadeOut" duration="1.0" alphaFrom="1.0" alphaTo="0.0"/>
92 <mx:Fade id="fadeIn" duration="2000" alphaFrom="0.0" alphaTo="1.0"/>
93
94    <mx:Canvas id="outerCanvas" x="0" y="0" width="220" height="240" backgroundColor="#70c7f1" borderStyle="solid" cornerRadius="25" borderThickness="0">
95    
96        <mx:Canvas id="innerCanvas" x="10" y="22" width="200" height="210" backgroundColor="#FFFFFF" borderStyle="solid" cornerRadius="25" borderThickness="0">
97            
98            <mx:Label x="10" y="10" text="White label" id="header" styleName="header" fontWeight="bold"/>
99            <mx:Label x="78" y="10" text="Dating PhoneBook" styleName="greyHeader" fontWeight="bold"/>
100            <mx:DataGrid id="displayPeople" x="10" y="32" width="180" height="108" itemClick="changeImage(displayPeople.selectedItem.IMAGE)">
101                <mx:columns>
102                    <mx:DataGridColumn headerText="Name" width="140" dataField="NAME"/>
103                    <mx:DataGridColumn headerText="No." width="40" dataField="NO"/>
104                    <mx:DataGridColumn headerText="Img" width="40" dataField="IMAGE" visible="false"/>
105                </mx:columns>
106            </mx:DataGrid>
107            <mx:Image x="138" y="150" source="@Embed(source='wldLogoTiny.png')" />
108            <mx:Image x="25" y="144" toolTip="{displayPeople.selectedItem.NAME}" id="userImage" visible="true" showEffect="{fadeIn}" />
109        </mx:Canvas>
110        <mx:Label text="_" styleName="controls" toolTip="Minimize" x="173" y="-2" click="onMinimize()" />
111        <mx:Label text="X" styleName="controls" toolTip="Close" x="184" y="1" click="onClose()" />
112
113    </mx:Canvas>
114
115</mx:WindowedApplication>

PhoneBook screen shot

Comments Comments (0) | Print Print | Send Send | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 179 Views
 
03
A
P
R
2009

AIR Phone Book application - Part 2 (Functions and WebService)

Posted By : Shaun
Related Categories: RIA, Flex, Flex Remoting, AIR

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().

view plain print about
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.

view plain print about
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.

view plain print about
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.

view plain print about
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.

view plain print about
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.

view plain print about
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.

Comments Comments (0) | Print Print | Send Send | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 175 Views
 
03
A
P
R
2009

AIR Phone Book application - Part 1 (CFC and GUI)

Posted By : Shaun
Related Categories: RIA, SQL, Flex Remoting, AIR, Coldfusion

I'm always asking what peoples phone numbers are in the office, we currently don't have any internal communications (like an intranet) so I thought I'd create a handy phone book application in AIR.

With FLEX of AIR applications I often wireframe them up with the data model in mind first. If you know what data you are going to display, and the format and delivery mechanism of that data, it can often have a large impact on the design and layout of your application.

In this instance I was just returning a simple query object of users and their phone numbers and a thumbnail image.

The CFC

My preferred server language is ColdFusion, so my service is a CFC object.

view plain print about
1<cfcomponent hint="WLD phoneBook" output="false">
2
3    <cffunction name="getData" access="remote" hint="Gets phoneBook data" returntype="query">
4    
5        <cfquery datasource="#application.dns#" name="qGetPB">
6            select     id AS ID,
7                    name AS Name,
8                    number AS No,
9                    image As Image
10            from phonebook
11            Order by name
12        </cfquery>
13
14        <cfreturn qGetPB>
15    </cffunction>
16    
17</cfcomponent>

In my example I'm using an MS SQL database, so I have included the creation script here:

view plain print about
1SET ANSI_NULLS ON
2GO
3SET QUOTED_IDENTIFIER ON
4GO
5SET ANSI_PADDING ON
6GO
7CREATE TABLE [dbo].[phonebook](
8    [id] [int] IDENTITY(1,1) NOT NULL,
9    [name] [varchar](20) NULL DEFAULT (NULL),
10    [number] [int] NULL DEFAULT (NULL),
11    [image] [varchar](55) NULL DEFAULT (NULL)
12) ON [PRIMARY]
13
14GO
15SET ANSI_PADDING OFF

Now that we know what the data will look like we can build the GUI front end.

My display layer is going to be a canvas, with another canvas inside it, to create a bordered effect.

Then I have a DataGrid, with a click event that will call an AS function. This will control the displaying of an image that corresponds to the user being clicked. Its always nice to see who you want to call!

view plain print about
1<mx:Fade id="fadeOut" duration="1.0" alphaFrom="1.0" alphaTo="0.0"/>
2<mx:Fade id="fadeIn" duration="2000" alphaFrom="0.0" alphaTo="1.0"/>
3    <mx:Canvas id="outerCanvas" x="0" y="0" width="220" height="240" backgroundColor="#70c7f1" borderStyle="solid" cornerRadius="25" borderThickness="0">
4    
5        <mx:Canvas id="innerCanvas" x="10" y="22" width="200" height="210" backgroundColor="#FFFFFF" borderStyle="solid" cornerRadius="25" borderThickness="0">
6            
7            <mx:Label x="10" y="10" text="White label" id="header" styleName="header" fontWeight="bold"/>
8            <mx:Label x="78" y="10" text="Dating PhoneBook" styleName="greyHeader" fontWeight="bold"/>
9            <mx:DataGrid id="displayPeople" x="10" y="32" width="180" height="108" itemClick="changeImage(displayPeople.selectedItem.IMAGE)">
10                <mx:columns>
11                    <mx:DataGridColumn headerText="Name" width="140" dataField="NAME"/>
12                    <mx:DataGridColumn headerText="No." width="40" dataField="NO"/>
13                    <mx:DataGridColumn headerText="Img" width="40" dataField="IMAGE" visible="false"/>
14                </mx:columns>
15            </mx:DataGrid>
16            <mx:Image x="138" y="150" source="@Embed(source='wldLogoTiny.png')" />
17            <mx:Image x="25" y="144" toolTip="{displayPeople.selectedItem.NAME}" id="userImage" visible="true" showEffect="{fadeIn}" />
18        </mx:Canvas>
19        <mx:Label text="_" styleName="controls" toolTip="Minimize" x="173" y="-2" click="onMinimize()" />
20        <mx:Label text="X" styleName="controls" toolTip="Close" x="184" y="1" click="onClose()" />
21
22    </mx:Canvas>

My 'userImage'has a showEffect attribute, that uses an image fadeIn method. It fades in the first image called, but not any others, I've had a play around with this, and I can't get it to fade in subsequent images, so if anyone has any ideas let me know!

Lastly I have added some chrome controls, as I will be removing the standard chrome, and building my own.

Now, on to the functions.

Comments Comments (0) | Print Print | Send Send | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 185 Views
 
02
A
P
R
2009

Adobe AIR Web Service Hello World test application

Posted By : Shaun
Related Categories: RIA, Flex, Flex Remoting, AIR, Coldfusion

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.

view plain print about
1<mx:WebService id="getMessages" wsdl="http://192.168.XX.XXX/root/services/message.cfc?wsdl" showBusyCursor="true">
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.

view plain print about
1<?xml version="1.0" encoding="utf-8"?>
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.

view plain print about
1<cfcomponent displayname="message">
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:

Comments Comments (0) | Print Print | Send Send | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 190 Views
 
01
A
P
R
2009

Adobe releases Tour-de-Flex as Eclipse plugin

Posted By : Shaun
Related Categories: Eclipse, RIA, Flex, AIR

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....

Comments Comments (0) | Print Print | Send Send | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 169 Views

More Entries


Follow me on



Search

Tags
This will be shown to users with no Flash or Javascript.
Subscribe
Enter your email address to subscribe to this blog.


Archives By Subject
  Accessibility (8)
  ActionScript (2)
  AIR (10)
  AJAX (14)
  Android (8)
  Android Applications (7)
  Best practices (31)
  BlogCFC (4)
  CfScript (6)
  Charity (1)
  Coldfusion (79)
  ColdFusion Server Admin (2)
  CSS (15)
  Database admin (3)
  Eclipse (7)
  FeedBurner (1)
  File Interactions (8)
  FireBug (2)
  Firefox (8)
  Flash (3)
  Flex (19)
  Flex Remoting (18)
  Frameworks (8)
  FuseBox (4)
  Gadgets (7)
  General Interest (41)
  Google (7)
  HTC (6)
  HTML (24)
  Internet Explorer (6)
  Isapi rewrite (4)
  Javascript (38)
  JQuery (21)
  Json (9)
  Mapping (2)
  Microsoft (3)
  Mobile (10)
  Photography (2)
  Photoshop (2)
  Project Management (2)
  Recommended Apps (15)
  RIA (45)
  RSS (2)
  Scalability (2)
  Scotch on the Rocks/Road (3)
  Security (12)
  SEO Methodologies (3)
  Server management (3)
  Session management (5)
  Social (21)
  Software Architecture (21)
  SQL (21)
  Structs (1)
  Thailand - Jan 09 (1)
  varScoper (1)
  Web technologies (31)
  Windows (5)
  WordPress (3)
  XBox360 (8)
  XML (2)

This content is purely my opinon, any offence or errors are unintentional, please comment your views appropriately
Site Credits
Aggregated by ColdfusionBloggers.org Powered by Coldfusion

Technology & Science Blogs - BlogCatalog Blog Directory Blog Directory & Search engine