Shaun Mccran

My digital playground

03
A
P
R
2009

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

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.

TweetBacks
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Back to top