Интеграция Flex & PHP — вводное руководство

Во-первых, поскольку этот PHP-скрипт возвращает данные XML, он должен отправить правильный заголовок Content-type:
header («Content-type: text / xml»);

Затем скрипт PHP печатает корневой элемент XML, который может иметь любое имя:

echo "<departments>\n";

Наконец, скрипт выбирает каждый отдел из базы данных и печатает каждый в виде записи:

echo "<department>
    <id>{$row['department_id']}</id>
    <name>{$row['department']}</name>
</department>\n";

Запишите метки, присвоенные элементам, так как они будут упоминаться во Flex. (Кроме того, я использую улучшенные расширения MySQL, которые предполагают, что вы используете PHP 5 и MySQL 4.1 или выше; если нет, измените код на более старые функции MySQL.)

Просмотр сотрудников
Приложение Flash содержит DataGrid, в котором перечислены каждый сотрудник (см. следующее изображение). Это делается с помощью другого PHP-скрипта, который также отправляет XML, как департаменты_xml.php. Этот скрипт называется employee_xml.php, и он работает так же, как и предыдущий скрипт. Запрос здесь использует соединение, чтобы также получить название отдела каждого сотрудника. Выводимая XML-запись для каждого сотрудника создается следующими строками:

echo "<employee>
    <first_name>{$row['first_name']}</first_name>
    <last_name>{$row['last_name']}</last_name>
    <department>{$row['department']}</department>
</employee>\n";

Опять же, обратите внимание на конкретные имена элементов.

Добавление новых сотрудников

Третий PHP-скрипт обрабатывает добавление новых сотрудников. Вы можете отправить новые записи в этот скрипт, используя стандартную форму HTML, но вместо этого я использую чистый Flex (см. Следующий рисунок).

Независимо от того, откуда поступают данные, страница PHP, которая обрабатывает новые данные о сотрудниках, должна проверить их, вставить запись в базу данных и сообщить о результатах. Сценарий add_employee.php в загружаемом исходном коде делает все это. Глядя на этот код, вы увидите, что …

• Я выполняю только базовую проверку трех значений; это может быть улучшено при использовании регулярных выражений.
• Для дополнительной безопасности я использую подготовленные операторы, которые предотвратят атаки с использованием SQL-инъекций.
• Сценарий не создает HTML, просто текст.
Этот последний пункт является наиболее важным, поскольку результаты этого сценария (т. Е. Все, что в противном случае будет отображаться в веб-браузере) будут отображаться в окне предупреждения приложением Flex (см. Следующие два рисунка).

Страница Flex

Если вы никогда не использовали Flex, вам следует прочитать вводное руководство, прежде чем идти дальше, так как следующий код в лучшем случае может быть бессмысленным, а в худшем — вообще не работать. Я также рекомендовал бы использовать IDE Flex Builder, что значительно облегчает разработку. Сначала я хочу обсудить графические элементы приложения Flex, в том числе форму «Добавить нового сотрудника» и DataGrid «Текущий сотрудник».

Для имени и фамилии сотрудника используются простые TextInputs (очевидно, Flex-ввод текста HTML), предоставляя каждому уникальное значение id:

echo "<employee>
    <first_name>{$row['first_name']}</first_name>
    <last_name>{$row['last_name']}</last_name>
    <department>{$row['department']}</department>
</employee>\n";

Раскрывающееся меню отдела будет создано во Flex с использованием ComboBox, которое похоже на меню HTML SELECT:

<mx:FormItem label="Department">
    <mx:ComboBox id="department_id" labelField="name"></mx:ComboBox>
</mx:FormItem>

ComboBox также имеет уникальное значение id. Другим заметным атрибутом здесь является labelField, которому присваивается значение имени. Скомпилированный SWF-файл, запущенный в браузере, получит список отделов в виде данных XML и будет использовать эти данные в качестве параметров для этого ComboBox. Чтобы этот процесс работал, ComboBox необходимо указать, какой элемент XML использовать для метки или видимый текст для каждой опции. В этом случае это должно быть название отдела. (В качестве альтернативы вы можете изменить XML-код, выводимый сценарием PHP, чтобы имя отдела находилось в элементе с именем label; в этом случае SWF-приложение должно автоматически использовать эти значения.)

Аналогичным образом DataGrid отображает все текущие значения. сотрудники получают эту информацию в виде XML, а также должны быть проинформированы о том, как обрабатывать ассоциации.

<mx:DataGrid x="416" y="100" id="employees" width="45%" height="338">
    <mx:columns>
        <mx:DataGridColumn headerText="Department" dataField="department"/>
        <mx:DataGridColumn headerText="Last Name" dataField="last_name"/>
        <mx:DataGridColumn headerText="First Name" dataField="first_name"/>
    </mx:columns>
</mx:DataGrid>

Внутри подэлемента столбцов каждому DataGridColumn присваивается заголовок, в котором указывается, какие значения элемента XML следует использовать для заполнения этого столбца.

Наконец, на видимой странице есть кнопка Добавить для отправки формы. К этому элементу необходимо добавить обработчик событий, чтобы при его нажатии данные отправлялись в сценарий add_employee.php. Этот код Flex имеет вид
<mx: Button label = «Add» id = «submit» click = «postAddEmployeeService.send ();» />
В последней части говорится, что при нажатии кнопки метод send () метода Должен быть вызван объект postAddEmployeeService. Я объясню, что дальше …

