Adobe Flex Class Slides Oct 10

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


2/173

CONTACT INFO

email: [email protected]: http://www.waltschlender.com

http://www.waltschlender.com/http://www.waltschlender.com/mailto:[email protected]:[email protected]


3/173

DAY 1



4/173

3 WAYS TO ADD A LINK TO A

WEB PAGE



5/173

USE HTML



6/173

#2 USE FLASH



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.



8/173

STEP 2Convert the text and button image into movie clips



9/173

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



10/173

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



11/173

RUN ITThe result:



12/173

ANYBODY HAVE QUESTIONSWHY THE WEB WASNT BUILT

IN FLASH?



13/173

#3 USE FLEXOpen Flex Builder, create a new project, enter the followingcode:



14/173

THE RESULTS



15/173

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

better...



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?



17/173

WEB APPLICATION

ARCHITECTURE



18/173

MODELS, VIEWS, CONTROLLERS

Model

Middleware

View

Hang this above your bed!



19/173


20/173

MODEL? VIEW? CONTROLLER?



21/173




22/173




23/173




24/173




25/173

LOCAL APPLICATION

Model - Database, File, Object Map

Controller - C++, Ruby, Java, C#

View - Cocoa (Mac), .Net Framework (win)

YourPersonal Computer



26/173

ACTIONSCRIPT

What is Flex/Flash & Why Should You Care?

Variables

Functions

Events

Objects/Classes

Play!



27/173

BASIC WEB APPLICATION

View - HTML


Controller - PHP, Java, Ruby, ASP

Web Server

Your Computer

HTML textis sent across the web



28/173

A WEB APPLICATION

View - HTML & JavaScript or Flash/Flex


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)



29/173


30/173


31/173

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



32/173

A REQUEST IS MADE TOGOOGLE.COM



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

http://www.google.com/#http://www.google.com/#


34/173

A DATABASE QUERY IS MADE



35/173

THE RESULTS ARE PROCESSED

INTO HTMLMonday, June 27, 2011


36/173

THE RESULT IS SENT BACK TOTHE USER



37/173

WEB APPLICATIONSMORE COMPLICATED... FLOW IS MOSTLY THE SAME BUT...



38/173

SERVER RESPONSECONTAINS SWF OR AJAX

CODE

SERVER USERSBROWSER



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



40/173

50000FTHow do you construct these building blocks?



41/173

RIGHT TOOL FOR THE JOB

Java

Ruby

HTML

Flash

Flex

JavaScript

Model Languages

View Languages

PHP

JSP

Template Languages



42/173

VIEW LANGUAGES

HTML, AJAX, FLASH(ActionScript)/FLEX



43/173

FLASH? AJAX?



44/173

FLASH? AJAX?



45/173

FLASH? AJAX?

http://www.youtube.com/experiencewiiNot the video player

http://www.youtube.com/experiencewiihttp://www.youtube.com/experiencewii


46/173

FLASH? AJAX?



47/173

FLASH? AJAX?



48/173

FLASH? AJAX?

http://www.justin.tv

http://www.justin.tv/http://www.justin.tv/


49/173

HAVE YOU SEEN THIS?

FLARToolkit -augmented reality -

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


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


50/173

HTML FIRST

Small HTML page demo

text: hi from walt



51/173

MOVING BOX DIV DEMO

JavaScript

text: hi from walt

Move this div around the screenwhen the user clicks



52/173

OBJECT ORIENTED

PROGRAMMINGACTIONSCRIPT THIRDis a bird

function quack

function swim

has wings



53/173

CLASSES (OBJECTS)

public class BatMobile{}



54/173

VARIABLES (INSTANCES)

var mobile1:BatMobile = new BatMobile();



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();


ARRAY & ARRAYCOLLECTION


56/173

ARRAY & ARRAYCOLLECTIONvar utilityBeltSlots:Array = new Array;

utilityBeltSlots[0] = new ThrowingStar();utilityBeltSlots[1] = new GrapplingHook();

utilityBeltSlots[2] = new CellPhone();


FUNCTIONS


57/173

FUNCTIONSpublic function startBatMobile():void{}



58/173

EVENT DISPATCHING

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

}}


EVENT LISTENING


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



60/173

CONDITIONALS

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

}

A function we defined elsewhere



