Tìm hiểu công nghệ Flex và xây dựng ứng dụng minh họa

: import flash.net.navigateToURL; import flash.net.URLRequest; import flash.net.URLVariables; Ta cũng có thể sử dụng lớp URLVariables để gửi các giá trị cho script server-side , hoặc cũng có thể gọi một hàm JavaScript bằng cách sử dụng navigateToURL. 4.5.2 Gọi JavaScript với navigateToURL Thay vì load trang web , ta có thể gọi hàm JavaScript với phương thức navigateToURL . Làm điều này , không cần chỉ định URL . Sử dụng navigateToURL để tham chiếu tới 1 lệnh hay 1 hàm JavaScript trong trang web chứa file SWF : var jsRequest:URLRequest = new URLRequest("javascript: doWork();"); Dòng trên gọi hàm JavaScript doWork trong trang web chứa file SWF . Cách tiếp cận này ý thức được rằng không thể làm việc trên tất cả các trình duyệt ,và thiết lập bảo mật để ngăn chặn code Javascript thực thi . Hoặc có thể tiếp cận bằng cách sử dụng API ngoài . Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 44 4.6 Gửi biến bên trong file SWF Trong một số trường hợp , các trang web cần gửi các giá trị bên trong ứng dụng Flex . Ta phải làm điều này nếu bạn muốn sử dụng code server – side để login và muốn chỉ ra các ứng dụng mà người dùng đã đặc quyền . Ta cũng có thể sử dụng các ứng dụng từ trang web để load các tình trạng cụ thể của ứng dụng Flex . Một cách làm việc khác là với API ngoài , có 2 phương pháp chính để gửi biến bên trong file SWF để họ có thể sử dụng trong các ứng dụng :  Sử dụng các tham số chuỗi truy vấn khi tải các file SWF .  Sử dụng flashVars . 4.6.1 Sử dụng tham số chuỗi truy vấn (querystring parameter) Các tham số chuỗi truy vấn là cặp biến name-value được thêm vào cuối URL hoặc tên file , ví dụ: mySWF.swf?userID=1234&admin=true Một khi thêm các tham số vào cuối tên file SWF , chúng có thể truy cập như là các biến trong ứng dụng Flex . Lưu ý không thể thông qua các biến theo cách nào vào file SWF để chạy bên trong một ứng dụng độc lập . Thật dễ để thêm các tham số chuỗi truy vấn khi bạn nhúng file SWF trực tiếp bằng cách sử dụng và thẻ bên trong trang HTML . Tuy nhiên , Flex tạo ra một wrapper mà giấu đi các thẻ bên trong HTML . Nếu đang làm việc với wrapper mặc định này , ta cần phải chỉnh sửa folder html-template đẩu tiên . 4.6.1.1 Chỉnh sửa file Flex wrapper Các chuẩn SWF Flex wrapper là được tạo từ file AC_OETags.js và index.template.html trong folder html-template của project . Ta cần phải chỉnh sửa Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 45 các file mẫu để tạo ra các trang lưu trữ HTML cho file SWF của ta . Ta không nên chỉnh sửa các file trong thư mục bin cũng như các file có thể được ghi đè mỗi khi bạn biên dịch các tập tin SWF . Ta sẽ biết cách làm thế nào để add danh sách các tham số trước đó vào các file wrapper chuẩn thông qua ví dụ dưới đây . Để thêm các biến querystring ,mở file AC_OETags.js trong folder html- template và định vị trí chức năng AC_FL_RunContent .Sửa dòng bắt đầu với khung mở , thêm các biến chuỗi truy vấn như được in đậm : function AC_FL_RunContent(){ var ret = AC_GetArgs ( arguments, ".swf?userID=1234&admin=true", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" , "application/x-shockwave-flash" ); AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs); } Ta mở file index.template.html trong project và đặt khối vào cuối trang . Chỉnh sửa thuộc tính như sau ,thêm các tham số : Ta cũng cần phải chỉnh sửa lại thuộc tính ban đầu : <embed src="${swf}.swf?userID=1234&admin=true" Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 46 4.6.1.2 Truy cập các biến querystring trong Flex Khi thêm các tham số querystring , ta cần phải chỉnh sửa file ứng dụng Flex để nó có thể nhận được chúng . Để bắt đầu , bạn cần khai báo một biến cho mỗi tham số ta muốn truy cập trong khối của file MXML : private var myVar:String; Ta có thể gán giá trị tham số vào biến như sau : myVar = Application.application.parameters.myVar; Ta cũng có thể làm điều này với một dòng code như sau : private var myVar:String = Application.application.parameters.myVar; Ta có thể sử dụng các biến được tải trong hàm function hoặc ràng buộc nó vào thuộc tính của một component . 4.6.2 Sử dụng flashVars Có thể thông qua các biến của file SWF bằng cách thiết lập thuộc tính flashVars trong hai thẻ và của file : <embed flashVars=' userID=1234&admin=true'... Như ở phần trước , ta cần chỉnh sửa các file wrapper nếu ta sử dụng Flex wrapper mặc định . Thời gian này ta chỉ cần thay đổi file index.template.html. Thêm các tham số có liên quan được in đậm ở đây : AC_FL_RunContent( "src", "playerProductInstall", "FlashVars", "userID=1234&admin=true&MMredirectURL="+MMredirectURL+ '&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"" Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 47 Cũng cần thêm các tham số trong khối tiếp theo của file : else if (hasRequestedVersion) { // if we've detected an acceptable version // embed the Flash Content SWF when all tests are passed AC_FL_RunContent( "src", "${swf}", "width", "${width}", "height", "${height}", "align", "middle", "id", "${application}", "quality", "high", "bgcolor", "${bgcolor}", "name", "${application}", "flashvars",'userID=1234&admin=true&historyUrl=history.htm %3F&lconid=' + lc_id + '', Cuối cùng , cần thêm khối và các tham số được in đậm như sau: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="${application}" width="${width}" height="${height}" codebase="➥ current/swflash.cab"> Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 48 <embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}" width="${width}" height="${height}" name="${application}" align="middle" flashVars='userID=1234&admin=true' Ta có thể truy cập các tham số bên trong giá trị flashVars giống như phần trước như sau : private var myVar:String = Application.application.parameters.myVar; 4.7 Tìm hiểu External API External API là tên được đặt cho lớp ExternalInterface . Lớp này nằm trong gói flash.external.ExternalInterface và cho phép ActionScript bên trong SWF giao tiếp với ứng dụng lưu trữ . Thông thường đề cập này giao tiếp với JavaScript trong trang web , mặc dù giao tiếp này có thể xảy ra với C#, VB.NET , Python , hoặc các ngôn ngữ khác dùng để nhúng vào Flash Player . Trong phần này , ta sẽ tập trung tìm hiểu về giao tiếp giữa ActionScript và JavaScript trong trình duyệt web . Ta có thể sử dụng External API để gọi hàm JavaScript từ ứng dụng Flex hoặc gọi một hàm bên trong ứng dụng Flex của trang web . Cho dù bạn chọn kiểu giao tiếp nào , ứng dụng cũng khởi tạo cuộc gọi có thể đợi sự hồi đáp của các ngôn ngữ khác nhau và kết hợp phản ứng trong code của mình . Nói cách khác là các cuộc gọi giữa các ngôn ngữ được đồng bộ . Ta có thể sử dụng External API chỉ với một trình duyệt web hỗ trợ hoặc ActiveX hay các NPRuntime API. Điều này bao gồm các trình duyệt chủ yếu sau đây:  Internet Explorer 5.0 và các phiên bản cao hơn của Windows. Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 49  Firefox từ 1.0 trở lên cho cả Windows và Macintosh .  Mozilla 1.7.5 và trở lên cho cả Windows và Macintosh.  Netscape 8 và cao hơn cho cả Windows và Macintosh .  Safari 1.3 và cao hơn cho Macintosh . 4.7.1 Scripting the ExternalInterface class Ta có thể tìm hiểu External API có sẵn bằng các thuộc tính có sẵn của lớp : ExternalInterface.available; Thuộc tính này trả về giá trị Boolean cho biết liệu lớp ExternalInterface đã có sẵn chưa . Có thể tìm thấy id của thẻ hoặc thuộc tính name của thẻ bằng cách sử dụng thuộc tính objected của lớp này : ExternalInterface.objectID; Các thuộc tính này sẽ trả về null nếu ta sử dụng nó với container khác trình duyệt web . External API có 2 phương thức : call and addCallback . Phương thức call cho phép ActionScript gọi hàm JavaScript trong trang web lưu trữ . Sử dụng addCallback để đăng ký hàm ActionScript như gọi lại có thể truy cập bằng cách sử dụng JavaScript . Lớp ExternalInterface trong ActionScript 3.0 có 1 chút khác so với ActionScript 2.0 . Đối với lớp này , chỉ sử dụng với Flash Player 9 , hoặc nếu dùng với các phiên bản Flash Player khác thì ta phải sử dụng phương thức giao tiếp khác . 4.7.2 Gọi hàm JavaScript bằng cách sử dụng ActionScript Ta có thể sử dụng phương thức call để gọi hàm JavaScript từ ActionScript . Ta cũng có thể thông qua tham số để gọi hàm , điều này là tùy chọn : ExternalInterface.call(functionName:String, [parameter1:Object, parameter2:Object]); Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 50 Khi làm việc với JavaScript , phương thức call tìm kiếm một hàm có tên functionName trong thẻ trong trang web . Phương thức trả về hoặc là giá trị trả về bởi hàm JavaScript hoặc null nếu hàm không có sẵn . Giá trị có thể được bất kì loại biến . Phương thức này có thể mang tới lỗi nếu trình duyệt web hoặc container không hỗ trợ các gọi đi , hoặc các hạn chế về bảo mật ngăn chặn các cuộc gọi thành công . Kiểu lỗi đầu tiên là Error , trong khi kiểu thứ hai là SecurityError . Vì lý do đó phải đính kèm với phương thức call với một hàm try-catch : try{ response = call("functionName"); } catch (error:SecurityError){ trace("Security error: " + error.message); } catch (error:Error) { trace("Error: " + error.message ); } Theo mặc định, JavaScript trên một trang web chỉ có thể giao tiếp với các ứng dụng Flex được trong cùng một domain . Điều này có nghĩa rằng các tham số allowScriptAccess trong trang web là rất quan trọng để xác định phương thức call có thành công hay không . 4.7.3 Gọi hàm ActionScript với JavaScript Vì lý do bảo mật, Ta chỉ có thể gọi hàm ActionScript mà ta đã thực hiện rõ ràng có sẵn từ JavaScript . Tất cả các hàm ActionScript khác không có sẵn chứa trong trang web . Ta có thể làm cho nó có sẵn bằng phương thức addCallback . Với Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 51 điều kiện External API có sẵn , hàm ActionScript có thể được gọi bằng cách sử dụng JavaScript trong trang web chứa ứng dụng SWF. Phương thức addCallback có các đối số sau đây và không có gì trả về: ExternalInterface.addCallback(functionName:String,closure:Function); Đối số functionName là tên mà JavaScript sẽ sử dụng để tham chiếu tới hàm ActionScript. Closure là tên ActionScript của chung 1 hàm . Nó thường là cách tốt nhất để giữ các tên này trong cùng , mặc dù điều này không phải là yêu cầu nghiêm ngặt . Một khi đã đăng kí Flex callback , ta có thể gọi nó bằng cách sử dụng Flex . Trong JavaScript , ta cần phải gọi hàm như thể nó là phương thức của đối tượng swf , mà có thể xác định bằng cách sử dụng id hoặc name từ thẻ hoặc : flashObjectNameOrID.functionName(a) Ví dụ : function callAS() { flashMovieID.myFunction("Hi from JavaScript"); } Hãy nhận biết rằng không thể gọi một hàm ActionScript từ một trang web nếu trang đó không trong cùng một domain do thiết lập bảo mật của Flash Player. Ta có thể ghi đè điều này bằng phương thức allowDomain . 4.7.4 Hạn chế của External API Bên cạnh những lợi ích mà External API mang lại thì vẫn còn 1 số hạn chế sau : Ta có thể sử dụng External API chỉ thông qua các loại dữ liệu nhất định giữa ActionScript và JavaScript. Ta bị giới hạn kiểu dữ liệu thô và các mảng. Mặc dù nó thường tạo các lớp ActionScript để miêu tả các loại dữ liệu phức tạp , ta không thể gửi các dữ liệu này như một phần của giao tiếp ExternalInterface . Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 52 Những nhà phát triển nào muốn sử dụng External API trong trình duyệt web cần có sự hiểu biết tốt hợp lý của cà ActionScript và JavaScript . Nếu điều này là một vấn đề , Flex-Ajax Bridge cho phép các nhà phát triển tạo ra giao tiếp từ một trang web chỉ sử dụng duy nhất JavaScript . 4.8 Tìm hiểu về Flash Player security Như đã đề cập trước đó, có một số hạn chế bảo mật ảnh hưởng đến sự giao tiếp giữa các ứng dụng Flex với các trình duyệt web. Những nhà phát triển cần load những file SWF từ một domain khác vào trong trang web của họ cần phải xem xét thiết lập bảo mật nào khi làm việc với External API . Flash Player security dựa trên khái niệm về sandboxes security . Flash Player cấp phát các file SWF đến các sandboxes khác nhau cho mục đích bảo mật ,tùy vào vị trí của chúng khi chúng được load . Về cơ bản , các file trong cùng một sandbox có thể tương tác lẫn nhau . Các file SWF trên Internet được đặt ở các sandbox riêng biệt từ xa , nơi mà chúng chỉ có thể truy cập nội dung chỉ từ cùng một sandbox . Điều này có nghĩa rằng, theo mặc định, họ chỉ có thể truy cập nội dung từ cùng một tên miền. File SWF chỉ có thể chỉ có thể truy cập từ các sandbox từ xa khác nhau nếu ở đó có chính sách cross-domain cho file tại chỗ , trong trường hợp tải dữ liệu bên ngoài , hoặc họ sử dụng phương thức allowDomain . File SWF trong remote sandbox không thể truy cập các file nội bộ . Hệ thống bảo mật sandbox có tác động đối với các External API . Theo mặc định , SWF movie và trang web phải có cùng một tên miền trước khi chúng giao tiếp với nhau . Các thiết lập mặc định có thể được thay đổi bằng cách sử dụng thuộc tính allowScriptAccess và phương thức allowDomain. Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 53 Trong lớp ExternalInterface, giá trị của thuộc tính allowScriptAccess trong thẻ và xác định xem phương thức call nào sẽ thành công . Nếu giá trị chưa bao giờ được thiết lập , phương thức call sẽ thất bại . Nếu nó thiết lập sameDomain , với giá trị mặc định , phương thức sẽ thành công chỉ nếu ứng dụng có tên miền như trang web . Cuối cùng ,nếu giá trị luôn được thiết lập , phương thức call sẽ luôn đúng vì tên miền trong ứng dụng Flex và trang web không liên quan đến nhau . Phương thức allowDomain cho phép hàm ActionScipt được gọi bằng cách sử dụng JavaScript trong trang web có tên miền khác .Ta sẽ sử dụng nó trong cùng 1 hàm để gọi lại các tên miền cho phép cụ thể : Security.allowDomain(myDomain); Phương thức có thể liệt kê các kiểu tên miền như sau :  Tên miền dựa theo kiểu text như mysite.com .  Địa chỉ IP như 192.168.1.1  Dấu (*) để biểu thị cho tất cả các tên miền . Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 54 Chương 5: TRUY CẬP VÀ KẾT NỐI DỮ LIỆU 5.1. Các component truy cập dữ liệu Trong Flex, các component truy cập dữ liệu sử dụng các lời gọi thủ tục từ xa để tương tác với môi trường server như PHP, Adobe ColdFusion và ASP.Net để cung cấp dữ liệu đến các ứng dụng Flex và gửi dữ liệu về nguồn dữ liệu back-end. Các component được dùng để truy cập dữ liệu: HTTPService, WebService, RemoteObject. 5.1.1. HTTPService component Component HTTPService cho phép người lập trình tương tác với dịch vụ HTTP để chấp nhận các yêu cầu HTTP và gửi phản hồi. Kết quả trả về thường là dạng XML. Component HTTPService có thể được sử dụng với nhiều kiểu công nghệ server-side khác nhau. HTTPService cho phép gửi các yêu cầu HTTP GET, POST, HEAD, OPTIONS, PUT, TRACE và DELETE. Ví dụ: ... Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 55 <mx:HTTPService id="userRequest" url="" useProxy="false" method="POST"> {username.text} {emailaddress.text} 5.1.2. WebService component WebService cho phép người lập trình truy cập dịch vụ web, được tham chiếu đến như là các toán tử. Giao diện của dịch vụ web được định nghĩa bởi XML. Dịch vụ web sẽ cung cấp một cách biên dịch chuẩn cho các module phần mềm chạy trên các nền tảng khác nhau. Ứng dụng Flex có thể tương tác với dịch vụ web được định nghĩa giao diện trong tài liệu WSDL (Web Services Description Language). WSDL là một định dạng chuẩn dành cho việc mô tả các thông điệp để dịch vụ web hiểu. Ví dụ về WebService component: ... <mx:WebService id="userRequest" wsdl=""> <mx:operation name="returnRecords" resultFormat="object" fault="mx.controls.Alert.show(event.fault.faultString)" result="remotingCFCHandler(event)"/> <mx:operation name="insertRecord" result="insertCFCHandler()" fault="mx.controls.Alert.show(event.fault.faultString)"/> Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 56 5.1.3. RemoteObject component RemoteObject component cho phép truy cập các phương thức của đối tượng server-side, như là các đối tượng ColdFusion, Java, PHP, .Net… Để truy cập một đối tượng remote, người lập trình phải chỉ định tên lớp hoặc tên đối tượng trong thuộc tính source của component RemoteObject. Ví dụ về RemoteObject component: ... <mx:RemoteObject id="userRequest" destination="ColdFusion" source="flexapp.returncfxml"> <mx:method name="returnRecords" result="returnHandler(event)" fault="mx.controls.Alert.show(event.fault.faultString)"/> <mx:method name="insertRecord" result="insertHandler()" fault="mx.controls.Alert.show(event.fault.faultString)"/> 5.2. Truy cập dữ liệu server-side bằng component HTTPService Component HTTPService có thể làm việc với nhiều công nghệ server khác nhau như PHP, ColdFusion, Java… Ở đây, ta sẽ tìm hiểu cách làm việc của HTTPService component với công nghệ PHP và dữ liệu SQL. Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 57 Component HTTPService có thể được sử dụng để kết hợp PHP và hệ quản trị CSDL SQL để hiển thị kết quả của một truy vấn CSDL trong ứng dụng Flex và thêm dữ liệu vào CSDL. Trang PHP có thể được gọi với phương thức GET hoặc POST để thực hiện việc truy vấn dữ liệu. Dữ liệu trả về có thể được định dạng thành một cấu trúc XML. Khi dữ liệu được trả về ứng dụng XML, người lập trình có thể hiển thị chúng trên các điều khiển giao diện người dùng. Ví dụ: Ứng dụng Flex sẽ gọi đến trang PHP với phương thức POST. Trang PHP sẽ truy vấn đến một bảng CSDL MySQL có tên là users. Kết quả truy vấn sẽ được định dạng XML và trả về cho ứng dụng Flex. Dữ liệu trả về sẽ được hiển thị trên điều khiển dataGrid. Ứng dụng Flex sẽ gửi thông tin về tên user và địa chỉ email của người dùng mới đến trang PHP, tại đây, các thông tin này sẽ được thêm vào CSDL người dùng. Code MXML: <mx:Application xmlns:mx="" layout="absolute" xmlns="*" creationComplete="send_data()"> <![CDATA[ private function send_data():void { userRequest.send(); } ]]> Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 58 <mx:DataGrid id="dgUserRequest" x="22" y="128" dataProvider="{userRequest.lastResult.users.user}"> <mx:TextInput x="22" y="292" id="selectedemailaddress" text="{dgUserRequest.selectedItem.emailaddress}"/> <mx:HTTPService id="userRequest" url="" useProxy="false" method="POST"> {username.text} {emailaddress.text} Phương thức send() sẽ gọi đến một trang PHP. Lời gọi này nằm trong phương thức send_data(). SQL Database Script: CREATE TABLE `users` ( `userid` int(10) unsigned NOT NULL auto_increment, `username` varchar(255) collate latin1_general_ci NOT NULL, `emailaddress` varchar(255) collate latin1_general_ci NOT NULL, PRIMARY KEY (`userid`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=3 ; Nội dung code trang PHP: <?php define( "DATABASE_SERVER", "servername" ); define( "DATABASE_USERNAME", "username" ); define( "DATABASE_PASSWORD", "password" ); Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 59 define( "DATABASE_NAME", "sample" ); //connect to the database. $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD); mysql_select_db( DATABASE_NAME ); // Quote variable to make safe function quote_smart($value) { // Stripslashes if (get_magic_quotes_gpc()) { $value = stripslashes($value); } // Quote if not integer if (!is_numeric($value)) { $value = "'" . mysql_real_escape_string($value) . "'"; } return $value; } if( $_POST["emailaddress"] AND $_POST["username"]) { //add the user $Query = sprintf("INSERT INTO users VALUES ('', %s, %s)", quote_smart($_POST['username']), quote_smart($_POST['emailaddress'])); $Result = mysql_query( $Query ); } //return a list of all the users $Query = "SELECT * from users"; $Result = mysql_query( $Query ); $Return = ""; while ( $User = mysql_fetch_object( $Result ) ) { Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 60 $Return .= "".$User->userid."".$User- >username."".$User- >emailaddress.""; } $Return .= ""; mysql_free_result( $Result ); print ($Return) ?> 5.2.1 Tạo 1 HTTPService request Để tạo 1 HTTPService request bạn sử dụng thẻ MXML , cần phải chỉ định thuộc tính id và URL cho component , ví dụ như : Ta cũng có thể sử dụng ActionScript như sau : var txtLoader:HTTPService = new HTTPService(); txtLoader.url = "text.txt"; Hai cách trên đều tương đương với nhau . 5.2.2 Making the request Ta sẽ request URL bằng cách gửi 1 phương thức . Nếu ta muốn load dữ liệu mà có sẵn vào trong ứng dụng , thì thông thường sử dụng các phương thức khởi tạo hoặc thuộc tính creationComplete của thẻ : <mx:Application xmlns:mx="" layout="absolute" creationComplete="txtLoader.send()"> Ta cũng có thể gọi nó để phản hồi từ 1 button hay các event khác . 5.2.3 Nhận phản hồi Khi HTTPService tạo 1 respone , nó chính event result được gửi . Nếu request thất bại, 1 lỗi sẽ được gửi về . Cũng có thể xử lý cụ thể cho mỗi event trong component : <mx:HTTPService id="txtLoader" url="text.txt" Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 61 result="resultHandler(event)" fault="faultHandler(event)"/> Ta cũng có thể dử dụng phương thức ActionScript addEventListener như sau : txtLoader.addEventListener(ResultEvent.RESULT, resultHandler); txtLoader.addEventListener(FaultEvent.FAULT, faultHandler); Trong ví dụ trên , hàm resultHandler được gọi khi event result được gửi ,và hàm faultHandler được gọi khi event fault được gửi . Một cách khác là ràng buộc trực tiếp giá trị trả về với các component khác . Ta sẽ thấy điều này ngay trong phần sau . 5.2.4 Xác định kiểu trả về Có thể chỉ định cho kết quả nào được trả lại bằng cách sử dụng thuộc tính resultFormat . Theo mặc định , ta sẽ nhận được nội dung như là 1 cây đối tượng ActionScript , nhưng có nhiều cách lựa chọn khác nhau . Bảng 5-1 cho thấy các loại giá trị đó là trả lại và các định dạng có liên quan. Format Returned value Explanation object (default) XML Phân tích cú pháp như là một cây của các đối tượng ActionScript. Array XML Phân tích cú pháp như là một cây của các đối tượng ActionScript. Nếu các đối tượng top-level không phải là một Array, một Array mới được tạo ra, và kết quả thiết lập là mục đầu tiên. Xml XML Nội dung được cung cấp như một đối tượng ActionScript 2.0 XMLNode. Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 62 Flashvars Name-value pairs Phân tích cú pháp vào một đối tượng ActionScript. Text Text Giá trị vẫn giữ nguyên như text e4x XML Nội dung được cung cấp như một đối tượng ActionScript 3.0 XML. Có thể được truy cập bằng cách sử dụng các biểu thức E4X Hình 5.1 Tổng hợp các loại giá trị cuả thuộc tính resultFormat Ta có thể thiết lập thuộc tính như sau : <mx:HTTPService id="txtLoader" url="text.txt" result="resultHandler(event)" resultFormat="e4x"/> The equivalent ActionScript follows: txtLoader.resultFormat = "e4x"; 5.2.5 Truy cập nội dung load Sau khi request được xử lý thành công , ta có thể truy cập vào các phản hồi trong thuộc tính lastResult của đối tượng HTTPService . Cũng có thể làm điều này trong ActionScript 3.0 bằng cách sử dụng hàm xử lý event result : function resultHandler(e:ResultEvent):void { //do something with e.target.lastResult } Cũng có thể ràng buộc 1 thuộc tính vào trong kết quả trực tiếp tới 1 thuộc tính component : Trong trường hợp này, ta ràng buộc thuộc tính textResponse từ phản ứng với đoạn text trong Text control bằng cách sử dụng dấu ngoặc nhọn {} . Như đã thấy , ta có thể sử dụng kí hiệu dấu chấm (.) để truy cập các thuộc tính có liên quan trong thuộc tính lastResult . Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 63 5.2.6 Gửi các biến với request Ta có thể gửi các tham số với request . Ví dụ , nếu request 1 file server-side , ta phải gửi 1 hoặc nhiều tham số để lọc các kết quả trả về trong respone . Có nhiều cách gửi tham số với request . Đầu tiên ta phải gửi các tham số cùng thời gian với gọi phương thức gửi . Nếu chọn cách này ta phải xác định 1 đối tượng chứa cặp biến bên trong hàm gọi ,ví dụ như : countryLoader.send({continent: 'Europe'}; Ta cũng có thể sử dụng thẻ để liệt kê các tham số . Ở đây , thẻ gửi 1 tham số có định dạng XML gọi continent có giá trị của Europe . <mx:HTTPService id="countryLoader" url=""> Europe Chú ý rằng thuộc tính của thành phần chứa tham số . Một cách nữa là add các tham số với ActionScript bằng cách tạo 1 object , add tham số vào nó ,và gán object vào thuộc tính request cảu HTTPService : var params:Object = new Object(); params.continent = "Europe"; countryLoader.request = params; Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 64 5.2.7 Chỉ định phương thức request và định dạng Các tham số luôn được gửi bằng cách sử dụng HTTP GET trừ khi ta xác định cái gì trước với thuộc tính phương thức . Ta cũng có thể chỉ định POST, HEAD, CHỌN, PUT, TRACE hoặc DELETE. Các định dạng cho các tham số được thiết lập với thuộc tính contentType . Giá trị mặc định của thuộc tính này là application / x-www-form-urlencoded , tương đương với cặp biến name-value . Ta cũng có thể sử dụng setting application/xml nếu URL của ta mong đợi nhận được dữ liệu XML . Phần sau đây một bản tóm tắt của các thuộc tính, phương pháp, và các event của lớp HTTPService . 5.2.8 Phương thức của lớp HTTPService Method Parametters Explanation Returns Cancel Ghi đè lên các request gần đây Nothing Initialized document: Object, id: String Sử dụng hợp lý với ActionScript Nothing Send parameters: Object Gửi một HTTPService request với tham số tùy chọn AsyncToken Hình 5.3 Các phương thức của lớp HTTPService . Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 65 5.2.9 Event của lớp HTTPService Event Type Explanation Fault FaultEvent Được gửi đi khi service call thất bại . Invoke InvokeEvent Fired when the service call is invoked and an error is not thrown . Result ResultEvent Được gửi khi service call trả về thành công. Hình 5.4 Các event của lớp HTTPService . 5.3 Tìm hiểu lớp URLLoader Lớp URLLoader thực hiện server request và xử lý response . Nó không phải là Flex component , nhưng chúng ta cần làm việc với nó trong ActionScript . 5.3.1 Tạo URLLoader request Ta có thể tạo 1 đối tượng URLLoader bằng cách sử dụng ActionScript như sau : var loader:URLLoader = new URLLoader(); 5.3.2 Thực hiện request Để gửi request , TA sử dụng phương thức load và chỉ định đối tượng URLRequest . URLRequest xác định URL để load cũng tốt giống như phương thức load : GET hoặc POST .Nó cũng có thể xác định tựa đề thông tin và kiểu MIME . Code sau trình diễn 1 ví dụ làm thế nào để request một file text đơn giản từ server: var request:URLRequest = new URLRequest("myText.txt"); Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 66 var loader:URLLoader = new URLLoader(); loader.load(request); 5.3.3 Nhận Response Khi 1 response thành công nhận từ server , complete event được gửi bằng URLLoader . Ta có thể thêm 1 event handler để response event này ,ví dụ như sau loader.addEventListener(Event.COMPLETE, completeHandler); Có thể capture dữ liệu trả về trong thộc tính data của URLLoader : loader.data Theo mặc định , response trả về từ URLLoader được coi như là string . Đối với các loại dữ liệu khác , chẳng hạn như XML, ta sẽ cần phải phân phối response thích hợp . Dòng sau là phân phối response như là đối tượng XML : var returnedXML:XML = XML(loader.data); 5.3.4 Xác định kiểu trả về Ta có thể xác định thuộc tính dataFormat để xử lý các kiểu response khác nhau . Bảng sau tổng hợp các kiểu dataFormat khác nhau có sẵn . dataFormat Explanation URLLoaderDataFormat.BINARY Thuộc tính URLLoader.data chứa dữ liệu nhị phân lưu trữ trong đối tượng ByteArray . URLLoaderDataFormat.TEXT (mặc định) Thuộc tính URLLoader.data chứa text trong 1 đối tượng String . URLLoaderDataFormat.VARIABLES Thuộc tính URLLoader.data chứa URL – Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 67 mã hóa cặp biến name-value trong đối tượng URLVariables . Hình 5.5 Các giá trị của thuộc tính dataFormat của lớp URLLoader. 5.3.5 Gửi biến cùng với request Ta có thể gửi tham số cùng với đối tượng URLLoader bằng cách sử dụng thuộc tính data của đối tượng URLRequest var serverPage:String = ""; var request:URLRequest = new URLRequest(serverPage); var params:URLVariables = new URLVariables(); params.continent = "Europe"; request.data = params; Trong đoạn mã trên , đối tượng URLRequest gửi biến continent với giá trị của Europe. 5.3.6 Xác định phương thức request Nếu ta không xác định được phương thức load , thì Flex sử dụng GET là mặc định . Ta có thể ghi đè điều này bằng cách chỉ định POST như là giá trị của thuộc tính phương thức : var serverPage:String = ""; var request:URLRequest = new URLRequest(serverPage); request.method = URLRequestMethod.POST; Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 68 5.3.7 Các thuộc tính của lớp URLLoader Property Data type Explanation bytesLoaded Uint Số byte tải cho đến nay. bytesTotal Uint Tổng số byte sẽ được tải xuống, nhiều nhất khi hoạt động hoàn thành . Data Dữ liệu nhận được từ phương thức load . dataFormat String Định dạng cho dữ liệu nhận được .Lựa chọn từ URLLoaderDataFormat.TEXT, URLLoaderDataFormat.BINARY, hoặc URLLoaderDataFormat.VARIABLES. Hình 5.6 Các thuộc tính của lớp URLLoader 5.4 Biểu diễn dữ liệu (representing data) Adobe Flex cung cấp các tính năng để biểu diễn dữ liệu trong ứng dụng Flex: liên kết dữ liệu, kiểm tra tính hợp lệ và định dạng dữ liệu. Theo đó, người dùng có thể:  Dịch chuyển dữ liệu giữa các đối tượng ở client (client-side objects)  Lưu trữ dữ liệu trong các đối tượng ở client (client-side objects)  Kiểm tra dữ liệu trước khi chuyển đổi giữa các đối tượng ở client  Định dạng dữ liệu trước khi hiển thị Quy trình người dùng nhập dữ liệu và yêu cấu dữ liệu từ server: 1. Người dùng nhập dữ liệu vào các ô nhập liệu và submit yêu cầu khi click vào nút điều khiển button Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 69 2. Data binding sẽ chuyển dữ liệu đến một đối tượng mô hình dữ liệu (data model object), đối tượng này sẽ cung cấp một kho dữ liệu trung gian. Việc này sẽ cho phép dữ liệu được điều khiển và chuyển đến các đối tượng khác trong ứng dụng. 3. Một hoặc nhiều đối tượng data validator sẽ kiểm tra xem dữ liệu có đạt được các tiêu chuẩn riêng hay không 4. Dữ liệu sẽ được chuyển một đến đối tượng phía server (server-side object) 5. Đối tượng server-side sẽ tiến hành thực hiện các yêu cầu và trả về dữ liệu hoặc một đối tượng lỗi nếu kết quả hợp lệ không được trả về 6. Data binding sẽ chuyển dữ liệu đến một đối tượng mô hình dữ liệu (data Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 70 Hình 5.2: Data binding chuyển dữ liệu 7. model object), đối tượng này sẽ cung cấp một kho dữ liệu trung gian. Việc này sẽ cho phép dữ liệu được điều khiển và chuyển đến các đối tượng khác trong ứng dụng. 8. Một hoặc nhiều đối tượng data formatter sẽ định dạng dữ liệu kết quả để hiển thị chúng trên giao diện người dùng. 9. Data binding sẽ chuyển dữ liệu đến các điều khiển giao diện người dùng để hiển thị. 5.4.1. Liên kết dữ liệu (data binding) Chức năng data binding cung cấp cú pháp dành cho việc tự động sao chép giá trị của một thuộc tính của một đối tượng phía client đến một đối tượng khác trong thời gian chạy. Data binding thường được kích hoạt khi giá trị của thuộc tính nguồn thay đổi. Data binding có thể để chuyển dữ liệu mà người dùng nhập vào từ các điều khiển giao diện người dùng đến một dịch vụ dữ liệu và ngược lại. 5.4.2. Lưu trữ dữ liệu (data models) Chức năng data model cho phép lưu trữ dữ liệu trong các đối tượng phía client. Một data model là một đối tượng ActionScript có chứa các thuộc tính để lưu trữ dữ liệu. Data model rất hữu ích trong việc phân biệt giao diện người dùng với dữ liệu trong ứng dụng. Thuộc tính data binding có thể được sử dụng để chuyển dữ liệu từ giao diện người dùng đến data model hoặc từ data service đến data model. Có thể định nghĩa một data model đơn giản trong một thẻ MXML Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 71 {nme.text} {email.text} {phone.text} {zip.text} {ssn.text} 5.4.3. Định dạng dữ liệu (data formatting) Chức năng data formatting cho phép thay đổi định dạng của dữ liệu trước khi hiển thị chúng trên các điều khiển giao diện người dùng. Một component data formatter là một đối tượng dùng để định dạng dữ liệu. Các component data formatter có thể được dùng với data binding để định dạng lại dữ liệu được trả về từ data service. 5.4.4. Kiểm tra tính hợp lệ của dữ liệu (data validation) Chức năng data validation cho phép người lập trình kiểm tra sự thỏa mãn các tiêu chuẩn riêng của dữ liệu trước khi được đưa vào sử dụng trong ứng dụng. Data validator cũng là các đối tượng ActionScript dùng để kiểm tra xem dữ liệu trong các component được định dạng đúng hay chưa Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 72 {input.text} <mx:ZipCodeValidator source="{zipModel}" property="zip" listener="{input}" trigger="{input}"/> Biểu đồ tạo ứng dụng Flex: Hình 5.3: Biểu đồ tạo ứng dụng Flex Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 73 Chương 6: SỰ KHÁC NHAU GIỮA FLEX 3 VÀ FLEX 4 Ngày 22 tháng 3 năm 2010 khi mà Adobe tuyên bố phiên bản chính thức và đặt Adobe Flash Builder đánh dấu một bước ngoặt trong sự phát triển của hãng Adobe. Adobe® Flex® 4 có rất nhiều tính năng mới 6.1 Một số khái niệm tổng quát về flex4 6.1.1 FXG Flex 4 giới thiệu một khái niệm hoàn toàn mới là FXG. Nó được sử dụng để tạo ra các component, thực ra là vẽ ra các đối tượng đồ họa như hình chữ nhật, elip, các đường thẳng, đường cong … Các đối tượng đồ họa trong FXG có thể được tô vẽ với màu sắc đặc, gradient, bitmap. Hơn nữa là FXG có thể được sử dụng với MXML. Đây là một bước cải tiến lớn nếu như với Flex 3, cách duy nhất để “vẽ” là bạn phải dùng ActionScript thuần túy. Hơn thế nữa, FXG còn hỗ trợ cả data biding và state như các component của Flex. 6.1.2 Layout Flex 4 cải thiện đáng kể khả năng layout các component. xuất hiện thêm khái niệm Group và sự liên kết về mặt layout giữa các component trong Flex 3 đã được bố trí lại chặt chẽ hơn trong Flex 4 nên Layout của Flex 4 linh hoạt hơn và kiểm soát dễ dàng hơn.Flex 4 hợp phần hỗ trợ thêm cho các kiểu bố trí mới bao gồm: BasicLayout, VeriticalLayout, HorizontalLayout … Group, HGroup, VGroup đuợc dùng để thay thế cho Box,VBox, HBox. Tất nhiên bạn cũng vẫn dùng các “box” trong Flex 4, tuy nhiên trong các bản Flex tiếp theo, Adobe sẽ “loại bỏ” các “box” này. Đây là sự mô tả sự khác biệt: Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 74 6.1.3 Spark Components Là một số component mới có sẵn trong Flex 4 Các kiến trúc của những component Spark mới trong Flex 4 là để thay thế các component của Flex 3. Tuy nhiên Flex 4 vẫn duy trì các component của Flex 3. Trong bộ Spark Component thì đáng chú ý nhất chính là component Spark Application – component này chính là tính năng mới về Layout của Flex 4. Nếu ở Flex 3, khi bạn đặt layout cho application của mình là vertical hay horizontal thì lúc “run-time” không thể thay đổi layout được nữa. Điều này được giải quyết với Spark Application. Bạn có thể xem ví dụ sau: <s:Application xmlns:fx="" xmlns:s="library://ns.adobe.com/flex/spark"> Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 75 <![CDATA[ import spark.layouts.HorizontalLayout; private function updateLayout() : void { this.layout = new HorizontalLayout(); } ]]> 6.1.4 So sánh các Spark và thành phần kiến trúc MX: Flex định nghĩa hai kiến trúc thành phần: Spark và MX. Các Spark component trong Flex 4 và được quy định trong spark .* package. Cấu trúc của MX component ở trong các version trước của flex thì được quy định tại mx.*packgage. Flex 4 được thiết kế có sự tương thích ngược giúp những người đã quen với flexbuilder3 có thể tùy chỉnh. Tuy nhiên không phải hoàn toàn là như vậy, có một số thành phần không thể thay thế được, mục đích của hãng là nhằm phát triển mạnh thêm các tính năng mà thành phần đó có. 6.1.5 Cơ chế render một component “Bình mới, rượu cũ” – cơ chế render các component của Flex 4 cũng giống như cơ chế render các component của Flex 3, nghĩa là commitProperties() – đặt các thộc tính mới, measure() – xác định kích thước của component và updateDisplayList() – đặt vị trí và vẽ các component con. 6.1.6 Skinning Tất cả các component đều có 1 file skinning riêng. Điều này sẽ cho phép bạn dễ dàng skinning các component khác nhau mà không làm ảnh hưởng đến các component khác. Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 76 6.1.7 States Với Flex 3, để thay đổi State, bạn thường sử dụng tag addChild và removeChild. Với Flex 4, bạn có thể dùng các thuộc tính includeIn=”” hoặc excludeIn=”” có sẵn trong các component. Hơn nữa, bạn có thể thiết lập các thuộc tính khác nhau của một component cho các state khác nhau bằng cách sử dụng dấu chấm (.) Ví dụ, title.mystate = “Title”. 6.1.8 Thẻ Declarations Có vẻ đây là một trong những điểm không bình thường của Flex 4 khi mà Flex 4 buộc lập trình viên phải đặt tất cả mọi thứ không phải là “display object” hoặc các thuộc tính mặc định bên trong thẻ fx:Declarations. Sự áp đặt này còn áp dụng cho các thẻ như RadioButtonGroup. Formatters, Effects, RPC stuff, Validators. 6.2 Migrating applications to Flex 4 Khi flex4 ra đời ,nếu là người đã làm nhiều về flex3 thì chắc hẳn sẽ mong muốn sự ra đời của flex4 không thay đồi gì nhiều .Tuy nhiên vẫn cần một số sự thay đổi để tương thích Player dependency: Nếu dùng flex4 thì flashplayer bắt buộc phải dùng version >=10 Type selectors require a namespace: Mỗi một css định nghĩa riêng cho thuộc tính của mỗi component đó, dưới đây là ví dụ cho style của hai component Button { cornerRadius: 10; } DateField { color: #780800; Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 77 } Theme Change: Trong flex3 theme và các control goi là halo còn trong flex 4 gọi là spark. Trong flex4 có thể vẫn tiếp tục dùng Halo Theme của flex3 bởi vì flex4 bao gồm luôn theme của Flex3.Để biên dịch sử dụng Halo ta có thể sử dụng các trình biên dịch thêm đối số_tương thích phiên bản=3.0. Trong flashbuilder4 có thể làm điều này trong Properties Panel. Trong phần Properties Panel, chọn, Flex Compiler và nhấp vào hộp kiểm cho "Sử dụng Flex 3 chế độ tương thích" Figure 6.1. Using Flex 3 Compatibility Mode Ngoài ra, theme có thể được thay đổi từ giao diện mặc định Spark để Halo trong Properties -> Flex Chủ đề của bảng điều khiển.Trong bảng "" Flex Theme Nếu bạn chọn để sử dụng với chủ đề Spark mới, lưu ý rằng rất nhiều các phong cách mà làm việc với chủ đề Halo không làm việc trong các chủ đề Spark. Chủ đề của Spark chỉ hỗ trợ một số giới hạn các phong cách. Để hiểu được phong cách dành cho SkinSpark, nên tham khảo các ASDoc. Đối với mỗi Style liệt kê cho mỗi thành phần, một "Chủ đề" sẽ được chỉ định.. Nếu không có chủ đề là được, sau đó, phong cách có sẵn cho cả Halo và chủ đề Spark. Flex 4 cũng đã được thêm vào một làn da Ellipsoid, được thiết kế để sử dụng cho nhanh chóng giả-up.. Ngoài những thay đổi chủ đề, các preloader mặc định đã thay đổi đến mx.preloaders.SparkDownloadProgressBar trong ứng dụng flex4. Preloader này có Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 78 dunglượng nhẹ nên rút ngắn thời gian khởi động một chút. Nếu muốn sử dụng trình nạp của flex3 trước kia, bạn chỉ cần thay đổi một dòng code. Trong Application của bạn thêm từ khóa sau: preloader="mx.preloaders.DownloadProgressBar" . 6.3 Tổng quan thay đổi trong cấu trúc flex4: 6.3.1 Namespaces and packages in Flex 4: Trong flex3 thì các lớp nằm trong cùng một gói mx.* package thì trong flex nằm trong spark.*package. Trong flex4 để tránh xung đột các MXML, các flex SDK đi kèm với 4 không gian khác nhau (namespace) MXML 2006, MXML 2009, Spark, and Mx. MXML 2006 : Namespace trong ngôn ngữ MXML trong flex3 vẫn có thể tiếp tục sử dụng trong flex4 URI: Default Prefix: mx MXML2009: Đây hoàn toàn là một namespace ngôn ngữ mới trong flex4, và không chứa các compopnent tags URI: Default Prefix: fx Spark: Namespace này bao gồm tất cả các thành phần Spark mới. Nó sẽ được sử dụng kết hợp với không gian tên MXML ngôn ngữ năm 2009. URI: library://ns.adobe.com/flex/spark Default Prefix: s Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 79 MX: Name space này bao gồm tất cả các thành phần MX. Nó sẽ được sử dụng kết hợp với không gian tên MXML ngôn ngữ năm 2009. URI: library://ns.adobe.com/flex/mx Default Prefix: mx Dưới đây là một ví dụ nhỏ có sử dụng tên miền không gian năm 2009 MXML, Spark, và Halo Flex để tạo ra một ứng dụng đơn giản. Sử dụng một DateChooser MX và một Button Spark. <s:Application xmlns:fx="" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> Flex4 SDK có thêm nhiều namspace trong css.Nếu đang sử dụng không gian tên MXML 2009, spark và MX cùng với selectors Type thì cần phải định nghĩa một tập các không gian tên trong CSS để tránh trùng tên. @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; s|Button { color: #FF0000; } mx|DateChooser { color: #FF0000; } Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 80 6.4 New components and containers Sau đây là bảng thống kê sự khác nhau giữa hai phiên bản Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 81 Hình 6.3 : Bảng thống kê sự khác nhau giữa hai phiên bản Adobe khuyến khích sử dụng thành phần MX và các container cùng với các thành phần Spark. Bởi vì Adobe tiếp tục xây dựng các thành phần trên cùng một lớp cơ sở (UIComponent), cần có đầy đủ khả năng tương tác giữa Spark và MX.Đây là một bảng các thành phần và các container trong flex3 không có tương ứng trong spark của flex4 Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 82 Để sử dụng các Navigator MX (ViewStack, Accordion, TabNavigator) kết hợp với spark. Các navigator nên nằm trong tag NavigatorContent, nếu không sẽ không thể sử dụng spark trong MX <s:NavigatorContent label="bar"> Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 83 6.5 Thay đổi một số cú pháp trong states Trong flex3 để các states sử dụng được Button và remove a TextInput khi mà currentState phải là submitstate Trong khi flex4 thì chỉ cần khai báo đơn giản sau: Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 84 Trong khi states trong flex3 khi các states con cần có thuộc tính thì mỗi thuộc tính đó lại phải định nghĩa lại trong từng state nhỏ  SetProperty , SetStyle , và SetEventHandler đã được thay thế bằng một cú pháp mới chấm, cho phép bạn hội đủ điều kiện giá trị thuộc tính MXML với một định danh state cụ thể. In flex3: <mx:SetProperty target="{submitButton}" name="label" value="submit" /> <mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/> <mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/> <mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" /> Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 85 Trong flex4 được thể hiện như sau: <s:Button label.submitState="submit" textDecoration.submitState="underline" click.submitState="trace('done')" click.clearState="emptyDocument()" label.clearState="clear" textDecoration.clearState="none"/> 6.6 Thay đổi hiệu ứng Nhiều cải tiến đã được thực hiện tại các cơ sở hạ tầng trong flex4 effect. Trong khi hiệu ứng MX sẽ chỉ làm việc trên các control ( UIComponent), các hiệu ứng Spark có thể hoạt động trên bất kỳ target nào. Tất cả các lớp effect đều nằm trong spark.effects .* package. Các hiệu ứng được định nghĩa trong thẻ . Dưới đây là một số hiệu ứng được định nghĩa trong thẻ . Và khi muốn kết nối cơ sở dữ liệu cũng được gọi trong tag này <mx:Glow id="glowImage" duration="300" alphaFrom="1.0" alphaTo="0.3" blurXFrom="0.0" blurXTo="50.0" blurYFrom="0.0" blurYTo="50.0" color="0xFFFFFF"/> Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 86 Chương 7: XÂY DỰNG ỨNG DỤNG MINH HỌA Website cho công ty xây dựng dân dụng và trang trí nội thất 7.1 Sử dụng states để xây dựng trang web. State1: Trang chủ State2: Sản phẩm State3: Tin tức State4: Chi nhánh State5: Liên hệ 7.2 Kết nối cơ sở dữ liệu thông qua HTTPService ,Php, và mysql Bao gồm trang tintuc.php; chitiettin.php; chinhanh.php;nooithat.php Trong trang tintuc.php kết nối data: <?php /** Bui Thi Phuong Thanh */ //Define Database define( "DATABASE_SERVER", "localhost" ); Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 87 define( "DATABASE_USERNAME", "root" ); define( "DATABASE_PASSWORD", "root" ); define( "DATABASE_NAME", "database" ); //Ket noi den csdl $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD); mysql_query("SET NAMES 'utf8'"); //Ket noi database mysql_select_db( DATABASE_NAME ); $ID = $_POST['ID']; //request san pham moi $sql = "SELECT * FROM tintuc,tieude WHERE tintuc.TomTat = tieude.tieudeID AND ID='$ID'"; $Result = mysql_query($sql); //return $Return = ""; while($Info = mysql_fetch_object($Result)){ $Return .= "".$Info->ID."".$Info- >TieuDe."".$Info->NoiDung."".$Info- >tenTD."".$Info->link."".$info- >tieudechinh.""; } $Return .= ""; print($Return); Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 88 mysql_free_result($Result); ?> Trang chủ: Hình 7.1: Trang chủ Trang noithat.html Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 89 Hình 7.2 :Nội thất Trang sản phẩm.html Hình 7.3: Sản phẩm Chinhanh.html Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 90 Hình 7.4:Chi Nhánh Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang 91 Chương 8: KẾT LUẬN Với thời gian thực hiện 13 tuần , cùng sự giúp đỡ nhiệt tình của GVHD thầy Trần Đức Doanh cũng như sự cố gắng của em , em đã hoàn thành đề tài tốt nghiệp : Tìm hiểu công nghệ Flex và viết ứng dụng minh họa . Tuy nhiên , đây là một công nghệ còn khá mới đối với nền công nghệ thông tin nước ta nói chung và với em nói riêng , nên không thể tránh khỏi sự thiếu xót . Để xây dựng trang web hoàn thiện hơn trong tương lại sẽ cần phải có nhiều kiến thức về thư viện trong flex4 để có thể khai thác hết thế mạnh của flex4 đặc biệt là công nghệ 3D. Em xin cám ơn các thầy và các bạn đã ủng hộ đề tài của em !ư Tài liệu tham khảo 1. 2. 3.Book: Flex.4.Cookbook Adobe flashbuilder4 và flex4