2008-Flex Air Cookbook Feb2008

8/10/2019 2008-Flex Air Cookbook Feb2008

1/77

Code Sample and Demos for User Group Tour

BY: Adobe Technical Evangelism

Synposis:

We (the Adobe Technical Evangelists) want to hand over all these code samples toeveryone who took the time to come to the user group. All of these code samples work

with Flex Builder 3, Beta 3. The code samples here are the product of many Adobeemployees who want to encourage you, the reader, to learn about the new features of Flex

Builder 3.

These code samples are updated on a frequent basis. If you want to be sure you get thelatest, please email dnickull at adobe dot com. If you want to contribute to this commity

cookbook, please also consider submitting your code samples.

License:

You are welcome to take these samples and do whatever you want with them. You maytake them and claim them as your own, modify, distribute them as you seem fit. The sole

purpose of this mini Cookbook is to allow others to easily learn about Flex.

To build them, it is highly recommended to download Flex Builder 3 from Adobe labs(http://labs.adobe.com). The instructions for installation are included with the

documentation.

To use the samples, you can cut and paste from this document. Note some of theformatting here looks very ugly however when you cut and paste it should straighten out

again.

There is a set of demonstration slides that accompany this Cookbook. They are availablefor download via SlideShare at:

(TODO : ENTER URL)


2/77

Table of Contents:

Code Sample and Demos for User Group Tour................................................................1Synposis:.....................................................................................................................1

License:.......................................................................................................................1

Demos from Slide Deck...............................................................................................3Working with Video Cameras......................................................................................3Building an AIR Browser ............................................................................................4

Project 3 Transparent, non rectangular AIR app........................................................5CSS, Skinning, Styles (SLIDE 13)...............................................................................8

CSS Yahoo Skin........................................................................................................10Flex Styles Explorer ..................................................................................................29

Pan and Zoom tools, high fidelity (Slide 14).............................................................. 30Layout Anchors (Slide 15)......................................................................................... 30

Working with HDTV Videos (Use same project as Adobe)........................................31Advanced Data Grid (SLIDE 17)...............................................................................32

Advanced Data Grid: .............................................................................................32Sorting by multiple columns ..................................................................................32

Styling rows and columns...................................................................................... 32Displaying hierarchical and grouped data...............................................................33

Collect multiple columns under a single column heading.......................................33Overview: Charting Enhancements............................................................................35

Conditional Visual Charting Elements: ......................................................................37Region Selection Behavior ........................................................................................40

Bar Chart:..................................................................................................................42Multiple Axis on one Chart........................................................................................44

Web Services Client From Scratch (Slide 18) ............................................................46

Flex AJAX Bridge Wizard (Slide 18) .....................................................................50E4X Demo - Working with XML ..............................................................................53Building an Simple XML/Text Editor........................................................................58

Google RSS Feed Reader ..........................................................................................63Working with Sound..................................................................................................68

Building a Countdown Timer AIR Application..........................................................70How to install and run Adobe LiveCycle Data Services ES 2.5.1 on Mac OS X.........75


3/77

Demos from Slide Deck

Working with Video Cameras

SLIDE 8: This is a simple demo to show off Flex to people who are not yet

familiar with it. When demonstrating, spend some time to go through the

basic layout and perspectives of Flex Builder so the audience knows what

they are looking at. Be sure to specify that Flex developers do NOT need to

buy anything (free SDKs).

This is the first project cut and paste into a new flex project and it will

build. Note that it only works on systems with a camera attached.

importflash.media.Camera;

pu licv rmyCamera:Camera;

pu licfunctionstartCam():void{

myCamera = Camera.getCamera();

myVid.attachCamera(myCamera);

myVid.autoPlay;}

]]>

Screenshot:


4/77

Building an AIR Browser

Show AIR by building browser. This browser is a standalone browser. To demonstrate

it, also enter a non- English website like www.yahoo.jpto show how it supports Unicodein the html. Also point out that webkit, the html engine behind AIR, supports CSS and

AJAX right out of the box by pointing it at a site likge igoogle.

Screenshot:


5/77

Project 3 Transparent, non rectangular AIR app.

To show there are no limits in having to have applications look rectangular, point out that

custom chrome means no chrome. To make this project, you will also need a GIF imagewith an alpha transparency. I used an apple based on a blog comment challenging me to

do such. The project source is below.

Screenshot:


6/77

Source:

Application{

/*make app window transparent*/

background-color:"";

background-image:"";

padding: 0px;

margin-top: 0;

margin-right: 0;

margin-bottom: 0;

margin-left: 0;

}

importflash.display.Bitmap;

importmx.events.CloseEvent;

publicfunctioninit():void{

// Move the app when the panelis dragged

mainPanel.addEventListener( MouseEvent.MOUSE_DOWN, startMove ); }

publicfunctions tartMove(event:MouseEvent):void{

stage.nativeWindow.startMove();

}

]]>

Note that you will have to also modify the -app.xml file in the //src

directory. The file below can be used but you may have to change the name of the app.

-app.xml file:

AIR3-AppleShapedApplication

AIR3_AppleShapedApplication


7/77

Duane Nickulls Apple Shaped Application

v1

[This value will be overwritten by Flex Builder in the output

app.xml]

Main Window Title

none

true


8/77

-->

AIR3_AppleShapedApplication

CSS, Skinning, Styles (SLIDE 13)

Screenshot:


9/77

1. Open TOUR_flexdemo_inlineToCss (Code is below)

2. Show different buttons in source view (styling is done inline)3. Show in same in Flex properties panel

4. Select one of the buttons with the inline style declarations5. Click "convert to css" in Properties panel

6. Make new CSS file7. Explain types

All components: Will give this style to all componentsAll components with style name:Will give this style to all components with

style nameSpecific component:Will give this style to a specific component for instance all

buttons will get this styleSpecific component with style name: For instance: give all buttons with this

stylename this style.8. Select last option

9. Give it a name10. Change give non-styled button this style

11. Show generated CSS12. Note that when the generated CSS is shown in Design view, you can pick any

component to highlight to preview. To do this, just click on the hyperlink as shown

below.


10/77

Code:

CSS Yahoo Skin

This demo shows a Flex demo application using the Yahoo CSS stylesheet. The code isbelow.


11/77

1. Open up TOUR_flexdemo_css project

2. Open flexdemo_css.mxml3. Show in design view + build

4. Comment style tag in source view to show/explain what it happening (we are using

Yahoo's open source Flex skin)5. Open yflexskin.css in Design view6. Select style in dropdown. Button and HScrollbar are good to show

7. Show Flex Properties panel (Style Skin buttons)10. Show edit scale grid (9 slices scaling)

11. IMPORTANT POINT: people who work on large projects with both Flex/Flash andHTML components need to be able to control styles of multiple technologies via one CSS

stylesheet. The support within Flex for CSS makes this easy. This means larger siteswill be easier to maintain as styles change.

Notes:

Note that this project actually has two *.mxml files. Show how you link the two files and

how the longer DemoApp.mxml is referenced via the flexdemo_css.mxml files using justone line of code:

Screenshot:

Code:

There are three files. Create a new Flex Project first. All should be placed under the//src folder.


12/77

DemoApp.mxml:

[Embed(source="misc.swf")]

[Bindable]publicvarLogo:Class;

]]>

File

Edit

View

Editable


13/77

1st

2nd

3rd

Lorem

Ipsum

Dolor

Link Bar

Lorem Ipsum


14/77


15/77

flexdemo_css.mxml:

yflexskin.css

/*

Copyright (c) 2007 Yahoo! Inc. All rights reserved.

The copyrights embodied in the content of this file are licensed under the BSD (revised) open

source license

*/

/*

//------------------------------

// global

//------------------------------

*/

global

{

color: #4d4d4d;

fontFamily: Arial;

fontSize: 12px;themeColor: #99CDFF;

}

/*

//------------------------------

// AccordionHeader

//------------------------------


16/77

*/

AccordionHeader

