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!