Mô tả chi tiết màn hình quản lý

Một phần của tài liệu Khóa luận tốt nghiệp: Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa (Trang 85 - 89)

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.

Một phần của tài liệu Khóa luận tốt nghiệp: Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa (Trang 85 - 89)

Tải bản đầy đủ (PDF)

(122 trang)