BB10/ HTML5 / CSS3/ Mobile

Criando seu primeiro App com BBUI.js e Webworks para BB10

bb10

Uffa! Quem acompanha no twitter, viu que passei uma maratona para criar um App do zero para a plataforma BB10 gastando aproximadamente 29 horas, por simples 2 motivos.

1 – Conhecer o workflow de desenvolvimento da plataforma

2 – Ganhar um device específico para desenvolvedor.

Ok, minha aventura começa na quinta-feira as 10 da manhã, primeiro passo foi conhecer bem o webworks um SDK específico para a plataforma Blackberry desde a versão 5.0 em diante. Por que não o Phonegap? Veja só; Basicamente o phonegap funciona com muita coisa do webworks, então ao invés de tercerizar a API eu partir direto para a plataforma específica, não é assim que tem que ser a cadeia de distribuição? Alô administradores!

Antes que você leia todo o post, esse video abaixo mostra o que vamos fazer até o final do post.

Documentação

Primeira coisa que notei e me senti em casa, documentação, como estava acostumado com as documentações da Adobe, elas não fogem, vasta e muito bem detalhada, inclusive tem suporte a tudo quanto é tipo de desenvolvimento não só para HTML. A documentação mais completa acima de todas, sem dúvida é a do Cascades, que se fosse comparar à outras plataformas, seria a plataforma oficial.

Porém, a blackberry deixa bem claro na página de desenvolvedores, ela ama todas as tecnologias de desenvolvimento e ela deixa bem claro em sua página para os desenvolvedores.

A documentação do webworks é basicamente o empacotador, já que 80% da API do webworks é puramente HTML5. Isso mesmo! Não tem formula mágica, adorei essa parte do desenvolvimento por que frisa justamente a singularidade de uma só API. Claro que é importante notar que há exceções como toda regra, por exemplo APIs que são identicas ao HTML5.