Использование объектов HTTPService
Существует несколько способов связи между Flex и внешним ресурсом, при этом HTTPService является простым и легким вариантом. По сути, это обычный HTTP-запрос, но он выполняется Flex вместо веб-браузера. Приложению требуется уникальный объект HTTPService для каждого взаимодействия Flex-PHP, что означает, что в этом примере их три. Два запроса GET (для данных XML); Одним из них является запрос POST (для добавления новых сотрудников). Первые два определены аналогично:

<mx:HTTPService id="getDepartmentsService"
    url="http://localhost:8888/flex/departments_xml.php"
    result="handleDepartmentsXml(event)"
    contentType="application/xml" />
<mx:HTTPService id="getEmployeesService"
    url="http://localhost:8888/flex/employees_xml.php"
    result="handleEmployeesXml(event)"
    contentType="application/xml" />

Оба HTTPServices…
• Даются уникальные и описательные значения идентификатора.
• Назначается URL-адрес, который указывает на уже созданный PHP-скрипт (измените ваши URL-адреса соответственно).
• Называет функцию, которая будет вызвана после завершения запроса на обслуживание.
• Идентифицирует как данные XML ожидаемый взамен тип контента.

Функции, вызываемые после каждого запроса на обслуживание, имеют одинаковую роль: назначать элементу на странице — Department_id, ComboBox и сотрудников, DataGrid — данные, возвращаемые сценарием PHP. Вот как выглядят эти функции (это код ActionScript):

private function handleDepartmentsXml(e:ResultEvent):void {
    department_id.dataProvider = e.result.departments.department;
}
private function handleEmployeesXml(e:ResultEvent):void {
    employees.dataProvider = e.result.employees.employee;
}

Каждая функция получает объект ResultEvent в качестве единственного аргумента. HTTP-ответ доступен через свойство результата этого объекта. Внутри функции свойству dataProvider определенного элемента назначаются полученные данные XML, то есть ComboBox и DataGrid заполняются из этого XML. Но в каждом случае конкретный подэлемент должен быть назван (должны использоваться отдельные элементы отдела, а не корневые отделы и сотрудник, а не сотрудники).

Эти функции вызываются после завершения запроса на обслуживание. Чтобы фактически вызвать этот запрос, должен быть вызван метод send (), что происходит в функции init ():

private function init():void {
    getDepartmentsService.send();
    getEmployeesService.send();    
}

Вы уже видели эту концепцию: нажатие кнопки Добавить вызывает метод postAddEmployeeService.send (). Давайте посмотрим, как определяется этот сервис, поскольку он немного отличается:

<mx:HTTPService id="postAddEmployeeService"
    url="http://localhost:8888/flex/add_employee.php"
    method="POST"
    resultFormat="text"
    result="handleEmployeeAdd(event)">
    <mx:request xmlns="">
        <first_name>{first_name.text}</first_name>
        <last_name>{last_name.text}</last_name>
        <department_id>{department_id.selectedItem.id}</department_id>
    </mx:request>
</mx:HTTPService>

Снова, уникальный идентификатор назначен, и соответствующий URL назван. Метод, который по умолчанию является GET, здесь устанавливается как POST, а resultFormat представляет собой простой текст, который возвращает связанный PHP-скрипт. Когда запрос завершен, должна быть вызвана функция handleEmployeeAdd (). Поскольку этот запрос также должен отправлять данные в сценарий PHP, добавляется дополнительный элемент запроса. Внутри него добавляется элемент для каждой части данных. Имя элемента будет соответствовать индексу массива $ _POST в PHP-скрипте (значения id в форме не определяют содержимое $ _POST). Для каждого значения элемента обратитесь к идентификатору элемента страницы, затем к свойству text для TextInputs и selectedItem.id для ComboBox. Для этого последнего значения selectedItem идентифицирует выбор пользователя. Затем следует идентификатор,который используется, потому что значения для ComboBox будут элементами id из данных XML.

Наконец, вот как выглядит функция handleEmployeeAdd (), которая вызывается после выполнения этого запроса на обслуживание:

private function handleEmployeeAdd(e:ResultEvent):void {
    Alert.show(String(e.result));
    getEmployeesService.send();    
}

Эта функция делает две вещи. Во-первых, он использует окно предупреждения (похожее, но более приятное, чем предупреждение JavaScript) для отображения ответа сценария PHP. Две более ранние цифры показывают это в действии. Функция также повторно отправляет запрос getEmployeesService, чтобы обновить содержимое DataGrid, отражая тем самым добавленного сотрудника.

Идти вперед
Если вы соберете вместе базу данных, PHP-скрипты и Flex, у вас получится прекрасно работающее и красивое многофункциональное интернет-приложение. Как и с любой технологической вещью, которую вы делаете, существует множество способов расширить этот пример или другие направления. Одним из вариантов будет добавление валидаторов в код Flex для предварительной проверки данных формы (конечно, вы все равно должны сохранять валидации на стороне сервера). И одно из больших побочных преимуществ использования Flex заключается в том, что вы легко можете использовать как веб-приложение (например, Flash для запуска в браузере), так и настольное приложение (благодаря Adobe AIR).