Categorias
HTML5 Mobile Dev Group São Paulo Tutoriais

Entenda todos os pontos do certificado Built for BlackBerry

header-post

Lançamos o desafio no início desse mês o Built for BlackBerry Brazil Challenge 2013, com uma premiação total de R$ 25.000,00. Divididas em 4 grupos, AIR , Cascades, HTML5 e o Dev Group com maior números de apps. Para quem não conhece o Built for BlackBerry é uma selo da BlackBerry que certifica que sua aplicação segue os padrões de qualidade da empresa. Além do desafio que é um bom incentivo, os números mostram que as aplicações Built for BlackBerry tem um acréscimo de até 300% em seus downloads. Isso é possível com os benefícios fornecidos pela BlackBerry, destaque nas mídias sociais, media digital, e-mail marketing e destaque na loja.

Ótima notícia!

Mas o que classifica uma aplicação como “Built for BlackBerry“? Nesse post vou listar os pontos necessários para eleger sua aplicação como “Built for BlackBerry”. Aplicativos de produtividade, lifestyle apps, games, independente de sua categoria podem ser submetidos. Uma das condições básicas que seu aplicativo precisa, é ser escrito em uma das três opções: Adobe AIR, SDK Nativo ou WebWorks. Aplicativos Android, web launchers ou aplicativos simples como leitores de Feed RSS, não são elegíveis para o programa.

Critérios

Inicialmente o aplicativo necessita estar aprovado na loja da BlackBerry World e os pontos analisados serão:

  • Benefícios ao usuário
  • Experiência do usuário(UX)
  • Performance
  • Segurança
  • Integração de serviços

Benefícios ao usuário

– Proporcionar entretenimento, esse ponto não se limita apenas aos jogos.
– A aplicação deve aumentar a produtividade dos usuários de forma sutil.
– Facilitador da comunicação do usuário, o aplicativo deve fornecer recursos para compartilhar seu conteúdo facilmente. Esse ponto não é obrigatório em jogos.
– Esteticamente agrável

Experiência do usuário(UX)

Experiência do usuário é um ponto fundamental para o sucesso de sua aplicação. O programa lista os seguintes pontos referente a experiência do usuário:

– Siga as diretrizes de User interface(UI) do BlackBerry 10, se ainda não conhece você pode conferir aqui: https://developer.blackberry.com/design/bb10/
– Utilizar o framework do BlackBerry 10 com cascades, não garante que você esta respeitando as guia de UI
– Adicione ajuda e dicas ao longo de sua app para guiar o usuário utilizar sua aplicação
– Utilize uma estética agradável, gráficos com boa qualidade.
– Faça bom uso da tela, concentrando-se no conteúdo.

Navegação da aplicação
A UI de sua aplicação deve tornar fácil para o usuário realizar as principais tarefas.

– Coloque as ações mais importantes e freqüentes em um local de fácil acesso, utilizando “Action bar” e “Tab Menu”
– Mantenha a ações menos freqüentes e ações muito específicas no Action Menu.
– Utilize o recurso de touch-and-hold para ativar o menu de contexto para acesso direto a opções específicas ao conteúdo selecionado.
– Utilize o Application Menu para ações globais na aplicação, exemplo, help, configurações ou logoff(exceto para games).
– Crie controles personalizados para funções específicas de sua aplicação, claro seguindo a experiência do BlackBerry 10, exemplo:

– Crie atalhos para funcionalidades para uma interação mais fluida, utilizando comandos de teclado.
– Economize espaço, evite duplicação de ações ou menus.

Progress Feedback
Os usuários devem perceber o andamento das atividades de sua aplicação, dê o feedback quando sua aplicação estiver processando algo, não forneça uma tela totalmente preta sem nenhuma resposta. Os indicadores de progresso são sempre uma ótima opção, mas otimize seu código ao máximo para reduzir a presença deles e só utilizar quando necessário.

Performance

Desempenho de sua aplicação é crucial para uma boa experiência do seu usuário, para receber a certificação seu app passará por uma série de teste sobre performance.

– Sua aplicação deve gerenciar o uso de CPU de forma inteligente. Se o seu aplicativo faz alto uso da CPU do device isso irá impactar no alto consumo de sua bateria.
– Teste de desempenho de memória, irão verificar em seu app se ele está com vazamento de memória.
– Testes de redes, sua aplicação deve fazer um acesso a dados externos de forma otimizada, para evitar altos custos de dados para os usuários.
– Tratamento para execução em background, ponto importante para gerir o acesso aos recursos do dispositivo. Somente aplicativos das categorias citadas a seguir podem fazer uso de recursos rodando em segundo plano:

  • Streaming de áudio
  • Reprodução de áudio local
  • Conexões que exigem acessos periódicos para manter o serviço ativo
  • Acesso periódicos a determinado conteúdo que demanda a necessidade de estar sempre atualizado.
  • Serviços de gravação
  • Comunicação com GPS
  • Comunicação com DLNA e HDMI
  • Comunicação via USB
  • Monitoramento de conexão ou periférico
  • Tarefas de longa duração, exemplo, editores de vídeo, downloads ou descompactadores
  • Conexões de curto alcance(Bluetooth, Wi-Fi, NFC)

