terça-feira, 11 de maio de 2010

ExtJS. RIA em javascript

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.

Um comentário: