Nação do Cimbalino » Widgets http://www.pedrolamas.com ( ou a “Página Pessoal de Pedro Lamas” ) Fri, 10 Feb 2012 17:10:35 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Windows Mobile Widgets – Parte 4 http://www.pedrolamas.com/2009/11/13/windows-mobile-widgets-parte-4/ http://www.pedrolamas.com/2009/11/13/windows-mobile-widgets-parte-4/#comments Fri, 13 Nov 2009 15:09:19 +0000 Pedro Lamas http://www.pedrolamas.com/?p=1087 Continue reading →]]>

Windows Mobile Widgets Part 3Em mais um artigo da série sobre desenvolvimento de Windows Mobile Widgets, hoje venho falar sobre o seu modelo de objectos (object model) de Javascript.

Voltando ao essencial, um Widget é apenas HTML + CSS + Javascript… sendo o HTML e o CSS utilizado para o desenho da interface, o Javascript serve para a implementação da lógica e programação do Widget.

Os Widgets de Windows Mobile disponibilizam um objecto chamado widget, que permite o acesso a algumas informações do estado do dispositivo, bem como a algumas funcionalidades relacionadas com o próprio Widget.

Esta é a definição do objecto widget:

  • Propriedades:
    • authorEmail – O endereço de e-mail do autor do Widget, correspondendo ao valor do atributo email do elemento <author> no manifesto
    • authorName – O nome do autor do Widget, correspondendo ao valor do elemento <author> no manifesto
    • authorURL – O nome do autor do Widget, correspondendo ao valor do atributo href do elemento <author> no manifesto
    • currentIcon – O icon que está em uso neste Widget; este é um object do tipo WidgetIcon.
    • description – A descrição do Widget, correspondendo ao valor do elemento <description> no manifesto
    • height – A altura do Widget em pixels
    • identifier – O identificador único do Widget, correspondendo ao atributo id do elemento <widget> no manifesto
    • locale – O identificador do idioma (locale) em uso, conforme as definições regionais (Regional Settings) do dispositivo
    • menu – O menu do Widget; este é um objecto do tipo Menu.
    • name – O nome do Widget, correspondendo ao valor do elemento <name> no manifesto
    • version – A versão do Widget, correspondendo ao valor do atributo version do elemento <widget>
    • width – A largura do Widget em pixels
  • Métodos
    • createObject(type) – Cria uma instancia do tipo indicado
    • preferenceForKey(key) – Obtém os dados persistentes relativos ao identificador indicado
    • setPreferenceForKey(value, key) – Guardar persistentemente os dados indicados, relacionando-os com um identificador
  • Eventos
    • onHide – Ocorre quando a janela do Widget perde o foco (minimizar)
    • onShow – Ocorre ao focar a janela do Widget

Para efeito de exemplo, vamos utilizar novamente o nosso “Hello World” (a versão deste post), e fazer com que este apresente no ecrã principal o seu nome e versão, alterando para isso o ficheiro default.htm:

<html>
<head>
<title>Hello World</title>
<script type="text/javascript" src="resources.js"></script>
<script type="text/javascript">
window.onload = function() {
  HelloWorldLabel.innerText = Resources.HelloWorldText;
  WidgetInformation.innerText = widget.name + " v" + widget.version;
};
</script>
</head>
<body>
<p id="HelloWorldLabel"></p>
<p id="WidgetInformation"></p>
</body>
</html>

Abrindo o Widget no emulador, o resultado deverá ser como a seguinte imagem:

Hello World Widget with identification

Como pudemos ver acima, existem ainda pelo menos mais dois objectos: o WidgetIcon e o Menu.

O WidgetIcon tem a seguinte estrutura:

  • Propriedades
    • height – A altura do icon
    • src – O url do icon
    • width – A largura do icon

Por sua vez, o Menu apresenta a seguinte estrutura:

  • Propriedades
    • leftSoftKeyIndex – Utilizado pelo método setSoftkey para representar a tecla (soft-key) da esquerda
    • rightSoftKeyIndex – Utilizado pelo método setSoftkey para representar a tecla (soft-key) da direita
  • Métodos
    • append(item) – acrescente um objecto do tipo MenuItem à tecla (soft key) da direita
    • clear() – Limpa o conteúdo do menu principal
    • createMenuItem(id) – cria um novo objecto MenuItem com o identificador indicado
    • getMenuItemById(id) – obtém o objecto MenuItem dado o seu identificador
    • remove(item) – remove do menu o objecto MenuItem indicado
    • setSoftKey(item, id) – atribui o MenuItem a uma tecla (soft key) específica.

