: Usando controles customizados em aplicações web com Dojo.

Introdução:

Historicamente, as aplicações web são menos ricas e com menos respostas que as aplicações desktop.Os usuários finais não compreendem, necessariamente, os detalhes de como uma aplicação funciona,mas sabem que interagir com uma pagina Web no navegador é distintamente diferente de se utilizar uma aplicação instalada localmente.Quando uma equipe de desenvolvimento assume um novo projeto, uma das primeiras perguntas com as quais se deparam é se os usuários finais podem aceitar as limitações do desenvolvimento web ou se eles precisam solicitar que uma aplicação de desktop de cliente seja instalada. As aplicações web estão acessíveis de qualquer navegador, de qualquer lugar, mas são limitadas àquilo que você pode fazer com marcação e códigos que rodam no navegador, por esse dentre outros motivos que uma bilblioteca como o Dojo vem nos ajudar a preencher essas lacunas.

Como exemplo vos apresento o Dojo Rich Text Editor Widget.

Agora vamos nos atentar para permite que o usuário entre com texto de multi-linha, enquanto usando o apenas um textarea provê algumas características simples. Mas isso é sobre tudo o que queremos fazer qualquer coisa diferente como mudar a fonte de um texto entre outras coisas mais, para que isto seja agradável teremos editor de texto poderoso que nós permite inserir direito na página.
Componente de facil uso basta adcionar a referencia na pagina, como mostramos nos posts anteriores e na imagem abaixo:

Pronto agora basta adicionar a tag do controle asp a referência ao dojo como no exemplo abaixo:

Conclusão:

Nesse post exemplificamos o uso de um dos componentes da biblioteca dojo,E para oferecer benefícios tanto para os usuários finais quanto para desenvolvedores. Para os usuários finais, para que possamos reduzir o conflito "riqueza ou alcance"; para desenvolvedores,ajuda na superação de obstáculos impostos pelo HTTP, Por que os usuários tendem a ver as aplicações de desktop como uma espécie de compromisso.Com a web 2.0 talvez consigamos quebrar esse paradigma..

Usando dojo para validações do lado do Cliente.

Nesse post vamos descreve características do Dojo que lhes permitem validar facilmente seus formulários do lado cliente, evitando aqueles postbacks indesejáveis , apenas para validar o valor de um campo.

Validação em páginas web normalmente é uma função executada pelo servidor web. O formulário permite que o usuário entre com dados quando o pressiona algum botão ,o browser empacota para os dados em um pedido de HTTP e envia isto ao servidor.A checagem de cada campo para ter certeza é validada, e se qualquer problema for encontrado ,uma mensagens de erro não é mandado de volta ao browser.O quanto isto seria muito mais útil se pudessem ser descobertos no browser antes de um pedido de servidor ser feito?

Pra isso vamos usar uma funcionalida muito simples do Dojo, como exemplo vamos usar
o controle do asp , TextBox, mas a validação pode ser usada com qualquer componente.

Como na imagem abaixo, basta que adicionemos as tag do dojo para validação, lembrando que podemos esquecer de adicionar as tags obrigatórios do dojo, como foi mostrado no post Anterior.

pronto basta executar a pagina , vejamos como fica:

Quando o usuario informa uma valor que não é valido, o campo onde ocorreu a validação
fica em destaque como a figura abaixo:

validando TextBox com expressão regular, bem simples veja no exemplo abaixo:



Conclusão:

Nesse poste o intuito foi demostrar como informa ao usurio onde ele esta errando no preenchimento do formulário. Muito intuitivo ,pois fixa a validação no campo diferente
das valições default do asp.net.
Espero ter ajudado. proximo post iremos demonstrar como Usar Dojo para trabalhar com Server.

Implementando DojoToolkit no Visual Studio 2008 usando MasterPage

Em artigos anteriores detalhamos as configurações mínimas para funcionamento do Dojo, nesse artigo iremos demonstrar como facilitar a implentação da biblioteca Dojo Toolkit em aplicações web utilizando o Visual Studio 2008 em um dos seus recursos mais usados, masterpages , tentarei exemplificar de forma ilustrativa a criação de um web site e a configuração da masterPage.

Adicionando uma Master Page ao projeto.

Depois de demonstrado como criar um mini projeto no Visual Studio vamos adicionar um novo item, nossa masterPage que será usada para receber as referências conforme podemos verificar abaixo:

Selecionando uma MasterPage.

Selecione o item MasterPage, escolha um nome da sua preferência.

Adicionanado um formulário ao projeto.

Vamos adicionar um formulário web para a nossa aplicação web, e selecionar a masterPage que será usada para implementar o dojo.

Selecionando a masterPage Com Dojo.

Essa é a masterPage que acabamos de criar.

Como deve ficar o projeto.

Como nosso projeto ficará , deve existir a masterPage e o formulário usando a masterPage.

Configurando a masterPage.

Pronto chegamos a parte mais importante do dojo, são as configuração para adicionar as referências do Dojo Toolkit como na ilustração abaixo:

