Esta página foi traduzida pela API Cloud Translation.

CalVis: como criar uma interface do usuário AJAX personalizada para o Google Agenda

Austin Chau, Programas para desenvolvedores do Google
Junho de 2008

Introdução
Como usar o CalVis
Personalizar o estilo
Demonstração
Contribuir
Recursos

Observação: este é um projeto de código aberto iniciado por um Googler e não uma biblioteca com suporte oficial. Convidamos todos os interessados a participar e contribuir :)

Introdução

Você já quis criar uma experiência de agenda personalizada no seu site usando dados do Google Agenda, mas não sabia como apresentar esses dados visualmente? Parece haver um bom número de desenvolvedores que compartilham esse dilema. A API Google Calendar Data é uma API de serviço da Web eficiente, já que permite acessar a riqueza de todos os seus dados do Google Agenda. No entanto, ela continua sendo uma API de dados de leitura/gravação pura, sem previsão de visualização de dados.

Neste artigo, vou demonstrar uma biblioteca de amostra que escrevi para aliviar esse problema. Iniciei o projeto de código aberto Calendar Visualization (CalVis), que tem como objetivo fornecer uma interface do usuário (UI) fácil e personalizável para apresentar dados da conta do Google Agenda. O CalVis extrai dados diretamente da sua conta do Google Agenda usando a API Google Calendar Data. Observação do editor:a partir da v3, o Google Agenda não usa mais o formato de dados do Google. Ela usa a biblioteca de cliente JavaScript de dados do Google para se comunicar com o Google Agenda e foi projetada para maximizar a flexibilidade na personalização.

O CalVis foi projetado para evitar que os desenvolvedores precisem recriar a experiência avançada da interface do calendário. Os desenvolvedores podem usar como um contêiner de modelo personalizável para sobrepor dados do Google Agenda. Os desenvolvedores podem usar o CalVis para renderizar dados de agenda e alcançar um nível profundo de integração personalizada com os sites deles. Como você vai aprender, uma interface criada com base no CalVis é totalmente personalizável usando JavaScript, HTML e CSS. Os desenvolvedores podem implantar de maneira rápida e fácil uma interface de agenda personalizada com um conjunto de componentes essenciais de controle para renderizar dados da agenda.

Como usar o CalVis

As etapas a seguir ajudam você a começar a usar o CalVis para desenvolvimento.

Etapa 1: carregar a biblioteca de visualização da agenda

Primeiro, inclua o carregador no seu arquivo HTML. Esse carregador carrega dinamicamente as classes principais do CalVis e as bibliotecas dependentes (como a biblioteca de cliente JavaScript de dados do Google).

<script src="//gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>

Etapa 2: use a folha de estilo CSS para descrever os atributos de estilo.

O arquivo CSS padrão vai produzir uma aparência padrão, assim como este exemplo. Você pode baixar esse arquivo CSS e personalizá-lo para ter uma aparência completamente diferente.

<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />

Etapa 3: criar a estrutura visual da interface do calendário com HTML

O CalVis tem vários componentes visuais predefinidos que compõem a interface da agenda. O arranjo estrutural desses componentes de interface é definido pelo seu layout HTML.

Os componentes da interface do usuário do CalVis são:

Controle de login (somente para agendas particulares):
é o componente HTML que fornece o link de login/logout.
Controle de status
: é o componente HTML que fornece informações de status ou erros.
Controle de navegação
: é o componente HTML que renderiza a navegação do calendário em relação à visualização atual.
Controle de visualização
: é o componente HTML que renderiza a seleção de visualização do calendário. Nesta versão, apenas as visualizações de mês ou semana estão disponíveis.
Corpo da agenda
: é o componente HTML que renderiza a agenda real. Com grades para designar células de data individuais.
Exibição de eventos
: é o componente HTML que renderiza os detalhes do evento quando um evento é acionado. Nesta versão, apenas os acionadores de eventos "clique" e "passar o cursor do mouse" são aceitos.

