Pense em qualquer tipo de aplicativo e em algum momento você vai ter que representar o fluxo do tempo no mesmo. Mais especificamente, quase sempre vai ter que ter algum tipo de agenda ou planificador temporal.
O exemplo de hoje pretende introduzir o jeito de fazer um calendário com YeAPF sem morrer na tentativa. Com o modelo de programação orientado aos eventos e lastreado no DOM, YeAPF facilita a construção de calendários que possam ser conectados com os outros componentes da série. Por exemplo, você pode colocar uma lista dos seus clientes do lado do calendário e agendar usando arrastar e soltar. Ou, conectar dois calendários que respondem por agendas distintas e que estão ativamente sendo usados em mais de um terminal.
Porém hoje, não vamos passar do básico: Como montar um calendário. Então nosso roteiro é o seguinte:
- exemplo
- como mostrar seus dados no calendário e
- uma lista dos eventos disparados pelo yCalendar().
Exemplo
Crie um arquivo .HTML em uma pasta da sua preferência. Como sempre, se está usando Ubuntu, /var/www vai ser sua raiz e sob ela você pode criar uma pasta com o nome que gostar (no nosso caso testes). E -como sempre- vamos imaginar que o YeAPF está em /var/www/YeAPF.
Chamaremos este arquivo de testeCalendario.html
<html>
<style>
#meuTeste .calBand {
border-bottom: dotted 1px #B9B9B9;
font-size: 18px; }
#meuTeste .calTag {
font-size: 18px;
padding-right: 4px;
padding-bottom: 2px; }
#meuTeste .calDayLCell {
float:left;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 24px;
height: 24px;
}
#meuTeste .calDayLFreeCell {
color: #E41F69;
font-weight: 800 }
#meuTeste .calDayLHighLight {
background-color: #F3F0B1;
font-weight: 800}
</style>
<script src="../YeAPF/yloader.js"></script>
<div id='meuTeste'></div>
</html>
<script>
var myCalendar = yCalendar().
setDivContainerName('meuTeste').
setCellSize(64,48).
setOrientation(0).
build();
</script>
O exemplo é propositalmente imperfeito para poder-nos focar no que realmente interessa. Após salvar este arquivo, abra ele com seu navegador. Pode ser tanto como arquivo como usando o apache para servir. Ou seja, você pode tanto fazer: file:///var/www/testes/testar-testeCalendario.html ou http://localhost/testes/testeCalendario.html (supondo que esteja na /var/www/testes/)
A linha marcada em negrito no código fonte é a que realiza a carga do YeAPF então se você tem pelo menos a versão 0.8.27 e nada funciona, é bem provável que esta linha esteja errada ou apontando para qualquer outro lugar. Se quiser confirmar que a livraria está sendo carregada, abra o depurador do seu navegador (ctrl-shift-j, F12, …) e veja se ele não reclama disto.
Temos duas sessões bem definidas, uma a que define o estilo e outra que tem nosso pequeno programa.
Na definição do estilo, por favor não confunda o símbolo ‘#’ com o usado pelo YeAPF quando estamos fazendo pré-processamento. Isto é, quando o arquivo é processado pelo YeAPF antes de sair do servidor. No caso, o #meuTeste faz referencia ao div cujo ID é ‘meuTeste‘. Para ele definimos quatro estilos que lhe são particulares e que vão ser usados pelo yCalendar() para a visualização do calendário: calBand para a linha que vai conter varios dias, calTag para a etiqueta dos dias, calDayLCell para o restante da informação do dia quando na posição deitada, calDayLFreeCell para a célula de espaço em branco em posição deitada e calDayLHighLight para marcar o dia da data escolhida que no caso é hoje. Se você está fazendo certinho, ou seja, copiando à mão e não colando sobre um texto, é o momento oportuno de reparar nos pontos justo antes de cada estilo. Brinque um pouco com o estilo para ver como influencia a geração do calendário. Ou seja, edite, salve, dê F5 no navegador.
Como já falamos a linha <script src=”../YeAPF/yloader.js”></script> carrega o YeAPF. Porém, vale lembrar que na hora de um aplicativo WEB com YeAPF você não é consciente desta carga que acontece automaticamente para você.
Depois tempos a linha <div id=’meuTeste’></div> que indica onde será montado o calendário. Questões tais como posicionamento do calendário, vazamento, cor de fundo, etc são controlados neste div que -digamos- fica por baixo do calendário.
Finalmente chegamos ao código que é o que de fato nos interessa:
<script>
var myCalendar = yCalendar().
setDivContainerName('meuTeste').
setCellSize(64,48).
setOrientation(0).
build();
</script>
A primeira coisa que salta à vista para os não iniciados é a concatenação das chamadas de função por meio de um ‘.’. Isso é possível porque cada uma dessas funções devolve o próprio objeto o que simplifica a criação, configuração e chamada de forma mais ou menos atômica.
Fizemos questão de colocar uma chamada em cada linha para pode explicar passo a passo o que faz cada uma delas:
var myCalendar = yCalendar() cria uma variável chamada myCalendar chamando o objeto yCalendar() que no caso (como quase tudo no Javascript) é uma função de alto nível que contêm objetos privados e funções que podem ser chamadas desde fora do mesmo.
setDivContainerName(‘meuTeste’) indica ao objeto que o div que será usado para conter o calendário chama-se ‘meuTeste‘
setCellSize(64,48) determina que as células criadas vão ter 64px de largura por 48px de altura. Pode ser indicado só um dos parâmetros passando null para o outro. Caso seja omitido, o valor de altura e largura da célula será pegado do estilo.
setOrientation(0) faz com que o calendário seja montado na posição deitada.
E finalmente – mas não menos importante – chamamos build() para construir o nosso calendário. É importante destacar que build() tem que ser chamado no final por se tratar de uma função destrutiva e depender dos parâmetros passados anteriormente.
Uma outra forma de fazer a mesma coisa e que pode resultar mais claro para alguns é a seguinte:
<script>
var mycfg = {
orientation: 0,
cellSize: { width: '64px', height: '48px' },
divContainerName: 'meuTeste'
};
var myCalendar = yCalendar(mycfg).
build();
</script>
Neste caso, declaramos um objeto chamado mycfg contendo todas as propriedades a serem modificadas na hora da criação e a passamos como parâmetro para a função criadora. Ai já é uma questão de gosto e de momento. Por exemplo, o programador pode escolher salvar a forma de visualização do calendário em um banco de dados local para mais tarde mostrar aquele calendário do mesmo jeito em que o usuário o tinha deixado da última vez.
Mostrando informação no calendário
Agora vamos a modificar o script novamente para poder colocar informação nas células. Não é a única forma mas é uma que nos permitirá entender as chamadas às funções callback tão importantes na programação Javascript.
<script>
var aniversarios = {
10: ['Joaquim', 'Ana'],
20: ['Pedro'],
5: ['Felisberto', 'Maria', 'Henrique',
'Marieta', 'Luiz']
};
var myCallback = function(aCaller, aEventName, aObject) {
if (aEventName=='getCellContent') {
if (aObject.date) {
var nomesAniv = aniversarios[aObject.date.getDate()];
if (nomesAniv) {
var ret='';
for(var n=0; n<nomesAniv.length; n++) {
if (n>0)
ret += "<br>";
ret += nomesAniv[n];
}
return ret;
}
}
}
};
var myCalendar = yCalendar().
setDivContainerName('meuTeste').
setCellSize(64,48).
setOrientation(0).
setCallback(myCallback).
build();
</script>
Neste exemplo, existe uma variável global (péssimo exemplo) contendo os aniversários do mês (em qualquer mês que você veja este exemplo, estes vão estar aparecendo. São pessoas especiais que comemoram ano todo mês)
Temos também uma função chamada myCallBack() que é chamada toda vez que uma célula é criada no yCalendar() porque indicamos isso na criação nas últimas linhas com setCallback(myCallback). Claro que poderíamos ter feito isto com uma função anônima mas perderíamos legibilidade.
Esta função recebe três parâmetros: aCaller, aEventName e aObject. O prefixo ‘a’ nos parâmetros é padrão interno nosso e serve para distinguir na hora de ler o código um parâmetro de uma variável local, por exemplo.
Bom, aCaller é o objeto que está chamando sua função de retorno. No caso, myCalendar. Isso quer dizer que você pode usar uma função de retorno para vários calendários e que pode reagir de forma distinta analisando este parâmetro. Por exemplo, pode ser que você queira ter uma miniatura do calendário em que os dias ocupados são representados só por um tingimento da célula enquanto que no outro calendário você tem mais informação.
O parâmetro aEventName informa qual o evento que está sendo disparado dentre os seguintes: DOMLocked, getEmptyDayContent, getCellContent, getTagContent e DOMReleased.
E finalmente aObject é o objeto que está sendo criado, dimensionado, mostrado, destruido, liberado…
Bem, ao perguntarmos if (aEventName==’getCellContent’) { … } estamos confirmando que seja o evento desejado, ou seja, quando o yCalendar() está solicitando ao hospedeiro o conteúdo da célula. Depois analisamos se a célula em questão possui a propriedade date com if (aObject.date) { … } pois somente as células que sejam dias trazem esta propriedade.
Se tudo isso se confirmar, então é a hora de ver se há aniversários para aquele dia (lembre que por simplificação do exemplo, a data do aniversário tem só o dia e não o mês). Então criamos uma variável local com os aniversários assim: var nomesAniv = aniversarios[aObject.date.getDate()];
As seguintes linhas montam o resultado, lembrando que se quisermos usar o return como no exemplo, então devemos produzir o HTML que vai ser acrescentado à célula. Neste caso, uma linha seguida de outra.
Eventos disparados pelo yCalendar()
Você já tem a lista dos eventos que são disparados pelo yCalendar(). A tabela seguinte resume sua aplicação
| Evento | Explanação | Retorno esperado |
| DOMLocked | O yCalendar() está preparando o DOM. Os elementos não existem ainda e os que porventura já existiam antes dentro do contenedor, ainda existem | null |
| getEmptyDayContent | Solicita o conteúdo para uma célula vazia. | html ou null |
| getCellContent | Solicita o conteúdo para uma célula cheia (dia válido) | html ou null |
| getTagContent | solicita o conteúdo do TAG que identifica o dia (por padrão ele já está preenchido com o numero do dia. caso esta chamada devolva algum valor, o TAG padrão será substituido) | html ou null |
| DOMReleased | indica que o DOM está livre para ser usado. | null |