Your SlideShare is downloading. ×
Introduction To Flex
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Introduction To Flex

3,551
views

Published on

Introduction to Flex seminar. just the basics

Introduction to Flex seminar. just the basics

Published in: Technology

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,551
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduction to Flex Chaim Sajnovsky DSP-IP
  • 2. Agenda
    • Introduction to Flex and IDE
      • Hello World
    • Bindable tags
      • Bindable Input text
    • Containers and layouts
      • e-mail request form layout with containers
    • Components and states
      • adding states for navigation to email sample
    • Data sources and Display
      • Display XML Data in a DataGrid
    • Flex and Air
      • basic video player using Air
  • 3. Part I
    • Why Flex?
    • Flex IDE
    • What is MXML?
    • Anatomy of a Flex app
    • Deployment
    • Basic exercise: Hello World
  • 4. Why Flex?
    • With Flash MX, Adobe introduces a acronym:
    • RIA (Rich Internet Application)
    • But developers complain: We don't want to get messy with Flash graphics concept. We want a easy-to-learn tool as the tools we are used to work with.
    • Flex 1 born in 2004, working with AS2
    • Flex 2 born in 2006, now with As3
    • Flex 3 born in 2008, full-fledged version
    • Flex 3 Builder is the official IDE for Flex.
  • 5. Why Flex?
    • Flex IDE areas
    • MXML is a XML library-based language, with a library of specific tags for Flex.
    • Everything you write on MXML, it's written in the background to AS3.
    • To begin with it, just get a free developer Flex Builder 3 for learning at:
    • http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email
  • 6.  
  • 7.  
  • 8. Part II
    • Getting your hands dirty: Coding
    • AS3 in Flex
    • MXML and AS3
    • Using the [Bindable] tag
    • Debbuging
    • Exercise: Binding Input text
  • 9. MXML and ActionScript Flex Class Library
  • 10. How Flex works… XML/HTTP REST SOAP Web Services Browser J2EE Application Server Flex Data Services 2 Flash Player Web Server Existing Applications and Infrastructure Flex Builder IDE Flex Builder MXML ActionScript Flex Class Library Compile Data Data .swf .swf .swf
  • 11. Coding
    • As in a classic XML, code goes inside [CDATA]
    • The tag is <mx:Script></mx:Script>
    • Code can be inside or outside the application tags
    • The [Bindable] tag says to Flex my data will be broadcasted through the app.
  • 12. [CDATA]
    • <mx:Script>
    • <![CDATA[
    • public var myText:String = &quot;Welcome to Flex!&quot; ;
    • function createMyName():String
    • {
    • var myFirstName:String = &quot;Charles&quot; ;
    • var myLastName:String = &quot;Brown&quot; ;
    • return myFirstName + &quot; &quot; + myLastName;
    • }
    • ]]>
    • </mx:Script
  • 13. At the mxml...
    • <mx:Label text=&quot;{addNumbers(2, 3)}&quot; id=&quot;myLabel&quot; />
    • References to AS3 goes between { }
    • Easy, right? But we need to broadcast this AS3 functions to the general app, so.
  • 14. Bindable
    • <mx:Script>
    • <![CDATA[
    • [Bindable]
    • var myText:String = &quot;Welcome to Flex!&quot; ;
    • function addSum(number1:Number, number2:Number): void
    • {
    • var sum:int = number1 + number2;
    • myText = &quot;The sum of the numbers is&quot; + &quot; &quot; + sum;
    • }
    • ]]>
    • </mx:Script>
  • 15. Bindable
    • Warning!
    • Bindable is a tricky one:
    • When you use the [Bindable] metadata tag before a public class definition, it only applies to public properties; it does not apply to private or protected properties, or to properties defined in any other namespace. You must insert the [Bindable] metadata tag before a nonpublic property to make it usable as the source for a data binding expression.
  • 16. Part III
    • Containers
    • Exercise: Create a simple e-mail request form layout with containers
  • 17. Containers
    • Layout containers
    • Navigation
    • States
  • 18. Layout
    • Application container- Main
    • Layout container-
    • Absolute: You set the components
    • location
    • Horizontal: Automatically sets components horizontally
    • Vertical: Automatically sets components vertically
  • 19. Part IV
    • Components and states
    • Exercise: taking our email form and adding states for navigation
  • 20. Navigation
    • Components for navigating the app.
  • 21. States:
    • How we make it without a timeline?
    • With STATES.
  • 22. Part V
    • Flex and XML
    • Data sources
    • XML in AS3
    • Displaying data
    • Exercise: Loading an external Users list XML and displaying it in a DataGrid.
  • 23. Adding dynamic Data
    • Data sources
    • XML loading:<mx:HTTPService>
    • Data Grids
  • 24. HTTP services
    • The way to load XML
    • <mx:HTTPService id=&quot;bookData&quot; url=&quot;../assets/books.xml&quot; />
    • The 1 line simple tag to connect with Dynamic data...
  • 25. HTTP services and Data grid
    • <mx:DataGrid x=&quot;56&quot; y=&quot;250&quot; width=&quot;950&quot;/>
    • <mx:DataGrid x=&quot;56&quot; y=&quot;250&quot; width=&quot;950&quot; dataProvider = 
    • &quot;{bookData.lastResult.books.stock}&quot;/>
  • 26. Part VI
    • Validating input data
    • Flex and Air
    • Exercise: Creating a basic video player with Flex and Air
  • 27. More advanced Flex
    • Validating input data
    • Flex and AIR
    • Final exercise: Video Player with AIR
  • 28. More advanced Flex
    • Validating input data:
    • <mx:StringValidator id=&quot; firstNameValidator &quot;
    • source=&quot; { firstNameTextInput } &quot;
    • property=&quot; text &quot; />
  • 29. More advanced Flex
  • 30. DSP-IP Contact information
    • Flash/Flex Development Services :
      • Yossi Cohen
      • [email_address]
      • 09-8850956, 054-5313092
    • Flash / Flex Courses & Seminars:
      • Alona Ashkenazi
      • [email_address]
      • 09-8651933
    www.dsp-ip.com Giborey Israel 20, POB 8323, Netanya Office Phone: 09-8850956, Fax: 050- 8962910