Khi người dùng chọn một ảnh nào đó thì thơng tin chi tiết ảnh sẽ xuất hiện. Khi đó người dùng được xem ảnh với cỡ lớn hơn với đầy đủ các thơng tin chi tiết của ảnh
đó như tên ảnh, dung lượng, thời điểm tải lên…
1
2 3
Hình 16: Màn hình xem thơng tin ảnh Mơ tả chi tiết màn hình: Mơ tả chi tiết màn hình:
STT Mơ tả Ghi chú
1 Hình ảnh phóng to.
2 Xem thông tin chi tiết của ảnh.
3 Đóng khung chi tiết ảnh.
Bảng 14: Mơ tả chi tiết màn hình xem thơng tin ảnh
Thành phần ListView có định nghĩa một sự kiện (sự kiện PopUp) khi người dùng nhấn chuột phải vào một hình, khi đó xuất hiện hộp thoại thể hiện chi tiết hình ảnh.
Để định nghĩa một sự kiện, đầu tiên ta cấn khai báo sự kiện này bằng thẻ
<mx:Metadata/>. <mx:Metadata>
[Event(name="closePopup", type="flash.events.Event")] </mx:Metadata>
Ở đoạn mã trên, ta định nghĩa một sự kiện có tên “closePopup”, và thuộc kiểu
"flash.events.Event". Sau khi khai báo sự kiện, chúng ta có thể phát thơng báo khi sự kiện này xảy ra bằng hàm dispatchEvent() như ví dụ sau:
private function closeHandler():void {
this.dispatchEvent(new Event('closePopup')); }
Việc bắt một sự kiện tự định nghĩa tương tự như bắt một sự kiện xây dựng sẵn: <comp:PopUp id="popup" x="0" y="0"
closePopup="onClosePopup()" visible="false" /> 4.5.5. Màn hình tạo slideshow 5 1 2 3 4 Hình 17: Màn hình tạo slideshow
Mơ tả chi tiết màn hình:
STT Mơ tả Ghi chú
1 Thơng tin chi tiết của hình ảnh. 2 Chọn hiệu ứng cho ảnh. Mặc định là ngẫu nhiên.
3 Chỉnh thời gian hiệu ứng. Mặc định là 7 giây. 4 Mã nhúng.
Bảng 15: Mô tả chi tiết màn hình tạo slideshow
Thành phần này cho phép người dùng tạo SlideShow cho mỗi album. Người dùng có thể thiết đặt các thuộc tính hiệu ứng và thời gian cho mỗi hình ảnh trong
SlideShow. Thành phần sẽ thể hiện hiệu ứng được chọn trên màn hình, tự động cập nhật những thuộc tính được thay đổi. Sau cùng thành phần cho người dùng xem trước SlideShow và cung cấp mã nhúng (người dùng có nhúng mã này vào một trang web để xem Slide) của SildeShow này. Thành phần Creator định nghĩa 2
trạng thái: “creatorState” và “previewState” để thể hiện giao diện. Creator gồm các thành phần con sau:
• View4: thể hiện các ảnh trong một album và cho phép người dùng xem trước
các hiệu ứng trên từng ảnh cụ thể.
• SlideShowView: cho phép người dùng xem slideshow
Chương trình sử dụng nhiều hiệu ứng trong phần xem ảnh, tạo và xem slideshow; Những hiệu ứng này giúp chương trình thêm phần sống động và lơi cuốn người
dùng. Để tạo hiệu ứng, chương trình sử dụng cả hai cách: MXML và AS. Khai báo và sử dụng một hiệu ứng bằng MXML cũng khá đơn giản, đoạn mã sau khai báo hai hiệu ứng:
<mx:WipeDown id="wipedown" duration="2000" target="{photoView}"/> <mx:WipeUp id="wipeup" duration="2000" target="{photoView}"/>
Gọi hàm play() để thực hiện hiệu ứng:
switch(trans) { case 0:
break; case 1: wipeup.play(); break; ……………………… }
Ta có thể sử dụng AS để tạo những hiệu ứng kết hợp theo tuần tự hoặc song song. Hàm playEffects sau cho phép chương trình thực hiện đồng thời hai hiêu ứng cùng lúc:
private function playEffects(direction:int, start:int, end:int):void {
var parallel:Parallel = new Parallel(); for (var i:int=start; i < end; i++) {
var image:CarouselImage = getChildAt(i) as CarouselImage; if (image.visible)
{
var idx:int = i + direction; var move:Move = new Move(); move.target = image;
move.duration = 1000; move.xTo = picPos[idx].x; move.yTo = picPos[idx].y; parallel.addChild(move);
var resize:Resize = new Resize(); resize.target = image;
resize.widthTo = picDimension[idx]; resize.heightTo = picDimension[idx]; parallel.addChild(resize); } } parallel.play(); } 4.6. Cơ sở dữ liệu 4.6.1. Mơ hình quan hệ Hình 18: Mơ hình quan hệ
4.6.2. Thuyết minh mơ hình quan hệ và thuộc tính
Bảng NGUOIDUNG
Stt Tên cột Kiểu dữ liệu Cho phép giá trị Null
1 UserCode nvarchar(10) Không
2 UserName nvarchar(30) Không 3 PassWord nvarchar(30) Không 4 HoTen nvarchar(50) Không 5 Email nvarchar(50) Không
Bảng 16:Thuyết minh bảng NGUOIDUNG
Bảng HINH
Stt Tên cột Kiểu dữ liệu Cho phép giá trị Null
1 MaHinh nvarchar(10) Không
2 TenHinh nvarchar(50) Không 3 NgayGio nvarchar(50) Không 4 DungLuong nvarchar(50) Không
5 UserCode nvarchar(10) Không
Bảng 17:Thuyết minh bảng HINH
Bảng ALBUM
Stt Tên cột Kiểu dữ liệu Cho phép giá trị Null
1 MaAlbum nvarchar(10) Không
2 Tên album nvarchar(50) Không
3 GhiChu nvarchar(50) Có
4 UserCode nvarchar(10) Khơng
Bảng 18:Thuyết minh bảng ALBUM
Bảng CHITIETALBUM
Stt Tên cột Kiểu dữ liệu Cho phép giá trị Null
1 MaChiTietAlbum nvarchar(10) Không
3 MaHinh nvarchar(10) Không
4 Stt int Có
5 HieuUng int Có
6 ThoiGian int Có
7 UserCode nvarchar(10) Không
Bảng 19:Thuyết minh bảng CHITIETALBUM
4.6.3. Mô tả ràng buộc về khóa
4.6.3.1. Ràng buộc khóa chính Tên bảng Khóa chính NGUOIDUNG UserCode HINH MaHinh UserCode ALBUM MaAlbum UserCode CHITIETALBUM MaChiTietAlbum UserCode
Bảng 20: Mô tả ràng buộc khóa chính
4.6.3.2. Ràng buộc khóa ngoại
Tên bảng Khóa ngoại Tham chiếu đến
MaAlbum ALBUM (MaAlbum)
MaHinh HINH (MaHinh)
CHITIETALBUM
UserCode NGUOIDUNG(UserCode)
HINH UserCode NGUOIDUNG(UserCode) ALBUM UserCode NGUOIDUNG(UserCode)
Chương 5. Tổng kết
Với momg muốn tìm hiểu công nghệ, kĩ thuật mới và được sự phân công, hướng dẫn của thầy Lương Hán Cơ, chúng em đã hồn thành luận văn cử nhân cơng nghệ thơng tin với đề tài: “Tìm hiểu ngơn ngữ lập trình trong Adobe Flash và xây dựng ứng dụng
minh họa”.
Sau khi thực hiện đề tài, chúng em đã đạt được một số kết quả sau:
• Tìm hiểu được ngơn ngữ ActionScript 3.0, một ngơn ngữ lập trình mà trước đây chủ yếu được dùng cho việc phát triển Website và tạo những ứng dụng đơn giản chạy trên Flash Player, nhưng sau này đã được cải tiến và được dùng cho việc tạo nên những ứng dụng Web thực thụ (có thể truy cập cơ sở dữ liệu trên
Server)
• Nắm bắt một số kĩ thuật và khả năng của công nghệ Flex, là tập hợp các công nghệ như XML, dịch vụ web, HTTP, Flash, ActionScript, Flex Data Services,..cho phép ta nhanh chóng xây dựng ứng dụng RIA để triển khai cho
Flash Player, là một môi trường thực thi chuyển giao những giao diện và tương tác của người dùng.
• Để minh họa cho việc sử dụng công nghệ Flex, chúng em đã xây dựng được
một ứng dụng quản lý hình ảnh, album, và cho phép người dùng tạo, chia sẻ
những slideshow trực tuyến. Qua ứng dụng này, chúng em đã học tập được rất nhiều cách thức tiếp cận công nghệ mới, từ tài liệu lý thuyết trên sách, báo đến việc thực hành triển khai ứng dụng trong thực tế.
Mặc dù đã nỗ lực, cố gắng nhiều trong suốt quá trình thực hiện luận văn, nhưng do thời gian có hạn và việc tìm hiểu một cơng nghệ mới gặp nhiều khó khăn trong việc tìm kiếm tài liệu và thực hiện ứng dụng; vì vậy ứng dụng của chúng em vẫn cịn những điểm thiếu sót để có thể triển khai trong thực tế. Chúng em hi vọng rằng với những
kiến thức, kinh nghiệm có được từ việc thực hiện luận văn này sẽ giúp chúng em tự tin và nỗ lực hơn trong học tập cũng như môi trường làm việc thực tế.
Chương 6. Danh mục tài liệu tham khảo
[1] Colin Mook, Essential ActionScript 3.0, O’Reilly Media, United States of America, 2007
[2] Chafic Kazoun và Joey Lott, Programming Flex 2™, O’Reilly Media, United States of America, 2007
[3] Jesse Liberty, Programming C# (2nd Edition), O’Reilly Media, United States of America, 2002
[4] Joey Lott, Darron Schall, Keith Peters, ActionScript 3.0 Cookbook, O’Reilly Media, United States of America, 2006
[5] Yakov Fain, Dr. Victor Vasputnis & Anatole Tartakovsky, Rich Internet Applications with Adobe® Flex™ & Java™, Secrets of the Masters, SYS-CON Books, 2007
[6] R Blank, Hasan Otuome, Omar Gonzalez, Chris Charlton, AdvancED Flex Application Development, Building Rich Media X, Apress, 2008
[7] Trang web tham khảo:
• http://www.adobe.com/devnet/flex/
• http://livedocs.adobe.com/flex/
Chương 7. Phụ lục
Phần 1: FLEX
7.1. Các sự kiện hiệu ứng
Các sự kiện hiệu ứng thuộc mx.events.EffectEvent.
Để biết khi nào các hiệu ứng bắt đầu và kết thúc, ta có hai sự kiện effectStart và
effectEnd. Ví dụ: … <mx:Script> <![CDATA[ import mx.events.EffectEvent;
private function effectEndHandler(event:EffectEvent):void { vbox.alpha = 1;
} ]]>
</mx:Script>
<mx:Move id="moveEffect" xFrom="-100"
effectEnd="effectEndHandler(event)" />
<mx:VBox id="vbox" alpha=".5" creationCompleteEffect="{moveEffect}"> <mx:TextInput id="textInput1" />
<mx:TextInput id="textInput2" /> </mx:VBox>
…
Trường hợp dùng ActionScript thì ta sử dụng addEventListener với EffectEvent.EFFECT_START và EffectEvent.EFFECT_END
Ví dụ:
moveEffect.addEventListener(EffectEvent.EFFECT_START, effectStartHandler);
moveEffect.addEventListener(EffectEvent.EFFECT_END, effectEndHandler); Ngoài ra, hầu hết các hiệu ứng (trừ các hiệu ứng ghép) còn gửi sự kiện tweenStart,
tweenUpdate và tweenEnd. Sự kiện tweenStart phát sinh ngay sau sự kiện effectStart. Sự kiện tweenUpdate phát sinh với mỗi thay đổi. Sự kiện tweenEnd
phát sinh ngay sau tweenUpdate cuối cùng và ngay trước effectEnd.
Các sự kiện tween – sự kiện ở giữa hiệu ứng thuộc mx.events.TweenEvent.
Tween là từ viết tắt của in between trong Flash.
7.2. Chuẩn hóa và định dạng dữ liệu
Khi dữ liệu được người dùng nhập vào gọi là chuẩn hóa dữ liệu. Khi dữ liệu được hiển thị hoặc cần một dạng riêng trước khi được lưu trữ hay được gửi cho phương thức ở server thì gọi là định dạng dữ liệu.
7.2.1. Chuẩn hóa dữ liệu người dùng nhập vào
Flex framework có một thành phần gọi là validator để chuẩn hóa dữ liệu. Một số
loại chuẩn hóa dữ liệu cơ bản như: StringValidator, NumberValidator, DateValidator, PhoneValidator, và ZipCodeValidator…
7.2.1.1. Sử dụng thành phần validator
Cả MXML và ActionScript đều có khả năng làm viêc với validator.
7.2.1.1.1. Cú pháp trong MXML:
<mx:Validator source="{sourceObject}" property="sourceProperty" />
Hoặc
<mx:Validator source="{sourceObject}" property="sourceProperty" required="true" />
Ví dụ: …
<mx:Form>
<mx:FormHeading label="Sample Form"/> <mx:FormItem label="Name">
<mx:TextInput id="username"/> </mx:FormItem>
<mx:FormItem>
<mx:Button id="button" label="Submit"/> </mx:FormItem>
</mx:Form>
<mx:Validator source="{username}" property="text" /> …
Với ví dụ trên, validator sẽ chuẩn hóa là người dùng phải nhập ít nhất một ký tự. Validator chạy khi người dùng chuyển focus khỏi TextInput.
7.2.1.1.2. Cú pháp trong ActionScript
private var _validator:Validator; _validator = new Validator( ); _validator.source = sourceObject; _validator.property = "sourceProperty";
7.2.1.2. Xử lý sự kiện validator
Validator phát sinh hai sự kiện cơ bản là valid và invalid. Khi validator chạy thành cơng thì nó gửi sự kiện valid, ngược lại nó gửi sự kiện invalid. Theo mặc định thì sẽ
được nhận và xử lý tự động. Nhưng ta có thể xử lý hai sự kiện này theo hai cách
sau:
• Gán giá trị cho hai thuộc tính valid và invalid của thẻ MXML <mx:Validator source="{sourceObject}" property="sourceProperty"
valid="validHandler(event)" invalid="invalidHandler(event)" />
mx.events.ValidationResultEvent.VALID mx.events.ValidationResultEvent.INVALID
validator.addEventListener(ValidationResultEvent.VALID, validHandler); validator.addEventListener(ValidationResultEvent.INVALID, invalidHandler);
Sự kiện mặc định để phát sinh validator là valueComit. Tất cả các công cụ nhập dữ
liệu đều gửi sự kiện này đi khi giá trị thay đổi hoặc bị mất focus.
Mặc dù validator thường được dùng cho các công cụ nhập liệu (như là text input),
nhưng ta có thể dùng cho bất kỳ đối tượng hoặc thuộc tính nào. Nếu đối tượng ta
dùng không phát sinh sự kiên valueComit (như là button), ta có thể gọi validator bằng hai thuộc tính trigger và triggerEvent. Thuộc tính trigger tham chiếu đến đối tượng ta muốn dùng, triggerEvent là tên sự kiện ta muốn phát sinh validator.
Ví dụ:
<mx:Validator source="{username}" property="text" trigger="{button}" triggerEvent="click" />
7.2.2. Định dạng dữ liệu
Để định dạng dữ liệu ta có thể dùng Flex framework hoặc tự xây dựng phương thức để định dạng dữ liệu.
Để viết một phương thức định dạng dữ liệu ta phải viết một lớp kế thừa từ
mx.formatters.Formatter.
Hoặc ta có thể dùng MXML hoặc ActionScript để khởi tạo định dạng dữ liệu và
dùng phương thức format(). Phương thức này trả về một chuỗi đã định dạng. Một số loại định dạng dữ liệu đã được thiết lập sẵn như:
• NumberFormatter
• DateFormatter
• CurrencyFormatter
7.3. Tùy biến giao diện
Có ba cách tùy biến giao diện là áp dụng các style hoặc là thay đổi skin.
7.3.1. Sử dụng các Style
Styles cho phép ta xử lý giao diện của ứng dụng, bao gồm màu sắc, font chữ,
khoảng cách, thiết lập các chuyển động… Ta có thể định nghĩa và áp dụng các style theo nhiều cách. Vì vậy một thành phần có thể được áp dụng nhiều style theo nhiều cách khác nhau.
7.3.2. Sử dụng Skin
Nếu muốn thay đổi màu sắc, font, … của thành phần thì style là giải pháp thích hợp. Tuy nhiên nếu ta muốn thay đổi hồn tồn hình thức của một thành phần thì ta phải dùng skin.
Mỗi thành phần có những skin khác nhau. Skin của thành phần là các đối tượng đồ họa hoặc các lớp mà ta chỉ định cho các trạng thái hay một phần của thành phần. Ta có thể nhúng các đối tượng đồ họa như file .jpg hoặc .png.
7.3.2.1. Áp dụng các Skin
Cách áp dụng skin tương tự như cách áp dụng style. Mỗi thành phần có nhiều loại skin. Ví dụ như những button có các skin như upSkin, overSkin, và downSkin. Giá trị của skin tham chiếu đến một lớp. Đối với skin đồ họa thì giá trị là một lớp tạo bởi các ảnh được nhúng. Đối với skin được lập trình thì giá trị tham chiếu đến một lớp của skin.
7.3.2.2. Skin đồ họa
Skin đồ họa là cách nhanh nhất và đơn giản nhất để tạo các hình thức của thành
phần. Skin đồ họa bao gồm các hình ảnh được nhúng hoặc nội dung .swf . Công
việc là tạo một ảnh minh họa cho mỗi skin, xuất ảnh minh họa đó với định dạng có thể nhúng được như .png, .jpg, .swf ... Tiếp theo là nhúng ảnh minh họa đó và thiết lập kiểu dáng skin để chỉ đến ảnh minh họa đã được nhúng.
• Dùng định hướng @Embed.
• Dùng phương thức setStyle()
• Dùng CSS
7.3.3. Dùng Themes
Themes cung cấp một cách để biên dịch tất cả các file .css, các skin trong cùng một file .swc. Có hai lợi điểm là:
Ta có thể biên dịch trước các tài nguyên style và skin nên ứng dụng sẽ biên dịch nhanh hơn.
Giúp ta dễ dàng phân phối và kèo thả các style và skin đã được định hình trước cho
ứng dụng Flex.
Khi ta có một tập hợp các style áp dụng cho nhiều ứng dụng thì rất tiện lợi khi ta chỉ cần đưa một file .swc
7.3.3.1. Thiết lập Theme
Thiết lập theme cho ứng dụng Flex rất đơn giản. Chỉ cần thêm tùy chọn biên dịch –
theme vào mxmlc.
Nếu biên dịch ở chế độ command line thì thêm –theme themeFile.swc Ví dụ:
mxmlc -theme corporate.swc Main.mxml
Nếu xây dựng ứng dụng bằng Flex Builder thì ta mở mục properties của project,
chọn tùy chọn Flex Compiler, và thêm –theme themeFile.swc vào phần tham số biên dịch.
7.3.3.2. Tạo Theme
Một theme gồm ít nhất một file .css và có thể gồm nhiều tài nguyên thêm vào như hình ảnh, lớp skin… Theme phải được biên dịch thành file .swc. Khi biên dịch
theme ta nên xác định -include-file cho mỗi file .css hoặc skin mà ta muốn thêm vào .swc
-include-file yêu cầu hai tham số: tên tượng trưng cho file .css và đường dẫn đến
file.
Ví dụ: Ta có một file example_theme.xml như sau <?xml version="1.0"?> <flex-config xmlns="http://www.adobe.com/2006/flex-config"> <output>corporate.swc</output> <include-file> <name>corporate.css</name> <path>../assets/themes/corporate.css</path> </include-file> <include-classes> <class>com.company.styles.ButtonSkin</class> <class>com.company.styles.ToolTipSkin</class> </include-classes> </flex-config>
Sau đó ta dùng -load-config của compc compc -load-config example_theme.xml
7.3.4. CSS thực thi
Ta thường nói đến CSS được biên dịch vào ứng dụng Flex. Bây giờ ta nói về cách nạp và áp dụng CSS vào lúc thực thi ứng dụng.
Đầu tiên CSS phải được biên dịch trước thành file .swf bằng bộ biên dịch mxmlc
Ví dụ:
mxmlc styles.css
Theo ví dụ trên, styles.css sẽ được biên dịch thành styles.swf
Để nạp CSS lúc thực thi ứng dụng, ta dùng phương thức
StyleManager.loadStyleDeclarations()
Ví dụ:
Nếu ta nạp một lúc nhiều file .swf và muốn chỉ áp dụng style khi nạp xong tất cả, ta có thể hỗn áp dụng style bằng tham số false, sau đó gán thành true trong lần gọi
phương thức loadStyleDeclarations() cuối cùng. Ví dụ:
StyleManager.loadStyleDeclarations("stylesA.swf", false); StyleManager.loadStyleDeclarations("stylesB.swf", false); StyleManager.loadStyleDeclarations("stylesC.swf", false); StyleManager.loadStyleDeclarations("stylesD.swf", true);
Nếu nạp file .swf từ domain khác nhau thì ta phải gán giá trị true cho tham số thứ 3 của phương thức loadStyleDeclarations()
Ví dụ:
StyleManager.loadStyleDeclarations("http://www.differentdomain.com /styles.swf", true, true); Vì các style áp dụng chồng lên nhau, cho nên ta cần phải giải phóng các CSS đã nạp bằng phương thức unloadStyleDeclarations().
Ví dụ:
StyleManager.unloadStyleDeclarations("styles.swf");
Phần 2: ActionScript
7.4. Điều kiện – Vòng lập – Toán tử
7.4.1. Điều kiện
Tương tự ngơn ngữ C, ActionScript cung cấp
• Hai loại điều kiện: câu lệnh if và câu lệnh switch
• Năm loại vịng lập: while, do-while, for, for-in và for-each-in