Documente Academic
Documente Profesional
Documente Cultură
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
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>
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
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 }
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
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