Post on 05-Apr-2018
7/31/2019 Adobe Flex Class Slides Oct 10
1/173
FLEX - BY WALT SCHLENDERFOR ACADEMY X WED -
OCTOBER 10TH 2010
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
2/173
CONTACT INFO
email: walt.schlender@gmail.comweb: http://www.waltschlender.com
Monday, June 27, 2011
http://www.waltschlender.com/http://www.waltschlender.com/mailto:walt.schlender@gmail.commailto:walt.schlender@gmail.com7/31/2019 Adobe Flex Class Slides Oct 10
3/173
DAY 1
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
4/173
3 WAYS TO ADD A LINK TO A
WEB PAGE
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
5/173
USE HTML
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
6/173
#2 USE FLASH
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
7/173
STEP 1Open the Flash IDE (700$) where you will draw + position abutton and some text. Youll want to set the text color on your
text to purple.
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
8/173
STEP 2Convert the text and button image into movie clips
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
9/173
STEP 3Select the link and the button and give them names
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
10/173
STEP 4Open the code editor and add the following code to the firstframe of the timeline?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
11/173
RUN ITThe result:
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
12/173
ANYBODY HAVE QUESTIONSWHY THE WEB WASNT BUILT
IN FLASH?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
13/173
#3 USE FLEXOpen Flex Builder, create a new project, enter the followingcode:
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
14/173
THE RESULTS
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
15/173
WHAT IS FLEX?Lets move out to a 100000ft view so we can understand
better...
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
16/173
2 QUESTIONS:
1. Where does Flex fit into a companys technology stack whenthe company decides to build an application?
2. What makes a programmer want to use a programming
language?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
17/173
WEB APPLICATION
ARCHITECTURE
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
18/173
MODELS, VIEWS, CONTROLLERS
Model
Middleware
View
Hang this above your bed!
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
19/173
7/31/2019 Adobe Flex Class Slides Oct 10
20/173
MODEL? VIEW? CONTROLLER?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
21/173
MODEL? VIEW? CONTROLLER?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
22/173
MODEL? VIEW? CONTROLLER?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
23/173
MODEL? VIEW? CONTROLLER?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
24/173
MODEL? VIEW? CONTROLLER?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
25/173
LOCAL APPLICATION
Model - Database, File, Object Map
Controller - C++, Ruby, Java, C#
View - Cocoa (Mac), .Net Framework (win)
YourPersonal Computer
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
26/173
ACTIONSCRIPT
What is Flex/Flash & Why Should You Care?
Variables
Functions
Events
Objects/Classes
Play!
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
27/173
BASIC WEB APPLICATION
View - HTML
Model - Database, File, Object Map
Controller - PHP, Java, Ruby, ASP
Web Server
Your Computer
HTML textis sent across the web
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
28/173
A WEB APPLICATION
View - HTML & JavaScript or Flash/Flex
Model - Database, File, Object Map
Controller - PHP, Java, Ruby, ASP
Web Server
Your Web Browser
XML/JSON/AMF is sent across the web
Model - Object Map (ActionScript3, AJAX)
Controller - (ActionScript3, AJAX)
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
29/173
7/31/2019 Adobe Flex Class Slides Oct 10
30/173
7/31/2019 Adobe Flex Class Slides Oct 10
31/173
DNS LOOKUP CONVERTS - DOMAIN NAME(GOOGLE.COM) TO IP ADDRESS
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
32/173
A REQUEST IS MADE TOGOOGLE.COM
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
33/173
SERVER CODE PARSES QUERY
STRING PARAMETERS
http://www.google.com/#hl=en&q=walt+schlender&btnG=Google+Search&aq=f&oq=walt+schlender&fp=NCbywrawV3w
Monday, June 27, 2011
http://www.google.com/#http://www.google.com/#7/31/2019 Adobe Flex Class Slides Oct 10
34/173
A DATABASE QUERY IS MADE
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
35/173
THE RESULTS ARE PROCESSED
INTO HTMLMonday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
36/173
THE RESULT IS SENT BACK TOTHE USER
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
37/173
WEB APPLICATIONSMORE COMPLICATED... FLOW IS MOSTLY THE SAME BUT...
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
38/173
SERVER RESPONSECONTAINS SWF OR AJAX
CODE
SERVER USERSBROWSER
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
39/173
LOADED CODE BEGINS CONVERSATION
WITH SERVER - (XML/JSON/AMF)
Server
Flash or AJAX Application
Model - Object Map (ActionScript3, AJAX)
Controller - (ActionScript3, AJAX)
Web Page HTML
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
40/173
50000FTHow do you construct these building blocks?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
41/173
RIGHT TOOL FOR THE JOB
Java
Ruby
HTML
Flash
Flex
JavaScript
Model Languages
View Languages
PHP
JSP
Template Languages
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
42/173
VIEW LANGUAGES
HTML, AJAX, FLASH(ActionScript)/FLEX
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
43/173
FLASH? AJAX?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
44/173
FLASH? AJAX?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
45/173
FLASH? AJAX?
http://www.youtube.com/experiencewiiNot the video player
Monday, June 27, 2011
http://www.youtube.com/experiencewiihttp://www.youtube.com/experiencewii7/31/2019 Adobe Flex Class Slides Oct 10
46/173
FLASH? AJAX?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
47/173
FLASH? AJAX?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
48/173
FLASH? AJAX?
http://www.justin.tv
Monday, June 27, 2011
http://www.justin.tv/http://www.justin.tv/7/31/2019 Adobe Flex Class Slides Oct 10
49/173
HAVE YOU SEEN THIS?
FLARToolkit -augmented reality -
http://ge.ecomagination.com/smartgrid/?c_id=googaugreal#/augmented_reality
Monday, June 27, 2011
HTML FIRST
http://ge.ecomagination.com/smartgrid/?c_id=googaugreal#http://ge.ecomagination.com/smartgrid/?c_id=googaugreal#7/31/2019 Adobe Flex Class Slides Oct 10
50/173
HTML FIRST
Small HTML page demo
text: hi from walt
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
51/173
MOVING BOX DIV DEMO
JavaScript
text: hi from walt
Move this div around the screenwhen the user clicks
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
52/173
OBJECT ORIENTED
PROGRAMMINGACTIONSCRIPT THIRDis a bird
function quack
function swim
has wings
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
53/173
CLASSES (OBJECTS)
public class BatMobile{}
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
54/173
VARIABLES (INSTANCES)
var mobile1:BatMobile = new BatMobile();
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
55/173
VARIABLE TYPES
int - number (no decimal)
Number - number (withdecimal)
Boolean - true/false value
Array - well talk about thaton the next slide
Object - everything is anobject
Your own type - eg: Batman
Pre-defined flex type - eg:Sprite
String - Letters
var x:TYPE = new TYPE();
Monday, June 27, 2011
ARRAY & ARRAYCOLLECTION
7/31/2019 Adobe Flex Class Slides Oct 10
56/173
ARRAY & ARRAYCOLLECTIONvar utilityBeltSlots:Array = new Array;
utilityBeltSlots[0] = new ThrowingStar();utilityBeltSlots[1] = new GrapplingHook();
utilityBeltSlots[2] = new CellPhone();
Monday, June 27, 2011
FUNCTIONS
7/31/2019 Adobe Flex Class Slides Oct 10
57/173
FUNCTIONSpublic function startBatMobile():void{}
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
58/173
EVENT DISPATCHING
public class BatMobile extends EventDispatcher{public function handleBatSummons():void{this.dispatchEvent(new Event(bat-alert));
}}
Monday, June 27, 2011
EVENT LISTENING
7/31/2019 Adobe Flex Class Slides Oct 10
59/173
EVENT LISTENING -SOMETHING HAPPENED
mobile1.addEventListener(bat-alert, handleBatAlert);
private function handleBatAlert(evt:Event):void{trace(Wake up Batman);
}
Your first debugging tool
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
60/173
CONDITIONALS
if(im_faster_than_batman() == true){trace(I win);
}
A function we defined elsewhere
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
61/173
INHERITANCE - IS A...
public class BatMobile extends Sprite{}
Pre-built flash object which has visual appearance +x and y position info
Monday, June 27, 2011
CLASS LAYOUT
7/31/2019 Adobe Flex Class Slides Oct 10
62/173
CLASS LAYOUTpackage{
public class Batman extends Warrior{
public static const UNKNOWN:int = -1;
//These are secret -- because nobody knows Batman
private var _height:int;
private var _weight:int;
private var _utilityBelt:Array = new Array;
public var color :String = black;
public function Batman():void{
}
public function get weight(name:String):int{
if(name == Alfred){return _weight;
}else{
return UNKNOWN;
}
}
}
}
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
63/173
LOOPS
for(var i:int=0; i < 12; i++){
trace(The + i + day of christmas);}
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
64/173
THE FLASH PLAYER
The Stage
Your RootObject
Redraw 30x per
second
Child 1 Child 2
Child 1
Monday, June 27, 2011
WERE GOINGTO CODE BUT
7/31/2019 Adobe Flex Class Slides Oct 10
65/173
WERE GOING TO CODE BUT
BEFORE WE DO... CamelCase
Indenting
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
66/173
:(
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
67/173
LETS BUILD SOMETHING
SMALL
Falling Ball Demo
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
68/173
WHERE DO YOU SEE FLASH/
FLEX BEING USED? + WHY?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
69/173
RICH INTERNET APP(S)
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
70/173
DASHBOARDSNeed a control panel for your yacht? - Intelisea
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
71/173
DESKTOP APPS
- Tweetdeck
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
72/173
WIDGETS/COMPONENT KITS
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
73/173
FLEX - WELL TACKLETOMORROW
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
74/173
MODELS
The Simplest of Models
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
75/173
XML
Make these up... just be consistent
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
76/173
WHERE OTHERPROGRAMMING
LANGUAGES FITWhy should you care aboutprogramming languages? Youre
trying to sell one, youd better knowwhat else is out there.
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
77/173
WHAT DO YOU THINK MAKESA LANGUAGE POPULAR?
Monday, June 27, 2011
http://www.example.com?username=something&password=something
http://www.example.com/?username=http://www.example.com/?username=7/31/2019 Adobe Flex Class Slides Oct 10
78/173
PARSING QUERY STREAM
PARAMETERS
Ruby
Java
p p g p g
Monday, June 27, 2011
http://www.example.com/?username=7/31/2019 Adobe Flex Class Slides Oct 10
79/173
RUBY PROS/CONS
Clean code - almost english
Strong user community
Cross platform
Simple code - do more with
less
Fast to develop in ruby
Slower than Java
Hasnt been around longenough to be super robust
Relatively small number ofdevelopers
ConsPros
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
80/173
JAVA PROS/CONS
Scales well
Cross platform - sort of
Libraries for just aboutanything you can imaginehave been built
Lots of programmers
More complex to developusing Java than alternatives
VERBOSE - so you have towrite more to do less
Fragmented community -
documentation isnt easy toget at
Pros Cons
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
81/173
GENERATE XML WITH PHP AND JAVA
Excerpt
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
82/173
PHP PROS/CONS
Focused purpose
Well documented
Has proven to scale prettywell
Installed on almost all webservers - drop your codeand go
Missing some of thelanguage features of some of
these other languages
Pros Cons
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
83/173
PARSING XML USING ACTIONSCRIPT3
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
84/173
PARSING XML USING AJAXMonday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
85/173
ACTIONSCRIPT PROS/CONS
Rich experience
Can do anything you wantvisually (video/audio)
Can do things which cantbe done with AJAX
Like Java and C# so easy tolearn
Harder to maintain anActionScript application than
HTML application
Applications tend to requiremore skilled & expensivecoders to build
Requires artistic talent TOO
Pros Cons
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
86/173
AJAX PROS/CONS
Open-Source
Ubiquitous
Quickest experience to justget into
Large set of libraries allowfor some incredible AJAXapplications
Limit to what you canaccomplish with AJAX
Hard to maintain
Cross-browser issues
Pros Cons
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
87/173
IS THERE ANYTHING IN THESE
LANGUAGES WHICH YOULIKE? DISLIKE?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
88/173
BUILD AN XML PARSER INACTIONSCRIPT - TO
CONTROL A MUSIC PLAYER
Exercise - Well go through this together
Monday, June 27, 2011
MODEL? VIEW? CONTROLLER?
7/31/2019 Adobe Flex Class Slides Oct 10
89/173
MODEL? VIEW? CONTROLLER?
XML Parser
Monday, June 27, 2011
MODEL? VIEW? CONTROLLER?
7/31/2019 Adobe Flex Class Slides Oct 10
90/173
MODEL? VIEW? CONTROLLER?
Audio Player -- flash Sound class - plays MP3s
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
91/173
TRICK QUESTION - BOTH ARE
MODELSNo view, user cant control anything
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
92/173
Model - XML file arser & Audio Ob ect
Controller - MainA S rite
View - NONE
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
93/173
DAY 2
Monday, June 27, 2011
FLEX BUILDER FLEX
7/31/2019 Adobe Flex Class Slides Oct 10
94/173
FLEX BUILDER + FLEX
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
95/173
FLEXAn extension to ActionScript which makes writing views easier- similar in difficulty to writing HTML views
Includes:
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
96/173
COMPONENT FRAMEWORKCollection of buttons, labels, textfields and other tools to help
speed development along for developers
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
97/173
SMALL SEGUE - WHAT IT
USED TO BE LIKE WITH FLASH4 people on a team
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
98/173
WE HAD TO BUILD ALL THEPIECES OF AN APP OURSELVES
Skinning - re-surfacing a component for different clients was aPAIN - Id charge lots of money for re-skinning
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
99/173
NOW
Button = Label =
Monday, June 27, 2011
MXML - TAG VERSION OF
7/31/2019 Adobe Flex Class Slides Oct 10
100/173
ACTIONSCRIPT
NamespaceOutput
Tags
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
101/173
COMMON PROPERTIES MOSTTAGS HAVE
id, editable?, backgroundColor, backgroundImage, style, width,height
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
102/173
LAYOUT ENGINEHBox, VBox, Canvas... - well cover more of these later
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
103/173
TEACH A MAN TO FISH...http://livedocs.adobe.com/flex/3/langref/ - Bookmark This
Monday, June 27, 2011
HOW TO READ A LANGUAGE
http://livedocs.adobe.com/flex/3/langref/http://livedocs.adobe.com/flex/3/langref/7/31/2019 Adobe Flex Class Slides Oct 10
104/173
REFERENCE
- Packages
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
105/173
7/31/2019 Adobe Flex Class Slides Oct 10
106/173
INHERITANCE HIERARCHY
Monday, June 27, 2011
SYNTAX DETAILS
7/31/2019 Adobe Flex Class Slides Oct 10
107/173
SYNTAX DETAILS
Monday, June 27, 2011
PROPERTIES - PUBLIC PRIVATE
7/31/2019 Adobe Flex Class Slides Oct 10
108/173
PROTECTED
Monday, June 27, 2011
METHODS
7/31/2019 Adobe Flex Class Slides Oct 10
109/173
METHODS
Monday, June 27, 2011
INHERITED PUBLIC METHODS
7/31/2019 Adobe Flex Class Slides Oct 10
110/173
INHERITED PUBLIC METHODS
Monday, June 27, 2011
EVENTS
7/31/2019 Adobe Flex Class Slides Oct 10
111/173
EVENTS
Monday, June 27, 2011
EVENT DETAILS
7/31/2019 Adobe Flex Class Slides Oct 10
112/173
EVENT DETAILS
Monday, June 27, 2011
HOWTO USE
7/31/2019 Adobe Flex Class Slides Oct 10
113/173
HOW TO USE
Monday, June 27, 2011
EXAMPLE
7/31/2019 Adobe Flex Class Slides Oct 10
114/173
EXAMPLE
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
115/173
LETS BUILD OUR FIRST FLEX
APPLICATIONSimple label and button
Monday, June 27, 2011
DISPLAY A COMPONENT FOR
7/31/2019 Adobe Flex Class Slides Oct 10
116/173
DISPLAY A COMPONENT FOR
ME - EACH PERSON 1COMPONENT
Menu,Label,
ColumnChart *
DataGridTextInput
Monday, June 27, 2011
MXML IS REALLY ACTIONSCRIPT - BELIEVE ME?
7/31/2019 Adobe Flex Class Slides Oct 10
117/173
Tag re-writing language - this and this are the same thing. Do
you believe me?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
118/173
HERES ONE OF EACH OFTHOSE OBJECTS
Monday, June 27, 2011
THE INTERMEDIATE CODE
7/31/2019 Adobe Flex Class Slides Oct 10
119/173
THE INTERMEDIATE CODE
FILE
Monday, June 27, 2011
WHY WOULD YOU WANT TOUSER MXML?
7/31/2019 Adobe Flex Class Slides Oct 10
120/173
USER MXML?
Why did you build
MXML?
Monday, June 27, 2011
[BINDABLE] = IM WATCHING YOU
7/31/2019 Adobe Flex Class Slides Oct 10
121/173
Model
View
[Bindable]var value:int = 10; 1. Changes Here Become...
2. Changes Here
Monday, June 27, 2011
TYPICAL FLEX APPLICATION
7/31/2019 Adobe Flex Class Slides Oct 10
122/173
STRUCTURE
Model - ActionScri t
Controller - ActionScri t
View - FLEX
Server
Binding
Monday, June 27, 2011
TOOL WE USE FLEXBUILDER
7/31/2019 Adobe Flex Class Slides Oct 10
123/173
TOOL WE USE - FLEXBUILDER
Monday, June 27, 2011
FLEX BUILDER COMPILE
7/31/2019 Adobe Flex Class Slides Oct 10
124/173
FLEX BUILDER COMPILE
Compile == Process & ZIP
Monday, June 27, 2011
APPLICATIONS CAN
7/31/2019 Adobe Flex Class Slides Oct 10
125/173
ActionScript3
MXML
HTML
JavaScript
Libraries
CONTAIN...
Socket encryption,3D,
Flickr Integration
Monday, June 27, 2011
ONCE WE HAVE OUR CODE
7/31/2019 Adobe Flex Class Slides Oct 10
126/173
COMPILED...
Copy these
Web Server
Monday, June 27, 2011
LETS BUILD SOMETHING
7/31/2019 Adobe Flex Class Slides Oct 10
127/173
LETS BUILD SOMETHING
Flickr Viewer - Chapter 3 in our book
Monday, June 27, 2011
MODEL? VIEW? CONTROLLER?
7/31/2019 Adobe Flex Class Slides Oct 10
128/173
private var photoFeed:ArrayCollection;
Monday, June 27, 2011
MODEL? VIEW? CONTROLLER?
7/31/2019 Adobe Flex Class Slides Oct 10
129/173
MODEL? VIEW? CONTROLLER?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
130/173
MODEL? VIEW? CONTROLLER?
Flex Image Component -
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
131/173
DATA PROVIDERS
Model View
Set the views dataProvider property to the model...
Monday, June 27, 2011
ITEM RENDERER
7/31/2019 Adobe Flex Class Slides Oct 10
132/173
ITEM RENDERER
Model
XML XML XML XML XML XML
TileList
Watching our model
XML
Children
.
.
.
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
133/173
FLEX CONTROLS ANDLAYOUT - CHAPTER 4 IN OUR
BOOK
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
134/173
THE APPLICATIONCONTAINER
Monday, June 27, 2011
THE BOX CLASS
7/31/2019 Adobe Flex Class Slides Oct 10
135/173
HBox
VBox
Monday, June 27, 2011
CANVAS CONTAINER(0 0)
7/31/2019 Adobe Flex Class Slides Oct 10
136/173
(0,0)
Label: x-200 y-200
Monday, June 27, 2011
CANVAS CONTAINER -RELATIVE POSITIONING
7/31/2019 Adobe Flex Class Slides Oct 10
137/173
RELATIVE POSITIONING
Monday, June 27, 2011
THE FORM CONTAINER
7/31/2019 Adobe Flex Class Slides Oct 10
138/173
Monday, June 27, 2011
THE VISUAL EDITOR
7/31/2019 Adobe Flex Class Slides Oct 10
139/173
Monday, June 27, 2011
THE PANEL CONTAINER
7/31/2019 Adobe Flex Class Slides Oct 10
140/173
Monday, June 27, 2011
CONTROLS
7/31/2019 Adobe Flex Class Slides Oct 10
141/173
Some common properties - label, text - which one goes withwhich tag (above)
Monday, June 27, 2011
BUTTONS
7/31/2019 Adobe Flex Class Slides Oct 10
142/173
BUTTONS
Properties: label, id
Events: click
Monday, June 27, 2011
LABELS
7/31/2019 Adobe Flex Class Slides Oct 10
143/173
LABELS
Properties: text
Monday, June 27, 2011
TEXT INPUT
7/31/2019 Adobe Flex Class Slides Oct 10
144/173
Properties: text, editable
Events: change Exercise: trace(hi) - wheneverthe text changes
Monday, June 27, 2011
CHECKBOX
7/31/2019 Adobe Flex Class Slides Oct 10
145/173
Properties: selected
Events: change / click
Monday, June 27, 2011
CAN YOU BUILD ME THIS?
7/31/2019 Adobe Flex Class Slides Oct 10
146/173
Monday, June 27, 2011
IF YOU DOWNLOADED THESLIDES YOU CHEATED
7/31/2019 Adobe Flex Class Slides Oct 10
147/173
SLIDES, YOU CHEATED
Monday, June 27, 2011
NOW HOW ABOUT THIS?
7/31/2019 Adobe Flex Class Slides Oct 10
148/173
Monday, June 27, 2011
AND THE ANSWER IS...
7/31/2019 Adobe Flex Class Slides Oct 10
149/173
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
150/173
IF YOU HAVE A HSLIDER
WHAT PROPERTY COULDYOU SET TO MAKE IT 50%
TRANSPARENTHINT: Look it up in the API reference
Monday, June 27, 2011
DATA GRIDS
7/31/2019 Adobe Flex Class Slides Oct 10
151/173
Monday, June 27, 2011
LISTS
7/31/2019 Adobe Flex Class Slides Oct 10
152/173
Monday, June 27, 2011
TABS AND ACCORDIANS
7/31/2019 Adobe Flex Class Slides Oct 10
153/173
1 tab for each child -
Monday, June 27, 2011
MENU BARS
7/31/2019 Adobe Flex Class Slides Oct 10
154/173
Monday, June 27, 2011
CAN YOU BUILD ME THIS?
7/31/2019 Adobe Flex Class Slides Oct 10
155/173
Monday, June 27, 2011
SOURCE CODE
7/31/2019 Adobe Flex Class Slides Oct 10
156/173
Monday, June 27, 2011
CSS
7/31/2019 Adobe Flex Class Slides Oct 10
157/173
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
158/173
REAL CLIENTS LOVE CSS -STORY
Monday, June 27, 2011
MODULARIZATION + FLEX
7/31/2019 Adobe Flex Class Slides Oct 10
159/173
MODULARIZATION FLEX
PACKAGES
Does this:
Monday, June 27, 2011
OTHER NAMESPACES
7/31/2019 Adobe Flex Class Slides Oct 10
160/173
Includes other files in my project
Composites my custom view intothis view
Monday, June 27, 2011
SKINNING - SCALE9
7/31/2019 Adobe Flex Class Slides Oct 10
161/173
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
162/173
DEBUGGING
Monday, June 27, 2011
BREAKPOINTS
7/31/2019 Adobe Flex Class Slides Oct 10
163/173
Monday, June 27, 2011
VARIABLE INSPECTION
7/31/2019 Adobe Flex Class Slides Oct 10
164/173
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
165/173
OK - PLAY AROUND WITHCOMPONENTS FOR A WHILE
7/31/2019 Adobe Flex Class Slides Oct 10
166/173
COMPONENTS FOR A WHILE
Build something with the components
Monday, June 27, 2011
A UI FOR OUR AUDIO PLAYER
7/31/2019 Adobe Flex Class Slides Oct 10
167/173
Demo Application
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
168/173
WHAT WOULD YOU LIKE TOSEE TOMORROW?
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
169/173
DAY 3 - TO BE DETERMINED
POTENTIAL TOPIC SLIDES ARETHERE
Monday, June 27, 2011
APPLICATION STRUCTURE
7/31/2019 Adobe Flex Class Slides Oct 10
170/173
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
171/173
CONVERSATION - WHEREDEVELOPERS HAVE PROBLEMS
Monday, June 27, 2011
7/31/2019 Adobe Flex Class Slides Oct 10
172/173
FLASH + FLEX
Monday, June 27, 2011
DEMO APP
7/31/2019 Adobe Flex Class Slides Oct 10
173/173
http://www.free-online-dice.com
http://www.free-online-dice.com/http://www.free-online-dice.com/