สไลด์สอน The Basic Flex Training โครงการ NESDEV

1. The Basic Flex Training
โดย
นายนพดล สดรัมย์

2. About me
• นักพัฒนาซอฟต์แวร์อิสระ
• สมาชิกศูนย์บ่มเพาะธุรกิจซอฟต์แวร์ อีสานฯ
• อนุกรรมการฝ่ายไอที หอการค้าจังหวัด
ขอนแก่น

3. What’s Flex?
• Flex is Frameworks for build Flash
application
• Web application (Internet browser + Flash
Player Plugins)
• Desktop application (AIR - Adobe
Integrated Runtime)

4. Introduction of MXML
and ActionScript 3.0
• MXML is tag for create UI view or declare
some object
• ActionScript 3.0 is structural programming
language
• MXML + ActionScript 3.0 = Application
Comparison : MXML like HTML and ActionScript like
JavaScript

6. Using Binding and
Components
• Binding for reduce coding
• MXML data binding ({...})
• ActionScript data binding
(BindingUtils.bindProperty(...))

7. Debugging Flex
Application
• Debug perspective for analyze your code
• Trace method (trace(...))
• Breakpoint (pause your app. process)

9. Working with Events
• Simple Events coding (in-line coding)
• Type of Events
• Events listener (code and tag separate
concept)
• Customized Events (make more events are
you need)

10. Using Flex Visual
Controls
• Simple control (Button, CheckBox,
TextInput and etc.)
• Introduce Flash Builder and create UI with
controls
• Source and Design view in Flash Builder
• Control action programming (Events
dispatch)

11. Source view
Controls
Design view

12. Working with Text
• Introduction TextField extended class
control (Label, Text, TextInput, TextArea)
• Font management (Ex. Thai font)
• Display HTML format

13. Label TextInput
TextArea

14. Using Layout
Containers
• Introduction to Layout Containers
• How to use? (Box, Group and etc.)
• Repeat container (Repeater)

15. Using CSS
• MXML style decoration (in-line styling)
• Create CSS in Flex
Hint : Google search key word “flex style explorer”

16. Animation and Drag
and Drop
• Animation and Effect classes
• Build simple animate in Flex (Fade, Grow,
Rotate, Resize, etc.)
• Advanced animate in Flex (Parallel,
Sequence, Pause, Transition etc.)
• Drag and Drop management
Continue...

17. Animation and Drag
and Drop
• Drag and Drop in extended ListBase class
controls (Ex. DataGrid, List etc.)
• Drag and Drop in simple control (Image)

18. Managing View States
• State definition
• State management

19. Declaring Graphics
with MXML and FXG
• Introduction to graphic programming
• Advantage of MXML
• Make graphic with MXML and FXG

20. Application Navigation
• Flex application navigation concept
• Introduction to Navigation container
• Using Navigate container (ViweStack,
TabNavigator, Accordion etc.)

21. Pop-up windows
• Introduction to Pop-up controls
(TitledWindow)
• Pop-up management

22. Data Entry Forms
• Build simple UI form
• Form data management
• How to send data to server

23. HTTP and XML
• Introduction to sending and receiving data
on HTTP protocol
• How to use XML by Flex application

24. Mini workshop
• Button Lucky Game

25. Tools and Resource
• Adobe Flash Builder
• Flash Player Plug-ins/Flash Player Debugger
• Tour De Flex
• NetBeans (PHP coding)
• ZamfBrowser
• ZendFrameWorks
• Adobe AIR

26. Where to go from here
http://www.adobe.com/devnet/flex/
Flex, ActionScript Guide Block
http://thaiflexdev.wordpress.com
Facebook : RIA Group

27. Reference
http://www.slideshare.net/tbisaacs/flash-flex-air-a-brief-
survey
http://www.slideshare.net/udayms/adobe-flex
http://www.slideshare.net/adorepump/flex-adobe-air-and-
php-the-beginning-of-a-beautiful-friendship

28. Contact info
Email : knopsod@gmail.com
knopsod@hotmail.com
Facebook : http://www.facebook.com/knopsod

29. Thanks.