Ares e webOS

Desenvolvimento
para webOS
A aquisio da Palm pela HP e o anncio do webOS 2.0 trouxeram interesse renovado pelo
desenvolvimento nesse sistema. Felizmente, muito fcil comear a criar aplicativos para webOS com o
ambiente de desenvolvimento Ares, da Palm. por Roy Sutton O
Ares, biente integrado da de Palm, um am- desenvolvimento (IDE, na sigla em ingls) que executado
diretamente dentro do navegador de Internet para a criao de aplicativos para webOS. O Ares, que
suporta a criao de inter- faces com o simples arrastar e soltar do mouse, possui depurao integrada e
at controle de verses de cdigo, e baseado no Bespin, um editor de cdigo aberto projetado para a
web. Dar os primeiros passos no Ares muito fcil; requer apenas uma conta no Palm Developer Center
[1] e um navegador web (que podem ser o Firefox 3.5 ou mais recente, o Safari 4.0 ou mais recente, ou
at mesmo o Google Chrome). Entretanto, para testar seus aplicativos ou tirar proveito do depurador
integrado, preciso bai- xar e instalar o SDK do Palm webOS, disponvel para Windows, Mac OS X e
Linux, no site do Ares [2].
O Ares fornece o esqueleto pronto do aplicativo a ser criado e permite acessar componentes e recursos
da pla- taforma Palm Mojo. O Mojo contm servios e componentes pr-fabricados
para uso com o webOS. O Mojo e o Ares facilitam a criao de aplicativos sofisticados com o visual e
comporta- mento padres do webOS (quadro 1). Este artigo apresentar os princi- pais passos para criar
um aplicativo de exemplo com o Ares. Neste caso, o aplicativo usa a API de busca local do Yahoo! [3]
para buscar cinemas prxi- mos a um local especfico para voc usar na prxima vez que for Disney j
que por enquanto s funciona nos EUA. O usurio pode digitar tanto um CEP quanto utilizar um
dispositivo GPS para descobrir sua localizao atual. O aplicativo em seguida exibe os resultados em um
componente instalvel do Google Maps atravs de sua API [4]. Tambm veremos vrios conceitos
importantes do webOS, tais como eventos, servios, Ajax e CSS. Primeiros passos O IDE Ares possui trs
componentes bsicos (figura 1): a paleta de combi- naes e o painel com o navegador do projeto ficam
do lado esquerdo da tela. O painel de configuraes ocu- pa o lado direito da tela. No meio da
tela fica o painel de design e cdigo do projeto. A maior parte do projeto da interface feito arrastando
com- ponentes da paleta e soltando-os na tela de projeto. Para comear a criar o projeto, clique em New
no canto superior esquerdo da tela e selecione a opo Applica- tion. D ao aplicativo o nome Movie. Isto
criar a estrutura do novo projeto e apresentar ao desenvolvedor uma tela em branco. O framework Mojo
usa um padro MVC (Model, View, Controller Modelo, Visualizao e Controle) para desenvolvimento
de aplicativos. Cada interface do siste- ma ter um controlador (chamado de assistente) e uma
visualizao, que contm o cdigo HTML usado para renderiz-la. Vamos ver tambm como usar o Ares
para criar visual- mente as interfaces ao invs de escre- ver manualmente o cdigo HTML. Comearemos
diagramando os elementos de entrada e tentando manter a interface bastante simples. Primeiro, adicione
um componente PageHeader interface vazia. No painel de configuraes, altere o ttulo para Encontrar
Cinemas. Em seguida, adi- Quadro 1: Mojo e JavaScript
cione um componente para agrupar logicamente a caixa de entrada de O Mojo inclui o framework JavaScript
Prototype para manipulao de cdi- gos DOM. Tambm possvel adicionar o jQuery ou usar outro framework
multiplataforma como o Jo.

CEP que ser includa em breve e um boto de busca. O boto de grupo se encontra na seo Layout da
paleta.
72
www.linuxmagazine.com.br
 | WebOS
