Aplicatiile Flex sunt aplicatii RIA (rich internet applications) construite cu ajutorul uneltelor de la Adobe. Aceste aplicatii sunt rulate in interiorul Flash Player–ului.
In acest tutorial vom arata cum se pot obtine informatii dintr-o baza de date folosing PHP-ul ca si back end, si utilizandu-le intr-o aplciatie Flex.
Pentru intelegerea tuturialului, vom face aceasta aplicatie simpla.
In primul rand, vom avea nevoie de crearea bazei de date cu care va interactiona limajul de server PHP. Astfel vom avea :
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=1 ;
Deasemenea, vom realiza un script PHP care va adauga useri la aceasta tabela si va exporta un fisier XML, consumat ulterior de catre aplicatia Flex.
<?php
Define( "DATABASE_SERVER", "localhost" );
Define( "DATABASE_USERNAME, "username" );
Define( "DATABASE_PASSWORD", "password" );
Define( "DATABASE_NAME", "sample" );
//connect to the database
$mysql = mysql_connect(DATABASE_SERVER, DATABASER_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"])
{
//adaugarea userului
$Query = sprintf("INSERT INTO users VALUES ('', '%s',
'%s')", quote_smart($_POST["username"], quote_smart($_POST
["emailaddress"])";
$Result = mysql_query( $Query );
}
//lista userilor
$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)
?>
Acest cod ar trebui sa se explice singur. Variabilele din _POST sunt transmise prin Flex. Daca adresa de email si usernameul sunt trimise, atunci va urma o adaugare in aza de date. Ulterior, se va lista in formt XML continutul intregii tabele de Useri. Este foarte important de retinut ca nu pot fi transmise informatii din PHP in Flex decat prin intermediul unui fisier cu format XML.
Pana in acest moment, am realizat scriptul PHP si baza de date de care am avut nevoie pentru aplicatia Flex.
Aplicatiile Flex sunt construite folosinf o combinatie intre AS3 si MXML. ActionScript este bazat pe ECMA Script. MXML este un limbaj bazat pe XML-uri.
In principiu, in construirea unei aplicatii, trebuie construita UI cuajutorul XML, si codata cu ajutorul AS3. Acesta este codul pentru interfata grafica (UI) a aplciatiei :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.macromedia.com/2005/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.result.users.user}">
<mx:columns>
<mx:DataGridColumn headerText="User ID"
columnName="userid"/>
<mx:DataGridColumn headerText="User Name"
columnName="username"/>
</mx:columns>
</mx:DataGrid>
<mx:TextInput x="22" y="292" id="selectedemailaddress"
text="{dgUserRequest.selectedItem.emailaddress}"/>
</mx:Application>
Aceasta aplicatie face urmatoarele lucruri:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*"
layout="absolute" creationComplete="userRequest.send()">
Acestea sunt primele doua linii de cod ale aplicatiei Flex. Prima linie declara ca acest document este unul de tip XML. Al doilea declara ca este o aplicatie, declara layout-ul sa fie absolut, iar in final, "creationComplete="userRequest.send()", spune ca la sfarsitul creerii interfetei grafice pentru user, sa apeleze functia send() a idului userRequest.
<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>
In aceste linii de cod setam HTTPService-ul pentru a trimite si primii date de la codul PHP scris de noi. Setam id-ul userRequest si ii dam URL-ul catre scriptul de PHP. Ca si metoda de trimitere a informatiilor alegem POST. (am putea alege GET insa atunci ar trebui sa schimbam si codul de php scris).
Metoda de request contine 2 variabile, username-ul si adresa de email. Valoarea pentru username este setata la valoarea text a idului cu numele de «username«, iar valoarea pentru variabila PHP _POST[“emailaddress”] este setata la valoarea atributului text al elementului cu idul “emailaddress”.
<mx:DataGrid id="dgUserRequest" x="22" y="128"
dataProvider="{userRequest.result.users.user}">
<mx:columns>
<mx:DataGridColumn headerText="User ID"
columnName="userid"/>
<mx:DataGridColumn headerText="User Name"
columnName="username"/>
</mx:columns>
</mx:DataGrid>
<mx:TextInput x="22" y="292" id="selectedemailaddress"
text="{dgUserRequest.selectedItem.emailaddress}"/>
</mx:Application>
In acest cod, am cosntruit partea grafica in care se vor afisa datele aduse din baza de date. Aici avem un DataGrid care se populeaza cu XML-ul provenit din serviceul HTTP userRequest.
XML-ul returnat arata de forma urmatoare:
<users>
<user>
<userid>1</userid>
<username>Mihai Trantea</username>
<emailaddress>mihai.trantea@i-neo.ro</emailaddress>
</user>
<user>
<userid>2</userid>
<username>Alexandru Smeureanu</username>
<emailaddress>alexandru.smeureanu@i-neo.ro</emailaddress>
</user>
</users>
