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 :

Captura de Tela 2013-05-06 às 03.08.15

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:

Captura de Tela 2013-05-06 às 03.24.34

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:

Captura de Tela 2013-05-06 às 03.40.10

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:

grid

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:

grid-list

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:

grid1x1

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 :

Deixe uma resposta

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