Requisitos:
Adobe Flex Builder 3
Clique
aqui para obter os arquivos que foram usados no tutorial.
Clique
aqui para obter uma demonstração do tutorial, veja-o em ação.
Requisitos Básicos:
Você precisa de uma noção básica da
linguagem de programação em Actionscript 3, e básica noção do Flex Framework e
Flex Builder 3.
Criando o projeto
A primeira coisa que iremos fazer é abrir o Flex Builder e
criar um novo projeto que irá rodar como uma aplicação na web. A configuração
do projeto deve ser igual à imagem abaixo. Após isso, clique em
Finish.
Criando o layout
Agora que temos o projeto do Flex configurado, é a hora de
começar a criar o layout. Na aplicação nós teremos apenas dois componentes.
Eles são botões para o usuário perguntar e uma lista para exibir os
resultados. Agora, ache o menu ‘Components’, que provavelmente estará localizado
na parte inferior esquerda da tela, e arraste o componente ‘Button’ para fora
da cena. Finalmente, configure a propriedade para ‘Get Lastest Photos’.
Então, vá à seção ‘Layout’ do painel de propriedades
enquanto o botão que você criou é selecionado. Você deve ver uma seção chamada
de ‘Constraints’, certifique-se que o canto superior esquerdo das duas caixas
de verificação estão selecionadas. Isto garante que não importa o quanto a
aplicação é redimensionada, o botão ficará na parte superior esquerda da
janela. Isto é como a seção
‘Constraints’ deve estar parecida quando tiver acabado.
Em seguida, arraste uma caixa de listagem para o componente
na cena e defina as configurações do “Constraints” como mostrado abaixo.
Agora, vamos para o
código! HTTPService.
Uma vez que tenha feito isso, vá ao Source view. Adicione
este código acima da Lista componente.
<mx:HTTPService url="http://api.flickr.com/services/feeds/photos_public.gne" id="photoSearch" result="traceData(event)"/>Este código é o que obtém as últimas fotos
adicionadas ao Flickr e faz que já estejam disponíveis para seu aplicativo Flex
pronto para uso. O primeiro parâmetro é UEL, e este é apenas o URL do feed que
você quer chegar. Esse poderia ser um feed XML, um feed Atom ou muitos e muitos
tipos de feed. O próximo parâmetro é a ID e este é somente um nome, você pode
usá-lo de referência para o HTTPService. Você pode achar que este nome é uma
variável. O último é um manipulador de eventos que é funcional quando o pedido
é realizado e os dados estão em mãos. O nome da função é ‘traceData’ e é um
evento que passa itens, que se você estiver familiarizado com Actionscript,
você deve saber o que é isso.
Adicionando o
Actionscript.
Como todas as aplicações Flex, para adicionar o ActionScript
para uma aplicação flex você adiciona a tag <mx:Script>. Aqui está como
parecerá.
<mx:Script>
<![CDATA[
// Actionscript code goes here.
]]>
</mx:Script>Este é o modelo básico para adicionar o ActionScript. Aqui
está o código final que iremos colocar no aplicativo. Adicione isso acima
de todos os outros códigos, mas abaixo da tag <mx:Application> . Dê uma
olhada e eu irei explicar.
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var photosArray:ArrayCollection;
private function runSearch(e:MouseEvent):void
{
photoSearch.send();
}
private function traceData(e:ResultEvent):void
{
photosArray = e.result.feed.entry as ArrayCollection;
}
]]>
</mx:Script>Lá vamos nós à
parte substancial do aplicativo. Aqui está o lowdown sobre o que se passa.
- As
classes necessárias são importadas, então nós podemos usar esta funcionalidade
no aplicativo Flex. - Podemos criar uma variável para trancar os dados da fotografia que obtemos do
HTTPService (note que, na verdade, não baixa as fotos para o aplicativo Flex,
somente a localidade do arquivo da foto), e este é um tipo de Array
collection que significa apenas que é um Array com os métodos e propriedades
extras adicionados a ele. Veja mais aqui.
Você vai notar que existe o texto ‘[Bindable]’ acima da variável. Isso é para
deixar o Flex sabendo que queremos ser capazes de acessar a variável fora da
nossa tag ‘<mx:Script>’. - Depois, temos uma função denominada
‘runSearch’ que é usada para dizer ao HTTPService ir e obter os dados do feed
do Flickr. Mais tarde iremos juntar isso ao botão que foi arrastado para fora, para que esta função seja executada toda vez que o botão for clicado. - Finalmente temos umas função nomeada
‘traceData’, agora isso coloca os dados recebidos do feed do Flickr dentro da
variável, ‘PhotosArray’.
Isso é tudo que é necessário para este
aplicativo.
Adicionando
funcionalidade para o botão e a lista
Como eu mencionei anteriormente, temos uma função que
precisa ser executada quando o botão que criamos é clicado. A forma como
fazemos isso é adicionando este parâmetro para o código do botão. O que isso faz é adicionar um event listener ao botão, o que significa que cada vez que o
botão é clicado, em seguida, esta função será executada.
click="runSearch(event)" Também, no List Component você precisa mudar isso para ficar parecido. Aqui está como o código final do componente da lista deve
parecer.
<mx:List itemRenderer="Photos" dataProvider="{photosArray}" id="photoList" enabled="true" bottom="10" left="10" top="50" borderThickness="1" borderStyle="solid" right="10"></mx:List>Agora você vai ver que o Code List mudou um pouco. O que
temos feito é dizer a ela para fazer uma cópia do nosso componente personalizado
que vamos criar e usá-lo para cada item na lista. O próximo parâmetro diz ao
componente List para ser preenchido com os dados do banco de dados que temos a
partir do HTTPService. Em seguida, como com o HTTPService, temos um id.
Criando uma lista de
componente customizada
A última parte desse tutorial é criar o componente
personalizado que será usado para mostrar uma simples foto com um dado
adicional perto dele. A forma como
funciona, na lista, é que para cada fotografia obtida, uma cópia do
componente é adicionada à lista. No final você é deixado com uma lista de cada
um desses componentes personalizados exibindo um componente diferente. Agora, vamos criar o componente.
Vá em File > New
> MXML Compornent.
Você verá uma caixa de dialogo que deve ser
como a da imagem.
É bastante óbvio o que tudo faz aqui, exceto a propriedade
‘Based on’. Isto significa que ela herda o layout do componente Hbox. Então lá
vamos nós, agora como um componente básico MXML. Componentes personalizados
podem ser criados através da utilização de Actionscript, veja
aqui.
Adicionando funcionalidade
ao componente
Agora nós temos um componente personalizado em branco. Aqui
está o código que precisamos colocar dentro do Source View antes da tag
<?xml>.
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:net="flash.net.*">
<net:URLRequest id="photoURL" url="{data.link[1].href}"/>
<net:URLRequest id="profileURL" url="{data.author.uri}"/>
<mx:Image width="224" height="154" source="{data.link[1].href}"/>
<mx:Grid width="100%">
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%">
<mx:Text text="Authors Name: {data.author.name}" width="30%"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%">
<mx:Text text="Image Title: {data.title}" width="30%"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%">
<mx:Text text="Image Type: {data.link[1].type}" width="30%"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Button label="Goto Original Image." click="navigateToURL(photoURL)" width="200" />
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Button label="Goto User Profile." click="navigateToURL(profileURL)" width="200" />
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:HBox>Este código é bastante simples se você tiver um
entendimento básico de Flex. Tudo o que fazemos é criar um componente Grid e
adicionar vários itens nele. A única coisa que merece ser explicada é a
propriedade do ‘text’ do componente Texto. As {} (chaves) estão lá para dizer ao Flex que
queremos ter acesso aos dados a partir de uma variável, que é chamada de ‘data
binding’. Na etapa “Adicionando funcionalidade ao
botão” você viu que acrescentamos um parâmetro “dataProvider” para a caixa de listagem, que permitiu ao componente personalizado acessar os dados a partir do HTTPService, então, agora podemos obter a URL da imagem, do
autor e de todos os outros dados do feed do Flickr, direito de dentro do
arquivo Photo.mxml! Tudo o que fazemos agora no text property é obter os
respectivos dados a partir do feed.
Agora, todos os itens no componente List serão uma cópia disso, cada um representa uma foto diferente. Os
dois GridItems do final são um pouco diferentes, pois contêm nos botões o link externo
para a imagem original e perfil de usuário, respectivamente.
Adicionando o skins
personalizados
Agora, na última parte deste tutorial, vamos adicionar os
skins personalizados que você vê na demonstração do aplicativo. Há duas
maneiras pelas quais você pode personalizar seu skin no Flex app. Um é para
criar suas próprias skins ou simplesmente baixar gratuitamente um conjunto de
um site como Scalenine.com. Agora,
porque você está criando skins em seu próprio tutorial, eu vou seguir
em frente e fazer download de uma skin ScaleNine. Então, vá para o
Scalenine.com e para este tutorial eu
vou utilizar a skin “Undefined Skin One”, que, quando vi, estava na
seção destaque da página inicial. Agora você deve ver uma seta apontando para baixo, logo abaixo do
título da skin. Clique nela e você obterá um Arquivo
ZIP contendo todos os arquivos necessários para a skin. Descompacte-o e copie
para o diretório ‘src’.
Daqui para a frente eu estou assumindo que você está
trabalhando com a skin que mencionei anteriormente pois pode variar de skin
para skin. Localize o “CSS” e “assets” e arraste-os para a
pasta Flex Builder, em seu diretório ‘src’.
Agora, o arquivo .CSS na pasta “css” (onde
mais?) contém informações do style de quase todos os componentes do
Flex framework, mas estamos utilizando apenas dois, por isso seria desnecessário
dispor de todas as informações extra dos componentes style em nosso projeto. Para resolver isso, tudo o que temos que fazer é criar um novo arquivo .CSS e colocá-lo na pasta ‘CSS’ e
copiar e colar as informações do style que precisamos do arquivo original em um
novo style (CSS). Então, para fazer isso, crie um arquivo chamado ‘style.css’ e
cole o seguinte código nele.
CursorManager
{
busy-cursor: Embed("assets/UndefinedPersonalSkinLoad.swf");
}
Application
{
font-family: franklin;
font-size: 11;
color: #333333;
background-gradient-alphas: 0, 0;
background-color: #666666;
theme-color: #333333;
font-weight: normal;
background-image: Embed("/assets/general/fondo3.jpg");
background-size: "100%";
modal-transparency-color: #000000;
modal-transparency-blur: 2;
}
.buttonOfficial
{
up-skin: Embed("/assets/botones/boton.png", scaleGridTop="6", scaleGridBottom="14", scaleGridLeft="6", scaleGridRight="14");
over-skin: Embed("/assets/botones/boton1.png", scaleGridTop="6", scaleGridBottom="14", scaleGridLeft="6", scaleGridRight="14");
down-skin: Embed("/assets/botones/boton2.png", scaleGridTop="6", scaleGridBottom="14", scaleGridLeft="6", scaleGridRight="14");
disabled-skin: Embed("/assets/botones/boton_dis.png", scaleGridTop="6", scaleGridBottom="14", scaleGridLeft="6", scaleGridRight="11");
color: #e8e8e8;
font-family: franklin1;
padding-left: 6;
padding-right: 6;
text-roll-over-color: #e8e8e8;
text-selected-color: #cccccc;
}
/*
------------------------------------------------------------------------
LIST
------------------------------------------------------------------------
*/
List
{
font-family: franklin;
font-weight: normal;
font-size: 11;
color: #333333;
text-roll-over-color: #333333;
text-selected-color: #333333;
roll-over-color: #e4e4e4;
selection-color: #cdcdcd;
alternating-item-colors: #f8f8f8, #ffffff;
}
ScrollBar
{
up-arrow-up-skin: Embed("/assets/botones/Scroll_up.png" );
up-arrow-over-skin: Embed("/assets/botones/Scroll_up.png");
up-arrow-down-skin: Embed("/assets/botones/Scroll_up1.png");
down-arrow-up-skin: Embed("/assets/botones/Scroll_down.png" );
down-arrow-over-skin: Embed("/assets/botones/Scroll_down.png");
down-arrow-down-skin: Embed("/assets/botones/Scroll_down1.png");
thumb-up-skin: Embed("/assets/botones/Scroll_barra.png", scaleGridTop="3", scaleGridBottom="7", scaleGridLeft="2", scaleGridRight="11");
thumb-over-skin: Embed("/assets/botones/Scroll_barra1.png", scaleGridTop="3", scaleGridBottom="7", scaleGridLeft="2", scaleGridRight="11");
thumb-down-skin: Embed("/assets/botones/Scroll_barra2.png", scaleGridTop="3", scaleGridBottom="7", scaleGridLeft="2", scaleGridRight="11");
track-skin: Embed("/assets/botones/Scroll_fondo.png", scaleGridTop="17", scaleGridBottom="28", scaleGridLeft="3", scaleGridRight="12");
/*track-down-skin: Embed("/assets/botones/Scroll_fondo.png", scaleGridTop="26", scaleGridBottom="28", scaleGridLeft="8", scaleGridRight="9");*/
thumb-icon: Embed("/assets/botones/Scroll_icon.png");
}Aqui você pode ver que temos o código para a lista e
para os button components. Temos também o código para a barra de rolagem. Isto porque a lista
de componentes, quando contém mais do que pode mostrar visualmente, usa uma
barra de rolagem para que possamos percorrer o conteúdo. Isto é o que o style ‘ScrollBar’ é, para estilizar a barra de rolagem!
A última coisa a fazer é adicionar essa linha para o início da sua aplicação
Flex.
<mx:Style source="css/style.css"/>Tudo o que isso diz para o Flex fazer é importar a style sheet
que contém todas as informações. Observe que todo o crédito para a skin do Flex
utilizado neste tutorial vai para Undefined.
*
Publicado originalmente em http://www.thetechlabs.com/tutorials/flex/create-and-skin-a-photo-gallery-with-flickr-flex-and-actionscript-30/
De 0 a 10, o quanto você recomendaria este artigo para um amigo?