E aqui aparece mais um objecto, o MenuItem, que tem a seguinte estrutura:

  • Propriedades
    • text – O texto a apresentar neste item
  • Eventos
    • onSelect – Ocorre quando o item é seleccionado

Utilizando agora estes conceitos, vamos criar um novo item “About” para o nosso menu:

<html>
<head>
<title>Hello World</title>
<script type="text/javascript" src="resources.js"></script>
<script type="text/javascript">
window.onload = function() {
 HelloWorldLabel.innerText = Resources.HelloWorldText;
};

var menu = widget.menu;
var aboutMenuItem = menu.createMenuItem(1001);
aboutMenuItem.text = "About";
aboutMenuItem.onSelect = function() {
 alert(widget.name + " v" + widget.version);
};
menu.setSoftKey(aboutMenuItem, menu.leftSoftKeyIndex);
</script>
</head>
<body>
<p id="HelloWorldLabel"></p>
</body>
</html>

A imagem seguinte mostrar o resultado obtido; reparem bem na tecla (soft key) da esquerda:

Hello World Widget custom Menu

Podem aqui encontrar o ficheiro “Hello World.wgt” com o resultado das alterações… e até à próxima! :)

]]> http://www.pedrolamas.com/2009/11/13/windows-mobile-widgets-parte-4/feed/ 1 Windows Mobile Widgets – Parte 3 http://www.pedrolamas.com/2009/10/12/windows-mobile-widgets-parte-3/ http://www.pedrolamas.com/2009/10/12/windows-mobile-widgets-parte-3/#comments Mon, 12 Oct 2009 15:41:44 +0000 Pedro Lamas http://www.pedrolamas.com/?p=968 Continue reading →]]>

Continuando a “saga” do desenvolvimento de Windows Mobile Widgets, este terceiro artigo vai focar o manifesto dos Widgets, mostrando para que serve e como o podemos utilizar para nosso próprio proveito.

O manifesto de um Widget para Windows Mobile tem obrigatoriamente o nome de “config.xml” e obedece ao standard definido pelo draft para desenho de Widgets da W3C, de 22 Dezembro de 2008. Este standard é um rascunho (draft) do que é pretendido para a versão final; no entanto, no seu aspecto base é garantida pelo Windows Mobile a retro-compatibilidade das próximas versões com as mais antigas.

Este manifesto, tal como o nome do ficheiro indica, não é nada mais do que texto XML que descreve “quem” o nosso Widget realmente é!

Assim, e pegando novamente no exemplo Hello World que venho a apresentar desde o primeiro artigo, o manifesto completo para este Widget poderia ser algo deste tipo:

<?xml version="1.0" encoding="utf-8" ?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://www.pedrolamas.com/WindowsMobileWidgets/HelloWorld" version="1.0">
<name>Hello World</name>
<content src="default.htm" type="text/html" />
<access network="false" />
<icon src="icon.png" />
<icon src="icon.ico" />
<description>
Hello World Demo Application!
</description>
<author href="http://www.pedrolamas.com" email="pedrolamas@gmail.com">
Pedro Lamas
</author>
<license>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.
</license>
</widget>

Começando pela raiz do documento XML, vemos que dentro do elemento widget podemos encontrar os seguintes atributos:

  • id – Este é o identificador único para este Widget, e permite que em futuras instalações deste mesmo Widget (com o mesmo id), sejam comparadas as versões, permitindo assim  que este seja actualizado. O seu conteúdo é obrigatoriamente um URI válido
  • version – A versão do Widget

