Một số framework cho ứng dụng Flex

Bài viết này tổng hợp một số framework thông dụng dành cho các ứng dụng Flex.

1. Cairngorm

Là framework gắn liền với sự ra đời của Flex, Cairngorm thực sự là một framework dành riêng cho Flex với một tập hợp các design pattern (mẫu thiết kế) được chứng minh là hoạt động hiệu quả với nhau. Cairngorm vay mượn khá nhiều ý tưởng từ các framework dành cho Java, tập trung vào 3 mảng chính:

Xử lý các hành động của user.
Tích hợp các tương tác giữa server với các xử lý nghiệp vụ.
Quản lý các trạng thái phía client và phản hồi các trạng thái này đến user.

Ưu điểm:
Cairngorm là một framework nổi tiếng được nhiều lập trình viên Flex lựa chọn và cũng là một dự án thuộc về Adobe Open Source. Cairngorm còn được sự hỗ trợ và cập nhật thường xuyên bởi cộng đồng các lập trình viên Flex, những người đã có nhiều kinh nghiệm trong việc xây dựng thành công các ứng dụng lớn với Flex và Cairngorm. Sử dụng Cairngorm trong dự án buộc bạn phải chia nhỏ mã nguồn ra thành nhiều phần, từ đó dễ dàng cho việc chia task giữa các thành viên trong team.

Khuyết điểm:
Khuyết điểm lớn nhất của Cairngorm cũng chính là ưu điểm vì việc chia nhỏ mã nguồn khiến cho số lượng các lớp (class) trở nên khó kiểm soát. Với Cairngorm, mỗi event sẽ được ánh xạ với một command, ngoài ra các command cũng cần có các delegate. Điều này dễ làm số lượng các lớp tăng một cách nhanh chóng. Cairngorm cài đặt các phương thức riêng để quản lý các event, tạm gọi là các event của Cairngorm. Các event này đôi khi gây khó khăn khi hoạt động chung với các event có sẵn của Flex, và ngoài ra các event Cairngorm cũng không có bubble phase. Vì vậy bạn sẽ phải tự handler nếu cần xử lý bubble phase với Cairngorm.

2. PureMVC

PureMVC thực chất là một framework dành cho ứng dụng Flash/ActionScript nói chung hơn là dành riêng cho Flex. Thực chất PureMVC là một framework tổng quát dành cho nhiều ngôn ngữ, thậm chí cả javascript. PureMVC tập trung vào hình mẫu Model – View – Controller bằng việc chia mã nguồn của project ra thành 3 tầng rõ ràng về chức năng. PureMVC còn định nghĩa Facade – một singleton làm trung tâm giao dịch giữa Model, View và Controller. PureMVC cũng chia mã nguồn ra thành nhiều package và class như Cairngorm.

Ưu điểm:
Tương tự như Cairngorm, PureMVC là một framework tốt để làm việc theo nhóm. Các lớp được phân chia chức năng rõ ràng khiến mã nguồn rõ ràng và dễ bảo trì.

Khuyết điểm:
Do dựa trên singleton, PureMVC cũng có các vấn đề tương tự như Cairngorm như việc bản thân PureMVC có cơ chế tự quản lý các event, nên sẽ gây nhiều khó khăn khi tích hợp chung với các cơ chế quản lý event có sẵn của Flex. Ngoài ra PureMVC không phải là một framework dễ tiếp cận trừ phi các lập trình viên đã quen thuộc với mô hình MVC.

3. Mate

Là một framework dựa trên cơ chế event và tag ( Tag nghĩa là đã được cài đặt theo cú pháp của MXML). Chỉ có hai yêu cầu cơ bản để tạo một dự án sử dụng Mate: Ứng dụng của bạn phải có ít nhất một sự kiện, và bạn phải có một file MXML là ứng dụng chính.

Ưu điểm:
Do không dựa trên cơ sở Singleton toàn cục, các thành phần của Mate có thể họat động độc lập hơn. Mate cũng không bắt bạn phải tuân thủ cấu trúc của nó như Cairngorm. Các tập tin MXML và các thẻ của Mate đơn giản và dễ sử dụng. Và nếu bạn gặp khó khăn, thì có hàng tá tài liệu là tốt trên mạng hướng dẫn rất chi tiết về Mate.

