FLEX - BY WALT SCHLENDER FOR ACADEMY X WED OCTOBER 10TH 2010

Monday, June 27, 2011

CONTACT INFO
email: walt.schlender@gmail.com web: http://www.waltschlender.com

Monday, June 27, 2011

DAY 1

Monday, June 27, 2011

3 WAYS TO ADD A LINK TO A WEB PAGE

Monday, June 27, 2011

USE HTML

Monday, June 27, 2011

#2 USE FLASH

Monday, June 27, 2011

STEP 1
Open the Flash IDE (700$) where you will draw + position a button and some text. Youll want to set the text color on your text to purple.

Monday, June 27, 2011

STEP 2
Convert the text and button image into movie clips

Monday, June 27, 2011

STEP 3
Select the link and the button and give them names

Monday, June 27, 2011

STEP 4
Open the code editor and add the following code to the rst frame of the timeline?

Monday, June 27, 2011

RUN IT
The result:

Monday, June 27, 2011

ANYBODY HAVE QUESTIONS WHY THE WEB WASNT BUILT IN FLASH?

Monday, June 27, 2011

#3 USE FLEX
Open Flex Builder, create a new project, enter the following code:

Monday, June 27, 2011

THE RESULTS

Monday, June 27, 2011

WHAT IS FLEX?
Lets move out to a 100000ft view so we can understand better...

Monday, June 27, 2011

2 QUESTIONS:
1. Where does Flex t into a companys technology stack when the company decides to build an application?

2. What makes a programmer want to use a programming language?

Monday, June 27, 2011

WEB APPLICATION ARCHITECTURE

Monday, June 27, 2011

Hang this above your bed! View Middleware Model

MODELS, VIEWS, CONTROLLERS

Monday, June 27, 2011

MODEL? VIEW? CONTROLLER?

Monday, June 27, 2011

MODEL? VIEW? CONTROLLER?

Monday, June 27, 2011

MODEL? VIEW? CONTROLLER?

Monday, June 27, 2011

MODEL? VIEW? CONTROLLER?

Monday, June 27, 2011

MODEL? VIEW? CONTROLLER?

Monday, June 27, 2011

MODEL? VIEW? CONTROLLER?

Monday, June 27, 2011

Your Personal Computer View - Cocoa (Mac), .Net Framework (win) Controller - C++, Ruby, Java, C# Model - Database, File, Object Map

LOCAL APPLICATION
Monday, June 27, 2011

ACTIONSCRIPT
What

is Flex/Flash & Why Should You Care?

Variables Functions Events Objects/Classes Play!

Monday, June 27, 2011

Your Computer View - HTML

HTML text is sent across the web Web Server Controller - PHP, Java, Ruby, ASP Model - Database, File, Object Map

BASIC WEB APPLICATION

Monday, June 27, 2011

Your Web Browser View - HTML & JavaScript or Flash/Flex Controller - (ActionScript3, AJAX) Model - Object Map (ActionScript3, AJAX)

XML/JSON/AMF is sent across the web Web Server Controller - PHP, Java, Ruby, ASP Model - Database, File, Object Map

A WEB APPLICATION
Monday, June 27, 2011

BASIC WEB APPLICATION

EG: GOOGLE.COM

Monday, June 27, 2011

http://www.google.com/#hl=en&q=walt+schlender&btnG=Google+Search&aq=f&oq=walt+schlender&fp=NCbywrawV3w

USER ENTERS WEB ADDRESS INTO THEIR BROWSER

Monday, June 27, 2011

DNS LOOKUP CONVERTS - DOMAIN NAME (GOOGLE.COM) TO IP ADDRESS

Monday, June 27, 2011

A REQUEST IS MADE TO GOOGLE.COM

Monday, June 27, 2011

http://www.google.com/#hl=en&q=walt+schlender&btnG=Google+Search&aq=f&oq=walt+schlender&fp=NCbywrawV3w

SERVER CODE PARSES QUERY STRING PARAMETERS

Monday, June 27, 2011

A DATABASE QUERY IS MADE

