• Home
  • Sobre mim
Blue Orange Green Pink Purple

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

Posted in AIR, Flex. on sexta-feira, agosto 14th, 2009 by Stefan Horochovec Tags: AIR, Auto-Update, Flex
ago 14

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.

?Download Posts.mxml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow 
	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">
 
	<mx:Script>
		<![CDATA[
 
			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");
			}
 
		]]>
	</mx:Script>
 
	<mx:HTTPService id="service" url="http://imasters.uol.com.br/feed/secao/flex" 
					showBusyCursor="true" resultFormat="e4x" 
					result="serviceHandler(event)"/>
 
	<mx:VBox bottom="5" left="5" right="5" top="5">
		<mx:AdvancedDataGrid id="grid" designViewDataType="flat" 
							 bottom="5" left="5" right="5" top="5" 
							 height="50%" width="100%"
							 click="onClickGridHandler(event);">
			<mx:columns>
				<mx:AdvancedDataGridColumn headerText="Titulo do artigo" dataField="title"/>
			</mx:columns>
		</mx:AdvancedDataGrid>
 
		<mx:Canvas 	height="50%" width="100%" borderColor="#DADADA" borderStyle="solid">
			<mx:Label x="6" y="6" id="autor" fontWeight="bold"/>
			<mx:TextArea 	height="53" id="descricao" bottom="6" left="6" right="6" 
							borderStyle="none" selectable="false" mouseFocusEnabled="false" 
							mouseEnabled="false"/>
			<mx:LinkButton 	x="383" y="4" label="Ler artigo" visible="false" 
							id="btnLink" click="onBtnLinkClickHandler(event);"/>
 
		</mx:Canvas>
 
	</mx:VBox>
 
</mx:TitleWindow>

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.

?Download AIRAutoUpdate.mxml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	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);">
 
    <mx:Style>
    	/**
    	 * Estilo para a aplicação possuir o background transparente
    	 */
        Application 
        {
            background-color:""; 
            background-image:""; 
            padding: 0px;
        }
    </mx:Style>
 
    <mx:Script>
    	<![CDATA[
    		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();
    		}
 
 
    	]]>
    </mx:Script>
 
    <!-- Componente com a aplicação -->
    <app:Posts x="0" y="0" id="main"/>
 
</mx:Application>

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!

Leave a Reply

Stefan Horochovec

  • Blogosfera
    • Erko Bridee
    • Fábio da Silva
    • Igor Costa
    • Janderson FC
    • Jose Carlos Fiel
    • Mario Junior
    • Mario Santos (msdevstudio)
    • Rodrigo Fraga
    • Vedovelli
  • Links
    • Flexmania
    • Forum – FlexBrasil
    • RedeRIA
  • Pessoal
    • Blog em Inglês
    • LinkedIn Profile
    • Oreilly Blog
  • Categorias
    • AIR (14)
    • BlazeDS (4)
    • Eng. de Software (2)
    • Flash Builder (1)
    • Flash Player (1)
    • Flex (18)
    • Flex 4 (4)
    • FlexBuilder (1)
    • FlexDuck (4)
    • Flexmania (1)
    • Geral (3)
    • Java (10)
    • Palestras (1)
    • Pessoal (2)
    • Sem categoria (8)
    • Tecnologia (1)
  • Archives
    • julho 2010
    • junho 2010
    • maio 2010
    • março 2010
    • janeiro 2010
    • novembro 2009
    • outubro 2009
    • setembro 2009
    • agosto 2009
    • julho 2009
    • junho 2009
    • maio 2009
    • abril 2009
    • março 2009
    • dezembro 2008
    • outubro 2008
    • março 2008
    • fevereiro 2008
    • janeiro 2008
  • Search






  • Home
  • Sobre mim

© Copyright Stefan Horochovec. All rights reserved.
Designed by FTL Wordpress Themes brought to you by Smashing Magazine

Back to Top