Flex & PHP Tutorial - Передача данных с использованием JSON

Чтобы убедиться, что мы не слишком увязли в наших публикациях, я решил немного пообщаться и поговорить о Adobe Flex 2.0. Недавно я потратил много времени на то, чтобы понять, как это сделать. По сути, я собираюсь перейти к тому, как использовать php и json для отправки данных в ваше Flex-приложение, а затем как использовать эти данные во Flex.

На самом деле это намного проще, чем кажется, потому что PHP и Flex имеют функции для обработки передачи данных json. Для Flex единственное, что вам нужно убедиться, это то, что у вас есть corelib от Adobe для использования функций JSON — это можно найти в Adobe Flex coreLib . Это можно добавить в проект в Flex Builder, перейдя в свойства проекта, затем в «Путь сборки Flex» и добавив .swc к пути библиотеки. Для PHP, если у вас версия больше 5.2, у вас все готово. Если нет, вы можете либо обновить, либо установить расширение php-json .

Ниже приведен конечный продукт того, что мы собираемся создать сегодня — чтобы просмотреть источник Flex, щелкните правой кнопкой мыши флэш-фильм и выберите «Просмотр источника». Нажатие каждой из кнопок отправляет запрос в наш php-код для данных. Если вы нажимаете кнопку «Получить сотрудника», мы просто возвращаем одного человека, а если вы нажимаете «Получить менеджера», мы возвращаем менеджера и его сотрудников (а это множество людей). Это очень простое маленькое приложение, и оно не особенно полезно, но в нем есть все необходимое, чтобы показать, как общаться между php и flex, используя json.

Первое, что мы собираемся пройти, это PHP-код. Код php создает несколько классов для объектов, которые мы передадим нашему гибкому приложению. У нас также есть код, чтобы проверить, была ли установлена переменная GET, мы используем это, чтобы сообщить коду php, что мы запрашиваем. Если переменная «getPerson» установлена, мы создаем человека и выводим его (после того, как мы закодировали его в json), чтобы отправить его в приложение Flex. В идеале ваши данные будут храниться в базе данных, но для простоты мы просто создаем объекты Person непосредственно в коде php.

<?php

class Person
{
  public $first_name;
  public $last_name;
  public $email;
  public $address;
}

class Manager extends Person
{
  public $title;
  public $employees;
}

if(isset($_GET['getPerson']))
{
  $p = new Person();
  $p->first_name = 'Chuck';
  $p->last_name = 'Killer';
  $p->email = '[email protected]';
  $p->address = '5555 Some Street City, State 52423';
  echo json_encode($p);
}

if(isset($_GET['getManager']))
{
  $p1 = new Person();
  $p1->first_name = 'Joe';
  $p1->last_name = 'Schmoe';
  $p1->email = '[email protected]';
  $p1->address = '5424 Some Street City, State 12314';
  $p2 = new Person();
  $p2->first_name = 'Bob';
  $p2->last_name = 'Hacker';
  $p2->email = '[email protected]';
  $p2->address = '1414 Some Street City, State 12412';
  $p3 = new Person();
  $p3->first_name = 'Kevin';
  $p3->last_name = 'Putvin';
  $p3->email = '[email protected]';
  $p3->address = '6123 Some Street City, State 41241';  
  $m = new Manager();
  $m->first_name = 'Manager';
  $m->last_name = 'Dude';
  $m->email = '[email protected]';
  $m->address = '5534 Some Other Street City, State 91230';
  $m->title = 'Office Manager';
  $m->employees = array($p1, $p2, $p3);
  echo json_encode($m);  
}

?>

Следующее, что нужно сделать, это настроить базовое приложение для flex. Следующий код является самым простым приложением flex. Это устанавливает приложение с указанными высотой и шириной, а также добавляет опцию просмотра источника к фильму с исходным файлом, указанным «viewSourceURL».

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
   width="500" height="410" viewSourceURL="../files/JSONTutorial.mxml">
</mx:Application>