{

disabledSkin: Embed(source="yflexskin.swf",

symbol="AccordionHeader_disabledSkin" );

downSkin: Embed(source="yflexskin.swf",symbol="AccordionHeader_downSkin");

overSkin: Embed(source="yflexskin.swf",symbol="AccordionHeader_overSkin" );selectedDisabledSkin: Embed(source="yflexskin.swf",

symbol="AccordionHeader_disabledSkin" );selectedDownSkin: Embed(source="yflexskin.swf",

symbol="AccordionHeader_downSkin");

selectedOverSkin: Embed(source="yflexskin.swf",

symbol="AccordionHeader_overSkin");

selectedUpSkin: Embed(source="yflexskin.swf",

symbol="AccordionHeader_selectedSkin");

upSkin: Embed(source="yflexskin.swf",symbol="AccordionHeader_upSkin");

}

/*//------------------------------

// Application

//------------------------------

*/

Application

{

backgroundImage: Embed(source="yflexskin.swf",symbol="BackgroundImage");

}

/*

//------------------------------

// Button//------------------------------

*/

Button

{

disabledSkin: Embed(source="yflexskin.swf",symbol="Button_disabledSkin");

downSkin: Embed(source="yflexskin.swf",symbol="Button_downSkin");

overSkin: Embed(source="yflexskin.swf",symbol="Button_overSkin");

upSkin: Embed(source="yflexskin.swf",symbol="Button_upSkin");

paddingTop: 2;

}

/*//------------------------------

// primaryButton

//------------------------------

*/

.primaryButton

{

color: #ffffff;

textRollOverColor: #ffffff;


17/77

textSelectedColor: #ffffff;

disabledSkin: Embed(source="yflexskin.swf",symbol="primaryButton_disabledSkin" );

downSkin: Embed(source="yflexskin.swf",symbol="primaryButton_downSkin" );

overSkin: Embed(source="yflexskin.swf",symbol="primaryButton_overSkin" );

upSkin: Embed(source="yflexskin.swf",symbol="primaryButton_upSkin");

paddingTop: 2;

}

/*//------------------------------

// ButtonBar

//------------------------------

*/

ButtonBar

{

buttonStyleName: "buttonBarButton";

firstButtonStyleName: "firstButtonBarButton" ;

lastButtonStyleName: "lastButtonBarButton";}

ToggleButtonBar

{

buttonStyleName: "buttonBarButton";

firstButtonStyleName: "firstButtonBarButton" ;

lastButtonStyleName: "lastButtonBarButton";

}

/*

//------------------------------

// ButtonBarButtons//------------------------------

*/

.firstButtonBarButton

{

disabledSkin: Embed(source="yflexskin.swf",symbol="ButtonBar_firstDisabledSkin" );

downSkin: Embed(source="yflexskin.swf",symbol="ButtonBar_firstDownSkin");

overSkin: Embed(source="yflexskin.swf",symbol="ButtonBar_firstOverSkin");

selectedDisabledSkin: Embed(source="yflexskin.swf",

symbol="ButtonBar_firstSelectedDisabledSkin" );

selectedDownSkin: Embed(source="yflexskin.swf",

symbol="ButtonBar_firstSelectedUpSkin" );selectedOverSkin: Embed(source="yflexskin.swf",

symbol="ButtonBar_firstSelectedUpSkin" );


symbol="ButtonBar_firstSelectedUpSkin" );

upSkin: Embed(source="yflexskin.swf",symbol="ButtonBar_firstUpSkin" );

}

.buttonBarButton


18/77

{


symbol="ButtonBar_buttonDisabledSkin" );

downSkin: Embed(source="yflexskin.swf",symbol="ButtonBar_buttonDownSkin" );

overSkin: Embed(source="yflexskin.swf",symbol="ButtonBar_buttonOverSkin");


symbol="ButtonBar_buttonSelectedDisabledSkin" );selectedDownSkin: Embed(source="yflexskin.swf",

symbol="ButtonBar_buttonSelectedUpSkin" );selectedOverSkin: Embed(source="yflexskin.swf",

symbol="ButtonBar_buttonSelectedUpSkin" );


symbol="ButtonBar_buttonSelectedUpSkin" );

upSkin: Embed(source="yflexskin.swf",symbol="ButtonBar_buttonUpSkin" );

}

.lastButtonBarButton

{

disabledSkin: Embed(source="yflexskin.swf",symbol="ButtonBar_lastDisabledSkin" );downSkin: Embed(source="yflexskin.swf",symbol="ButtonBar_lastDownSkin" );

overSkin: Embed(source="yflexskin.swf",symbol="ButtonBar_lastOverSkin" );


symbol="ButtonBar_lastSelectedDisabledSkin" );

selectedDownSkin: Embed(source="yflexskin.swf",

symbol="ButtonBar_lastSelectedUpSkin" );

selectedOverSkin: Embed(source="yflexskin.swf",




upSkin: Embed(source="yflexskin.swf",symbol="ButtonBar_lastUpSkin" );

}

/*

//------------------------------

// CheckBox

//------------------------------

*/

CheckBox

{

disabledIcon: Embed(source="yflexskin.swf",symbol="CheckBox_disabledIcon");

downIcon: Embed(source="yflexskin.swf",symbol="CheckBox_downIcon");

overIcon: Embed(source="yflexskin.swf",symbol="CheckBox_overIcon");

selectedDisabledIcon: Embed(source="yflexskin.swf",symbol="CheckBox_selectedDisabledIcon" );

selectedDownIcon: Embed(source="yflexskin.swf",

symbol="CheckBox_selectedDownIcon");

selectedOverIcon: Embed(source="yflexskin.swf",

symbol="CheckBox_selectedOverIcon");

selectedUpIcon: Embed(source="yflexskin.swf",symbol="CheckBox_selectedUpIcon");

upIcon: Embed(source="yflexskin.swf",symbol="CheckBox_upIcon");

}


19/77

/*

//------------------------------

// ColorPicker

//------------------------------

*/

ColorPicker{

disabledSkin: Embed(source="yflexskin.swf",symbol="ColorPicker_disabledSkin");downSkin: Embed(source="yflexskin.swf",symbol="ColorPicker_downSkin");

overSkin: Embed(source="yflexskin.swf",symbol="ColorPicker_overSkin");

upSkin: Embed(source="yflexskin.swf",symbol="ColorPicker_upSkin");

}

/*

//------------------------------

// ComboBox

//------------------------------

*/ComboBox

{


symbol="ComboBoxArrow_disabledSkin" );

downSkin: Embed(source="yflexskin.swf",symbol="ComboBoxArrow_downSkin" );

editableDisabledSkin: Embed(source="yflexskin.swf",

symbol="ComboBoxArrow_editableDisabledSkin" );

editableDownSkin: Embed(source="yflexskin.swf",

symbol="ComboBoxArrow_editableDownSkin" );

editableOverSkin: Embed(source="yflexskin.swf",

symbol="ComboBoxArrow_editableOverSkin" );

editableUpSkin: Embed(source="yflexskin.swf",symbol="ComboBoxArrow_editableUpSkin" );

overSkin: Embed(source="yflexskin.swf",symbol="ComboBoxArrow_overSkin");

upSkin: Embed(source="yflexskin.swf",symbol="ComboBoxArrow_upSkin" );

dropDownStyleName: "myComboBoxDropDowns";

}

.myComboBoxDropDowns{

cornerRadius: 4;

}

/*

//------------------------------// CursorManager

//------------------------------

*/

CursorManager

{

busyCursor: Embed(source="yflexskin.swf",symbol="BusyCursor");

busyCursorBackground: Embed(source="yflexskin.swf",symbol="BusyCursor");

}


20/77

/*

//------------------------------

// DataGrid

//------------------------------

*/

DataGrid{

columnDropIndicatorSkin : Embed(source="yflexskin.swf",

symbol="DataGrid_columnDropIndicatorSkin" );

columnResizeSkin: Embed(source="yflexskin.swf",

symbol="DataGrid_columnResizeSkin" );

headerSeparatorSkin: Embed(source="yflexskin.swf",

symbol="DataGrid_headerSeparatorSkin");

sortArrowSkin: Embed(source="yflexskin.swf",symbol="DataGrid_sortArrowSkin");

stretchCursor: Embed(source="yflexskin.swf",symbol="DataGrid_stretchCursor");

}

/*

//------------------------------

// DateChooser

//------------------------------

*/

DateChooser

