SlideShare una empresa de Scribd logo
1 de 14
Descargar para leer sin conexión
Building Flash-based websites using Flex

       Lesson 2 – Flex Essentials




                 Alex Goh
                 info@alekkus.com
Agenda

●   Adobe Flex Builder

●   Flex Programming

●   UI Components

●   Customising UI Component

●   Skinning using CSS
Adobe Flex Builder

●   Adobe's development tool for developing Flex applications




    ●   Retail price - US$249
    ●   60 days trial - http://www.adobe.com/products/flex/
    ●   Free to student - https://freeriatools.adobe.com/flex/
    ●   Free to unemployed developers - https://freeriatools.adobe.com/learnflex/

● Alternatively, any text editor can be used to do coding; compile to SWF using
the Adobe's Flex compiler (free)
Adobe Flex Builder – Design mode

Project file navigator   Design area   Component Properties




Drawing components
Adobe Flex Builder – Source mode

Project file navigator   Source codes edit area
Flex Programming


                                 Design mode




                                                          Source mode




●   Flex programming uses a mixture of MXML and Actionscript 3 codes.

●   MXML, like HTML, is mainly to draw the user interface components.

● Actionscript, like Javascript, allows more complex user interactions or
application behaviour.

● Note that there's always an equivalent Actionscript code for all MXML code,
but not vice versa.
Common Flex UI Components - Controls


      Label:               Datagrid:
  TextInput:
  TextArea:


ComboBox:
 CheckBox:
 RadioBox:             DateChooser:
     Button:
ColorPicker:
 DateField:
    Hslider:
     Image:
Common Flex UI Components – Layout and Navigators


 Canvas:               TabNavigator:




  HBox:
                          Accordion:

  VBox:




    Tile:
Customising Flex UI Components

● Flex provides many basic UI components to get you started. Once you are
profiicent, you can make your own UI components or customise the existing
ones.
Skinning UI Components using CSS

●   Customising UI components requires in-depth knowledge of Actionscript.

●   For newcomers, use CSS to change the appearance of UI components.
Data Binding

● Ensure a property or variable always get the latest value of another property
or variable

●   e.g.
Image Component

●Flex Image component accept the following file formats: JPG, GIF, PNG,
SWF (for vector)

●   Image can be load at runtime or embed into the SWF file

●   Load image at runtime




● Embed into SWF file – No need to wait for image to load, but SWF file size
increases
Official Adobe Flex Documentation

●   A MUST-HAVE when developing Flex application

●   Launch from Flex Builder, Help > Help contents, or Shift + F2.
Resources


●   Flex component explorer - http://www.adobe.com/devnet/flex/tourdeflex/

●   Flex examples and source codes - http://blog.flexexamples.com/

Más contenido relacionado

Más de Stefano Virgilli

Prototyping mobile apps_with_adobe
Prototyping mobile apps_with_adobePrototyping mobile apps_with_adobe
Prototyping mobile apps_with_adobeStefano Virgilli
 
All about colour - by Stefano Virgilli
All about colour - by Stefano VirgilliAll about colour - by Stefano Virgilli
All about colour - by Stefano VirgilliStefano Virgilli
 
Blending modes presentation
Blending modes presentationBlending modes presentation
Blending modes presentationStefano Virgilli
 
Building Flash-based websites using Adobe Flex - Lesson 10/10
Building Flash-based websites using Adobe Flex - Lesson 10/10Building Flash-based websites using Adobe Flex - Lesson 10/10
Building Flash-based websites using Adobe Flex - Lesson 10/10Stefano Virgilli
 
Building Flash-based websites using Adobe Flex - Lesson 4/10
Building Flash-based websites using Adobe Flex - Lesson 4/10Building Flash-based websites using Adobe Flex - Lesson 4/10
Building Flash-based websites using Adobe Flex - Lesson 4/10Stefano Virgilli
 
Building Flash-based websites using Adobe Flex - Lesson 3/10
Building Flash-based websites using Adobe Flex - Lesson 3/10Building Flash-based websites using Adobe Flex - Lesson 3/10
Building Flash-based websites using Adobe Flex - Lesson 3/10Stefano Virgilli
 
Building Flash-based websites using Adobe Flex - Lesson 1/10
Building Flash-based websites using Adobe Flex - Lesson 1/10Building Flash-based websites using Adobe Flex - Lesson 1/10
Building Flash-based websites using Adobe Flex - Lesson 1/10Stefano Virgilli
 
Think again - Demystify graphic design
Think again - Demystify graphic designThink again - Demystify graphic design
Think again - Demystify graphic designStefano Virgilli
 

Más de Stefano Virgilli (9)

Prototyping mobile apps_with_adobe
Prototyping mobile apps_with_adobePrototyping mobile apps_with_adobe
Prototyping mobile apps_with_adobe
 