Следующее, что нужно сделать, это настроить пользовательский интерфейс. Это довольно стандартный flex mxml, ничто не должно выглядеть неуместно. В пользовательском интерфейсе есть пара текстовых полей для данных, которые мы получаем из кода php, сетка данных и две кнопки. Это все настройки на панели. Важно отметить, что свойства dataField в DataGridColumns, эти имена соответствуют переменным из объектов в коде php. Этот код находится внутри блока Application.

<mx:Panel x="0" y="0" width="500" height="410" layout="absolute"
   title="Simple JSON Example">
  <mx:DataGrid x="10" y="174" width="460" enabled="true" editable="false"
     id="dgEmployees">
    <mx:columns>
      <mx:DataGridColumn headerText="First Name" dataField="first_name"/>
      <mx:DataGridColumn headerText="Last Name" dataField="last_name"/>
      <mx:DataGridColumn headerText="Email" dataField="email"/>
      <mx:DataGridColumn headerText="Address" dataField="address"/>
    </mx:columns>
  </mx:DataGrid>
  <mx:Button x="116" y="338" label="Get Employee" id="getPerson" />
  <mx:Button x="266" y="338" label="Get Manager" id="getManager" />
  <mx:Label x="131" y="12" text="Name"/>
  <mx:TextInput x="189" y="10" id="txtName" editable="false"/>
  <mx:Label x="131" y="42" text="E-mail"/>
  <mx:TextInput x="189" y="40" id="txtEmail" editable="false"/>
  <mx:Label x="131" y="68" text="Address"/>
  <mx:TextInput x="189" y="66" id="txtAddress" editable="false"/>
  <mx:Label x="131" y="94" text="Title"/>
  <mx:TextInput x="189" y="92" id="txtTitle" editable="false"/>
  <mx:Label x="131" y="122" text="Has Employees"/>
  <mx:TextInput x="229" y="120" width="120" editable="false"
     id="txtEmployees" text="No"/>
  <mx:Label x="10" y="148" text="Employees:"/>
</mx:Panel>

Теперь, когда наш пользовательский интерфейс настроен и готов к работе, мы можем добавить наши http-сервисы, чтобы запрашивать данные из нашего php-кода. Теперь во Flex вы можете настроить все виды различных услуг. Мы просто собираемся установить простой сервис HTTP-запроса, который устанавливает переменную GET и сообщает службе, что мы хотим запустить функцию, как только мы получим результаты. Как видно из приведенного ниже кода, мы отправляем обе службы на одну и ту же страницу php, которую мы сделали ранее. Также каждый из них устанавливает одну переменную GET, что делается внутри блока mx: request. Наконец, результатом является событие, к которому мы подключаемся для обработки результатов запроса (наши данные JSON). Этот код идет в самом начале файла сразу после элемента открытия приложения.

<mx:HTTPService id="personRequest" url="../files/json_tutorial.php" useProxy="false"
   method="GET" resultFormat="text" result="personJSON(event)">
  <mx:request xmlns="">
    <getPerson>"true"</getPerson>
  </mx:request>
</mx:HTTPService>
<mx:HTTPService id="managerRequest" url="../files/json_tutorial.php" useProxy="false"
   method="GET" resultFormat="text" result="managerJSON(event)">
  <mx:request xmlns="">
    <getManager>"true"</getManager>
  </mx:request>
</mx:HTTPService>

Хорошо, теперь давайте перейдем к фактическому декодированию JSON, которое действительно просто. Так что в этот момент, если вы используете flex builder, вы получите сообщение об ошибке о неопределенном методе для personJSON (событие) и managerJSON (событие). Мы собираемся решить это прямо сейчас. Перво-наперво — давайте просто добавим сигнатуры методов, чтобы приложение могло собираться и запускаться. Это можно сделать, введя тег script и добавив в него наши функции actionscript. Вы заметите, что мы добавили два оператора import для импорта наших функций сериализации JSON и использования события результата. Этот код будет располагаться прямо над http-сервисами, которые мы только что установили, и под элементом открытия приложения.

<mx:Script>
 <![CDATA[
   import mx.rpc.events.ResultEvent;
   import com.adobe.serialization.json.JSON;

   private function personJSON(event:ResultEvent):void
   {
   }

   private function managerJSON(event:ResultEvent):void
   {
   }
 ]]>
</mx:Script>

