Flex Presentation - Www.waltschlender.com - Apr14

FLEX Working with a new view - By Walt Schlender http://www.waltschlender.com Thursday, April 16, 2009

1

DEMO CODE IS AVAILABLE For use at - http://www.free-online-dice.com And as souce at- http://www.waltschlender.com Thursday, April 16, 2009

2

3 WAYS TO ADD A LINK TO A WEB PAGE

Thursday, April 16, 2009

3

USE HTML

Thursday, April 16, 2009

4

#2 USE FLASH

Thursday, April 16, 2009

5

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

Thursday, April 16, 2009

6

STEP 2 Convert the text and button image into movie clips

Thursday, April 16, 2009

7

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

Thursday, April 16, 2009

8

STEP 4 Open the code editor and add the following code to the first frame of the “timeline?”

Thursday, April 16, 2009

9

RUN IT The result:

Thursday, April 16, 2009

10

ANYBODY HAVE QUESTIONS WHY THE WEB WASN’T BUILT IN FLASH?

Thursday, April 16, 2009

11

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

Thursday, April 16, 2009

12

THE RESULTS

Thursday, April 16, 2009

13

SO NOW WE KNOW WHAT FLEX IS: An extension to the ActionScript 3.0 language which makes writing and maintaining user interfaces in flash similar to writing user interfaces using HTML.

Thursday, April 16, 2009

14

WHY SHOULD YOU PAY ATTENTION TO FLEX?

Thursday, April 16, 2009

15

ARE YOU TRYING TO BE INNOVATIVE? - Ribbit - powered Flex phone app

FLARToolkit augmented reality -

- Google Street view and GMail(?) Thursday, April 16, 2009

16

ARE YOU A DEVELOPER?

Thursday, April 16, 2009

17

WHAT ELSE IS BEING DONE WITH FLEX? RIAs Dashboards Desktop Apps Widgets

Thursday, April 16, 2009

18

RICH INTERNET APP(S)

Thursday, April 16, 2009

19

DASHBOARDS

Need a control panel for your yacht? - Intelisea

Thursday, April 16, 2009

20

DESKTOP APPS

- Tweetdeck Thursday, April 16, 2009

21

WIDGETS/COMPONENT KITS

Thursday, April 16, 2009

22

AND NOW, A FLEX CONVERT Please welcome Chet from Adobe - He’ll tell you a bit about ActionScript, it’s syntax and how the similarity it has to Java

Thursday, April 16, 2009

23

SAMPLE CODE

Thursday, April 16, 2009

24

SETTLERS OF CATAN

Thursday, April 16, 2009

25

DEMO PROJECT Total development time 3 1/2 hours Technologies - Flex, Flash, Papervision3D, AIR

Thursday, April 16, 2009

26

APPLICATION REQUIREMENTS - It must look cool - It must keep track of all rolls and allow me to analyze them. -It needs to have simple code - It must run on my computer when I don’t have a web access. - I’d like to use it as a demo project on my web site, so it should also work on the web.

Thursday, April 16, 2009

27

APPLICATION STRUCTURE Controller DiceModel RecordModel

Thursday, April 16, 2009

DiceView RecordView

28

MODEL LAYER DieVO - Red

Dice Model

White

Roll Record Model

Arrays RollRecordVO

Evt FrequencyVO

Thursday, April 16, 2009

29

THE DICEMODEL

Thursday, April 16, 2009

30

[BINDABLE] = I’M WATCHING YOU View <mx:Label text=”{model.value}” />

2. Changes Here Model [Bindable] var value:int

Thursday, April 16, 2009

= 10;

1. Changes Here Become...

31

ROLLRECORDMODEL

Thursday, April 16, 2009

32

ROLLRECORD BINDINGS

Thursday, April 16, 2009

33

ROLLRECORD END...

Thursday, April 16, 2009

34

FREQUENCY VOS AND ROLLRECORD VOS

Thursday, April 16, 2009

35

THE VIEW LAYER DiceView AnalyticsView

DieView DieView ColumnChart

Red Material

White Material

DataBreakout Assets SWF

Thursday, April 16, 2009

36

THE ANALYTICS VIEW PART I

Thursday, April 16, 2009

37

THE ANALYTICS VIEW PART II

Thursday, April 16, 2009

38

DATA BREAKOUT VIEW

Thursday, April 16, 2009

39

THE DICE VIEW I

Thursday, April 16, 2009

40

DICE VIEW 2

Thursday, April 16, 2009

41

DIE VIEW

Thursday, April 16, 2009

42

RED MATERIAL

Thursday, April 16, 2009

43

TYING IT ALL TOGETHER I

Thursday, April 16, 2009

44

TYING IT ALL TOGETHER II

Thursday, April 16, 2009

45

AND THE END RESULT:

Thursday, April 16, 2009

46

GET STARTED 1. Get FlexBuilder https://freeriatools.adobe.com/

YAY! - or 299$ (99$ to upgrade) - through store - free trial for 60 days

Thursday, April 16, 2009

47

2. GO HERE http://livedocs.adobe.com/flex/3/langref/ - Bookmark This

Thursday, April 16, 2009

48

STEP 3. HAVE FUN!!! And here are some other general resources for you http://www.waltschlender.com - email me questions / I’ll be listing resources and posting code on my site opensource.adobe.com - JavaFlexBridge FlexCoders mailing list - Questions? Send them there. SILVAFUG - Silicon Valley Flex Users Group - silvafug.org

Thursday, April 16, 2009

49

AND JAVA SPECIFIC RESOURCES BlazeDS & Spring http://ria.dzone.com/articles/introduction-spring-blazeds http://www.springsource.org/spring-flex http://flex.org/java

Chet’s articles: http://www.javaworld.com/javaworld/jw-02-2009/jw-02-actionscript1.html http://www.javaworld.com/javaworld/jw-03-2009/jw-03-actionscript2.html

Thursday, April 16, 2009

50