Adobe Flex 3. Компонент Tree + JSON

Не так давно обнаружил, что в интернете, дефицит статей об использовании JSON и Adobe Flex. В связи с этим решил немножко исправить положение и описать компонент «Tree» с поставщиком данных в виде JSON.

И так, давайте начнем самого необходимого, с серверной части.
Создадим php-файл, к которому в последствии и будем мы обращаться:

1.  
2.  
3. <?php
4. $arr = array(  //Создадим масив $arr с необходимой структурой.
5. array(
6. "label"=>"Mail Box",
7. "children"=>array(
8. array(
9. "label"=>"Inbox",
10. "children"=>array(
11. array(
12. "label"=>"Marketing",
13. "descript"=>"Marketing box"
14. ),
15. array(
16. "label"=>"Product Management",
17. "descript"=>"Product Management Box"
18. ),
19. array(
20. "label"=>"Personal",
21. "descript"=>"Personal Box"
22. ),
23. ),
24. "descript"=>"My Inbox Messages"
25. ),
26.  
27. array(
28. "label"=>"Outbox",
29. "children"=>array(
30. "label"=>"Professional",
31. "descript"=>"Professional messages"
32. ),
33. "descript"=>"My outbox messages"
34. ),
35. array(
36. "label"=>"Personal",
37. "descript"=>"Personal Note"
38. ),
39. array(
40. "label"=>"Spam",
41. "descript"=>"Stupid Spam"
42. ),
43. array(
44. "label"=>"Sent",
45. "descript"=>"Sents messages"
46. ),
47. ),
48. "descript"=>"Mail Box Maneger"
49. ),
50. );
51. print json_encode ($arr);?> // Переводим $arr в JSON и возвращаем.
52.  

Следует обратить внимание, на то, что это массив массивов, каждый подраздел сопровождается нодом – «children». Каждый элемент, описан отдельным массивом и должен содержать одно и тоже название поля для заголовков дерева. Если в раздел, который имеет ребенка, необходимо добавить еще одно поле(Например в Outbox, поле descript), то это нужно делать исключительно, после описания самого ребенка.

На выходе получаем следующие содержание:

1.  
2. [
3. {
4. "label":"Mail Box",
5. "children":
6. [
7. {
8. "label":"Inbox",
9. "children":
10. [
11. {
12. "label":"Marketing",
13. "descript":"Marketing box"
14. },
15. {
16. "label":"Product Management",
17. "descript":"Product Management Box"
18. },
19. {
20. "label":"Personal",
21. "descript":"Personal Box"
22. }
23. ],
24. "descript":"My Inbox Messages"
25. },
26. {
27. "label":"Outbox","children":
28. {
29. "label":"Professional",
30. "descript":"Professional messages"
31. },
32. "descript":"My outbox messages"
33. },
34. {
35. "label":"Personal",
36. "descript":"Personal Note"
37. },
38. {
39. "label":"Spam",
40. "descript":"Stupid Spam"
41. },
42. {
43. "label":"Sent",
44. "descript":"Sents messages"
45. }
46. ],
47. "descript":"Mail Box Maneger"
48. }
49. ]
50.  

Это и есть необходимый формат, с которым мы в дальнейшем и будем работать(Очень важно, что бы структура была той же, «children» — название менять нельзя, отвечает за вложенные ветки, label за заголовок,
descript – за описание).

Пример того же содержания(за исключением поля descript), только на XML:

1.  
2. <node label="Mail Box">
3. <node label="Inbox">
4. <node label="Marketing"/>
5. <node label="Product Management"/>
6. <node label="Personal"/>
7. </node>
8. <node label="Outbox">
9. <node label="Professional"/>
10. <node label="Personal"/>
11. </node>
12. <node label="Spam"/>
13. <node label="Sent"/>
14. </node>
15.  

Примечание: На примере видно, что дети тут обозначаются по другому. Если перевести этот xml в json, работать не будет.

Теперь приступим непосредственно к написание приложения и чтению комментариев, для понятности:

1.  
2. <?xml version="1.0" encoding="utf-8"?>
3. <!-- Tree control example with JSON. -->
4. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" preinitialize="serv.send()">// До начала загрузки компонентов, отправляем запрос на получение данных
5. <mx:Script>
6.  

1.  
2. <![CDATA[
3. import mx.rpc.events.ResultEvent;//Импортируем необходимые библиотеки,
4. import com.adobe.serialization.json.JSON;//а так же библиотеку для работы с JSON.
5. import mx.collections.ArrayCollection;// Именно с Коллекцией масивов мы и будем работать.
6.                         [Bindable]
7. public var selectedNode:Object; //Создаем объект, для работы с событиями select
8. public function treeChanged(evt:Event):void { // Функция для отлова события select.
9.            selectedNode=Tree(evt.target).selectedItem as Object;    
10. }
11. public function tree(event:ResultEvent){ //Ловим результат работы HTTPService
12.       var rawData:String = String(event.result); //Сохраняем результат в строку
13.         var arr:Array = (JSON.decode(rawData) as Array);//Декодируем строку в масив
14.         var collection:ArrayCollection = new ArrayCollection(arr);//Создаем коллекцию массивов arr.
15.         myTree.dataProvider=collection; //Загружаем в поставщик данных коллекцию «collection».
16. }
17. ]]>
18.  

1.  
2.  
3. </mx:Script>
4. <mx:Panel title="Tree Control Example with JSON" height="75%" width="75%"
5. paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
6. <mx:Label width="100%" color="blue"
7. text="Select a node in the Tree control."/>
8. <mx:HDividedBox width="100%" height="100%">
9. <mx:Tree id="myTree" width="50%" height="100%" labelField="label"
10. showRoot="true" change="treeChanged(event)"/> //Создаем дерево, в поле
11. <mx:TextArea height="100%" width="50%"       //labelField указываем ключ заголовка.
12. text="Selected Item:{selectedNode.descript}"/>//change – маякуем об изменениях
13. </mx:HDividedBox>
14. </mx:Panel>
15. <mx:HTTPService url="http://домен/ваш_php_файл.php" id="serv" resultFormat="text" result="tree(event)"> //HTTPService с помощью которого мы получем данные в функцию tree.
16. </mx:HTTPService>
17. </mx:Application>
18.  

Статья написана в помощь новичкам, и тем кто никогда не работал с JSON.

Список литературы и необходимых библиотек:
Для тех кто незнаком с as3corelib ссылка где её можно скачать:
github.com/mikechambers/as3corelib
И небольшое знакомство с её возможностями относительно JSON:
garbage-collector.ru/docs/flex/JSON_flex2.pdf