Tất cả các thành phần giao diện đều có liên quan với nhau vì đều kế thừa từ lớp
UIComponent (mx.core.UIComponent). UIComponent là một phần của Flex framework. Nó là lớp trừu tượng.
Lớp UIComponet kế thừa từ mx.core.FlexSprite và mx.core.FlexSprite lại kế thừa từ flash.display.Sprite – một phần của Flash Player API.
Sau đây là một phần danh sách các thành phần giao diện và mối quan hệ kế thừa
giữa các thành phần giao diện và các lớp của Flash Player
Flash Player Flex Frame -work Object EventDispatcher DisplayObject InteractiveObject DisplayObjectContainer Sprite FlexSprite UIComponent Button ComboBase
LinkButton RadioButton CheckBox ComboBox ColorPicker DateField
2.4.2. Khởi tạo các thành phần giao diện
Dùng MXML tag: <mx:Button /> Dùng ActionScript
Var button:Button = new Button();
Với ActionScript , thành phần không tự động thêm vào dach sách thể hiện như khi dùng MXML. Vì vậy ta phải dùng phương thức addChild()
addChild(button);
2.4.3. Các thuộc tính phổ biến của các thành phần
giao diện
Các thuộc tính phổ biến của Các thành phần giao diện:
• x, y
• width, height
• scaleX: Độ co dãn của thành phần theo chiều ngang. Thuộc tính scaleX và
width có quan hệ với nhau. Nếu thay đổi scaleX thì width sẽ thay đổi theo (nhưng width thay đổi thì khơng ảnh hưởng đến scaleX).
• scaleY: Độ co dãn của thành phần theo chiều dọc. Tương tự scaleX, khi
scaleY thay đổi thì height cung thay đổi.
• rotation: Ln tính theo chiều kim đồng hồ.
• alpha: Độ mờ của thành phần. Giá trị mặc định là 1. Giá trị của alpha thay
đổi trong khoảng từ 0 (trong suốt) đến 1(mờ đục).
• visible: Quy định tính nhìn thấy được của thành phần. Giá trị mặc định là
true.
• enabled: Khả năng tương tác với thành phần. Giá trị mặc định là true.
Tham chiếu đến parent của thành phần. Thuộc tính parent là read-only. Nếu muốn thay đổi parent của thành phần, ta phải dùng phương thức removeChild() hoặc dùng phương thức addChild() để thêm thành phần vào một khung giao diện mới.
Ví dụ:
Dùng MXML
<mx:Button id="button" label="Example Button" width="200" height="50" enabled="false" /> Dùng ActionScript
var button:Button = new Button( ); button.label = "Example Button"; button.width = 200;
button.height = 50; button.enabled = false; addChild(button);
2.4.4. Xử lý sự kiện
Có hai loại sự kiện cơ bản:
• Sự kiện của người dùng: xảy ra khi người dùng tương tác với ứng dụng. Ví
dụ như sự kiện người dùng nhấn một nút …
• Sự kiện của hệ thống: xảy ra khi ứng dụng phản hồi lại sự khởi tạo, đồng bộ các hàm…
2.4.4.1. Xử lý sự kiện dùng MXML
Khi tạo thành phần dùng MXML, ta có thể thêm xử lý sự kiện bằng thuộc tính có cùng tên với sự kiện mà ta muốn xử lý.
Ví dụ:
<mx:Button id="button" label="Alpha Button" click="button.alpha -= .1" /> Hoặc
private function clickHandler(event:Event):void { var target:Button = Button(event.target); target.alpha -= .1; if(target.alpha < 0) { target.alpha = 1; } } 2.4.4.2. Xử lý sự kiện dùng ActionScript
Đã trình bày chi tiết ở phần tìm hiểu về ActionScript
2.4.4.3. Một số sự kiện của thành phần chuẩn trong Flex
Sự kiện Mô tả
add FlexEvent.ADD Thành phần đã được thêm
vào khung giao diện
remove FlexEvent.REMOVE Thành phần đã được gỡ bỏ
khỏi khung giao diện
show FlexEvent.SHOW Thành phần đã được đặt
thuộc tính visible = true hide FlexEvent.HIDE Thành phần đã được đặt
thuộc tính visible = flase resize FlexEvent.RESIZE Kích thước thành phần đã
thay đổi
preinitialize FlexEvent.PREINITIALIZE Thành phần đã được khởi tạo nhưng các con của nó chưa
được khởi tạo
initialize FlexEvent.INITIALIZE Thành phần đã được dựng
nhưng chưa kích thước và vị trí
creationComplete FlexEvent.
CREATION_COMPLETE
Thành phần đã được dựng, có kích thước và vị trí