Passamos agora aos elementos internos:

  • name – O nome do Widget, que entre outras coisas será utilizado ao criar um atalho no Start
  • content – Identifica o conteúdo do Widget e tem os seguintes atributos:
    • src – O ficheiro de arranque do Widget
    • type – O tipo de conteúdo MIME do ficheiro de arranque
  • access – Os acessos que este Widget irá necessitar, apresentando os seguintes atributos:
    • network – Indica que o Widget precisa de acesso à internet; em caso afirmativo, será apresentado um aviso ao utilizador para que este dê efectivamente o acesso
  • icon – Identifica um icon a ser apresentado no Widget, com estes atributos:
    • src – O ficheiro de imagem do icon propriamente dito
  • description – A descrição do Widget, apresentada por exemplo quando este é instalado
  • author – O nome do autor do Widget, bem como os seguintes atributos:
    • href – Um endereço de internet, normalmente representando a página de suporte do Widget ou do seu autor
    • email – Um endereço de email, sendo normalmente o email de suporte do Widget ou do seu autor
  • license – A licença associada ao Widget

De todo o manifesto, acho pessoalmente que o identificador (id) e versão (version) são os mais importantes e essenciais, já que é com base nestes dois atributos que o Windows Mobile nos permite efectuar actualizações aos nossos Widgets; assim, aconselho a que coloquem sempre um identificador bastante completo, de forma a garantir que este é verdadeiramente único.

Todo o manifesto do Widget pode ser acedido programaticamente através do modelo de objectos (Object Model) que os Widgets expõe para o Javascript, mas esse será o tema do próximo artigo… ;)

]]> http://www.pedrolamas.com/2009/10/12/windows-mobile-widgets-parte-3/feed/ 0 Windows Mobile Widgets – Parte 2 http://www.pedrolamas.com/2009/08/21/windows-mobile-widgets-parte-2/ http://www.pedrolamas.com/2009/08/21/windows-mobile-widgets-parte-2/#comments Fri, 21 Aug 2009 14:19:12 +0000 Pedro Lamas http://www.pedrolamas.com/?p=872 Continue reading →]]>

Na continuação da série de artigos sobre Windows Mobile Widgets que tenho pensada, este segundo artigo focará em essencial como podemos “internacionalizar” os nossos Widgets, ou seja, como fazer para que a interface do Widget seja multi-língua (Localization), apresentando o idioma correcto conforme as Regional Settings (Definições Regionais) do PDA onde ele estiver a ser executado.

A localização da interface de Widgets consiste em dividir a aplicação em “recursos”, sejam eles imagens, javascript, ou outros tipos de ficheiros, e colocar cópias desses recursos devidamente localizados em pastas individuais que indicam qual o idioma (Locale).

Antes de mais, há que perceber o conceito de Locale ID (ou LCID): trata-se de um código que identifica o idioma utilizado num dado elemento. Os códigos LCID que podem ser utilizados nos Widgets do Windows Mobile podem ser consultados aqui.

Utilizando por base o exemplo “Hello World” apresentado no artigo anterior, para que o interface deste widget tenha suporte para multi-língua, teremos de remover o texto da própria interface e fazer com que este seja carregado dinamicamente de um ficheiro javascript (.js), ficheiro este que será posteriormente replicado para as línguas que pretendermos. Assim, o primeiro passo será criar o ficheiro “resources.js” com os recursos do nosso Widget:

var Resources = {
 HelloWorldText: "Hello World"
};

De seguida, vamos alterar o ficheiro de interface “default.htm” para que este consuma o ficheiro de recursos:

<html>
<head>
<title>Hello World</title>
<script type="text/javascript" src="resources.js"></script>
<script type="text/javascript">
window.onload = function() {
 HelloWorldLabel.innerText = Resources.HelloWorldText;
};
</script>
</head>
<body>
<p id="HelloWorldLabel"></p>
</body>
</html>

As linhas marcadas acima indicam os locais em que o ficheiro original foi alterado.

Para efeitos de exemplo, vamos fazer agora a tradução dos recursos para Português de Portugal. Para isso, vamos criar directamente na raiz do nosso Widget uma nova pasta e dar-lhe o nome de “pt“; depois criamos uma cópia do ficheiro “resources.js” dentro da pasta “pt“. Falta agora modificar o conteúdo do ficheiro, traduzindo os textos para a língua correcta, sendo o resultado final como o seguinte:

var Resources = {
 HelloWorldText: "Olá Mundo"
};

Esta é a estrutura de ficheiros do nosso Widget já alterado:

Hello World localized files

Falta apenas empacotar os ficheiros seguindo as indicações do primeiro artigo, instalar e testar!