{

nextMonthDisabledSkin : Embed(source="yflexskin.swf",

symbol="DateChooser_nextMonthDisabledSkin" );

nextMonthDownSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_nextMonthDownSkin" );

nextMonthOverSkin: Embed(source="yflexskin.swf",symbol="DateChooser_nextMonthOverSkin" );

nextMonthUpSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_nextMonthUpSkin" );

prevMonthDisabledSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_prevMonthDisabledSkin" );

prevMonthDownSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_prevMonthDownSkin" );

prevMonthOverSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_prevMonthOverSkin" );

prevMonthUpSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_prevMonthUpSkin" );

nextYearDisabledSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_nextYearDisabledSkin" );

nextYearDownSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_nextYearDownSkin" );

nextYearOverSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_nextYearOverSkin");

nextYearUpSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_nextYearUpSkin" );


21/77

prevYearDisabledSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_prevYearDisabledSkin" );

prevYearDownSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_prevYearDownSkin" );

prevYearOverSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_prevYearOverSkin");

prevYearUpSkin: Embed(source="yflexskin.swf",symbol="DateChooser_prevYearUpSkin");

todayIndicatorSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_todayIndicatorSkin" );

rollOverIndicatorSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_rollOverIndicatorSkin" );

selectionIndicatorSkin: Embed(source="yflexskin.swf",

symbol="DateChooser_selectionIndicatorSkin" );

}

/*

//------------------------------

// DateField

//------------------------------

*/

DateField

{

disabledSkin: Embed(source="yflexskin.swf",symbol="DateField_disabledSkin");

downSkin: Embed(source="yflexskin.swf",symbol="DateField_downSkin");

overSkin: Embed(source="yflexskin.swf",symbol="DateField_overSkin");

upSkin: Embed(source="yflexskin.swf",symbol="DateField_upSkin");

}

/*

//------------------------------

// DividedBox

//------------------------------

*/

DividedBox

{

dividerSkin: Embed(source="yflexskin.swf",symbol="DividedBox_dividerSkin" );

horizontalCursor:

Embed(source="yflexskin.swf",symbol="DividedBox_horizontalCursor" );

verticalCursor: Embed(source="yflexskin.swf",symbol="DividedBox_verticalCursor" );}

/*

//------------------------------

// DragManager

//------------------------------

*/

DragManager


22/77

{

copyCursor: Embed(source="yflexskin.swf",symbol="DragManager_copyCursor");

defaultDragImageSkin: Embed(source="yflexskin.swf",

symbol="DragManager_defaultDragImageSkin");

linkCursor: Embed(source="yflexskin.swf",symbol="DragManager_linkCursor");moveCursor: Embed(source="yflexskin.swf",symbol="DragManager_moveCursor");

rejectCursor: Embed(source="yflexskin.swf",symbol="DragManager_rejectCursor");}

/*

//------------------------------

// FormItem

//------------------------------

*/

FormItem

{

indicatorSkin: Embed(source="yflexskin.swf",symbol="FormItem_indicatorSkin");}

/*

//------------------------------

// Image

//------------------------------

*/

Image

{

brokenImageSkin: Embed(source="yflexskin.swf",symbol="Loader_brokenImageSkin");

}

/*

//------------------------------

// LinkButton

//------------------------------

*/

LinkButton

{

disabledSkin: Embed(source="yflexskin.swf",symbol="LinkButton_disabledSkin");

downSkin: Embed(source="yflexskin.swf",symbol="LinkButton_downSkin");

overSkin: Embed(source="yflexskin.swf",symbol="LinkButton_overSkin");upSkin: Embed(source="yflexskin.swf",symbol="LinkButton_upSkin");

}

/*

//------------------------------

// Loader

//------------------------------

*/


23/77

Loader

{

brokenImageSkin: Embed(source="yflexskin.swf",symbol="Loader_brokenImageSkin");

}

/*//------------------------------

// Menu//------------------------------

*/

Menu

{

branchIcon: Embed(source="yflexskin.swf",symbol="Menu_branchIcon");

branchDisabledIcon:

Embed(source="yflexskin.swf",symbol="Menu_branchDisabledIcon");

checkIcon: Embed(source="yflexskin.swf",symbol="Menu_checkIcon");

checkDisabledIcon:

Embed(source="yflexskin.swf",symbol="Menu_checkDisabledIcon");radioIcon: Embed(source="yflexskin.swf",symbol="Menu_radioIcon");

radioDisabledIcon: Embed(source="yflexskin.swf",symbol="Menu_radioDisabledIcon");

separatorSkin: Embed(source="yflexskin.swf",symbol="Menu_separatorSkin");

}

/*

//------------------------------

// MenuBar

//------------------------------

*/

MenuBar

{

backgroundSkin: Embed(source="yflexskin.swf",symbol="MenuBar_backgroundSkin" );

itemUpSkin: Embed(source="yflexskin.swf",symbol="MenuBar_itemUpSkin");

itemOverSkin: Embed(source="yflexskin.swf",symbol="MenuBar_itemOverSkin");

itemDownSkin: Embed(source="yflexskin.swf",symbol="MenuBar_itemDownSkin" );

}

/*

//------------------------------

// NumericStepper

//------------------------------*/

NumericStepper

{

downArrowDisabledSkin: Embed(source="yflexskin.swf",

symbol="NumericStepperDownArrow_disabledSkin" );

downArrowDownSkin: Embed(source="yflexskin.swf",

symbol="NumericStepperDownArrow_downSkin" );


24/77

downArrowOverSkin: Embed(source="yflexskin.swf",

symbol="NumericStepperDownArrow_overSkin" );

downArrowUpSkin: Embed(source="yflexskin.swf",

symbol="NumericStepperDownArrow_upSkin" );

upArrowDisabledSkin: Embed(source="yflexskin.swf",

symbol="NumericStepperUpArrow_disabledSkin" );

upArrowDownSkin: Embed(source="yflexskin.swf",symbol="NumericStepperUpArrow_downSkin" );

upArrowOverSkin: Embed(source="yflexskin.swf",symbol="NumericStepperUpArrow_overSkin" );

upArrowUpSkin: Embed(source="yflexskin.swf",

symbol="NumericStepperUpArrow_upSkin" );

}

/*

//------------------------------

// Panel

//------------------------------*/

Panel

{

closeButtonDisabledSkin:

Embed(source="yflexskin.swf",symbol="Panel_closeButtonDisabledSkin" );

closeButtonDownSkin:

Embed(source="yflexskin.swf",symbol="Panel_closeButtonDownSkin" );

closeButtonOverSkin:

Embed(source="yflexskin.swf",symbol="Panel_closeButtonOverSkin" );

closeButtonUpSkin:

Embed(source="yflexskin.swf",symbol="Panel_closeButtonUpSkin" );

borderSkin: Embed(source="yflexskin.swf",symbol="Panel_borderSkin");titleBackgroundSkin: Embed(source="yflexskin.swf",

symbol="Panel_titleBackgroundSkin");

borderThicknessLeft: 11;

borderThicknessRight: 11;

borderThicknessTop: 2;

borderThicknessBottom: 12;

headerHeight: 32;

titleStyleName: "panelTitle";

}

.panelTitle{

fontSize: 16;fontWeight:bold;

}

/*

//------------------------------

// Panel ControlBar

//------------------------------

*/


25/77

ControlBar

{

borderSkin: Embed(source="yflexskin.swf",

symbol="Panel_controlBarBackgroundSkin" );

}

/*//------------------------------

// PopUpButton//------------------------------

*/

PopUpButton

{

disabledSkin: Embed(source="yflexskin.swf",symbol="PopUpButton_disabledSkin" );

downSkin: Embed(source="yflexskin.swf",symbol="PopUpButton_downLeftSkin" );

overSkin: Embed(source="yflexskin.swf",symbol="PopUpButton_overLeftSkin" );

popUpDownSkin: Embed(source="yflexskin.swf",

symbol="PopUpButton_downRightSkin");

popUpOverSkin: Embed(source="yflexskin.swf",symbol="PopUpButton_overRightSkin");

upSkin: Embed(source="yflexskin.swf",symbol="PopUpButton_upSkin");

}

/*

//------------------------------

// ProgressBar

//------------------------------

*/

ProgressBar