Um exemplo de como organizar visualmente esses componentes usando a estrutura básica de tabela HTML:

  <table style="width: 800px;">
    <tr>
      <td colspan="2" valign="top">
        <div style="float: left;" id="loginControlDiv"></div>
        <div style="float: right;" id="statusControlDiv"></div>
      </td>
    </tr>      
    <tr>
      <td valign="top">
        <div id="navControlDiv"></div>
      </td>
      <td valign="top" align="right">
        <div id="viewControlDiv"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" valign="top">
        <div id="calendarBodyDiv"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" valign="top">
        <div id="eventDisplayDiv"></div>
      </td>
    </tr>
  </table>

Etapa 4: inicializar e configurar o CalVis com JavaScript

É possível personalizar qualquer comportamento ou aparência usando JavaScript. Antes de modificar um objeto em JavaScript, ele precisa ser carregado pelo navegador. Portanto, aguarde até que todas as bibliotecas dependentes sejam carregadas com o carregador CalVis. Isso é feito com o método calvis.ready(). Esse método usa um callback que será invocado quando todas as bibliotecas forem carregadas e o CalVis estiver pronto para uso.

window.onload = function() {
  calvis.ready(callback);
}

Dentro da função de callback, você vai instanciar uma instância do objeto calvis.Calendar. Agora você precisa atribuir os vários IDs do CSS (definidos no layout HTML da etapa 3) para mapear os componentes correspondentes da interface do calendário.

var calId = 'developer-calendar@google.com';

var calendar = new calvis.Calendar();

// set the CSS IDs for various visual components for the calendar container
calendar.setCalendarBody('calendarBodyDiv');
calendar.setStatusControl('statusControlDiv');
calendar.setNavControl('navControlDiv');
calendar.setViewControl('viewControlDiv');

Agora você pode especificar de qual conta do Google Agenda o CalVis deve extrair dados. Para especificar uma agenda pública:

// set the calenar to pull data from this Google Calendar account
calendar.setPublicCalendar(calId);

Para especificar um calendário particular, também é necessário especificar o componente HTML que corresponde ao botão de login:

// set the calenar to pull data from this Google Calendar account
calendar.setPrivateCalendar(calId);
calendar.setLoginControl('loginControlDiv');

Para mostrar os detalhes de um evento, você precisa fornecer um método de callback. Assim, quando uma listagem de eventos na agenda for acionada (por um evento de "clique" ou "mouseover"), o callback será invocado para mostrar os detalhes. Exemplo de um callback de exibição de evento:

calendar.setEventCallback('click', displayEvent);

function displayEvent(event) {    
  var title = event.getTitle().getText();  
  var date = event.getTimes()[0].getStartTime().getDate();
  var content = event.getContent().getText();  
  
  var eventHtml = [;
  eventHtml.push(date.toString());
  eventHtml.push('<br><br>');
  eventHtml.push('<b>Event title:</b> ');
  eventHtml.push(title);
  eventHtml.push('<br>');
  eventHtml.push('<br>');
  eventHtml.push('<b>Description:</b>');
  eventHtml.push('<p style="font-size: 11px;">');
  eventHtml.push(content); 
  eventHtml.push('</p>');
  eventHtml.push('<br>');

  document.getElementById('eventDisplayDiv').innerHTML = eventHtml.join('');
}

Por fim, defina a visualização padrão da agenda (mês ou semana) e invoque o método render() para mostrar a interface da agenda:

// set the default view to be "month"
calendar.setDefaultView('month');

// display the calendar
calendar.render();

Personalizar o estilo

Para personalizar o tamanho, a cor ou o estilo de uma célula de data individual, basta modificar os atributos de estilo CSS de algumas classes CSS predefinidas. Por exemplo, é possível modificar a largura e a altura de cada célula de data na visualização mensal substituindo as classes CSS padrão "monthViewCell" e "contentCell".

Demonstração

Esta demonstração mostra como usar o CalVis com o estilo padrão.

Esta demonstração mostra como usar o CalVis com personalização para criar um mashup com as APIs do Google Maps e do YouTube.

Contribuir

O CalVis é um projeto de código aberto, cujo código-fonte está disponível para download via Subversion no Google Code Project Hosting.

CalVis: como criar uma interface do usuário AJAX personalizada para o Google Agenda Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.