No meu último post sobre RIA eu falei um pouquinho sobre extjs (na verdade só citei o nome). Vamos falar um pouquinho sobre esta tecnologia. Primeiro, o que é. Extjs é uma framework totalmente javascript cross-browser. Ou seja, tudo que você precisa pra rodar uma app construída com ele é um browser. Ele pode ser obtido em:
-http://www.extjs.com/products/js/download.php
Exemplos:
-http://www.extjs.com/deploy/dev/examples/
Documentação:
http://www.extjs.com/deploy/dev/docs/
Como começar? Fácil. Faça download. Crie uma nova pasta no seu web-server (chame-a de "teste", se desejar). Descompacte o extjs nesta pasta. Pra ficar mais fácil referenciar, mude o nome da pasta do extjs para ext. Crie um arquivo dentro da pasta "teste" chamado index.html. Insira o código abaixo neste arquivo:
<html>
<head>
<title>Teste Extjs</title>
<meta content="charset=utf-8" equiv="content-type"></meta>
<link href="ext/resources/css/ext-all.css" rel="stylesheet"></link>
<script src="ext/adapter/ext/ext-base.js">
</script>
<script src="ext/ext-all.js">
</script>
<script src="ext/src/locale/ext-lang-pt.js">
</script>
<script>
Ext.onReady(function(){
var win = new Ext.Window({
title : "Login",
height : 130,
width : 300,
layout : 'form',
closable : true,
modal : true
});
edtLogin = new Ext.form.TextField({
emptyText: 'Digite seu Login',
fieldLabel: 'Login',
width:210,
id: 'edtLogin'
});
edtSenha = new Ext.form.TextField({
emptyText: 'Digite sua senha',
fieldLabel: 'Senha',
width:210,
id: 'edtSenha'
});
btnEntrar = new Ext.Button({
text: 'Entrar',
handler: function(){
login = Ext.getCmp('edtLogin').getValue();
senha = Ext.getCmp('edtSenha').getValue();
Ext.Msg.alert('teste', 'Login: ' + login + ' Senha: ' + senha);
}
});
btnLimpar = new Ext.Button({
text: 'Limpar',
handler: function(){
Ext.getCmp('edtLogin').setValue('');
Ext.getCmp('edtSenha').setValue('');
}
});
pnlCentral = new Ext.form.FormPanel({
region: 'center',
frame: true,
labelWidth: 50,
items: [
edtLogin,
edtSenha
],
buttons:[ btnEntrar, btnLimpar ]
});
win.add(this.pnlCentral);
win.show();
});
</script>
</head>
<body>
</span>
<div id="body">
<span style="font-weight: bold;">
</span></div>
<noscript><font style="font-weight: bold;">Sé funciona com javascript habilitado!</font></noscript><span style="font-weight: bold;">
</body>
</html>
Esse pequenino código gera uma telinha de login:
Bem simples
. Vale a pena destacar que esta framework é toda orientada a objetos. Dá até pra utilizar conceitos como herança ou polimorfismo. Quem conhece javascript sabe que esta não é uma linguagem OO. É isso. No futuro eu falo novamente sobre esta plataforma.
