Adobe Flex — технологія швидкої розробки RIA

Використання компонентів HTTPService

Додати до моєї бази знань

Flex  RIA  Flash

HTTPService

Можна використовувати компонент HTTPService з будь-якою технологією, що використовується на стороні сервера, включаючи сторінки PHP, ColdFusion, JavaServer Pages (JSPs), Java servlets, Ruby on Rails і сторінки Microsoft ASP.

Для перегляду інформації про компонент HTTPService, див. mx.rpc.http.mxml.HTTPService.

Робота з даними PHP і SQL

Компонент Flex’у HTTPService можна використовувати в поєднанні з PHP і системою керування базами даних SQL для відображення результатів запиту до бази даних у Flex- застосунках, і щоб помістити інформацію в базу даних. Для виконання запиту бази даних можна викликати сторінку PHP з GET або POST. Можна відформатувати дані результату запиту в структурі XML і повернути структуру XML до Flex-застосунку в HTTP-відповіді. Коли результат повернено до Flex- застосунку, можна відобразити його в одному або кількох елементах керування інтерфейсу користувача.

Код MXML

В наступному прикладі Flex- застосунок викликає PHP- сторінку з методом POST. PHP-сторінка робить запит до таблиці бази даних в MySQL під назвою users. Результати запиту задаються як XML, і запит повертає XML до Flex- застосунку, де він пов'язаний з властивістю dataProvider елементу керування DataGrid, та виведений в DataGrid . Flex-застосунок також надсилає ім'я користувача та адресу електронної пошти нових користувачів на сторінку PHP, яка поміщає інформацію в таблицю бази даних.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns="*" creationComplete="send_data()">
    <mx:Script>
        <![CDATA[
            private function send_data():void {
                userRequest.send();
            }
        ]]>
    </mx:Script>
    <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="send_data()"/>
    </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:HTTPService id="userRequest" url="http://localhost/myproj/request_post2.php" useProxy="false" method="POST">
        <mx:request xmlns="">
            <username>{username.text}</username>
            <emailaddress>{emailaddress.text}</emailaddress>
        </mx:request>
    </mx:HTTPService>
</mx:Application>

Метод send() HTTPService’а звертається до сторінки PHP. Цей виклик реалізовано в методі send_data () в блоці Script файлу MXML.

Властивість resultFormat компонента HTTPService встановлена як object, тому дані передаються назад на Flex-застосунок як граф об'єктів ActionScript. Для властивості resultFormat це встановлено за замовчуванням. Загалом, можна використовувати resultFormat з e4x, щоб повернути дані як об’єкт XMLList’а, на якому можна виконувати [реалізувати] ECMAScript для операцій XML (E4X). Зміна властивості resultFormat до e4x вимагає наступних незначних змін в коді MXML.

Примітка: Якщо формат результату — e4x, не включайте кореневий вузол структури XML в точкове позначення (dot – “.”) при прив'язці до DataGrid.

XML, що повертається в цьому прикладі, не містить інформації простору імен. Для отримання інформації про роботу з XML, що містить простір імен, див. Handling results as XML with the e4x result format.

...
<mx:DataGrid id="dgUserRequest" x="22" y="128" dataProvider="{userRequest.lastResult.user}">
... 
<mx:HTTPService id="userRequest" url="http://server/myproj/request_post2.php" useProxy="false" method="POST" resultFormat="e4x">
...

При використанні формату результату e4x можна додатково прив'язати властивість lastResult до об’єкту XMLListCollection, а потім прив'язати цей об'єкт до властивості DataGrid.dataProvider, як показано в наступному фрагменті коду:

...
    <mx:XMLListCollection id="xc"
         source="{userRequest.lastResult.user}"/>
          
    <mx:DataGrid id="dgUserRequest" x="22" y="128" dataProvider="{xc}">
... 

Скрипт бази даних MySQL

Код PHP для цього застосунку використовує таблицю users бази даних sample в MySQL. Наступний фрагмент коду MYSQL створює таблицю:

CREATE TABLE `users` (
`userid` int(10) unsigned NOT NULL auto_increment,
`username` varchar(255) collate latin1_general_ci NOT NULL,
`emailaddress` varchar(255) collate latin1_general_ci NOT NULL,
PRIMARY KEY (`userid`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=3 ;

Код PHP

Цей за стосунок звертається до наступної сторінки PHP. Цей код PHP виконує вставки в базу даних SQL і запити до неї, і повертає результати запитів Flex- застосунку в структурі XML.

<?php
define( "DATABASE_SERVER", "servername" );
define( "DATABASE_USERNAME", "username" );
define( "DATABASE_PASSWORD", "password" );
define( "DATABASE_NAME", "sample" );

//connect to the database
$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);

mysql_select_db( DATABASE_NAME );

// Quote variable to make safe 
function quote_smart($value)
{
 // Stripslashes
 if (get_magic_quotes_gpc()) {
 $value = stripslashes($value);
 }
 // Quote if not integer
 if (!is_numeric($value)) {
 $value = "'" . mysql_real_escape_string($value) . "'";
 }
 return $value;
}

if( $_POST["emailaddress"] AND $_POST["username"])
{
//add the user
$Query = sprintf("INSERT INTO users VALUES ('', %s, %s)", quote_smart($_POST['username']), quote_smart($_POST['emailaddress']));

$Result = mysql_query( $Query );
}

//return a list of all the users
$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)
?>

Виклик служб HTTP в ActionScript

Наступний приклад показує виклик служби HTTP в блок ActionScript’а. Виклик методу useHTTPService () об’являє сервіси, встановлює адресат, встановлює результат і прослуховувач помилок, і викликає метод сервісу send().

<?xml version="1.0"?>
<!-- fds\rpc\HttpServiceInAS.mxml. Compiles --> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="10">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.rpc.http.HTTPService;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
            
            private var service:HTTPService 

            public function useHttpService(parameters:Object):void {
                service = new HTTPService();
                service.destination = "sampleDestination";
                service.method = "POST";
                service.addEventListener("result", httpResult);
                service.addEventListener("fault", httpFault);
                service.send(parameters);
            }
            public function httpResult(event:ResultEvent):void {
                var result:Object = event.result;
            //Do something with the result.
            }
            public function httpFault(event:FaultEvent):void {
                var faultstring:String = event.fault.faultString;
                Alert.show(faultstring);
            }
        ]]>
    </mx:Script>
</mx:Application>

Зверніть увагу на додаткові посилання

Якщо вас цікавить...

Flex

RIA

Flash

Головний розділ

Adobe Flex — технологія швидкої розробки RIA