Criando aplicativos com Web Runtime(WRT) e Flash Lite para dispositivos Nokia

Colocado por Leonardo França na(s) categoria(s): 1, 2.0, 4, 6, Access, action, Actionscript, Adobe, api, Aplicativos, app, AR, Arquitetura, back, bar, BI, botão, browser, carregar, class, classe, Componente, comunicação, control, Curso, Cursos, custom, Desenvolvedor, desenvolvedores, Desenvolvimento, developer, Download, DRE, Dreamweaver, err, exemplo, externalInterface, Ferramenta, flash, flash lite, flash media, Flash Media Server, for, framework, FullScreen, function, geo, html, ide, IE, if, image, int, interface, Java, Javascript, JQuery, kit, label, library, lite, loop, mg, Microsoft, mobile, NaN, O, on, oop, painel, Pessoal, PHP, platform, player, Plugin, pt, RIA, Ria’s Geral, RTM, RTMP, runtime, screen, SDK, server, site, string, swf, tag, TAT, Tecnologia, template, Teste, tool, UI, uint, Ved, Visual Studio, wave, web, Widget, Widgets, XML em 10 28th, 2010 | Sem comentários

Web RunTime é uma das possibilidades que a Nokia [bb] oferece para criação de aplicativos para seus dispositivos movéis. Se você já é um desenvolvedor web, você não precisa de quase mais nada para começar a desenvolver para os dispositivos Nokia usando o WRT. Ele permite a criação de widgets para plataforma S60 sendo uma extensão do navegador Webkit permintindo que as instâncias do browser sejam executadas como se fossem aplicativos separados. E você ainda pode criar aplicativos mais ricos com o uso do Flash.

Ferramentas de desenvolvimento.
A Nokia oferece algumas ferramentas para facilitar o desenvolvimento para WRT:

Também oferece UI Framework e Library como:

Guarana WRT UI library – Uma library baseada em JQuery para o Nokia WRT feita pelo pessoal do INdT(Instituto Nokia de Tecnologia) com sede em Manaus.
Nokia Mobile Web Templates – Um conjunto de templates otimizados para mobile e para você customizar como quiser.

E tem algumas API’s para se trabalhar com os recursos dos dispositivos movéis.

Platform Service 2.0 – Uma API em JavaScript e ActionScript 2.0 para acessar recursos dos dispositivos movéis como acelerometro, geolocalização etc.
API Bridge – é um componente para aparelhos Nokia com Symbian, que permite widgets WRT, conteúdo Adobe Flash Lite e aplicações Java possam acessar recursos do dispositivo através de uma arquitetura plug-in. Os desenvolvedores podem estender o componente APIBridge com os seus próprios plug-ins.

Como funciona os widgets feitos com Web RunTime? esse widgets são arquivos com extensão .wgz que nada mais é que um arquivo compactado com os arquivos de seu site. Os arquivos que não podem faltar são:

Info.plist – arquivo responsavel pelas informações de seu widget como versão, pagina inicial, nome etc
index.html – na verdade, pode ser qualquer nome desde que esteja setado no Info.plist como MainHTML.

Criar widgets com WRT e Flash Lite
Como você usa html para criar seus widgets com WRT, nada impede de usar o Adobe Flash na mesma maneira de como você usa normalmente atraves do html. Vamos ver um exemplo usando JavaScript para fazer a comunicação com o Flash atraves da classe ExternalInterface. Nesse exemplo utilizarei o Nokia Web Developer Environment Standalone.

Crie um novo projeto do tipo Symbian web apps->Basic web app project. Dê um nome para seu projeto e clique em next. São gerados os arquivos basicos para seu projeto.

Daremos a opção do usuario escolher dois videos para tocar. Começaremos com o html contendo as opções de video.

PLAIN TEXT

XML:

<label for="select"></label>
      <select name="select" id="select">
        <option value="sample">sample.flv</option>
        <option value="sneeze">sneeze.flv</option>
      </select>
      <input type="button" name="button" id="button" value="Tocar" onclick="javascript:playVideo();" />

E o html que carregará o swf responsavél por tocar o video:

PLAIN TEXT

XML:

<object id="playerFlashLite" name="playerFlashLite" width="360" height="360" data="PlayerFlashLite.swf"
        allowscriptaccess=‘always’ 
        allowFullScreen=‘true’ 
        usefullscreen=‘true’ 
        type=‘application/x-shockwave-flash’ 
        loop=‘false’>
      </object>

Editaremos o arquivo basic.js para adicionar o método que mandará para o swf o video que deverá ser tocado.

PLAIN TEXT

JAVASCRIPT:

function playVideo()
{
    document.getElementById("playerFlashLite").playVideo(document.getElementById("select").value);
}

No Flash, criamos um arquivo do tipo Flash Lite 3.0 ou 3.1. No painel da library, clique em na opção “new Video”. Dê o nome de instancia de “vd”. Em type deixe selecionando “Video (ActionScript-controlled) e adicione no stage. Adicionaremos o seguinte codigo para que o Flash execute o video via stream a partir do Flash Media Server:

PLAIN TEXT

ACTIONSCRIPT:

import flash.external.*;
 
ExternalInterface.addCallback("playVideo",this,playVideo);
 
trace("init..");
var nc = new NetConnection();
nc.connect("rtmp://localhost/videoondemand");
 
nc.onStatus = function(info)
{
    trace("Level: " + info.level + " Code: " + info.code);
};
 
function playVideo(video:String)
{
    ns = new NetStream(nc);
    vd.attachVideo(ns);
    ns.play(video);
    ns.connect();
    txt.text = video;
    ns.onStatus = function(info)
    {
        trace("Level: " + info.level + " Code: " + info.code);
    };
}

Usamos a classe estatica ExternalInterface para que nosso método dentro do Flash possa ser chamado a partir do JavaScript. Executando o emulador do Nokia Web Developer, devemos ter algo parecido com isso:

Emulador Nokia Web Developer

Para gerar o arquivo .wgz, bastar clicar com o botão direito no projeto e pedir “Package Web app” e seu aplicativo está pronto para rodar no celular. Testei no Nokia 5230