Monday, June 27, 2011

THE RESULTS ARE PROCESSED INTO HTML

Monday, June 27, 2011

THE RESULT IS SENT BACK TO THE USER

Monday, June 27, 2011

WEB APPLICATIONS
MORE COMPLICATED... FLOW IS MOSTLY THE SAME BUT...

Monday, June 27, 2011

SERVER

USERS BROWSER

SERVER RESPONSE CONTAINS SWF OR AJAX CODE

Monday, June 27, 2011

Web Page HTML

Flash or AJAX Application

Server

Controller - (ActionScript3, AJAX)

Model - Object Map (ActionScript3, AJAX)

LOADED CODE BEGINS CONVERSATION WITH SERVER - (XML/JSON/AMF)

Monday, June 27, 2011

50000FT
How do you construct these building blocks?

Monday, June 27, 2011

Model Languages
JavaScript

Java
Flex

HTML
Flash

Ruby

Template Languages

PHP JSP

View Languages

RIGHT TOOL FOR THE JOB

Monday, June 27, 2011

VIEW LANGUAGES
HTML, AJAX, FLASH(ActionScript)/FLEX

Monday, June 27, 2011

FLASH? AJAX?

Monday, June 27, 2011

FLASH? AJAX?

Monday, June 27, 2011

FLASH? AJAX?
Not the video player

http://www.youtube.com/experiencewii

Monday, June 27, 2011

FLASH? AJAX?

Monday, June 27, 2011

FLASH? AJAX?

Monday, June 27, 2011

FLASH? AJAX?
http://www.justin.tv

Monday, June 27, 2011

HAVE YOU SEEN THIS?

http://ge.ecomagination.com/smartgrid/?c_id=googaugreal#/augmented_reality

FLARToolkit augmented reality -

Monday, June 27, 2011

HTML FIRST
Small HTML page demo

text: hi from walt

<body>

<div id=block>

Monday, June 27, 2011

MOVING BOX DIV DEMO

JavaScript text: hi from walt <body>

<div id=block>

Move this div around the screen when the user clicks
Monday, June 27, 2011

OBJECT ORIENTED PROGRAMMING ACTIONSCRIPT THIRD

is a bird has wings function quack function swim

Monday, June 27, 2011

CLASSES (OBJECTS)
public class BatMobile{ }

Monday, June 27, 2011

VARIABLES (INSTANCES)
var mobile1:BatMobile = new BatMobile();

Monday, June 27, 2011

VARIABLE TYPES
var x:TYPE = new TYPE();
int

- number (no decimal) - number (with - true/false value

Object

Number

object

- everything is an

decimal)

Your

own type - eg: Batman ex type - eg:

Boolean Array

Pre-dened

- well talk about that on the next slide

Sprite

String

- Letters

Monday, June 27, 2011

ARRAY & ARRAYCOLLECTION

var utilityBeltSlots:Array = new Array; utilityBeltSlots[0] = new ThrowingStar(); utilityBeltSlots[1] = new GrapplingHook(); utilityBeltSlots[2] = new CellPhone();

Monday, June 27, 2011

FUNCTIONS
public function startBatMobile():void{ }

Monday, June 27, 2011

EVENT DISPATCHING
public class BatMobile extends EventDispatcher{ public function handleBatSummons():void{ this.dispatchEvent(new Event(bat-alert)); } }

Monday, June 27, 2011

EVENT LISTENING SOMETHING HAPPENED

mobile1.addEventListener(bat-alert, handleBatAlert); private function handleBatAlert(evt:Event):void{ trace(Wake up Batman); } Your rst debugging tool
Monday, June 27, 2011

CONDITIONALS
A function we dened elsewhere

if(im_faster_than_batman() == true){ trace(I win); }

Monday, June 27, 2011

INHERITANCE - IS A...
public class BatMobile extends Sprite{ }

Pre-built ash object which has visual appearance + x and y position info

Monday, June 27, 2011

