Cơ chế khởi động của một ứng dụng Flex

Cách đây vài hôm, có một chú quen trên NET hỏi về việc khởi tạo của một ứng dụng Flex. Thực ra đây là một vấn đề tôi cũng đã từng tìm hiểu trong thời gian đầu tập tễnh với Flex. Tôi thử chuyển một ứng dụng đơn giản từ Flash (ActionScript 3.0) sang Flex – một ứng dụng đơn giản bắt sự kiện KeyDown, KeyUp để điều khiển một Sprite chạy xung quanh màn hình. Với ứng dụng Flash, tôi thường bắt sự kiện ADDED_TO_STAGE, rồi khởi tạo các listener cho đối tượng stage. Những hiểu biết ban đầu mà tôi có được về Flex chỉ ra rằng creationComplete là hàm được gọi khi ứng dụng khởi tạo xong. Tuy nhiên tôi gặp một tá lỗi vì đối tượng stage chưa tồn tại tại thời điểm createComplete. Sau khi tìm hiểu kỹ hơn, tôi mới phát hiện ra rằng stage chỉ tồn tại sau khi updateComplete hoặc applicationComplete được gọi.

Về bản chất, Flex tồn tại 2 dạng đối tượng là Container và Component, và 2 đối tượng này có 2 cách khởi tạo khác nhau. Container có thể là cha của các component khác hoặc các container khác, và đôi khi các container hoặc conponent con cần tham chiếu đến cha của nó, điều đó buộc container phải có những khởi tạo “trước”.

Câu hỏi được đặt ra là, một container hoặc component từ lúc bắt đầu vòng đời của nó cho đến lúc khởi tạo xong sẽ có các event nào được dispatch lên ? Và thứ tự của các event này như thế nào ? Có tất cả 5 event được dispatch trong suốt quá trình khởi tạo:

  • preinitialize: được dispatch khi component được “gắn” vào container cha, nhưng trước khi component được khởi tạo hoặc các component con của component này được tạo. Đa phần là sự kiện này được dispatch lên trước khi ứng dụng bắt đầu “sờ mó” component này.
  • initialize: được dispatch khi component đã được tạo xong và các thuộc tính của nó đã được thiết lập. Tại thời điểm này thì hầu hết các component con đều đã được tạo, nhưng chúng chưa được sắp xếp (laid out – flex có thuộc tính layout cho các container như vertical, horizontal, absolute để layout các component con, tuy nhiên thời điểm initalize được dispatch thì thuộc tính layout này chưa được kích hoạt)
  • creationComplete: được dispatch khi component và tất cả các component con, cháu, chắt, chút, chít … được tạo xong, được sắp xếp.
  • updateComplete: thực ra event này được dispatch mỗi khi container hoặc component có sự thay đổi. Tuy nhiên trong lần khởi tạo đầu tiên, updateComplete sẽ được dispatch ngay sau updateComplete.
  • applicationComplete: được dispatch sau khi Application được khởi tạo xong, xử lý bởi LayoutManager và được đưa vào display list.Tất nhiên đây là sự kiện sau cùng của quá trình khởi động được dispatch lên.

Quá trình này được minh họa bằng hình sau:

Như vậy để quá trình “hạ cánh” được an toàn, bạn nên bắt đầu ứng dụng của mình tại sự kiện applicationComplete hoặc updateComplete. Với các ứng dụng Flash, hãy bắt đầu tại sự kiện ADDED_TO_STAGE.

@Thanh: Nếu chú đọc đến đây thì anh cũng note với chú 1 vấn đề là – KHÔNG NÊN nhồi “tất cả trong một” với 1 application duy nhất – cách tốt hơn là chia nhỏ ứng dụng mình ra và thực hiện “background loading”. Anh sẽ trình bày cách thức này ở bài viết sau.

4 thoughts on “Cơ chế khởi động của một ứng dụng Flex

  1. Trong blog anh đang nhắc tới Thanh nào dạ? ;;)

    Trước giờ em vẫn có một thắc mắc là nếu xét trong quan hệ cha con (chứa nhau) thì thứ tự các event trên sẽ xảy ra như thế nào? Có fải preintialize, intialize xảy ra từ ngoài vào trong; còn creationComplete, updateComplete xảy ra từ trong ra ngoài?

    • @chú Trọng Thanh: Thanh trong bài này là 1 chú sinh viên bên Sing cũng đang nghiên cứu về Flex.
      preintialize, intialize diễn ra cả ở container và component, như cái hình anh minh họa thì “cha – container” sẽ diễn ra trước, sau đó mới đến các “con – component”, và đến creationComplete và updateComplete thì ở “con” sẽ diễn ra trước, còn cha sẽ diễn ra sau. Điều này cũng dễ hiểu là để các tham chiếu giữa cha – con được đảm bảo cho an toàn mà thôi.

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