Теперь перейдем к реальной работе нашего приложения. Первое, что нам нужно сделать в обеих функциях, — это вернуть результат и сохранить его в виде строки. Следующее, что мы делаем, это вызываем функцию JSON.decode для строки, эта функция возвращает нам объект со всеми теми же свойствами объекта, который был отправлен php — мы устанавливаем его равным переменной. Теперь мы можем использовать этот объект и ссылаться на свойства, используя. (точка) обозначение. Таким образом, чтобы получить имя человека, мы просто используем variable.first_name и так далее для остальных переменных. Так что это заботится о получении человека. И приведенный выше код изменяется так.

<mx:Script>
 <![CDATA[
   import mx.rpc.events.ResultEvent;
   import com.adobe.serialization.json.JSON;

   private function personJSON(event:ResultEvent):void
   {
     //get the raw JSON data and cast to String
     var rawData:String = String(event.result);
     var person = JSON.decode(rawData);
     txtName.text = person.first_name + " " + person.last_name;
     txtEmail.text = person.email;
     txtAddress.text = person.address;
     txtEmployees.text = "No";
     txtTitle.text = "No Title";
   }

   private function managerJSON(event:ResultEvent):void
   {
     //get the raw JSON data and cast to String
     var rawData:String = String(event.result);
     var manager = JSON.decode(rawData);
     txtName.text = manager.first_name + " " + manager.last_name;
     txtEmail.text = manager.email;
     txtAddress.text = manager.address;
     txtEmployees.text = "Yes";
     txtTitle.text = manager.title;
   }
 ]]>
</mx:Script>

Это заботится обо всех текстовых полях, которые мы создали, и помещает в них правильные значения. Теперь нам нужно побеспокоиться о той сетке данных, которую мы создали, и вы могли заметить, что мы еще не имели дело с сотрудниками менеджера. Ну, это довольно хорошо обрабатывается в функции менеджера. Мы собираемся добавить новую переменную с именем сотрудников, и это будет массив. Благодаря функции JSON.decode мы можем просто приводить сотрудников в виде массива, и все будет хорошо. Следующее, что мы делаем, это на самом деле создаем ArrayCollection для использования в качестве провайдера данных для сетки данных. Это лучшая практика при использовании данных массива для провайдера, поскольку ArrayCollection предоставляет некоторые дополнительные функции. Окончательная настройка — установить dataGrid.dataProvider равным ArrayCollection.Также мы устанавливаем dataProvider равным нулю в функции person, чтобы очистить наши данные в сетке данных. Чтобы все это работало, нам также нужно добавить еще один импорт для ArrayCollection. Это оставляет нас со следующим кодом.

<mx:Script>
 <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.rpc.events.ResultEvent;
   import com.adobe.serialization.json.JSON;
 
   private function personJSON(event:ResultEvent):void
   {
     //get the raw JSON data and cast to String
     var rawData:String = String(event.result);
     var person = JSON.decode(rawData);
     txtName.text = person.first_name + " " + person.last_name;
     txtEmail.text = person.email;
     txtAddress.text = person.address;
     txtEmployees.text = "No";
     txtTitle.text = "No Title";
   
     //Data Grid Code
     dgEmployees.dataProvider = null;
   }
 
   private function managerJSON(event:ResultEvent):void
   {
     //get the raw JSON data and cast to String
     var rawData:String = String(event.result);
     var manager = JSON.decode(rawData);
     txtName.text = manager.first_name + " " + manager.last_name;
     txtEmail.text = manager.email;
     txtAddress.text = manager.address;
     txtEmployees.text = "Yes";
     txtTitle.text = manager.title;
   
     //Data Grid Code
     var employees:Array = manager.employees as Array;
     var employeesCollection:ArrayCollection = new ArrayCollection(employees);
     dgEmployees.dataProvider = employeesCollection;
   }
 ]]>
</mx:Script>

Теперь вы могли бы попробовать это в этот момент и сказать: «Эй, это не работает!», Ну, это правда. Это потому, что мы никогда не подключали наши кнопки для отправки запросов. Это действительно просто, мы просто добавляем события click для обеих кнопок и соответствующих команд service.send () к событиям click. Код ниже — наш новый код кнопки.

