Top Banner
Flex beginning level พื้นฐานเบื้องต้น การสร้าง UI ขั้นพื้นฐาน การสร้าง UI ขั้นสูง การสร้างคอมโพเนนท์ การจัดการข้อมูล Workshop (Garage management app.)
24

Presentation flex course

Jul 02, 2015

Download

Documents

me yu

เอกสารประกอบการบรรยาย Flex beginning level ที่ขอนแก่น
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Presentation flex course

Flex beginning level

● พื้นฐานเบ้ือง ต้น● การสร้าง UI ขั้นพื้นฐาน● การสร้าง UI ขั้นสูง● การสร้าง ค อมโ พเนนท์● การจัดการข้อมูล● Workshop (Garage management app.)

Page 2: Presentation flex course

พ้ืนฐานเบ้ืองต้น

● Flex มี mxml เป็น tag ค ล้าย ๆ กับ html เพื่อสร้างหน้าตาโ ปรแกรม

● ใช ้ ActionScript เพื่อดำาเนินการทาง ด้านโ ปรแกรมเหมือน JavaScript

● เขีย นโ ปรแกรมโ ดย มี Event ต่าง ๆ จาก Control

Page 3: Presentation flex course

พ้ืนฐานเบ้ืองต้น (ต่อ)Flash Builder

Control & Container

Properties of display object

Design or Coding area

Page 4: Presentation flex course

พ้ืนฐานเบ้ืองต้น (ต่อ)Flash Builder

Design or Coding area

Page 5: Presentation flex course

การสร้าง UI ขั้นพ้ืนฐาน● Control

Page 6: Presentation flex course

การสร้าง UI ขั้นพ้ืนฐาน● Container

Page 7: Presentation flex course

การสร้าง UI ขั้นพ้ืนฐาน● Style (CSS)

Page 8: Presentation flex course

การสร้าง UI ขั้นพ้ืนฐาน

● Effect – การเพิ่มลูกเล่นแบบ Animation ให้ Control

Page 9: Presentation flex course

การสร้าง UI ขั้นพ้ืนฐาน

● State – เพิ่มการแสดง UI อันหลากหลาย

Page 10: Presentation flex course

การสร้าง UI ขั้นพ้ืนฐาน

● Tooltip - ข้อค ว ามอธ ิบาย

Page 11: Presentation flex course

การสร้าง UI ขั้นพ้ืนฐาน

● Cursor management - ค ว บค ุมการแสดง เค อร์เซอร์

Page 12: Presentation flex course

การสร้าง UI ขั้นสูง● Repeater● ItemRenderer● ItemEditor (not complete)● Data provider● Drag and Drop (on list base control)● Tree (not complete)

Page 13: Presentation flex course

การสร้าง UI ขั้นสูง

● Repeater – การแสดง ผล Control แบบ Recursive

Page 14: Presentation flex course

การสร้าง UI ขั้นสูง

● ItemRenderer – การแสดง ผลบน List base control

Page 15: Presentation flex course

การสร้าง UI ขั้นสูง

● Data provider – ข้อมูลใช ้แสดง ใน List base control

Page 16: Presentation flex course

การสร้าง UI ขั้นสูง● Drag and Drop (on list base control) – การลากแล้ว

ว าง ข้อมูลระ หว ่าง List base control

Page 17: Presentation flex course

การสร้างคอมโพเนนท์● Mxml component● ActionScript programming● Deploy component (create library or *.swc)● Module (modularity support)● Pop-Up (TitledWindow)

Page 18: Presentation flex course

การสร้างคอมโพเนนท์● Mxml component

Page 19: Presentation flex course

การสร้างคอมโพเนนท์● ActionScript programming

Page 20: Presentation flex course

การสร้างคอมโพเนนท์

● Deploy component (create library or *.swc) – สร ้าง Library แบบซ่อนโ ค ้ด หรือป้อง กันการแก้ไข

Page 21: Presentation flex course

การสร้างคอมโพเนนท์

● Module (modularity support) – ทำาให้ Web app. แย กย ่อย ออกและ มีขนาดไฟล์ที่เล็ก ระ บบมีค ว ามเป็นอิสระมากขึ้น

Page 22: Presentation flex course

การสร้างคอมโพเนนท์● Pop-Up (TitledWindow)

Page 23: Presentation flex course

การจัดการข้อมูล● Data binding● Data Validating (not complete)● Data Formatting (not complete)● XML● HTTPService● RemoteObject

Page 24: Presentation flex course

Workshop

● Garage management application● Introduce to micro-architecture framework –

RobotLegs framework● How to use Flex initial code generator