• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
ExtJS-4
 

ExtJS-4

on

  • 275 views

Introdução Básica a ExtJS4

Introdução Básica a ExtJS4

Statistics

Views

Total Views
275
Views on SlideShare
274
Embed Views
1

Actions

Likes
3
Downloads
15
Comments
0

1 Embed 1

https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    ExtJS-4 ExtJS-4 Presentation Transcript

    • Sencha ExtJS
    • Eduardo Mendes (edumendes@gmail.com) Introdução 2
    • Eduardo Mendes (edumendes@gmail.com) Ext JS 3 Implementação de aplicações ricas para a plataforma Web Framework JavaScript da Sencha Possui outras versões, como o Sencha Touch Baseado em componentes Grande comunidade de desenvolvedores
    • Eduardo Mendes (edumendes@gmail.com)4
    • Eduardo Mendes (edumendes@gmail.com)5 Cross-Browser JavaScript
    • Eduardo Mendes (edumendes@gmail.com)6 É um Framework FrontEnd Deve ser utilizado com outras tecnologias para realizar a parte ServerSide Pode integrar com outros frameworks JS Até a versão 3 precisa de um adapter, mas agora não é mais necessário PHP RAILS SPRING STRUTS 2 PYTHON As informações entre servidor e ExtJS são trocadas por JSON e XML
    • Eduardo Mendes (edumendes@gmail.com) Orientado a Objetos 7 Ext.define(Nome, configuracoes, callback);
    • Eduardo Mendes (edumendes@gmail.com) Carregamento Dinâmico 8 Ext.Loader.setConfig({ enabled: true }); ! Ext.Loader.setPath(‘Ext.ux’, ‘../ux’); ! Ext.require(…);
    • Eduardo Mendes (edumendes@gmail.com) Package Data 9 Ext.Loader.setConfig({ enabled: true }); ! Ext.Loader.setPath(‘Ext.ux’, ‘../ux’); ! Ext.require(…);
    • Eduardo Mendes (edumendes@gmail.com) Model Fields 10 Ext.define('User', { extend: 'Ext.data.Model', fields: [ { name: ‘id’, type: 'int'}, {name: 'name', type: 'string'} ] });
    • Eduardo Mendes (edumendes@gmail.com) Model Association 11 Ext.define('User', { extend: 'Ext.data.Model', fields: [‘id’,’name’], hasMany: 'Posts' }); ! Ext.define('Post', { extend: 'Ext.data.Model', fields: [‘id’,’user_id’, ‘title’, ‘body’], belongsTo: 'User' });
    • Eduardo Mendes (edumendes@gmail.com) Arquitetura MVC 12
    • Eduardo Mendes (edumendes@gmail.com) Vasta Documentação 13
    • Eduardo Mendes (edumendes@gmail.com) Utilizando o ExtJS 14
    • Eduardo Mendes (edumendes@gmail.com)15 Faça o download do ExtJS no site da Sencha
    • Eduardo Mendes (edumendes@gmail.com)16 Descompacte e renomeie
    • Eduardo Mendes (edumendes@gmail.com)17 Estrutura docs: contém a documentação completa (que você precisa para implantá-lo em um servidor local para ser capaz de executá-lo) ! exemplos: Este contém exemplos de como usar os componentes Ext JS ! packages: contém os módulos Ext JS, empacotados ! resources: contém o CSS e imagens utilizados pelos temas Ext ! src: código fonte completo ! welcome: contém imagens utilizadas pelo index.html ! builds: arquivos adicionais !
    • Eduardo Mendes (edumendes@gmail.com)18 Ouvindo o evento ready Ext.onReady(function(){ <code> }); DOM "I'm ready" O código só executará depois que o DOM estiver "pronto"
    • Eduardo Mendes (edumendes@gmail.com)19 Utilizando ExtJS dowload ExtJS carregue-o em seu documento HTML <script src=“extjs-all.js”></script> carregue o CSS do ExtJS <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> 1 2 3
    • Eduardo Mendes (edumendes@gmail.com)20 Exemplo completo <html> <head> ! ! ! ! </head> <body></body> ! ! ! ! ! </html> <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" /> <script> Ext.onReady(function() { Ext.MessageBox.alert('Hello','Hello, World!'); }); </script> <script src="../extjs/ext-all.js"></script>
    • Eduardo Mendes (edumendes@gmail.com) Internacionalização 21
    • Eduardo Mendes (edumendes@gmail.com)22 Internacionalização
    • Eduardo Mendes (edumendes@gmail.com) Criando um Painel Simples 23
    • Eduardo Mendes (edumendes@gmail.com) widget.panel 24 Criando um Painel Simples
    • Eduardo Mendes (edumendes@gmail.com)25 Criando um Painel Simples <body> <div id="painelPrincipal"></div> </body> Ext.onReady(function () { ! ! ! ! ! ! ! ! ! }); renderTo: 'painelPrincipal', ! title: 'Painel ExtJS 4', width: 400, height: 300, frame: true, ! html: "<div id='contentID'></div>" Ext.create('widget.panel', { ! ! ! ! ! ! ! });
    • Eduardo Mendes (edumendes@gmail.com) Integrando com jQuery 26
    • Eduardo Mendes (edumendes@gmail.com)27 Criando um Painel Simples + jQuery Ext.onReady(function () { Ext.create('widget.panel', { renderTo: 'painelPrincipal', ! title: 'Painel ExtJS 4', width: 400, height: 300, frame: true, ! html: "<div id='contentID'></div>" }); $("#contentID").load("conteudo.html"); });
    • Eduardo Mendes (edumendes@gmail.com)28 Carregando o conteúdo com jQuery
    • Eduardo Mendes (edumendes@gmail.com) Definindo classes 29
    • Eduardo Mendes (edumendes@gmail.com) Definir classes 02 maneiras 30 Ext.define(Nome, configuracoes, callback); Ext.ClassManager(Nome, configuracoes, callback);
    • Eduardo Mendes (edumendes@gmail.com)31 Classe Usuario
    • Eduardo Mendes (edumendes@gmail.com) 32 Definindo uma classe Ext.onReady(function () { ! ! ! ! ! ! ! ! ! ! ! ! }); Ext.define('Usuario', { ! ! ! ! ! ! ! ! ! ! }); nome: '', senha: '', login: function() { console.log("Logando na aplicacao..."); }, logout: function() { console.log("Saindo d aplicação...") } }, function() { console.log("Callback acionado"); }
    • Eduardo Mendes (edumendes@gmail.com)33 Sobrescrever Existe um construtor padrão no ExtJS constructor: function(options){ Ext.apply(this, options || {}); }
    • Eduardo Mendes (edumendes@gmail.com) 34 Sobrescrevendo o construtor Ext.onReady(function () { Ext.define('Usuario', { nome: '', senha: '', ! ! ! login: function() { console.log("Logando na aplicacao..."); }, logout: function() { console.log("Saindo d aplicação...") } }, … }); constructor: function(options) { Ext.apply(this, options || {}); },
    • Eduardo Mendes (edumendes@gmail.com) Instanciar um objeto 02 maneiras 35 Ext.create(Nome, opcoes); Ext.ClassManager.instantiate(Nome, opcoes);
    • Eduardo Mendes (edumendes@gmail.com) Instanciar um objeto Usuario 36 var usuario = Ext.create('Usuario');
    • Eduardo Mendes (edumendes@gmail.com)37 Passando parâmetros var usuario = Ext.create(‘Usuario’, { nome: ‘Eduardo’, senha: ‘123456’ });
    • Eduardo Mendes (edumendes@gmail.com)38 Código final Ext.onReady(function () { Ext.define('Usuario', { nome: '', senha: '', ! constructor: function (options) { Ext.apply(this, options || {}); ! console.log("Construtor chamado"); }, login: function () { console.log("Logando na aplicacao..."); }, logout: function () { console.log("Saindo d aplicação...") } }, function () { console.log("Callback acionado"); } ); ! var usuario = Ext.create('Usuario', { nome: 'Eduardo', senha: '123456' }); console.log(usuario); });
    • Eduardo Mendes (edumendes@gmail.com)39 Refatorando Ext.define('Usuario', { nome: '', senha: '', ! constructor: function (options) { Ext.apply(this, options || {}); ! console.log("Construtor chamado"); }, login: function () { console.log("Logando na aplicacao..."); }, logout: function () { console.log("Saindo d aplicação...") } }, function () { console.log("Callback acionado"); } ); ! Ext.onReady(function () { var usuario = Ext.create('Usuario', { nome: 'Eduardo', senha: '123456' }); console.log(usuario); });
    • Eduardo Mendes (edumendes@gmail.com) Herança 40
    • Eduardo Mendes (edumendes@gmail.com)41 Herança A finalidade de utilizar herança com ExtJS é personalizar os componentes existentes para as necessidades de um sistema específico Escolha um componente e configure suas propriedades e comportamentos
    • Eduardo Mendes (edumendes@gmail.com)42 Herdando dos componentes ExtJS A opção extend permite que se possa herdar e personalizar um componente ExtJS Ext.define('MyButton', { } ); Ext.onReady(function () { Ext.create("MyButton", { ! ! }); }); O 1.º passo é utilizar o código de definição de uma classe extend: É necessário informar o nome completo da classe que se quer herdar O valor informado deve ser uma String text: ‘Olá ExtJs', renderTo: Ext.getBody() 'Ext.button.Button'
    • Eduardo Mendes (edumendes@gmail.com)43
    • Eduardo Mendes (edumendes@gmail.com)44 Herdando dos componentes ExtJS Ext.define('MyButton', { } ); Ext.onReady(function () { Ext.create("MyButton", { ! ! }); }); extend: text: ‘Olá ExtJs', renderTo: Ext.getBody() 'Ext.button.Button' Vamos adicionar à definição da classe a característica e o comportamento
    • Eduardo Mendes (edumendes@gmail.com)45 Herdando dos componentes ExtJS Ext.define('MyButton', { extend: ‘Ext.button.Button' text: ‘Olá ExtJs', renderTo: Ext.getBody() ! } ); Ext.onReady(function () { Ext.create("MyButton"); }); Essa opção ainda permite que haja sobrescrita de valores Como fazer para evitar isso?
    • Eduardo Mendes (edumendes@gmail.com) Adicionando propriedades finais 46 initComponent: function(){} this.callParent(); gancho para personalizar a inicialização de um componente faz uma chamada ao construtor da superclasse imediata
    • Eduardo Mendes (edumendes@gmail.com)47 Propriedades finais Ext.define('MyButton', { extend: 'Ext.button.Button', initComponent: function() { this.text = "Outra frase"; this.callParent(); } } ); Ext.onReady(function () { Ext.create("MyButton"); });
    • Eduardo Mendes (edumendes@gmail.com)48 Propriedades finais Ext.define('MyButton', { extend: 'Ext.button.Button', initComponent: function() { this.text = "Outra frase"; this.callParent(); } } ); Ext.onReady(function () { Ext.create("MyButton", { text: 'Olá ExtJS', renderTo: Ext.getBody() }); });
    • Eduardo Mendes (edumendes@gmail.com)49 Reaproveitando o componente <body> <section id="opcao1"></section> <section id="opcao2"></section> <section id="opcao3"></section> </body>
    • Eduardo Mendes (edumendes@gmail.com)50 Reaproveitando o componente Ext.onReady(function () { Ext.create("MyButton", { renderTo: 'opcao1' }); ! Ext.create("MyButton", { renderTo: 'opcao2' }); ! Ext.create("MyButton", { renderTo: 'opcao3' }); ! }); <body> <section id="opcao1"></section> <section id="opcao2"></section> <section id="opcao3"></section> </body>
    • Eduardo Mendes (edumendes@gmail.com) Mixins 51
    • Eduardo Mendes (edumendes@gmail.com)52 Mixins Definem um conjunto de comportamentos e configurações reutilizáveis que podem ser mixadas a uma classe o 1.º passo é criar uma classe para ser o mixin
    • Eduardo Mendes (edumendes@gmail.com)53 Mixins Um mixin pode ter qualquer número de métodos Uma classe pode utilizar qualquer n.º de mixins
    • Eduardo Mendes (edumendes@gmail.com)54 Mixins Locavel e Vendivel Ext.define( ! ); ‘Exemplo.mixin.Locavel’, { } alugar: function() { console.log('Imovel está disponível para aluguel!'); Ext.define( ! ); ‘Exemplo.mixin.Vendivel’, { } vender: function() { console.log('Imovel está disponível para venda!');
    • Eduardo Mendes (edumendes@gmail.com)55 Mixins Locavel e Vendivel Ext.define('Exemplo.mixin.Locavel', { alugar: function() { console.log('Imovel está disponível para aluguel!'); } }); ! Ext.define('Exemplo.mixin.Vendivel', { vender: function() { console.log('Imovel está disponível para comprar!'); } }); Ext.define('Exemplo.imovel.Apartamento', { ! ! ! }); ! mixins: { ! ! } ! ! alugarApartamento: ‘Exemplo.mixin.Locavel’, ! ! ! ! venderApartamento: ‘Exemplo.mixin.Vendivel’ as chaves podem possuir qualquer valor
    • Eduardo Mendes (edumendes@gmail.com)56 Mixins Locavel e Vendivel Ext.define('Exemplo.imovel.Apartamento', { mixins: { alugarApartamento: 'Exemplo.mixin.Locavel', venderApartamento: 'Exemplo.mixin.Vendivel' } }); Ext.onReady(function () { ! var meuAp = Ext.create('Exemplo.imovel.Apartamento'); meuAp.alugar(); meuAp.vender(); ! });
    • Eduardo Mendes (edumendes@gmail.com) Config (getters, setters) 57
    • Eduardo Mendes (edumendes@gmail.com)58 Config Cria métodos acessores e modificadores de forma automática, mais utilitários getter setter reset apply
    • Eduardo Mendes (edumendes@gmail.com)59 Config Ext.onReady(function () { Ext.define('Usuario', { nome: '', senha: '', }); });
    • Eduardo Mendes (edumendes@gmail.com)60 Config Ext.define('Usuario', { config: { nome: '', senha: ‘', } }); getNome setNome resetNome getSenha setSenha resetSenha
    • Eduardo Mendes (edumendes@gmail.com) MessageBox alert, confirm, prompt 61
    • Eduardo Mendes (edumendes@gmail.com)62 Botão e MessageBox
    • Eduardo Mendes (edumendes@gmail.com)63 Acionando um MessageBox a partir do botão Ext.onReady(function() { Ext.create('Ext.Button', { text: 'Saudar a Turma', renderTo: 'botao-saudar', handler: function() { Ext.MessageBox.alert('Saudacao','Ola, Turma!'); } }); }); informa em o id do elemento onde será renderizado informa a ação que será realizada ao clicar no botão <p id="botao-saudar"></p>
    • Eduardo Mendes (edumendes@gmail.com) Saudar Turma 64
    • Eduardo Mendes (edumendes@gmail.com)65 MessageBox + Callback O 3.º parâmetro é um callback que é executado quando o botão OK é chamado Ext.onReady(function() { Ext.create('Ext.Button', { text: 'Saudar a Turma', renderTo: 'botao-saudar', handler: function() { Ext.MessageBox.alert('Saudacao','Ola, Turma!'); } }); });
    • Eduardo Mendes (edumendes@gmail.com)66 MessageBox + Callback O 3.º parâmetro é um callback que é executado quando o botão OK é chamado Ext.onReady(function() { Ext.create('Ext.Button', { text: 'Saudar a Turma', renderTo: 'botao-saudar', handler: function() { Ext.MessageBox.alert('Saudacao','Ola, Turma!’, function() { console.log("A turma foi saudada"); } ); } }); });
    • Eduardo Mendes (edumendes@gmail.com) Callback 67
    • Eduardo Mendes (edumendes@gmail.com)68 MessageBox + confirm A mensagem de confirmação Ext.create('Ext.Button', { text: 'Confirmar Aula', renderTo: 'botao-confirmar', handler: function() { Ext.MessageBox.confirm( ‘Confirmacao', 'Confirmar a aula?’, function(btn) { console.log("A aula foi confirmada? R: " + btn); } ); } });
    • Eduardo Mendes (edumendes@gmail.com) Confirmação 69
    • Eduardo Mendes (edumendes@gmail.com)70 MessageBox A mensagem de confirmacao Ext.create('Ext.Button', { text: 'Confirmar Aula', renderTo: 'botao-confirmar', handler: function() { Ext.MessageBox.confirm( ‘Confirmacao', 'Confirmar a aula?’, function(btn) { console.log("A aula foi confirmada? R: " + btn); } ); } });
    • Eduardo Mendes (edumendes@gmail.com)71 MessageBox + confirm + acao ! Ext.MessageBox.confirm( ‘Confirmacao', 'Confirmar a aula?’, function(btn) { console.log("A aula foi confirmada? R: " + btn); if (btn == "yes") { Ext.MessageBox.alert('Confirmada','Ola, …’); } } );
    • Eduardo Mendes (edumendes@gmail.com) Alerta da aula 72
    • Eduardo Mendes (edumendes@gmail.com)73 MessageBox + Prompt O botão de prompt Ext.create('Ext.Button', { text: 'Prompt', renderTo: 'botao-prompt', handler: function() { Ext.MessageBox.prompt( 'Prompt', 'Qual o horario da aula?', function(btn, text) { console.log("O horario da aula eh: " + text); } ); } });
    • Eduardo Mendes (edumendes@gmail.com) Prompt 74
    • Eduardo Mendes (edumendes@gmail.com)75 MessageBox + Prompt + multiline O botão de prompt Ext.create('Ext.Button', { text: 'Prompt', renderTo: 'botao-prompt', handler: function() { Ext.MessageBox.prompt( 'Prompt', 'Qual o horario da aula?', function(btn, text) { console.log("O horario da aula eh: " + text); } ); } });
    • Eduardo Mendes (edumendes@gmail.com)76 MessageBox + Prompt + multiline O botão de prompt Ext.create('Ext.Button', { text: 'Prompt-area', renderTo: 'botao-prompt-area', handler: function() { Ext.MessageBox.prompt( 'Prompt', ‘Qual sera o conteudo da aula?', function(btn, text) { console.log("O conteudo da aula eh: " + text); }, this, true ); } });
    • Eduardo Mendes (edumendes@gmail.com) Conteudo da Aula 77
    • Eduardo Mendes (edumendes@gmail.com) Panel 78
    • Eduardo Mendes (edumendes@gmail.com)79 Panel Várias classes no ExtJS são subclasses de Panel como: ! Menu ! Form ! Grid ! Window
    • Eduardo Mendes (edumendes@gmail.com)80 Panel
    • Eduardo Mendes (edumendes@gmail.com) Configurações 81 html items buttons dockedItems layout tools title bars
    • Eduardo Mendes (edumendes@gmail.com)82 Panel Código básico Ext.onReady(function() { Ext.create('Ext.panel.Panel', { title: 'Ola', width: 200, html: '<p>Turma!</p>', renderTo: Ext.getBody() }); });
    • Eduardo Mendes (edumendes@gmail.com)83 Panel Código básico Ext.onReady(function() { Ext.create('Ext.panel.Panel', { title: 'Ola', width: 200, height: 300, html: '<p>Turma!</p>', renderTo: Ext.getBody() }); });
    • Eduardo Mendes (edumendes@gmail.com) Configurações 84 html items buttons dockedItems layout tools title bars
    • Eduardo Mendes (edumendes@gmail.com)85 Panel + items Ext.onReady(function() { Ext.create('Ext.panel.Panel', { bodyPadding: 20, width: 300, title: 'Filters', items: [{ xtype: 'datefield', fieldLabel: 'Data inicial' }, { xtype: 'datefield', fieldLabel: 'Data final' }], renderTo: Ext.getBody() }); });
    • Eduardo Mendes (edumendes@gmail.com)86 Panel + items + grid Ext.onReady(function() { Ext.create('Ext.panel.Panel', { bodyPadding: 20, width: 300, title: 'Filters', items: [{ xtype: 'datefield', fieldLabel: 'Data inicial' }, { xtype: 'datefield', fieldLabel: 'Data final' }], renderTo: Ext.getBody() }); });
    • Eduardo Mendes (edumendes@gmail.com) Configurações 87 html items buttons dockedItems layout tools title bars
    • Eduardo Mendes (edumendes@gmail.com)88 Panel + dockedItems Ext.create('Ext.panel.Panel', { bodyPadding: 20, title: 'Filters', width: 300, items: [{ xtype: 'datefield', fieldLabel: 'Data inicial' }, { xtype: 'datefield', fieldLabel: 'Data final' }], dockedItems: [{ xtype: 'toolbar', dock: 'bottom', items: [{ text: 'Encaixado na base' }] }], renderTo: Ext.getBody() });