Nota: Essa matéria é seguência da matéria “Conectando a dados“
Pra iniciar nosso exemplo vamos criar a tabela, conforme script abaixo:
CREATE TABLE users(
userid INT NOT NULL ,
username VARCHAR( 255 ) NOT NULL ,
emailaddress VARCHAR( 255 ) NOT NULL
)
Próximo, você criará o script PHP que adiciona usuários e exporta o XML que a aplicação Flex usará. O script é relativamente simples e consiste em 25 linhas de código. Note o uso da função quote_smart como uma melhor prática para ajudar o usuário a verificar o input, de acordo com o site da web PHP.NET.
<?php
define( “DATABASE_SERVER”, “localhost” );
define( “DATABASE_USERNAME”, “root” );
define( “DATABASE_PASSWORD”, “” );
define( “DATABASE_NAME”, “sample” );
//Conecta ao database
$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
mysql_select_db( DATABASE_NAME );
function quote_smart($value)
{
// Stripslashes
if (get_magic_quotes_gpc()) {
$value = stripslashes($value);
}
// se não for integer
if (!is_numeric($value)) {
$value = “‘” . mysql_real_escape_string($value) . “‘”;
}
return $value;
}
if( $_POST[”emailaddress”] AND $_POST[”username”])
{
//Adiciona o usuário
$Query = sprintf(”INSERT INTO users VALUES (”, %s, %s)”, quote_smart($_POST[’username’]), quote_smart($_POST[’emailaddress’]));
$Result = mysql_query( $Query );
}
//Retorna uma lista de todos os usuários
$Query = “SELECT * from users”;
$Result = mysql_query( $Query );
$Return = “<users>”;
while ( $User = mysql_fetch_object( $Result ) )
{
$Return .= “<user><userid>”
$Return .= $User->userid.”</userid><username>”;
$Return .= $User->username.”</username><emailaddress>”;
$Return .= $User->emailaddress.”</emailaddress></user>”;
}
$Return .= “</users>”;
mysql_free_result( $Result );
print ($Return)
?>
Aqui é uma explicação rápida do código PHP. A variável $_POST é povoada com valores da aplicação Flex com dois campos exigidos: Emailaddress e username. Se um usuário entra com informações para ambos, o PHP adiciona o usuário ao banco de dados. Depois disto, o PHP retorna uma lista de usuários no formato XML
Nota: Você não pode passar variáveis de PHP para as aplicações Flex diretamente. Você deve codificá-las em XML primeiro. Por obstração a interface de usuário da recuperação de dados, você pode facilmente mudar como você exibe dados. Por exemplo, você pode usar este mesmo script de PHP para passar dados para uma versão de telefone celular da mesma aplicação. Tudo que você precisaria para isto é escrever a aplicação front-end, a parte back-end que é o script PHP permaneceria o mesmo.
Até agora, tudo deve ser familiar para você. Você tem um script PHP e um banco de dados de MySQL. Agora é hora de começar a construir a interface para a aplicação.
Aplicações Flex usa uma combinação de ActionScript 3.0 e MXML. ActionScript é baseado em ECMAScript (semelhante a JavaScript), então deve ser familiar para desenvolvedores da web. MXML é uma engine de layout baseado em XML para Aplicações Flex. Essencialmente, você atinge a interface de usuário usando XML, e escreve a interface de usuário usando ActionScript. O MXML para a interface é, novamente, muito simples (só 26 linhas):
<?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>
Vamos examinar cada linha em detalhe. Estas são as primeiras duas linhas de cada aplicação Flex:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns=”*” layout=”absolute” reationComplete=”userRequest.send()”>
A primeira linha declara que isto é um documento XML. A segunda linha declara que isto é uma Aplicação, fornece o namespace para componentes de MX, declara o layout para ser absoluto (que significa que você pode posicionar itens na coordenadas exatas x e y. Outras opções são layouts horizontais ou layouts verticais), e finalmente creationComplete=”userRequest.send()” especifica aquela em conclusão de carregar a interface de usuário, a aplicação chama a função send() no elemento de MXML com o iD userRequest.
A seção seguinte fixa o HTTPService para enviar e receber dados do script de PHP criado por você:
<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>
Nesta seção, você fixa o iD para userRequest, e forneçe um URL para o script PHP. Você fixa o método submit para POST (Você também pode usar GET, entretanto você deve mudar as variáveis no script PHP). O pedido propriamente contém duas variáveis, username e emailaddress. Este código também fixa o valor para username para o atributo de texto do elemento com iD username (username.text) e o valor para a variável PHP _POST[”emailaddress”] é fixado para o atributo de texto do elemento com iD emailaddress (emailaddress.text). Os { and } parênteses ligam as variáveis para o valor dos elementos de interface de usuário.
Para ser claro, se você mudasse <username> para <user_name>, você teria que mudar a variável de PHP para _POST[”user_name”]. Se você mudar {username.text} para {user_name.text}, você teria que modificar seu MXML: Você teria que mudar o elemento com o ID de username para user_name.
Próximo, você construirá uma formulário simples:
<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>
Note que você pode atingir a coordenada exata x e y do formulário e deixar sua largura exata. Então, dois HBoxes cerca uma tag label e text input, permitindo-os fluir da esquerda para a direita, um acima do outro. Finalmente, seu botão Submit aparece no fim do formulário. Quando um usuário clicar no botão, a aplicação chama a função send() do elemento com ID userRequest (neste caso, é o elemento de HTTPService).
Agora que você criou a funcionalidade que submete novas entradas para o banco de dados, como você faz para exibí-los? Use o código seguinte:
<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>
Neste caso, você tem um componente DataGrid que será povoado com o XML do userRequest HTTPService. Você retorna para um documento XML. Neste caso, você liga o componente DataGrid para os elementos de usuário no documento XML que é retornado. O retorno XML olha algo como o seguinte:
<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>
Note que você liga aos elementos reais que são retornados, não o elemento que está ao redor deles.
O componente DataGrid exibe o usuário iD e nomes de usuário das pessoas no banco de dados. Eu decidi não mostrar o endereço de e-mail no datagrid, mas você pode adicionar outra coluna com aquelas informações. Note que o elemento columnName precisa mapear diretamente os elementos do XML. O elemento de DataGrid cuidará de permitir a seus usuários para classificar e destacar as filas como elas são selecionados—você não precisa fazer nada!
Finalmente, você tem um elemento de TextInput que mostra ao endereço de e-mail do usuário selecionado, dgUserRequest.selectedItem.emailaddress, e então uma tag de XML que fecha a aplicação.
Isto tudo. Você tem uma aplicação de Flex simples que submete e recupera dados de um banco de dados de MySQL, usando PHP como um back-end.