<mx:Button x="116" y="338" label="Get Employee" id="getPerson"
   click="personRequest.send();"/>
<mx:Button x="266" y="338" label="Get Manager" id="getManager"
   click="managerRequest.send();"/>

Так что это оставляет нам окончательный гибкий код. Это, наряду с кодом php в начале урока, позволяет отправлять данные JSON вашим приложениям Flex.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
   width="500" height="410" viewSourceURL="../files/JSONTutorial.mxml">
  <mx:Script>
   <![CDATA[
     import mx.collections.ArrayCollection;
     import mx.rpc.events.ResultEvent;
     import com.adobe.serialization.json.JSON;
   
     private function personJSON(event:ResultEvent):void
     {
       //get the raw JSON data and cast to String
       var rawData:String = String(event.result);
       var person = JSON.decode(rawData);
       txtName.text = person.first_name + " " + person.last_name;
       txtEmail.text = person.email;
       txtAddress.text = person.address;
       txtEmployees.text = "No";
       txtTitle.text = "No Title";
   
       //Data Grid Code
       dgEmployees.dataProvider = null;
     }
   
     private function managerJSON(event:ResultEvent):void
     {
       //get the raw JSON data and cast to String
       var rawData:String = String(event.result);
       var manager = JSON.decode(rawData);
       txtName.text = manager.first_name + " " + manager.last_name;
       txtEmail.text = manager.email;
       txtAddress.text = manager.address;
       txtEmployees.text = "Yes";
       txtTitle.text = manager.title;
   
       //Data Grid Code
       var employees:Array = manager.employees as Array;
       var employeesCollection:ArrayCollection = new ArrayCollection(employees);
       dgEmployees.dataProvider = employeesCollection;
     }
   ]]>
 </mx:Script>
  <mx:HTTPService id="personRequest" url="../files/json_tutorial.php"
     useProxy="false" method="GET" resultFormat="text" result="personJSON(event)">
    <mx:request xmlns="">
      <getPerson>"true"</getPerson>
    </mx:request>
  </mx:HTTPService>
  <mx:HTTPService id="managerRequest" url="../files/json_tutorial.php"
     useProxy="false" method="GET" resultFormat="text" result="managerJSON(event)">
    <mx:request xmlns="">
      <getManager>"true"</getManager>
    </mx:request>
  </mx:HTTPService>
  <mx:Panel x="0" y="0" width="500" height="410"
     layout="absolute" title="Simple JSON Example">
    <mx:DataGrid x="10" y="174" width="460" enabled="true"
       editable="false" id="dgEmployees">
      <mx:columns>
        <mx:DataGridColumn headerText="First Name" dataField="first_name"/>
        <mx:DataGridColumn headerText="Last Name" dataField="last_name"/>
        <mx:DataGridColumn headerText="Email" dataField="email"/>
        <mx:DataGridColumn headerText="Address" dataField="address"/>
      </mx:columns>
    </mx:DataGrid>
    <mx:Button x="116" y="338" label="Get Employee" id="getPerson"
       click="personRequest.send();"/>
    <mx:Button x="266" y="338" label="Get Manager" id="getManager"
       click="managerRequest.send();"/>
    <mx:Label x="131" y="12" text="Name"/>
    <mx:TextInput x="189" y="10" id="txtName" editable="false"/>
    <mx:Label x="131" y="42" text="E-mail"/>
    <mx:TextInput x="189" y="40" id="txtEmail" editable="false"/>
    <mx:Label x="131" y="68" text="Address"/>
    <mx:TextInput x="189" y="66" id="txtAddress" editable="false"/>
    <mx:Label x="131" y="94" text="Title"/>
    <mx:TextInput x="189" y="92" id="txtTitle" editable="false"/>
    <mx:Label x="131" y="122" text="Has Employees"/>
    <mx:TextInput x="229" y="120" width="120" editable="false"
       id="txtEmployees" text="No"/>
    <mx:Label x="10" y="148" text="Employees:"/>
  </mx:Panel>
</mx:Application>

Flex & PHP Tutorial — Передача данных с использованием JSON

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC