Phần 1 : FLEX
7.3. Tùy biến giao diện
Có ba cách tùy biến giao diện là áp dụng các style hoặc là thay đổi skin.
7.3.1. Sử dụng các Style
Styles cho phép ta xử lý giao diện của ứng dụng, bao gồm màu sắc, font chữ,
khoảng cách, thiết lập các chuyển động… Ta có thể định nghĩa và áp dụng các style theo nhiều cách. Vì vậy một thành phần có thể được áp dụng nhiều style theo nhiều cách khác nhau.
7.3.2. Sử dụng Skin
Nếu muốn thay đổi màu sắc, font, … của thành phần thì style là giải pháp thích hợp. Tuy nhiên nếu ta muốn thay đổi hồn tồn hình thức của một thành phần thì ta phải dùng skin.
Mỗi thành phần có những skin khác nhau. Skin của thành phần là các đối tượng đồ họa hoặc các lớp mà ta chỉ định cho các trạng thái hay một phần của thành phần. Ta có thể nhúng các đối tượng đồ họa như file .jpg hoặc .png.
7.3.2.1. Áp dụng các Skin
Cách áp dụng skin tương tự như cách áp dụng style. Mỗi thành phần có nhiều loại skin. Ví dụ như những button có các skin như upSkin, overSkin, và downSkin. Giá trị của skin tham chiếu đến một lớp. Đối với skin đồ họa thì giá trị là một lớp tạo bởi các ảnh được nhúng. Đối với skin được lập trình thì giá trị tham chiếu đến một lớp của skin.
7.3.2.2. Skin đồ họa
Skin đồ họa là cách nhanh nhất và đơn giản nhất để tạo các hình thức của thành
phần. Skin đồ họa bao gồm các hình ảnh được nhúng hoặc nội dung .swf . Công
việc là tạo một ảnh minh họa cho mỗi skin, xuất ảnh minh họa đó với định dạng có thể nhúng được như .png, .jpg, .swf ... Tiếp theo là nhúng ảnh minh họa đó và thiết lập kiểu dáng skin để chỉ đến ảnh minh họa đã được nhúng.
• Dùng định hướng @Embed.
• Dùng phương thức setStyle()
• Dùng CSS
7.3.3. Dùng Themes
Themes cung cấp một cách để biên dịch tất cả các file .css, các skin trong cùng một file .swc. Có hai lợi điểm là:
Ta có thể biên dịch trước các tài nguyên style và skin nên ứng dụng sẽ biên dịch nhanh hơn.
Giúp ta dễ dàng phân phối và kèo thả các style và skin đã được định hình trước cho
ứng dụng Flex.
Khi ta có một tập hợp các style áp dụng cho nhiều ứng dụng thì rất tiện lợi khi ta chỉ cần đưa một file .swc
7.3.3.1. Thiết lập Theme
Thiết lập theme cho ứng dụng Flex rất đơn giản. Chỉ cần thêm tùy chọn biên dịch –
theme vào mxmlc.
Nếu biên dịch ở chế độ command line thì thêm –theme themeFile.swc Ví dụ:
mxmlc -theme corporate.swc Main.mxml
Nếu xây dựng ứng dụng bằng Flex Builder thì ta mở mục properties của project,
chọn tùy chọn Flex Compiler, và thêm –theme themeFile.swc vào phần tham số biên dịch.
7.3.3.2. Tạo Theme
Một theme gồm ít nhất một file .css và có thể gồm nhiều tài nguyên thêm vào như hình ảnh, lớp skin… Theme phải được biên dịch thành file .swc. Khi biên dịch
theme ta nên xác định -include-file cho mỗi file .css hoặc skin mà ta muốn thêm vào .swc
-include-file yêu cầu hai tham số: tên tượng trưng cho file .css và đường dẫn đến
file.
Ví dụ: Ta có một file example_theme.xml như sau <?xml version="1.0"?> <flex-config xmlns="http://www.adobe.com/2006/flex-config"> <output>corporate.swc</output> <include-file> <name>corporate.css</name> <path>../assets/themes/corporate.css</path> </include-file> <include-classes> <class>com.company.styles.ButtonSkin</class> <class>com.company.styles.ToolTipSkin</class> </include-classes> </flex-config>
Sau đó ta dùng -load-config của compc compc -load-config example_theme.xml
7.3.4. CSS thực thi
Ta thường nói đến CSS được biên dịch vào ứng dụng Flex. Bây giờ ta nói về cách nạp và áp dụng CSS vào lúc thực thi ứng dụng.
Đầu tiên CSS phải được biên dịch trước thành file .swf bằng bộ biên dịch mxmlc
Ví dụ:
mxmlc styles.css
Theo ví dụ trên, styles.css sẽ được biên dịch thành styles.swf
Để nạp CSS lúc thực thi ứng dụng, ta dùng phương thức
StyleManager.loadStyleDeclarations()
Ví dụ:
Nếu ta nạp một lúc nhiều file .swf và muốn chỉ áp dụng style khi nạp xong tất cả, ta có thể hỗn áp dụng style bằng tham số false, sau đó gán thành true trong lần gọi
phương thức loadStyleDeclarations() cuối cùng. Ví dụ:
StyleManager.loadStyleDeclarations("stylesA.swf", false); StyleManager.loadStyleDeclarations("stylesB.swf", false); StyleManager.loadStyleDeclarations("stylesC.swf", false); StyleManager.loadStyleDeclarations("stylesD.swf", true);
Nếu nạp file .swf từ domain khác nhau thì ta phải gán giá trị true cho tham số thứ 3 của phương thức loadStyleDeclarations()
Ví dụ:
StyleManager.loadStyleDeclarations("http://www.differentdomain.com /styles.swf", true, true); Vì các style áp dụng chồng lên nhau, cho nên ta cần phải giải phóng các CSS đã nạp bằng phương thức unloadStyleDeclarations().
Ví dụ:
StyleManager.unloadStyleDeclarations("styles.swf");