PROGRAMAO Clique e arraste-o para mostrar mais da paleta, caso voc no o veja.
Depois de adicionar o componen- te de grupo, altere seu rtulo para CEP. Em seguida, arraste um
campo de texto (TextField) para dentro da caixa de grupo e defina seu hintText como Digite o CEP, seu
tamanho mximo (maxLength) como 5 e seu modifierState como num-lock. Por l- timo, d a ele o nome
de ZIPCode. A mensagem definida em hintText exibida sempre que o TextField estiver vazio. E ao
definir o modifierState para num-lock, o usurio pode digitar nmeros com facilidade.
Em seguida, ser preciso expan- dir um pouco a caixa de grupo, o que pode ser feito selecionando-a e
arrastando o manipulador de contro- le inferior. Solte um ActivityButton na segunda linha da caixa de
grupo. Defina o rtulo como Procurar e d a ele o nome de ZIPSearchButton. Ajuste a caixa de grupo
caso o Activi- tyButton no fique totalmente visvel. O ltimo componente visual ser outro
ActivityButton, que deve ser po- sicionado abaixo da caixa de grupo. Este boto ser usado para buscar
por coordenadas de um dispositivo GPS. D o nome de GPSSearchBut- ton ao boto, e o rtulo de Buscar
nas proximidades. Sua tela de design deve ser parecida com a da figura 2. O Ares inclui diversos compo-
nentes no visuais que incluem di- versos servios, incluindo dois que sero necessrios: um componente
de webservices (localizado na seo Web Services da paleta) e um compo- nente de GPS (localizado em
Sen- sors). Arraste os dois para a rea de design. Eles aparecero na rea de componentes no visuais, na
parte de baixo da rea de design (figura 3). Como queremos apenas leituras simples do GPS, selecione o
com- ponente GPS, clique em Settings e desmarque a caixa Subscribe. Para ajudar a economizar bateria,
defina o parmetro maximumAge como 300
Linux Magazine #75 | Fevereiro de 2011

(segundos), para que voc use os valores em cache do GPS caso eles no sejam muito antigos.
Para uma resposta relativamente rpida, defina a preciso do GPS e seu tempo de resposta
(responseTime) como 2. Se voc tiver curiosidade a respeito dessas configuraes, pode clicar na aba
Help no canto superior direito do Ares para obter mais infor- maes sobre o componente de GPS. Em
seguida, selecione o compo- nente WebServices e defina a URL como http://local.yahooapis.com/
LocalSearchService/V3/localSear- ch. Depois, defina o handleAs como JSON. Por ltimo, clique no
cone de parmetros (logo abaixo de han- dleAS) e adicione o cdigo da lista- gem 1 entre as chaves.
Substitua o termo YahooDemo pela sua chave de desenvolvedor do Yahoo!, caso tenha uma. Escrever
cdigo A interface de usurio j est defi- nida, mas isso nem parece progra- mao de verdade. Agora,
vamos comear a adicionar algum cdigo para reagir aos eventos do usurio e conectar todos os
componentes. O Ares permite adicionar rapidamente listeners de eventos a partir do IDE. Clique no boto
de busca de CEP e, no painel mais direita no Ares,
clique na aba Events (uma dica: possvel obter uma viso em rvore dos componantes da interface atual
clicando na opo View no alto do pai- nel esquerdo. A partir dali, possvel clicar em qualquer
componente da sua interface). Em Events (localizado no painel direito), clique no pequeno cone de
cdigo direita de onTap. O Ares criar uma nova funo chama-
Figura 1 O IDE Ares uma tela em branco aguarda o incio do projeto.
Figura 2 A interface principal com componentes arranjados corretamente.
Figura 3 A seo de componentes
no visuais exibe os componentes de GPS e de WebServices.
73
Encontrar Cinemas
PROGRAMAO | WebOS

da ZIPSearchButtonTap e alternar a visualizao para o editor de cdigo.