Khuyết điểm:
Mate chỉ hỗ trợ ở dạng ngôn ngữ MXML nên bạn sẽ gặp nhiều khó khăn khi muốn sử dụng thuần túy ActionScript. Mate cũng không định hình nên cấu trúc của source code và bạn phải tự làm điều đó. Tại thời điểm này, nếu ứng dụng của bạn có ý định sử dụng Adobe LiveCycle Data Services ES thì Mate không phải là một lựa chọn. Đơn giản là Mate không hỗ trợ việc xử lý dữ liệu từ Adobe LiveCycle Data Services ES.

4. Swiz

Là một framework kiểu “Inversion of Control” cung cấp các phương thức để đơn giản hóa việc điều khiển các sự kiện và bất đồng bộ các phương thức truy cập từ xa.

Viết một ứng dụng với Swiz chỉ đơn giản là khai báo với Swiz các component trong ứng dụng đó. Swiz sử dụng BeanLoader để tải các component vào Factory trung tâm. Khi ứng dụng khởi tạo, Factory trung tâm này sẽ khởi tạo các component của ứng dụng.
Swiz cũng cung cấp cơ chế “quản lý phụ thuộc thông” qua một thẻ meta tuỳ chỉnh được gọi là Autowire. Thẻ autowire là một phương pháp xác định phụ thuộc giữa các lớp mà Swiz sau đó xử lý.

Ưu điểm
Swiz rất dễ sử dụng và không bắt buộc bạn phải tổ chức mã nguồn tuân theo một cấu trúc nào hết. Cũng như Mate, Swiz sử dụng lại các xử lý sự kiện có sẵn của Flex trong khi cung cấp các trợ giúp các thao tác quan trọng như tạo điều kiện cho sự kiện toàn cục dispatching thông qua việc sử dụng một singleton nội bộ tham chiếu.

Khuyết điểm
Giống như Mate, Swiz cũng không định hình nên cấu trúc của source code và bạn phải tự làm điều đó. Ngòa ra, do Swiz sử dụng metatags tùy biến,  bạn cần phải tự thêm một số thiết lập thêm một vài đối số cho trình biên dịch. Những bước này không khó, nhưng so với các framework khác thì sử dụng Swiz có vẻ hơi phiền toái.

Nguồn tham khảo

Cairngorm: http://www.adobe.com/devnet/flex/articles/introducing_cairngorm.html

PureMVC: http://www.puremvc.org

Mate: http://mate.asfusion.com/

Swiz: http://code.google.com/p/swizframework/

Choosing a Flex Framework by Jeremy Wischusen: http://www.adobe.com/devnet/flex/articles/flex_framework.html