CLASS LAYOUT
package{ 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

LOOPS
for(var i:int=0; i < 12; i++){ trace(The + i + day of christmas); }

Monday, June 27, 2011

THE FLASH PLAYER

Your Root Object
Redraw 30x per second

Child 1

Child 2

Child 1

The Stage
Monday, June 27, 2011

WERE GOING TO CODE BUT BEFORE WE DO...

CamelCase Indenting

Monday, June 27, 2011

:(
Monday, June 27, 2011

LETS BUILD SOMETHING SMALL

Falling Ball Demo

Monday, June 27, 2011

WHERE DO YOU SEE FLASH/ FLEX BEING USED? + WHY?

Monday, June 27, 2011

RICH INTERNET APP(S)

Monday, June 27, 2011

Need a control panel for your yacht? - Intelisea

DASHBOARDS

Monday, June 27, 2011

DESKTOP APPS

- Tweetdeck
Monday, June 27, 2011

WIDGETS/COMPONENT KITS

Monday, June 27, 2011

FLEX - WELL TACKLE TOMORROW

Monday, June 27, 2011

MODELS
The Simplest of Models

Monday, June 27, 2011

XML
Make these up... just be consistent

Monday, June 27, 2011

WHERE OTHER PROGRAMMING LANGUAGES FIT

Why should you care about programming languages? Youre trying to sell one, youd better know what else is out there.

Monday, June 27, 2011

WHAT DO YOU THINK MAKES A LANGUAGE POPULAR?

Monday, June 27, 2011

http://www.example.com?username=something&password=something

Java Ruby

PARSING QUERY STREAM PARAMETERS

Monday, June 27, 2011

RUBY PROS/CONS
Pros
Clean

Cons
Slower Hasnt

code - almost english user community

than Java

Strong Cross

platform code - do more with

been around long enough to be super robust small number of developers

Simple

Relatively

less

Fast

to develop in ruby

Monday, June 27, 2011

JAVA PROS/CONS
Pros
Scales Cross

Cons
More

well platform - sort of

complex to develop using Java than alternatives - so you have to write more to do less community documentation isnt easy to get at

Libraries

for just about anything you can imagine have been built of programmers

VERBOSE

Fragmented

Lots

Monday, June 27, 2011

Excerpt

GENERATE XML WITH PHP AND JAVA

Monday, June 27, 2011

PHP PROS/CONS
Pros
Focused Well Has

Cons
Missing

purpose

documented

some of the language features of some of these other languages

well

proven to scale pretty

Installed

on almost all web servers - drop your code and go

Monday, June 27, 2011

PARSING XML USING ACTIONSCRIPT3

Monday, June 27, 2011

PARSING XML USING AJAX

Monday, June 27, 2011

ACTIONSCRIPT PROS/CONS
Pros
Rich Can

Cons
Harder

experience

do anything you want visually (video/audio) do things which cant be done with AJAX Java and C# so easy to learn

to maintain an ActionScript application than HTML application tend to require more skilled & expensive coders to build artistic talent TOO

Can

Applications

Like

Requires

Monday, June 27, 2011

AJAX PROS/CONS
Pros
Open-Source Ubiquitous Quickest Limit

Cons
to what you can accomplish with AJAX to maintain issues

get into

experience to just

Hard

Cross-browser

Large

set of libraries allow for some incredible AJAX applications

Monday, June 27, 2011

IS THERE ANYTHING IN THESE LANGUAGES WHICH YOU LIKE? DISLIKE?

Monday, June 27, 2011

BUILD AN XML PARSER IN ACTIONSCRIPT - TO CONTROL A MUSIC PLAYER

Exercise - Well go through this together

Monday, June 27, 2011

MODEL? VIEW? CONTROLLER?

XML Parser

Monday, June 27, 2011

MODEL? VIEW? CONTROLLER?

Audio Player -- ash Sound class - plays MP3s

Monday, June 27, 2011

TRICK QUESTION - BOTH ARE MODELS

No view, user cant control anything

Monday, June 27, 2011

View - NONE Controller - MainApp Sprite Model - XML le parser & Audio Object

Monday, June 27, 2011

DAY 2

Monday, June 27, 2011

FLEX BUILDER + FLEX

Monday, June 27, 2011

FLEX
An extension to ActionScript which makes writing views easier - similar in difculty to writing HTML views

Includes:
Component Framework Tag Version of ActionScript (MXML) Layout Engine

Data Binding

Monday, June 27, 2011

COMPONENT FRAMEWORK
Collection of buttons, labels, textelds and other tools to help speed development along for developers

Monday, June 27, 2011

SMALL SEGUE - WHAT IT USED TO BE LIKE WITH FLASH

4 people on a team

Monday, June 27, 2011

WE HAD TO BUILD ALL THE PIECES OF AN APP OURSELVES

Skinning - re-surfacing a component for different clients was a PAIN - Id charge lots of money for re-skinning

Monday, June 27, 2011

NOW
Button = <mx:Button /> Label = <mx:Label />

Monday, June 27, 2011

MXML - TAG VERSION OF ACTIONSCRIPT

Tags
Namespace

Output

Monday, June 27, 2011

COMMON PROPERTIES MOST TAGS HAVE

id, editable?, backgroundColor, backgroundImage, style, width, height

Monday, June 27, 2011

LAYOUT ENGINE
HBox, VBox, Canvas... - well cover more of these later

Monday, June 27, 2011

TEACH A MAN TO FISH...

http://livedocs.adobe.com/ex/3/langref/ - Bookmark This

Monday, June 27, 2011

HOW TO READ A LANGUAGE REFERENCE

- Packages

Monday, June 27, 2011

CLASSES

- The building blocks

Monday, June 27, 2011

INHERITANCE HIERARCHY

Monday, June 27, 2011

SYNTAX DETAILS

Monday, June 27, 2011

PROPERTIES - PUBLIC PRIVATE PROTECTED

Monday, June 27, 2011

METHODS

Monday, June 27, 2011

INHERITED PUBLIC METHODS

Monday, June 27, 2011

EVENTS

Monday, June 27, 2011

EVENT DETAILS

Monday, June 27, 2011

HOW TO USE

Monday, June 27, 2011

EXAMPLE

Monday, June 27, 2011

LETS BUILD OUR FIRST FLEX APPLICATION

Simple label and button

Monday, June 27, 2011

DISPLAY A COMPONENT FOR ME - EACH PERSON 1 COMPONENT

Menu, Label, ColumnChart * DataGrid TextInput

Monday, June 27, 2011

MXML IS REALLY ACTIONSCRIPT - BELIEVE ME?

Tag re-writing language - this and this are the same thing. Do you believe me?

Monday, June 27, 2011

HERES ONE OF EACH OF THOSE OBJECTS

Monday, June 27, 2011

THE INTERMEDIATE CODE FILE

Monday, June 27, 2011

WHY WOULD YOU WANT TO USER MXML?

Why did you build MXML?

Monday, June 27, 2011

[BINDABLE] = IM WATCHING YOU

View
<mx:Label text={model.value} />

2. Changes Here Model

[Bindable] var value:int = 10;

1. Changes Here Become...

Monday, June 27, 2011

TYPICAL FLEX APPLICATION STRUCTURE Binding

View - FLEX Controller - ActionScript Model - ActionScript

Server
Monday, June 27, 2011

TOOL WE USE - FLEXBUILDER

Monday, June 27, 2011

FLEX BUILDER COMPILE

Compile == Process & ZIP

Monday, June 27, 2011

APPLICATIONS CAN CONTAIN...

ActionScript3 MXML HTML JavaScript Libraries

Socket encryption, 3D, Flickr Integration

Monday, June 27, 2011

ONCE WE HAVE OUR CODE COMPILED...

Web Server Copy these

Monday, June 27, 2011

LETS BUILD SOMETHING

Flickr Viewer - Chapter 3 in our book

Monday, June 27, 2011

MODEL? VIEW? CONTROLLER?

private var photoFeed:ArrayCollection;

Monday, June 27, 2011

MODEL? VIEW? CONTROLLER?

<mx:Application></mx:Application>

Monday, June 27, 2011

MODEL? VIEW? CONTROLLER?

Flex Image Component - <mx:Image />

Monday, June 27, 2011

DATA PROVIDERS
Set the views dataProvider property to the model...
Model View

Monday, June 27, 2011

ITEM RENDERER
Children

TileList . . .
XML
Monday, June 27, 2011

Watching our model

Model

XML

XML

XML

XML

XML

XML

FLEX CONTROLS AND LAYOUT - CHAPTER 4 IN OUR BOOK

Monday, June 27, 2011

THE APPLICATION CONTAINER

Monday, June 27, 2011

THE BOX CLASS

HBox

VBox

Monday, June 27, 2011

CANVAS CONTAINER
(0,0)

Label: x-200 y-200

Monday, June 27, 2011

CANVAS CONTAINER RELATIVE POSITIONING

Monday, June 27, 2011

THE FORM CONTAINER

Monday, June 27, 2011

THE VISUAL EDITOR

Monday, June 27, 2011

THE PANEL CONTAINER

Monday, June 27, 2011

CONTROLS
<mx:Button /><mx:Label /><mx:TextInput />

Some common properties - label, text - which one goes with which tag (above)

Monday, June 27, 2011

BUTTONS
<mx:Button /> <mx:LinkButton /> Properties: label, id Events: click

Monday, June 27, 2011

LABELS

Properties: text

Monday, June 27, 2011

TEXT INPUT
Events: change Properties: text, editable Exercise: trace(hi) - whenever the text changes

Monday, June 27, 2011

CHECKBOX
Properties: selected

Events: change / click

Monday, June 27, 2011

CAN YOU BUILD ME THIS?

Monday, June 27, 2011

IF YOU DOWNLOADED THE SLIDES, YOU CHEATED

Monday, June 27, 2011

NOW HOW ABOUT THIS?

Monday, June 27, 2011

AND THE ANSWER IS...

Monday, June 27, 2011

IF YOU HAVE A HSLIDER WHAT PROPERTY COULD YOU SET TO MAKE IT 50% TRANSPARENT
HINT: Look it up in the API reference

Monday, June 27, 2011

DATA GRIDS

Monday, June 27, 2011

LISTS

Monday, June 27, 2011

TABS AND ACCORDIANS

1 tab for each child <mx:TabNavigator> <mx:HBox label=Hi> </mx:HBox> <mx:HBox label=There> </mx:HBox> </mx:TabNavigator>

Monday, June 27, 2011

MENU BARS

Monday, June 27, 2011

CAN YOU BUILD ME THIS?

Monday, June 27, 2011

SOURCE CODE

Monday, June 27, 2011

CSS

Monday, June 27, 2011

REAL CLIENTS LOVE CSS STORY

Monday, June 27, 2011

MODULARIZATION + FLEX PACKAGES

Does this:

Monday, June 27, 2011

OTHER NAMESPACES

Includes other les in my project Composites my custom view into this view

Monday, June 27, 2011

SKINNING - SCALE9

Monday, June 27, 2011

DEBUGGING

Monday, June 27, 2011

BREAKPOINTS

Monday, June 27, 2011

VARIABLE INSPECTION

Monday, June 27, 2011

STEPPING THROUGH CODE

Monday, June 27, 2011

OK - PLAY AROUND WITH COMPONENTS FOR A WHILE

Build something with the components

Monday, June 27, 2011

A UI FOR OUR AUDIO PLAYER

Demo Application

Monday, June 27, 2011

WHAT WOULD YOU LIKE TO SEE TOMORROW?

Monday, June 27, 2011

DAY 3 - TO BE DETERMINED POTENTIAL TOPIC SLIDES ARE THERE

Monday, June 27, 2011

APPLICATION STRUCTURE

Monday, June 27, 2011

CONVERSATION - WHERE DEVELOPERS HAVE PROBLEMS

Monday, June 27, 2011

FLASH + FLEX

Monday, June 27, 2011

DEMO APP
http://www.free-online-dice.com

Monday, June 27, 2011