Para o Yahoo! saber onde deve procurar as coordenadas, ser ne- cessrio fornecer aplicao o CEP
que foi digitado pelo usurio. Adi- cione o cdigo da listagem 2 sua nova funo.
Talvez voc tenha notado o termo this.$.ZIPCode no cdigo. O Ares cria
Muitos componentes possuem vrias configuraes e estados que podem ser acessados e ajustados em
tempo de execuo. Campos do tipo TextField tm uma propriedade de valor que contm o texto digitado
pelo usurio. As ltimas duas linhas da funo adicionam os demais parmetros necessrios requisio
Ajax e em seguida iniciam-na. A chamada para execuo retorna imediatamente. Para recuperar os
resultados da re- quisio web, vamos definir mani- puladores de sucesso e falha para o objeto
WebRequest.
Para definir os manipuladores de su- cesso e falha, clique no boto Design/ Code acima do cdigo para
retornar a tela de desenho visual da interface. Selecione o componente webService1 localizado na parte de
baixo da tela, na rea de componentes no visuais. Na aba Events, clique no cone de cdigo para
adicionar o cdigo da listagem 3 chamada onSuccess.
A chamada onSuccess de WebSer- vices passa trs parmetros para a aplicao. O mais importante o
inResponse, que o resultado da re- quisio Ajax. O Yahoo! devolve a resposta em um objeto JavaScript
com uma propriedade ResultSet le- gvel. Dentro do ResultSet h uma propriedade chamada totalResults-
Returned, que contm o nmero de respostas. Teste-a para assegurar-se de que voc tenha recebido alguns
resultados antes de prosseguir.
Voc tambm pode notar no mes- mo lugar, a chamada a pushScene. Este cdigo est solicitando que o
controlador de estgio adicione uma nova interface pilha de interfaces (substituindo a cena atual como
ati- va). Voc adicionar a nova interfa- ce daqui a pouco. Em caso de erro, uma breve mensagem ser
exibida para alertar o usurio sobre a situa- o infeliz ocorrida.
A aba Events ainda deve ser exibi- da para que se possa clicar no cone de cdigo para onFailure e
adicionar:
Listagem 1: Parmetros de WebServices
01 query: movie theater, 02 output: json, 03 results: 10, 04 appid: YahooDemo

Listagem 2: ZipSearchButtonTap
01 var zip = this. 02 $.ZIPCode.fetchModelProperty(value); 03 this.$.webService1.parameters.zip = zip; 04
this.$.webService1.execute();

Listagem 3: webService1Success
01 if(inResponse.ResultSet && (inResponse.ResultSet.
totalResultsReturned > 0)) 02 { 03 this.controller.stageController.pushScene(results,inResponse.
ResultSet); 04 } 05 else 06 { 07 Mojo.Controller.errorDialog(Nenhum resultado encontrado!); 08 }

automaticamente os componentes para voc, e fornece o atalho this.$ para acess-los pelo nome. Na
primei- ra instncia, preciso usar o nome atribudo ao TextField; na segunda, webService1 o nome que
o Ares atribuiu ao componante WebService quando este foi inserido.
O prximo aspecto interessante a chamada a fetchModelProperty.
Listagem 4: Lista itemHtml
01 <div class=palm-row> 02 <div class=theater-name>#{Title}</div> 03 <div
class=theater-address>#{Address}</div> 04 <div class=theater-phone>#{Phone}</div> 05 <div
class=theater-distance>Distance: #{Distance} mi.</div> 06 </div>

Listagem 5: Funo de configurao ResultsAssistant

01 this.$.list1.model.items = this.results.Result; 02 this.controller.modelChanged(this.$.list1.model);

Listagem 6: Incluso do arquivo index.html

01 <script type=text/javascript src=http://maps.google.com/
maps/api/js?sensor=true></script>
74
www.linuxmagazine.com.br
 | WebOS PROGRAMAO Mojo.Controller. remos para preencher a lista com as errorDialog(Incapaz de me

informaes retornadas da requisio comunicar com o servidor!);

