Em continuação sobre a utilização do Dojo junto com aplicações Lotus Domino, nesse post vou falar um pouco sobre DojoX. Quando estamos trabalhando com a biblioteca Dojo, ela pode ser divida em três partes:
- Dojo Base: É a parte mais básica do Dojo, que trabalhar com dados, drag-and-drop, etc.
- Dijit: É a parte que trabalha com interfaces, campos, etc. O Dijit foi utilizando no meu post anterior
- DojoX: É a parte que trabalha com gráficos, como imagens, gráficos, layout, etc.
O objetivo deste post é explorar um pouco mais sobre o DojoX, ou seja, uma parte mais visual do Dojo. Aqui vou estar fazendo uma visualização de fotos utilizando o componente SlideShow do DojoX. Abaixo você poderá ver a criação desta aplicação.
A aplicação
A aplicação é muito simples, existem dois formulários, um para fazer a criação dos documentos de imagens e outro para a apresentação das imagens no formato SlideShow. Também foram criadas duas visualizações e um agente para trazer os dados das fotos.
O primeiro formulário que criei serve para fazer o upload das fotos, neste formulário eu colocquei os seguintes campos:
Campo | Tipo | | Fórmula |
Nome | Text | Editável | |
Descricao | Text | Editável | |
Foto | RichText | Editável | |
NomeFoto | Text | Computado | @AttachmentNames |
Figura 01 - Formulário para upload das fotos
JSON
O componente que iremos utilizar para mostrar as fotos, recebe os dados através de JSON (JavaScript Object Notation), que é um formato leve para intercâmbio de dados. O Lotus Domino gera as visões (views) no formato JSON, bastando chamar a visão da seguinte forma:
http://<servidor>/<database.nsf>/<visão>?ReadViewEntries&outputformat=JSON
Apesar do Lotus Domino já ter essa facilidade, o código é gerado genericamente para atender qualquer aplicação e para trabalhar com as informações seria necessário criar um código JavaScript para separar todos os campos.
Quando comecei a mexer com o DojoX, vi que muitos dos dados vindos de JSON para os componentes eram bastantes simples e ao invés de escrever um código JavaScript para separar os elementos, resolvi construir um agente mais simples para montar os dados em JSON.
A estrutura utilizada pelo componente SlideShow para pegar as fotos é a seguinte:
{ items: [ {
"thumb":"http://<endereço>/<foto>",
"large":"http://<endereço>/<foto>",
"title":"<Descrição>",
"link":""http://<endereço>/<documento ou página da foto>"
} ]}
Para facilitar a criação desta estrutura eu montei uma visão bem simples com todos os campos necessários e depois criei um agente que lê esta visão e monta a saída no formato correto. Essa visão é composta pelas seguintes colunas: Título | Fórmula |
Nome | Nome |
title | Descricao |
thumb | "/bases/dojo.nsf/ViewSlideShow/" + @Text(@DocumentUniqueID) + "/$File/" + NomeFoto + "?OpenElement" |
large | "/bases/dojo.nsf/ViewSlideShow/" + @Text(@DocumentUniqueID) + "/$File/" + NomeFoto + "?OpenElement" |
link | "/bases/dojo.nsf/ViewSlideShow/" + @Text(@DocumentUniqueID) + "?OpenDocument" |
Figura 02 - View com os dados das fotos
A apresentação
O objetivo da apresentação é criar uma forma de escolher o nome (categoria) e mostrar todas as fotos no formato SlideShow. Para isso eu criei um formulário para a apresentação. Abaixo você pode ver o formulário pronto:
Figura 03 - Formulário de apresentação do SlideShow.
No formulário eu coloquei dois campos:
Campo | Tipo | | Fórmula |
nome_selecao | Combobox | Editável | @Subset(@DbColumn( "Notes" : "ReCache" ; @DbName ; "ViewSlide" ; 1 );1) |
fotoID | Text | Computado | @DbLookup( "Notes" : "ReCache" ; @DbName ; "ViewSlide" ; nome_selecao ; 1; [ReturnDocumentUniqueID]) |
O primeiro campo (nome_selecao) lê uma visão bem simples que criei. O nome desta visões é ViewSlide e abaixo você pode ver as definições das colunas:
Título | Fórmula |
Nome | Nome |
Descrição | Descricao |
A coluna Nome está categoriazada. Abaixo você pode ver a visão:
Figura 04 - Visão ViewSlide.
O segundo campo eu utilizo para pegar o ID do primeiro documento selecionado no campo nome_selecao. Quando eu chamar o agente para montar a estrutura JSON, eu passo esse ID como parâmetro, assim ele irá pegar todos os documento com o nome "SLIDESHOW", por exemplo.
Continuando no formulário, eu coloquei a chamada para os componentes do Dojo no campo HTML Head Content:
"<style type='text/css'>" +
"@import '/js/dijit/themes/tundra/tundra.css';" +
"@import '/js/dijit/themes/soria/soria.css';" +
"@import '/js/dijit/themes/nihilo/nihilo.css';" +
"@import '/js/dojox/image/resources/image.css';" +
"@import '/js/dojo/resources/dojo.css'" +
"</style>" +
"<script type='text/javascript' src='/js/dojo/dojo.js' djConfig='parseOnLoad: true'></script>"+
"<script type='text/javascript'>"+
"dojo.require('dojo.parser');"+
"dojo.require('dojo.data.ItemFileReadStore');"+
"dojo.require('dojox.image.SlideShow');"+
"</script>"
As linhas que deixei em negrito são as referências para o SlideShow e para o componente que lê os dados do JSON.
Na apresentação o código para criar o SlideShow é o seguinte:
<div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore"
url="/bases/dojo.nsf/slide-show-dojo?openagent&key=<Computed Value>"></div>
<div id="slideshow1" dojoType="dojox.image.SlideShow" imageWidth="600" imageHeight="600">
<script type="dojo/connect">
//This function runs when the widget has finished constructing
//It sets the data store to use
this.setDataStore(
//The data store
imageItemStore,
//The request object
{ query: {}, count:200 },
//The names of the attributes to get
{
imageThumbAttr: "thumb",
imageLargeAttr: "large",
}
);
</script>
</div>
A linha que deixei em negrito é referente a chamada do agente que irá montar o código JSON. No campo Computed Value, ele passa o ID do documento da foto. O resto do código eu peguei em um exemplo, e como vocês podem ver é bastante simples o entendimento.
A última parte deste exemplo é a construção do agente slide-show-dojo. Esse agente é responsável por montar a estrutura JSON para a apresentação das fotos. Abaixo segue o código:
Sub Initialize Dim session As New NotesSession Dim db As NotesDatabase Dim view As NotesView Dim vc As NotesViewEntryCollection Dim entry As NotesViewEntry Dim doc As NotesDocument Dim doc_selecao As NotesDocument Dim saida As String Dim pkey As String Dim QueryString As String //Pega a base e documento corrente criado na chamada Set db = session.CurrentDatabase Set doc = session.DocumentContext //Pega o parâmetro passado na URL (QueryString). Esse parâmetro é o ID do primeiro documento de fotos QueryString =doc.Query_String(0) pkey = ExtractParameter (QueryString, "key" ) //Abre o documento de foto Set doc_selecao = db.GetDocumentByUNID(pkey) //Pega todos os documentos com o mesmo nome (categoria) Set view = db.GetView("ViewSlideShow") Set vc = view.GetAllEntriesByKey(doc_selecao.Nome(0)) //Inicia um loop para a criação da saída JSON. Um ponto importante é a criação da saída. Quando você manda uma saída pelo HTTP do documento utilizando o comando print, o Domino monta uma página HTML por padrão, só que utilizarmos uma página HTML, a função ItemFileReadStore do Dojo não consegue entender os dados passados. Para evitar isso você precisa mandar um primeiro print falando que a saída é um documento do tipo texto e não HTML. Abaixo você pode ver esse print. Print |Content-type: text/plain| saida = "{ items: [" For i = 1 To vc.Count saida = saida + "{" Set entry = vc.GetNthEntry(i) saida = saida + "'thumb':" + "'" + entry.ColumnValues(2) + "'," saida = saida + "'large':" + "'" + entry.ColumnValues(3) + "'," saida = saida + "'title':" + "'" + entry.ColumnValues(1) + "'," saida = saida + "'link':" + "'" + entry.ColumnValues(4) + "'" If i = vc.Count Then saida = saida + "}" Else saida = saida + "}," End If Next saida = saida + "]}" //Manda a saída para o HTTP do Domino Print saida End Sub |
Essa função eu peguei no site OpenNTF e seu objetivo é separar os valores dentro da QueryString. Function ExtractParameter ( QueryString As String, ParamName As String ) As String Dim ParameterName As String ParameterName = ParamName & "=" Dim startPosition, endPosition, queryStringLength, parameterLength As Integer Dim parameterValue As String queryStringLength = Len ( QueryString ) parameterLength = Len ( ParameterName ) startPosition = Instr ( 1, QueryString, ParameterName, 5 ) If startPosition = 0 Then ' can be used to flag that no match param was sent parameterValue = "" Else startPosition = startPosition + parameterLength endPosition= Instr ( startPosition, QueryString, "&" ) If ( endPosition = 0 ) Then endPosition = queryStringLength + 1 parameterLength = endPosition - startPosition parameterValue = Mid ( QueryString, startPosition,parameterLength ) Elseif ( endPosition <> 0 ) Then parameterLength = endPosition - startPosition parameterValue = Mid ( QueryString, startPosition,parameterLength ) End If End If ExtractParameter = Replace(parameterValue,"_"," ") End Function |
Resultado
O resultado final desta aplicação é o seguinte:
Figura 05 - Resultado final da aplicação de Slide Show.
O que foi criando aqui não está baseado nas melhores práticas de programação, isto é um simples exemplo de como utilizar o DojoX dentro de uma aplicação Lotus Notes/Domino. Esse código pode ser melhorado com outras técnicas mais apuradas de desenvolvimento.
As referências que utilizei para fazer esse exemplo são:
DojoCampus.org - Deste site que tirei o exemplo acima, é uma ótima referência para começar a trabalhar com Dojo.
Dojotoolkit - Site com o código do Dojo e Documentação.