Dojo e Domino APP

Este post é para falar um pouco sobre a utilização do toolkit de Dojo nas aplicações desenvolvidas com o Lotus Domino. No final deste post não estarei com uma aplicação pronta, pois quero somente exemplificar como você poderá estar utilizando esse toolkit em suas aplicações. Após ler esse post você entenderá um pouco mais sobre Dojo e poderá já pensar na aplicação dele em suas aplicações Lotus Domino.

O que é o Dojo?

Dojo é um Open Source DHTML toolkit escrito em JavaScript. Dojo ajuda a resolver vários problemas com DHTML que barravam a adoção em massa dessa tecnologia para a contrução de aplicações dinâmicas para a web.

Como o Dojo, você pode construir facilmente capacidades dinâmicas para suas páginas web e qualquer outro ambiente que suporte JavaScript. Você pode usar os componente que o Dojo prove para fazer seu web site mais usual, responsivo e funcional.

Hoje, dentro dos produtos IBM, você poderá ver Dojo no Websphere Portal, Websphere Portlet Factory, Lotus Quickr, entre outros. Maiores detalhes sobre Dojo você poderá encontrar no site dojotoolkit.

Como instalar do Toolkit no Domino?

A instalação do Dojo toolkit é bastante simples, basta fazer o download do pacote e descompactar dentro do diretório HTML (data\domino\html) do Domino. No meu caso eu descompactei dentro do seguinte diretório: C:\lotus\Domino\data\domino\html\js

Figura 01 - Diretório de instalação do Dojo Toolkit

Após descompactar o pacote dentro do diretório HTML, você poderá testar o toolkit acessando a página de exemplo. O endereço é:

http://<seu servidor>/js/dijit/themes/themeTester.html

Deverá aparece a seguinte página para você:

 

Figura 02 - Página de exemplo do Dojo Toolkit

Inserindo código Dojo em um aplicação Domino

Para chamar o código do Dojo dentro de sua aplicação é bastante simples. No meu caso estarei utilizando o Domino 8, mas todas as funções/formas de utilização do código, podem ser aplicadas à versões anteriores também.

O primeiro passo foi a criação de um novo database dentro do Domino. Você poderá utilizar um database já existente se quiser.

Nessa aplicação eu irei criar somente um formulário para demonstrar as funcionalidades do Dojo voltadas a interface.

Após a criação do Formulário, dentro do campo HTML Head Content eu coloquei o seguinte código:

Figura 03 - HTML Head Content do Fomulário

Na figura 03, está sendo feita a chamada de todos os componentes necessários para a utilização do Dojo. As primeiras linhas são para definir o estilo que estarei utilizando (tundra.css, dojo.css). Depois é chamado o arquivo dojo.js que tem o módulo de parse. Com isso definido, o segundo passo é colocar quais são os componentes que iremos utilizar no formulário. Para esse exemplo estou usando os seguinte elementos:

Figura 04 - Componentes utilizados do Dojo

O último componente que estou utilizando é o Dialog, que é ativado quando for pressionado o botão Ajuda.

No formulário eu ainda incluí dentro da opção HTML Body Attributes o estilo que o formulário irá utilizar. Com a biblioteca do Dojo são fornecidos dois estilos o Tundra e o Soria. Para esse meu exemplo eu estou utilizando o estilo Tundra. Se você quiser poderá construir seu próprio estilo.

Depois de definir as opções para utilizar o Dojo, podemos estar escrevendo nosso formulário. A primeira definição que fiz foi do TitlePane. Para este componente, basta associar o código Dojo com um div. Veja abaixo o código:

<div dojoType="dijit.TitlePane" open="false" title="Formulário Dojo">

</div>

Todos os campos e botões do meu formulário estão dentro desse div, que dará um efeito bastante interessante para o formulário, como se estivesse utilizando o section do Lotus Domino.

Para cada campo do meu formulário, foi necessário colocar as informações sobre o tipo do campo do Dojo. Esses atributos eu estou colocando na opção de HTML Attritutes de cada campo. Veja a tabela abaixo:

Campo	Tipo	Valor Default	HTML Attribute
Nome	Text		"dojoType='dijit.form.ValidationTextBox' required='true' invalidMessage='Este campo eh obrigatorio' trim='true' propercase='true'"
Endereço	Text		"dojoType='dijit.form.TextBox' trim='true' propercase='true'"
Sexo	Checkbox		"dojoType='dijit.form.RadioButton'"
Data de Nascimento	Text	"2008-01-28"	"type='text' dojoType='dijit.form.DateTextBox' required='true'"
Valor da compra	Text	"0"	"type='text' dojoType='dijit.form.CurrencyTextBox' required='true' constraints='{fractional:true}' currency='USD' invalidMessage='Invalid amount.  Include dollar sign, commas, and cents.'"

Para os botões o código é bastante simples:

<button dojoType="dijit.form.Button" onclick="dijit.byId('dialog1').show()">Ajuda</button>
<button dojoType="dijit.form.Button" onclick="call_submit">Salvar e Sair</button>

A função dijit.byId('dialog1').show() é para chamar a janela de diálogo com a ajuda do formulário. O código para criação da janela de diálogo está um pouco mais à baixo. A função call_submit eu coloquei dentro do formulário na opção JS Header. Veja o código abaixo:

function call_submit() {
        document.forms[0].submit();
        }

A última parte deste exemplo é a criação da janela de diálogo para chamar a Ajuda. A janela está vinculado com um div que coloquei fora do primeiro div já que havia criado. O código está abaixo:

<div dojoType="dijit.Dialog" id="dialog1" title="First Dialog">
Help sobre esse formulário
</div>

O formulário final fica com essa cara no mode design:

Figura 05 - Formulário final em modo design  do nosso exemplo

Você poderá ver abaixo o formulário sendo utilizado no Browser. 

 

Figura 06 - Formulário em ação

No Notes os dados aparecem da seguinte forma:

Figura 06 - Formulário em ação

Esse foi um exemplo de como estar utilizando o toolkit Dojo em um formulário do Domino. Outros exemplos estão disponíveis em diversos sites. No developerworks tem um artigo bastante interessante e com mais informações que vale a pena. Meu objetivo era demonstrar coisas básicas para qualquer desenvolvedor Domino/Notes iniciar um projeto ou alterar um projeto utilizando esse poderoso toolkit.

Você poderá encontrar mais detalhes sobre a documentação do Dojo toolkit no próprio site.