web. Aps atribuir a lista de cinemas ao modelo de lista, esta automati- para ter uma mensagem de erro
camente ser populada (aps voc simples.
informar a ela que h novos dados Nova interface
disponveis).
Para configurar este comportamen- Aps obter uma resposta
positiva de
to, ser preciso buscar as informaes um servio web, o prximo
passo
recebidas da requisio web. Clique exibir os resultados para o
usurio.
no boto Design/Code. No topo da Para isto, crie uma nova interface
janela de cdigo h um construtor com um componente de mapa e
para o assistente da cena: o Resulta- um de lista, contendo os
resultados.
dosAssistant. Adicione o seguinte ao Clique no menu de seleo New
corpo da declarao: no canto superior esquerdo do editor Ares e
selecione a opo Scene. No-
this.results = argFromPusher; meie a nova cena como Resultados e
clique em OK. Voc ver novamente
Agora, na funo de configurao, uma tela em branco. Para
comear,
adicione o cdigo para informar adicione um componante de mapa
lista sobre os dados que voc tem. e defina sua altura como 200
(locali-
Logo abaixo da chamada a setupS- zada em Settings/Geometry, que
tal-
ceneAssistant, adicione o contedo vez seja necessrio expandir para
ser
da listagem 5. completamente visualizado). Alm
A primeira linha desta listagem disso, defina o nvel de zoom para
copia o vetor Result (onde o Yahoo! 12 e desmarque a opo
showMarker
inclui a lista de cinemas) no modelo (ambos localizados em General).
 da lista. A segunda linha informa ao Em seguida, adicione um compo-
controlador da cena que o modelo nente de barra de rolagem (scroll)
indicado foi atualizado, para que ele (localizado na seo Layout da
paleta)
possa atualizar os dados exibidos. abaixo do mapa e depois adicione a
ele um componente de lista, defina a
Teste da primeira fase altura do componente scroller para
Apenas para verificar que tudo est 100%. A barra de rolagem
garante que
funcionando da forma esperada, pode a lista se movimente com
suavida-
ser uma boa ideia testar o aplicativo de, sem fazer o mapa sair do alto
da
neste ponto. Se voc ainda no o fez, interface.
inicie o Palm Emulator. Ao clicar na A plataforma passos so definir
seta azul no canto superior esquerdo o estilo da lista, depois
configurar
da tela, o aplicativo iniciar o emu- o template para faz-lo funcionar
lador. Primeiro, digite um CEP (ex- da forma desejada. Para comear,
perimente 20500 se voc no souber selecione a lista e, como no
que-
um CEP americano) e depois clique remos que o usurio a modifique,
no boto Procurar de acordo com o desmarque as opes
swipeToDelete
nome dado ao boto). e reorderable. Em seguida, clique no
Voc receber um mapa centra- cone de cdigo itemHtml. Apague
o
lizado em Sunnyvale, Califrnia, e contedo da caixa de dilogo que
uma lista de cinemas prximos sua ser exibida e em seu lugar cole
o
localizao (figura 4). Para voltar script da listagem 4.
tela principal da aplicao, pressione O framework Mojo inclui um
a tecla [Esc] (que simula um deslize sistema de templates. Ns o
utiliza-
de dedo para a direita no dispositivo).
Linux Magazine #75 | Fevereiro de 2011
Figura 4 A interface de resultados.

Aqui est o que aconteceu: ao clicar no boto de busca, um evento foi dis- parado e ativou o
manipulador onTap. Este, por sua vez, executou uma re- quisio Ajax no servio web. Quando a
requisio terminou, ela disparou a chamada ao evento onSuccess, que enviou os resultados obtidos para a
tela. Se no foi o que aconteceu com voc, ainda possvel verificar alguns itens para encontrar o
problema. De volta ao Ares, voc ver um visualiza-
Figura 5 O aplicativo aps a incluso
de estilos personalizados.
75
Regal Gallery Place Stadium 14 707 7th St Nw
(202) 393-2121 Distance: 0.64 mi. AMC Loews Uptown 1 3426 Connecticut Ave Nw
(888) 262-4386
Distance: 2.53 mi. Landmark E Street Cinema
Theater Works
PROGRAMAO | WebOS

dor de logs que exibe as mensagens de erro obtidas, se houverem.

