Management là thành phần chính đảm nhiệm chức năng quản lý hình ảnh, album, gồm các thành phần con:
• AlbumDetail
Thể hiện các hình ảnh có trong mỗi album thơng qua <mx:TileList/>, có hỗ trợ các thao tác kéo thả hình ảnh để thực hiện sao chép, di chuyển, xóa hình. Ngồi ra
AlbumDetail cịn chức năng sắp xếp hình ảnh theo những tiêu chuẩn như kích thước, thời gian, tên, tùy chỉnh. AlbumDetail có thành phần Trashcan hỗ trợ việc xóa hình ảnh.
• AlbumTree
Thể hiện các Album dưới dạng cây thư mục. Chương trình cung một album mặc
định HinhAnh. Người dùng có thể thêm, xóa album(xóa ln những hình trong
album đó). AlbumTree cũng hỗ trợ việc kéo thả hình ảnh phục vụ các chức năng
quản lý.
• TrashcanAlbum
Thực hiện chức năng cho người dùng xóa các album. Kiểm tra khơng cho xóa các album HinhAnh, All.
• NewAlbum
Thực hiện chức năng cho người dùng tạo mới một album. Kiểm tra album mới có trùng tên với các album hiện tại.
• FileUpload
Thành phần này cho phép người dùng tải lên máy chủ (server) những hình ảnh họ
ưa thích. Thành phần sẽ kiểm tra tên có bị trùng với các hình đang có trong album;
thể hiện tên hình, kích thước các hình được tải lên trong bảng lưới. Thành phần tự
động lưu các hình trong thư mục của người dùng trên máy chủ khi đã tải hình thành
cơng.
Trong thành phần Management, có sử dụng kĩ thuật tải tập tin lên Server. Chương trình cho phép người dùng tải những ảnh yêu thích lên máy chủ. Phương thức
FileReferenceList.browse( ) giúp người dùng duyệt và chọn một hoặc nhiều ảnh họ yêu thích. Khảo sát hàm addFiles() sau:
private function addFiles():void {
_refAddFiles = new FileReferenceList();
_refAddFiles.addEventListener(Event.SELECT, onSelectFile); _refAddFiles.browse();
}
Mỗi khi một ảnh được chọn, sự kiện SELECT được thông báo, và hàm onSelectFile
được gọi để kiểm tra ảnh được chọn đã nằm trong danh sách các ảnh chuẩm bị tải
lên máy chủ chưa, hoặc ảnh này có nằm trong album nào của người dùng chưa? Sau khi người dùng chọn ảnh, ta có thể gọi hàm upload để bắt đầu tải ảnh. Hàm này yêu cầu bạn truyền vào tham số là một đối tượng URLRequest để xác định địa chỉ URL mà bạn muốn tải ảnh này lên.
private function startUpload():void {
…………………………………………………….. var request:URLRequest = new URLRequest(); request.url = _strUploadUrl;
request.method = URLRequestMethod.POST; _refUploadFile = new FileReference();
_refUploadFile = listFiles.selectedItem.file;
…………………………………………………………… _refUploadFile.upload(request);
}
Ngoài ra trong thành phần này còn hỗ trợ chức năng kéo thả phục vụ cho việc quản lý hình ảnh, album. Để triển khai tính năng kéo thả, đầu tiên ta gán thuộc tính
dragEnabled là "true" (đối với các đối tượng thuộc kiểu List) cho các đối tượng nguồn.
<mx:TileList id="thumbView" width="100%" height="80%" paddingLeft="7" allowDragSelection="true"
dragMoveEnabled="true" dragEnabled="true" …………………… </mx:TileList>
Sau đó, bên đối tượng đích, ta có thể định nghĩa một số hàm để bắt các sự kiện
dragEnter, dragDrop, dragExit. Sự kiện dragEnter được thông báo khi đối tượng
được kéo vào trong vùng của đối tượng đích. Sự kiện dragExit được thông báo khi đối tượng được kéo ra ngồi vùng của đối tượng đích. Sự kiện dragDrop được thông
báo khi đối tượng được thả ở trong vùng của đối tượng đích. Ta cần sự hỗ trợ của
các lớp DragManager, DragSource, và DragEvent để triển khai các thao tác kéo thả này. <mx:LinkButton xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" width="20" height="20" dragEnter="handleDragEnter(event)" dragExit = “handleDragExit(event)” dragDrop="handleDragDrop(event)" click="handleClick(event)">
private function handleDragEnter( event:DragEvent ) : void {
if (event.ctrlKey) return;
DragManager.acceptDragDrop(UIComponent(event.currentTarget)); }
private function handleDragDrop( event:DragEvent ) : void {
var ds:DragSource = event.dragSource;
var myAlbums: XML = mx.core.Application.application.myAlbums; …………………………
4.5.4. Màn hình xem ảnh
Sau khi thêm ảnh, xóa ảnh, tạo album… người dùng có thể đi đến trang xem hình để xem các hình ảnh trong các album của mình theo 3 dạng: dạng thumbnail, dạng
carousel và dạng list.
Từ trang này người dùng vẫn có thể quay lại trang quản lý hoặc đi đến tạo
slideshow cho các album của mình.
Tại đây người dùng cũng có thể đăng xuất khỏi tài khoản. Sau đây là 3 dạng xem hình:
4.5.4.1. Xem dạng thumbnail
Hình 13: Màn hình xem ảnh dạng thumbnail Mơ tả chi tiết màn hình:
STT Mô tả Ghi chú
1 Chọn album.
2 Xem dạng thumbnail.
3 Gọi màn hình xem dạng carousel. 4 Gọi màn hình xem dạng list.
5 Tên album mà ảnh đang xem thuộc.
1 7 6 5 4 3 2
6 Tên ảnh.
7 Danh sách các hình ảnh thuộc album.