Para correctamente podermos ver o nosso Widget em Português, teremos que indicar ao PDA que pretendemos utilizar as Definições Regionais de Portugal, utilizando para isso as opções que podemos encontram em Start \ Settings \ System \ Regional Settings, e alterando as definições tal como mostra a imagem seguinte:

Regional Settings

Irá aparecer um aviso para reiniciar o PDA, que no nosso caso poderá ser ignorado visto que para a execução de Widgets a alteração das Definições Regionais são imediatas.

De seguida executando o Widget, poderemos ver a interface em Português de Portugal tal como pretendiamos:

Hello World Widget running localized

Podem aqui descarregar o ficheiro “Localized Hello World.wgt” que tem o resultado desta demonstração… encontramo-nos no próximo artigo! ;)

]]> http://www.pedrolamas.com/2009/08/21/windows-mobile-widgets-parte-2/feed/ 1 Windows Mobile Widgets – Parte 1 http://www.pedrolamas.com/2009/07/25/windows-mobile-widgets-parte-1/ http://www.pedrolamas.com/2009/07/25/windows-mobile-widgets-parte-1/#comments Sat, 25 Jul 2009 14:13:04 +0000 Pedro Lamas http://www.pedrolamas.com/?p=823 Continue reading →]]>

Hello World Widget ThumbnailEste é o primeiro de uma série de artigos que tenho em vista, onde pretendo demonstrar como podem utilizar a nova forma de desenvolvimento para o Windows Mobile 6.5: Widgets!

Utilizando o suspeito do costume, para dar a conhecer os conceitos base associados ao desenvolvimento numa qualquer tecnologia/linguagem, apresento agora o programa “Hello World”, passo a passo! :)

Para esta demonstração vamos precisar do Windows Mobile 6.5 Developer Tool Kit (disponível aqui); depois de instalado no computador, os emuladores de WM 6.5 podem ser encontrados directamente no menu iniciar e depois pesquisando em Programas \ Windows Mobile 6 SDK \ Standalone Emulator Images \ US English (sendo que esta última aparecerá conforme a linguagem do Dev. Toolkit que instalaram).

Windows Mobile 6.5 Emulator Images

Abrindo o emulador “WM 6.5 Professional” e mal este acabe de arrancar, devem ver uma imagem como a seguinte, onde se mostra o Today do WM 6.5:

Windows Mobile 6.5 Professional Today

Feito isto, estamos em condições de começar a desenvolver o nosso programa!

Na sua essência, um Widget nada mais é uma ou mais páginas de Internet, no qual são aplicadas as tecnologias regularmente associadas como HTML, CSS e Flash (sendo que futuramente é de se esperar também o suporte para Silverlight) para a interface, e Javascript para a programação da interacção, e algumas técnicas como por exemplo o AJAX.

Assim, a nossa página “Hello World” pode ser resumida simplesmente ao seguinte código:

<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>

Copiando o código acima para o bloco de notas do computador, e guardando o resultado como ficheiro de HTML com o nome “default.htm” (com aspas, de forma a que ao guardar, o Bloco de Notas não adicione a extensão “.txt” ao nome do ficheiro, acabando com algo como “default.htm.txt” o que não é o pretendido), temos a página de arranque do nosso Widget.

De seguida temos que criar o ficheiro de manifesto da aplicação! Este ficheiro tem sempre o nome de “config.xml” e permite ao gestor de Widgets saber o que fazer com este especificamente, definindo assim elementos como a origem, instalação, necessidades especiais, etc.. O formato do ficheiro obedece ao draft para desenho de Widgets da W3C, de 22 Dezembro de 2008.

Para o nosso exemplo, vamos considerar o seguinte manifesto:

<?xml version="1.0" encoding="utf-8" ?>
<widget version="1.0" xmlns="http://www.w3.org/ns/widgets" id="">
<name>Hello World</name>
<content src="default.htm" type="text/html" />
<access network="false" />
<icon src="icon.png" />
<description>Hello World Demo Application!</description>
</widget>

Mais uma vez, recorremos ao Bloco de Notas para copiar o texto acima para um novo ficheiro, que deverá ser guardado como “config.xml” (atenção às aspas, que devem ser mantidas no Bloco de Notas!) na mesma pasta do anterior “default.htm”.