{

barSkin: Embed(source="yflexskin.swf",symbol="ProgressBarSkin");

indeterminateSkin: Embed(source="yflexskin.swf",

symbol="ProgressIndeterminateSkin");

trackSkin: Embed(source="yflexskin.swf",symbol="ProgressTrackSkin");

}

/*

//------------------------------

// RadioButton

//------------------------------*/

RadioButton

{

disabledIcon: Embed(source="yflexskin.swf",symbol="RadioButton_disabledIcon" );

downIcon: Embed(source="yflexskin.swf",symbol="RadioButton_downIcon");

overIcon: Embed(source="yflexskin.swf",symbol="RadioButton_overIcon");

selectedDisabledIcon: Embed(source="yflexskin.swf",


26/77

symbol="RadioButtonSelected_disabledIcon" );

selectedDownIcon: Embed(source="yflexskin.swf",

symbol="RadioButtonSelected_downIcon" );

selectedOverIcon: Embed(source="yflexskin.swf",

symbol="RadioButtonSelected_overIcon" );

selectedUpIcon: Embed(source="yflexskin.swf",

symbol="RadioButtonSelected_upIcon");upIcon: Embed(source="yflexskin.swf",symbol="RadioButton_upIcon");

}

/*

//------------------------------

// HorizontalScrollBar

//------------------------------

*/

HScrollBar

{


symbol="HScrollArrowRight_disabledSkin" );


symbol="HScrollArrowRight_downSkin" );


symbol="HScrollArrowRight_overSkin" );

downArrowUpSkin: Embed(source="yflexskin.swf",

symbol="HScrollArrowRight_upSkin" );

thumbDownSkin: Embed(source="yflexskin.swf",symbol="HScrollThumb_downSkin");

thumbIcon: Embed(source="yflexskin.swf",symbol="HScrollBar_thumbIcon");

thumbOverSkin: Embed(source="yflexskin.swf",symbol="HScrollThumb_overSkin");

thumbUpSkin: Embed(source="yflexskin.swf",symbol="HScrollThumb_upSkin");trackSkin: Embed(source="yflexskin.swf",symbol="HScrollTrack_Skin");


symbol="HScrollArrowLeft_disabledSkin" );

upArrowDownSkin: Embed(source="yflexskin.swf",

symbol="HScrollArrowLeft_downSkin");

upArrowOverSkin: Embed(source="yflexskin.swf",

symbol="HScrollArrowLeft_overSkin");

upArrowUpSkin: Embed(source="yflexskin.swf",symbol="HScrollArrowLeft_upSkin");

}

/*

//------------------------------

// VerticalScrollBar

//------------------------------

*/

VScrollBar

{


27/77


symbol="ScrollArrowDown_disabledSkin" );


symbol="ScrollArrowDown_downSkin");


symbol="ScrollArrowDown_overSkin");

downArrowUpSkin: Embed(source="yflexskin.swf",symbol="ScrollArrowDown_upSkin");

thumbDownSkin: Embed(source="yflexskin.swf",symbol="ScrollThumb_downSkin" );thumbIcon: Embed(source="yflexskin.swf",symbol="ScrollBar_thumbIcon");

thumbOverSkin: Embed(source="yflexskin.swf",symbol="ScrollThumb_overSkin");

thumbUpSkin: Embed(source="yflexskin.swf",symbol="ScrollThumb_upSkin");

trackSkin: Embed(source="yflexskin.swf",symbol="ScrollTrack_Skin");


symbol="ScrollArrowUp_disabledSkin");

upArrowDownSkin: Embed(source="yflexskin.swf",

symbol="ScrollArrowUp_downSkin");

upArrowOverSkin: Embed(source="yflexskin.swf",

symbol="ScrollArrowUp_overSkin");upArrowUpSkin: Embed(source="yflexskin.swf",symbol="ScrollArrowUp_upSkin");

}

/*

//------------------------------

// Slider

//------------------------------

*/

Slider

{

thumbDisabledSkin: Embed(source="yflexskin.swf",symbol="SliderThumb_disabledSkin" );

thumbDownSkin: Embed(source="yflexskin.swf",symbol="SliderThumb_downSkin" );

thumbOverSkin: Embed(source="yflexskin.swf",symbol="SliderThumb_overSkin");

thumbUpSkin: Embed(source="yflexskin.swf",symbol="SliderThumb_upSkin");

trackHighlightSkin : Embed(source="yflexskin.swf",symbol="SliderHighlight_Skin");

trackSkin: Embed(source="yflexskin.swf",symbol="SliderTrack_Skin");

thumbOffset: 8;

}

HSlider

{

thumbDisabledSkin: Embed(source="yflexskin.swf",symbol="SliderThumb_disabledSkin" );



thumbUpSkin: Embed(source="yflexskin.swf",symbol="SliderThumb_upSkin");

trackHighlightSkin : Embed(source="yflexskin.swf",symbol="SliderHighlight_Skin");

trackSkin: Embed(source="yflexskin.swf",symbol="SliderTrack_Skin");

}


28/77

VSlider

{

thumbDisabledSkin: Embed(source="yflexskin.swf",

symbol="SliderThumb_disabledSkin" );



thumbUpSkin: Embed(source="yflexskin.swf",symbol="SliderThumb_upSkin");trackHighlightSkin : Embed(source="yflexskin.swf",symbol="SliderHighlight_Skin");

trackSkin: Embed(source="yflexskin.swf",symbol="SliderTrack_Skin");}

/*

//------------------------------

// Tab

//------------------------------

*/

TabBar

{

firstButtonStyleName: "tabStyle";tabStyleName: "tabStyle";

lastButtonStyleName: "tabStyle";

}

.tabStyle{

disabledSkin: Embed(source="yflexskin.swf",symbol="Tab_disabledSkin");

downSkin: Embed(source="yflexskin.swf",symbol="Tab_downSkin");

overSkin: Embed(source="yflexskin.swf",symbol="Tab_overSkin");


symbol="TabSelected_disabledSkin");

selectedDownSkin: Embed(source="yflexskin.swf",symbol="TabSelected_upSkin");

selectedOverSkin: Embed(source="yflexskin.swf",symbol="TabSelected_upSkin");selectedUpSkin: Embed(source="yflexskin.swf",symbol="TabSelected_upSkin");

upSkin: Embed(source="yflexskin.swf",symbol="Tab_upSkin");

}

/*

//------------------------------

// TabNavigator

//------------------------------

*/

TabNavigator