Integração com os serviços do BlackBerry 10

Para qualificar seu app no programa Built for BlackBerry, ele precisa conter pelo menos uma integração com os serviços do BlackBerry 10, são eles:

Serviço de pagamento, a plataforma BlackBerry 10 fornece este recurso para aumentar os lucros de seu aplicativo, onde é possível implementar um sistema de cobrança compatível com o seu app, exemplo, uma assinatura anual para conteúdo especial, pacote de serviços extras, versão premium de seu app sem publicidade.

Plataforma Social BBM, os possibilidades de integração com o BBM são inúmeras, com a API é possível, acessar contatos, perfis de usuários, bate-papo e compartilhamento de arquivos.

Serviço de publicidade, este serviço da BlackBerry é uma ótima forma de obter receita para a sua aplicação.

Serviço de Analytics, é fornecido gratuitamente pela Webtrends é uma ótima ferramenta de analise para melhoria do seu app.

Locate Service, ajuda a fornecer aos clientes a capacidade de informações sobre a sua localização, mesmo com a ausência de GPS, ótimo recurso que consome menos bateria comparado ao GPS.

Serviços de mapa, orientar o usuário sobre os seus arredores, destacar pontos de interesse.

Push notification, oferece uma maneira eficiente e confiável de enviar notificações ao usuário. Também permite a sua aplicação processar alertas em segundo plano. Cuidado na utilização desse recurso para não aborrecer o usuário.

Invocation Framework, permite que sua aplicação invoque outra aplicação para agilizar uma tarefa específica, exemplo, chamar o browser para abrir um site web ou facebook para compartilhar um conteúdo específico.

NFC, é elemento chave para comunicação entre outras plataformas que suportam a tecnologia, permite a troca de dados através de uma aproximação dos aparelhos.

Segurança

Questões de segurança são simples e diretas, Não prejudique o cliente. São listados 4 pontos:
1 – Não transmita as senhas em texto puro.
2 – Não faça transações monetárias desconhecidas.
3 – Não utilizar os dados de seu usuário de forma maliciosa.
4 – Fornecer uma política de privacidade.

Idiomas

Infelizmente o Português não está elegível para o Built for BlackBerry, caso queria submeter sua aplicação para o programa ela deve conter um dos idiomas abaixo:

  • Inglês
  • Francês
  • Italiano
  • Alemão
  • Espanhol

*No caso de um app em português ela precisa ter duas versões uma em inglês e outra em português.

Games

Alguns pontos listados acima não são obrigatório para games, por passar uma avaliação mais subjetiva, além disso precisa atender os seguintes critérios:

Game Engine, seu game der ser desenvolvido do forma nativa ou utilizar uma engine como, Gameplay, Unity, marmalade, Shiva ou Cocos2d-x. No caso de utilização de uma egine proprietária, mais testes para avaliação de qualidade serão realizados.

Análise por avaliação na loja, seu aplicativo precisa ter pelo menos de 4 a 5 estrelas em sua avaliação na BlackBerry World.

Fechamos aqui todos os pontos analizados para o desenvolvedor submeter sua aplicação para o programa Built for BlackBerry. O manager Alexandre Cisneiros já tinha feito um post anteriormente sobre o Built for BlackBerry sobre um projeto modelo que foi adicionado o github da blackberry:

http://localhost/blackberrydeveloper/categorias/html5/quer-criar-apps-built-for-blackberry-com-html5-comece-por-aqui/

No youtube oficial da BlackBerry temos alguns vídeos do JAM America sobre integração de serviços :

Temos o vídeo da palestra do Demian sobre questões de UI/UX para o programa:

Esse vídeo dá dicas para ter seu app aprovado no programa:

Categorias
HTML5 Mobile Dev Group São Paulo Tutoriais

Listando dados com bbUI.js

Continuando a série de posts sobre bbUI, neste post vamos falar sobre listagem de dados com bbUI. O primeiro post foi uma introdução, onde vimos como carregar o bbUI e mostramos alguns recursos básicos referentes a layout.

Antes de iniciar o tutorial, algumas informações:

  • Caso ainda não viu o link sobre introdução ao bbUI clique aqui.
  • Para acompanhar os exemplos deste tutorial, você pode baixar no github

Neste tutorial vamos ver que o bbUI fornece dois principais formatos de listagem de dados: Image List e Grid Image List. Mas com esses dois formatos podemos personalizar como o conteúdo será exibido. Um exemplo que tivemos no tutorial anterior, o botão temos a opção de utiliza-lo com “apenas texto”, “texto e imagem” ou “somente imagem”. Então temos o mesmo item com 3 opções de visualização essa regra também se aplica aos itens de listagem de dados.

