Uploaded on

Introdução Básica a ExtJS4

Introdução Básica a ExtJS4

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
470
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
22
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Sencha ExtJS
  • 2. Eduardo Mendes (edumendes@gmail.com) Introdução 2
  • 3. 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
  • 4. Eduardo Mendes (edumendes@gmail.com)4
  • 5. Eduardo Mendes (edumendes@gmail.com)5 Cross-Browser JavaScript
  • 6. 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
  • 7. Eduardo Mendes (edumendes@gmail.com) Orientado a Objetos 7 Ext.define(Nome, configuracoes, callback);
  • 8. Eduardo Mendes (edumendes@gmail.com) Carregamento Dinâmico 8 Ext.Loader.setConfig({ enabled: true }); ! Ext.Loader.setPath(‘Ext.ux’, ‘../ux’); ! Ext.require(…);
  • 9. Eduardo Mendes (edumendes@gmail.com) Package Data 9 Ext.Loader.setConfig({ enabled: true }); ! Ext.Loader.setPath(‘Ext.ux’, ‘../ux’); ! Ext.require(…);
  • 10. Eduardo Mendes (edumendes@gmail.com) Model Fields 10 Ext.define('User', { extend: 'Ext.data.Model', fields: [ { name: ‘id’, type: 'int'}, {name: 'name', type: 'string'} ] });
  • 11. 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' });
  • 12. Eduardo Mendes (edumendes@gmail.com) Arquitetura MVC 12
  • 13. Eduardo Mendes (edumendes@gmail.com) Vasta Documentação 13
  • 14. Eduardo Mendes (edumendes@gmail.com) Utilizando o ExtJS 14
  • 15. Eduardo Mendes (edumendes@gmail.com)15 Faça o download do ExtJS no site da Sencha
  • 16. Eduardo Mendes (edumendes@gmail.com)16 Descompacte e renomeie
  • 17. 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 !
  • 18. 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"
  • 19. 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
  • 20. 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>
  • 21. Eduardo Mendes (edumendes@gmail.com) Internacionalização 21
  • 22. Eduardo Mendes (edumendes@gmail.com)22 Internacionalização
  • 23. Eduardo Mendes (edumendes@gmail.com) Criando um Painel Simples 23
  • 24. Eduardo Mendes (edumendes@gmail.com) widget.panel 24 Criando um Painel Simples
  • 25. 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', { ! ! ! ! ! ! ! });
  • 26. Eduardo Mendes (edumendes@gmail.com) Integrando com jQuery 26
  • 27. 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"); });
  • 28. Eduardo Mendes (edumendes@gmail.com)28 Carregando o conteúdo com jQuery
  • 29. Eduardo Mendes (edumendes@gmail.com) Definindo classes 29
  • 30. Eduardo Mendes (edumendes@gmail.com) Definir classes 02 maneiras 30 Ext.define(Nome, configuracoes, callback); Ext.ClassManager(Nome, configuracoes, callback);
  • 31. Eduardo Mendes (edumendes@gmail.com)31 Classe Usuario
  • 32. 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"); }
  • 33. Eduardo Mendes (edumendes@gmail.com)33 Sobrescrever Existe um construtor padrão no ExtJS constructor: function(options){ Ext.apply(this, options || {}); }
  • 34. 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 || {}); },
  • 35. Eduardo Mendes (edumendes@gmail.com) Instanciar um objeto 02 maneiras 35 Ext.create(Nome, opcoes); Ext.ClassManager.instantiate(Nome, opcoes);
  • 36. Eduardo Mendes (edumendes@gmail.com) Instanciar um objeto Usuario 36 var usuario = Ext.create('Usuario');
  • 37. Eduardo Mendes (edumendes@gmail.com)37 Passando parâmetros var usuario = Ext.create(‘Usuario’, { nome: ‘Eduardo’, senha: ‘123456’ });
  • 38. 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); });
  • 39. 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); });
  • 40. Eduardo Mendes (edumendes@gmail.com) Herança 40
  • 41. 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
  • 42. 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'
  • 43. Eduardo Mendes (edumendes@gmail.com)43
  • 44. 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
  • 45. 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?
  • 46. 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
  • 47. 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"); });
  • 48. 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() }); });
  • 49. Eduardo Mendes (edumendes@gmail.com)49 Reaproveitando o componente <body> <section id="opcao1"></section> <section id="opcao2"></section> <section id="opcao3"></section> </body>
  • 50. 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>
  • 51. Eduardo Mendes (edumendes@gmail.com) Mixins 51
  • 52. 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
  • 53. 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
  • 54. 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!');
  • 55. 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
  • 56. 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(); ! });
  • 57. Eduardo Mendes (edumendes@gmail.com) Config (getters, setters) 57
  • 58. Eduardo Mendes (edumendes@gmail.com)58 Config Cria métodos acessores e modificadores de forma automática, mais utilitários getter setter reset apply
  • 59. Eduardo Mendes (edumendes@gmail.com)59 Config Ext.onReady(function () { Ext.define('Usuario', { nome: '', senha: '', }); });
  • 60. Eduardo Mendes (edumendes@gmail.com)60 Config Ext.define('Usuario', { config: { nome: '', senha: ‘', } }); getNome setNome resetNome getSenha setSenha resetSenha
  • 61. Eduardo Mendes (edumendes@gmail.com) MessageBox alert, confirm, prompt 61
  • 62. Eduardo Mendes (edumendes@gmail.com)62 Botão e MessageBox
  • 63. 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>
  • 64. Eduardo Mendes (edumendes@gmail.com) Saudar Turma 64
  • 65. 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!'); } }); });
  • 66. 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"); } ); } }); });
  • 67. Eduardo Mendes (edumendes@gmail.com) Callback 67
  • 68. 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); } ); } });
  • 69. Eduardo Mendes (edumendes@gmail.com) Confirmação 69
  • 70. 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); } ); } });
  • 71. 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, …’); } } );
  • 72. Eduardo Mendes (edumendes@gmail.com) Alerta da aula 72
  • 73. 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); } ); } });
  • 74. Eduardo Mendes (edumendes@gmail.com) Prompt 74
  • 75. 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); } ); } });
  • 76. 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 ); } });
  • 77. Eduardo Mendes (edumendes@gmail.com) Conteudo da Aula 77
  • 78. Eduardo Mendes (edumendes@gmail.com) Panel 78
  • 79. Eduardo Mendes (edumendes@gmail.com)79 Panel Várias classes no ExtJS são subclasses de Panel como: ! Menu ! Form ! Grid ! Window
  • 80. Eduardo Mendes (edumendes@gmail.com)80 Panel
  • 81. Eduardo Mendes (edumendes@gmail.com) Configurações 81 html items buttons dockedItems layout tools title bars
  • 82. 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() }); });
  • 83. 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() }); });
  • 84. Eduardo Mendes (edumendes@gmail.com) Configurações 84 html items buttons dockedItems layout tools title bars
  • 85. 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() }); });
  • 86. 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() }); });
  • 87. Eduardo Mendes (edumendes@gmail.com) Configurações 87 html items buttons dockedItems layout tools title bars
  • 88. 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() });