{

borderColor: #a3a3a3;}

/*

//------------------------------

// ToolTip

//------------------------------

*/

ToolTip


29/77

{

borderSkin: Embed(source="yflexskin.swf",symbol="ToolTip_borderSkin");

}

/*//------------------------------

// Tree//------------------------------

*/

Tree

{

defaultLeafIcon: Embed(source="yflexskin.swf",symbol="Tree_defaultLeafIcon");

disclosureClosedIcon:

Embed(source="yflexskin.swf",symbol="Tree_disclosureClosedIcon");

disclosureOpenIcon:

Embed(source="yflexskin.swf",symbol="Tree_disclosureOpenIcon");

folderClosedIcon: Embed(source="yflexskin.swf",symbol="Tree_folderClosedIcon");folderOpenIcon: Embed(source="yflexskin.swf",symbol="Tree_folderOpenIcon");

}

Flex Styles Explorer

This is a handy tool for developers to be able to quickly get the style declarations they

want. The tool is pretty easy to use. There are four panels. From left to right, the firstlets you select any component, the second has controls that let you modify style

properties of the component, the third panel shows the results and the last panel is theCSS output which you can cut and paste into your project.

point browser at

http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.htm

l

Point out this is a very cool developer resource to use.

Screenshot:


30/77

Pan and Zoom tools, high fidelity (Slide 14)

-demonstrate the zoom and pan by increasing size to 250%

-

Layout Anchors (Slide 15)

Create new AIR project

- add Panel- resize panel

- run project and resize main window to illustrate sizing behavior- close AIR application

- anchor panel to top, left and bottom-

re run project to show difference

- close AIR application- attach to rigt hand side

- Leave project open ( you will use it again)

Talking points: Note that on Flex Builder 3, the visual anchor aides (small round glyphs)have been disabled. They may be there in a future build but might also not be.


31/77

You can manually add the four anchor attributes to your panel using the code view. Theattributes are @top, @bottom, @left and @right. Code is below.

When demonstrating, add @top and @left first then rebuild project to show behaviour

when resizing occurs. Close project, add @bottom and @right then re show.

Warn that over use of this behavior could lead to slowness in large apps with 35-50 childcomponents each trying to resize.

Code:

Working with HDTV Videos (Use same project as Adobe)

NOTE: You will ned to find an HDTV movie clip to demonstrate this application. Usethe same project as you created above, after anchoring the top bottom right and left to 10

pixels.

- Copy HDTV file to src directory of project- add line of code:

- make sure video display is anchored- run project to show HDTV. It will auto play for you.

Screenshot:


32/77

Code:

Advanced Data Grid (SLIDE 17)

Advanced Data Grid:

The AdvancedDataGrid control extends the capabilities of the standard DataGrid controlto improve data visualization. The following table describes the main data visualization

capabilities of the AdvancedDataGrid control:

Sorting by multiple columns

Sort by multiple columns when you click in the column header.

Styling rows and columns


33/77

Use the styleFunction property to specify a function to apply styles to rows and columnsof the control.

Displaying hierarchical and grouped data

Use an expandable navigation tree in the first column to control the visible rows of thecontrol.

Collect multiple columns under a single column heading

Using item renderers

Span multiple columns with an item renderer and use multiple item renderers in the same

column.

1. Open up TOUR_flexdemo_advdatagrid project2. Open flexdemo_advdatagrid1.mxml (code is below)3. Show code view and talk through

4. Run the project and demonstrate multiple column sorting. Do this by clicking on thesmall numbers on the right hand side of columns as shown below:

Code for advancedDataGrid.mxml:


34/77

importmx.collections.ArrayCollection;

[Bindable]

privatevardpADG:ArrayCollection = newArrayCollection([

{Artist:Pavement , Album:Slanted and Enchanted , Price:11.99},

{Artist:Pavement , Album:Brighten the Corners , Price:11.99},

{Artist:Saner , Album:A Child Once , Price:11.99},

{Artist:Saner , Album:Helium Wings , Price:12.99},

{Artist:The Doors , Album:The Doors , Price:10.99},

{Artist:The Doors , Album:Morrison Hotel , Price:12.99},

{Artist:Grateful Dead , Album:American Beauty , Price:11.99},

{Artist:Grateful Dead , Album:In the Dark , Price:11.99},

{Artist:Grateful Dead , Album:Shakedown Street , Price:11.99},

{Artist:The Doors , Album:Strange Days , Price:12.99},

{Artist:The Doors , Album:The Best of the Doors , Price:10.99}

]);

]]>

1. Open flexdemo_advdatagrid2.mxml2. Show code view and talk through

3. Run the project and demonstrate hierarchical data and column grouping

Screenshot:


35/77

Overview: Charting Enhancements

Chart Internaction

1. Open ChartInteraction.mxml2. Run project

3. Show how you can select items and it traces them to box4. Show code to do this (handleChange())

5. Show the code on line 30 showDataTips=true

Screenshot:


36/77

Source Code:


privatefunctionhandleChange(event:Event):void

{

textEvent.text = Selection Changed. +

\nSeries 1, Selected Items = +

series1.selectedIndices.toString() +


series2.selectedIndices.toString() +


series3.selectedIndices.toString();

}

[Bindable]

privatevarmedalsAC:ArrayCollection = newArrayCollection( [

{ Country: A , Gold: 35, Silver:39, Bronze: 29 },

{ Country: B , Gold: 32, Silver:17, Bronze: 14 },

{ Country: C , Gold: 27, Silver:27, Bronze: 38 },

{ Country: D , Gold: 15, Silver:15, Bronze: 10 },


37/77

{ Country: , Gold: 15, Silver:10, Bronze: 10 } ]);

]]>

Conditional Visual Charting Elements:

For this demo, discuss the MVC philosophy and then open and build the project.

1. Open columnFill.mxml (or cut and paste the source code below into a new project)2. show conditional fills for < 10 and > 10

3. Point out the code block that is responsible for the logic:

privatefunctionmyFillFunction(element:*, i:Number):IFill

{

varitem:ColumnSeriesItem=ColumnSeriesItem(element);

if(item.yNumber>10)

return(newSolidColor(0x123456));


38/77

else


}

]]>

Screenshot:

Source Code:

importmx.graphics.SolidColor;

importmx.charts.series.items.ColumnSeriesItem;


importmx.graphics.IFill;


39/77

[Bindable]

privatevarcolorArr:Array=[0xff0000,0x00ffff,0xff00ff];

[Bindable]

privatevarmedalsAC:ArrayCollection = newArrayCollection( [

{ Country: "Japan", Gold: 11, Silver:30, Bronze: 50, Total:91},

{ Country: "China", Gold: 8, Silver:20, Bronze: 60, Total:98 },

{ Country: "India", Gold: 13, Silver:30, Bronze: 70, Total:109 },

{ Country: "Russia", Gold: 8, Silver:70, Bronze: 80, Total:158 }]);

privatefunctionmyFillFunction(element:*, i :Number):IFill

{

varitem:ColumnSeriesItem=ColumnSeriesItem(element);

if(item.yNumber>10)


else


}

]]>


40/77

Region Selection Behavior

1. Open RegionSelection.mxml or cut and paste the source code below into a new

project.2. Run the project3.

ScreenShot:

Source Code:


privatefunctionhandleChange(event:Event):void

{

textEvent.text = "Selection Changed.\nSelected Items = "+

plotseries.selectedIndices.toStr ing();

vardp:Array = newArray();

for(vari:int=0; i < plotseries.selectedItems.length; i ++)

dp.push(plotseries.selectedItems[i].item);

columnchart1.dataProvider = dp;

}

[Bindable]

privatevarexpensesAC:ArrayCollection = newArrayCollection( [

Click onone of

thesedots

And showhow these

change toshow


41/77

{ Month: "Jan", Profit: 2000, Expenses: 1500, Travel: 450 },

{ Month: "Feb", Profit: 1000, Expenses: 200, Travel: 150 },

{ Month: "Mar", Profit: 1500, Expenses: 500, Travel: 300 },

{ Month: "Apr", Profit: 1800, Expenses: 1200, Travel: 900 },

{ Month: "May", Profit: 2000, Expenses: 375, Travel: 200 },

{ Month: "Jun", Profit: 1600, Expenses: 275, Travel: 100 },

{ Month: "Jul", Profit: 1200, Expenses: 875, Travel: 500 },

{ Month: "Aug", Profit: 800, Expenses: 75, Travel: 50 } ]);

]]>


42/77

Bar Chart:

1. Open the barchart_PIL.mxml file or cut and paste the code below into a new Flex

Project.2. Show the point detail in each bar

3.

Note how the orange on the lower right smartly puts the text into the bar ratherthan outside where it would not fit.

4. Note the problems of having varied length bars on the left hand side and howsome names are truncated due to length.

5. Explain how Flex 3 mitigates this for the developer.

Screenshot:

Source Code:

importmx.charts.*;

importmx.controls.Alert;

importmx.charts.series.items.*;

importmx.graphics.*;


[Bindable]

publicvarexpensesAC:ArrayCollection = newArrayCollection( [{Month: "January", Profit:

2000, Expenses: 1500, Amount: 195},


43/77

{Month: "February", Profit: 1000, Expenses: 200, Amount: 160},

{Month: "March", Profit: 800, Expenses: 500, Amount: 230},

{Month: "April", Profit: 500, Expenses: 300, Amount: 150},

{Month: "May", Profit: 700, Expenses: 450, Amount: 210},

{Month: "June", Profit: 900, Expenses: 500, Amount: 179}]);

[Bindable]

privatevarexpensesAC1:ArrayCollection = newArrayCollection( [

{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },

{ Month: "May", Profit: 2400, Expenses: 1575, Amount: 500 },

{Month: "April", Profit: 1500, Expenses: 1300, Amount: 350},

{Month: "May", Profit: 1700, Expenses: 1450, Amount: 260},

{Month: "June", Profit: 1900, Expenses: 1200, Amount: 399} ]);