Primeiro precisamos criar o nosso arquivo config.xml:

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="2.0.0.1" id="tutorial-listas">

  <author href="http://www.example.com/"
          rim:copyright="Copyright 1998-2012 Pessoal">Pessoal</author>

  <name>Tutorial BbbUI Listas</name>

  <description>
	 Tutorial sobre listar com bbUI
  </description>

  <rim:permissions>
    <rim:permit>access_shared</rim:permit>
  </rim:permissions>

  <icon src="img/dev-group.png"/>

  <content src="index.html" rim:allowInvokeParams="true"/>
  <feature id="blackberry.ui.dialog"/>

  <feature id="blackberry.app"/>
  <feature id="blackberry.app.event"/>
  <feature id="blackberry.ui.contextmenu"/>

  <access uri="http://localhost/blackberrydeveloper" subdomains="true">
    <feature id="blackberry.app" required="true" version="1.0.0"/>
    <feature id="blackberry.invoke" required="true" version="1.0.0"/>
  </access>

</widget>

Apenas comentar um detalhe em nosso config.xml para as últimas linhas que sinalizam que nosso aplicativo irá acessar um conteúdo externo que estará presente no site do nosso grupo.

Agora vamos criar nosso index.html e ficará da seguinte forma :

<!DOCTYPE html>
<html>
	<head>

		<title>Tutorial listas com bbUI</title>

		<link rel="stylesheet" type="css/text" href="css/bbui-min.css"></link>
		<script type="text/javascript" src="local:///chrome/webworks.js"></script>
		<script type="text/javascript" src="js/bbui-min.js"></script>
		<script>
			document.addEventListener("webworksready", function(e){
					bb.init();
					bb.pushScreen("tutorial-menu.html", "tutorial-menu");	
				},false);
		</script>
	</head>
	<body>
	</body>
</html>

No nosso arquivo index.html inicializamos o bbUI com a função bb.init() e carregamos o arquivo menu-lista.html, essa etapas já foram abordadas no tutorial anterior sobre bbUI.js, caso tenha alguma dúvida acesse o link.

Agora vamos ver o código da primeira tela:

<div data-bb-type="screen" data-bb-effect="slide-left">
	<div data-bb-type="title" data-bb-caption="Tutorial sobre listas com bbUI.js" ></div>

	<div data-bb-type="image-list" data-bb-images="none">
		<div data-bb-type="header">Menu Tipos de Lista</div>
		<div data-bb-type="item" data-bb-title="Lista Com Imagens" onclick="bb.pushScreen('lista-imagem.html', 'lista-imagem');">
			Descrição 1
		</div> 
		<div data-bb-type="item" data-bb-title="Lista com Setas" onclick="bb.pushScreen('lista-setas.html', 'lista-setas');">
			Descrição 2
		</div> 
		<div data-bb-type="item" data-bb-title="Lista em Grid" onclick="bb.pushScreen('lista-grid.html', 'lista-grid');">
			Descrição 3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
		</div> 
	</div>

</div>

No arquivo acima temos nossa screen com efeito de entrada “slide-left”, a primeira div dentro de nossa “screen” é um título(data-bb-type=”title”) com o texto “Menu Tipos de Lista”.

Image List(somente texto)

Após o título temos nosso primeiro exemplo de lista, ela é identificada pela propriedade data-bb-type=”image-list” ela define que vamos trabalhar com lista de imagens, o segundo atributo da minha lista é data-bb-images=”none” ele sinaliza que minha lista não irá conter imagens, ou seja, será apenas uma lista com texto.

Definindo a nossa div como lista de imagem agora temos que seguir a lógica, dentro da lista de imagens devemos ter os nossos itens. No exemplo acima eu criei uma cabeçalho para minha lista, utilizando uma div com o atributo data-bb-type=”header”. Após o cabeçalho adicionei os itens da minha lista marcados com o atributo data-bb-type=”item”, agora o bbUI vai passar a reconhecer esse elemento como item da minha lista.

Dentro dos nossos itens trabalhamos com mais duas propriedades, o título do meu item com a propriedade data-bb-title e a ação de click com a propriedade onclick que utilizamos para abrir as próximas telas do nosso tutorial. Dentro da div do meu item ainda temos a possibilidade de trabalhar com uma descrição do meu item. e o resultado vai ser o seguinte :

Como podemos ver a imagem acima, o último item, adicionei uma descrição maior, o texto estoura mas o bbUI realiza o tratamento adicionando “…” ao final do texto.

A primeira tela servirá de menu para os outros exemplos, agora vamos trabalhar a segunda tela o arquivo ‘lista-imagem.html’, ele vai fazer uma listagem simples de alguns dados, para esse exemplo eu vou listar os dev groups BlackBerry com nome e a bandeira do estado do grupo correspondente. E o código vai ficar da seguinte forma:

<div data-bb-type="screen" data-bb-effect="slide-left">
	<div data-bb-type="title" data-bb-caption="Tutorial sobre listas com bbUI.js" ></div>
	<div data-bb-type="image-list">
		<div data-bb-type="header"> BlackBerry Developer Groups </div>
		<div data-bb-type="item" data-bb-img="img/estados/ico-se.jpg" data-bb-title="DEV Group Aracajú" onclick="bb.pushScreen('grupo-se.html', 'grupo-se')">Saiba Mais</div>
		<div data-bb-type="item" data-bb-img="img/estados/ico-mg.jpg" data-bb-title="DEV Group Belo Horizonte" onclick="bb.pushScreen('grupo-mg.html', 'grupo-mg')">Saiba Mais</div>
		<div data-bb-type="item" data-bb-img="img/estados/ico-df.jpg" data-bb-title="DEV Group Brasília" onclick="bb.pushScreen('grupo-df.html', 'grupo-df')"></div>
		<div data-bb-type="item" data-bb-img="img/estados/ico-sp.jpg" data-bb-title="DEV Group Campinas"></div>
		<div data-bb-type="item" data-bb-img="img/estados/ico-pr.jpg" data-bb-title="DEV Group Curitiba"></div>
		<div data-bb-type="item" data-bb-img="img/estados/ico-sc.jpg" data-bb-title="DEV Group Florianópolis"></div>
		<div data-bb-type="item" data-bb-img="img/estados/ico-pr.jpg" data-bb-title="DEV Group Franscisco Beltrão"></div>
		<div data-bb-type="item" data-bb-img="img/estados/ico-al.jpg" data-bb-title="DEV Group Maceió"></div>
		<div data-bb-type="item" data-bb-img="img/estados/ico-pe.jpg" data-bb-title="DEV Group Recife"></div>
		<div data-bb-type="item" data-bb-img="img/estados/ico-rj.jpg" data-bb-title="DEV Group Rio de Janeiro"></div>
		<div data-bb-type="item" data-bb-img="img/estados/ico-sp.jpg" data-bb-title="DEV Group São Paulo" onclick="bb.pushScreen('dados-sp.html', 'dados-sp')">Saiba Mais</div>
		<div data-bb-type="item" data-bb-img="img/dev-group.png" data-bb-title="Listagem em grid" onclick="bb.pushScreen('lista-grid.html', 'lista-grid')">Clique aqui</div>
		<div data-bb-type="item" data-bb-img="img/dev-group.png" data-bb-title="Voltar para o menu principal" onclick="bb.pushScreen('tutorial-menu.html', 'tutorial-menu')"></div>
	</div>
	<div data-bb-type="action-bar" data-bb-back-caption="Voltar"></div>
</div>

Lista com imagem

No exemplo acima temos um “image-list” agora utilizando imagens, isso definido através da propriedade “data-bb-img” não muda muito do nosso código anterior, somente tem um volume maior de informação. E o resultado do código acima foi o seguinte:

Detalhe importante sobre os tamanhos das imagens para image-list cada versão do OS tem um tamanho específico:

  • BlackBerry 5 & 6 – 60 x 60 pixels
  • BlackBerry PlayBook & BlackBerry 7 – 70 x 70 pixels
  • BlackBerry PlayBook with BB10 styling – 64 x 64 pixels
  • BlackBerry 10 – 109 x 109 pixels

No código acima apenas 2 itens da lista tem ações de clique, mas vamos trabalhar com eles mais pra frente.

O terceiro modelo de listagem está presente no arquivo “lista-setas.html” e ele está escrito da seguinte forma:

<div data-bb-type="screen" data-bb-effect="slide-left">
	<div data-bb-type="title" data-bb-caption="Tutorial sobre listas com bbUI.js" ></div>
	<div data-bb-type="image-list" data-bb-style="arrowlist" data-bb-images="none">
		<div data-bb-type="header"> Catergorias do Site BlackBerry Developer Brasil </div>

		<div data-bb-type="item" data-bb-title="AIR" onclick="window.open('http://localhost/blackberrydeveloper/categorias/adobe-air/')"></div> 
		<div data-bb-type="item" data-bb-title="ANDROID" onclick="window.open('http://localhost/blackberrydeveloper/categorias/androidjava/')"></div> 
		<div data-bb-type="item" data-bb-title="CASCADES" onclick="window.open('http://localhost/blackberrydeveloper/categorias/cascades-e-c/')"></div> 
		<div data-bb-type="item" data-bb-title="EVENTOS" onclick="window.open('http://localhost/blackberrydeveloper/eventos/')"></div>
		<div data-bb-type="item" data-bb-title="HTML5" onclick="window.open('http://localhost/blackberrydeveloper/categorias/html5/')"></div>
		<div data-bb-type="item" data-bb-title="TODAS" onclick="window.open('http://localhost/blackberrydeveloper/categorias/todas/')"></div> 
	</div>
	<div data-bb-type="action-bar" data-bb-back-caption="Voltar"></div>
</div>

Temos dois detalhes importantes nesse arquivo o primeiro que na div do “image-list” temos uma propriedade nova data-bb-style=”arrowlist”, ela sinaliza que nossos itens terão uma seta ao lado direito. E o resultado será o seguinte:

