[PT-BR] Tutorial Exhibit SIMILE

O Exhibit (www.simile-widgets.org/exhibit/) é um framework bem legal pra publicar dados em páginas da web. Neste tutorial a gente vai ver como ele é simples de usar criando uma página com os dados de uma lista de filmes. Vamos usar a versão 3.1.0rc.

1 - Converter os dados

Vamos usar o Babel (http://service.simile-widgets.org/babel/) pra converter os dados pro formato usado pelo framework.

[code]
type Ano label Titulo Producao
filme 2000 American Beauty Beleza americana Bruce Cohen, Dan Jinks
filme 2001 Gladiator Gladiador Douglas Wick, David Franzoni, Branko Lustig
filme 2001 Gladiator Gladiador Douglas Wick, David Franzoni, Branko Lustig
filme 2002 A Beautiful Mind Uma mente brilhante Brian Grazer, Ron Howard
filme 2003 Chicago Chicago Martin Richards
filme 2004 The Lord of the Rings: The Return of the King O Senhor dos Anéis: O retorno do rei Barrie M. Osborne, Peter Jackson, Fran Walsh
filme 2005 Million Dollar Baby Menina de ouro Clint Eastwood, Albert S. Ruddy, Tom Rosenberg
filme 2006 Crash Crash - No limite Paul Haggis, Cathy Schulman
filme 2007 The Departed Os infiltrados Graham King
filme 2008 No Country for Old Men Onde os fracos não têm vez Scott Rudin, Ethan Coen, Joel Coen
filme 2009 Slumdog Millionaire Quem Quer Ser Um Milionário? Christian Colson
filme 2010 The Hurt Locker Guerra ao terror Kathryn Bigelow, Mark Boal, Nicolas Chartier, Greg Shapiro
[/code]

É só colar os dados acima (que estão em tsv) no Babel e salvar o arquivo convertido como filmes.js:

[caption id="attachment_1362" align="aligncenter" width="300"]De tsv pra JSON com o Babel TSV pra JSON com o Babel (clique para ampliar)[/caption]

2 - Escrever a página em html

O código principal ficará assim:

[code language="html"]
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<meta name="description" content="tutorial exhibit simile em português" />
<meta name="keywords" content="exhibit, simile, visualizaçao, dados, interativo" />
<title>Tutorial Exhibit - SIMILE</title>
<!-- Os dados que a gente converteu -->
<link href="filmes.js" type="application/json" rel="exhibit/data" />
<!-- Exhibit -->
<script src="https://api.simile-widgets.org/exhibit/3.1.0rc/exhibit-api.js" type="text/javascript"></script>
<style type="text/css">
h1 {
text-align: center;
font-size: 50px;
}

#content, footer {
margin: auto;
width: 720px;
}

footer{
padding: 30px; 0
}
</style>
</head>

<body>
<h1>Filmes</h1>

<div id="content" data-ex-role="exhibit-viewPanel">
<div data-ex-role="exhibit-view"
data-ex-show-toolbox="false"
data-ex-view-class="Exhibit.TabularView"
data-ex-columns=".Ano, .Titulo, .Producao"
data-ex-column-labels="Ano, Título, Produção"
data-ex-sort-ascending="false">
</div>
</div>

<footer>
Tutorial Exhibit @dehhmesquita
</footer>
</body>
</html>
[/code]

Vamos dar uma olhada no que cada declaração dessa faz:

[code language="html"]

<!---------------------------------------------------------------
O exhibit tem vários modos de exibição, se a gente quisesse
usar mais de um deveria colocar os outros modos aqui dentro
dessa div.

Exemplo:
http://www.simile-widgets.org/exhibit3/examples/senate/senate.html
(clique em TABLE, MAP ou TILES pra ver como é a visão de cada modo).
--------------------------------------------------------------->

<div data-ex-role="exhibit-viewPanel">

<!---------------------------------------------------------------
Como dito antes, só vamos usar a visão do modo tabela.
--------------------------------------------------------------->

<div data-ex-role="exhibit-view" data-ex-view-class="Exhibit.TabularView"

<!---------------------------------------------------------------
Aqui a gente escolhe as colunas do filmes.js que devem aparecer
na tabela.
--------------------------------------------------------------->

<div data-ex-columns=".Ano, .Titulo, .Producao"

<!---------------------------------------------------------------
E aqui escolhe como o título de cada coluna deve aparecer na
tabela.
--------------------------------------------------------------->

<div data-ex-column-labels="Ano, Titulo, Produção">

<!-- -->
[/code]

Até agora só temos uma tabela, mas ela já está interativa. Tente clicar nas labels pra ordenar a coluna do ano por exemplo.

[caption id="attachment_1369" align="aligncenter" width="300"]Estado da tabela até agora (clique para ampliar) Estado da tabela até agora (clique para ampliar)[/caption]

3 - Colocar o filmeS (no plural)

Para que o Exhibit pluralize automaticamente nossos itens (no caso, os filmes) temos que adicionar isso ao arquivo filmes.js:

[code language="javascript"]
"types": {
"filme": {
"pluralLabel": "filmes"
}
},
"items" : [
...

[/code]

4 - Adicionar a facet de busca

Agora vamos começar a usar as facets. Para adicionar a busca instantânea à tabela basta escrever essa div:

[code language="html"]
<div id="search" data-ex-role="facet" data-ex-facet-class="TextSearch" data-ex-facet-label="Pesquisar"></div>
[/code]

Note que a busca funciona para qualquer campo da tabela!

5 - Selecionar filmes por ano

E por fim vamos adicionar uma facet para selecionar os filmes por ano.

[code language="html"]
<div id="sort-by-year" data-ex-role="exhibit-facet" data-ex-expression=".Ano" data-ex-facet-label="Ano" data-ex-sort-direction="reverse" data-ex-sort-mode="value"></div>
[/code]

6 - Versão final

Aqui temos o código depois de adicionar todas as facets:

[code language="html"]
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<meta name="description" content="tutorial exhibit simile em português" />
<meta name="keywords" content="exhibit, simile, visualizaçao, dados, interativo" />
<title>Tutorial Exhibit - SIMILE</title>
<link href="filmes.js" type="application/json" rel="exhibit/data" />
<script src="https://api.simile-widgets.org/exhibit/3.1.0rc/exhibit-api.js" type="text/javascript"></script>
<style type="text/css">
table {
table-layout: fixed;
}

h1 {
text-align: center;
font-size: 50px;
}

#content, #search, footer {
margin: auto;
width: 720px;
}

#sort-by-year {
width: 200px;
float: right;
margin-right: 80px;
}

footer{
padding: 30px; 0
}
</style>
</head>

<body>
<h1>Filmes</h1>

<div id="sort-by-year" data-ex-role="exhibit-facet" data-ex-expression=".Ano" data-ex-facet-label="Ano" data-ex-sort-direction="reverse" data-ex-sort-mode="value"></div>
<div id="search" data-ex-role="facet" data-ex-facet-class="TextSearch" data-ex-facet-label="Pesquisar"></div>

<div id="content" data-ex-role="exhibit-viewPanel">
<div data-ex-role="exhibit-view"
data-ex-show-toolbox="false"
data-ex-view-class="Exhibit.TabularView"
data-ex-columns=".Ano, .Titulo, .Producao"
data-ex-column-labels="Ano, Título, Produção"
data-ex-sort-ascending="false">
</div>
</div>

<footer>
Tutorial Exhibit @dehhmesquita
</footer>
</body>
</html>

[/code]

Aqui tá o link pra visualizar a página final: tutorial_exhibit.html

E para o filmes.js: filmes.js

Até a próxima! :D