Chương 2 FLEX
2.6. Quản lý các trạng thái
Trong thuật ngữ Flex, một trạng thái là một tập hợp các thay đổi của hiển thị. Mọi
ứng dụng Flex đều có ít nhất một trạng thái gọi là trạng thái căn bản. Flex
framework cung cấp một thư viện cho các trạng thái và cho sự quản lý trạng thái. Ta có thể tạo và quản lý các trạng thái bằng MXML hoặc ActionScript.
2.6.1. Khởi tạo trạng thái
Ta khởi tạo các trạng thái ở mức ứng dụng hoặc mức thành phần. Mặc dù có thể khởi tạo trạng thái bằng ActionScript nhưng dùng MXML lại tiện lợi hơn.
Trạng thái là những thể hiện của lớp mx.states.State. Ta có thể khởi tạo một trạng thái mới bằng thẻ <mx:State> trong MXML.
Ví dụ: <mx:State name="exampleState"></mx:State>
Một định nghĩa trạng thái phải bao gồm: thêm bớt các thành phần, thiết lập các
thuộc tính, thiết lập các kiểu, thiết lập các bộ xử lý sự kiện, thực hiện các tùy chỉnh tái định nghĩa.
2.6.2. Áp dụng các trạng thái
Các ứng dụng hoặc thành phần đều mặc định là áp dụng trạng thái căn bản. Ta có
thể định nghĩa nhiều trạng thái nhưng vào một thời điểm chỉ áp dụng được một
trạng thái. Để áp dụng trạng thái ta dùng thuộc tính currentState. Ví dụ:
…
<mx:states>
<mx:State name="newCheckbox"> <mx:AddChild relativeTo="{vbox}">
<mx:CheckBox id="checkbox" label="New Checkbox" /> </mx:AddChild>
</mx:State> </mx:states>
<mx:VBox id="vbox">
<mx:Button label="Click" click="currentState='newCheckbox'" /> </mx:VBox>
…
2.6.3. Định nghĩa các trạng thái dựa trên các trạng
Nếu muốn định nghĩa một trạng thái dựa trên một trạng thái khác ngoài trạng thái
căn bản thì ta dùng thuộc tính basedOn của thẻ <mx:State>.
Ví dụ: <mx:State name="newTextArea" basedOn="newCheckbox">
2.6.4. Thêm bớt các thành phần
Một trong những cách dùng thông thường của trạng thái là thêm bớt các thành phần. Ta dùng thẻ <mx:AddChild> để thêm một hoặc nhiều thành phần.
Nếu muốn thêm một thành phần như là con của thành phần khác, ta dùng thuộc tính
relativeTo. Các thành phần con sẽ tự động thêm vào cuối. Ta có thể tự xác định ví
trí bằng cách sử dụng hai thuộc tính giá trị lastChild hoặc FirstChild. Ngồi ra, nếu muốn thêm thành phần ngay trước hoặc sau thành phần hiện tại, ta dùng hai thuộc tính giá trị before hoặc after.
Ví dụ: …
<mx:states>
<mx:State name="newTextInput">
<mx:AddChild relativeTo="{checkbox1}" position="after"> <mx:TextInput id="textinput" />
</mx:AddChild> </mx:State>
</mx:states>
<mx:VBox id="vbox">
<mx:CheckBox id="checkbox1" label="One" /> <mx:CheckBox id="checkbox2" label="Two" /> <mx:Button id="button" label="Click"
click="currentState='newTextInput'" /> </mx:VBox>
Gỡ bỏ thành phần bằng thẻ <mx:RemoveChild>. Quy trình gỡ bỏ cũng tương tự
như quy trình thêm vào. Thẻ <mx:RemoveChild> chỉ yêu cầu một thuộc tính là
Ví dụ: … <mx:states> <mx:State name="noCheckboxes"> <mx:RemoveChild target="{checkbox1}" /> <mx:RemoveChild target="{checkbox2}" /> </mx:State> </mx:states> <mx:VBox id="vbox">
<mx:CheckBox id="checkbox1" label="One" /> <mx:CheckBox id="checkbox2" label="Two" /> <mx:Button id="button" label="Click"
click="currentState='noCheckboxes'" /> </mx:VBox>
…
2.6.5. Thiết lập các thuộc tính
Dùng thẻ <mx:SetProperty>. Thẻ này có các thuộc tính target, name, và value.
Thuộc tính target để ta xác định đối tượng nào sẽ áp dụng giá trị thuộc tính mới.
Name là tên của thuộc tính mới đó. Value là giá trị của thuộc tính mới. Ví dụ:
…
<mx:states>
<mx:State name="enabled">
<mx:SetProperty target="{textinput}" name="enabled" value="{true}" /> </mx:State>
</mx:states> …
2.6.6. Thiết lập các kiểu
Dùng thẻ <mx:SetStyle> nếu muốn thay đổi cách thể hiện như màu sắc, font chữ
của thành phần khi trạng thái thay đổi. Thẻ này có những thuộc tính tương tự thẻ <mx:SetProperty>.
Ví dụ: …
<mx:State name="landState">
<mx:SetStyle target="{car}" name="color" value="0xFF0000" /> <mx:SetStyle target="{train}" name="color" value="0xFF0000" /> </mx:State>
…
2.6.7. Thiết lập bộ điều khiển sự kiện - Event
Handlers
Dùng thẻ <mx:SetEventHandlers> để thêm hoặc thay đổi event handlers. Thẻ này
gồm các thuộc tính target, name, và handler. Ví dụ:
…
<mx:states>
<mx:State name="enabled">
<mx:SetProperty target="{textinput}" name="enabled" value="{true}" /> <mx:SetEventHandler target="{button}" name="click"
handler="currentState=''" />
<mx:SetProperty target="{button}" name="label" value="Disable" /> </mx:State>
</mx:states> …