privatefunctionlabelFunc(v:BarSeriesItem, index:int):String

{

returnBarSeries(v.element).displayName +":"+ v.xNumber;

}

]]>


44/77

displayName="Amount" labelPosition="outside" labelFunction="labelFunc"/>

Multiple Axis on one Chart

1. Open AxisRenderer.mxml or cut and paste the source code below into a new FexProject

2. Run the project3. It shows multiple axis on a graph

Screenshot:

Source Code:

importmx.charts.chartClasses.IAxisRenderer;importmx.collections.ArrayCollection;

privatefunctionCMstoInches(ar:IAxisRenderer,strCMs:String):String

{varn:NumberFormatter = newNumberFormatter();


45/77

n.precision = 1;returnn.format((Number(strCMs) * 0.393700787).toString());

}[Bindable]

privatevarSampleHeightData:ArrayCollection = newArrayCollection( [

{ Age: "Birth", height: 53},{ Age: "3", height: 57 },{ Age: "6", height: 64 },

{ Age: "9", height: 70 },{ Age: "12", height: 82 },

{ Age: "15", height: 88 }]);

[Bindable]

privatevarHeightData:ArrayCollection = newArrayCollection( [{ Age: "Birth", 5: 52, 10: 53, 25:54, 50:58, 75:60, 90:62, 95:63 },

{ Age: "3", 5: 56, 10: 57, 25:58, 50:62, 75:64, 90:66, 95:67 },{ Age: "6", 5: 62, 10: 63, 25:64, 50:68, 75:70, 90:72, 95:73 },

{ Age: "9", 5: 66, 10: 67, 25:68, 50:72, 75:74, 90:76, 95:77 },{ Age: "12", 5: 70, 10: 71, 25:72, 50:76, 75:80, 90:82, 95:83 },

{ Age: "15", 5: 74, 10: 75, 25:76, 50:80, 75:84, 90:86, 95:87 }]);

]]>


46/77

Web Services Client From Scratch (Slide 18)

(This demo shows the improved wizards for creating a new web service from scratch. ITIS MANDATORY TO HAVE AN INTERNET CONNECTION TO DO THIS

DEMO)

1. Make new project2. Select DATA > Import WSDL from the top menu in Flex Builder 3. This will

open a dialog (wizard).


47/77

3.

You will have to tell Flex Builder the location you wish to put the files under.Point at the /src folder and click Next

4. You will then be prompted to enter a reference to a WSDL (Web ServicesDescription Language) document.

5. Use the URL http://www.webservicex.com/globalweather.asmx?WSDLand clickNext

6. The next dialog will show you all available operations. Point out that FlexBuilder has just parsed the WSDL and determined this for you.

7. Click Finish8. Point out that Flex Builder has made new folders and files in your project. Open

up the BaseGlobalWeather.as Actionscript file to show the complexity of the

generated files.

9. You are now ready to build up the user interface and add some simple lines of

code to call the service.10.The ActionScript inside the AIR project is very simple. First, add a CDATA

section. Explain why this is necessary (ActionScrpt syntax is not XML andwould choke the XML parser. Parsing is suspended within character data sections

(CDATA) of XML. You will have to import two classes from your///src/com/webservicex folder.

importcom.webservicex.GetWeatherResultEvent;

importcom.webservicex.GlobalWeather;


48/77

//Next, create an instance of the GlobalWeather class, and add a variable (typed to//XML) for catching the service response. Use these two lines of code:

publicvarmyService:GlobalWeather = newGlobalWeather();

publicvarresultXML:XML

//The next job is to write the actionscript to handle the XML response object. ////This code is below:

publicfunctionresultHandler(e:GetWeatherResultEvent):void

{

resultXML = newXML(e.result);

locText.text = resultXML.Location;

windText.text = resultXML.Wind;

skyText.text = "Visibility: "+resultXML.SkyConditions;

tempText.text = resultXML.Temperature;

}

//Finally, write the service call

publicfunctiongetService():void

{

myService.addgetWeatherEventListener(resultHandler);

myService.getWeather(cityInput.text, countryInput.text);

currentState="result";

locText.text = "Loading... This may take a while";

}

11.Run the project. Enter city & country (Result format is inconsistent) below are

tested:

Moscow, russiaWarszawa-Okecie, poland

Praha, czech republicSofia, blugaria

hamburg, germanyistanbul, turkey

zurich, switzerlandbarcelona, spain

Paris-Aeroport Charles De Gaulle, francemilan, italy

London / Heathrow Airport, united kingdomAmsterdam, netherlands

antwerp Belgium

Screenshot:


49/77

Source Code:

importcom.webservicex.GetWeatherResultEvent;

importcom.webservicex.GlobalWeather;

publicvarmyService:GlobalWeather = newGlobalWeather();publicvarresultXML:XML

publicfunctiongetService():void

{

myService.addgetWeatherEventListener(resultHandler);

myService.getWeather(cityInput.text, countryInput.text);

currentState="result";

locText.text = "Loading... This may take a while";

}


50/77

publicfunctionresultHandler(e:GetWeatherResultEvent):void

{

resultXML = newXML(e.result);

locText.text = resultXML.Location;

windText.text = resultXML.Wind;

skyText.text = "Visibility: "+resultXML.SkyConditions;

tempText.text = resultXML.Temperature;

}

]]>

Flex AJAX Bridge Wizard (Slide 18)

1. Open up flexdemo_ajaxwizard project or set up a new project and copy and paste thesource code from below.

2. (OPTIONAL) If you have run this demo before, delete the folder AjaxBridge fromthe Flex Navigator. Explain it will be generated.

3. With the prohject open, Right-click (Control click on Mac) on project name in the Flex

Navigator panel and select "Create AJAX bridge..." This creates a small dialog box(wizard).4. Select the src folder of your current project and click okay. Note that the file folder

AjaxBridge gets recreated.5. in the source view, Select "textFromJavaScript" function.


51/77

6. Explain: FB will create wrappers for selected functions, properties in MXML files

and ActionScript classes7. Explain FB adds the FABridge class to the MXML file

8. Open flexdemo_ajaxwizard.js in Dreamweaver (show wrapper function)9. Open flexdemo_ajaxwizard.html in Dreamweaver

10. Adjust the height of the Flex application in the object/embed tag to 30011. Add a new HTML button with the label "Add Text" and onClick handler

flexdemo_ajaxwizard.textFromJavaScript();. The code is:

12. Save HTML file

13. Open HTML file from the Flex Builder environment:(*Right click on flexdemo_ajaxwizard.html and select browser option)


52/77

14. demo both Flex and JavaScript interaction by pushing both the Flex Button andJavascript buttons to add text. It looks like this:

Source Code:


53/77

publicfunctiontextFromFlex():void{

output.text += "This is from Flex \n";}

publicfunctiontextFromJavaScript():void{output.text += "This is from JavaScript \n";}

]]>

E4X Demo - Working with XML

Working with XML in Flex is typically done via the ECMAScript 4 XML (E4X) classes.

The XML handling, while not as robust as JDOM or Xerces, is nonetheless very wellimplemented. The class below allows you to demonstrate some simple path accessors

that query an inline XML fragment and return results. The XML is placed inline in thisexample in order to keep the source code compact and simple. You could equally write

this from scratch to handle XML from remote sources (as shown in the next project).

1. Launch the project by opening up the E4XDemo.mxml file or cut and paste thecode below into a new Flex or AIR project.

2. Show the source code to illustrate the various accessors (dot notation, range,Regex etc).

3. Run the project and click on each Execute button. Be sure to explain that youare not actually making it execute, just making the results visible. Mention that

this is a Flex coder trick to make the execution appear instentateous (pre

executing and using the visible=true attribute triggered by the user).4. The results show up in red font. You may click on the XML Data tab to showthe source XML and explain how the operation worked.

5. Note that FB3 will issue a minor complaint (generate a warning) that the variablescannot detect assignments. This only means that the variables will not be notified

if another part of the logic mutates the XML. For this demo, it is not necessary.

Screenshot:


54/77

Source Code

publicvarmyGMLData:XML =


55/77

56.1

0.45

67.230.98

46.719.25

56.8810.44

324.1219.70.454.56

]]>


56/77


