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.
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.
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!

