Workshop ExtJS4

  • Published on
    06-Jun-2015

  • View
    1.509

  • Download
    1

Embed Size (px)

DESCRIPTION

Slides do Workshop de ExtJS4 ministrado na School of Net por Zaedy Sayo

Transcript

<ul><li> 1. Workshop de ExtJS 4 + PHP pela School of Net Javascript Zaedy Sayo </li></ul><p> 2. Agenda Debugando Voltando ao bsico de JS 3. Problemas comuns Inclui todos os arquivos? Inclui na ordem correta? Inclui os arquivos corretos? Todos os arquivos esto sendo carregados e excutados? Erros bsicos de escrita If (num = 10) Case SensiBve Null !== undened 0 falso 4. Debugando Firebug Developer Tools Javascript on the y Auto complete Line ediBng Breakpoints Inspect Elements Table Navegao 5. Debugando IlluminaBons for Developers JSLint 6. Back to basics! Tipos Operadores Variables x References Objects 7. Tipos bsicos String Integer Float Object Array Boolean Date FuncBon 8. Operadores aritmLcos + - * / % ++ -- 9. Operadores lgicos e relacionais ! || &gt;= == != === !== &lt; 10. References A referncia para uma varivel um ponteiro para uma rea de memria onde um valor ou objeto est guardado. Exemplo: Criar uma func=on, referenci-la e pass-la 11. References PARE de usar a palavra varivel!!!! Use o termo referncia Lembre-se que na verdade um ponteiro Usaremos referncia daqui em diante 12. Referncias Globais Se no usarmos a palavra var, so tratadas como globais SO PERIGOSAS === EVIL === DEMO!!! NO USEM!!!! nicas que so permiBdas so Namespaces Sempre usem var 13. Convenes (JS) === OBRIGAO References devem comear com letra minscula Exceto quando aponta para uma Classe (construtor ou singleton) 14. Por que se usa varivel? Javascript tem Bpagem dinmica 15. References Memria 3 var a var b 3 3 16. References Memria Memria 9 3 var a var b 9 3 No h encadeamento de valor 17. References 18. References e Objects 19. References e Objects 20. Passando objetos como referncias 21. Passando objetos como referncias String, boolean, integer, null === override, sobrescreve-se o valor Objetos SO DIFERENTES! 22. FuncLons So class objects Possuem propriedades e mtodos Extend de Object Herdam de FuncBon.prototype call e apply so herdados 23. this uma referncia mgica Extremamente importante que se entenda o que e como usar Dene o escopo de execuo 24. Escopo 1. Quando uma funo executada via uma referncia var, o contexto padro de execuo (this) window 2. Quando uma funo executada via um key de um objeto, o contexto de execuo (this) o objeto ao qual o key pertence 25. Execuo padro para funes com var 26. Execuo padro para objetos func/on based 27. Qual o escopo de execuo de getNome()? 28. Qual o escopo de execuo de getNome()? 29. Forando escopo de execuo call e apply podem ser usados para forar o escopo de execuo Logo, voc tem TOTAL controle sob o escopo de execuo de qualquer funo em Javascript 30. call 31. O Problema do call Voc tem que denir todos os argumentos Ruim para refactoring 32. apply 33. HoisLng Javascript muda todas as variveis declaradas para o topo do escopo da funo 34. Objects Classe base de tudo que est dentro do Javascript Basicamente, tudo extends de Object String, Array, FuncBons, etc 35. Construtores Inicializa os objetos So nada mais do que funes que so executadas no escopo de um novo Object Apenas isso, nada mais 36. Prototype 37. Namespace Container que prov um agrupamento lgico Exemplo: diretrio Cada nome dentro de um diretrio idenBca unicamente um arquivo, mas o mesmo nome pode ser usado em diretrios diferentes 38. Namespace Exemplo: Ext.grid.Panel Ext.form.Panel MinhaApp.usuario.Panel 39. Namespace Por que usar? 40. Namespace GLOBAL === EVIL 41. Namespace O root de todos os namespaces o window object do browser Root do Ext: window.Ext ou simplesmente Ext 42. Package Namespace Package Class Ext grid Panel Namespace Package Sub-package Class Ext form eld Text 43. ExtJS Histria Extenso YUI (Yahoo! User Interface) yui-ext YUI era base Jack Slocum Virou Ext na sua verso 1.0 Na verso 1.1.1 passou a ser suportado por diversos browsers IE 6, Firefox 1.5, Safari 2, Opera 9 e outros 44. ExtJS Licena Open Source GPL v3 Comercial $329 $299 suporte H pacotes de licena 45. ExtJS Vantagens Cross-browser OO based alta reuBlizao de cdigo e alta produBvidade Tecnologia no proprietria no depende de plugins Sencha Plataform reusabilidade para uso do Sencha Touch 46. ExtJS Vantagens Deploy fcil Muito bem organizado Fcil de manter Extensvel Fcil de aprender (espero que concordem ao nal do Workshop ) 47. Sencha Produtos ExtJS 4 Sencha Touch Sencha.io Sencha Animator Ext GWT Ext Designer 48. ExtJS Baixando e Instalando 49. ExtJS API Navegao Search Vdeos Guides USE!!!!! 50. ExtJS Examples Alto nmero de exemplos Mostram o uso geral dos componentes Cdigo acessvel Devem ser SEMPRE usados!! 51. ExtJS Regras sobre o que NO fazer 1. Nunca altere os arquivos do framework 2. NUNCA 3. NEVER 4. JAMAIS 5. EM NENHUMA HIPTESE 6. Mas... EU DISSE NUNCA! 52. ExtJS Regras sobre o que NO fazer 1. No mude de uma verso para outra sem testar 2. No use mais a palavra new Ext.create 3. No programe sem ferramenta de debug 4. No programe fora das convenes 5. No misture cdigo PHP (ou outra linguagem) com seu cdigo JS 1. Mantenha seu cdigo limpo e independente de plataforma 53. ExtJS Regras sobre o que fazer 1. Abuse e use do OO 2. Use classes abstratas 3. Documente seu cdigo 1. Existem ferramentas que geram documentao para JS 4. Abuse e use de: 1. Extends 2. Override 54. ExtJS Regras sobre o que fazer 1. Use as convenes 1. Use nomes condizentes 2. Use sempre arquivo de debug em desenvolvimento 3. Use Loader em desenvolvimento 1. Jamais use em produo! 4. Tenha sempre a API a mo 5. Google sempre seu pastor! 6. Lembre-se, no nal, tudo JS! 55. ExtJS Arquivos do framework Arquivo bootstrap.js x app.js ext-debug.js Core, apenas para desenvolvimento Usar com Loader ext.js igual o ext-debug, porm minied ext-all-debug.js Todo o framework ext-all.js ext-all-debug.js minied 56. ExtJS Arquivos do framework Locale /locale/ext-lang-*.js * = pt_BR * = es ... 57. ExtJS Estrutura de pastas Do framework 58. ExtJS Estrutura de pastas Da nossa aplicao 59. Convenes === OBRIGAO Classes Deve conter apenas nmeros e letras Nmeros no so indicados Aceitos quando se referem a termos tcnicos No use underscore, hfen e outros Bpos de caracteres que no sejam alfa-numricos MinhaApp.admin_area.Login - NO FAA MinhaApp.admin.Login MinhaApp.uBl.Base64 60. Convenes === OBRIGAO Classes Devem ser agrupadas em PACKAGES, com seus respecBvos NAMESPACES, usando notao por . Devem ter ao menos 2 nveis, um do Namespace e outro do nome da classe MinhaClasse MinhaApp.MinhaClasse MinhaApp.data.MeuProxy 61. Convenes === OBRIGAO Classes O Namespace e o nome da classe devem ser usados em CamelCased. Todo o resto deve estar em minsculo MinhaApp.Admin.MinhaClasse MinhaApp.admin.MinhaClasse 62. Convenes === OBRIGAO Classes Classes que no so do framework nem fornecidas pela Sencha no podem usar o namespace Ext NUNCA Acrnimos devem ser CamelCased MinhaApp.server.HTTP MinhaApp.server.Hp 63. Convenes === OBRIGAO Arquivos Os nomes dos arquivos devem ser mapeados diretamente para o caminho onde esto. S deve haver uma classe por arquivo Ext.uBl.Observable caminhoApp/src/Ext/uBl/Observable.js MinhaApp.server.Hp caminhoApp/src/MinhaApp/server/Hp.js 64. Convenes === OBRIGAO Mtodos e variveis Deve conter apenas nmeros e letras Nmeros no so indicados Aceitos quando se referem a termos tcnicos No use underscore, hfen e outros Bpos de caracteres que no sejam alfa-numricos Devem sempre ser camelCased. Essa regra tambm se aplica a acrnimos 65. Convenes === OBRIGAO Mtodos e variveis Mtodos: base64Encode() getHtml() x getHTML() Variveis: var base64Encoder var xmlReader 66. Convenes === OBRIGAO Propriedades Mesmas regras de mtodos e variveis, exceto no caso staBc StaBc properBes devem ser sempre upper-cased (maiscula) Ext.MessageBox.YES = SIM MinhaApp.math.MinhaClasse.PI = 3.14 67. Ext.dene e Ext.create 68. Gefers e Sefers 69. Extends 70. Mixins Herana MlBpla Bastante usados no framework Observable State Draggable ..... 71. Ext.Loader Prov carregamento de classes sob demanda Sncrono e assncrono Baseado em controle de dependncia Pode ser usado para praBcamente toda a aplicao Muito fcil de usar Menos HTML que se escreve Alguns tricks 72. Ext.Loader Sncrono Carrega usando XHR Vrias desvantagens (mais do que o assncrono) Limitado ao mesmo domnio de origem Requer um web server Horrvel para debugar! 73. Ext.Loader Assncrono Soluo: use Ext.require() Antes do Ext.onReady() Usar carregamento assncrono Adiciona script tags no HEAD Muito melhor para debugar Cross-domain No precisa de web server Problema: deve-se especicar todas as dependncias antes da classe ser instanciada 74. Ext.Loader Problemas gerais Muito custoso Gera vrias requisies ao servidor Problemas com cache Lento No carrega os arquivos minied Carrega classes desnecessrias Ext.require(Ext.Component) carrega items de Sprite do pacote draw 75. Ext.Loader Problemas gerais Muito custoso Gera vrias requisies ao servidor Problemas com cache Lento No carrega os arquivos minied Carrega classes desnecessrias Ext.require(Ext.Component) carrega items de Sprite do pacote draw 76. Extensions Ext foi desenvolvido para ser extendido Tire proveito disso Cuidado para no extender o component/class errado Pode causar problema de performance 77. Extensions Extendendo Panel Preciso de Docked? Title Bar? Sim? Ento extenda Panel Caso contrrio, pense em extender Container ou Component Preciso de algo que gerencie outros componentes usando layout? Sim? Ento extenda Ext.container.Container Caso contrrio, extenda Ext.Component 78. Ciclo de vida dos Components Ext.component.AbstractComponent Muito importante saber! o que diferencia o ExtJS de outros frameworks Prov conabilidade e previsibilidade ao framework 79. Ciclo de vida dos Components 45% InicializaLon Render DestrucLon 80. Inicializa/on Bootstrap Cria o id Registra o componente no ComponentMgr 81. Render Renderiza o componente na tela Adiciona eventos Usa os layouts para organizar os componentes 82. Destruc/on ReBra o Component da tela ReBrar os eventos - listeners 83. Ciclo de vida dos Components Passo a Passo - InicializaBon Congurao do objeto aplicada e guardada Eventos bsicos so adicionados BeforeacBvate, beforeshow, show, render, etc ID atribudo ou gerado automaBcamente Plugins so construdos initComponent executado listeners customizados so aplicados eventos so inicializados 84. Ciclo de vida dos Components Passo a Passo - InicializaBon Component registrado no ComponentManager Construtores dos mixins de Base so executados Construtor de Observable chamado Construtor de State chamado Plugins so inicializados ComponentLoader inicialiado (no Ext.Loader!) Se congurado, o Component renderizado (renderTo, applyTo) Se congurado, Component mostrado 85. Ciclo de vida dos Components Passo a Passo - Render Evento beforerender chamado Component element guardado na referncia el Se for um oaBng Component, oaBng habilitado e registrado no WindowsManager O container do Component inicializado 86. Ciclo de vida dos Components Passo a Passo - Render onReder executado Elementos do Component so injetados no DOM Base CSS e styles so aplicados ui aplicado frame inicializado renderTpl inicializado renderData inicializado 87. Ciclo de vida dos Components Passo a Passo - Render onReder executado renderTpl aplicado usando renderData Render selectors so aplicados ui styles so aplicados Visibilidade do elemento setada a parBr do atributo hideMode Se overCls esBver setado, eventos de mouseover/out so capturados Evento de render disparado Contedo do Component inicialiado (html, contentEl, tpl/data) 88. Ciclo de vida dos Components Passo a Passo - Render aerRender executado Container Layout inicializado (AbstractConteiner) ComponentLayout inicializado (AbstractComponent) Tamanho do Component setado Se for um oaBng Component, movido para coordenada XY aerRender disparado e passado para o elemento do Component Component escondido, se congurado Component desabilitado, se congurado 89. Ciclo de vida dos Components Passo a Passo - DestrucBon beforedestroy disparado Se oaBng esBver setado, o componente desregistrado do oaBng manager Component removido do seu container pai Elemento removido do DOM Listeners so removidos 90. Ciclo de vida dos Components Passo a Passo - DestrucBon onDestroy chamado Plugins so destruidos O Component desregistrado do ComponentManager destroy disparado Mixin de State destrudo Listeners do Component so removidos 91. Layouts Dois Bpos Container Layout Responsvel por organizar e gerenciar o tamanho dos itens lhos Component Layout Responsvel por organizar o contedo HTML do componente 92. Layouts Auto Layout Layout default Burro! Usa HTML para dar tamanho aos itens No renderiza os lhoes de acordo com o pai Voc DEVE usar outro layout caso queira uma mudana dinmica de tamanho dos lhos 93. Layouts Column Layout Extends Auto Layout Gerencia o width dos itens lhos No redimensiona os lhos verBcalmente 94. Layouts Fit Layout Extends Container Layout Redimensiona o lho para todo o Container No permite scrolling 95. Layouts Anchor Layout Extends Container Layout Redimensiona dinamicamente os lhos tanto na altura como na largura, basiado em suas regras Permite scrolling 96. Layouts Absolute Layout Extends Anchor Layout Posiciona dinamicamente os lhos nas coordenados X e Y NO redimensiona dinamicamente os lhos Permite scrolling 97. Layouts Border Layout Extends Container Layout Redimensiona automaBcamente os lhos Organiza os lhos em regies North, south, east, west, center As regies podem ser redimensionadas ou collapsible Regio center obrigatria 98. Layouts Box Layout Extends Container Layout Classe base para HBox e VBox HBox organiza os lhos horizontalmente Linha, lado a lado VBox organiza os lhos verBcalmente Pilha Congs usuais do layout: align, pack Congs usuais dos lhos: height, width, ex 99. Layouts Box Layout align cong HBox Top, middle, stretch, stretchmax VBox Le, center, strecth, stretchmax 100. Layouts Box Layout pack cong start, middle, end 101. Layouts Accordion Layout Extends VBoxLayout Empilha os itens verBcalmente Permite que...</p>