O que é igual a api do HTML5:

  • Geo Localização
  • Captura de Midia( camera apenas)
  • Camera
  • File ( estrutura de arquivos)
  • Persistência de arquivos
  • Cache
  • Aceleração (acelerometro)
  • SMS, Chamar telefone, E-mail
  • Alerta ( javascript:alert(‘mensagem’);
  • Esquemas de URI

O que é específico da plataforma e requer o webworks de fato:

  • BBM
  • Calendário
  • Sensores( Giroscópio, Gravidade, Magnetometro, aproxiamção)
  • Toast
  • Microfone
  • Identity (para identificação do dispositivo)
  • Agenda de contatos
  • Pagamento ( in-App purchase)
  • Systema como nível de bateria e etc.

 

Comunidade e colaboratividade

Ambas andam juntos é claro, e a decisão dela de usar o Github para expor suas APIs, SDK de forma aberta ao público, facilitou ainda mais o trajeto do desenvolvedor aos seus SDK. Tanto é que existem repositórios completos só para listar contribuições dos desenvolvedores espalhados pelo mundo.

O mais importante não é nem os SDKs da Blackberry e sim o Github, você facilmente faz amizade com quem está por trás do projeto e vira e mexe você até contribui para melhorias. Essa idéia de social + código, foi um casamento da raposa, muito bem bolada!

bbuijs

BBUI.js Toolkit para aparência das Apps

Você já ouviu falar do Twitter Bootstrap, JQuery Mobile, Sencha Touch, Enyo, certo? Então adicione a lista o BBUI.JS, ele funciona só para os dispositivos da Blackberry, já que todo seu sistema de eventos é voltado para eventos do próprio navegador, se você tiver tempo, pode mudar a aparência, mais isso ai é meio que matar o Chinês achando que é barata. Sacô?!

É basicamente Javascript e extensívo uso do atributo data-bb-* . É um ponto de partida para você começar a criar algo que respeite o guia de interface da plataforma, só que não fique na regra, você pode mudar e usar o que você quiser.

[pullquote align=”left”]Você pode continuar usando seu framework preferido, lembre-se só da experiência mobile![/pullquote]

A parte de transições de telas built-in é bem legal, com vários efeitos pré fabricados e o mais interessante notar é a parte de navegação entre as telas, lembra muito o navigator do Flex Mobile; Só que usa de fato um Array simples para fazer o cast das telas pelo atributo data-bb-type=”screen”.

Na página do projeto, você encontra mais detalhes da documentação, como inicializar as coisas. Eu quero focar mais na parte Hello World! Quando você terminar de ler o post já sair com um App na mão.

Criando um App de demonstração

[note color=”#FFCC00″]No próprio site do Webworks, você encontra um guia passo-a-passo em inglês mais completo que este, se você quiser saber mais sobre como iniciar com o pé direito, vá direto ao site. http://developer.blackberry.com/html5/[/note]

Primeiro passo

Registre-se como desenvolvedor, é 0800, grátis, oba-oba, FREE, Paga não, Passe-livre.

Segundo passo

Requisite o acesso as chaves para assinar sua App, sem elas a festa não acontece. Elas funcionam para qualquer SDK que você vier usar.

[pullquote align=”left”]Dica importante: Lembre-se do PIN que você fornecer, esse PIN é uma espécie de RG.[/pullquote]

As chaves são obrigatória, elas tem um propósito: Assinar suas obras de arte “Seus Apps” para distribuição e teste.

Terceiro passo

Baixe o WebWorks, SDK Aqui. http://developer.blackberry.com/html5/download/ Dica( use a versão Gold, que é o botãozinho cor de ouro na página).
Para testes e desenvolvimento, vamos usar o Ripple Emulator, que é uma ferramenta para testes e emulação do seu HTML5 para dispositivos móveis, ele foi criado pela Blackberry (a.k.a RIM), e é hoje bastante utilizado.

[pullquote align=”left”]Siga as instruções de instalar o Ripple Emulator no Google Chrome.[/pullquote] Supondo que deu tudo certo nas suas instalações, siga as seguintes instruções:
Baixe as seguintes bibliotecas, elas são necessárias para iniciar o toolkit e acessar tags do HTML de forma mais fácil, ZeptoJS sem dúvida é a melhor para isso no ambito mobile, já que ele é leve, bem leve.

E quanto a ferramenta de desenvolvimento? Bom, use a que você achar melhor para editar páginas em HTML5, CSS3, Javascript. Eu gosto do Sublime Text. Mas não se apegue a esse detalhe, vai de sua escolha e ele não influencia o work-flow para esse exemplo.
Estrutura de uma App

É bem simples, basta ter um arquivo config.xml que é a espinha do projeto e um arquivo html para você indexar.

Vamos fazer o seguinte, veja um exemplo pronto de um arquivo de configuração de um projeto para criá-lo do zero.

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="1.0.0"
        id="com.apps.suaApp">
 
  <name>To-do-List</name>
  <content src="index.html" />
  <author rim:copyright="2013"
            href="http://www.igorcosta.com/"
            email = "igorcosta@gmail.com">Igor Costa</author>
 
 
  <description>Simples App com lista de tarefas, crie listas e tarefas especificas</description>
 
  <license href="http://www.apache.org/licenses/LICENSE-2.0">
        Licença caso sua App se aplique
  </license>
 
  <access uri="*" subdomains="true" />
  <access subdomains="true" uri="file:///store/home" />
  <access subdomains="true" uri="file:///SDCard" />
  <access subdomains="true" uri="local:///" />
 
  <feature id="blackberry.app">
        <param name="orientation" value="portrait" />
  </feature>
  <feature id="blackberry.app.event"/>
  <feature id="blackberry.system.event" />
  <feature id="blackberry.connection" />
  <feature id="blackberry.ui.toast" />
  <feature id="blackberry.ui.dialog" />
  <feature id="blackberry.io" />
  <feature id="blackberry.io.file" required="true" version="1.0.0.0" />
  <feature id="blackberry.utils"   required="true" version="1.0.0.0" />
  <feature id="blackberry.io.dir"  required="true" version="1.0.0.0" />
 
    <rim:splash src="splash-portrait-768x1280.png" />
    <rim:splash src="splash-landscape-1280x768.png" />
 
 
    <!-- para mais permissões visite 
    http://developer.blackberry.com/html5/documentation/rim_permit_element.html
	-->
    <rim:permissions>
        <rim:permit>access_location_services</rim:permit>
        <rim:permit>use_camera</rim:permit>
        <rim:permit>access_shared</rim:permit>
    </rim:permissions>
 
 
 </widget>

Salve esse arquivo com o nome config.xml em um diretório seu local, por exemplo localhost/bbui_app_exemplo
No mesmo diretório crie um arquivo de html, index.html como eu configurei ali acima para chamar logo que iniciar o arquivo index.html na tag content.

O arquivo config é bem simples e quase auto explicatório o que cada tag faz. A única coisa que você precisa ter em mente é que se você quer acessar a internet em domínios diferentes, a tag access te ajuda nisso, lembre-se de incluir sub-dominios caso exista.

Quarto passo

Criar a app propriamente. Quando você instala o Ripple Emulator no Chrome você pode usar a biblioteca do webworks direto na sua App, sem precisar colocar no diretório, já que você vai utiliza-lo para empacotar a App, basta fazer uma referência ao script dessa forma aqui.

<script type="text/javascript" src="local:///chrome/webworks.js"></script>

A estrutura do App ficou dessa forma.
[pullquote align=”left”]bbuijs-estrutura[/pullquote]

Para economizar tempo, use esse template que eu fiz do arquivo index.html, assim fica mais fácil de você replicar em sua própria máquina.

<!doctype html>
<html>
	<head>
	  <meta charset="utf-8">
	  <meta name="format-detection" content="telephone=no" />
	  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />  
	<title>Sua App</title>
 
	<!-- Estilos -->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/bbui.css" />
 
	<!-- Javascript -->
	<script type="text/javascript" src="js/lib/zepto.js"></script>
	<script type="text/javascript" src="js/lib/bbui.js"></script>
    <script type="text/javascript" src="local:///chrome/webworks.js"></script>
 
	</head>
 
	<body>
		<div>
 
		</div>
	</body>
</html>

Ok, estamos prontos para começar a criar o App, mais que App? Para o própsito desse post vamos fazer um App simples, uma TO-DO-LIST, carregamos de um banco de dados local usando Web Storage, editamos e adicionamos itens.

Antes de criar qualquer coisa, deixa eu explicar mais ou menos como funciona o BBUIjs.
bbuijs-estrutura2

Ok, o BBUI.js além do nome ser sugestivo ele já possui um esquema de navegação no próprio toolkit, como você pode ver ai na imagem acima, basicamente o que você precisar em termos de interface básica o próprio toolkit oferece, porém se você quer algo mais complexo, sugiro utilizar outro, ele atende a uma única e exclusiva vantagem de ter a aparência nativa de um App. Quando você termina ela fica tão bem polida que parece muito com um App nativo.

O navegador entre telas funciona muito bem, e já possui efeitos de transição entre elas como Fade,Slide Left/Right,Slide Up/Down. Se você quiser um efeito de carta (flip) por exemplo, ai você vai ter que implementar. Como ele não atende exclusivamente apenas ao BB10, é bom notar algumas particularidades. Esses detalhes você pode conferir no Wiki do projeto.

Para inicializar o toolkit, você precisa escutar o evento webworksready, quando estiver pronto você pode iniciar com esses parametros.

            var webworksreadyFired = false;
            document.addEventListener('webworksready', function(e) {
 
                if (webworksreadyFired) return;
                webworksreadyFired = true;
                app.initialize(); //phonegap
 
                bb.init({actionBarDark: true,
                        controlsDark: true, // controles são pretos ou brancos
                        listsDark: false, // usar uma lista escura
                        bb10ForPlayBook: false, // é para playbook ou não
                        highlightColor: '#00A8DF', // cor de alguns elementos
                        onscreenready : function(element,id,params){
                            // use essa função para criar algum argumento
                        },
                        ondomready : function(element,id,params){
                          // depois que o DOM da tela estiver pronto você pode disparar algum evento antes 
                         // da tela ficar pronta.
                        }
 
                        });
 
                 // Depois de iniciado, chame a tela principal do App.
                 bb.pushScreen('Main.html', 'MainScreen');
            }, false);

Quinto passo

bbuijs-app-estrutura

Vou adotar essa estrutura de navegação do App. Simples e direta.

Como é que se cria as telas? Basicamente por esquema de atributo, o toolkit basicamente usa o atributo data-bb-* para definir as coisas.

Crie os .html conforme mostra a imagem e defina o HTML de cada um deles da seguinte forma.

<div data-bb-type="screen" data-bb-indicator="true" data-bb-back-caption="Voltar">
 
</div>

Para navegar entre as telas basta eu usar o método pushScreen(‘pagina.html’,’idPagina’); Por dentro do toolkit ele faz um popScreen() da tela atual e retorna com a tela anterior.

Então aqui vai o código atual das páginas que tenho.

index.html

<!doctype html>
<html>
	<head>
	  <meta charset="utf-8">
	  <meta name="format-detection" content="telephone=no" />
	  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />  
	<title>Sua App</title>
 
	<!-- Estilos -->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/bbui.css" />
 
	<!-- Javascript -->
	<script type="text/javascript" src="js/libs/zepto.js"></script>
	<script type="text/javascript" src="js/libs/bbui.js"></script>
    <script type="text/javascript" src="local:///chrome/webworks.js"></script>
    <script type="text/javascript">
            var webworksreadyFired = false;
            document.addEventListener('webworksready', function(e) {
 
                if (webworksreadyFired) return;
                webworksreadyFired = true;
                bb.init({actionBarDark: true,
                        controlsDark: true,
                        listsDark: false,
                        bb10ForPlayBook: false,
                        highlightColor: '#C82C29',
                        onscreenready : function(element,id,params){
                        },
                        ondomready : function(element,id,params){
                        }
 
                        });
                 bb.pushScreen('Main.html', 'MainScreen');
            }, false);
 
        </script>          
	</head>
 
	<body>
		<div>
 
		</div>
	</body>
</html>

Tela Main.html

<div data-bb-type="screen" data-bb-indicator="true">
	<div data-bb-type="title" data-bb-caption="Principal"></div>
 
	 <ul>
	     <li><a href="#" onClick="bb.pushScreen('Listas.html','ListaScreen')"  title=""> ir para Lista de Tarefas</a></li>
	     <li> <a href="#" onClick="bb.pushScreen('Sobre.html','SobreScreen')"  title=""> ir para Sobre Tela</a> </li>
	     <li><a href="#" onClick="bb.pushScreen('Tarefas.html','ListaScreen')"  title="">ir para Tarefa</a></li>
	 </ul> 
</div>

Telas Sobre.html

<div data-bb-type="screen" data-bb-indicator="true">
	<div data-bb-type="title" data-bb-caption="Tarefas" data-bb-back-caption="Voltar"></div>
</div>

Telas Listas e Tarefas possuem o mesmo código fonte

<div data-bb-type="screen" data-bb-indicator="true">
	<div data-bb-type="title" data-bb-caption="Tarefas" data-bb-back-caption="Voltar"></div>
 
	<div data-bb-type="image-list" data-bb-images="none" data-bb-style="arrowlist">
		 <div data-bb-type="header">Lista de tarefas para fazer</div>
		 <div data-bb-type="item"  data-bb-accent-text="Strength" data-bb-title="Item 01">Descrição</div>
	</div>
</div>

Ok, interface montada, veja o que você tem até agora.

Sexto passo

Já que você tem montado as telas, hora de começar a programa-las, para persistência de banco de dados eu fiz uma classe em Javascript de forma literal, igual como você faz na declaração de um objeto JSON.

/* Copyright 2013 Igor Costa
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this db except in compliance with the License.
 You may obtain a copy of the License at
 
   http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 
 
Simple class for WebStorage persistence, not big deal. Just for to-do-list demo
*/
var Db = {
	currentList:'',
	db : window.openDatabase('geba','0.1','Banco de dados simples para um App de to-do-list',2*1024*1024),
	listaSQL : 'CREATE TABLE IF NOT EXISTS listas (id  INTEGER,lista_nome TEXT NOT NULL, cor_lista TEXT NOT NULL DEFAULT "#f2f2f2",data_criada TEXT NOT NULL, PRIMARY KEY (id))',
	tarefasSQL: 'CREATE TABLE IF NOT EXISTS tarefas(id INTEGER,tarefa_nome  TEXT,completa  REAL,data_criada  TEXT,lista_id  INTEGER NOT NULL,PRIMARY KEY (id),FOREIGN KEY (lista_id) REFERENCES listas (id))',
	open : function () {
			try{
				if (window.openDatabase) {
					if(this.db != null){
						this.db.transaction(
				        function (transaction) {
				        	var demoData = new Date();
				        	// preload de 1 lista e 1 tarefa
				        	transaction.executeSql(Db.listaSQL, [], this.onSucess, this.errorHandler);
				        	transaction.executeSql(Db.tarefasSQL, [], this.onSucess, this.errorHandler);
				        	//To insert new records in the first demo, uncomment this than comment again.
				        	//transaction.executeSql('INSERT INTO listas (id,lista_nome,cor_lista,data_criada) VALUES (1,"Lista Demo","#aa0000","'+demoData+'")',[],Db.onSucess, Db.errorHandler);
				        	//transaction.executeSql('INSERT INTO tarefas (tarefa_nome,completa,data_criada,lista_id) VALUES ("Primeira tarefa demo","true","'+demoData+'",1)',[],Db.onSucess, Db.errorHandler);
				        	//transaction.executeSql('INSERT INTO tarefas (tarefa_nome,completa,data_criada,lista_id) VALUES ("Segunda tarefa demo","true","'+demoData+'",1)',[],Db.onSucess, Db.errorHandler);
				        	//transaction.executeSql('INSERT INTO tarefas (tarefa_nome,completa,data_criada,lista_id) VALUES ("Terceira tarefa demo","true","'+demoData+'",1)',[],Db.onSucess, Db.errorHandler);
				        });
				    }	
				}else{
					var msgSupport = "Doesn't support WebStorage";
					alert(msgSupport);
					console.log(msgSupport);
				}
 
			}catch(e){
					printMsg();
			}
	},
	close : function (){
 
	},
	executeSQL : function (sql){
 
	},
	editRecord : function (object){
 
	},
	deleteTarefa : function (id){
		try{
 
			this.db.transaction(
				        function (transaction) {
 
				        	transaction.executeSql('DELETE FROM tarefas WHERE id=?',[id], Db.onDeleteTarefaSucess, Db.errorHandler);
				        });	
 
 
		}catch(e){
			printMsg();
		}
	},
	onDeleteTarefaSucess : function (e,result){
			document.getElementById('myTarefasList').refresh();
			Db.getTarefas(Db.currentList);
			Db.toast('Tarefa Apagada');
 
	},
	addNewLista : function (name){
		try{
 
			this.db.transaction(
				        function (transaction) {
				        var demoData = new Date();	
				        	transaction.executeSql('INSERT INTO listas (lista_nome,cor_lista,data_criada) VALUES (?,"#aa0000","'+demoData+'")',[name],Db.onSucess, Db.errorHandler);
				        });	
 
			bb.pushScreen('Listas.html','ListaScreen');
		}catch(e){
			printMsg();
		}			
	},
	getListas : function (){
		try{
			this.db.transaction(
				        function (transaction) {
				        	transaction.executeSql('SELECT * from listas',[],Db.onListaSucess, Db.errorHandler);
				        });	
 
		}catch(e){
			printMsg();
		}
	},
	onListaSucess : function (e,result){
				var response = [];
				var len = result.rows.length, i;
				var render;
				  for (i = 0; i < len; i++) {
				   var item = result.rows.item(i);
 
				         render =  document.createElement('div');
					     render.setAttribute('data-bb-type','item');
					     render.setAttribute('data-bb-title',item.lista_nome);
					     render.setAttribute('data-itemid',item.id);
					     render.innerHTML = "Total de tarefas " +item.total;
					     render.setAttribute('data-bb-img','imgs/tag.png');
					     render.addEventListener('click',function(){
					     	bb.pushScreen('Tarefas.html','TarefasScreen',{listaid:$(this).data('itemid')});
					     });
					     response.push(render);
 
				  }document.getElementById('myLists').refresh(response);// voodoo!
	}
	,
	addNewTarefa : function (name){
		try{
 
			this.db.transaction(
				        function (transaction) {
				        var demoData = new Date();	
				        	transaction.executeSql('INSERT INTO tarefas (tarefa_nome,data_criada,lista_id) VALUES (?,"'+demoData+'",'+Db.currentList+')',[name],Db.onSucess, Db.errorHandler);
				        });	
 
			bb.pushScreen('Tarefas.html','TarefasScreen',{listaid:Db.currentList});
		}catch(e){
			printMsg();
		}			
	},
	getTarefas : function (id){
		try{
			Db.currentList = id;
			this.db.transaction(
				        function (transaction) {	
				        	transaction.executeSql('SELECT * FROM tarefas WHERE lista_id = ?',[id],Db.onTarefaSucess, Db.errorHandler);
				        });	
 
 
		}catch(e){
			printMsg();
		}
	},
	onTarefaSucess : function (e,result){
		var response = [];
				var len = result.rows.length, i;
				var render;
				  for (i = 0; i < len; i++) {
				   var item = result.rows.item(i);
				         render =  document.createElement('div');
					     render.setAttribute('data-bb-type','item');
					     render.setAttribute('data-bb-title',item.tarefa_nome);
					     render.setAttribute('data-itemId',item.id);
					     render.innerHTML = "Total de tarefas " +item.data_criada;
					     render.setAttribute('data-bb-img','imgs/bookmark.png');
					     $(render).swipeRight(function (){Db.deleteTarefa(item.id);});
					     response.push(render);
 
				  }document.getElementById('myTarefasList').refresh(response);// voodoo!
	},
	errorHandler: function (transaction, error){
		console.log(error);
		 	if (error.code==1){
		 	} else {
			    console.log('Oops.  Error was  '+error.message+' (Code '+error.code+')');
		 	}
		    return false;
	},
	onSucess: function(e,result){
	 return result;
	},
	printMsg : function (){
			var msg = "Can't open Database" + ' Error: ' + e.error;
			alert(msg);
			console.log(msg);
	},
	toast : function (msg, timeout){
 
		  if(typeof timeout == 'undefined') {
		    timeout = 1000;
		  }
 
		  // toast options
		  options = {
		    timeout: timeout
		  };
 
		  // display the toast message
		  toastId = blackberry.ui.toast.show(msg, options);
	}
}

Como cada função é bem específica para o exemplo,à medida que eu for implementando os métodos eu vou colocando na classe.

O banco de dados é hiper simples, veja a estrutura.

db-todolist

E aqui está o script para você executar.

CREATE TABLE IF NOT EXISTS "listas" (
"id"  INTEGER,
"lista_nome"  TEXT NOT NULL,
"data_criada"  TEXT NOT NULL,
PRIMARY KEY ("id")
);
CREATE TABLE IF NOT EXISTS "tarefas" (
"id"  INTEGER,
"tarefa_nome"  TEXT,
"cor_tarefa" TEXT,
"completa"  REAL,
"data_criada"  TEXT,
"lista_id"  INTEGER,
PRIMARY KEY ("id"),
CONSTRAINT "lista_id_fk" FOREIGN KEY ("lista_id") REFERENCES "listas" ("id") ON DELETE RESTRICT ON UPDATE RESTRICT
);

Em fim, até ai já fizemos a persistência, falta agora só navegar, e para simplificar, eu criei uma classezinha em literal para fazer o trabalho.

var navigatorController =  {
	openMain : function (){
		 var webworksreadyFired = false;
            document.addEventListener('webworksready', function(e) { 
               if (webworksreadyFired) return;
                webworksreadyFired = true;
                bb.init({actionBarDark: true,
                        controlsDark: false,
                        listsDark: false,
                        bb10ForPlayBook: false,
                        highlightColor: '#C82C29',
                        onscreenready : function(element,id,params){
                        	if(id == "ListaScreen")
                        	{
                        		Db.getListas();
                        	}
                        	if(id == "TarefasScreen")
                        	{
                        		 Db.getTarefas(params.listaid);
                        	}
                        	if(id == 'NewTarefaScreen')
                        	{
 
                        	}
                        },
                        ondomready : function(element,id,params){
 
                        }
 
                        });
                bb.pushScreen('Main.html', 'MainScreen');
				Db.open();
            }, false);
	},
	openSobre : function (){
		bb.pushScreen('Sobre.html','SobreScreen');
	},
	openConfig : function (){
		bb.pushScreen('Config.html','ConfigScreen');
	},
	openListas : function (){
		bb.pushScreen('Listas.html','ListaScreen');
	},
	newLista : function (){
 
			bb.pushScreen('NovaLista.html','NewListScreen');
	},
	saveNewLista : function (){
			Db.addNewLista($('#listaInputName').val());
 
	},
	newTarefa : function (){
			bb.pushScreen('NovaTarefa.html','NewTarefaScreen',{mode:true});
	},
	saveNewTarefa : function (){
			Db.addNewTarefa($('#tarefaInputName').val());
	}
}

Pontos negativos

Coloque em prática seus conhecimentos em Javascript e CSS3, por que muita coisa você vai precisar criar do zero, alguns componentes como o datePicker por exemplo ou um Numeric Stepper, algo como um Slider horizontal de imagens, Item renders para itens da lista, nada que não seja possível, vai dar só mais um pouco de trabalho e não fica com aquela coisa de out-of-the-box (tudo pronto).

O próprio toolkit tem muito código da própria comunidade como por exemplo o iScroll que foi utilizado para navegar entre as telas e nas listas. O legal é você poder hacker o código.

A performance não é 100%, eu testei a geração de efeitos com o context do Canvas e realmente leva-se de 2 a 3 segundos para aplicar um efeito a uma imagem, coisa que em um desktop no Chrome por exemplo é instantaneo, provavelmente seja a versão do webkit que esteja sendo utilziada, acredito que isso só o tempo pode dizer se eles vão melhorar esse item específico ou não.

Condeirações finais

É um pouco trabalhoso usar o BBUIJS, mais o acabamento final do projeto, é fantástico, por que você tem a exata idéia de estar criando um App com aparência nativa do sistema OS e isso meu amigo leitor, é fantástico. Porém nada lhe impede de usar outros toolkits de inicalização.

Código fonte disponível no Github

O código fonte dessa App você pode fazer o Fork no Github, a licença do projeto é via licença Apache.

https://github.com/igorcosta/bbuijs-todolist-demo

3 thoughts on “Criando seu primeiro App com BBUI.js e Webworks para BB10

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *