Olá pessoal. O material do Flex é uma das grandes novidades no mercado. Após a publicação de uma recente matéria no iMasters, recebi toneladas de e-mails pedindo informações sobre o Flex e resolvi explicar a importância dessa nova e robusta aplicação.

Lembram-se quando o novo Flash MX foi lançado e todos falavam sobre o RIA? Isso causou grande euforia no termo de qualidade de animação e novos conceitos, bastante vistos hoje, como os sites da Nike e Miniusa, e sites passando a usar apenas Flash. Hoje começa a nova era, tendo em vista o que o Flex está propondo, como você pode ver o gráfico abaixo.

O que e Flex?

Flex é uma nova maneira de criar aplicativos voltados para web, seja ele para webservices ou não. MXML é a nova linguagem do momento, muito similar ao HTML, mas propõe a você mais poder de decisão.

Como a própria Macromedia propôs em um e-mail que ela mandou para a comunidade de clientes e afins. "Vamos fazer um minuto de silêncio para a maneira antiga de desenvolver interfaces de websites". Veja que a mensagem é bem inovadora e suporta bem os aspectos de qualquer webdeveloper. É para estufar os olhos e curvar-se diante dela.

O Flex funciona com várias tecnologias integradas. É um Framework para linguagens robustas e para servidores de aplicação back end, da linguagem J2ME. Funciona como, por exemplo, o Apache. Caso você não tenha um servidor para aplicativos web, o Flex pode prover um para você, como no exemplo abaixo:

Em que consiste o aplicativo Flex Framework?

1) XML - Linguagem declarada sendo a nativa para programação do framework para o Flex, code nome MXML.
2) Actionscript - Integração total para a criação de robustos e interativos aplicativos voltados para web.
3) Biblioteca de classes - Consiste em uma coleção de comandos, atributos e componentes que podem ser atribuidos ao seu aplicativo Flex de forma rápida, com um conjunto completo podendo ser usado em run-time para a criação, sem a necessidade de criar desde o início o projeto.
4) IDE de desenvolvimento - Não tem um melhor que o Dreamweaver ou o Notepad.

O que é MXML?

Como respondido anteriormente, MXML significa Macromedia Extentible Mark-up Language. Ela é muito parecedia com o HTML, mas com a sintaxe do XML. Com um rico controle de informações e possibilidade de criação em tempo rápido, podendo criar uma loja em poucos minutos.

Cini funciona e qual o público alvo para começar a produzir em Flex? Primeiramente precisamos entender os conceitos da tecnologia e para isso vamos analizar os gráficos abaixo

Onde o Flex se encaixa?

O Flex se encaixa em qualquer tecnologia existente hoje voltado para a web, mas em especial para (Flash, ColdFusion), com maior aquisição de uso. Também tem suporte para ASP e JSP.

Como flex trabalha?

Você envia arquivos *.mxml para o servidor junto com os *.as (arquivos que, se tiver algum webservices conectados aos seus scripts, fazem com que o container, seja ele qual for, conecte-se aos seus arquivos vendo as especificações aceitas para o mesmo). O SOAP reage às informações enviadas e envia para o cliente o SWF, tanto para o navegador quanto para o Macromedia Central.

Você pode editar seus arquivos mxml tanto no Notepad quanto no Dreamweaver. Estarei criando esses dias uma extenção para tornar o Dreamweaver um editor de arquivos mxml. Em breve terei notícias.

Flash e Flex

Como mencionei anteriormente, a Macromedia enviou um e-mail publicitário para desenvolvedores onde dizia "Façamos um minuto de silêncio em memória a antiga interfaces de websites". O que ela quis dizer é que, com o Flex, você não precisará mais de criação por timeline. Imaginem criar pontos por pontos? Com o Flex você tem total integração com o seus filmes em flash, podendo ser criados instantaneamente. Veja um exemplo abaixo de como usar perfeitamente um filme em Flash com o Flex. Esse exemplo foi cedido para todos no site da Macromedia. Abra o seu Flash e crie um arquivo *.as. Insira o código abaixo:

class ShoppingCart { //criação da classe

var items : Array; // crio um novo array
var total : Number = 0; // com um total de 0

function ShoppingCart() { // agora irei adicionar funções ao carrinho de compras que foi a classe que criou-se
items=new Array();
}

function addItem(item : Object, qty : Number, index: Number) : Void { //ao adicionar o item, quantidade, numero ele me retorne um valor verdadeiro ou falso
qty=qty==null?1:qty;
index=index==null?0:index;
items.addItemAt(index, {id: item.id, name: item.name, description: item.description, image: item.image, price: item.price, qty: qty==null?1:qty});
total+=parseFloat(item.price)*qty;
}

function removeItemAt(index) { //função para a remoção de itens do carrinho de compras
total-=parseFloat(items[index].price)*items[index].qty;
items.removeItemAt(index);
}

function getItemCount() : Number { // contar quantos itens tem no carrinho
return items.length;
}

function getTotal() : Number { //calculo total do carrinho
return total;
}

}

Agora salve o seu arquivo. Abra o Notepad e crie os seguintes arquivos com os códigos em mxml.

Cartview.mxml

<?xml version="1.0" encoding="utf-8"?>

<!-- Costumização do componente para a mostragem ao usuário-->

<mx:Panel xmlns:mx="http://www.macromedia.com/2003/mxml"
title="Shopping Cart"> <!-- criação do titulo -->

<!-- The ActionScript code for this class is externalized in a separate .as file for better readability -->
<mx:Script source="CartView_script.as"/>

<mx:Metadata>
[Event("itemSelected")]
[Event("checkOut")]
</mx:Metadata>

<mx:NumberFormatter id="price"
precision="2"
rounding="none"
decimalSeparatorTo="."
thousandsSeparatorTo=","
useThousandsSeparator="true"/>

<mx:DataGrid id="dg"
dataProvider="{dataObject.items}"
change="dataGridChange(event.target.selectedItem)"
widthFlex="1"
heightFlex="1"
dragEnter="doDragEnter(event)"
dragExit="doDragExit(event)"
dragDrop="doDragDrop(event)"
dragOver="doDragOver(event)">
<mx:columns>
<mx:Array>
<mx:DataGridColumn columnName="name" headerText="Name" width="180"/>
<mx:DataGridColumn columnName="qty" headerText="Qty" width="50" textAlign="right" marginRight="4"/>
<mx:DataGridColumn columnName="price" headerText="Price" width="60" textAlign="right" marginRight="4"/>
</mx:Array>
</mx:columns>
</mx:DataGrid>

<mx:ControlBar id="ctrl">
<mx:Button label="Delete" enabled="{dg.selectedItem!=null}" width="75" click="removeItem()"/>
<mx:Button label="Checkout" width="75" enabled="{dataObject.total!=0}" click="dispatchEvent({type: 'checkOut'})"/>
<mx:Label styleName="price" text="Total: ${price.format(dataObject.total)}"/>
</mx:ControlBar>

</mx:Panel>

Salve o seu arquivo criado como cartview.mxml, no mesmo diretório do criado shoppingcart.as. Agora crie um arquivo com o código abaixo e dê o nome a ele de flexstore.mxml

Flexstore.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*"
initialize="initApp()"
verticalGap="0"
pageTitle="FlexStore">

<!-- The ActionScript code for this class is externalized in a separate .as file for better readability -->
<mx:Script source="flexstore_script.as"/> <!-- Style sheet used in this application -->
<mx:Style source="flexstore.css"/> <!-- A pure ActionScript class (ShoppingCart.as) used to keep track of items in the ShoppingCart.
(A Model class in the MVC architecture used in this application) -->
<ShoppingCart id="cart"/>

<!-- The product list is retrieved using a named web service. Using a named service, You don't have to hardcode
the web service details in your application. The mapping between the logical name and the service details
(such as the wsdl url) is defined in WEB-INFflexflex-config.xml.
-->

<mx:WebService id="catalogWS" serviceName="FlexStoreCatalogWS">
<mx:operation name="getList" result="selectedItem=catalogWS.getList.result[0]"/>
</mx:WebService>

<!-- We bind a Model to the array of products returned by the web service. In the application, we can then refer to the
product list using the "catalog" identifier (instead of "catalogWS.getList.result"). This isolates the application
from the specific data access strategy used to retrieve data -->
<mx:Model id="catalog">
{catalogWS.getList.result}
</mx:Model>

<mx:VBox widthFlex="0">

<mx:Label text="Flex Store" styleName="appTitle"/>

<mx:HBox horizontalGap="4" width="860" height="548">

<mx:Panel id="main" title="Product Catalog" width="484">

<mx:ViewStack id="bodyStack" changeEffect="Fade">

<!-- A custom component (ThumbnailView.mxml) that displays the list of products in a Thumbnail view:
This is the view displayed when you start the application. When the user clicks a product
(change event), we store the selected item in the selectedItem instance variable of this application -->
<ThumbnailView id="thumbView"
label="Product Catalog"
dataObject="{catalog}"
change="selectedItem=event.target.selectedItem"/>

<!-- A custom component (GridView.mxml) providing another way (DataGrid) to look at the same data -->
<GridView id="gridView"
dataObject="{catalog}"
change="selectedItem=event.target.selectedItem"/>

<!-- A custom component (Checkout.mxml) that provides the user interface for checking out -->
<Checkout id="checkoutView" cartData="{cart}"/>

</mx:ViewStack>

<mx:ControlBar height="45">

<mx:ViewStack id="controlStack">

<mx:HBox id="thumbCtrl" verticalAlign="middle">
<mx:Label text="Price range"/>

<!-- The slider does not have min and max labels so we'll use an HBox to add them -->
<mx:HBox horizontalGap="0" verticalAlign="middle" marginTop="6">
<mx:Label text="0"/>
<!-- this spacer pulls the min label closer to the slider, it's a hack -->
<mx:Spacer width="-7"/>
<Slider id="priceSlider" minimum="0" maximum="150" tickInterval="10" snapInterval="1"
width="150" thumbCount="2"
initialize="priceSlider.value = [0, 150];"
change="thumbView.filter(priceSlider.value[0], priceSlider.value[1])"/>
<mx:Label text="150"/>
</mx:HBox>

<mx:Label text="Sort by"/>
<mx:ComboBox width="70" change="sort(event.target.selectedItem)">
<mx:dataProvider>
<mx:Array>
<mx:String>Name</mx:String>
<mx:String>Price</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:HBox>

<mx:HBox id="gridCtrl"/>

<mx:HBox id="checkoutCtrl">
<mx:Button label="Complete Purchase" click="checkoutView.confirmOrder()"/>
</mx:HBox>

</mx:ViewStack>

<mx:Spacer widthFlex="1"/>

<mx:HBox horizontalGap="0">
<mx:Image source="{currentView=='thumb'?thumbOn:thumbOff}" mouseDown="changeView('thumb')"
mouseOver="event.target.source=thumbRoll" mouseOut="event.target.source=currentView=='thumb'?thumbOn:thumbOff"/>
<mx:Image source="{currentView=='grid'?listOn:listOff}" mouseDown="changeView('grid')"
mouseOver="event.target.source=listRoll" mouseOut="event.target.source=currentView=='grid'?listOn:listOff"/>
</mx:HBox>

</mx:ControlBar>

</mx:Panel>

<mx:VBox widthFlex="1">

<mx:Canvas id="topCanvas" widthFlex="1" vScrollPolicy="off">
<!-- A custom component (ProductDetail.mxml) that displays details for the product selected in ThumbnailView or GridView.
The dataObject attribute of the component is bound to the selectedItem instance variable ensuring that the ProductDetail component is automatically notified
when the selected item changes -->
<ProductDetail id="productDetail" dataObject="{selectedItem}" shoppingCart="{cart}" width="370" height="330" vScrollPolicy="off"/>
<PanelControl id="statusTop" width="{productDetail.width}" resizeEvent="slide(event)"/>
</mx:Canvas>

<mx:Canvas id="bottomCanvas" vScrollPolicy="off">
<!-- A custom component (CartView.mxml) that displays the content of the shopping cart. This is a good example of separation between the user interface logic
and the data in your application. This component focuses exclusively on the user interface aspect of the shopping cart.
The ShoppingCart class is responsible for the data aspect. The dataObject attribute of the Cartview component
is bound to cart (the instance of ShoppingCart declared at the top of this file) -->
<CartView id="cartView" dataObject="{cart}" width="370" height="{542-productDetail.height}"
itemSelected="selectedItem=event.target.selectedItem"
checkOut="changeView('checkout')" vScrollPolicy="off"/>
<PanelControl id="statusBottom" width="{cartView.width}" resizeEvent="slide(event)"/>
</mx:Canvas>

</mx:VBox>

</mx:HBox>

<mx:HBox>
<mx:Spacer widthFlex="1"/>
<mx:Link label="Product images and descriptions courtesy of ThinkGeek" click="getUrl('http://www.thinkgeek.com', '_blank')"/>
</mx:HBox>

</mx:VBox>

</mx:Application>

Salve o arquivo e envie para o seu diretório de scripts no Flex.

Teste. Você tem, automaticamente, uma loja toda montada sem precisar abrir um documento no Flash para criar passo a passo a interface. Com apenas com um pouco de paciência você constrói, de forma perfeita, a sua interface para a sua loja virtual.

Fontes para aprendizagem

Como todos estão eufáticos para dominarem a nova tecnologia, asseguro que o melhor lugar para começar é o website da criadora: a mãe do software. Veja os links abaixo e começe agora a praticar todo o conteúdo que nelas existem: www.macromedia.com/flex.

Para o pessoal que quer entrar nessa nova tecnologia, estou organizado um grupo de discursões em Flex.

Lista de links:

Lista de discursão Oficial Brasileira para Flex:
http://br.groups.yahoo.com/group/flex-brasil/

Website da Macromedia em Inglês para o Flex:
www.macromedia.com/flex

Informações com mais artigos técnicos para desenvolvedores brasileiros:
www.igorcosta.com/flex

Informações para desenvolvedores com documentação:
livedocs.macromedia.com/flex

É isso ai pessoal! Espero que tenham gostado da matéria. Qualquer coisa, mandem e-mails. Estarei sempre atencioso a qualquer novidade.

Abraços!