57/77


58/77

Building an Simple XML/Text Editor

This demonstrates the ability of AIR applications to interact with the local file system. In

this demo, you will only need to launch this program and it will allow the opening,

modifying and saving of XML documents to the file system.

1. Place a file somewhere on your computer named foo.xml. The source is as

follows:

Oilers must beat the stars tonight.


59/77

2. Open the file with an XML aware browser (FireFox, IE, Netscape, Safari etc.).

3. Open the project (or cut and paste the source code below into a new AIR project)and go through the source code. The project is well documented.

4.

NOTE: This project will not work as a Flex project.5. Run the application.

6. Open up the foo.xml file with the application. This shows the open file dialogas any other application would have.

7. Modify the foo.xml file and click save.8. Hit reload in your browser to show that the changes actually persisted.

Screen shot:

Source Code:

importflash.filesystem.*;

importmx.events.*;


60/77

importmx.controls.Alert;

privatevarcurrentDocument:File;// The current file opened (and saved) by the

application

privatevarstream:FileStream = newFileStream();// The FileStream object

used for reading and writing the currentFile

privatevardefaultDirectory:File;// The default directory

[Bindable] publicvardataChanged:Boolean = false;// Whether the text da ta

has changed (and should be saved)

/* Called as the event handler for the applicationComplete event of the

Application. This method

* sets the position and size of the main window.*/

privatefunctionappCompleteHandler():void{

defaultDirectory = File.documentsDirectory;

stage.nativeWindow.width = Math.min(800,

Capabilities.screenResolutionX - 60);

stage.nativeWindow.height = Capabilities.screenResolutionY - 60;

stage.nativeWindow.visible = true;

}

/* Called when the user clicks the Open button. Opens a file chooser dialog box,

in which the

* user selects a currentFile. */

privatefunctionopenFile():void{

varfileChooser:File;

if(currentDocument) {

fileChooser = currentDocument;

}

else{

fileChooser = defaultDirectory;

}fileChooser.browseForOpen("Open");

fileChooser.addEventListener(Event.SELECT, fileOpenSelected);

}

/* Called when the user selects the currentFile in the FileOpenPanel control.

The method passes

* File object pointing to the selected currentFile, and opens a FileStream object

in read mode (with a FileMode

* setting of READ), and modify's the title of the application window based on

the filename. */

privatefunctionfileOpenSelected(event:Event):void{

currentDocument = event.target asFile;

stream = newFileStream();stream.openAsync(currentDocument, FileMode.READ);

stream.addEventListener(Event.COMPLETE, fileReadHandler);

stream.addEventListener(IOErrorEvent.IO_ERROR,

readIOErrorHandler);

dataChanged = false;

title = "Text Editor - "+ currentDocument.name;

currentDocument.removeEventListener(Event.SELECT,

fileOpenSelected);

}


61/77

/* Called when the stream object has finished reading the data from the

currentFile (in the openFile()

* method). This method reads the data as UTF data, converts the system-specific

line ending characters

* in the data to the "\n" character, and displays the data in the mainTextField

Text component. */

privatefunctionfileReadHandler(event:Event):void {

varstr:String = stream.readUTFBytes(stream.bytesAvailable);

stream.close();

varlineEndPattern:RegExp = newRegExp(File.lineEnding, "g");

str = str.replace(lineEndPattern, "\n");

mainTextField.text = str;

stream.close();

}

/* Called when the user clicks the "Save" button . The method sets up the stream

object to point to

* the currentFile specified by the currentFile object, with save access. This

method converts the "\r" and "\n" characters

* in the mainTextField.text data to the system-specific line ending character,and writes the data to the currentFile.

*/

privatefunctionsaveFile():void{


if(stream != null) {

stream.close();

}

stream = newFileStream();

stream.openAsync(currentDocument, FileMode.WRITE);

stream.addEventListener(IOErrorEvent.IO_ERROR,

writeIOErrorHandler);

varstr:String = mainTextField.text;

str = str.replace(/\r/g, "\n");str = str.replace(/\n/g, File.lineEnding);

stream.writeUTFBytes(str);

stream.close();


} else{

saveAs();

}

}

/* Called when the user clicks the "Save As" button. Opens a Save As dialog

box, in which the

* user selects a currentFile path. See the FileSavePanel.mxml currentFile. */

privatefunctionsaveAs():void{varfileChooser:File;


fileChooser = currentDocument;

} else{

fileChooser = defaultDirectory;

}

fileChooser.browseForSave("Save As");

fileChooser.addEventListener(Event.SELECT, saveAsFileSelected);

}


62/77

/* Called when the user selects the file path in the Save As dialog box. The

method passes the selected

* currentFile to the File object and calls the saveFile() method, which saves the

currentFile. */

privatefunctionsaveAsFileSelected(event:Event):void{

currentDocument = event.target asFile;

title = "Text Editor - "+ currentDocument.name;

saveFile();


currentDocument.removeEventListener(Event.SELECT,

saveAsFileSelected);

}

/* Called when the user clicks the "New" button. In itializes the state, with an

undefined File object and a

* blank text entry field.*/

privatefunctionnewFile():void{

currentDocument = undefined;dataChanged = false;

mainTextField.text = "";

}

//Handles I/O errors that may come about when opening the currentFile.

privatefunctionreadIOErrorHandler(event:Event):void{

Alert.show("The specified currentFile cannot be opened.",

"Error", Alert.OK, this);

}

//Handles I/O errors that may come about when writing the currentFile.

privatefunctionwriteIOErrorHandler(event:Event):void{

Alert.show("The specified currentFile cannot be saved.", "Error",Alert.OK, this);

}

privatefunctioncheckXML():void{

// have e4x parse the xml

varmyXML:XMLDocument = newXMLDocument();

try{

myXML.parseXML(mainTextField.text);

} catch(error:Error) {

trace(error.message);

}

}

]]>


63/77

Google RSS Feed Reader

This project demonstrates getting a remote stream of XML and managing it. Theapplication will hit a Google API and parse the RSS feed (XML format) then display

various aspects of the feed. The project also includes an HTML browser to view the blogthe feed came from.

You need a network connection to demo this project!

1. Open the project AIR3_RSSFeedReader or cut and paste the source code from

below into a new AIR project.2. When the application completes, it will load up 10 of the latest feeds from the

Google RSS service.

3. Point out to the audience how you grab various parts of the XML using E4X(such as the date, title and blogger name).

4. Click on a blog and the Blog URL wil show below as well as a synopsis of whatthe blog is about.

5. Click on the See blog tab and the HTML of the actual blog will be loaded. Notethat the URL was passed to the HTTPService in line 100 of the source code.

Screen shot:


64/77

Source Code:


65/77

importmx.controls.Text;

importmx.utils.StringUtil;

publicfunctiongetDetails():void{

description.htmlText=rawRSS.lastResult.rss.channel.item[entries.selectedIndex].description

link.htmlText=rawRSS.lastResult.rss.channel.item[entries.selectedIndex].link;

}

publicfunctionconcat():void{

varspace:RegExp = / /g;

varstr:String = term.text;

search.text = str.replace(space, "+");

}

publicfunctionsetHTML():void{html.location=rawRSS.lastResult.rss.channel.item[entries.selectedIndex].link;

}

privatefunctionintervalTrace():void{

currentInterval.text=String(refresh.value);

}

publicfunctionautoRefresh():void{

varthisCount:int;

varticker:Timer = newTimer(1000);

ticker.start();

varcount:int = ticker.currentCount;

ticker.addEventListener(TimerEvent.TIMER, onTick);

functiononTick():void{

thisCount += 1;

vartimeLeft:int = (int(refresh.value*60) - thisCount);

counterText.text = String(timeLeft);

}

// once it exceeds refresh value

if(thisCount >= refresh.value) {

rawRSS.send();

ticker.reset();

ticker.start();

}

}

]]>


66/77


67/77


68/77

textAlign="right"/>

Working with Sound

This is a simple example to show working with sound. The Flash player has a number of

really cool ways to control sound. You will need a sound file (example - MP3) to makethis work. This code sample shows building a sound player with limited controls and a

graphic visualization of the sound file using the computeSpectrum() method.

Screen Shot:


69/77

Source Code:

