[Flex] Hướng dẫn cài đặt framework Cairngorm. P1

Sau bài viết giới thiệu tổng quan về framework Cairngorm, bắt đầu từ loat bài này tôi sẽ hướng dẫn từng bước cài đặt framework Caingorm vào project của bạn. Để có thể theo dõi loạt bài này, bạn cần các chương trình, thư viện sau:

Tôi vẫn chuộng sử dụng Flash Develop hơn vì nó là một IDE gọn nhẹ và tích hợp khá tốt với Flex SDK, hơn nữa nó là một ứng dụng hoàn toàn miễn phí. Bạn có thể sử dụng nó để soạn thảo code cho nhiều ngôn ngữ khác chứ không hẳn chỉ là Flex và ActionScript.

Ứng dụng tìm kiếm hình ảnh với Flickr

Đây là một ứng dụng đơn giản cho phép bạn tìm kiếm các hình ảnh thông qua các tag bằng dịch vụ của Flickr. Flickr cũng cung cấp các APIs nền AS3 để bạn có thể tích hợp vào ứng dụng của mình. Như vậy ngoài 3 chuơng trình và thư viện nêu trên, bạn cũng phải tải thêm thư viện Flickr. (Tải xuống từ đây)

Sau khi đã cài đặt Flash Develop và Flex SDK, bạn tạo 1 project Flex mới và tạo ra các package như trong hình dưới đây.

cairngorm packages

package org.catapult.<application name> là cách tôi tự quy ước cho các ứng dụng của mình. Trong các package trên, business sẽ chứa ServiceLocator và các Delegate, command chứa các Command. Command sẽ gọi các Delegate tương ứng. controller chỉ chứa duy nhất FrontController. model chứa các VO (Value Object) và ModelLocator. Các cairngorm event sẽ được đặt trong event và cuối cùng là view – các màn hình. Dữ liệu hiển thị trọng các view được binding từ ModelLocator. Mặc dù tôi khoanh vùng cả package common nhưng package này không nằm trong kiến trúc của Cairngorm. Đơn giản đó chỉ là package chứa các thiết lập của ứng dụng.

ModelLocator

Thành phần đầu tiên tôi muốn giới thiệu là ModelLocator, một singleton đóng vai trò trung tâm dữ liệu của ứng dụng. Cứ hình dung là dữ liệu của bạn từ phía server sẽ được đặt vào trong ModelLocator và một màn hình nào đó chỉ “móc” vào ModelLocator này và lấy dữ liệu đó hiển thị lên cho người dùng. Vậy bạn sẽ hiểu nhầm ModelLocator là nơi chứa toàn bộ dữ liệu của ứng dụng ? Thực sự thì ModelLocator chỉ chứa các dữ liệu mang tính chất “trao đổi” mà thôi. Điều này cũng giống như bạn muốn mua laptop, bạn có thể đến showroom, nhưng bạn không mua laptop từ showroom mà chỉ xem xét nó. Laptop sẽ giao đến cho bạn từ kho của công ty.

ModelLocator được cài đặt dựa trên mẫu thiết kế Singleton. Thực sự ModelLocator làm một trong những phần đơn giản nhất mà bạn cài đặt trong kiến trúc Cairngorm. Sau khi định nghĩa và cài đặt, bạn có thể khai báo thêm các dữ liệu để trao đổi như danh sách các món hàng, trạng thái của ứng dụng …

Cài đặt ModelLocator

package org.catapult.eslide.model {
	 import com.adobe.cairngorm.model.ModelLocator;
	 import mx.collections.ArrayCollection;
	/**
	 * ...
	 * @author Lam Do
	 */
	[Bindable]
	public class PhotoModelLocator implements ModelLocator {
		public static const STATE_IMAGE_LOADING: String = "state_image_loading";
		public static const STATE_IMAGE_RESULT: String = "state_image_result";
		public static const STATE_IMAGE_ERROR: String = "state_image_error";

		public var photoList: ArrayCollection = new ArrayCollection();
		public var applicationState: String = "";

		private static var _instance: PhotoModelLocator;

		public function PhotoModelLocator() {
			if ( _instance != null ) {
                           throw new Error( "Only one PhotoModelLocator instance should be instantiated" );
			}
		}

		public static function getInstance(): PhotoModelLocator {
            if ( _instance == null ) {
                _instance = new PhotoModelLocator();
	    }
            return _instance;
       }
    }
}

Trong phần sau tôi sẽ hướng dẫn cách kết hợp giữa ModelLocator và View. Tuy nhiên bạn có thể xem ứng dụng này sau khi hoàn tất sẽ chạy như thế nào tại đâ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