Tài liệu môn Flashcs4 Professional

n đã click vào hình vuông thứ " + (e.index).toString(); Hàm này sẽ đưa dòng chữ “bạn đã click vào hình vuông thứ i” với i = (e.index).toString(); ở đây e là biến thuộc kiểu NewEvent, nó chính là đối tượng đã được phát ra từ hàm dispatchEvent() trong class Rect. Dễ thấy, mỗi lần bạn click vào một hình vuông, một sự kiện NewEvent được phát ra, khi đó text field sẽ hiển thị index của đối tượng được click. Dưới đây là những gì bạn sẽ thấy: FlashCS4 Professional 83 Tôi đã click vào hình vuông thứ 3 và dòng chữ “Bạn đã click vào hình vuông thứ 3” xuất hiện. Vậy là, tuy thuộc tính index của mỗi đối tượng thuộc kiểu Rect là private, nhưng chúng ta vẫn có thể lấy được nó từ class Main. Tới đây, bạn có lẽ sẽ thấy, ví dụ này chưa đáp ứng được những gì nêu ra trong mục 3.3, vậy thì hãy thử thay đổi một số thứ coi. Đầu tiên thay dòng Rect(arr[i]).addEventListener(NewEvent.NEW_EVENT, displayIndex); Bằng: if(i<arr.length-1) Rect(arr[i]).addEventListener(NewEvent.NEW_EVENT, displayIndex); Có nghĩa là hinh vuông thứ 10 không lắng nghe sự kiện như các hình khác. Nhưng bản than nó vẫn tự nghe sự kiện click và phát ra sự kiện NewEvent.NEW_EVENT. Vấn đề là không hề có dòng chữ nào hiện ra cả. Câu hỏi đặt ra: tại sao tất cả 9 đối tượng còn lại đều lắng nghe NewEvent.NEW_EVENT, đối tượng thứ 10 phát ra sự kiện này nhưng không tự nghe, tại sao các đối tượng khác không nghe và hiển thị thông tin index của đối tượng số 10 kia. Câu trả lời đúng như những gì mục 3.3.1 và 3.3.2 nêu ra. Tiếp nữa, giả sử mỗi đối tượng Rect không chỉ phải nghe sự kiện click mà còn phải nghe một vài sự kiện khác. Rõ rang rằng nếu xử lý điều đó ở hàm Main thì sẽ rất tốn công. Thay vì thế ta xử lý việc kiểm tra các sự kiện khác đã xảy ra chưa, nếu rồi thì phát ra Event để hàm Main nhận và xử lý. Điều này giải quyết những gì mà mục 3.3.3 và 3.3.5 đưa ra. Việc removeEventListener không được nêu ra ví dụ trong trường hợp này, tuy thế đây là một chú ý không kém phần quan trọng. Các bạn hãy tham khảo bài 1 chương 4 về code trên timeline, trong đó có sử dụng tới hàm đó, hãy đọc kĩ và thử thay đổi để không sử dụng lệnh đó nữa, bạn sẽ thấy một số bất ổn. Trước khi kết thúc, cảm ơn vì bạn đã theo dõi tới đây. FlashCS4 Professional 84 Chương 4: GIỚI THIỆU VỀ FLEX FRAMEWORK Giới Thiệu: Đúng như tên gọi Flex là một Framework (khung lập trình) hỗ trợ lập trình viên viết các ứng dụng dựa trên SWF (SWF-Based Application), các ứng dụng này chạy trên Flash Player từ phiên bản 9 trở lên, hiện tại phiên bản mới nhất là phiên bản 10. Cũng như .NET Framework và Java, Flex Framework tích hợp sẵn các Component (như Button, Panel, Container, List, Link Button, Box,..) để viết ứng dụng. Các ứng dụng mới này có tên là RIA (Rich Internet Applicaton) , là xu thế mới nhất về viết ứng dụng hay viết phần mềm, trong khuôn khổ bài viết tôi sẽ chỉ nói sơ qua RIA là gì. Một các dễ hiểu , RIA là các ứng dụng chạy trên Internet nhưng lại mang đầy đủ sức mạnh của các ứng dụng chạy trên Desktop truyền thống. Đó có thể là các ứng dụng soạn thảo văn bản , tạo slide , chỉnh sửa và chia sẻ ảnh trực tuyến. Các ứng dụng này có 2 trạng thái làm việc, một là offline và online. Nói đến đây có thể các bạn có thể còn khá mơ hồ về RIA, hãy bắt đầu bằng việc truy cập vào trang Acobat.com hay PhotoshopExpress.com , SlideRocket.com thử dùng các ứng dụng này để có được hình dung về RIA. Sau đó hãy cùng tôi tìm hiểu về Flex để học cách viết các ứng dụng RIA. Ý tưởng về sự ra đời của Flex là do, mối trường của Flash hỗ trợ rất kém cho việc code, khiến các Developer những người không có kiến thức về Design gặp rất nhiều khó khắn trong việc viết ứng dụng cũng như tạo các Animation Script trên nền Flash (Flash Platform).Với nhược điểm này của Flash, Adobe đã tung ra Adobe Flex, với mục đích hỗ trợ tốt hơn cho các Developer, giúp họ viết được các ứng dụng một cách nhanh nhất , tạo các Animation hoàn toàn bằng code. Đồng thời với phiên bản mới nhất hiện sẽ phát hành vào cuối năm 2009 , Adobe Flex 4 (tên mã là Gumbo) hứa hẹn sẽ tạo ra một môi trường phát triển ứng dụng hoàn hỏa cho cả Designer và Developer. Bạn hãy hình dung một bối cảnh như sau, các Designer sẽ thiêt kế bằng Adobe Photoshop hay iLLustrator hay FireWork hay Flash, tất cả các nét vẽ của họ sẽ được giữ nguyên khi bạn import vào Adobe Flex 4.Và nhiệm vụ của chúng ta, những người Developer sẽ tạo các chức năng, xủ lý , kết nối dữ liệu, hiệu ứng, và hiện thực hóa ý tưởng của các Designer trong ứng dụng . Trong chương này chúng ta sẽ học được các cách sau: Cài đặt Flex Builder 3 for Window, MAC. 1. Làm quen mới giao diện sử dụng của Flex Builder. 2. Sử dụng MXML + AS3 cơ bản trong Flex Builder 3. 3. Những đặc điểm đáng chú ý của MXML. 4. Làm quen với các Component cơ bản của Flex Framework. FlashCS4 Professional 85 Bài 1: CÀI ĐẶT FLEX BUILDER 3 Nếu một trong số các bạn từng viết Java, lúc bắt đầu họ sẽ dậy cách chạy các doạn code java bằng lệnh trong Command Promp (Start->Run, gõ “cmd” rồ Enter). Để soạn code java bạn có thể dùng Notepad (Start->Run, gõ “Notepad”, Enter) để soạn thảo.Muốn dịch một file java bạn phải gõ lệnh, giả sử tôi có một file tên là Hello.java trog thư mục D:/Java, muốn dịch file này để chạy tôi gõ lệnh C:/javac D:/Java/Hello.java . Bộ Java SDK (Software Development Kit) sẽ tự động dịch file này, tuy nhiên nếu chương trình bạn có lỗi, sẽ rất khó có thể tìm ra lỗi (debug) của đoạn code đó ở đâu. May mắn thay, nhờ có các trình soạn thỏa và biện dịch (IDE – Intergrated Development Environment) hiện đại, sẽ giúp ta soạn thảo, dịch cũng như sửa lỗi chương trình dễ dàng và thuận tiện hơn rất nhiều. Tương tự Flex cũng vậy, bạn có thể dùng Notepad để soạn thảo và dùng lệnh trong Command Promp để dịch, hoặc dùng Flex Builder 3 là một IDE giúp bạn soạn code nhanh chóng và dễ dàng. Adobe Flex Builder 3 viết trên nền Eclipse IDE là một IDE mã mở viết bằng Java, Adobe đã thương mại hóa Flex Builder 3, nó có 2 phiên bản là Stand Alone (chạy độc lập) và Plug-in cho Eclipse. Bạn dùng bản nào cũng được , tuy nhiên các ví dụ sẽ được dùng bằng Flex Builder 3. Flex Builder là bản thương mại nhưng nếu các bạn là sinh viên thì có thể đắng ký với Adobe để nhận được key giành cho sinh viên, hoàn toàn miễn phí.(cung cấp link). Với ý kiến cá nhân tôi khuyên bạn nên dùng Flex Builder 3 trước, sau đó dùng Plug-in cho Eclipse sau. Một tin mừng nữa là Flex SDK đã và đang hướng tới Open-Source (mã nguồn mở) , điều này rất có ích vì các bạn có thể kiếm được các đoạn code quý và hay, giúp nâng cao khả năng code của mình.Các bạn có thể vào trang opensource.adobe.com hoặc labs.adobe.com để tìm những dự án mã mở mới nhất do Adobe cung cấp. Để tìm các ví dụ (sample) về Flex bạn có thể vào trang Adobe.com/devnet/flex chọn tab Sample, các samples này đều cung cấp code cho bạn. Để chạy được nó các bạn phải cài Flash Player mà chút nữa tôi sẽ hướng dấn bạn cài đặt. Để lấy được code của các ví dụ, khi đang chạy bạn ấn chuột phải rồi chọn “ViewSource”. Mục tiêu bài học: 1. Giới thiệu Flex Builder 3. 2. Cài đặt Flex Builder 3 FlashCS4 Professional 86 Nào, trước tiên hãy download Flex Builder 3. Đầu tiên bạn vào trang , Chọn hệ điều hành mà bạn sử dụng. Bản thương mại hiện tại chỉ có cho Window và MAC. Nếu bạn dùng Linux thì vào đây để down . FlashCS4 Professional 87 Bản cho Linux là bản free nên nó bị lược bỏ một số tính năng như ko hỗ trợ màn hình design giao diện, và bản này là bản Plug-in nên bạn phải down Elipse-IDE ( bắt buộc phải là phiên bản Elipse 3.3.x) . Bài hướng dẫn tri tiết cài Flex trong Linux sẽ ở cuối tài liệu. Sau khi download Flex Builder 3 về, bạn cài đặt như bình thường FlashCS4 Professional 88 Chọn OK Next FlashCS4 Professional 89 Accept the terms,rồi ấn Next Chọn đường dẫn rồi ấn Next FlashCS4 Professional 90 Chọn hết các lựa chọn rồi ấn Next Ấn install để bắt đầu cài đặt. Khi bạn khởi động lần đầu tiên , Flex Builder sẽ họi bạn chọn Workspace (không gian làm vc) để nó hoạt động, bạn có thể nhấn OK luôn để chọn mặc định, hoặc chọn bất ký một Folder trong máy của bạn để làm Workspace rồi nhấn OK. FlashCS4 Professional 91 Và đây là màn hình của Flex Builder 3 khi bạn chạy lần đầu tiên. Tips : Mặc định Flash Player mà Flex Builder 3 cài là phiên bản 9.x.x, và chưa cài Flash Player Debug Version, bản phải vào trang chủ Adobe.com để down bản Flash Player mới nhất (bản 10.x.x). Down về rồi cài như bình thường. FlashCS4 Professional 92 Rồi vào đây download bản Debug (giúp phát hiện lỗi khi chạy chương trình). Download bản dành cho IE (Internet Explorer) và Firefox ( hoặc Netscape). Download về cài đăt như bình thường. Chú ý là bản Flash Player 10 - Debugger Version. FlashCS4 Professional 93 Bài 2: SỬ DỤNG FLEX BUILDER 3 I.Làm quen với giao diện của Flex Builder 3 1.Source View Trên cùng là các menu điều khiển. Khung được tô màu đỏ là khung chứa cấu trúc các Folder trong Project của bạn. Khung tô màu xanh là khung Outline, tức là nó sẽ tóm tắt cho bạn biết đoạn code bạn đang viết có những Component nào, điều này rất có lợi khi bạn đọc code của ai đó mà muốn có cái nhìn tổng quan về code của họ. Mục tiêu bài học: 1. Thiết kế giao diện trong Flex Builder 3. 2. Sử dụng Flex Builder 3 để viết code. FlashCS4 Professional 94 Khung tô mầu hồng là màn hình Editor để bạn soạn code , để ý một chút khi nhìn lên trên cùng bên trái của màn hình Editor bạn thấy nó 2 chế độ là Source và Design. Khi bạn viết code thì bạn chuyển sang chế độ code, khi muốn Design giao diện thì bạn chuyển sang màn hình Design.-Khung da cam trên cùng là nơi bạn chọn các chế độ làm việc của Flex Builder 3, có 3 chế độ làm việc cho bạn khi phát triển ứng dụng. +Flex Development : Chế độ mặc định của Flex Builder, là chế độ để bạn viết code, design giao diện, hiệu ứng. +Flex Debugging : Chế độ Debug( dò lỗi) , viết xong nếu chạy thấy có lỗi, bạn sẽ được hỏi có muốn chuyển sang chế độ Debug hay không, đề tìm lỗi của ứng dụng. Đế khởi động chế độ này bạn chọn Run → Debug. +Flex Profiling : Chế độ quản lý bộ nhớ của ứng dụng, khi ở trong chế độ này bạn sẽ biết ứng dụng mà mình biết dùng hết bao nhiêu bộ nhớ của máy tính.Đế khởi động chế độ này bạn chọn Run → Profile 2.Design View -Khi bạn nhấn vòa tab Design trong màn hình Editor, Flex Builder sẽ chuyện sang chế độ Design, là nơi bạn kéo thả các Componet như Button, Panel, Text Area,.. vòa ứng dụng của mình để sử dụng, khi kéo thả thì Flex Builder sẽ tự sinh code thêm các component đó khi bạn chuyển lại sang cế đó Source View. FlashCS4 Professional 95 Khung mầu hồng là cửa sổ chứa các Component mà Flex Builder hỗ trợ. Khung mầu xanh lá là màn hình Design chính. Khung mầu xanh đậm là khung chứa các thuộc tính (Properties) của Component mà bạn vừa kéo thả vào.Các thuộc tính này có thể là Tên, ID,kích thước, tạo độ,.. Khung mầu hồng là cửa sổ State, cho phép bạn Design các trạng thái (state) của ứng dụng, phần sử dụng state sẽ được nói rõ ở các bài sau. 3.Viết chương trình Hello World. Việc đầu tiên khi bạn viết một ứng dụng bằng Flex Builder hay bất cứ trình soạn thảo hiện đại nào là tạo một Project mới. Vào File → New → Flex Project. Trong ô Project nam đặt tên cho Project của bạn, tôi đặt tên là HelloWorld. Trong phần Project Location, bạn chọn nơi để Project của bạn, bạn có thể chọn mặc định theo Flex Builder hoặc là link đến bất kỳ một Folder nào trong máy bạn, ví dụ D:/Flex Working/ HelloWorld. Trong phần Application Type chọn Web Application (runs in Flash Player), phần Desktop Application sẽ nói ở các bài sau. FlashCS4 Professional 96 Trong phần Application server type chọn “none”, rồi Click Next. Output Folder là nơi các file được Flex Builder dịch từ code của bạn ra sẽ được đưa vào đây, tuy nhiên các file này vẫn chứa các thông tin để Flex Builder debug nó chưa phải là file chạy hoàn toàn. Mặc định được đưa đến thư mục bin-debug, bạn sẽ thấy thư mục này trong Project của bạn. Click Next. FlashCS4 Professional 97 Trong ô Main Application File, tức là file chính của ứng dụng của bạn, file này sẽ được dịch đầu tiên khi Flex Builder bắt đầu dịch ứng dụng mà bạn viết. Bạn có thể đổi tên thành Main.mxml hoặc để mặc định theo Project. Trương hợp của tôi tôi sẽ đổi lại thành Main.mxml. Click Finish để hoàn tất. Sau khi Finish , màn hình của Flex Builder sẽ hiện thị như sau: Nhìn vào cấu trúc các Folder trong Project của bạn bạn có thể thấy, thư mục bin-debug đã được tự động thêm vòa, và file chính Main.mxml trong Folder src mà nãy tôi đã đổi tên từ HelloWorld.mxml thành Main.mxml. Mặc định Flex đang ở chế độ Source View , ở bên phải là màn hình soạn thảo code, bạn nhập đoạn code sau vào. Bạn chưa cần phải hiểu cấu trúc code như nào, tôi sẽ nói với bạn ngay trong bài sau thôi. <mx:Application xmlns:mx="" layout="absolute"> Ấn Ctrl+S đế save lại rồi vào Run → Run Main để chạy ứng dụng. Hoặc nhấn nút FlashCS4 Professional 98 FlashCS4 Professional 99 Bài 2: MXML và Action Script 3.0 trong Flex Builder 3 I.Vai Trò của MXML và ActionScript 3.0 Hai thành phần cơ bản của Flex Framework là MXML (Magic eXtensible Markup Language , chữ M cũng có thể là Macromedia hoặc Maximum) và ActionScript 3.0 . MXML được giới thiệu lần đầu tiên do công ty Macromedia mà nay là Adobe vào tháng 3 năm 2002. MXML là một ngôn ngữ dựa trên cú pháp của XML (XML-Based Vocabulary) , nó cho phép các Developers có thể trình bày được giao diện người dùng (GUI – Graphic User Interface) một cách dế dàng, đồng thời cũng cho phép các Designer những người không có kiến thức về lập trình cũng có thể hiểu được các giao diện này. MXML gồm các thẻ (Tags) hay các thành phần (elements) tương ứng với ActionScript 3.0 Class. Các Tags này sẽ được dịch thành mã ActionScript khi mà một file SWF được tạo. Các thuộc tính (attributes) trong Tags tương ứng với các thuộc tính (properties) và các phương thức (methods) của ActionScript Class. MXML diễn tả mọi thứ trong chương trình của bạn, từ các thành phần của GUI (Graphic User Interface) , đến các Visual Layout (như Panel, Vertical-Box, Horizontal-Box), Effect (hiệu ứng), Data Connection (kết nối dữ liệu). Người lập trình có thể đưa các thành phần này lên ứng dụng của mình bằng cách khai báo trong MXML hoặc ActionScript hoặc MXML + ActionScript (cách này hay dùng nhất) . Ngoài việc khai báo lập trình viên có thế kéo thả các thành phần này trong màn hình Design View ủa Flex Builder. 1.Hiểu rõ về MXML Vài trò của MXML trong một Flex Application cũng giống như vai trò của HTML hay XHTML trong một trang Web. Cả hai đều là ngôn ngữ đánh giấu (Markup Language) diễn tả giao diện người dùng (GUI) .Vì MXML dựa trên cú pháp của XML nên nó phải tuân theo luật của XML . Một tài liệu MXML phải là một dạng chuẩn (Well-Formed) của XML, gồm các yêu cầu sau: Mục tiêu bài học: 1. MXML trong Flex Buider 3.0 2. Action Script 3.0 trong Flex Builder 3.0 FlashCS4 Professional 100 +Một tài liệu MXML có thể chứa một hay nhiều tags hay là node +Một tài liệu MXML chỉ có thể chứa một thẻ gốc (root tag), thường là hoặc là , các thẻ khác được khai báo nằm trong thẻ này. +Mối node phải có thẻ đóng và thẻ mở hoặc +Các node con phải nằm giữa thẻ mở và thẻ đóng của node cha. +Giá trị các thuộc tính phải được chứa trong dấu nháy đơn ( ' ' ) hoặc là nháy kép ( “ “ ). Tất cả các tài liệu MXML đều bắt đầu bằng đoạn khai báo sau : Node gốc của một tài liệu thường là , bạn có thể sử dụng các thành phần khác để làm node gốc ví dụ , sự khác biệt ở đây là , tài liệu MXML nào chứa thẻ sẽ được dịch đâu tiên khi bạn dịch một ứng dụng. Đặc điểm của node gốc là nó miêu tả thành phần đó là cái chứa (container) các thành phần còn lại, ví dụ: <mx:Application xmlns:mx="" layout="absolute"> Hoặc FlashCS4 Professional 101 Bạn có thể để ý thấy mỗi node gốc đều chứa một tham chiếu đến namespace xmlns:mx="" . (chú ý là xmlns viết tắt của XML Namespace). Namespace tham chiếu đến một URI (Uniform Resource Identifier) , chứ không phải là tham chiếu đến trang web tại địa trỉ đó hay URL. Thay vì đó, ta sử dụng một URI độc nhất để cung cấp sự tham chiếu , tham chiếu này nói rằng tất cả các tags mà cùng sử dụng một tiền tố (trong trường hợp này là mx:) đến từ cùng một XML Vocabulary. Để hiểu rõ ý nghĩa của namespace bạn nên tham khảo các tài liệuTiếng Anh hoặc tra Wiki, bởi diễn đạt nó bằng Tiếng Việt rất khó. Sự tương tác giữa MXML với ActionScript khá là dễ hiểu, ta sẽ tìm hiểu qua đoạn code sau đây: <mx:Application xmlns:mx="" layout="absolute"> Đoạn MXML trên tạo ra một giao diện khá đơn giản, chỉ có một Button, đoạn code sẽ tạo ra một đối tượng của Button ActionScript 3.0 Class qua thẻ đồng thời cũng tạo ra id và label của đối tượng Button. Khi dịch , Flex sẽ sinh tương ứng các thẻ với các ActionScript 3.0 Class, sau đó trình Compiler sẽ dịch các ActionScript 3.0 Class này thành bytes code được chứa trong file SWF. 2.ActionScript 3.0 trong Flex Framework Các bạn đã được làm quen với ngôn ngữ ActionScript 3.0 trong Flash , tuy nhiên một số Class được viết lại trong Flex Framework sẽ không thể sử dụng trong Flash. Flex Framework kế thừa các thành phần đã có trong Flash và viết thêm các thành phần khác , đó là nguyên nhân Flash ko dùng được các thành phần có trong Flex. Còn Flex thì dùng được toàn bộ những thành phần đã có trong Flash, tuy nhiên lý thuyết là thế , còn để thực hiện sự tích hợp Flash vào Flex sẽ phài cấu hình thêm một vài thành phần , và tôi sẽ giành hẳn một bài để nói về vấn đề này. 3.Sử dụng ActionScript 3.0 và MXML trong Flex Builder 3 FlashCS4 Professional 102 Sau đây chúng ta sẽ viết một vài ví dụ sử dụng MXML và ActionScript 3.0 . Tạo một Project mới và đặt tên là ASWithMXML , chọn Web Application (Run on Flash Player) , click Finish. Thêm đoạn code sau vào : <mx:Application xmlns:mx="" layout="vertical"> <mx:Button id="myButton" label="Click Me!" click="clickHandler(event)"/> FlashCS4 Professional 103 Lưu ý thay đổi thuộc tính layout=”vertical” , điều này có ý nghĩa chương trình sẽ layout (trình bày) các Componet ở giữa màn hình và theo chiều từ trên xuống. Tiếp theo ta tạo ra một Button, đặt id để có thể sử dụng trong ActionScript và label là “Click Me! “ , khi click vào button thì ta sẽ gọi hàm clickHandler tham số truyền cho hàm này là một event (sự kiện), hàm này sẽ được viết và Xử lý trong ActionScript. Tiếp theo ta tạo một TextArea để hiện thị text ra ngoài màn hình, đặt id là “outPut” . Có thể bạn sẽ thắc mắc id có tác dụng gì trang các thẻ này , ở thẻ Button ta đặt id là “myButton” , điều này tương đương với đoạn code sau trong ActionScript : public var myButton : Button = new Button(). Đăc điểm khi đặt tên cho id là tên này phải là duy nhất. Tiếp theo ta thêm thẻ ỏ ngay dưới thẻ gốc , Flex Builder có một bộ gợi ý rất tốt , khi bạn gõ ” vào , bộ gợi ý (code hint) sẽ tự động sinh ra đoạn mã sau cho bạn , nếu không thấy xuất hiện bạn ấn tổ hợp phím “Ctrl + Space”. Kết quả như sau: <![CDATA[ ]]> Sau đó ta sẽ viết hàm clickHandler() để xử lý sự kiện click vào Button. <![CDATA[ private function clickHandler(e:MouseEvent):void { outPut.text += " My Button is Clicked!" +"\n"; } ]]> Đoạn code trên sẽ xử lý khi click vào Button, ta sẽ gọi hàm clickHandler , trong hàm này ta sẽ gán cho thuộc tính text của TextArea (có id là “outPut”) giá trị như trên. Vơi chú ý là “\n” là ký tự xuống dòng. Tham số truyền vào là e có kiểu là MouseEvent FlashCS4 Professional 104 Sau đây là toàn bộ code của ví dụ vừa rồi. <mx:Application xmlns:mx="" layout="vertical"> <![CDATA[ private function clickHandler(e:MouseEvent):void { outPut.text += " My Button is Clicked!" +"\n"; } ]]> <mx:Button id="myButton" label="Click Me!" click="clickHandler(event)"/> Lưu ý là tôi đã thêm thuộc tính width và height cho TextArea. Chọn Run → Run ASWithMXML, màn hình của bạn sẽ như sau: FlashCS4 Professional 105 Bài 4: MXML nâng cao Data Binding Đây là một tính năng mới trong các ngôn ngữ hiện đại hiện nay. Bạn hãy tìm hiểu kỹ để hiểu rõ tính năng mới này, vì nó sẽ rất hay được sử dụng khi bạn viết ứng dụng. Data Binding cho phép bạn “bind” một thuộc tính của một component đến một thuộc tính của một component khác, với chú ý là 2 thuộc tính này phải cùng kiểu.Hiểu một cách đơn giản Data Binding cho phép ta tạo ra một mối quan hệ giữa 2 thuộc tính của 2 component , một component gọi là source, một component gọi là destination và 2 thuộc tình phải có cùng kiểu , bất cứ khi nào thuộc tính của source thay đổi thì thuộc tính mà ta “bind” cho destination cũng ngay lập tức thay đổi theo. Lấy ví dụ đơn giản như sau, một giao diện có một TextInput ( ô nhập liệu) và một TextArea ( ô hiện thị text), ta sẽ code để khi người dùng đánh vào TextInput thì nội dung ở TextArea cũng sẽ hiện thị theo. Đánh đên đâu hiển thị đến đấy. Taọ một Project mới đặt tên là DataBinding, nhập đoạn code sau vòa : <mx:Application xmlns:mx="" layout="vertical"> Bạn để ý thấy tôi đã “bind” thuộc tính text của TextInput (có id là input) cho thuộc tính text của TextArea (có id là output) , 2 thuộc tính này đều có cùng kiểu là String nên Flex Builder sẽ ko báo lỗi. Mục tiêu bài học: 1. Quản lý dữ liệu trong MXML 2. Quản lý sự kiện trong MXML FlashCS4 Professional 106 Ta “bind” bằng 2 dấu “{“ và “}” , đây là cách “bind” đơn giản nhất trong Flex. Chạy ứng dụng để kiểm tra.Bạn nhập text vào ô TextInput, nội dung bạn vừa gõ sẽ ngay lập tức được hiển thị ở TextArea. Tôi xin nhắc lại cách hiểu DataBinding đơn giản nhất là, khi thuộc tính của source thay đổi thì thuộc tính được “bind” của destination ngay lập tức thay đổi theo. Với chú ý 2 thuộc tính “bind” cho nhau phải cùng kiểu. Sau đây là một vài tricks khi làm việc với dataBinding, sử dụng cách đơn giản nhất là 2 dấu “{“ và “}”. Sử dụng phép toán trong dataBinding <mx:Application xmlns:mx="" layout="vertical"> <mx:TextArea id="destination" text="{Number(source.text)*100}"/> <mx:Application xmlns:mx="" layout="vertical"> FlashCS4 Professional 107 <mx:TextArea id="destination" text="source's text you've entered is {source.text}"/> Các phép điều kiện <mx:Application xmlns:mx="" layout="vertical"> <mx:TextArea id="destination" text="{(source.selected) ? 'bạn đã Tick' : 'bạn chưa Tick'}"/> Sử dụng hàm của <mx:Application xmlns:mx="" layout="vertical"> <![CDATA[ private function xemdiem(truong:String):String { if (truong=="Bách Khoa Hà Nội") return "24"; else if(truong=="Kinh Tế Quốc Dân") return "25"; else if (truong=="Mỹ Thuật Công Nghiệp") return "22"; return "chưa cập nhật"; } ]]> FlashCS4 Professional 108 Bách Khoa Hà Nội Kinh Tế Quốc Dân Mỹ Thuật Công Nghiệp <mx:TextArea id="destination" text="{xemdiem(String(source.selectedItem))}"/> Lưu ý trong các ví dụ này bạn chưa cần quan tâm đến ý nghĩa của một vài dòng code, chúng ta sẽ tìm hiểu nó ở các bài sau. Sau đây là cách thứ 2 để sử dụng DataBinding, đó là sử dụng thẻ , cách sử dụng khá đơn giản như cách đầu. Cú pháp như sau Tương tự ta có thể thêm các phép thoán, điều kiện , hàm AS3 bào trong thẻ này. Phép Toán <mx:Application xmlns:mx="" layout="vertical"> <mx:Binding source="Number(source.text)*100" destination="destination.text"/> Điều Kiện FlashCS4 Professional 109 <mx:Application xmlns:mx="" layout="vertical"> <mx:Binding source="(source.selected) ? 'Bạn đã tick':'Bạn chưatick'" destination="destination.text"/> Dùng hàm AS3 <mx:Application xmlns:mx="" layout="vertical"> <![CDATA[ private function xemdiem(truong:String):String { if (truong=="Bách Khoa Hà Nội") return "24"; else if(truong=="Kinh Tế Quốc Dân") return "25"; else if (truong=="Mỹ Thuật Công Nghiệp") return "22"; return "chưa cập nhật"; } ]]> FlashCS4 Professional 110 Bách Khoa Hà Nội Kinh Tế Quốc Dân Mỹ Thuật Công Nghiệp <mx:Binding source="xemdiem(String(source.selectedItem))" destination="destination.text"/> Trong tất cả các ví dụ trên tôi đều cho thuộc tính layout của thẻ là “vertical”. Mặc định các đối tượng được tao ra bằng MXML đều có khả năng “bind”, để khai báo một biến có khả năng “bind” trong AS3 ta phải viết thẻ [Bindable] trên tên biến . <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var collection:Array; [Bindable] public var dataProvider:ArrayCollection; ]]> Thẻ [Bindable] gọi là thẻ MetaData, chỉ có tác dụng với một biến. Muốn bao nhiêu biến có khả năng “bind” thì phải có bấy nhiêu thẻ [Bindable] , và phải viết theo luật như trên. Có thể [Bindable] cho cả một Class. Bằng cách như sau: package FlashCS4 Professional 111 { [Bindable] public class BindMe { public function BindMe() { } } } Điều đó có nghĩa tất cả các thuộc tính trong Class BindMe đều có khả năng “bind”. Một chú ý nhỏ nữa là “bind” chỉ áp dụng cho thuộc tính (property), ko áp dụng cho phương thức (Method). Events trong MXML Trong các chương trước chúng ta đã được tìm hiểu và xử lý qua về các sự kiện (events) trong AS3 , như sự kiện Click , Double Click, Mouse_Over , Việc xử lý các events trong MXML khá là đơn giản hơn trong AS3 , và thường thì ta kết hợp cả AS3 và MXML để xử lý sự kiện, việc kết hợp này làm cho số lượng dòng code giảm đi rất nhiều. Sau đây ta tìm hiểu qua cách xử lý events vơi MXML + AS3 <mx:Application xmlns:mx="" layout="vertical"> <mx:Button click="output.text += 'Button is Clicked \n'" FlashCS4 Professional 112 mouseOver="output.text += 'Mouse Over Button \n' " mouseOut="output.text += 'Mouse Out Button \n' " mouseUp="output.text += 'Mouse Up Button \n' "/> Đây là cách xử lý event hoàn toàn bằng MXML, bạn có thể thấy no rất ngắn gọn. Chú ý rằng để viêt một String trong dấu ( “ “ ) ta dùng dấu ( ' ' ). Chạy chương trình ta có kết quả sau: Giả sử ta có rất nhiều Button cùng lắng nghe các sự kiện này, đây là lúc ta dùng đến AS3 đê xử lý, nếu chỉ dùng MXML thì code sẽ lại dài hơn. Sửa code trên thành như sau: FlashCS4 Professional 113 <mx:Application xmlns:mx="" layout="vertical"> <mx:Button id="btn1" label="Button 1" click="clickHandler(event)" mouseOver="overHandler(event)" mouseOut="outHandler(event)" mouseUp="upHandler(event)"/> <mx:Button id="btn2" label="Button 2" click="clickHandler(event)" mouseOver="overHandler(event)" mouseOut="outHandler(event)" mouseUp="upHandler(event)"/> <mx:Button id="btn3" label="Button 3" click="clickHandler(event)" mouseOver="overHandler(event)" mouseOut="outHandler(event)" mouseUp="upHandler(event)"/> FlashCS4 Professional 114 Bây h khi các even xảy ra ta sẽ gọi các hàm tương ứng để xử lý, truyền vào các hàm này tham số là “event” , bắt buộc phải viết “event” ko được viết “evt” hay “e”,.. Tiếp theo ta thêm thẻ ở dưới thẻ , viết các hàm xử lý các sự kiện đó. Sau đây là code đầy đủ của ví dụ vừa rồi : <mx:Application xmlns:mx="" layout="vertical"> <![CDATA[ private function clickHandler(e:MouseEvent):void { var result:String = ""; switch(e.currentTarget) { case btn1 : result = "Button 1"; break; case btn2 : result = "Button 2"; break; case btn3 : result = "Button 3";break; } output.text = result + " is Clicked"; } FlashCS4 Professional 115 private function overHandler(e:MouseEvent):void { var result:String = ""; switch(e.currentTarget) { case btn1 : result = "Button 1"; break; case btn2 : result = "Button 2"; break; case btn3 : result = "Button 3";break; } output.text = result + " is Over"; } private function outHandler(e:MouseEvent):void { var result:String = ""; switch(e.currentTarget) { case btn1 : result = "Button 1"; break; case btn2 : result = "Button 2"; break; case btn3 : result = "Button 3";break; } output.text = result + " is Out"; } private function upHandler(e:MouseEvent):void { FlashCS4 Professional 116 var result:String = ""; switch(e.currentTarget) { case btn1 : result = "Button 1"; break; case btn2 : result = "Button 2"; break; case btn3 : result = "Button 3";break; } output.text = result + " is Up"; } ]]> <mx:Button id="btn1" label="Button 1" click="clickHandler(event)" mouseOver="overHandler(event)" mouseOut="outHandler(event)" mouseUp="upHandler(event)"/> <mx:Button id="btn2" label="Button 2" click="clickHandler(event)" mouseOver="overHandler(event)" mouseOut="outHandler(event)" mouseUp="upHandler(event)"/> FlashCS4 Professional 117 <mx:Button id="btn3" label="Button 3" click="clickHandler(event)" mouseOver="overHandler(event)" mouseOut="outHandler(event)" mouseUp="upHandler(event)"/> Chú ý thuộc tính currentTarget của biến e . currentTarget ở đây chinh là đối tượng lắng nghe và nhận được sự kiện đó. Ở đây có 3 đối tượng là btn1 , btn2 , btn3 cùng lắng nghe các luồng sự kiện giống nhau, để xác định chính xác đối tượng nào vừa nhận được event thì ta dùng thuộc tính currentTarget của MouseEvent (biến e có kiểu MouseEvent) . Qua đây ta có thể thấy sự kết hợp MXML + AS3 làm cho các dòng code trở nên sáng sủa hơn rất nhiều , nhưng người Design hay một người chưa hề biết về MXML cũng có thể hiểu được ngay. Các Component của Flex có rất nhiều event, tôi ko thể liệt kê hết ra được, cách dùng chủ yếu dựa vào kinh nghiệm. Để tham khảo bạn có thể vào Help → Help Content , gõ vào một Component bạn muốn xem , ví dụ TextInput để tham khảo. Lưu ý khi bạn sủ dụng Help lần đầu tiên, Flex Builder sẽ mất thời gian để index các file,bạn phải đợi cho Flex Builder index xong nên lần khởi động đầu sẽ rất lâu, tùy vào cấu hình của máy bạn. Ở lần thứ 2 thì sẽ nhanh hơn. FlashCS4 Professional 118 Với Help Engine bạn có thể tra các thuộc tính (Properties), phương thức (Methods) , sự kiện (events) , Styles , hiệu ứng (Effects) của các Component có sẵn trong Flex Builder 3. Chú ý , ý nghĩa của các events được viết bằng tiếng Anh ngay bên cạnh, nên bạn phải dịch ra để biết các events đó xảy ra khi nào. FlashCS4 Professional 119 Bài 5: Component trong Flex Framework \ Layout Container Trước tiên ta làm quen với một vài Layout rất hay dùng trong Flex. 1.VBox (Vertical Box) Các component được chứa trong Vbox sẽ được layout (sắp xếp, bố cục) từ trên xuống dưới. Chú ý rằng nó giống thuộc tính Layout của thẻ , layout=”vertical” <mx:Application xmlns:mx="" layout="vertical"> Mục tiêu bài học: 1. Layout Container. 2. HBox. 3. Panel 4. Form 5. ControlBar 6. Navigator Container 7. ViewStack Container 8. Accordion Container 9. TabNavigator Container 10. Flex và XML 11. Repeater Component 12. Flex và CSS FlashCS4 Professional 120 2.HBox (Horizontal-Box) Các Component chưa trong Hbox sẽ được layout theo chiều từ trái sang phải.Tương đương với trường hợp thuộc tính layout của thẻ là layout=”horizontal”. <mx:Application xmlns:mx="" layout="vertical"> FlashCS4 Professional 121 3.Panel Trong thẻ có thuộc tính layout giống với của thẻ . Sẽ có 3 giá trị cho thuộc tính layout là “vertical”, “horizontal”,”absolute”. 4.Form Vào các forum hay trang Web nào bắt đăng ký , ta thường thấy các Form nhập liệu để đăng nhập, và đây là cách tạo ra Form trong Flex . <mx:Application xmlns:mx="" layout="vertical"> FlashCS4 Professional 122 5.ControlBar Component này thường đi theo Panel, sử dụng như sau: <mx:Application xmlns:mx="" layout="vertical"> FlashCS4 Professional 123 FlashCS4 Professional 124 Để biết thêm các Layout Container nữa hỗ trợ trong Flex, bạn chuyển sang chế độ Design View, tìm trong Panel Component. Navigator Container Thành phần cơ bản nhất của các Navigator Container này là ViewStack Container, ta sẽ tìm hiểu ViewStack Container trước. FlashCS4 Professional 125 ViewStack Container Dùng ViewStack trong trường hợp nào. Giả sử bây h ta có 4 panel : Tin Tức , Sự Kiện, Thể Thao, Thời Tiết. Giờ ta muốn cho nó vào một Container và có nút điều khiển để chuyển sang các Panel khác. Đây là lúc cần dùng ViewStack, cho phép chứa nhiều “View” vào một cái Stack để quản lý. Tạo một Project mới, đặt tên là NavigatorContainer. Nhập đoạn code sau vào. <mx:Application xmlns:mx="" layout="vertical"> Khi chạy chương trình bạn sẽ chỉ thấy Panel Tin Tức, và chưa có nút điều khiển để chuyển sang các Panel khác. Thêm thẻ sau vòa ở trên thẻ Bạn chú ý đên thuộc tính dataProvider , có thể hiểu là “cái cung cấp dữ liệu” cho ButtonBar ở đây là ViewStack (id là “vs”). Sử dụng dấu “{ }” để “bind” dữ liệu. Sau đây là code đầy đủ: <mx:Application xmlns:mx="" layout="vertical"> FlashCS4 Professional 126 Chú ý tôi đã thêm thuộc tính label cho các Panel , ButtonBar sẽ lấy các label để làm label cho các Button của mình. Chạy ứng dụng, kết quả như sau: Đến đây có thể các bạn đã hiểu phần nào về các Navigator Container Bạn có thể thay thẻ : FlashCS4 Professional 127 Thành : hoặc hoặc Chạy ứng dụng và tìm thấy trải nghiệm cho riêng mình. Accordion Container Đây là một Container khá hay, có thể bạn đã nhìn thấy ở nhiều trang Web. Tạo Project mới và thêm đoạn code đây vào. <mx:Application xmlns:mx="" layout="vertical"> FlashCS4 Professional 128 Canvas là một Container hay dùng, và là Container đơn giản nhất, chỉ đơn thuần có một vùng hiển thị và ko có layout. Chạy ứng dụng , kết quả như sau: TabNavigator Container Sủa đoạn code sau của Project trên. FlashCS4 Professional 129 Thành Chạy và trải nghiệm Chú ý ở phần Container. Các bạn có thể thấy các Container có khả năng chứa (contain) các Component khác trong nó, như Label, Button, TextArea. Còn các Label, Button,TextArea,.. ko phải là các Container nên nó không có khả năng chứa các Component khác trong nó. Để khai bảo một Component nằm trong một Container bằng MXML ta sử dụng như sau: Khia báo trên có nghĩa là có một Component là Label nằm trong một Container là Canvas. Nó tương đương với câu lệnh addChild trong AS3. Để ý dấu “/” của thẻ và dấu “/” của thẻ , dấu “/” gọi là dấu đóng thẻ, khi khai báo một thẻ trong MXML thì phải có dấu “/” báo hiệu kết thúc một thẻ. Có 2 cách khai báo khi nào đóng thẻ, một là , hoặc . Khi một thẻ nằm giữa thẻ đóng và thẻ mở của một thẻ khác thì nó là con của thẻ đó, hay bị chứa bởi thẻ đó. Để biết là Container hay Component ta có thẻ tra Help FlashCS4 Professional 130 Canvas là con của lớp Container trong FlexFramework, do đó theo quy luật cha con trong hướng đối tượng, Canvas sẽ có khả năng chứa các Component khác trong nó. Bản thân Canvas cũng có thể chứa một Canvas khác trong nó. Flex và XML Nếu một trong số các bạn từng lập trình C hay Java hay C# , ở phần đọc file, các bạn thường lưu file có đuôi .dat để lưu dữ liệu trong đó. Trong file .dat các bạn tự lưu trữ dữ liểu của mình thành từng dòng, cách nhau bởi một ký tự nào đó do bạn quy định. Đến khi đọc dữ liệu bạn cũng phải thiết lập một quy trình riêng để đọc file đó .Đây là cách lưu dữ liệu truyền thống và người bắt đầu thường gặp khó khăn. Internet ra đời đòi hỏi phải có một định dạng file chuẩn để giao tiếp. Và XML đã ra đời theo mục đích đó, với cấu trúc đơn giản, dễ hiểu, dễ xử lý hơn cách lưu trữ truyền thống vào các file. Lúc đầu tôi cũng đã giới thiệu MXML là một ngôn ngữ đánh dấu dựa theo XML (XML-based) , nên qua các ví dụ trước về MXML có thể bạn cũng đã hiểu qua về cấu trúc của file XML. Nó là ngôn ngữ đánh dấu, gồm một thẻ gốc (root) và nhiều thẻ con ở bên trong. Có thể hiểu trực quan thẻ root như một cái hộp bao ở ngoài cùng, bên trong cái hộp này lại chứa các hộp con khác, trong các hộp con cũng có thể chứa các hộp con khác nữa. Đồ vật ở bên trong các hộp con chính là dữ liệu của mà chúng ta cần. Để lấy được nội dung trong các hộp con ta phải biết địa trỉ hay vị trí của cái hộp đó so với hộp gốc để lấy. XML khác HTML , MXML , XHTML ở chỗ , trong HTML , MXML, XHTML định nghĩa sẵn các thẻ, và ta buộc phải hiểu rõ chức năng của thẻ đó để dùng. Trong XML cho ta tự địn nghĩa các thẻ, miến sao bạn thấy dễ hiểu nhất cho mình cũng như cho người đọc. Nòa hãy xem qua một file XML đơn giản. Nguyen Thach Duong FlashCS4 Professional 131 21 Ha Noi abc@gmail.com thachduong 123456 Nguyen Thach Duong 21 Ha Noi abc@gmail.com thachduong 123456 Bui Trung Hieu 21 Ha Noi abc@gmail.com trunghieubui 123456 Nguyen Hoang Bach 21 Ha Noi abc@gmail.com FlashCS4 Professional 132 hoangbach 123456 Nguyen Thanh Linh 21 Ha Noi abc@gmail.com thanhlinh 123456 Ta thấy hộp bao ngoài cùng hay thẻ gốc của file XML trên là (lưu ý là có thẻ mở và thẻ đóng), bên trong nó có 4 hộp con là trong mổi hộp này lại có các hộp con là , , , Nội dung của các hộp con này chính là dữ liệu , nội dung của thẻ là tên người, là tuổi, Khi Flex đọc file XML này, các thẻ sẽ được chuyển thành các Object để sử dụng trong MXML hoặc AS3. Bây h ta sẽ dùng Flex đọc file XML này , rồi hiển thị lên một DataGrid. Bật Notepad bằng cách vào Start → Run → gõ Notepad → ấn Enter. Copy nội dung file xml trên vào rồi save lại với tên members.xml. Tạo một Project mới đặt tên là FlexAndXML , trong thư mục src, nhật chuột phải → new → Folder, đặt tên folder mới là assets. FlashCS4 Professional 133 Chuột phải vòa thư mục assets vừa tạo , chọn New → Folder, đặt tên là xml . Copy file members.xml bạn vừa tạo rồi Paste vòa thư mục xml mới tạo này. FlashCS4 Professional 134 Trong file FlexAndXML.mxml , thêm thẻ sau ở dưới thẻ Đối tượng HTTPService chuyên dùng để đọc các dữ liệu bên ngoài, nếu bạn từng làm AJAX thì nó giống đối tượng XMLHttpRequest. Cấp cho đối tượng HTTPService id để sự dụng trong ActionScript , rồi cấp đường dẫn url đến file cần đọc , url có thể là đường dẫn đến một file xml ở trên mạng, trường hợp này ta phải nhập Tiếp theo trong thẻ thêm sự kiện creationComplete. <mx:Application xmlns:mx="" layout="vertical" creationComplete="memData.send()"> Chú ý tôi thường xuyên để layout=”vertical”. Để hiển thị dữ liệu ta dùng một DataGrid, khai báo một đối tượng DataGrid và xử lý thuộc tính dataProvider cho nó. Lưu ý thuộc tính dataProvider có kiểu là một mảng các dữ liệu, có thể là Array, ArrayCollection, hay XMLList. Câu lệnh memData.lastResult cho ra đối tượng file XML, memData.lastResult.members.member cho ta một mảng các Object member . Chạy chương trình , kêt quả như sau: Có vẻ khá ổn , nhưng trường hợp bản đang quản trị một Forum và muốn dấu Password cũng như Location của người dùng. Đồng thời cũng muốn sắp xếp lại thứ tự các cột trong DataGrid. Ta phải thay đổi một chút code thành như sau: FlashCS4 Professional 135 <mx:Application xmlns:mx="" layout="vertical" creationComplete="memData.send()"> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.collections.ArrayCollection; [Bindable] private var collection:ArrayCollection; private function resultHandler(e:ResultEvent):void { collection = e.result.members.member; } private function faultHandler(e:FaultEvent):void { Alert.show(e.fault.faultDetail); } ]]> <mx:HTTPService id="memData" url="assets/xml/members.xml" result="resultHandler(event)" fault="faultHandler(event)"/> FlashCS4 Professional 136 <mx:DataGridColumn headerText="Full Name" dataField="name"/> Sự thay đổi đầu tiên là ta khai báo một biến collection có kiểu ArrayCollection (kiểu dữ liệu tập hợp) , bạn để ý thấy ngay trên nó có một thẻ là [Bindable] , tức là có thể binding cho Component khác Ta bind collection cho thuộc tính dataProvider của DataGrid. Tức là bất cứ khi nào dữ liệu của collection thay đổi thì dữ liệu của dataProvider của DataGrid thay đổi theo ngay lập tức. Tiếp theo ta sử lý 2 sự kiện thông dụng của lớp HTTPService là result và fault. Khi có result ta sẽ gọi hàm resultHandler để xử lý. Nếu có lỗi (fault) thì hàm faultHandler sẽ được gọi. Trong hàm resultHandler(e:ResultEvent), ta gán cho collection tập hợp các member trong file members.xml. Khi collection cập nhật xong , lập tức dataProvider của DataGrid được cập nhật theo. Nếu có lỗi, ta sẽ hiện một Alert cho người dùng biết lỗi. Chú ý các dòng Import: import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.collections.ArrayCollection; Trong thẻ DataGrid ta khai báo một màng các columns. Trong columns có các DataGridColumn , ta gán cho nó một headerText , và dataField. Chú ý rằng dataField chính là tên các thẻ con của thẻ member trong file members.xml. Chạy chươn trình , kết quà như sau: FlashCS4 Professional 137 Repeater Component Để hiểu ý nghĩa của Repeater Component ta sẽ tìm hiểu qua ví dụ sau. Ta sẽ mô phỏng một chương trình trắc nghiệm kiến thức. Dữ liệu được lưu trong file questions.xml. Nội dung file này như sau: 1 Con gì tám cẳng 2 càng, một mai 2 mắt bò ngang trên bờ Cua Gà Hổ Báo Cua 2 1+1=? FlashCS4 Professional 138 2 10 5 7 10 3 Nhóm Rock nào sáng tác bài Khám Phá Bức Tường Thủy Triều Đỏ Microway Thánh Giá Đỏ Bức Tường 4 Ngôn ngữ nào thuần hướng đối tượng đầu tiên Java C Sharp C++ Action Script 3.0 Java FlashCS4 Professional 139 Ta thấy thẻ gốc là , trong thẻ này gồm một tập hợp (Collection) các thẻ trong mỗi thẻ lại có các thẻ ,,... Phần giao diện , ta muốn hiển thị mỗi phần gồm 1 hàng là câu hỏi, 1 hàng là các đáp án. Dễ nhận thấy sẽ có 4 phần như vậy vì có 4 thẻ , và phần nào cũng giống nhau về giao diện. Đây là lúc ta dùng đến Repeater Component. Tạo Project mới tên là Repeater, tọa thư mục assets/xml trong thư mục src. Tọa file questions.xml có nội dung như trên rồi cho copy/paste vào thư mục xml. Tương tự như phần đọc XML bằng Flex ta nhập đoạn code sau: <mx:Application xmlns:mx="" layout="vertical" creationComplete="questionData.send()" > <![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.collections.ArrayCollection; [Bindable] private var collection:ArrayCollection; private function resultHandler(e:ResultEvent):void { trace("ok"); collection = e.result.questions.question; trace(collection.length); } FlashCS4 Professional 140 private function faultHandler(e:FaultEvent):void { Alert.show(e.fault.faultDetail,"ERROR"); } ]]> <mx:HTTPService id="questionData" url="assets/xml/questions.xml" result="resultHandler(event)" fault="faultHandler(event)"/> Biến collection sẽ lưu trữ một tập hợp các Object question , và ta sẽ làm dataProvider cho Repeater Component của chúng ta. Khai báo một Repeater Object như sau Tiếp theo ta thêm một Label trong Repeater để hiện thị câu hỏi, và 4 RadioButton để hiển thị các đáp án. Ta đưa 4 RadioButton này vào một Hbox để layout theo chiều từ trái sang phải. Chú ý rằng layout của là vertical nên Label và Hbox sẽ lại được layout theo chiều từ trên xuống. Nhập tiếp đoạn code sau <mx:RadioButton label="{rpt.currentItem.dapanA}" groupName="{rpt.currentItem.id}"/> FlashCS4 Professional 141 <mx:RadioButton label="{rpt.currentItem.dapanB}" groupName="{rpt.currentItem.id}"/> <mx:RadioButton label="{rpt.currentItem.dapanC}" groupName="{rpt.currentItem.id}"/> <mx:RadioButton label="{rpt.currentItem.dapanD}" groupName="{rpt.currentItem.id}"/> Tabind thuộc tính text của Label và thuộc tính label của RaidoButton cho rpt.currentItem. Lưu ý rpt.currentItem chính là một đối tượng question đã load từ XML ra. Mỗi đối tượng question lại chứa các đối tượng id,name,dapanA... và đế lấy giá trị của các object này ta dùng toán tử “.” đế lấy. Rpt.currentItem.name cho ra name của question, giá trị giống với giá trị của thẻ trong thẻ Ta để các RadioButton theo từng Group đê cho người dùng chỉ chọn được một lựa chọn. Group các RadioButton của các câu hỏi lại phải khác nhau, nên ta đặt groupName theo id của từng câu hỏi. Chạy ứng dụng , kết quả sẽ như sau: FlashCS4 Professional 142 State Và Transition Trong Flex không có Timeline nhưng có state để ta định nghĩa các trạng thái (state) của một chương trình , đồng thời cũng cho phép tạo các animation để chuyển (transition) giữa các state đó. Làm cho khả năng tương tác của ứng dụng trở nên hấp dẫn hơn Tạo Project mói, đặt tên là StateTransition. Chuyển sang Design View. Kéo thả 2 Panel và 2 Button vào , bố trí như hình vẽ. Nhấp đúp vào thanh Title của Panel để đặt tên hoặc vào khung Properties để thiết lập các thuộc tính FlashCS4 Professional 143 đặt id và title cho Panel như trên. Đặt label cho 2 button là Next và Prev Chuyển sang màn hình Source, Flex Builder sẽ tự động sinh mã như sau: <mx:Application xmlns:mx="" layout="absolute"> <mx:Panel x="88.5" y="100" width="250" height="200" layout="absolute" title="Panel 1" id="panel1"> <mx:Panel x="240" y="10" width="177" height="82" layout="absolute" title="Panel2" id="panel2"> Chuyển lại sang màn hình Desing , làm tiếp như sau: Vào khung State , chuột phải vào rồi chọn New State. Khung New State hiện ra , bạn điền tiếp như sau: FlashCS4 Professional 144 Đặt tên state mới là “result” và Based on: , trong state mới, ta điều chỉnh lại vị trí cũng như kích thước của các panel như hình sau. Bạn để ý rằng ta đang ở trong state result . Click vào Based state , rồi vòa result đê thấy sự thay đổi ở màn hình Design. Bây giờ ta sẽ tạo ra transition để chuyển giữa 2 state này . Nhập đoạn code sau vào: FlashCS4 Professional 145 Thuộc tính fromState=”*” và toState=”*” báo hiệu rằng khi chuyển bất kì từ state nào sang state nào thì đều chạy một effect là “changeTheState”. ChangeTheState là id của một Parallel, trong Parallel chứa 2 effect là Move và Resize. Cung cấp cho 2 effect này targets, targets ở đây là mảng các đối tượng chị sự tác động của 2 effect này. Trong trường hợp này là panel1 và panel2. Lưu ý là panel1 và panel2 là 2 id của đối tượng Panel. 2 Effect này đặt trong thẻ có nghĩa là chúng cùng chạy song song với nhau, Move và Resize cùng chạy động thời. Ngoài thẻ còn có thẻ , nghĩa là chạy tuần tự từng effect một. Giờ ta cần một sự kiện nào đó phát ra để chuyển giữa 2 state này. Thêm sự kiện click cho 2 Button, và xử lý như sau: currentState=' ' tức là quay về Base state. CurrentState= ' result ' tức là chuyển sang state result . Toaàn bộ Code của chương trình sẽ như sau: <mx:Application xmlns:mx="" layout="absolute"> <mx:SetProperty target="{panel1}" name="width" value="201"/> <mx:SetProperty target="{panel1}" name="height" value="82"/> <mx:SetProperty target="{panel2}" name="width" value="240"/> <mx:SetProperty target="{panel2}" name="height" value="200"/> FlashCS4 Professional 146 <mx:Panel x="88.5" y="100" width="250" height="200" layout="absolute" title="Panel 1" id="panel1"> <mx:Panel x="240" y="10" width="177" height="82" layout="absolute" title="Panel2" id="panel2"> <mx:Button x="352" y="278" label="Next" click="currentState='result' "/> Với chú ý , . Chạy ứng dụng. FlashCS4 Professional 147 CSS With Flex Nếu bạn nào đã từng làm Web chắc chắn sẽ ko thể ko biết tới CSS, nó giúp cho ta đồng bộ hóa giao diện một cách nhanh chóng. Sau đây ta sẽ tìm hiểu cách sử dụng CSS một cách cơ bản trong Flex. Tạo Project mới đặt tên là CSSWithFlex. Chuột phải vào folder src chọn New → CSS File , đặt tên là main.css. Truy cập vào địa trỉ sau, Bạn chọn phần Button , rồi làm một vài tinh chỉnh nhỏ , ở panel CSS sẽ hiện ra ngay các code CSS , bạn copy nó rồi paste vào file main.css. Trong fiel CSSWithFlex.mxml . Bạn nhập đoạn code sau: FlashCS4 Professional 148 <mx:Application xmlns:mx="" layout="absolute"> Trong thẻ Style, bạn cấp đường dẫn đên file main.css. Flex sẽ tự động nhúng file css vào file SWF. Bạn có thể tùy biến Panel, hoặc các Component khác trong trang nãy tôi vừa cấp, rồi paste vào file main.css. /* CSS file */ Button { cornerRadius: 20; textIndent: 0; highlightAlphas: 0.4, 0.48; fillColors: #000000, #666666, #006699, #eeeeee; color: #ffffff; textRollOverColor: #0b333c; themeColor: #666666; } Panel { borderColor: #000000; borderAlpha: 0.52; roundedBottomCorners: true; cornerRadius: 8; titleStyleName: "mypanelTitle"; } .mypanelTitle { color: #ffffff; FlashCS4 Professional 149 textAlign: center; } <mx:Application xmlns:mx="" layout="absolute"> <mx:Panel title="My Custom Skin Panel" x="104.5" y="87" width="218" height="189"/>