[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 …

7 thoughts on “[Flex 4] – Flex 4 có gì mới ?

  1. Tạm thời viết đến đây vì tuần sau đi Hải Phòng – Hà Nội – Đà Nẵng. Về sẽ viết 1 loạt bài tiếp …😀😀

  2. Anh Lâm ơi, em là người mới tiếp xúc với flex qua blog của anh, em học được rất nhiều điều. Anh ơi cho em hỏi 1 chút nhé, khi mà lấy dữ liệu từ xml để vẽ chart, nhưng dữ liệu xml quá dài và lớn cho nên không xem được thì là thế nào để cho chart vào 1 khung(khung có thể cuộn). Mong anh trả lời câu hỏi của em, em cảm ơn anh rất nhiều.

    • Hi,
      Cách đơn giản nhất vẫn là đặt width và height cố định cho Chart, sau đó đặt Chart trong 1 container. Ví dụ :
      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009&quot;
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      minWidth="955" minHeight="600">
      <fx:Script>
      <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.events.FlexEvent;

      [Bindable]
      public var expenses:ArrayCollection = new ArrayCollection([
      {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
      {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
      {Month:"Mar", Profit:1500, Expenses:500, Amount:300},
      {Month:"Apr", Profit:1500, Expenses:500, Amount:300},
      {Month:"May", Profit:1500, Expenses:500, Amount:900},
      {Month:"Jun", Profit:1500, Expenses:500, Amount:300},
      {Month:"Jul", Profit:1500, Expenses:500, Amount:300},
      {Month:"Aug", Profit:1500, Expenses:500, Amount:300},
      {Month:"Sep", Profit:1500, Expenses:500, Amount:300},
      {Month:"Oct", Profit:1500, Expenses:500, Amount:300},
      {Month:"Nov", Profit:1500, Expenses:500, Amount:300},
      {Month:"Dec", Profit:1500, Expenses:500, Amount:300}
      ]);
      ]]>
      </fx:Script>
      <fx:Declarations>
      <!– Place non-visual elements (e.g., services, value objects) here –>

      </fx:Declarations>
      <s:layout>
      <s:VerticalLayout verticalAlign="middle" horizontalAlign="center" />
      </s:layout>
      <mx:Panel title="Line Chart" horizontalScrollPolicy="on" verticalScrollPolicy="on"
      height="400" width="400">
      <mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true"
      width="600" height="600" >
      <mx:horizontalAxis>
      <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>
      </mx:horizontalAxis>
      <mx:series>
      <mx:LineSeries yField="Profit" displayName="Profit"/>
      <mx:LineSeries yField="Expenses" displayName="Expenses"/>
      </mx:series>
      </mx:LineChart>
      <mx:Legend dataProvider="{myChart}"/>
      </mx:Panel>
      </s:Application>

      Tuy nhiên cách hiệu quả nhất là tạo một renderer ScrollableAxisRenderer kế thừa từ AxisRenderer. Em có thể xem article nói về vấn đề này ở đây hoặc source code ở đây.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s