Analisando o manifesto anterior, podemos que foi indicado o nome de “Hello World” para o nosso Widget, a descrição “Hello World Demo Application”, o ficheiro de arranque “default.htm”, que não vai necessitar do acesso à rede (internet ou local), e ainda que tem como ícone o ficheiro “icon.png”; para ícone podem usar qualquer imagem no formato .ico, .png e .jpg, com um dos seguintes formatos:

  • 36×36@96
  • 45×45@96
  • 64×64@96
  • 60×60@128
  • 60×60@192
  • 90×90@192

No entanto, devo referir que no caso do Windows Mobile 6.5 Standard, este apenas aceita ficheiros .ico, pelo que se pretendermos desenvolver Widgets para as duas plataformas, devemos sempre ter pelo menos um ficheiro .ico, aparecendo a referência para o .ico em último lugar. Por exemplo:

<icon src="icon.png" />
<icon src="icon.ico" />

Terminado este passo, devemos ter neste momento 3 ficheiros: “default.htm”, “config.xml” e “icon.png”.

Hello World files

Temos agora de empacotar os três ficheiros, simplesmente seleccionando os mesmos e clicando com o botão direito do rato na selecção, para depois clicar em Enviar para \ Pasta comprimida. Ao fazer isto vai aparecer um novo ficheiro .zip, que contém os 3 outros ficheiros devidamente “zippados” (compactados em formato zip). Para que o ficheiro possa ser usado como um Widget, a extensão deve ser alterada de .zip para .wgt

E pronto, temos o nosso Widget prontinho para teste e distribuir! :)

Hello Word Widget file

Nesta altura falta-nos apenas testar o nosso Widget e para isso temos o emulador que abrimos anteriormente; para copiar o ficheiro para o emulador, a maneira mais fácil é clicando em File \ Configure e depois no campo Shared Folder escolhera pasta onde se encontra o nosso Widget (a pasta da imagem acima). Depois, no emulador propriamente dito ir a Start, abrir o File Manager, navegar até \Storage Card, e clicar sobre o ficheiro .wgt para instalar o Widget.

Widget file on File Explorer

No final da instalação, é criado um novo atalho no Start que irá abrir o nosso Widget. E heis o resultado final! :)

Hello World Widget running

Podem aqui descarregar o ficheiro “Hello World.wgt” que corresponde ao produto acabado.

Espero que tenham gostado deste pequeno tutorial, os próximos serão dentro deste alinhamento, onde tentarei explicar alguns conceitos mais avançados de forma a melhorar-mos os nossos Widgets!

]]> http://www.pedrolamas.com/2009/07/25/windows-mobile-widgets-parte-1/feed/ 4 Desenvolvendo Widgets para Windows Mobile 6.5 http://www.pedrolamas.com/2009/07/19/desenvolvendo-widgets-para-windows-mobile-6-5/ http://www.pedrolamas.com/2009/07/19/desenvolvendo-widgets-para-windows-mobile-6-5/#comments Sun, 19 Jul 2009 12:57:55 +0000 Pedro Lamas http://www.pedrolamas.com/?p=820 Continue reading →]]>

Uma das novidades que o Windows Mobile 6.5 apresentou aos programadores, foi a possibilidade de desenvolvimento de pequenas aplicações com base em HTML e CSS para a interface e JavaScript para o código, chamadas de Widgets, ao bom estilo dos Sidebar Gadgets que podemos encontrar no Windows Vista e 7!

São óbvias as vantagens desta aproximação, mas a que se destaca mais facilmente é mesmo quando comparada com o desenvolvimento de aplicações com .NET Compact Framework: enquanto que para desenvolvimento em .NET é necessário um IDE como o Visual Studio ou o SharpDevelop, para o desenvolvimento de Widgets basta recorrer-se ao Bloco de Notas!… A flexibilidade do JavaScript e das técnicas utilizadas para criar páginas dinâmicas permitem criar poderosos Widgets com a aparência de uma qualquer aplicação de Windows Mobile.

Dentro de alguns dias pretendo colocar aqui no blog um tutorial de como fazer um simples Widget e o instalar e utilizar no Windows Mobile 6.5, mas para já deixo apenas a ligação para a documentação oficial na MSDN!

]]> http://www.pedrolamas.com/2009/07/19/desenvolvendo-widgets-para-windows-mobile-6-5/feed/ 2