11 thoughts on “Một số framework cho ứng dụng Flex

  1. Chào Lâm!

    Cảm ơn về entry rất hữu ích này của bạn. Thực sự mình mới là newbie về flex thôi mà đang có dự án nhỏ làm bằng flex trong khỏang 3 tháng. Mình cũng định sử dụng một framework của flex. Bạn có thể giới thiệu cho mình framework nào là tốt nhất cho nhu cầu hiện tại của mình không? Tiêu chí của mình là đơn giản và dễ dùng.

    Cảm ơn bạn nhiều!

    • Project của bạn là project ActionScript hay Flex ? Vì có rất nhiều người đã nghĩ rằng họ làm Flex vì đang dùng Flex (Flash) Builder nhưng thực chất lại viết bằng ActionScript hoàn toàn. Nếu project của bạn thuần túy là Flex – cụ thể là sử dụng đến MXML thì Cairngorm là lựa chọn hàng đầu. Còn nếu là thuần túy ActionScript thì có thể dùng PureMVC. Tuy nhiên PureMVC có thể áp sử dụng cho tất cả các project ActionScript, Flex …

      • Cảm ơn bạn nhiều! Project của mình là Flex nên có thể mình sẽ chọn Cairngorm.
        Rất mong những bài viết sau của bạn🙂

  2. hihi, xin chao anh, em thay anh viet nhung topic ve flex rat hay va de hieu, nhung anh co the cho em biet muon hoc lap trinh flex nay thi phai bat dau tu dau, can nhung~ cong cu gi, tai kien thuc flex cua em gio chi la con so 0, thanks anh nhieu.

    • Hello
      Flex chỉ là framework, nền tảng của nó vẫn là ActionScript 3.0 nên việc đầu tiên em cần làm là học ActionScript 3.0
      Về tài liệu, em có thể đọc quyển Essential actionscript 3.0/. Link tài liệu ở đây

      Sau khi đọc qua để nắm khái niệm, em có thể cài đặt tiếp theo là Flex SDK 3.5 và Flash Develop – IDE để em soạn thảo code và build code bằng Flex SDK. Khi download Flash Develop ở trang flashdevelop.org, em có thể tìm thấy hướng dẫn cài đặt và tích hợp với Flex SDK.

      Có một cách khác là dùng Flash Develop để soạn thảo code và dùng Flash CS để build, tuy nhiên ở mức newbie, không nên tiếp cận cách này vì nó sẽ gây nhiều hiểu nhầm về sau.

      Em cần khoảng 2 tuần để biết về ActionScript, sau đó có thể chuyển sang Flex – dùng các library, concept và viết bằng MXML.

  3. Chào bạn,
    Mình là một flash developer và cũng đang làm quen Flex. Hiện tại mình đang xây dựng 1 Air desktop app dùng webcam để chụp hình và post lên facebook. Có 2 vấn đề mình đang gặp phải mong nhận được sự chỉ dẫn của bạn.
    1. App của mình là desktop mà lại phải kết nối facebook mà FB OAuth 2.0 ko support tốt trên desktop, cụ thể là cần phải embed a web browser vào Air để chạy một số thủ tục của FB API. Do đó mình chọn Flex để phát triển chương trình của mình, trên mạng có nhiều tut về FB login đều là source của Flex. Do mình còn ít kinh nghiệm nên ko chắc những suy nghĩ trên là đúng, vì nếu chỉ cần làm việc với FLash thì sẽ tốt hơn cho mình.
    2. Vấn đề thứ 2 là App của mình chạy trên một màn hình touch (no key and mouse). Do vậy dù build trong flash hay Flex thì mình cũng ko rõ làm sao để handle sự kiện textfield của facebook để show virtual keyboard của mình cho user có thể login vào facebook?
    Mong nhận được sự gợi ý hoặc chia sẻ kinh nghiệm từ bạn.
    Thanks

    • Chào bạn,
      Thư viện Facebook Oauth xây dựng trên nền AS3 nên không nhất thiết bạn phải dùng Flex, hơn nữa Facebook API cũng có phiên bản dành AS3 nên việc nhúng 1 web browser vào là không cần thiết.

      Adobe cũng có các sample sử dụng Flash và Facebook API tại đây
      http://www.adobe.com/devnet/facebook/samples.html#13

      Về vấn đề tìm cách bật tự động bàn phím khi focus vào textbox của màn hình đăng nhập Facebook, mình nghĩ là không khả thi và cũng không cần thiết. Thay vào đó bạn nên tập trung vào việc thiêt kế giao diện người dùng sao cho họ có thể hiểu được nên touch vào đâu để bật bàn phím. Google Search đặt biểu tượng bàn phím bên cạnh textbox search là một ví dụ.

      • Thank bạn,
        Link trên mình đã thử qua vài lần nhưng source nó cũng toàn là as flex (MXML). Mình có thử chuyển qua flash hoàn toàn và chạy được trên browser nhưng build trên desktop thì chưa chạy được.
        Vấn đề bàn phím tự động mình đã tìm nhiều và quả thật không khả thi lắm. Ngay việc manual nó cũng khó thực hiện trong flash vì mình ko control được các textfield trong những popup windows của facebook để add chars. Giải pháp của mình là call bàn phím của windows 7 ra để hỗ trợ (osk.exe). Nhưng lại đụng vấn đề khác là làm sao để tắt nó đi khi user đã nhập xong. Mình tính dùng taskkill dos command nhưng lệnh này chỉ làm được khi user là Administrator ^^
        Nói chung các giải pháp đang trở lên khá lỉnh kỉnh và gây khó khăn cho người dùng. Không biết bạn có giải pháp nào khác?

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