welcome to ocflex - scalenine : skins and themes for flex and air

Welcome to OCFlexOrange County Flex User Group

Flex ShowcaseLet’s look at some cool Flex stuff

Flex ShowcaseFlex Applications‣ Buzzword : buzzword.com

‣ Picnik : picnik.com

‣ AMGEN Tour of California : amgentourofcalifornia.com

‣ Flex Showcase : flex.org/showcase

‣ HP Studio : HP Studio Link

Custom Components‣ Display Shelf : quietlyscheming.com

‣ Random Walk : quietlyscheming.com

‣ Book : quietlyscheming.com

AIR ShowcaseAIR Applications‣ Finetune : finetune.com/desktop

‣ Kuler : Adobe Labs Showcase

‣ Spaz : funkatron.com

‣ eBay Desktop : ebay.desktop.com

‣ SearchCoders Desktop : searchcoders.com

What is Flex?Introduction to Adobe Flex™

Introduction to Flex™What is Flex?‣ A way to make SWF files!‣ It is for developers‣ It is for making applications:•On the Web (Flash Player 9)•On the Desktop (AIR)

Flash Player 9‣ New Virtual Machine with JIT‣ 20X performance improvements‣ Reduced memory consumption‣ ActionScript 3.0 - ECMA 4 Compliant‣ Dynamic and Strong typed language‣ ECMAScript for XML (E4X)‣ Seamless One-click upgrade‣ Full backward compatibility

MXML

MXML is the language of Flex

<Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/></Application>

MXML

MXML : Components

<Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/></Application>

MXML

MXML : Properties

<Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/></Application>

MXML

MXML : Events

<Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/></Application>

MXML

MXML : Bindings

<Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/></Application>

MXML Compiler

MXML to ActionScript 3

CSS to ActionScript 3

ActionScript 3 to ByteCode

Assets to SWF

ByteCode to SWF

SWF running in Flash Player 9

Controls

Button

CheckBox

ColorPicker

ComboBox

DataGrid

DateChooser

DateField

HSlider

HorizontalList

Image

Label

LinkButton

List

NumericStepper

PopUpButton

PopUpMenuButton

ProgressBar

RadioButton

RichTextEditor

Text

TextArea

TextInput

TileList

Tree

VSlider

VideoDisplay

Containers

Canvas

ControlBar

Form

FormHeading

Grid

HBox

HDividedBox

ModuleLoader

Panel

Spacer

Tile

TitleWindow

VBox

VDividedBox

These hold Controls and other Containers

Layoutmx:Application

mx:Button

mx:Panel

mx:DataGrid

mx:Button

<?xml version="1.0" ?><mx:Application>

<mx:Button width="100" height="50"/>

<mx:Panel width="100%" height="100%">

<mx:Button width="100%"/>

<mx:DataGrid width="100%" height="100%"/>

</mx:Panel>

</mx:Application>

MXML to ActionScript

package com.ocflex{ import mx.controls.Button; public class MyButton extends Button { public function MyButton():void { super(); } }}

<ocflex:MyButton label="ClickMe"/>

Custom componentsBuilding what is not already provided by Flex

SkinningMaking your Flex app look beautiful

FrameworksOrganizing your code

What do they provide?‣ Code organization

• by following a specific architectural style๏ Event-based / Implicit invocation

• by using design patterns๏ Command๏ ModelLocator๏ MVC

‣ Helper code• Framework classes that we can use or extend

Existing frameworksMany options:‣ Cairngorm‣ PureMVC‣ ARP‣ Model-Glue: Flex‣ Guasax‣ and others...

AIRRunning Flex (and HTML) in your desktop

AIR Applications‣ Installed as native applications

• Installer

• Start menu

•Dock

‣ Can access local file system

‣ Can send notifications to task bar and dock

‣ Drag and drop from desktop

‣ Can have embedded databases

• SQLite