From Forum Nokia Wiki

dcrocha 17:38, 12 November 2007 (EET)

Link para o projeto completo: http://wiki.forum.nokia.com/images/6/68/WidgetHelloWorld.zip

Introdução

No começo de 2007, a Nokia anunciou a tecnologia Web Run-Time (WRT), como uma das grandes novidades da plataforma S60. Esta tecnologia estará presente a partir dos dispositivos S60 3rd. Edition Feature Pack 2 permite o desenvolvimento de aplicações para smartphones Nokia utilizando tecnologias Web padrão, tais como: XHTML, CSS (Cascading Style Sheets) e JavaScript, além de possibilitar a construção de aplicações Web 2.0 com o uso do AJAX (Asynchronous JavaScript And XML), trazendo as mais recentes novidades da Web para o seu telefone celular.

Neste artigo introduziremos a tecnologia WRT, mostraremos o porquê da importância da mesma para a construção rápida e fácil de aplicações móveis, além de apresentar as ferramentas necessárias para o desenvolvimento utilizando Web Run-Time. Também mostraremos como construir uma aplicação básica e mostraremos complexos exemplos escritos por outros desenvolvedores.

Web Run-Time e introdução aos widgets

O web browser dos aparelhos S60 é uma grande revolução no uso da Internet por dispositivos móveis. Ele permite navegar pelas mesmas páginas acessáveis pelos navegadores dos computadores convencionais. Com features como: thumbnails, histórico visual de páginas, mini-map (para navegação em páginas grandes) e busca de texto nas páginas, a experiência se tornou muito mais rica e interativa. Como exemplo, a Figura 1 mostra o navegador do N95 em uma página web normal, www.s60.com:

Figura 1: Navegador do N95 em ação

A nova funcionalidade do ambiente do browser da S60, WRT, permite que sejam desenvolvidas aplicações que utilizam tecnologias Web (XHTML, CSS e JavaScript), chamadas de widgets. Utilizando widgets, os desenvolvedores poderão fornecer aos usuários a experiência dos seus serviços web a partir de um único clique na área de aplicações de um aparelho S60. A seguir, vamos entrar com mais detalhes no mundo dos widgets para S60.

Widgets – conceitos e componentes

Os widgets são basicamente aplicações que podem ser desenvolvidas com tecnologias Web, empacotadas, instaladas no aparelho, ter um ícone e um nome associados a elas e portanto se comportar como aplicações nativas, permitindo ao usuário utiliza-las facilmente a partir do menu, além de permitir o ciclo de instalação, atualização e remoção comum às outras aplicações S60. Não é necessário que o usuário abra o browser, digite o endereço de sua página web, e espere todo o carregamento de páginas HTML, folhas de estilo e código JavaScript: tudo já vem pré-carregado, provendo uma experiência rápida e fluida no uso de aplicações Web.

Para construir um widget, o desenvolvedor precisa usar os seguintes componentes, mostrados na Figura 2:

Figura 2: Componentes de um widget para S60

Vamos agora entrar em detalhes sobre cada um dos componentes de um widget:

• XHTML: Extensible Hypertext Text Markup Language , fornece a mesma capacidade de marcação de texto (mark-up), mas sendo adequada à sintaxe XML. Inicialmente o XHTML (assim como o HTML) serviam tanto para a marcação quanto para a formatação de texto; entretanto, a criação do CSS (discutida abaixo) fez com que a separação ficasse mais clara, e hoje o XHTML seja utilizado para seu propósito original: dizer ao browser como mostrar uma página: o que é titulo, o que é o cabeçalho, quais dados devem ser dispostos em tabelas, e não com que tipos de fonte, cores, etc.
• CSS: Cascading Style Sheets tecnologia criada para mover a formatação de páginas para fora do HTML. Isso proporciona que um mesmo conjunto de dados, apresentados com HTML, tenha formatações completamente diferentes apenas trocando-se a folha de estilo da apresentação, sem modificar os dados mostrados.
• JavaScript: o JavaScript é o coração de um widget; ele fornece a linguagem de programação com a qual os dados e a formatação dos mesmos podem ser modificados dinamicamente, carregados de servidores da Internet, modificados de acordo com as características do browser do aparelho, ou seja, o papel do JavaScript é permitir que os dados apresentados com XHTML e formatados com CSS sejam dinâmicos, interativos e possam ser modificados pelo usuário para mostrar-lhes informações úteis e produtivas.

Além dos componentes mostrados na Figura 2, que correspondem ao núcleo de nossas aplicações web dinâmicas, mais dois elementos são necessários para que os widgets estejam completos e possam ser instalados nos dispositivos:

• Info.plist: é o arquivo descritor do widget. Contém informações sobre: nome interno da aplicação, nome que será mostrado ao usuário, versão, e o nome da página XHTML que serve como a tela principal do widget.
• Ícone: como um widget é instalado tal qual uma aplicação nativa em um aparelho S60, é necessário fornecer um ícone, que será mostrado no menu de aplicações de aparelho, para identificar nosso serviço em meio às outras aplicações. A Figura 3 mostra os ícones de alguns widgets instalados em um smartphone S60:

Figura 3: Ícones de widgets instalados em um dispositivo S60

Agora que temos todas as informações básicas sobre widgets e seus componentes, vamos desenvolver um pequeno exemplo para demonstrar como o processo de desenvolvimento, empacotamento e instalação funciona. A partir do mesmo, e da leitura dos documentos do site do Forum Nokia, você poderá criar complexas aplicações Web 2.0 para seu smartphone S60.

Desenvolvendo um widget - ferramentas

Como os widgets são compostos de recursos tecnológicos padrão da Web, você pode utilizar qualquer ferramenta de autoria para escrever seus códigos HTML, CSS e JavaScript. Entretanto, para os casos de:

• Uso de APIs adicionais (Sysinfo, Menu e Widget)
• Teste com o tamanho de tela correto, e com a orientação da tela em retrato ou paisagem
• Teste do processo de empacotamento e instalação
• Teste da aparência do ícone da aplicação

É altamente recomendável o download do SDKs (Software Development Kits) no qual o ambiente WRT está habilitado. O SDK recomendável para tal tarefa é o:

• S60 3rd Edition SDK for Symbian OS, supporting Feature Pack 2, for C++, Beta, disponível em http://www.forum.nokia.com/info/sw.nokia.com/id/4a7149a5-95a5-4726-913a-3c6f21eb65a5/S60-SDK-0616-3.0-mr.html

Após baixar o arquivo S60_3rd_Ed_SDK_FP2_Beta_b.zip, descompacte-o e instale o SDK clicando em “setup.exe”.

Depois de instalado, você poderá executar o emulador clicando em “Programs -> S60 Developer Tools -> 3rd Edition FP2 SDK -> C++, Beta -> Emulator”. A Figura 3 mostra o emulador ao ser executado:

Figura 4. Emulador S60 3rd. Edition Feature Pack 2 for C++ sendo executado

Uma vez que tenhamos instalado o SDK que nos permitirá testar nossos widgets, vamos começar a criar os componentes de nossa aplicação.

Criando os componentes

Como já mencionamos anteriormente, os componentes de um widget são: (X)HTML, CSS, JavaScript, o arquivo Info.plist e um ícone. As versões suportadas de cada tecnologia são:

• HTML 4.01, XHTML 1.0 (basic and mobile profile)
• CSS Level 2 revision 1 (CSS 2.1)
• JavaScript 1.5 (ECMA-262 3rd Edition)
• DOM Level 2

Para desenvolvermos, o primeiro passo será criar uma pasta no disco, chamada HelloWorld. Esta será a pasta-raiz de nosso projeto.

A seguir, vamos desenvolver a página HTML, que será a tela principal de nosso widget. Clique na pasta HelloWorld recém-criada, e dentro dela crie um arquivo chamado index.html. A Listagem 1 nos mostra o código a ser utilizado neste arquivo:

Listagem 1. Código de index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Hello World</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link rel="stylesheet" type="text/css" href="helloworld.css" />
	<script type="text/javascript" src="helloworld.js"></script>
</head>
 
<body id="body">
	<div id="greeting">
		<div id="greetingText">Hello World!<br/>
		<a class="link" href="javascript:doAsking()">Click me</a>
		</div>
    	</div>
 
    	<div id="asking">
		<div id="askingText">How are you doing?<br/>
		<a class="link" href="javascript:doGreeting()">Click me</a>
		</div>
	</div>
	<div>
		<input type="button" value="Asking" onClick="doAsking();" />
		<input type="button" value="Greeting" onClick="doGreeting();" />
	</div>
</body>
</html>

Alguns comentários importantes sobre o código HTML:

• Tanto o código JavaScript quanto o CSS (helloworld.css) são carregados de arquivos externos, helloworld.js e helloworld.css, respectivamente. Isto reforça a separação entre código, dados, estrutura e formatação, o que permite flexibilidade em caso de troca de layout, código, etc.
• Você pode perceber que diversas tag
  existem, cada qual com seus componentes que geralmente chamam funções JavaScript, as quais, veremos adiante, serão usadas para atualizar a interface HTML.