61/173

INHERITANCE - IS A...

public class BatMobile extends Sprite{}

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


CLASS LAYOUT


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;

}

}

}

}



63/173

LOOPS

for(var i:int=0; i < 12; i++){

trace(The + i + day of christmas);}



64/173

THE FLASH PLAYER

The Stage

Your RootObject

Redraw 30x per

second

Child 1 Child 2

Child 1


WERE GOINGTO CODE BUT


65/173

WERE GOING TO CODE BUT

BEFORE WE DO... CamelCase

Indenting



66/173

:(



67/173

LETS BUILD SOMETHING

SMALL

Falling Ball Demo



68/173

WHERE DO YOU SEE FLASH/

FLEX BEING USED? + WHY?



69/173

RICH INTERNET APP(S)



70/173

DASHBOARDSNeed a control panel for your yacht? - Intelisea



71/173

DESKTOP APPS

- Tweetdeck



72/173

WIDGETS/COMPONENT KITS



73/173

FLEX - WELL TACKLETOMORROW



74/173

MODELS

The Simplest of Models



75/173

XML

Make these up... just be consistent



76/173

WHERE OTHERPROGRAMMING

LANGUAGES FITWhy should you care aboutprogramming languages? Youre

trying to sell one, youd better knowwhat else is out there.



77/173

WHAT DO YOU THINK MAKESA LANGUAGE POPULAR?


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


78/173

PARSING QUERY STREAM

PARAMETERS

Ruby

Java

p p g p g

http://www.example.com/?username=


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



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



81/173

GENERATE XML WITH PHP AND JAVA

Excerpt



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



83/173

PARSING XML USING ACTIONSCRIPT3



84/173

PARSING XML USING AJAXMonday, June 27, 2011


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



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



87/173

IS THERE ANYTHING IN THESE

LANGUAGES WHICH YOULIKE? DISLIKE?



88/173

BUILD AN XML PARSER INACTIONSCRIPT - TO

CONTROL A MUSIC PLAYER

Exercise - Well go through this together




89/173


XML Parser




90/173


Audio Player -- flash Sound class - plays MP3s



91/173

TRICK QUESTION - BOTH ARE

MODELSNo view, user cant control anything



92/173

Model - XML file arser & Audio Ob ect

Controller - MainA S rite

View - NONE



93/173

DAY 2


FLEX BUILDER FLEX


94/173

FLEX BUILDER + FLEX



95/173

FLEXAn extension to ActionScript which makes writing views easier- similar in difficulty to writing HTML views

Includes:



96/173

COMPONENT FRAMEWORKCollection of buttons, labels, textfields and other tools to help

speed development along for developers



97/173

SMALL SEGUE - WHAT IT

USED TO BE LIKE WITH FLASH4 people on a team



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



99/173

NOW

Button = Label =


MXML - TAG VERSION OF


100/173

ACTIONSCRIPT

NamespaceOutput

Tags



101/173

COMMON PROPERTIES MOSTTAGS HAVE

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



102/173

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



103/173

TEACH A MAN TO FISH...http://livedocs.adobe.com/flex/3/langref/ - Bookmark This


HOW TO READ A LANGUAGE
http://livedocs.adobe.com/flex/3/langref/http://livedocs.adobe.com/flex/3/langref/


104/173

REFERENCE

- Packages



105/173


106/173

INHERITANCE HIERARCHY


SYNTAX DETAILS


107/173

SYNTAX DETAILS


PROPERTIES - PUBLIC PRIVATE


108/173

PROTECTED


METHODS


109/173

METHODS


INHERITED PUBLIC METHODS


110/173

INHERITED PUBLIC METHODS


EVENTS


111/173

EVENTS


EVENT DETAILS


112/173

EVENT DETAILS


HOWTO USE


113/173

HOW TO USE


EXAMPLE


114/173

EXAMPLE



115/173

LETS BUILD OUR FIRST FLEX

APPLICATIONSimple label and button


DISPLAY A COMPONENT FOR


116/173

DISPLAY A COMPONENT FOR

ME - EACH PERSON 1COMPONENT

Menu,Label,

ColumnChart *

DataGridTextInput


MXML IS REALLY ACTIONSCRIPT - BELIEVE ME?


117/173

Tag re-writing language - this and this are the same thing. Do

you believe me?



118/173

HERES ONE OF EACH OFTHOSE OBJECTS


THE INTERMEDIATE CODE


119/173

THE INTERMEDIATE CODE

FILE


WHY WOULD YOU WANT TOUSER MXML?


120/173

USER MXML?

Why did you build

MXML?


[BINDABLE] = IM WATCHING YOU


121/173

Model

View

[Bindable]var value:int = 10; 1. Changes Here Become...

2. Changes Here


TYPICAL FLEX APPLICATION


122/173

STRUCTURE

Model - ActionScri t

Controller - ActionScri t

View - FLEX

Server

Binding


TOOL WE USE FLEXBUILDER


123/173

TOOL WE USE - FLEXBUILDER


FLEX BUILDER COMPILE


124/173

FLEX BUILDER COMPILE

Compile == Process & ZIP


APPLICATIONS CAN


125/173

ActionScript3

MXML

HTML

JavaScript

Libraries

CONTAIN...

Socket encryption,3D,

Flickr Integration


ONCE WE HAVE OUR CODE


126/173

COMPILED...

Copy these

Web Server




127/173


Flickr Viewer - Chapter 3 in our book




128/173

private var photoFeed:ArrayCollection;




129/173




130/173


Flex Image Component -



131/173

DATA PROVIDERS

Model View

Set the views dataProvider property to the model...


ITEM RENDERER


132/173

ITEM RENDERER

Model

XML XML XML XML XML XML

TileList

Watching our model

XML

Children

.

.

.



133/173

FLEX CONTROLS ANDLAYOUT - CHAPTER 4 IN OUR

BOOK



134/173

THE APPLICATIONCONTAINER


THE BOX CLASS


135/173

HBox

VBox


CANVAS CONTAINER(0 0)


136/173

(0,0)

Label: x-200 y-200


CANVAS CONTAINER -RELATIVE POSITIONING


137/173

RELATIVE POSITIONING


THE FORM CONTAINER


138/173


THE VISUAL EDITOR


139/173


THE PANEL CONTAINER


140/173


CONTROLS


141/173

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


BUTTONS


142/173

BUTTONS

Properties: label, id

Events: click


LABELS


143/173

LABELS

Properties: text


TEXT INPUT


144/173

Properties: text, editable

Events: change Exercise: trace(hi) - wheneverthe text changes


CHECKBOX


145/173

Properties: selected

Events: change / click


CAN YOU BUILD ME THIS?


146/173


IF YOU DOWNLOADED THESLIDES YOU CHEATED


147/173

SLIDES, YOU CHEATED


NOW HOW ABOUT THIS?


148/173


AND THE ANSWER IS...


149/173



150/173

IF YOU HAVE A HSLIDER

WHAT PROPERTY COULDYOU SET TO MAKE IT 50%

TRANSPARENTHINT: Look it up in the API reference


DATA GRIDS


151/173


LISTS


152/173


TABS AND ACCORDIANS


153/173

1 tab for each child -


MENU BARS


154/173


CAN YOU BUILD ME THIS?


155/173


SOURCE CODE


156/173


CSS


157/173



158/173

REAL CLIENTS LOVE CSS -STORY


MODULARIZATION + FLEX


159/173

MODULARIZATION FLEX

PACKAGES

Does this:


OTHER NAMESPACES


160/173

Includes other files in my project

Composites my custom view intothis view


SKINNING - SCALE9


161/173



162/173

DEBUGGING


BREAKPOINTS


163/173


VARIABLE INSPECTION


164/173



165/173

OK - PLAY AROUND WITHCOMPONENTS FOR A WHILE


166/173

COMPONENTS FOR A WHILE

Build something with the components


A UI FOR OUR AUDIO PLAYER


167/173

Demo Application



168/173

WHAT WOULD YOU LIKE TOSEE TOMORROW?



169/173

DAY 3 - TO BE DETERMINED

POTENTIAL TOPIC SLIDES ARETHERE


APPLICATION STRUCTURE


170/173



171/173

CONVERSATION - WHEREDEVELOPERS HAVE PROBLEMS



172/173

FLASH + FLEX


DEMO APP


173/173

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

Adobe Flex Class Slides Oct 10

Documents

Transcript of Adobe Flex Class Slides Oct 10