O segundo detalhe dessa tela que a ação de clique no meu item é uma chamada javascript com “window.open(‘http://localhost/blackberrydeveloper/categorias/todas/’)”, essa chamada é um link para o site do BlackBerry Developer Brasil, por isso que em nosso config.xml foi sinalizado que nossa app iria acessar conteúdo externo.

Grid List

Esse formato lista a informação em grid como a imagem abaixo:

Um exemplo de grid list temos arquivo “lista-grid.html” :

<div data-bb-type="screen" data-bb-effect="slide-left">
	<div data-bb-type="title" data-bb-caption="Tutorial sobre listas com bbUI.js" ></div>
	<div data-bb-type="grid-layout" data-bb-header-justify="center">
		<div data-bb-type="row">
			<div data-bb-type="item" data-bb-img="img/estados/se.jpg" data-bb-title="DEV Group Aracajú" onclick="bb.pushScreen('grupo-se.html', 'grupo-se')"></div>
			<div data-bb-type="item" data-bb-img="img/estados/mg.jpg" data-bb-title="DEV Group Belo Horizonte" onclick="bb.pushScreen('grupo-mg.html', 'grupo-mg')"></div>
		</div>

		<div data-bb-type="group" data-bb-title="Podemos separar por grupos">
			<div data-bb-type="row" >
				<div data-bb-type="item" data-bb-img="img/estados/sp.jpg" data-bb-title="DEV Group Campinas"></div>
				<div data-bb-type="item" data-bb-img="img/estados/pr.jpg" data-bb-title="DEV Group Curitiba"></div>	
			</div>
			<div data-bb-type="row">
				<div data-bb-type="item" data-bb-img="img/estados/sc.jpg" data-bb-title="DEV Group Florianópolis"></div>
				<div data-bb-type="item" data-bb-img="img/estados/pr.jpg" data-bb-title="DEV Group Franscisco Beltrão"></div>
				<div data-bb-type="item" data-bb-img="img/estados/al.jpg" data-bb-title="DEV Group Maceió"></div>
			</div>
		</div>
		<div data-bb-type="row">
			<div data-bb-type="item" data-bb-img="img/estados/pe.jpg" data-bb-title="DEV Group Recife"></div>
			<div data-bb-type="item" data-bb-img="img/estados/df.jpg" data-bb-title="DEV Group Brasília"></div>
			<div data-bb-type="item" data-bb-img="img/estados/rj.jpg" data-bb-title="DEV Group Rio de Janeiro"></div>
			<div data-bb-type="item" data-bb-img="img/estados/sp.jpg" data-bb-title="DEV Group São Paulo" ></div>
		</div>
		<div data-bb-type="row">
			<div data-bb-type="item" data-bb-img="img/bbui.jpg" data-bb-title="Menu Principal" onclick="bb.pushScreen('tutorial-menu.html', 'tutorial-menu')">Clique aqui</div>
		</div>

	</div>
</div>

No arquivo acima as duas primeiras tags seguem o padrão das telas anteriores, a terceira tag temos a propriedade data-bb-type=”grid-layout” indica que os elementos dentro dessa DIV terão uma organização em grid. Começando pelos itens mais básicos o “item” do grid são definidos pela propriedade data-bb-type=”item” nela podemos configurar a imagem que será exibida com data-bb-img e o título do item com data-bb-title. Além do elemento com propriedade data-bb-type=”item”, temos dois itens para organizar nossa lista data-bb-type=”row” e data-bb-type=”group”. A div com propriedade “row” define a “linha” de nosso grid, os item adicionados dentro dessa div serão exibidos lado-a-lado, mas cada item será redimensionado para caber na largura da tela.

A segunda propriedade é o “group” tem a função de separar em grupos os meus itens, nela podemos adicionar título para o grupo, como na imagem abaixo:

Na imagem acima conseguimos ver como o bbUI organiza os elementos em grid, por padrão ele faz o resize dos itens com uma proporção de 16:9, então quanto maior a quantidade de itens em uma “row” menor será o “item”, para utilizar uma proporção de 1:1 adicionamos a div do “grid-layout” a propriedade data-bb-style=”square”, essa aplicação vamos ver na próxima tela. No exemplo acima temos dois itens com evento de click, os itens do dev group Aracajú e Belo horizonte fazem uma chamada simples para suas respectivas telas “grupo-se.html” e “grupo-mg.html”.

Abaixo o código presente no arquivo “grupo-se.html”:

<div data-bb-type="screen" data-bb-effect="slide-left" >
	<div data-bb-type="title" data-bb-caption="Dev Group Aracajú"></div>
	<div data-bb-type="grid-layout" data-bb-header-justify="center" data-bb-style="square">
		<div data-bb-type="row">
			<div data-bb-type="item" data-bb-img="img/managers/bruno-lima.jpeg" data-bb-title="Bruno Lima"> </div>
			<div data-bb-type="item" data-bb-img="img/managers/humberto.jpeg" data-bb-title="Humberto Elias"> </div>
		</div>

		<div data-bb-type="row">
			<div data-bb-type="item" data-bb-img="img/managers/dev-groups.png" onclick="window.open('http://localhost/blackberrydeveloper/dev-groups/bb-dev-group-aracaju/')" data-bb-title="Visite a página do grupo"></div>
		</div>
	</div>
	<div data-bb-type="action-bar" data-bb-back-caption="Voltar"></div>
</div>

No código acima adicionamos a div do nosso grid a propriedade data-bb-style=”square” para prefinir as proporções dos itens 1:1 e o resultado será o seguinte:

Além da propriedade “style” uma ação simples foi a adição ao evento onclick a função :

window.open('http://localhost/blackberrydeveloper/dev-groups/bb-dev-group-aracaju/')

Ela permite que nosso aplicativo abra a página do grupo no browser.

Revisando nosso post, temos duas formas de listar os dados com bbUI lista e grid, mas cada opção tem formas diferentes de configuração.

O exemplo completo desse post você confere no github :

Categorias
HTML5 Mobile Dev Group São Paulo Tutoriais

Tutorial introdução ao bbUI.js

O bbUI é uma toolkit que fornece para as aplicações em HTML5 a experiência do OS do BlackBerry 10, desenvolvida pela equipe do Tim Neil, o bbUI possui elementos da User interface do BlackBerry 10 feitos HTML5 e JavaScript com uma ótima performance. A versão trabalhada neste tutorial será a versão 0.9.6.

Neste tutorial vou mostrar como utilizar o bbUI em seu projeto e listar as principais características referente a layout. Para trabalhar com bbUI será necessário instalar o SDK do WebWorks, caso não tenha instalado você pode conferir o seguinte post:

http://localhost/blackberrydeveloper/categorias/html5/instalando-webworks-sdk-para-desenvolver-html5-para-blackberry-10/

Em meus testes vou utilizar uma extensão para o Google Chrome, o Ripple. Se ainda não possui o Ripple, baixe aqui.

Inicialmente precisamos baixar o bbUI na página do git do projeto : https://github.com/blackberry/bbUI.js/

No git do projeto você irá encontrar, exemplos de como utilizar a biblioteca, documentação e o source do projeto. Baixei o ZIP de todo o projeto o link você encontra na imagem abaixo:

Baixe e descompacte o zip, no projeto tem as seguintes pastas ext, logos, pkg, samples e src. Nesse tutorial vamos trabalhar com dois arquivos presentes na pasta pkg: bbuui-min.css e bbui-min.js. além desses dois arquivos o meu projeto está organizado da seguinte forma :

Mesmo a nível de teste nosso exemplo vai precisar do config.xml que vai ficar dessa forma :

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="2.0.0.1" id="tutorial">

  <author href="http://www.example.com/"
          rim:copyright="Copyright 1998-2012 Pessoal">Pessoal</author>

  <name>Tutorial BB10</name>

  <description>
	 Tutorial sobre bbUI
  </description>

  <rim:permissions>
    <rim:permit>access_shared</rim:permit>
  </rim:permissions>

  <icon src="img/dev-group.png"/>

  <content src="index.html" rim:allowInvokeParams="true"/>
  <feature id="blackberry.ui.dialog"/>
  <feature id="blackberry.app"/>
  <feature id="blackberry.app.event"/>
  <feature id="blackberry.ui.contextmenu"/>	
</widget>

No config.xml acima para garantir o funcionamento do bbUI, precisamos adicionar três propriedades: feature blackberry.app, blackberry.app.event e blackberry.ui.contextmenu.

Primeiro exemplo vamos criar uma arquivo index.html que carregar bbUI e quando ele for inicializado carregamos outro arquivo HTML e acionamos na tela:

<!DOCTYPE html>
<html>
	<head>

		<title>tutorial bbUI</title>

		<link rel="stylesheet" type="css/text" href="css/bbui-min.css"></link>
		<script type="text/javascript" src="js/bbui-min.js"></script>
		<script type="text/javascript" src="local:///chrome/webworks.js"></script>

		<script>
			document.addEventListener("webworksready", function(e){
					bb.init();
					bb.pushScreen("tutorial.html", "tutorial");
				},false);
		</script>
	</head>
	<body>
	</body>
</html>

No exemplo acima temos um HTML simples que chama os bbui-min.css, bbui-min.js e a chamada do webworks.js. após a chamadas dos arquivos necessários tem uma bloco de script que faz a seguinte:

Na linha 12 é adicionado um ouvinte para quando o WebWorks estiver pronto sera disparada uma função, o evento que é disparado no momento será “webworksready”. Dentro da função que é disparada é inicializa o bbUI com a função “bb.init()” na linha 13 e na linha abaixo é adicionada um tela chamada “tutorial.html” através da função.

Dentro da tela “tutorial.html” tem um markup simples:

<div id="tutorial">Meu primeiro teste</div>

Se em seu teste o apareceu a frase “Meu primeiro teste”, significa que tudo correu bem. Até agora só testamos a inicialização do bbUI. Para entender um pouco o funcionamento do bbUI, ele considera cada tela que ele adiciona via pushScreen(), uma view e cada tela que é adicionada ele vai armazenadas em um array, mas renderiza na tela a view atual para fazer a troca de tela de maneira eficiente.

Por isso para fazer acesso aos elementos via javascript tempos que fazer um tratamento especial em cada situação. Por os elementos são criados em tempo de execução, o bbUI localiza os atributos data- dentro das div’s para montar a tela seguindo o padrão do BB10.

Então agora vamos incrementar o nosso exemplo:

<div id="tutorial" data-bb-type="screen" data-bb-effect="fade">
	<div data-bb-type="title" data-bb-caption="Tutorial bbUI" ></div>

	Agora temos uma tela do bbUI
</div>

Screen

No exemplo acima adicionamos a nossa div a propriedade data-bb-type=”screen” sinalizando que dentro dessa div agora temos uma tela nos padrões do bbUI, além dessa propriedade temos a data-bb-effect=”fade” essa propriedade sinaliza o tipo de animação que a tela irá ser apresentada, além do efeito de fade temos o seguintes efeitos:

  • slide-left: entrada de tela da direita para esquerda
  • slide-right: entrada de tela da esquerda para direita
  • slide-up: entrada de tela de baixo para cima
  • slide-down: entrada de tela de cima para baixo

Title

Dentro da nossa div “screen” temos uma div com o atributo data-bb-type=”title”, sinaliza que esse item será a barra de título de nossa screen, o segundo atributo data-bb-caption=”Tutorial bbUI” define o texto que será exibido. E o resultado será o seguinte:

Agora vamos evoluir o nosso arquivo tutorial.html, vou adicionar mais alguns elementos e criar uma navegação entre telas, para isso precisamos criar um novo arquivo “segunda-tela.html”.

Primeiro nosso arquivo tutorial.html atualizado:

<div id="tutorial" data-bb-type="screen" data-bb-effect="fade">
	<div data-bb-type="title" data-bb-caption="Tutorial bbUI" data-bb-img="img/icone-title.png" data-bb-accent-text="BlackBerry Dev Group"></div>
	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Tipos de botões</div>

		<div data-bb-type="button" id="botao-texto">Botão só com texto</div>
		<div data-bb-type="button" data-bb-img="img/icone-botao.png" id="botao-imagem-texto">Botão com imagem e texto</div>
		<div data-bb-type="label-control-container">
			<div data-bb-type="row">
				<div data-bb-type="label">Botão sem texto:</div>
				<div data-bb-type="button" data-bb-img="img/icone-botao.png" id="botao-imagem"></div>
			</div>
		</div>
	</div>

	<div data-bb-type="round-panel">
		<div data-bb-type="panel-header">Botão com ação</div>
		<div data-bb-type="button" onclick="bb.pushScreen('tutorial-2.html', 'tutorial-2');" id="botao-com-acao">Carregar uma nova tela</div>
	</div>	
</div>

Vamos falar das primeiras mudanças do arquivo tutorial.html, primeiro div da barra de título(data-bb-type=”title”) adicionamos mais duas propriedades:

  • data-bb-img: onde é possível adicionar uma imagem na lateral da barra de título, o tamanho ideal para essa image é de 71×71 pixels
  • data-bb-accent-text: esta propriedade cria um subtítulo.

Round Panel

Foi adicionado um round-panel, esse elemento serve para agrupar informações em blocos e em cada bloco temos a possibilidade de adicionar headers. Logo após a abertura da round-panel adicionamos uma div com atributo data-bb-type=”panel-header”, o panel-header adiciona um título com uma linha abaixo seguindo o padrão de interface do BB10.

Button

Dentro do primeiro round-panel eu adicionei 3 botões, para criar um botão basta adicionar o atributo data-bb-type=”button” a div em que você deseja transformar em botão e dentro da div adicionamos o texto que será o conteúdo do botão.

Caso deseje adicionar uma imagem ao botão adicionamos o atributo “data-bb-img” e passamos o caminho da imagem como valor dessa propriedade. O tamanho ideal para essa image também é de 71×71 pixels. Para criar um botão com apenas uma imagem, basta não adicionar texto dentro da div do botão.

Label Control

Outra ferramenta que auxilia na construção de telas é o Label Control criado através da propriedade data-bb-type=”label-control-container”, esta propriedade trabalha em conjunto com a round panel e da a possibilidade de trabalhar com linhas e labels.

Como no código acima amarramos os itens que vão fazer parte daquele linha com uma div que contém a propriedade data-bb-type=”row” e antes de um elemento que queremos atribuir o label, adicionamos uma div com a propriedade data-bb-type=”label” e o texto que vai no label adicionamos dentro dessa div.

No último botão dessa tela um evento onclick, e passamos a função para chamar a próxima tela: bb.pushScreen(‘tutorial-2.html’, ‘tutorial-2’), onde passamos o caminho da nova tela que vamos enfileirar e o seu id.

Antes de passar para o código da segunda tela vamos ver o resultado da primeira tela:

Na segunda tela temos o seguinte código:

<div id="tutorial-2" data-bb-type="screen" data-bb-effect="slide-left" data-bb-indicator="true">

	<div data-bb-type="title" data-bb-caption="Tutorial bbUI" data-bb-back-caption="Voltar" >
	</div>

	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Segunda tela</div>
		Carregando uma segunda tela.
		<div data-bb-type="button" id="botao-voltar" onclick="bb.popScreen()">Voltar</div>
	</div>	

	<div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>

Nessa segunda tela adicionamos uma uma propriedade a screen: data-bb-indicator=”true” essa propriedade adiciona um loader para sinalizar o carregamento do conteúdo da tela. Nesta segunda tela adicionei três maneiras de voltar para tela anterior, primeira no título dessa screen foi adicionado a propriedade, data-bb-back-caption=”Voltar” ela adiciona um botão do lado esquerdo da barra de título. A segunda forma foi através do comando dentro do evento onclick do nosso botão, bb.popScreen() é uma função que remove a tela atual. No caso as telas são empilhadas em um array, então removendo a atual voltamos para a tela anterior.

Action Bar

A última forma foi com uma action-bar, ela permite adicionar uma barra inferior de nosso aplicativo, nela podemos adicionar botões para realizar determinadas ações ou simplesmente adicionar um botão de voltar. Como no exemplo abaixo:

Em outros tutorias vamos abordar a action bar com mais detalhes.

O resultado da segunda tela foi o seguinte:

Trabalhando com JavaScript

Em outros posts vamos trabalhar mais exemplos com javascript, mas uma dica importante para que está criando os primeiros apps com bbUI, como falei anteriormente a lib renderiza os elementos em tempo de execução ou seja, caso tente acessar qualquer elemento diretamente via javascript ou jQuery sem um tratamento específico muito provável ele ainda não está acessível no DOM. Dentro da função bb.init() podemos passar uma série de parâmetros e propriedades, no nosso caso para tratar o problema de acesso aos elementos gerados pela lib, trabalhamos com dois eventos onscreenready e ondomready esse eventos sempre são disparados quando chamamos a função pushScreen().

onscreenready: Esse evento é dispara antes do bbUI montar a tela através das div com os atributos de marcações, ou seja podemos manipular os elementos html antes de serem renderizados pelo bbUI, nesse momento o bbUI sabe o conteúdo do arquivo mas ainda não foi adicionado no DOM.

ondomready: é disparado quando o bbUI terminou de montar a tela, então nesse momento a barra de título, os botões e label já foram criados.

Para ficar claro vamos a um exemplo prático, abaixo vou mostrar o nosso arquivo index.html atualizado:

<!DOCTYPE html>
<html>
	<head>

		<title>tutorial bbUI</title>

		<link rel="stylesheet" type="css/text" href="css/bbui-min.css"></link>
		<script type="text/javascript" src="js/bbui-min.js"></script>
		<script type="text/javascript" src="local:///chrome/webworks.js"></script>

		<script>
			document.addEventListener("webworksready", function(e){
					bb.init({onscreenready : function(element, id, params) {
		                            if (id == 'tutorial') {
										if(document.getElementById('tutorial')){
											console.log("onscreenready: existe um elemento no DOM com id tutorial")
										}else{
											console.log("onscreenready: não existe um elemento no DOM com id tutorial");
											element.getElementById('tutorial').innerHTML += '<div data-bb-type="button" id="ready-screen"> botão com onscreenready</div>';
										}
		                            }
		                        }
         					, ondomready : function(element, id, params) {
		                            if (id == 'tutorial') {
		                            	if(document.getElementById('tutorial')){
											console.log("ondomready: Existe um elemento no DOM com id tutorial")
											document.getElementById('tutorial').innerHTML += '<div data-bb-type="button" id="ready-dom"> botão com ondomready</div>';
										}else{
											console.log("ondomready: Não existe um elemento no DOM com id tutorial")
										}
		                            } 
		                        }
         					});
					bb.pushScreen("tutorial.html", "tutorial");	
				},false);
		</script>
	</head>
	<body>
	</body>
</html>

O código acima anteriormente carregava apenas o arquivo tutorial.html, foi adicionado um teste simples para entender o funcionamento dos dois evento. Nosso arquivo tutorial.html tem uma div com id “tutorial” foi adicionar a cada evento uma função que dentro dessa função eu verifico se existe um elemento com id “tutorial” e em casa caso eu mando imprimir uma frase no console. E o resultado é o seguinte:

Como podemos observar na chamada do onscreenready temos o seguinte retorno: não existe um elemento no DOM com id tutorial, isso significa que o elemento com id tutorial ainda não foi adicionado no DOM. Mas a função que é disparada quando evento é chamado passa três parâmetros: element, id, params.

  • element é o conteúdo da página ainda não executado.
  • id do elemento enviado
  • params caso tenha sido enviado algo na função pushScreen(), exemplo :bb.pushScreen(‘tutorial.htm’, ‘tutorial’, {nome: ‘Fellyph’, devGroup: “São Paulo”});

Se inspecionarmos a variável element, vamos ver que o conteúdo da tutorial.html estará ainda no forma original. No caso fiz um tratamento caso não encontrar o elemento com id “tutorial” no DOM, procure dentro da variável element o elemento com id tutorial e adicione um o seguinte html: ‘<div data-bb-type=”button” id=”ready-screen”> botão com onscreenready</div>’

Então o que vai ocorrer, o bbUI vai rederizar o conteúdo da tela com um botão como texto “botão com onscreenready”.

No evento ondomready, o elemento com id tutorial já está no dom, uso a seguinte condicional caso ache adicione o HTML ao conteúdo ‘<div data-bb-type=”button” id=”ready-dom”> botão com ondomready</div>’. Mas como podemos ver no resultado final esse botão não é renderizado porque no evento ondomready o conteúdo da tela já foi processado pelo bbUI.

Então com o ondomready podemos acessar elementos de uma página especifica tanto para fazer tratamentos ou adicionar eventos.

Esse tutorial serviu de start para o bbUI.js, a ideia é dividir em outros posts todas as características dessa lib fantástica. os Arquivos do tutorial você confere aqui : https://github.com/fellyph/Tutorial-bbUI