• Uma limitação dos widgets é que apenas uma página HTML pode existir, portanto toda a manipulação da interface, a visibilidade ou não de certos componentes, o código HTML, entre outros, precisam ser manipulados via JavaScript dentro do mesmo arquivo HTML, já que não há possibilidade de vínculo com outro arquivo, pois não haveria possibilidade de voltar e a implementação de tal rotina deixaria os widgets exageradamente complicados.

Tendo comentado o código HTML, vamos passar à parte dinâmica, interativa e excitante de nosso widget: o código JavaScript que realiza toda a interação com o usuário e atualização da interface. Para tal, crie um arquivo, chamado helloworld.js, dentro da pasta HelloWorld criada anteriormente, e digite o código constante da Listagem 2:

Listagem 2. Código JavaScript do arquivo helloworld.js

//Definição de constantes para os itens de menu
 
CMD_ASK = 10;
CMD_GREET = 11;
CMD_CURSOR = 12;
CMD_TAB = 13;
 
window.onload = setup;
 
// Creating a menu
function setup()
{
 
	mItemAsk = new MenuItem("Asking", CMD_ASK);
	mItemGreet = new MenuItem("Greeting", CMD_GREET);
	mItemCursor = new MenuItem("Cursor mode", CMD_CURSOR);
	mItemTab = new MenuItem("Tab mode", CMD_TAB);
 
	mItemCursor.onSelect = menuItemSelected;
	mItemTab.onSelect = menuItemSelected;
	mItemAsk.onSelect = menuItemSelected;
	mItemGreet.onSelect = menuItemSelected;
 
	window.menu.append(mItemTab);
	window.menu.append(mItemCursor);
	window.menu.append(mItemGreet);
	window.menu.append(mItemAsk);
}
 
// handling menu events
function menuItemSelected(id)
{
	switch (id)
	{
	case CMD_ASK:
		doAsking();
		break;
	case CMD_GREET:
		doGreeting();
		break;
	case CMD_CURSOR:
		widget.setNavigationEnabled(true);
		break;
	case CMD_TAB:
		widget.setNavigationEnabled(false);
		break;
	default:
		break;
	}
}
 
// change view and display text
function doAsking()
{
	var greeting = document.getElementById("greeting");
	var asking = document.getElementById("asking");
 
	if (window.widget)
               // freezes the widget and prepares it for flipping
               widget.prepareForTransition("fade");			
	greeting.style.display="none";		// hide the greeting view
	asking.style.display="block";		// show the asking view
	document.getElementById("body").style. 
         backgroundColor = document.defaultView.getComputedStyle(asking, null).
                        getPropertyValue('background-color');	
 
	if (window.widget)
		setTimeout ('widget.performTransition();', 0);		// flip the widget over	
}
 
// change view and display text
function doGreeting()
{
	var greeting = document.getElementById("greeting");
	var asking = document.getElementById("asking");
 
	if (window.widget)
		// freezes the widget and prepares it for flipping
		widget.prepareForTransition("fade");	
 
	asking.style.display="none";			// hide the asking view
	greeting.style.display="block";			// show the greeting view
	document.getElementById("body").style.
         backgroundColor = document.defaultView.
         getComputedStyle(greeting, null).getPropertyValue('background-color');	
 
	if (window.widget)
		setTimeout ('widget.performTransition();', 0);		// flip the widget over
}

O código JavaScript é o coração do nosso widget, portanto vamos comenta-lo em detalhes. Em primeiro lugar, há a função setup(), que realiza o trabalho de criar os itens de menu da aplicação, utilizando dois parâmetros: o texto que será usado no item de menu, mais um código numérico que será usado para identificar o item de menu clicado pelo usuário. Tais operações são realizadas no trecho abaixo:

mItemAsk = new MenuItem("Asking", CMD_ASK);
mItemGreet = new MenuItem("Greeting", CMD_GREET);
mItemCursor = new MenuItem("Cursor mode", CMD_CURSOR);
mItemTab = new MenuItem("Tab mode", CMD_TAB);

O resto do código da função se dedica a associar uma função a ser chamada quando um item for clicado (por exemplo, mItemCursor.onSelect = menuItemSelected) e a criar a estrutura a ser apresentada ao usuário. Todos os items são associados à mesma função, menuItemSelected(id), que através da checagem do valor do código do item de menu (definido acima: CMD_ASK, CMD_GREET, etc.) saberá qual item foi clicado e tomará a ação necessária. O resultado final do trabalho da função setup() e seu arranjo do menu do widget pode ser visto na Figura 5:

Figura 5: Menu da aplicação, criado via JavaScript

var greeting = document.getElementById("greeting");
var asking = document.getElementById("asking");

if (window.widget)
  // congela a UI do widget e prepara-o para a transição
  widget.prepareForTransition("fade");			
greeting.style.display="none";		// esconde a DIV “greeting”
asking.style.display="block";		// “mostra a DIV “asking”
document.getElementById("body").style. 
backgroundColor = document.defaultView.getComputedStyle(asking, null).getPropertyValue('background-color'); //troca o valor da cor de fundo	
 
if (window.widget)
  // 
  setTimeout(‘widget.performTransition();’,0)

<div>
    <input type="button" value="Asking" onClick="doAsking();" />
    <input type="button" value="Greeting" onClick="doGreeting();" />
</div>

mItemAsk.onSelect = menuItemSelected;
mItemGreet.onSelect = menuItemSelected;
 
// handling menu events
function menuItemSelected(id)
{
	switch (id)
	{
	case CMD_ASK:
		doAsking();
		break;
	case CMD_GREET:
		doGreeting();
		break;
…
}

body {
	margin: 0;
	background-color: silver;
}
div#greetingText {
	font: 20px "Lucida Grande";
	font-weight: bold;
	text-align: center;
	color: #4D112A;
	position: absolute;
	top: 50px;
	left: 10px;
	width: 180px;
}
div#askingText {
	font: 20px "Lucida Grande";
	font-weight: bold;
	text-align: center;
	color: green;
	position: absolute;
	top: 50px;
	left: 10px;
	width: 180px;
}
div#greeting {
	display: block;
	background-color: silver;
} 
div#asking {
	display: none;
	background-color: white;
}
.link {
	font-size: 10px;
	font-weight: normal;
	text-align: center;
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Nokia//DTD PLIST 1.0//EN" "http://www.nokia.com/NOKIA_COM_1/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>DisplayName</key>
	<string>Hello World</string>
	<key>Identifier</key>
	<string>com.nokia.helloworld</string>
	<key>Version</key>
	<string>1.00</string>
	<key>MainHTML</key>
	<string>index.html</string>
</dict>
</plist>

//Carregamento do feed
 
function loadRSSFeed(url) {
  if (null == req) {
    req = new XMLHttpRequest();
  }  	
 
  req.onreadystatechange = ReqStateChange;
 
  req.open("GET", url, true);
  req.send(null); 
 
  document.getElementById("content").innerHTML = "Updating" + url; 
}
 
//Função chamada quando o request é retornado
function ReqStateChange() {
  if (req.readyState == 4) {
 
    if (req.status == 200) {
    	UpdateContent(req);
    } 
    else {
      alert("error");
    }
  }
}
 
//Interpretação do conteúdo e atualização do XML em formato RSS
function UpdateContent(reqst) {
  var d = null;
  var el = document.getElementById("content");
 
  document.getElementById("content").innerHTML = "Updating!";
 
  var rss = null;
 
  var html = "";
  rss = reqst.responseXML.documentElement;
 
  if (rss != null) {
    var itemTitleNodes = rss.getElementsByTagName("title");
    var itemLinkNodes = rss.getElementsByTagName("link");
    var itemDescNodes = rss.getElementsByTagName("description");
 
    var c=itemTitleNodes.length;
 
    el.innerHTML="Displaying " + c + " items...";
 
    if (c<=0) {
      return;
    };
 
    if (c>4) c=3; // limit to four stories
 
    for (var i = 0; i < c; i++) { 
      var itemLink, itemTitle, itemDesc;
 
      if ((itemTitleNodes[i+2].childNodes[0] != null) &&
	  (itemLinkNodes[i+2].childNodes[0] != null) &&
	  (itemDescNodes[i+1].childNodes[0] != null)) {
 
        itemTitle = itemTitleNodes[i+2].childNodes[0].nodeValue;
	itemLink = itemLinkNodes[i+2].childNodes[0].nodeValue;
	itemDesc = itemDescNodes[i+1].childNodes[0].nodeValue;
      }
      else {
        itemTitle = "RSS feed missing";
	itemLink = "???";
	itemDesc = "RSS broken";
      }
      html = html + "<div class='item'><div class='linking'
      onClick='widget.openURL(\"" + itemLink +
      "\");'>"+itemTitle+"</div></br><div
      class='description'>"+itemDesc+"</div></div></br>";
    }
  }
 
  el.innerHTML = html;
  html = null;
  el = null;
  req = null;
 
  d = document.getElementById("lastupdate");		
}