 Flex cung cấp một công cụ trực quan để lập trình các ứng dụng trên web một cách dễ dàng, với cách hiệu ứng đẹp của Flash sẽ là cho chương trình sinh động hơn. Khi nhúng Flex vào trang web, thì một điều không thể thiếu để tương tác phía client được tốt hơn, đó là giao tiếp với JavaScript. Bài viết này sẽ hướng dẫn bạn thực hiện tương tác giữa Flex và JavaScript thông qua một ví dụ cụ thể, và bạn sẽ thấy việc gọi một hàm trong Flex từ JavaScript hay gọi một hàm JavaScript từ Flex rất đơn giản. Ví dụ sau là một chương trình đơn giản quản lý nhân viên, gồm các thông tin Tên, Tuổi và Giới tính. Danh sách nhân viên được hiện trong một DataGrid của Flex. Form thêm nhân viên và hiện thông tin sẽ được thiết kế bằng HTML. Khi chọn một nhân viên trong danh sách, và bấm nút "JavaScript Display" thì thông tin sẽ hiện vào form HTML bằng cách gọi hàm JavaScript. Còn khi bạn điền thông tin vào form thêm, và bấm nút "Add Person", thì nhân viên mới sẽ được thêm vào danh sách.
Đầu tiên, ta tạo một DataGrid trong Flex để hiển thị danh sách nhân viên, gồm có 3 cột: Name, Age và Sex. <mx:Panel id="pnlMain" x="10" y="10" width="462" height="328"
layout="absolute" title="Simple Javascript Interaction">
<mx:DataGrid id="dgPeople" x="10" y="10" width="422"
height="229">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="Name"/>
<mx:DataGridColumn headerText="Age" dataField="Age"/>
<mx:DataGridColumn headerText="Sex" dataField="Sex"/>
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="256" label="JavaScript Display"
id="butJSDisplay" />
<mx:Label x="149" y="260" id="lblMessage"/>
</mx:Panel> Sau đó, thêm một đoạn ActionScript nhỏ để đổ dữ liệu mẫu vào DataGrid. <mx:DataGrid id="dgPeople" x="10" y="10" initialize="initDG()"
width="422" height="229"> Hàm initDG() sẽ gọi khi DataGrid được tạo. Nội dung hàm này như sau: <mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public function initDG():void
{
var people:Array = new Array();
people.push({Name: "Charlie", Age: "23", Sex: "Male"});
people.push({Name: "Brandon", Age: "23", Sex: "Male"});
people.push({Name: "Mike", Age: "23", Sex: "Male"});
people.push({Name: "Caroline", Age: "23", Sex: "Female"});
var peopleCollection:ArrayCollection =
new ArrayCollection(people);
dgPeople.dataProvider = peopleCollection;
dgPeople.selectedIndex = 0;
}
]]>
</mx:Script> Như vậy, khi khởi tạo DataGrid, nó sẽ được gán một số dữ liệu mẫu có sẵn. Tiếp theo, ta sẽ thêm nút "JavaScript Display" nút này sẽ gọi hàm jsDisplayPerson() khi được bấm. Hàm này sẽ gọi một hàm JavaScript để hiện thị thông tin vào form HTML. <mx:Button x="10" y="256" label="JavaScript Display"
id="butJSDisplay" click="jsDisplayPerson()"/> Ta thêm hàm jsDisplayPerson() vào thẻ Script như sau. Ta cần phải import thư viện flash.external.* để có thể gọi được hàm JavaScript. <mx:Script> <![CDATA[ import mx.collections.ArrayCollection;
import flash.external.*;
public function initDG():void
{
var people:Array = new Array();
people.push({Name: "Charlie", Age: "23", Sex: "Male"});
people.push({Name: "Brandon", Age: "23", Sex: "Male"});
people.push({Name: "Mike", Age: "23", Sex: "Male"});
people.push({Name: "Caroline", Age: "23", Sex: "Female"});
var peopleCollection:ArrayCollection =
new ArrayCollection(people);
dgPeople.dataProvider = peopleCollection;
dgPeople.selectedIndex = 0;
}
public function jsDisplayPerson():void
{
if (ExternalInterface.available) {
ExternalInterface.call("displayPerson",
dgPeople.selectedItem);
lblMessage.text = "Data Sent!";
} else
lblMessage.text = "Error sending data!";
}
]]>
</mx:Script> Bây giờ, ta sẽ viết một hàm JavaScript nhỏ, để hiện thị thông tin vào form như sau:function displayPerson(person)
{
if(person == null){
alert("Please select a person, or maybe I screwed up.");
}
else{
document.getElementById('nameDisplay').innerHTML =
person.Name;
document.getElementById('ageDisplay').innerHTML = person.Age;
document.getElementById('sexDisplay').innerHTML = person.Sex;
}
} Form hiện thị thông tin nhân viên có dạng: <table>
<tr>
<td>Name:</td>
<td id="nameDisplay" style="width:150px;"> </td>
</tr>
<tr>
<td>Age:</td>
<td id="ageDisplay" style="width:150px;"> </td>
</tr>
<tr>
<td>Sex:</td>
<td id="sexDisplay" style="width:150px;"> </td>
</tr>
</table> Để JavaScript gọi được hàm của Flex, thì trong Flex ta phải đăng ký hàm này. Thường ta sẽ đăng ký khi khởi tạo chương trình, thêm hàm initApp() vào lúc khởi tạo chương trình như sau: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="482" height="348"
initialize="initApp()" > Trong hàm này, ta sẽ đăng ký hàm addPerson để JavaScript có thể gọi hàm này: public function initApp():void
{
if (ExternalInterface.available)
ExternalInterface.addCallback("addPerson", addPerson);
} và hàm addPerson như sau: public function addPerson(name:String, age:String,
sex:String):void
{
(dgPeople.dataProvider as ArrayCollection).addItem(
{Name: name, Age: age, Sex: sex});
} Trong JavaScript, ta cũng tạo hàm addPerson để xử lý khi người dùng bấm vào nút Add Person: function addPerson()
{
var name = document.getElementById('txtName').value;
var age = document.getElementById('txtAge').value;
var sex = document.getElementById('selSex').value;
getFlexApp('FlexJSTutorial').addPerson(name, age, sex);
} Hàm getFlexApp() sẽ lấy đối tượng Flex có ID là FlexJSTutorial, nội dung hàm này như sau: // This function returns the appropriate reference,
// depending on the browser.
function getFlexApp(appName) {
if (navigator.appName.indexOf ("Microsoft") !=-1) {
return window[appName];
} else {
return document[appName];
} Cuối cùng là form để thêm nhân viên: <table style="border-spacing:5px;">
<tr>
<td style="border-style:none;padding:0px;">Name:</td>
<td style="border-style:none;padding:0px;">
<input id="txtName" type="text" />
</td>
</tr>
<tr><td style="border-style:none;padding:0px;">Age:</td>
<td style="border-style:none;padding:0px;">
<input id="txtAge" type="text" />
</td>
</tr>
<tr><td style="border-style:none;padding:0px;">Sex:</td>
<td style="border-style:none;padding:0px;">
<select id="selSex" style="width:100px;">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="border-style:none;padding:0px;">
<input type="button" id="butAddPerson"
onclick="addPerson()" value="Add Person" />
</td>
</tr>
</table> Như vậy, bạn đã có một ứng dụng đơn giản, có thể tương tác được giữa JavaScript và Flex. Bạn có thể xem demo ở đây
 |
Bấm vào đây để Mở/Đóng phần viết lời bình.
http://blog.flextip.net/flex