welcome to ocflex - scalenine : skins and themes for flex and air
TRANSCRIPT
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