Hands-on em ExtJS realizado no COMPSI da UNIVEM, em 2012.

1. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab
Hands-On – ExtJSHands-On – ExtJS
Fernando de Assis Rodrigues
fernando@elleth.org (@orionx7)
Mestrando em Ciência da Informação – UNESP/Marília
Especialista em Sistemas para Internet – UNIVEM/Marília

2. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab

Rich Internet Application (RIA)
− São as construções de web sites interativos
e ferramentais, popularmente conhecidas
por possuir recursos similares aos
softwares (pré-2000) desenvolvidos por
SDKs como Delphi, .NET ou VB.
− Pré-2000: os browsers não possuíam
recursos suficientes para executar
requisições AJAX, instalar plugins com
frameworks “naturalmente” ou
“silenciosamente”, entre outros recursos. →
IE 3, Netscape 3.2, Nautilus, entre outros...

3. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab

Rich Internet Application (RIA)
− Utiliza apenas recursos oferecidos por um
browser: não necessita de instalação de
binários ou executáveis user-side;
− Em contrapartida, há a necessidade de um
único download da interface (camada de
visão) para o cliente, sendo formado por
recursos como bibliotecas JavaScript ou
frameworks como o Microsoft Silverlight,
Flash ou Java (cross-browsing).

4. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab

Rich Internet Application (RIA)
− Orientação à objetos: recurso indispensável;
− Não há uma linguagem padrão para a troca
de dados entre as camadas de visão e
controle → independência de linguagem de
programação;
− XML (Dublin Core ou padrão customizado
para um determinado recurso), JSON,
vetores, etc.
− “Que Lindo!” → diz seu cliente.

5. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab

Frameworks de desenvolvimento
− Completos e complexos;
− Utilizam principalmente requisições
assíncronas, o que permite a execução de
múltiplas tarefas descoordenadas → ativar
um cliente, filtrar uma grid e excluir um
registro sem esperar requisições anteriores;
− Adobe Flex; Microsoft Silverlight; e ExtGWT,
entre outras.
→ Lista de RIA pela Wikipedia (en)

6. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab
Por que utilizar ExtJS ao invés de
EXTGWT?
ExtGWT = Java + Javascript + Google Web Tool Kit
http://gwt.google.com/samples/Showcase/Showcase.ht
ml
ExtJS = JavaScript + (Cross-Browsing) + Sua aplicação
(Model and Control) em qualquer linguagem!!!

7. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab

ExtJS
− Sencha (www.sencha.com);
− Não há a necessidade de instalação de
nenhum framework PELO cliente;
− Os códigos do framework são enviados
automaticamente (cabeçalho do HTML);
− O seu software “roda” dentro de um
browser, diferente do GWT;
− Atualmente está em sua versão 4;
− Powerful JavaScript

8. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab

Prototype (www.prototypejs.org)
− Classes e objetos.

jQuery (www.jquery.com)
− Document transverse;
− Event handling;
− Animações.

9. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab

ExtJS é um Powerful JavaScript, pois:
− Facilidade de aprendizagem pois interage
com sua programação MVC → PHP, Java,
ASP, .NET, etc;
− Centenas de UI (User Interface) Widgets
com a possibilidade de vocês mesmos
criarem os seus;
− Excelente documentação;
− ExtJS4 → SDK de desenvolvimento;
− Ext.Direct → métodos do servidor para o
cliente.

10. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab

ExtJS é um Powerful JavaScript, pois:
− Charting em SVG e VML sem a necessidade
de plugins adicionais;
− Cross plataform com HTML 5 e
compatibilidade com diversos browsers:
Internet Explorer 6+, Firefox 3.6+, Safari 3+,
Chrome 6+, Opera 10.5+... (no caso do
ExtJS 4);
− Comunidade ativa nos fóruns (+300.000),
bem como a brasileira.

11. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab

ExtJS é um Powerful JavaScript, pois:
− Baseado em Componentes:

12. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab

Case
− Minhas Economias:
− www.minhaseconomias.com.br

13. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab
Hands on!

14. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab

Criando o ambiente de desenvolvimento:
− MySQL/Apache2/PHP
− Firefox 3.6.x
− Firebug
− Notepad++, Dreamweaver, Quanta Plus,
Notepad...

15. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab
1. Instance the framework.
Firebug/Script = Ext.version

16. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab
2. Exemplos do Framework

17. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab
3. API Documentation

18. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab
4. OnReady + MessageBox
Object
(Hello World)

19. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab
5. Event Handler

20. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab
6. Botão HTML com função
ExtJS

21. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab
7. Janela com Abas

22. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab
8. Janela com Abas criadas
on-the-fly

23. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab
9. Grid

24. Computing and InformationComputing and Information
Systems Research LabSystems Research Lab
10. CRUD