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
Nenhum comentário:
Postar um comentário