Na tag style adicionaremos os imports da biblioteca ,são os Css. Proximo passo seria adicionarmos o JavaScript do dojo há masterPage
Vamos registrar os principais componentes.
ara finalizar adicionamos o Patch do Dojo.
Agora nossa masterPage esta pronta.

Configurando o Formulário para utilizar Dojo

Agora que já esta quase tudo pronto, basta adicionar a referência do dojo para qualquer controle asp ,como na ilustração abaixo

Exemplo de formulário Usando Dojo.

Conclusão:

Neste artigo demonstramos como facilitar a vida do arquiteto e do desenvolvedor web na utilização do DojoToolkit, reduzindo os esforços necessários para implementações e manutenções futuras em portais coorporativos e web sites.

Exemplo utilizando DOJO Toolkit

Neste post iremos apresentar o código de uma aplicação simples utilizando o DOJO, onde o texto digitado em uma caixa de textos deverá aparecer como um alerta quando clicado em um botão. Será explicando passo a passo a utilização dos componentes utilizados.

<html>

<head>

<link rel="StyleSheet" type="text/css"

href="js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript">

var djConfig = {

baseScriptUri : "js/dojo/",

parseOnLoad : true

};

</script>

<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>

<script>

dojo.require("dojo.parser");

dojo.require("dijit.form.TextBox");

dojo.require("dijit.form.Button");

dojo.addOnLoad(function( ) {

dojo.connect(dijit.byId("button1"), "onClick", function(evt) {

alert(dijit.byId("input1").value);

});

});

</script>

</head>

<body class="tundra">

<input type="text" id="input1" value="Hello World" dojoType="dijit.form.TextBox" />

<button id="button1" dojoType="dijit.form.Button" onclick=" button1">Clique

<script type="dojo/method" event="onClick" args="evt">

</script>

</button>

</body>

</html>

· O arquivo dojo.js é o mais importante do DOJO Toolkit e pode ser utilizado inserindo o seguinte código à página:

<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>

· Como iremos utilizar o widget Dijit, teremos que importar a folha de estilos do Dijit. Tundra é o tema padrão, o qual será utilizado neste exemplo:

href="js/dojo/dijit/themes/tundra/tundra.css">

· O dojo.require() pode ser comparado ao import do java. Para utilizar uma classe é necessário importá-la:

dojo.require("dijit.form.TextBox");

dojo.require("dijit.form.Button");

· O dojo.addOnLoad é o método responsável por registrar as funções que serão utilizadas pelos widgets:

dojo.addOnLoad(function( ) { ... });

· O dojo.connect faz a ligação entre objeto, evento e ação, ou seja executa uma determinada ação quando o evento de de um objeto é disparado. No caso do exemplo irá dar um alert com o valor do campo input quando o botão for clicado:

dojo.connect(dijit.byId("button1"), "onClick", function(evt) {

alert(dijit.byId("input1").value);

});

· Utilizando os FormWidgets TextBox e Button:

<input type="text" id="input1" value="Hello World" dojoType="dijit.form.TextBox" />

<button id="button1" dojoType="dijit.form.Button" onclick=" button1">

· Digitando “Hello World!!!” no TextBox e clicando no botão, deverá aparecer uma página parecida com a figura abaixo:

·

A documentação do DOJO pode ser encontrada em: http://api.dojotoolkit.org/jsdoc/1.3.2/dojo

Configurando o DOJO Toolkit

Existem duas maneiras de configurar o DOJO Toolkit no servidor WEB:

1.       Utilizar o DOJO Toolkit de uma Rede de Entrega de Conteúdo (CDN)

Essa é a forma mais fácil de utilização do DOJO Toolkit, pois não é necessário instalar nada no servidor web, utilizando-o de redes de entrega de conteúdo. São elas:

·         Google CDN

Deve-se inserir a seguinte tag na página:

<script src= "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" type="text/javascript"></script>

·         AOL CDN

Deve-se inserir a seguinte tag na página:

<script src= "http://o.aolcdn.com/dojo/1.4/dojo/dojo.xd.js" type="text/javascript"></script>

2.       Instalar o DOJO Toolkit no servidor WEB

Nessa segunda forma de configuração deve-se fazer o download do DOJO Toolkit no endereço http://dojotoolkit.org/download/. 

Aapós o download, deverá descompactá-lo no servidor WEB, podendo ser acessado por todas as páginas do servidor WEB. 

Por exemplo, se o nome do diretório onde ficam os javascript do servidor for “js”, o DOJO poderá ser descompactado nessa pasta e ser acessado pelas páginas através da seguinte tag: 

<script type="text/JavaScript" SRC="js/dojo/dojo.js"/>

Usando DOJO Toolkit com o Visual Studio 2008

Neste artigo é fornecer um ponto de partida para a utilização do DOJO toolkit no desenvolvimento de aplicações Web. Tentarei apresentar da forma mais simples como podemos utilizar o DOJO, desde a sua configuração até a sua aplicação em projetos Web.

Requisitos