Cinematography c ot-102
Cinematography c ot-102Cinematography c ot-102
Cinematography c ot-102
 
All about colour - by Stefano Virgilli
All about colour - by Stefano VirgilliAll about colour - by Stefano Virgilli
All about colour - by Stefano Virgilli
 
Blending modes presentation
Blending modes presentationBlending modes presentation
Blending modes presentation
 
Building Flash-based websites using Adobe Flex - Lesson 10/10
Building Flash-based websites using Adobe Flex - Lesson 10/10Building Flash-based websites using Adobe Flex - Lesson 10/10
Building Flash-based websites using Adobe Flex - Lesson 10/10
 
Building Flash-based websites using Adobe Flex - Lesson 4/10
Building Flash-based websites using Adobe Flex - Lesson 4/10Building Flash-based websites using Adobe Flex - Lesson 4/10
Building Flash-based websites using Adobe Flex - Lesson 4/10
 
Building Flash-based websites using Adobe Flex - Lesson 3/10
Building Flash-based websites using Adobe Flex - Lesson 3/10Building Flash-based websites using Adobe Flex - Lesson 3/10
Building Flash-based websites using Adobe Flex - Lesson 3/10
 
Building Flash-based websites using Adobe Flex - Lesson 1/10
Building Flash-based websites using Adobe Flex - Lesson 1/10Building Flash-based websites using Adobe Flex - Lesson 1/10
Building Flash-based websites using Adobe Flex - Lesson 1/10
 
Think again - Demystify graphic design
Think again - Demystify graphic designThink again - Demystify graphic design
Think again - Demystify graphic design
 

Último

Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice documentXsasf Sfdfasd
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationMJDuyan
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsEugene Lysak
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptxraviapr7
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxKatherine Villaluna
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17Celine George
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...CaraSkikne1
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapitolTechU
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRATanmoy Mishra
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphNetziValdelomar1
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptxmary850239
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesMohammad Hassany
 

Último (20)

Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice document
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive Education
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George Wells
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptx
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a Paragraph
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptx
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming Classes
 

Building Flash-based websites using Adobe Flex - Lesson 2/10

  • 1. Building Flash-based websites using Flex Lesson 2 – Flex Essentials Alex Goh info@alekkus.com
  • 2. Agenda ● Adobe Flex Builder ● Flex Programming ● UI Components ● Customising UI Component ● Skinning using CSS
  • 3. Adobe Flex Builder ● Adobe's development tool for developing Flex applications ● Retail price - US$249 ● 60 days trial - http://www.adobe.com/products/flex/ ● Free to student - https://freeriatools.adobe.com/flex/ ● Free to unemployed developers - https://freeriatools.adobe.com/learnflex/ ● Alternatively, any text editor can be used to do coding; compile to SWF using the Adobe's Flex compiler (free)
  • 4. Adobe Flex Builder – Design mode Project file navigator Design area Component Properties Drawing components
  • 5. Adobe Flex Builder – Source mode Project file navigator Source codes edit area
  • 6. Flex Programming Design mode Source mode ● Flex programming uses a mixture of MXML and Actionscript 3 codes. ● MXML, like HTML, is mainly to draw the user interface components. ● Actionscript, like Javascript, allows more complex user interactions or application behaviour. ● Note that there's always an equivalent Actionscript code for all MXML code, but not vice versa.
  • 7. Common Flex UI Components - Controls Label: Datagrid: TextInput: TextArea: ComboBox: CheckBox: RadioBox: DateChooser: Button: ColorPicker: DateField: Hslider: Image:
  • 8. Common Flex UI Components – Layout and Navigators Canvas: TabNavigator: HBox: Accordion: VBox: Tile:
  • 9. Customising Flex UI Components ● Flex provides many basic UI components to get you started. Once you are profiicent, you can make your own UI components or customise the existing ones.
  • 10. Skinning UI Components using CSS ● Customising UI components requires in-depth knowledge of Actionscript. ● For newcomers, use CSS to change the appearance of UI components.
  • 11. Data Binding ● Ensure a property or variable always get the latest value of another property or variable ● e.g.
  • 12. Image Component ●Flex Image component accept the following file formats: JPG, GIF, PNG, SWF (for vector) ● Image can be load at runtime or embed into the SWF file ● Load image at runtime ● Embed into SWF file – No need to wait for image to load, but SWF file size increases
  • 13. Official Adobe Flex Documentation ● A MUST-HAVE when developing Flex application ● Launch from Flex Builder, Help > Help contents, or Shift + F2.
  • 14. Resources ● Flex component explorer - http://www.adobe.com/devnet/flex/tourdeflex/ ● Flex examples and source codes - http://blog.flexexamples.com/