В этой статье будет создано небольшое приложение с помощью Adobe Flex Builder 2 и PHP. Это приложение будет добавлять и считывать имена/email из базы данных.
Загрузите Flex Builder 2, если еще этого не сделали. Создайте базу данных. Я назвал ее sample. Далее создайте таблицу, которая будет содержать данные о пользователях. Вот SQL код создания таблицы:
CREATE TABLE users (
userid int(10) unsigned NOT NULL auto_increment primary key,
username varchar(255) NOT NULL,
emailaddress varchar(255) NOT NULL
) ENGINE=MyISAM AUTO_INCREMENT=3;
Затем создайте PHP скрипт, который будет добавлять пользователей и экспортировать XML для Flex приложения.
<?php
Define( "DATABASE_SERVER", "localhost" );
Define( "DATABASE_USERNAME", "root" );
Define( "DATABASE_PASSWORD", "");
Define( "DATABASE_NAME", "sample" );
//коннектимся к БД
$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
mysql_select_db( DATABASE_NAME );
print ("Connected successfully");
// экранируем переменную для безопасности
function quote_smart($value)
{
// Stripslashes
if (get_magic_quotes_gpc()) {
$value = stripslashes($value);
}
// экранируем, если не число
if (!is_numeric($value)) {
$value = "'" . mysql_real_escape_string($value) . "'";
}
return $value;
}
if( $_POST["emailaddress"] AND $_POST["username"])
{
//добавляем пользователя
$Query = sprintf("INSERT INTO users VALUES ('', %s, %s)", quote_smart($_POST["username"]), quote_smart($_POST["emailaddress"]));
$Result = mysql_query( $Query );
}
//возвращаем список пользователей
$Query = "SELECT * from users";
$Result = mysql_query( $Query );
$Return = "<users>";
while ( $User = mysql_fetch_object( $Result ) )
{
$Return .= "<user><userid>".$User->userid."</userid><username>".$User->username."</username><emailaddress>".$User->emailaddress."</emailaddress></user>";
}
$Return .= "</users>";
mysql_free_result( $Result );
print ($Return)
?>
$_POST переменные наполняются из полей формы Flex приложения: emailaddress и username. Если пользователь заполняет оба поля, то данные добавляются в базу данных. Потом PHP возвращает список пользователей в формате XML.
Внимание: Вы не можете напрямую передать переменные в PHP, вы должны представить их в XML формате.
Ниже приведен MXML код приложения:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute" creationComplete="userRequest.send()">
<mx:HTTPService id="userRequest" url="http://localhost/flex/php/request.php" useProxy="false" method="POST">
<mx:request xmlns="">
<username>{username.text}</username><emailaddress>{emailaddress.text}</emailaddress>
</mx:request>
</mx:HTTPService>
<mx:Form x="22" y="10" width="493">
<mx:HBox>
<mx:Label text="Username"/>
<mx:TextInput id="username"/>
</mx:HBox>
<mx:HBox>
<mx:Label text="Email Address"/>
<mx:TextInput id="emailaddress"/>
</mx:HBox>
<mx:Button label="Submit" click="userRequest.send()"/>
</mx:Form>
<mx:DataGrid id="dgUserRequest" x="22" y="128" dataProvider="{userRequest.lastResult.users.user}">
<mx:columns>
<mx:DataGridColumn headerText="User ID" dataField="userid"/>
<mx:DataGridColumn headerText="User Name" dataField="username"/>
</mx:columns>
</mx:DataGrid>
<mx:TextInput x="22" y="292" id="selectedemailaddress" text="{dgUserRequest.selectedItem.emailaddress}"/>
</mx:Application>
Рассмотрим поподробнее каждую строку. Первые две строки сопровождают любое Flex приложение:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute" creationComplete="userRequest.send()">
Первая строка объявляет XML документ. Во второй строке задается корневой тег Application, пространство имен для MX компонентов, задается абсолютный лэйаут (значит, вы можете абсолютно позиционировать элементы, задав их координаты). И, наконец, creationComplete="userRequest.send()" говорит о том, что по окончанию загрузки приложения, оно вызывает функцию send() элемента userRequest.
Далее устанавливается HTTPService для отправки и получения сообщений из PHP скрипта:
<mx:HTTPService id="userRequest" url="http://localhost/flex/php/request.php" useProxy="false" method="POST">
<mx:request xmlns="">
<username>{username.text}</username>
<emailaddress>{emailaddress.text}</emailaddress>
</mx:request>
</mx:HTTPService>
Здесь вы задаете id = “userRequest”, ссылку к PHP файлу, а также метод отправки POST (можно задать GET, но при этом необходимо откорректировать PHP скрипт). Запрос содержит две переменные, username и emailaddress. Этот код связывает значения PHP переменных и атрибутов элементов интерфейса. То есть $_POST["username"] и username.text, $_POST["emailaddress"] и emailaddress.text.
Если изменить <username> на <user_name>, то необходимо поменять PHP переменную на _POST["user_name"]. Если изменить {username.text} на {user_name.text}, то необходимо изменить в MXML: username на user_name.
Далее идет простая форма:
<mx:Form x="22" y="10" width="493"> <mx:HBox> <mx:Label text="Username"/> <mx:TextInput id="username"/> </mx:HBox> <mx:HBox> <mx:Label text="Email Address"/> <mx:TextInput id="emailaddress"/> </mx:HBox> <mx:Button label="Submit" click="userRequest.send()"/> </mx:Form>
Обратите внимание, что вы можете задать точные размеры и координаты формы. Затем две HBoxes содержат Label и TextInput, располагая элементы слева направо и друг над другом. Кнопка Submit располагается в конце формы и вызывает функцию send() элемента с ID userRequest (в нашем случае это HTTPService).
Теперь необходимо отобразить этиы данные:
<mx:DataGrid id="dgUserRequest" x="22" y="128" dataProvider="{userRequest.result.users.user}">
<mx:columns>
<mx:DataGridColumn headerText="User ID" dataField="userid"/>
<mx:DataGridColumn headerText="User Name" dataField="username"/>
</mx:columns>
</mx:DataGrid>
<mx:TextInput x="22" y="292" id="selectedemailaddress" text="{dgUserRequest.selectedItem.emailaddress}"/>
</mx:Application>
В данном случае имеется DataGrid, который наполняется из XML из userRequest HTTPService. В данном случае, вы связываете виджет DataGrid и возвращаемый XML документ. Этот документ выглядит следующим образом:
<users> <user> <userid>1</userid> <username>Joe Schmoe</username> <emailaddress>joe@schmoe.com</emailaddress> </user> <user> <userid>2</userid> <username>Betty Schmoe</username> <emailaddress>betty@schmoe.com</emailaddress> </user> </users>
Обратите внимание, что вы отображаете только данные, без тегов.
Виджет DataGrid отображает идентификатор пользователя и его имя. В тесктовом поле ниже отображается email выбранного пользователя dgUserRequest.selectedItem.emailaddress.
Вот и все! У нас есть приложение, отсылающее и отображающее данные, с серверной начинкой на PHP.