Я собираюсь продемонстрировать, как использовать компонент datagrid с xml-файлом. Когда вам нужно отобразить табличные данные, нет более быстрого и простого способа, чем использовать сетку данных, и в сочетании с файлом XML это делает все лучше.
Шаг 1. Настройка Flash-документа
Создайте новый флэш-файл (Actionscript 3.0). Установите документ на 600x400px с белым фоном.
Сохраните этот файл с именем xmlDatagrid.fla
Шаг 2. Добавление компонентов в документ
Откройте окно компонентов, перейдя в Меню> Окно> Компоненты или нажав Ctrl + F7.
Перетащите кнопку, комбинированный список и компонент сетки данных на сцену.
Затем удалите кнопку, комбобокс и компоненты сетки данных со сцены; теперь они в вашей библиотеке.
Вот предварительный просмотр структуры документа xml, которую мы будем использовать:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<?xml version=»1.0″?>
<books>
<book>
<title>Learning ActionScript 3.0: A Beginner’s Guide</title>
<instock>yes</instock>
<price>26.39</price>
</book>
<book>
<title>Essential ActionScript 3.0</title>
<instock>yes</instock>
<price>34.64</price>
</book>
</books>
|
Загрузка исходного кода содержит три файла XML: flash.xml , ajax.xml и php.xml ; каждый из них имеет ту же структуру, что и фрагмент выше, но содержит разные книги. Вам нужно будет поместить их в ту же папку, что и ваш FLA.
Шаг 3: Откройте новый файл ActionScript
Откройте новый файл ActionScript и сохраните его с именем XMLDataGrid.as.
Теперь откройте объявление пакета и импортируйте классы, которые мы будем использовать:
|
1
2
3
4
5
6
7
8
9
|
package {
import flash.display.MovieClip;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.MouseEvent;
import flash.events.Event;
import fl.controls.DataGrid;
import fl.controls.ComboBox;
import fl.controls.Button;
|
Шаг 4. Расширение класса MovieClip и объявление переменных
Основной класс документа должен расширять либо класс Sprite, либо класс MovieClip; здесь мы расширяем класс MovieClip. Объявите переменные, которые мы будем использовать:
|
1
2
3
4
5
6
7
|
package {
public class XMLDataGrid extends MovieClip {
var dg:DataGrid;
var cb:ComboBox;
var urlLoader:URLLoader = new URLLoader();
var loadButton:Button;
var bookXML:XML;
|
Шаг 5: Настройте конструктор
Здесь мы установили конструктор с тремя функциями, которые мы будем использовать:
|
1
2
3
4
5
|
public function XMLDataGrid():void {
setupGrid();
setupComboBox();
setupButton();
}
|
Шаг 6: Определения функций
Здесь мы определяем функции, которые мы используем в конструкторе:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
private function setupGrid():void {
dg=new DataGrid();
dg.addColumn(«Title»);
dg.addColumn(«InStock»);
dg.addColumn(«Price»);
//This sets the size of the datagrid
dg.setSize(600,100);
//This is how many rows you want the datagrid to show
dg.rowCount=5;
//When we add colums they are put into an array
//Here we set the first column «Title» width to 450
dg.columns[0].width=450;
//This set the x and y position of the datagrid
dg.move(0,100);
addChild(dg);
}
private function setupComboBox():void {
cb = new ComboBox();
//This adds item to the comboBox
cb.addItem({label: «Flash» });
cb.addItem({label: «Ajax» });
cb.addItem({label: «Php» });
//This sets the x and y positions
cb.move(200,50);
addChild(cb);
}
private function setupButton():void {
loadButton = new Button();
loadButton.label = «Load Books»;
loadButton.addEventListener(MouseEvent.CLICK, loadBooks);
loadButton.x = 200;
loadButton.y = 325;
addChild(loadButton);
}
|
Функция setupGrid() создает компонент DataGrid , который будет отображать данные из файла XML, который мы передаем ему.
Функция setupComboBox() создает ComboBox , который представляет собой раскрывающийся список, который мы будем использовать, чтобы позволить пользователю выбрать файл XML для передачи в сетку данных.
Кнопка, созданная в setupButton() будет использоваться для передачи файла XML, выбранного в поле со списком, в сетку данных. Мы напишем этот код дальше.
Шаг 7: Определите функцию loadBooks
Функция loadBooks используется в eventListener loadButton.
|
1
2
3
4
5
6
|
private function loadBooks(e:Event):void {
//Here the cb.selectedLabel returns a string so we call toLowerCase() on it
//and append .xml to it ie if ‘Flash’ is selected we load ‘flash.xml’
urlLoader.load(new URLRequest(cb.selectedLabel.toLowerCase()+».xml»));
urlLoader.addEventListener(Event.COMPLETE, populateGrid);
}
|
Шаг 8: Определите функцию populateGrid
Функция populateGrid используется в eventListener urlLoader в функции loadBooks.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
private function populateGrid(e:Event):void {
var booksXML:XML = new XML( e.target.data);
//How many items are in the xml file
var booksLength:int = booksXML.book.length();
//This removes all the previously added data in the datagrid.
dg.removeAll();
//Here we loop through the <book> nodes in the xml file, and add each as a row to the datagrid
for (var i:int =0; i < booksLength; i++) {
dg.addItem({Title: booksXML.book[i].title, InStock: booksXML.book[i].instock,Price: booksXML.book[i].price});
}
} //Close out the class
} // This is closing the package out
|
Шаг 9: Установите класс документа и тест
Установите класс документа в «XMLDataGrid» и протестируйте фильм!
Вывод
Здесь мы узнали, что отображение табуларных данных во флэш-памяти упрощается с помощью компонента datagrid, и что их сопряжение с xml является отличным решением.
Это мой первый урок, надеюсь, вы узнали что-то полезное и спасибо за чтение!