Obviamente precisamos possuir o DOJO toolkit. Como o DOJO é totalmente livre, você poderá baixar sua versão mais recente através http://dojotoolkit.org/downloads.


Criando uma Web Application com o Visual Studio

Para iniciarmos nosso mini projeto criaremos uma solução no Visual Studio com um projeto Asp .net Web Application, conforme podemos verificar abaixo:

Configurando o DOJO no Visual Studio

Após descompactar o arquivo baixado na internet com o DOJO serão apresentadas quatro pastas (dijit, dojo, dojox e util). Entretanto, para o nosso projeto iremos utilizar apenas as pastas dijit e dojo. Para nosso projeto iremos criar uma pasta chamada jscripts e copiar para ela as pastas dijit e dojo. O projeto deverá ficar com a aparência abaixo:

Aplicando DOJO na Web Page

Depois de configurado poderemos iniciar a utilização dos recursos do DOJO em nosso projeto. Primeiramente vamos configurar o head da página.

Na primeira seção iremos utilizar o tema soria.css existente no pacote dijit. Existem outros temas no pacote utils, mas para este exemplo iremos utilizar o soria.css. Após a primeira seção foi inserido um elemento script que será o responsável por carregar o script base do DOJO que permitirá a utilização de todas as funcionalidades do DOJO.

Na segunda seção iremos inclui no elemento script o comando dojo.require. Essa instrução irá instrui o DOJO a carregar os buttons Widgets usados na nossa página. Se essa linha for omitida esta linha, o código de marcação para o botão não seria avaliada pelo DOJO após o carregamento, resultando em um botão HTML simples ao invés do que você espera.

Para concluir o head criaremos duas funções CallBack. Para isso, incluiremos um novo elemento script com as funções helloCallback e helloError. A chamada a essas funções será descrita mais adiante. Os dois parametros utilizados nas funções (data e ioArgs) são importantes. O primeiro argumento contém os dados enviados do servidor, enquanto o segundo argumento contém um Dojo I/O objeto Bind. No nosso projeto iremos utilizar apenas o primeiro parâmetro.

Ligando um evento a um Widget Button

Com o DOJO configurado e as funções implementadas iremos criar as chamadas paras essas funções de duas maneiras. Na primeira iremos utilizar a função alert, e a segunda será utilizada a função dojo.xhrGet. O primeiro apenas retornará uma mensagem, enquanto que o segundo submete uma requisição a um servidor qualquer.

Um detalhe importante a utilização dessas funções é a inclusão do script dentro do corpo da tag. Com isso, você pode aproveitar toda a potência do DOM Level 2 events dentro do script.

A função alert será invocada quando o primeiro botão for pressionado, apresentando a mensagem 'Você pressionou o botão'. Entretanto, para utilização da função dojo.xhrGet será necessário a utilização de uma página aspx que simulará nosso servidor neste exemplo. O novo Web Form será definido como ResponseGET.aspx e todo o source será substituído pelo script abaixo:

Pronto, nosso servidor está pronto para responder as solicitações requisitadas.

A função dojo.xhrGet possui os parâmetros:

url: Definirá o servidor onde que será enviada a requisição;
load: Método que receberá a resposta do servidor;
error: Método que receberá possíveis erros nas respostas do servidor;
content: responsável por enviar o valores necessários para o servidor;

Conclusão

Quando a aplicação for executada o serão apresentados dois botões e o caixa de entrada. O primeiro botão irá apresentar uma simples mensagem. Entretanto, o segundo botão irá apresentar o texto contido na caixa de entrada. Neste caso a aplicação através da função xhrGet irá passar o valor informado para a página ResponseGet.aspx que está simulando nosso servidor. Essa por sua vez irá apenas retornar esse valor para a aplicação. A aplicação receberá o retorno através do parâmetro data definido na função HelloCallBack.
Este foi apenas uma pequena demonstração de como podemos utilizar o DOJO. Nele existem inúmeras funcionalidades que poderemos descrever em novos artigos.

Introdução ao Dojo Toolkit

Para os amantes do AJAX, irei escrever uma pequena introdução sobre o DOJO toolkit.

Bem, para darmos início ao nosso blog o que é DOJO toolkit?

O DOJO é uma biblioteca JavaScript de código aberto criada para facilitar o desenvolvimento de aplicações web de maneira fácil e rápido. Possibilitando maior interatividade entre usuário e aplicação.

Ao se utilizar essa biblioteca o desenvolvedor ganhará facilidades nas manutenções das telas da aplicação que está sendo implementadas.

Essa biblioteca foi criada em 2004 por várias pessoas entre elas:

Alex Russell, Schiemann Dylan e David Schontzler.

Atualmente é distribuída nas licenças:

BSD (Berkeley Software Distribution) = Licença de software livre, segundo Wikipédia; e Academic Free License.

A distribuição é controlada pela Dojo Foundation, uma organização sem fins lucrativos.

No próximo blog irei mostrar como configurar e em seguida irei fazer um exemplo como demonstração dessa biblioteca javascript.