importmx.core.SoundAsset;

[Embed('assets/509.mp3')]

privateconstsong1:Class;

privatevarmyMusic:SoundAsset = SoundAsset(newsong1());

//public var

privatevarbyteArray:ByteArray = newByteArray();

privatevartimer:Timer;

privatefunctioninit():void{

timer = newTimer(50);

timer.addEventListener(TimerEvent.TIMER, doTimer);

}

privatefunctiondoTimer(evt:TimerEvent):void{

SoundMixer.computeSpectrum(byteArray, true);

spr.graphics.clear();

drawChannel(0xFF0000);

drawChannel(0x0000FF);

}


70/77

privatefunctiondrawChannel(color:uint):void{

varf:Number;

vari:int;

spr.graphics.lineStyle(1, color);

spr.graphics.beginFill(color, 0.6);

spr.graphics.moveTo(0, GRAPH_HEIGHT);

for(i = 0; i < 256; i++) {

f = byteArray.readFloat();

spr.graphics.lineTo(i * 2, GRAPH_HEIGHT - ((f * GRAPH_HEIGHT)) * 0.75);

}

spr.graphics.lineTo(512, GRAPH_HEIGHT);

spr.graphics.endFill();

}

privatefunctionplaySong():void{

myMusic.play();

}

privatefunctionpauseSong():void{myMusic.close();

}

]]>

512

256

Building a Countdown Timer AIR Appl ication.

This code sample combines several elements from early samples. In this example you

will learn:

- how to link two or more *.mxml files- how to make a transparent, chromeless AIR application

- how to work with date and time objects


71/77

This project requires more set up. You first have to create the structures and files as

shown below:

Note that you will need a graphic to replace the Picture 38.png with. This specificcounter project counts down the days until MAX 2008, Adobes premier event for 2008.

(Note: register soon as it will likely sell out like 2007).

1. Create the new AIR project and name it AIR3 backwards timer.2. To add the utils directory, right click (control click on mac) on the /src folder and

click new -> Folder.3. Right click on the utils folder after it is created and select File -> new ->

MXML component. Use the name SimpleClock.mxml for the component4. Cut and paste the code (below) into the //utils/SimpleClock.mxml. The code is

well commented to let you know what is going on.

5.

Start building the main MXML file (AIR3.BackwardsTimer.mxml) or simply cutand paste the course code from below.6. Note that you also have to modify two lines from the AIR3_BackwardsTimer-

app.xml file by uncommenting them and adding the words none and true asfollows:

none

true

7.

fdsf

Screenshot


72/77

Source Code:

SimpleClock.mxml

publicvarcountDownDate:Date = newDate;

// countDownDate.getDate();

privatefunctioninit():void

{

//public var countDownDate:Date;// creates a Timer that fires an event once per second

varticker:Timer = newTimer(1000);

// designates the onTick() method to handle Timer events

ticker.addEventListener(TimerEvent.TIMER, onTick);

// starts the clock ticking

ticker.start();

}

publicfunctiononTick(evt:TimerEvent):void

{

// updates the clock display//this.text = getCountDown(countDownDate.getTime() - (new Date()).getTime());

this.text = getCountDown(countDownDate.getTime());

}

protectedfunctiongetCountDown(uptime:Number):String

{

//current date

varcurrentDate:Date


73/77

// get current Date

currentDate = newDate();

//initialize event variables. Seconds are using Math().

vareventMonth:int = 10;//Nov = 8

vareventDay:int = 15;//day = 16

vareventHour:int = 15;

//the event starts at 8 AM local + 8 (-1 for starting at zero) for 15 GMT

vareventMinutes:int = 0;// assume it starts right at 8:00 AM sharp. Yeah right....

//get time zone offset. Number returned in minutes.

varcurrentOffset:Number = currentDate.getTimezoneOffset();

//check if we started

if(uptime


74/77

AIR3_BackwardsTimer.mxml

Application

{

/*make app window transparent*/

background-color:"";

background-image:"";

padding: 0px;margin-top: 0;

margin-right: 0;

margin-bottom: 0;

margin-left: 0;

}

importflash.display.Bitmap;

importmx.events.CloseEvent;

privatevarMAX_DATE:Date = newDate();

privatefunctioninit():void{

// Move the app when the panelis dragged

mainPanel.addEventListener( MouseEvent.MOUSE_DOWN,

startMove );

functions tartMove(event:MouseEvent):void{

stage.nativeWindow.startMove();

}

// This set the specific date as the 30th of the month.

MAX_DATE.setDate(29);

countDownClock.countDownDate = MAX_DATE;}

// This makes the close button work.

publicfunctioncloseEvent(event:CloseEvent):void{

stage.nativeWindow.close();

}

]]>


75/77

How to install and run Adobe LiveCycle Data Services ES 2.5.1on Mac OS X

This post outlines step-by-step instructions to get the latest Adobe LiveCycle Data Services ES (formerly

Flex Data Services) running natively on a Mac. Okay before you get excited, Adobe does not support this

but I did some tinker ing around with JBoss 4.2.1 GA and Adobe LiveCycle Data Services ES 2.5.1 and got

it running natively on Mac OS X. Below is the screenshot in Safari.

Before you read how to do this, please understand a few things. First, Adobe LiveCycle Data Services ES is

not supported on Mac OS X. In fact, we do not even release it (but dont worry, it is not hard to install). If

you do not know what LiveCycle Data Services ES is, it used to be called Flex Data Services. It is now part

of the LiveCycle Service platform and has lots of great features. It has a really cool server component that

can do wicked messaging stuff to round trip between a J2EE environment and Adobe Flex, AIR, HTML or

AJAX applications.


76/77

Why? I ported this over and posted this as a result of Adobe MAX 2007 in Barcelona. Macs were

everywhere. At JavaOne and MAX, I suspect that about 50-60% of the developers are now using Macs. We

used Macs in our hands-on training rooms and they got taken up first.

Here are the full instructions for getting LiveCycle Data Services ES running on a Mac. Please dont

complain if it doesnt work. We dont support it (currently -- but if youre interested tell me and Ill work

on product management to see if we can get it supported) and were on our own for now. Here are the

steps:

1. Go to JBoss.org and download the JBoss 4.2.1GA release. Unzip it somewhere (I put it on my desktop).

2. Grab a terminal and navigate to the /bin and enter sh ./run.sh as shown below. Note you must run it

with sufficient privileges. If you have trouble try entering sudo sh ./run.sh and you will be prompted for

the SU password.

3. Grab Safari and go to http://localhost:8080 to verify it works. You should see a screen welcoming you to

JBoss app server.

4. If it worked, stop the application server by going to the /bin and typing sh ./shutdown.sh, then hit enter.

Or, you can simply put the cursor in the shell and hit Control-C. The latter is not recommended but it

works.

5. Go to http://www.adobe.com/products/livecycle/dataservices/ and follow the steps to download

LiveCycle Data Services ES version 2.5.1. Make sure you select the AIX version. When you finish

downloading it, click the file and install it. (note: it does install even though Adobe does not claim it

installs). It will create a directory on the Mac at /Adobe/ as shown below.

6. Now the important part. Expand the LiveCycle Data Services ES 2.5.1/resources/security/tomcat/

directory then copy the /resources/security/tomcat/flex-tomcat-common.jar and


77/77

/resources/security/tomcat/flex-tomcat-server.jar into the jboss_root/server/default/lib

folder of your JBoss install. This will allow custom authentication to work.

7. From the same location, copy /resources/security/tomcat/context.xml to your JBoss

under the WEB-INF directory or adjust an existing context.xml to add the . Youll have to open the

context.xml files to compare them. Copying works best if you have a fresh install of JBoss.

8. Expand your and copy the following files:

flex-admin.war flex.war samples.war

9. Paste those samples in the /server/default/deploy directory.

10. Restart JBoss as described above (Step 2). Get your browser and go to http://localhost:8080/samples

and you should see this:

Now try the samples. If they work you have succeeded! Congratulations.

Running it on a Mac, I noticed several advantages. First, the start up time is really fast -- it started in 28

seconds. For contrast, at MAX 2007 in Barcelona, the same software on a PC with 2 GB RAM took about

Documents

2008-Flex Air Cookbook Feb2008