Upload
javamanrj
View
1.511
Download
1
Embed Size (px)
DESCRIPTION
Slides do Workshop de ExtJS4 ministrado na School of Net por Zaedy Sayão
Citation preview
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