Alm disso, possvel experimen- tar o recurso JSLint localizado no mesmo local para verificar se
exis- tem erros em seu cdigo-fonte. Ou, possvel usar o depurador integrado para definir alguns pontos
de parada no seu cdigo e inspecionar o valor das suas variveis. Mapeamento Agora que j temos uma
lista, seria interessante se os pontos de interesse fossem exibidos no mapa (e tambm seria muito bom se o
mapa fosse centralizado na sua localizao). Precisaremos usar a API do Google Maps para acessar as
classes usadas pelo componente de mapas. Embo- ra este componente importe a API, ele carregado
dinamicamente e no ficar disponvel na funo de criao. Para contornar isso, impor- te uma cpia da
API dos mapas em
seu primeiro carregamento. Uma forma de fazer isto adicionar esse cdigo ao documento HTML que
forma a base do aplicativo. Alterne para a visualizao Files no painel esquerdo e d um duplo clique no
arquivo index.html. Adicione o cdigo da listagem 6 a ele logo aps a ins- truo que inclui o arquivo
ares.js. Para centralizar o mapa e desenhar alguns pontos de interesse, tambm ser preciso adicionar
algumas funes. possvel copiar e colar setMarkers e centerMap a partir do cdigo-fonte [5]. Por
ltimo, adicione chamadas a essas duas novas funes no fim da funo de configurao. Alterne de volta
para o arquivo results-assistant.js clicando no menu de seleo no alto do editor de cdigo e
selecionando-o. Por ltimo, adicione estas duas linhas funo de configurao:
this.setMarkers(); this.centerMap();

para adicionar as chamadas s no- vas funes. GPS Agora podemos incluir o dispositi- vo GPS. No
arquivo main-chrome. js, selecione o boto Buscar nas proximidades, clique em Events e adicione um
manipulador onTap como anteriormente. A Palm possui um servio para obter coordenadas GPS, e bom
configur-lo para fornecer leituras contnuas ou uma leitura nica.
Como basta uma nica leitura para encontrar o local, basta chamar o mtodo getCurrentPosition() na
aplicao. No manipulador onTap, adicione:
this.$.gps1.getCurrentPosition();

O GPS retorna seus resultados de forma assncrona. Para que o gps1 obtenha uma boa leitura, configure
a chamada ao evento onSuccess. Para
Listagem 7: gps1Success
01 if(inResponse.errorCode == 0) 02 { 03 this.latitude = inResponse.latitude; 04 this.longitude = inResponse.longitude; 05
delete this.$.webService1.parameters.zip; 06 this.$.webService1.parameters.latitude = this.latitude; 07
this.$.webService1.parameters.longitude = this.longitude; 08 this.$.webService1.execute(); 09 } 10 else 01 { 11
Mojo.Controller.errorDialog(GPS Error!); 12 this.$.GPSSearchButton.active = false; 13
this.$.GPSSearchButton.activeChanged(); 14 }

Listagem 8: Sucesso na requisio WebServices

01 this.controller.stageController.pushScene(results, inResponse.
ResultSet,this.latitude,);

Listagem 9: Construtor de ResultsAssistant

01 this.results = argFromPusher[0]; 02 this.latitude = argFromPusher[1]; 03 this.longitude = argFromPusher[2];
Listagem 10: Folha de estilos movie.css
01 body.palm-default { 02 background: url(../images/
film.jpg) top left repeat-y; 03 } 04 05 .theater-name { 06 padding-left: 3px; 07 font-weight: bold; 08 } 09 10
.theater-address { 11 padding-left: 3px; 12 font-size: .8em; 13 } 14 15 .theater-phone { 16 padding-left: 3px; 17 display:
inline; 18 font-size: .9em; 19 } 20 21 .theater-distance { 22 display: inline; 23 padding-left: 10px; 24 font-size: .9em; 25 }
76
www.linuxmagazine.com.br
 | WebOS
