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.

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

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

De tsv pra JSON com o Babel
TSV pra JSON com o Babel (clique para ampliar)

2 – Escrever a página em html

O código principal ficará assim:

<!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>

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





<!---------------------------------------------------------------
        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">

<!-- -->

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

Estado da tabela até agora (clique para ampliar)
Estado da tabela até agora (clique para ampliar)

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:

"types": {
		"filme": {
			"pluralLabel": "filmes"
		}
	},
	"items" : [
...

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:

<div id="search" data-ex-role="facet" data-ex-facet-class="TextSearch" data-ex-facet-label="Pesquisar"></div> 

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.

<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>

6 – Versão final

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

<!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>

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

E para o filmes.js: filmes.js

Até a próxima! 😀

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s