[Flex 4] – Tổng quan

[Flex 4] – Tổng quan

Filed under: Tutorials by flexvn — Để lại phản hồi
14/04/2010

Dạo này mới cài thử cái Flash Builder 4 để tìm hiểu xem nó có gì mới so với Flex Builder 3 (cũng là muốn học thêm cái mới trong Flex SDK 4) nên mới lên mạng tìm tài liệu và có hứng thú viết lại cho mọi người cùng đọc.

Đầu tiên cũng cảm ơn chủ nhân của Blog: dothanhlam.wordpress.com vì đã viết bài “Flex 4 có gì mới”, giúp mình nắm bắt nhanh một số điểm chính trước khi viết bài về Flex 4. Mình xin đăng lại bài viết tại đây để mọi người tiện tìm hiểu.

Link gốc của bài viết tại đây

[Flex 4] – Flex 4 có gì mới ?

Chuỗi ngày mong đợi sự ra đời của Flex SDK 4.0 (tên mã Gumbo) và bản Flex Builder – tên mới là Flash Builder cuối cùng cũng chấm dứt vào ngày22 tháng 3 năm 2010 khi mà Adobe tuyên bố phiên bản chính thức và đặt Adobe Flash Builder lên kệ. Quả thật tôi cũng không thể chờ lâu để tìm hiểu hết về Flex 4.0 với nhiều tính năng vượt trội so với Flex 3.0, và hơ nữa, bản Flash Builder của tôi là bản trial và chỉ có 60 ngày để tìm hiểu. Hy vọng là trong những ngày còn lại kể từ ngày 22/3 này, tôi sẽ cố gắng tìm hiểu và có những đánh giá về phiên bản Flex 4.0 này. Cũng kể từ bài viết này, tiêu đề (title) của các bài viết sẽ được đánh dấu “[Flex 4]” hoặc “[Flex 3]” để phân biệt.

Bài đầu tiên trong loạt bài này chính là tìm hiểu xem Flex 4.0 có những tính năng gì mới so với nguời tiền nhiệm Flex 3.0.

FXG

Điều đầu tiên tôi cảm thấy thú vị nhất chính là FXG. Flex 4 giới thiệu một khái niệm hoàn toàn mới là FXG. Nó được sử dụng để tạo ra – thực ra là vẽ ra các đối tượng đồ họa như hình chữ nhật, elip, các đường thẳng, đường cong … Các đối tượng đồ họa trong FXG có thể được tô vẽ với màu sắc đặc, gradient, bitmap. Hơn nữa là FXG có thể được sử dụng với MXML. Đây là một bước cải tiến lớn nếu như với Flex 3, cách duy nhất để “vẽ” là bạn phải dùng ActionScript thuần túy. Hơn thế nữa, FXG còn hỗ trợ cả data biding và state như các component của Flex.

Layout

Flex 4 cải thiện đáng kể khả năng layout các component. xuất hiện thêm khái niệm Group và sự liên kết về mặt layout giữa các component trong Flex 3 đã được bố trí lại chặt chẽ hơn trong Flex 4 nên Layout của Flex 4 linh hoạt hơn và kiểm soát dễ dàng hơn.Flex 4 hợp phần hỗ trợ thêm cho các kiểu bố trí mới bao gồm: BasicLayout, VeriticalLayout, HorizontalLayout … Group, HGroup, VGroup đuợc dùng để thay thế cho Box,VBox, HBox. Tất nhiên bạn cũng vẫn dùng các “box” trong Flex 4, tuy nhiên trong các bản Flex tiếp theo, Adobe sẽ “loại bỏ” các “box” này …

Spark Components

Là một số component mới có sẵn trong Flex 4 Các kiến trúc của những component Spark mới trong Flex 4 là để thay thế các component của Flex 3. Tuy nhiên Flex 4 vẫn duy trì các component của Flex 3. Trong bộ Spark Component thì đáng chú ý nhất chính là component Spark Application – component này chính là tính năng mới về Layout của Flex 4. Nếu ở Flex 3, khi bạn đặt layout cho application của mình là vertical hay horizontal  thì lúc “run-time” không thể thay đổi layout được nữa. Điều này được giải quyết với Spark Application. Bạn có thể xem ví dụ sau:

<?xml version="1.0" encoding="utf-8"?>
<s:Application    
 xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark">    
 <s:layout>
  <s:VerticalLayout />
 </s:layout>
 <fx:Script>
 <![CDATA[
   import spark.layouts.HorizontalLayout;
   private function updateLayout() : void {
     this.layout = new HorizontalLayout();
   }
 ]]>
 </fx:Script>
 <s:Button label="Update Layout" click="{updateLayout()}" />
 <s:TextArea width="350" height="85" text="Spark TextArea" />
</s:Application>

Cơ chế render một component

“Bình mới, rượu cũ” – cơ chế render các component của Flex 4 cũng  giống như cơ chế render các component của  Flex 3, nghĩa là  commitProperties() – đặt các thộc tính mới, measure() – xác định kích thước của component và  updateDisplayList()  – đặt vị trí và vẽ các component con.

Skinning

Tất cả các component đều có 1 file skinning riêng. Điều này sẽ cho phép bạn dễ dàng skinning các component khác nhau mà không làm ản hưởng đến các component khác.

States

Với Flex 3, để thay đổi State, bạn thường sử dụng tag addChild và removeChild. Với Flex 4, bạn có thể dùng các thuộc tính includeIn=”” hoặc excludeIn=”” có sẵn trong các component. Hơn nữa, bạn có thể thiết lập các thuộc tính khác nhau của một component cho các state khác nhau bằng cách sử dụng dấu chấm (.)  Ví dụ, title.mystate = “Title”.

Thẻ Declarations

Có vẻ đây là một trong những điểm không bình thường của Flex 4 khi mà Flex 4 buộc lập trình viên phải đặt tất cả mọi thứ không phải là “display object” hoặc các thuộc tính mặc định bên trong thẻ fx:Declarations. Sự áp đặt này còn áp dụng cho các thẻ như RadioButtonGroup. Formatters, Effects, RPC stuff, Validators.

Kết luận

Như vậy việc chuyển một ứng dụng từ Flex 3 sangFlex 4 không phải là một việc muốn là làm được ngay – bạn cần phải có thời gian tìm hiểu kỹ về spark compnent cũng như tư tưởng thiết kế một ứng dụng bằng Flex 4. Và ngay cả chỉ mới bắt đầu sử dụng Flex 4 dựa trên kiến thức hiện tại bạn có được từ việc sử dụng Flex 3 thì bạn cũng cần phải có những bước chuẩn bị chậm rãi để có thể viết ứng dụng của bạn theo cách mới của Flex chứ không phải đơn giản là “compile” lại ứng dụng viết theo cách Flex 3 với Flex 4 framework …

3 Responses to [Flex 4] – Tổng quan

  1. I just want to say I am all new to blogging and site-building and absolutely loved this blog site. Likely I’m likely to bookmark your blog . You surely come with perfect articles and reviews. Regards for revealing your website page.

  2. I just want to mention I am very new to blogging and absolutely enjoyed this web page. Most likely I’m want to bookmark your website . You actually come with really good articles. Thank you for sharing your web site.

  3. I simply want to mention I’m very new to blogging and site-building and truly enjoyed this website. Probably I’m likely to bookmark your website . You amazingly have awesome well written articles. Cheers for sharing your website page.

Gửi phản hồi

Please log in using one of these methods to post your comment:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: