Stefan Horochovec
Possuo 20 anos de experiência no desenvolvimento de soluções web. Nos últimos 10 anos tenho atuado como Arquiteto de Soluções auxiliando empresas a desenvolver projetos para nuvem com um grande foco em Java EE como tecnologia voltada ao backend, Angular e React voltada ao frontend e Flutter voltado ao desenvolvimento móvel. Com relação a plataformas na nuvem, atuo com projetos consumindo serviços da AWS, Azure, e GCP.

AIR — Criando uma aplicação com atualização automática — Parte II

Segunda parte…

Na continuação podemos partir para o desenvolvimento da aplicação em si. Eu criei um componente chamado Posts.mxml, ele encontra-se dentro da package: br.com.horochovec.view.Posts. A idéia desse componente é que ele seja responsável por consumir o Feed sobre Flex do site iMasters, passe algumas informações para um Grid, e assim, o usuário possa listar os posts do site e obter mais informações sobre ele.

Esse componente estende de uma TitleWindow, dentro dele possui um VBox, AdvancedDataGrid, e um Canvas, que contem dentro dele um Label, um TextArea e um LinkButton.

O componente VBox é o container que agrupará todos os outros componentes visuais desse componente.

Ainda no componente Posts.mxml, eu possuo um HTTPService. Esse HTTPService é responsável por consumir o Feed da iMasters em seu momento de criação. Ou seja, quando o componente Posts.mxml for criado, irá consumir o HTTPService para que busque todos os artigos disponíveis no site na seção Flex. O formato do consumo das informações será através de e4x.

O AdvancedDataGrid tem apenas uma única coluna, ela é responsável por imprimir o titulo do artigo. Caso o usuário opte por clicar no item do Grid, eu solicito para a aplicação que me mostre no quadro abaixo (composto por um Canvas, Label, TextInput e LinkButton) algumas informações do post selecionado.

Segue o fonte na integra do componente desenvolvido.

xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute"
width="500"
height="250"
showCloseButton="true"
creationComplete="creationCompleteHandler(event);"
close="onCloseHandler(event);"
title="Feeds Imasters - Seção Flex">



import flash.desktop.NativeApplication;
import mx.events.CloseEvent;
import mx.events.FlexEvent;
import mx.rpc.events.ResultEvent;

/**
* Dataprovider do grid
*/
private var xmlList : XMLList;

/**
* Evento disparado na finalização da construção do componente
* Responsavel por iniciar o HTTPService para leitura do feed
*/
private function creationCompleteHandler(event:FlexEvent) : void
{
this.service.send();
}

/**
* Evento disparado no termino com sucesso da leitura do HTTPService
* Responsavel por adicionar ao grid o dataProvider
*/
private function serviceHandler(event:ResultEvent) : void
{
var result : XML = new XML(event.result);
xmlList = result..item;
this.grid.dataProvider = xmlList;
}

/**
* Evento disparado no fechar da TitleWindow, ele é responsável por fechar a aplicação
*/
private function onCloseHandler(event:CloseEvent) : void
{
NativeApplication.nativeApplication.exit();
}

/**
* Quando ocorrer um click no grid, o botao para abrir o link do post
* sera habilitado, e coloca os textos para os componentes do autor
* e descrição do post
*/
private function onClickGridHandler(event:MouseEvent) : void
{
this.btnLink.visible = true;
this.autor.text = ((this.grid.selectedItem) as Object)['author'];
this.descricao.text = ((this.grid.selectedItem) as Object)['description'];
}

/**
* Click do botao para visualizar o artigo
*/
private function onBtnLinkClickHandler(event:MouseEvent) : void
{
navigateToURL(new URLRequest(((this.grid.selectedItem) as Object)['guid'].toString()), "_blank");
}

]]>


showBusyCursor="true" resultFormat="e4x"
result="serviceHandler(event)"/>


bottom="5" left="5" right="5" top="5"
height="50%" width="100%"
click="onClickGridHandler(event);">







borderStyle="none" selectable="false" mouseFocusEnabled="false"
mouseEnabled="false"/>
id="btnLink" click="onBtnLinkClickHandler(event);"/>

Algumas considerações interessantes sobre o componente acima:

  • creationComplete=”creationCompleteHandler(event);” Quando o componente tiver sido criado, ele irá disparar a função creationCompleteHandler(); que será responsável por iniciar o consumo do HTTPService.
  • onCloseHandler(event:CloseEvent); Neste evento a classe NativeApplication é acionada sendo responsável por fechar a aplicação pelo botão de fechar da TitleWindow, componente base para o componente Posts;
  • serviceHandler(event:ResultEvent); Evento responsável por filtras as informações que o HTTPService consumiu e as retornaram como string. Essas informações foram passadas para um XMLList aonde este XMLList será o dataProvider do Grid.

Com isso temos um componente baseado em uma TitleWindow, que é capaz de buscar informações de um feed do site da iMasters, através de HTTPService e disponibilizar as informações na tela.

Dentro da minha aplicação principal, eu possuo a definição de alguns estilos, para que o fundo transparente funcione sem nenhum transtorno.

Para uma melhor interpretação, irei disponibilizar todo o fonte do main, depois comentando cada uma das observações necessárias.

xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:app="br.com.horochovec.view.*"
width="500" height="250"
layout="absolute"
paddingRight="0"
paddingLeft="0"
creationComplete="onCreationCompleteHandler(event);">


/**
* Estilo para a aplicação possuir o background transparente
*/
Application
{
background-color:"";
background-image:"";
padding: 0px;
}



import air.update.events.DownloadErrorEvent;

import air.update.events.UpdateEvent;
import air.update.ApplicationUpdaterUI;
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.events.FlexEvent;

/**
* Objeto para atualizacao automatica
*/
private var autoUpdater : ApplicationUpdaterUI = new ApplicationUpdaterUI();

/**
* Evento disparado na finalização da aplicação para adicionar um Listner de MouseDown
* no componente principal da aplicação
*/
private function onCreationCompleteHandler(event:FlexEvent) : void
{
this.main.addEventListener( MouseEvent.MOUSE_DOWN, onMouseDownHandler );
this.autoUpdateInit();
}

/**
* Funcao para configuracao do inicio da atualizacao
*/
private function autoUpdateInit() : void
{
this.autoUpdater.updateURL = "http://www.horochovec.com.br/air/update-config.xml";
this.autoUpdater.isCheckForUpdateVisible = false;
this.autoUpdater.addEventListener(UpdateEvent.INITIALIZED, onUpdateApp);
this.autoUpdater.addEventListener(ErrorEvent.ERROR, onErrorUpdate);
this.autoUpdater.initialize();
}

/**
* Evento de inicializacao de atualizacao
*/
private function onUpdateApp(event:UpdateEvent) : void
{
this.autoUpdater.checkNow();
}

/**
* Evento em caso de erro na atualizacao
*/
private function onErrorUpdate(event:ErrorEvent) : void
{
Alert.show(event.toString());
}

/**
* Possibilita arrastar o componente na janela atual
*/
private function onMouseDownHandler(event:MouseEvent) : void
{
stage.nativeWindow.startMove();
}
]]>
Algumas  considerações:
  • creationComplete=”onCreationCompleteHandler(event);” No termino da criação da aplicação, a função onCreationCompleteHandler() será disparada, ela é responsável por adicionar um EventListner de MouseDown em meu componente Posts, e também executa a função autoUpdateInit(), que será responsável por eu iniciar meu objeto de atualização automática;
  • function autoUpdateInit();Nessa função ocorre a configuração do objeto para efetuar a atualização automática. O primeiro atributo informado é a URL do arquivo XML que será consultado para verificar se existe uma atualização disponível para a aplicação (o formato do arquivo será informado na sequência).O segundo atributo informado é para que seja visível a busca por novas atualizações, esse atributo está informado como true, para que possamos acompanhar a busca por novas atualizações e ver se realmente está funcionando a implementação.Em seguida, dois EventListner são adicionados ao objeto, um quando ele for inicializado, e outro caso aconteça algum erro.Por fim, a função inicializa o objeto de atualização através da função initialize();
  • function initialize(); Essa função é responsável por solicitar ao componente de atualização que verifique na URL informada se o aplicativo possui uma versão nova.
Dessa forma, terminamos a segunda parte do artigo. Até a próxima!
Share

You may also like...

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *