Workshop ExtJS4

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  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  

Debugando  

Firebug  Developer  Tools  

•   Javascript  “on  the  fly”  •   Auto  complete  •   Line  ediBng  •   Breakpoints  •   Inspect  Elements  •   Table  •   Navegação  

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  um  valor  ou  objeto  está  guardado.”  

Exemplo:  •   Criar  uma  func=on,  referenciá-­‐la  e  passá-­‐la  

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  

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”  

Convenções  (JS)  ===  OBRIGAÇÃO  

•   References  devem  começar  com  letra  minúscula  •   Exceto  quando  aponta  para  uma  Classe  (construtor  ou  singleton)  

Por  que  se  usa  “variável”?  

•   Javascript  tem  Bpagem  dinâmica  

References  

3  

3  3  

Memória  

var  a   var  b  

References  

9  

3  9  

Memória  

var  a   var  b  

3  

Memória  

• Não  há  encadeamento  de  valor  

References  

References  e  Objects  

References  e  Objects  

Passando  objetos  como  referências  

Passando  objetos  como  referências  

•    String,   boolean,   integer,   null   ===  override,  sobrescreve-­‐se  o  valor  •   Objetos  SÃO  DIFERENTES!  

FuncLons  

•   São  class  objects  •   Possuem  propriedades  e  métodos  

•   Extend  de  Object  •   Herdam  de  FuncBon.prototype  • call  e  apply  são  herdados  

“this”  

•   É  uma  referência  “mágica”  • Extremamente   importante   que   se  entenda  o  que  é  e  como  usar  

• Define  o  escopo  de  execução  

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    

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ção  

•    Logo,   você   tem   TOTAL   controle   sob   o  escopo   de   execução   de   qualquer   função  em  Javascript  

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  de  Object  

• String,  Array,  FuncBons,  etc  

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    

Prototype  

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  

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:    window.Ext  ou  simplesmente  Ext  

Package  

Namespace   Package   Class  

Ext   grid   Panel  

Namespace   Package   Sub-­‐package   Class  

Ext   form   field   Text  

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  

ExtJS  

Licença  

•   Open  Source  –  GPL  v3  •   Comercial  • $329    • $299  –  suporte  • Há  pacotes  de  licença  

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  

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  )  

Sencha  

Produtos  

•   ExtJS  4  •   Sencha  Touch  •   Sencha.io  •   Sencha  Animator  

•   Ext  GWT  

•   Ext  Designer  

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  componentes  

•   Código  acessível  •   Devem  ser  SEMPRE  usados!!  

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!  

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  

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  

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!  

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  

ExtJS  

Arquivos  do  framework  

Locale  

 /locale/ext-­‐lang-­‐*.js  

   *  =  pt_BR  

   *  =  es  

   ...  

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  • 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    

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    

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    

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    

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  

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  

Convenções  ===  OBRIGAÇÃO  

Métodos  e  variáveis  

Métodos:  base64Encode()  getHtml()  x  getHTML()  

Variáveis:  var  base64Encoder  

var  xmlReader  

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  

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  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”  

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!  

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  

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  

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  

Extensions  

• Ext  foi  desenvolvido  para  ser  extendido  • Tire  proveito  disso  

• Cuidado   para   não   extender   o   component/class  errado  • Pode  causar  problema  de  performance  

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  

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  

Ciclo  de  vida  dos  Components  

InicializaLon  

DestrucLon  Render  

45%  

Inicializa/on  

•   Bootstrap  • Cria  o  id  •   Registra  o  componente  no  ComponentMgr  

Render  

•   Renderiza  o  componente  na  tela  •   Adiciona  eventos  • Usa   os   layouts   para   organizar   os  componentes  

Destruc/on  

• ReBra  o  Component  da  tela  • ReBrar  os  eventos  -­‐  listeners  

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  

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  

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  

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  

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)  

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  

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  

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  

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  

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  

Layouts  

Column  Layout  

• Extends  Auto  Layout  • Gerencia  o  width  dos  itens  filhos  • Não  redimensiona  os  filhos  verBcalmente  

Layouts  

Fit  Layout  

• Extends  Container  Layout  • Redimensiona  o  filho  para  todo  o  Container  

• Não  permite  scrolling  

Layouts  

Anchor  Layout  

• Extends  Container  Layout  • Redimensiona   dinamicamente   os   filhos  tanto  na  altura  como  na  largura,  basiado  em  suas  regras  • Permite  scrolling  

Layouts  

Absolute  Layout  

• Extends  Anchor  Layout  • Posiciona   dinamicamente   os   filhos   nas  coordenados  X  e  Y  • NÃO  redimensiona  dinamicamente  os  filhos  

• Permite  scrolling  

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  

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  

Layouts  

Box  Layout  –  align  config  

• HBox  • Top,  middle,  stretch,  stretchmax  

• VBox  • Le�,  center,  strecth,  stretchmax  

Layouts  

Box  Layout  –  pack  config  

• start,  middle,  end  

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  

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