PROGRAMAO isto, adicione o cdigo da listagem 7 chamada de onSuccess.
Este cdigo verifica se foi recebida uma leitura vlida do GPS, e em se- guida inicia o servio web.
Adiciona- mos o cdigo para retirar o parmetro de CEP caso o usurio tenha feito uma busca por CEP
anteriormente. Tambm adicionamos cdigo para o manipulador onTap do boto da bus- ca por CEP,
para apagar a latitude e a longitude de buscas anteriores.
Em seguida, modifique a linha da funo onSuccess do WebService para informar a latitude e a
longitude na tela dos resultados. Altere a linha de pushScene substituindo-a pelo cdigo da listagem 8.
Agora, adicione a seguinte linha funo ZIPSearchButtonTap para indicar que voc no possui um
par de latitude/longitude para buscas por CEP:
this.latitude = this.longitude = undefined;

Por ltimo, modifique o constru- tor ResultadosAssistant para aceitar os novos parmetros e substitua
seu cdigo pelo contido na listagem 9. Teste da fase dois Neste ponto, temos um aplicativo funcional,
embora bsico, para en- contrar cinemas nos EUA. As funes de busca por CEP e por localizao GPS
devem funcionar. Experimen- te o aplicativo e certifique-se de que tudo funciona. Prximos passos Sem
entrar nos detalhes mais finos do design, ainda possvel melho- rar o aplicativo, principalmente no que
se refere pgina de resultados e ao mapa. No mnimo, possvel usar folhas de estilos CSS para me-
lhorar o design do aplicativo. Para comear, ser preciso adicionar um arquivo CSS ao projeto. Clique na
aba Files no painel esquerdo, selecio-
Linux Magazine #75 | Fevereiro de 2011

Listagem 11: Incluso da folha de estilo no arquivo index.html

01 <link href=stylesheets/movie.css media=screen
rel=stylesheet type=text/css />

ne a pasta do projeto Movie, clique no boto da nova pasta e adicione um novo diretrio chamado style-
sheets. Em seguida, clique no boto New no canto superior esquerdo e selecione Document. Selecione a
pasta stylesheets e digite movie.css como nome do arquivo. Adicione o contedo da listagem 10 ao
arquivo movie.css recm-criado.
No arquivo index.html, adicione o contedo da listagem 11 ao ele- mento de cabealho. Por ltimo,
faa o upload de uma imagem para ser usada como parte do papel de parede do aplicativo. Baixe o o ar-
quivo de imagem film.jpg [5] para o seu computador. Em seguida, na visualizao File, selecione a pasta
images. Por ltimo, arraste o arqui- vo do seu computador e solte-o na poro inferior esquerda da tela do
Ares, onde diz Drop local files below to upload to images. Seu aplicativo deve estar semelhante ao da
figura 5.
Gostou do artigo?
Queremos ouvir sua opinio. Fale conosco em cartas@linuxmagazine.com.br
Este artigo no nosso site: http://lnm.com.br/article/4762

Concluso Usando o Ares, vimos como criar rapidamente um aplicativo que combina dados de vrias
fontes e os exibe para o usurio. Tambm passamos por vrios aspectos da programao em JavaScript
para webOS. Se voc tiver interesse em outras melhorias, experimente ro- tular cada um dos resultados e
os marcadores no mapa, ou associar um manipulador de clique lista, para, por exemplo, ligar
diretamente para o telefone do cinema para obter in- formaes. Ou ento, voc poderia adicionar
manipuladores onTap lista de cinemas para chamar o telefone do cinema escolhido.
Considere o webOS como plata- forma para seu prximo aplicativo. Os usurios de webOS apreciam
aplica- tivos bem escritos e recompensam os desenvolvedores que fornecem recur- sos inovadores em
seus softwares.
Mais informaes
[1] Palm Developer Center: http://developer.palm.com/
[2] Ares: https://ares.palm.com/Ares/about.html
[3] API de busca de locais do Yahoo!:
http://developer.yahoo.com/search/local/V3/localSearch.html
[4] API do Google Maps:
http://code.google.com/apis/maps/documentation/javascript/
[5] Cdigo-fonte deste artigo:
http://www.smart-developer.com/Resources/Article-Code
77