Workshop	  de	  ExtJS	  4	  +	  PHP	  pela	           School	  of	  Net	                       Javascript	  Zaedy	  Sayão	  
Agenda	        Debugando	  Voltando	  ao	  básico	  de	  JS	  
Problemas	  comuns	  • 	  Inclui	  todos	  os	  arquivos?	  • 	  Inclui	  na	  ordem	  correta?	  • 	  Inclui	  os	  arqui...
Debugando	  Firebug	  Developer	  Tools	        • 	  Javascript	  “on	  the	  fly”	        • 	  Auto	  complete	        • 	...
Debugando	  IlluminaBons	  for	  Developers	  JSLint	  
Back	  to	  basics!	  • Tipos	  • Operadores	  • Variables	  x	  References	  • Objects	  
Tipos	  básicos	  • String	  • Integer	  • Float	  • Object	  • Array	  • Boolean	  • Date	  • FuncBon	  
Operadores	  aritméLcos	  • 	  +	  • 	  -­‐	  • 	  *	  • 	  /	  • 	  %	  • 	  ++	  • 	  -­‐-­‐	  
Operadores	  lógicos	  e	  relacionais	   • !	              • 	  <=	   • &&	             • >	   • ||	                     ...
References	  “A	   referência	   para	   uma	   “variável”	   é	   um	  ponteiro	  para	  uma	  área	  de	  memória	  onde...
References	  PARE	  de	  usar	  a	  palavra	  “variável”!!!!	     • 	  Use	  o	  termo	  referência	     • 	  Lembre-­‐se	...
Referências	  Globais	  •  	   Se	   não	   usarmos	   a	   palavra	   “var”,	   são	  tratadas	  como	  globais	   • 	  S...
Convenções	  (JS)	  ===	  OBRIGAÇÃO	   • 	  References	  devem	  começar	  com	  letra	  minúscula	       • 	   Exceto	  q...
Por	  que	  se	  usa	  “variável”?	  • 	  Javascript	  tem	  Bpagem	  dinâmica	  
References	                         Memória	                              3	          var	  a	                   var	  b	 ...
References	                                Memória	          Memória	                                         9	          ...
References	  
References	  e	  Objects	  
References	  e	  Objects	  
Passando	  objetos	  como	        referências	  
Passando	  objetos	  como	               referências	  • 	   String,	   boolean,	   integer,	   null	   ===	   override,	 ...
FuncLons	  • 	  São	  class	  objects	  • 	  Possuem	  propriedades	  e	  métodos	  • 	  Extend	  de	  Object	  • 	  Herda...
“this”	  • 	  É	  uma	  referência	  “mágica”	  • Extremamente	   importante	                     que	     se	  entenda	  ...
Escopo	  1.  Quando	  uma	  função	  é	  executada	  via	  uma	      referência	   “var”,	   o	   contexto	   padrão	   de...
Execução	  padrão	  para	  funções	              com	  “var”	  
Execução	  padrão	  para	  objetos	  –	         func/on	  based	  
Qual	  o	  escopo	  de	  execução	  de	                 getNome()?	  
Qual	  o	  escopo	  de	  execução	  de	                 getNome()?	  
Forçando	  escopo	  de	  execução	  • 	  call	  e	  apply	  podem	  ser	  usados	  para	  forçar	  o	  escopo	  de	  execu...
call	  
O	  Problema	  do	  “call”	  • Você	   tem	   que	   definir	     todos	     os	  argumentos	  • Ruim	  para	  refactoring	  
apply	  
HoisLng	  Javascript	   muda	   todas	   as	   variáveis	  declaradas	   para	   o	   topo	   do	   escopo	   da	  função	  
Objects	  • Classe	   base	   de	   tudo	   que	   está	   dentro	   do	  Javascript	  • Basicamente,	  tudo	  extends	  d...
Construtores	  • Inicializa	  os	  objetos	  • São	   nada	   mais	   do	   que	   funções	   que	   são	  executadas	  no...
Prototype	  
Namespace	  • Container	  que	  provê	  um	  agrupamento	  lógico	  Exemplo:	  diretório	    	   Cada	   nome	   dentro	  ...
Namespace	  Exemplo:	  • 	  Ext.grid.Panel	  • 	  Ext.form.Panel	  • 	  MinhaApp.usuario.Panel	  
Namespace	  Por	  que	  usar?	  
Namespace	  GLOBAL	  ===	  EVIL	  
Namespace	  O	   root	   de	   todos	   os	   namespaces	   é	   o	   “window”	  object	  do	  browser	  Root	  do	  Ext:	...
Package	  Namespace	           Package	                Class	  Ext	                 grid	                   Panel	  Namesp...
ExtJS	                                           História	  • 	  Extensão	  –	  YUI	  (Yahoo!	  User	  Interface)	      • ...
ExtJS	                                   Licença	  • 	  Open	  Source	  –	  GPL	  v3	  • 	  Comercial	      • $329	  	    ...
ExtJS	                               Vantagens	  • 	  Cross-­‐browser	  • 	   OO	   based	   –	   alta	   reuBlização	   d...
ExtJS	                            Vantagens	  • 	  Deploy	  fácil	  • 	  Muito	  bem	  organizado	  • 	  Fácil	  de	  mant...
Sencha	                            Produtos	  • 	  ExtJS	  4	  • 	  Sencha	  Touch	  • 	  Sencha.io	  • 	  Sencha	  Animat...
ExtJS	  Baixando	  e	  Instalando	  
ExtJS	                          API	  • 	  Navegação	  • 	  Search	  • 	  Vídeos	  • 	  Guides	  • 	  USE!!!!!	  
ExtJS	                            Examples	  • 	  Alto	  número	  de	  exemplos	  • 	  Mostram	  o	  uso	  geral	  dos	  c...
ExtJS	               Regras	  sobre	  o	  que	  NÃO	  fazer	  1.    Nunca	  altere	  os	  arquivos	  do	  framework	  2.  ...
ExtJS	                Regras	  sobre	  o	  que	  NÃO	  fazer	  1.  Não	   mude	   de	   uma	   versão	   para	   outra	   ...
ExtJS	                   Regras	  sobre	  o	  que	  fazer	  	  1.  Abuse	  e	  use	  do	  OO	  2.  Use	  classes	  abstra...
ExtJS	                   Regras	  sobre	  o	  que	  fazer	  	  1.  Use	  as	  convenções	      1.  Use	  nomes	  condizen...
ExtJS	                   Arquivos	  do	  framework	  Arquivo	  bootstrap.js	  x	  app.js	  • ext-­‐debug.js	   –	         ...
ExtJS	                  Arquivos	  do	  framework	  Locale	    	  /locale/ext-­‐lang-­‐*.js	    	   	  *	  =	  pt_BR	    	...
ExtJS	                Estrutura	  de	  pastas	  Do	  framework	  
ExtJS	                     Estrutura	  de	  pastas	  Da	  nossa	  aplicação	  
Convenções	  ===	  OBRIGAÇÃO	                            Classes	  • Deve	  conter	  apenas	  números	  e	  letras	      •...
Convenções	  ===	  OBRIGAÇÃO	                             Classes	  • Devem	   ser	   agrupadas	   em	   PACKAGES,	   com	...
Convenções	  ===	  OBRIGAÇÃO	                                Classes	  • O	  Namespace	  e	  o	  nome	  da	  classe	  deve...
Convenções	  ===	  OBRIGAÇÃO	                               Classes	  • Classes	   que	   não	   são	   do	   framework	  ...
Convenções	  ===	  OBRIGAÇÃO	                             Arquivos	  • Os	   nomes	   dos	   arquivos	   devem	   ser	  ma...
Convenções	  ===	  OBRIGAÇÃO	                  Métodos	  e	  variáveis	  • Deve	  conter	  apenas	  números	  e	  letras	 ...
Convenções	  ===	  OBRIGAÇÃO	                    Métodos	  e	  variáveis	  Métodos:	     base64Encode()	     getHtml()	  x...
Convenções	  ===	  OBRIGAÇÃO	                       Propriedades	  Mesmas	   regras	   de	   métodos	   e	   variáveis,	  ...
Ext.define	  e	  Ext.create	  
Gefers	  e	  Sefers	  
Extends	  
Mixins	  Herança	  MúlBpla	  Bastante	  usados	  no	  framework	    	  Observable	    	  State	    	  Draggable	    	  ......
Ext.Loader	  • Provê	   carregamento	   de	   classes	   sob	  demanda	      • Síncrono	  e	  assíncrono	  • Baseado	  em	...
Ext.Loader	                          Síncrono	  • Carrega	  usando	  XHR	  • Várias	   desvantagens	   (mais	   do	   que	...
Ext.Loader	                          Assíncrono	  • Solução:	  use	  Ext.require()	      • Antes	  do	  Ext.onReady()	    ...
Ext.Loader	                       Problemas	  gerais	  • Muito	  custoso	  • Gera	  várias	  requisições	  ao	  servidor	 ...
Ext.Loader	                       Problemas	  gerais	  • Muito	  custoso	  • Gera	  várias	  requisições	  ao	  servidor	 ...
Extensions	  • Ext	  foi	  desenvolvido	  para	  ser	  extendido	     • Tire	  proveito	  disso	  • Cuidado	   para	   não...
Extensions	                      Extendendo	  Panel	  • Preciso	  de	  Docked?	  • Title	  Bar?	     • Sim?	  Então	  exte...
Ciclo	  de	  vida	  dos	  Components	  • Ext.component.AbstractComponent	  • Muito	  importante	  saber!	  • É	   o	   que...
Ciclo	  de	  vida	  dos	  Components	                            45%	        InicializaLon	         Render	               ...
Inicializa/on	  • 	  Bootstrap	      • Cria	  o	  id	      • 	  Registra	  o	  componente	  no	  ComponentMgr	  
Render	  • 	  Renderiza	  o	  componente	  na	  tela	  • 	  Adiciona	  eventos	  • Usa	   os	   layouts	   para	   organiz...
Destruc/on	  • ReBra	  o	  Component	  da	  tela	  • ReBrar	  os	  eventos	  -­‐	  listeners	  
Ciclo	  de	  vida	  dos	  Components	           Passo	  a	  Passo	  -­‐	  InicializaBon	  • Configuração	   do	   objeto	  ...
Ciclo	  de	  vida	  dos	  Components	                   Passo	  a	  Passo	  	  -­‐	  InicializaBon	  • Component	  é	  reg...
Ciclo	  de	  vida	  dos	  Components	                  Passo	  a	  Passo	  -­‐	  Render	  • Evento	  beforerender	  é	  ch...
Ciclo	  de	  vida	  dos	  Components	                 Passo	  a	  Passo	  -­‐	  Render	  • onReder	  é	  executado	     • ...
Ciclo	  de	  vida	  dos	  Components	                        Passo	  a	  Passo	  -­‐	  Render	  • onReder	  é	  executado	...
Ciclo	  de	  vida	  dos	  Components	                      Passo	  a	  Passo	  -­‐	  Render	  • a‰erRender	  é	  executado...
Ciclo	  de	  vida	  dos	  Components	               Passo	  a	  Passo	  -­‐	  DestrucBon	  • beforedestroy	  é	  disparado...
Ciclo	  de	  vida	  dos	  Components	            Passo	  a	  Passo	  -­‐	  DestrucBon	  • onDestroy	  é	  chamado	  • Plug...
Layouts	                            Dois	  Bpos	  • Container	  Layout	     • Responsável	   por	   organizar	   e	   gere...
Layouts	                            Auto	  Layout	  • Layout	  default	  • Burro!	  • Usa	  HTML	  para	  dar	  tamanho	  ...
Layouts	                     Column	  Layout	  • Extends	  Auto	  Layout	  • Gerencia	  o	  width	  dos	  itens	  filhos	  ...
Layouts	                           Fit	  Layout	  • Extends	  Container	  Layout	  • Redimensiona	  o	  filho	  para	  todo...
Layouts	                        Anchor	  Layout	  • Extends	  Container	  Layout	  • Redimensiona	   dinamicamente	   os	 ...
Layouts	                    Absolute	  Layout	  • Extends	  Anchor	  Layout	  • Posiciona	   dinamicamente	   os	   filhos	...
Layouts	                           Border	  Layout	  • Extends	  Container	  Layout	  • Redimensiona	  automaBcamente	  os...
Layouts	                                  Box	  Layout	  • Extends	  Container	  Layout	  • Classe	  base	  para	  HBox	  ...
Layouts	                  Box	  Layout	  –	  align	  config	  • HBox	      • Top,	  middle,	  stretch,	  stretchmax	  • VBo...
Layouts	                  Box	  Layout	  –	  pack	  config	  • start,	  middle,	  end	  
Layouts	                      Accordion	  Layout	  • Extends	  VBoxLayout	  • Empilha	  os	  itens	  verBcalmente	  • Perm...
Problemas	  comuns	  • this.el	  is	  undefined	  • 	  store.load()	  -­‐>	  store.getCount()	  • Quando	  meu	  código	  s...
Upcoming SlideShare
Loading in …5
×

Workshop ExtJS4

1,795 views

Published on

Slides do Workshop de ExtJS4 ministrado na School of Net por Zaedy Sayão

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,795
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
62
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Workshop ExtJS4

  1. 1. Workshop  de  ExtJS  4  +  PHP  pela   School  of  Net   Javascript  Zaedy  Sayão  
  2. 2. Agenda   Debugando  Voltando  ao  básico  de  JS  
  3. 3. Problemas  comuns  •   Inclui  todos  os  arquivos?  •   Inclui  na  ordem  correta?  •   Inclui  os  arquivos  corretos?  •   Todos  os  arquivos  estão  sendo  carregados  e  excutados?  •   Erros  básicos  de  escrita     • If  (num  =  10)   • Case  SensiBve  •   Null  !==  undefined  •   0  é  falso  
  4. 4. Debugando  Firebug  Developer  Tools   •   Javascript  “on  the  fly”   •   Auto  complete   •   Line  ediBng   •   Breakpoints   •   Inspect  Elements   •   Table   •   Navegação  
  5. 5. Debugando  IlluminaBons  for  Developers  JSLint  
  6. 6. Back  to  basics!  • Tipos  • Operadores  • Variables  x  References  • Objects  
  7. 7. Tipos  básicos  • String  • Integer  • Float  • Object  • Array  • Boolean  • Date  • FuncBon  
  8. 8. Operadores  aritméLcos  •   +  •   -­‐  •   *  •   /  •   %  •   ++  •   -­‐-­‐  
  9. 9. Operadores  lógicos  e  relacionais   • !   •   <=   • &&   • >   • ||   • >=   •   ==   •   !=   •   ===   •   !==   •   <  
  10. 10. References  “A   referência   para   uma   “variável”   é   um  ponteiro  para  uma  área  de  memória  onde  um  valor  ou  objeto  está  guardado.”  Exemplo:  •   Criar  uma  func=on,  referenciá-­‐la  e  passá-­‐la  
  11. 11. References  PARE  de  usar  a  palavra  “variável”!!!!   •   Use  o  termo  referência   •   Lembre-­‐se  que  na  verdade  é  um  ponteiro   •   Usaremos  referência  daqui  em  diante  
  12. 12. Referências  Globais  •    Se   não   usarmos   a   palavra   “var”,   são  tratadas  como  globais   •   SÃO  PERIGOSAS  ===  EVIL  ===  DEMO!!!   •   NÃO  USEM!!!!   •   Únicas  que  são  permiBdas  são  Namespaces   •   Sempre  usem  “var”  
  13. 13. Convenções  (JS)  ===  OBRIGAÇÃO   •   References  devem  começar  com  letra  minúscula   •    Exceto  quando  aponta  para  uma  Classe  (construtor   ou  singleton)  
  14. 14. Por  que  se  usa  “variável”?  •   Javascript  tem  Bpagem  dinâmica  
  15. 15. References   Memória   3   var  a   var  b   3   3  
  16. 16. References   Memória   Memória   9   3   var  a   var  b   9   3  • Não  há  encadeamento  de  valor  
  17. 17. References  
  18. 18. References  e  Objects  
  19. 19. References  e  Objects  
  20. 20. Passando  objetos  como   referências  
  21. 21. Passando  objetos  como   referências  •    String,   boolean,   integer,   null   ===   override,  sobrescreve-­‐se  o  valor  •   Objetos  SÃO  DIFERENTES!  
  22. 22. FuncLons  •   São  class  objects  •   Possuem  propriedades  e  métodos  •   Extend  de  Object  •   Herdam  de  FuncBon.prototype   • call  e  apply  são  herdados  
  23. 23. “this”  •   É  uma  referência  “mágica”  • Extremamente   importante   que   se  entenda  o  que  é  e  como  usar  • Define  o  escopo  de  execução  
  24. 24. Escopo  1.  Quando  uma  função  é  executada  via  uma   referência   “var”,   o   contexto   padrão   de   execução  (‘this’)  é  “window”  2.  Quando   uma   função   é   executada   via   um   “key”   de   um   objeto,   o   contexto   de   execução   (‘this’)   é   o   objeto   ao   qual   o   “key”  pertence    
  25. 25. Execução  padrão  para  funções   com  “var”  
  26. 26. Execução  padrão  para  objetos  –   func/on  based  
  27. 27. Qual  o  escopo  de  execução  de   getNome()?  
  28. 28. Qual  o  escopo  de  execução  de   getNome()?  
  29. 29. Forçando  escopo  de  execução  •   call  e  apply  podem  ser  usados  para  forçar  o  escopo  de  execução  •    Logo,   você   tem   TOTAL   controle   sob   o  escopo   de   execução   de   qualquer   função  em  Javascript  
  30. 30. call  
  31. 31. O  Problema  do  “call”  • Você   tem   que   definir   todos   os  argumentos  • Ruim  para  refactoring  
  32. 32. apply  
  33. 33. HoisLng  Javascript   muda   todas   as   variáveis  declaradas   para   o   topo   do   escopo   da  função  
  34. 34. Objects  • Classe   base   de   tudo   que   está   dentro   do  Javascript  • Basicamente,  tudo  extends  de  Object  • String,  Array,  FuncBons,  etc  
  35. 35. Construtores  • Inicializa  os  objetos  • São   nada   mais   do   que   funções   que   são  executadas  no  escopo  de  um  novo  Object  • Apenas  isso,  nada  mais    
  36. 36. Prototype  
  37. 37. Namespace  • Container  que  provê  um  agrupamento  lógico  Exemplo:  diretório     Cada   nome   dentro   de   um   diretório   idenBfica  unicamente   um   arquivo,   mas   o   mesmo   nome  pode  ser  usado  em  diretórios  diferentes  
  38. 38. Namespace  Exemplo:  •   Ext.grid.Panel  •   Ext.form.Panel  •   MinhaApp.usuario.Panel  
  39. 39. Namespace  Por  que  usar?  
  40. 40. Namespace  GLOBAL  ===  EVIL  
  41. 41. Namespace  O   root   de   todos   os   namespaces   é   o   “window”  object  do  browser  Root  do  Ext:    window.Ext  ou  simplesmente  Ext  
  42. 42. Package  Namespace   Package   Class  Ext   grid   Panel  Namespace   Package   Sub-­‐package   Class  Ext   form   field   Text  
  43. 43. ExtJS   História  •   Extensão  –  YUI  (Yahoo!  User  Interface)   • yui-­‐ext   • YUI  era  base  •   Jack  Slocum  •   Virou  Ext  na  sua  versão  1.0  •    Na   versão   1.1.1   passou   a   ser   suportado   por  diversos  browsers   •   IE  6,  Firefox  1.5,  Safari  2,  Opera  9  e  outros  
  44. 44. ExtJS   Licença  •   Open  Source  –  GPL  v3  •   Comercial   • $329     • $299  –  suporte   • Há  pacotes  de  licença  
  45. 45. ExtJS   Vantagens  •   Cross-­‐browser  •    OO   based   –   alta   reuBlização   de   código   e  alta  produBvidade  •    Tecnologia  não  proprietária  –  não  depende  de  plugins  •    Sencha  Plataform  –  reusabilidade  para  uso  do  Sencha  Touch  
  46. 46. ExtJS   Vantagens  •   Deploy  fácil  •   Muito  bem  organizado  •   Fácil  de  manter  •   Extensível  •    Fácil   de   aprender   (espero   que   concordem  ao  final  do  Workshop  )  
  47. 47. Sencha   Produtos  •   ExtJS  4  •   Sencha  Touch  •   Sencha.io  •   Sencha  Animator  •   Ext  GWT  •   Ext  Designer  
  48. 48. ExtJS  Baixando  e  Instalando  
  49. 49. ExtJS   API  •   Navegação  •   Search  •   Vídeos  •   Guides  •   USE!!!!!  
  50. 50. ExtJS   Examples  •   Alto  número  de  exemplos  •   Mostram  o  uso  geral  dos  componentes  •   Código  acessível  •   Devem  ser  SEMPRE  usados!!  
  51. 51. ExtJS   Regras  sobre  o  que  NÃO  fazer  1.  Nunca  altere  os  arquivos  do  framework  2.  NUNCA  3.  NEVER  4.  JAMAIS  5.  EM  NENHUMA  HIPÓTESE  6.  Mas...  EU  DISSE  NUNCA!  
  52. 52. ExtJS   Regras  sobre  o  que  NÃO  fazer  1.  Não   mude   de   uma   versão   para   outra   sem   testar  2.  Não  use  mais  a  palavra  “new”  –  Ext.create  3.  Não  programe  sem  ferramenta  de  debug  4.  Não  programe  fora  das  convenções  5.  Não   misture   código   PHP   (ou   outra   linguagem)  com  seu  código  JS   1.  Mantenha   seu   código   limpo   e   independente   de   plataforma  
  53. 53. ExtJS   Regras  sobre  o  que  fazer    1.  Abuse  e  use  do  OO  2.  Use  classes  abstratas  3.  Documente  seu  código   1.  Existem   ferramentas   que   geram   documentação   para  JS  4.  Abuse  e  use  de:   1.  Extends   2.  Override  
  54. 54. ExtJS   Regras  sobre  o  que  fazer    1.  Use  as  convenções   1.  Use  nomes  condizentes  2.  Use   sempre   arquivo   de   debug   em   desenvolvimento  3.  Use  Loader  em  desenvolvimento   1.  Jamais  use  em  produção!  4.  Tenha  sempre  a  API  a  mão  5.  Google  é  sempre  seu  pastor!  6.  Lembre-­‐se,  no  final,  é  tudo  JS!  
  55. 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,  porém  minified  • ext-­‐all-­‐debug.js  –  Todo  o  framework  • ext-­‐all.js  –  ext-­‐all-­‐debug.js  minified  
  56. 56. ExtJS   Arquivos  do  framework  Locale    /locale/ext-­‐lang-­‐*.js      *  =  pt_BR      *  =  es      ...  
  57. 57. ExtJS   Estrutura  de  pastas  Do  framework  
  58. 58. ExtJS   Estrutura  de  pastas  Da  nossa  aplicação  
  59. 59. Convenções  ===  OBRIGAÇÃO   Classes  • Deve  conter  apenas  números  e  letras   • Números  não  são  indicados   • Aceitos  quando  se  referem  a  termos  técnicos  • Não   use   underscore,   hífen   e   outros   Bpos   de  caracteres  que  não  sejam  alfa-­‐numéricos  • MinhaApp.admin_area.Login    -­‐  NÃO  FAÇA  • MinhaApp.admin.Login    • MinhaApp.uBl.Base64    
  60. 60. Convenções  ===  OBRIGAÇÃO   Classes  • Devem   ser   agrupadas   em   PACKAGES,   com   seus  respecBvos   NAMESPACES,   usando   notação   por  “.”  • Devem   ter   ao   menos   2   níveis,   um   do  Namespace  e  outro  do  nome  da  classe  • MinhaClasse    • MinhaApp.MinhaClasse    • MinhaApp.data.MeuProxy    
  61. 61. Convenções  ===  OBRIGAÇÃO   Classes  • O  Namespace  e  o  nome  da  classe  devem  ser  usados   em   CamelCased.   Todo   o   resto   deve  estar  em  minúsculo  • MinhaApp.Admin.MinhaClasse    • MinhaApp.admin.MinhaClasse    
  62. 62. Convenções  ===  OBRIGAÇÃO   Classes  • Classes   que   não   são   do   framework   nem  fornecidas   pela   Sencha   não   podem   usar   o  namespace  Ext  –  NUNCA  • Acrônimos  devem  ser  CamelCased  • MinhaApp.server.HTTP    • MinhaApp.server.H‡p    
  63. 63. Convenções  ===  OBRIGAÇÃO   Arquivos  • Os   nomes   dos   arquivos   devem   ser  mapeados  diretamente  para  o  caminho  onde  estão.  • Só  deve  haver  uma  classe  por  arquivo  • Ext.uBl.Observable   –   caminhoApp/src/Ext/uBl/Observable.js  • MinhaApp.server.H‡p   –   caminhoApp/src/MinhaApp/server/H‡p.js  
  64. 64. Convenções  ===  OBRIGAÇÃO   Métodos  e  variáveis  • Deve  conter  apenas  números  e  letras   • Números  não  são  indicados   • Aceitos  quando  se  referem  a  termos  técnicos  • Não   use   underscore,   hífen   e   outros   Bpos   de  caracteres  que  não  sejam  alfa-­‐numéricos  • Devem   sempre   ser   camelCased.   Essa   regra  também  se  aplica  a  acrônimos  
  65. 65. Convenções  ===  OBRIGAÇÃO   Métodos  e  variáveis  Métodos:   base64Encode()   getHtml()  x  getHTML()  Variáveis:   var  base64Encoder   var  xmlReader  
  66. 66. Convenções  ===  OBRIGAÇÃO   Propriedades  Mesmas   regras   de   métodos   e   variáveis,  exceto  no  caso  staBc  StaBc   properBes   devem   ser   sempre   upper-­‐cased  (maiúscula)  Ext.MessageBox.YES  =  “SIM”  MinhaApp.math.MinhaClasse.PI  =    3.14  
  67. 67. Ext.define  e  Ext.create  
  68. 68. Gefers  e  Sefers  
  69. 69. Extends  
  70. 70. Mixins  Herança  MúlBpla  Bastante  usados  no  framework    Observable    State    Draggable    .....  
  71. 71. Ext.Loader  • Provê   carregamento   de   classes   sob  demanda   • Síncrono  e  assíncrono  • Baseado  em  controle  de  dependência  • Pode   ser   usado   para   praBcamente   toda   a  aplicação  • Muito  fácil  de  usar  • Menos  HTML  que  se  escreve  • Alguns  “tricks”  
  72. 72. Ext.Loader   Síncrono  • Carrega  usando  XHR  • Várias   desvantagens   (mais   do   que   o  assíncrono)   • Limitado  ao  mesmo  domínio  de  origem   • Requer  um  web  server   • Horrível  para  debugar!  
  73. 73. Ext.Loader   Assíncrono  • Solução:  use  Ext.require()   • Antes  do  Ext.onReady()   • Usará  carregamento  assíncrono  • Adiciona  script  tags  no  HEAD   • Muito  melhor  para  debugar   • Cross-­‐domain   • Não  precisa  de  web  server  • Problema:   deve-­‐se   especificar   todas   as  dependências  antes  da  classe  ser  instanciada  
  74. 74. Ext.Loader   Problemas  gerais  • Muito  custoso  • Gera  várias  requisições  ao  servidor  • Problemas  com  cache  • Lento  • Não  carrega  os  arquivos  minified  • Carrega  classes  desnecessárias   • Ext.require(‘Ext.Component’)   carrega   items   de   Sprite  do  pacote  draw  
  75. 75. Ext.Loader   Problemas  gerais  • Muito  custoso  • Gera  várias  requisições  ao  servidor  • Problemas  com  cache  • Lento  • Não  carrega  os  arquivos  minified  • Carrega  classes  desnecessárias   • Ext.require(‘Ext.Component’)   carrega   items   de   Sprite  do  pacote  draw  
  76. 76. Extensions  • Ext  foi  desenvolvido  para  ser  extendido   • Tire  proveito  disso  • Cuidado   para   não   extender   o   component/class  errado   • Pode  causar  problema  de  performance  
  77. 77. Extensions   Extendendo  Panel  • Preciso  de  Docked?  • Title  Bar?   • Sim?  Então  extenda  Panel   • Caso   contrário,   pense   em   extender   Container   ou  Component  • Preciso   de   algo   que   gerencie   outros  componentes  usando  layout?   • Sim?  Então  extenda  Ext.container.Container   • Caso  contrário,  extenda  Ext.Component  
  78. 78. Ciclo  de  vida  dos  Components  • Ext.component.AbstractComponent  • Muito  importante  saber!  • É   o   que   diferencia   o   ExtJS   de   outros  frameworks  • Provê   confiabilidade   e   previsibilidade   ao  framework  
  79. 79. Ciclo  de  vida  dos  Components   45%   InicializaLon   Render   DestrucLon  
  80. 80. Inicializa/on  •   Bootstrap   • Cria  o  id   •   Registra  o  componente  no  ComponentMgr  
  81. 81. Render  •   Renderiza  o  componente  na  tela  •   Adiciona  eventos  • Usa   os   layouts   para   organizar   os  componentes  
  82. 82. Destruc/on  • ReBra  o  Component  da  tela  • ReBrar  os  eventos  -­‐  listeners  
  83. 83. Ciclo  de  vida  dos  Components   Passo  a  Passo  -­‐  InicializaBon  • Configuração   do   objeto   é   aplicada   e  guardada  • Eventos  básicos  são  adicionados   • BeforeacBvate,  beforeshow,  show,  render,  etc  • ID  é  atribuído  ou  gerado  automaBcamente  • Plugins  são  construídos  • initComponent  é  executado   • listeners  customizados  são  aplicados   • eventos  são  inicializados  
  84. 84. Ciclo  de  vida  dos  Components   Passo  a  Passo    -­‐  InicializaBon  • Component  é  registrado  no  ComponentManager  • Construtores  dos  mixins  de  Base  são  executados   • Construtor  de  Observable  é  chamado   • Construtor  de  State  é  chamado  • Plugins  são  inicializados  • ComponentLoader  é  inicialiado  (não  é  Ext.Loader!)  • Se   configurado,   o   Component   é   renderizado  (renderTo,  applyTo)  • Se  configurado,  Component  é  mostrado  
  85. 85. Ciclo  de  vida  dos  Components   Passo  a  Passo  -­‐  Render  • Evento  beforerender  é  chamado  • Component   element   é   guardado   na  referência  ‘el’  • Se   for   um   floaBng   Component,   floaBng   é  habilitado  e  registrado  no  WindowsManager  • O  container  do  Component  é  inicializado  
  86. 86. Ciclo  de  vida  dos  Components   Passo  a  Passo  -­‐  Render  • onReder  é  executado   • Elementos   do   Component   são   injetados   no   DOM   • Base  CSS  e  styles  são  aplicados   • “ui”  é  aplicado   • “frame”  é  inicializado   • renderTpl  é  inicializado   • renderData  é  inicializado  
  87. 87. Ciclo  de  vida  dos  Components   Passo  a  Passo  -­‐  Render  • onReder  é  executado   • renderTpl  é  aplicado  usando  renderData   • Render  selectors  são  aplicados   • “ui”  styles  são  aplicados  • Visibilidade   do   elemento   é   setada   a   parBr   do  atributo  hideMode  • Se   overCls   esBver   setado,   eventos   de   mouseover/out  são  capturados  • Evento  de  render  é  disparado  • Conteúdo   do   Component   é   inicialiado   (html,  contentEl,  tpl/data)  
  88. 88. Ciclo  de  vida  dos  Components   Passo  a  Passo  -­‐  Render  • a‰erRender  é  executado   • Container  Layout  é  inicializado  (AbstractConteiner)   • ComponentLayout   é   inicializado   (AbstractComponent)   • Tamanho  do  Component  é  setado   • Se   for   um   floaBng   Component,   é   movido   para   coordenada  XY  • a‰erRender   é   disparado   e   passado   para   o  elemento  do  Component  • Component  é  escondido,  se  configurado  • Component  é  desabilitado,  se  configurado  
  89. 89. Ciclo  de  vida  dos  Components   Passo  a  Passo  -­‐  DestrucBon  • beforedestroy  é  disparado  • Se   floaBng   esBver   setado,   o   componente   é  desregistrado  do  floaBng  manager  • Component   é   removido   do   seu   container  pai  • Elemento  é  removido  do  DOM   • Listeners  são  removidos  
  90. 90. Ciclo  de  vida  dos  Components   Passo  a  Passo  -­‐  DestrucBon  • onDestroy  é  chamado  • Plugins  são  destruidos  • O   Component   é   desregistrado   do  ComponentManager  • destroy  é  disparado  • Mixin  de  State  é  destruído  • Listeners  do  Component  são  removidos  
  91. 91. Layouts   Dois  Bpos  • Container  Layout   • Responsável   por   organizar   e   gerenciar   o   tamanho  dos  itens  filhos  • Component  Layout   • Responsável   por   organizar   o   conteúdo   HTML   do  componente  
  92. 92. Layouts   Auto  Layout  • Layout  default  • Burro!  • Usa  HTML  para  dar  tamanho  aos  itens  • Não   renderiza   os   filhoes   de   acordo   com   o  pai  • Você   DEVE   usar   outro   layout   caso   queira  uma   mudança   dinâmica   de   tamanho   dos  filhos  
  93. 93. Layouts   Column  Layout  • Extends  Auto  Layout  • Gerencia  o  width  dos  itens  filhos  • Não  redimensiona  os  filhos  verBcalmente  
  94. 94. Layouts   Fit  Layout  • Extends  Container  Layout  • Redimensiona  o  filho  para  todo  o  Container  • Não  permite  scrolling  
  95. 95. Layouts   Anchor  Layout  • Extends  Container  Layout  • Redimensiona   dinamicamente   os   filhos  tanto  na  altura  como  na  largura,  basiado  em  suas  regras  • Permite  scrolling  
  96. 96. Layouts   Absolute  Layout  • Extends  Anchor  Layout  • Posiciona   dinamicamente   os   filhos   nas  coordenados  X  e  Y  • NÃO  redimensiona  dinamicamente  os  filhos  • Permite  scrolling  
  97. 97. Layouts   Border  Layout  • Extends  Container  Layout  • Redimensiona  automaBcamente  os  filhos  • Organiza  os  filhos  em  regiões   • North,  south,  east,  west,  center  • As   regiões   podem   ser   redimensionadas   ou  collapsible  • Região  center  é  obrigatória  
  98. 98. Layouts   Box  Layout  • Extends  Container  Layout  • Classe  base  para  HBox  e  VBox  • HBox  organiza  os  filhos  horizontalmente   • Linha,  lado  a  lado  • VBox  organiza  os  filhos  verBcalmente   • Pilha  • Configs  usuais  do  layout:  align,  pack  • Configs  usuais  dos  filhos:  height,  width,  flex  
  99. 99. Layouts   Box  Layout  –  align  config  • HBox   • Top,  middle,  stretch,  stretchmax  • VBox   • Le‰,  center,  strecth,  stretchmax  
  100. 100. Layouts   Box  Layout  –  pack  config  • start,  middle,  end  
  101. 101. Layouts   Accordion  Layout  • Extends  VBoxLayout  • Empilha  os  itens  verBcalmente  • Permite  que  1  item  seja  expandido  por  vez  e  apenas  1  • Filhos   devem   ser   Panels   ou   herdarem   de  Panel  
  102. 102. Problemas  comuns  • this.el  is  undefined  •   store.load()  -­‐>  store.getCount()  • Quando  meu  código  será  executado?  Ajax  -­‐>  callback  • Scope  -­‐>  this  (especificar  escopo)  • Loading  data   •   Url  está  correta?   •   O  request  foi  completado  com  sucesso?   •   A  informação  é  válida?  Verifique  o  JSON  ou  XML   •   O  modelo  está  condizente  com  o  componente?  • AJAX  –  ASSÍNCRONO   • Execução  não  pára   • Use  callbacks  • Layout   • OvernesBng   • TabPanel  -­‐>  Panel  -­‐>  Grid  

×