Introduo

Requisitos Bsicos
Desenvolvimento

V Semana de Tecnologia da Informao

Aplicaes Web com ExtJs

Rafael L. de Macedo
Centro Universitrio Eurpides de Marlia - UNIVEM

Marlia, 2012

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

ndice

Introduo
RIA
Framework
ExtJs
Benefcios

Requisitos Bsicos
Requisitos Bsicos

Desenvolvimento
Desenvolvimento

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

RIA
Framework
ExtJs
Benefcios

ndice

Introduo
RIA
Framework
ExtJs
Benefcios

Requisitos Bsicos
Requisitos Bsicos

Desenvolvimento
Desenvolvimento

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

RIA
Framework
ExtJs
Benefcios

RIA (Rich Internet Application).

So aplicaes Web que tem caractersticas e funcionalidades

de softwares tradicionais do tipo de aplicativos feito para
Desktop.
O processamento de interfaces de uma aplicao RIA
transferido para os navegadores da internet, mas mantido a
maior parte dos dados no servidor de aplicao.
Exemplo de dados que mantido no serivdor:
Example
- O estado do programa.
- Dados do Banco.

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

RIA
Framework
ExtJs
Benefcios

ndice

Introduo
RIA
Framework
ExtJs
Benefcios

Requisitos Bsicos
Requisitos Bsicos

Desenvolvimento
Desenvolvimento

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

RIA
Framework
ExtJs
Benefcios

RIA - Framework.

Existem vrios frameworks que permitem o desenvolvimento de

RIA tais como: JQuery, YUI (YAHOO User Interface), ExtJs e
entre outros.
Framework uma abstrao que une cdigos entre vrios
projetos de software provendo uma funcionalidade genrica.
Um framework pode atingir uma funcionalidade especica, por
congurao, durante a programao de uma aplicao.

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

RIA
Framework
ExtJs
Benefcios

ndice

Introduo
RIA
Framework
ExtJs
Benefcios

Requisitos Bsicos
Requisitos Bsicos

Desenvolvimento
Desenvolvimento

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

RIA
Framework
ExtJs
Benefcios

ExtJs.

O framework ExtJs desenvolvido em Ajax.

ExtJs orientado a objetos, com grandes variedades de
componentes visuais.
Atualmente o ExtJs est na verso 4.1 e mantido pela
empresa Sencha.
Atravs do site www.sencha.com possvel fazer a inscrio e
participar dos fruns. Sencha mantm outras ferramentas
como Sencha Touch, Sencha Architect e outros.

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

RIA
Framework
ExtJs
Benefcios

ndice

Introduo
RIA
Framework
ExtJs
Benefcios

Requisitos Bsicos
Requisitos Bsicos

Desenvolvimento
Desenvolvimento

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

RIA
Framework
ExtJs
Benefcios

Benefcios.

Oferecer caractersticas de interface que no podem ser

obtidos utilizando apenas o HTML.
Respostas mais rapidas nas aes do usurio e levando a
sensao de estar utilizando uma aplicao Desktop.
Interagir com o servidor de forma assncrona.

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Requisitos Bsicos

ndice

Introduo
RIA
Framework
ExtJs
Benefcios

Requisitos Bsicos
Requisitos Bsicos

Desenvolvimento
Desenvolvimento

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Requisitos Bsicos

Requisitos Bsicos.
necessrio para o desenvolvimento de aplicaes Web com
ExtJs as seguintes ferramentas:
WampServer (Windows) / LampServer (Linux)
Apache 2.2.22
PHP 5.4.3
MySQL 5.5.24

FireBug
Framework ExtJs
IDE - NetBeans

http://www.wampserver.com/en/#download-wrapper
https://addons.mozilla.org/pt-BR/refox/addon/rebug/
http://www.sencha.com/products/extjs/download/
http://netbeans.org/downloads/
V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Desenvolvimento

ndice

Introduo
RIA
Framework
ExtJs
Benefcios

Requisitos Bsicos
Requisitos Bsicos

Desenvolvimento
Desenvolvimento

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Desenvolvimento

Desenvolvimento da Aplicao Web com ExtJs.

Antes de comearmos a desenvolver necessrio criar uma

pasta dentro do diretrio c:\wamp\www\ no caso se for
Windows ou caso for Linux /var/www/.
Dentro desta nova pasta colocado todo o contedo do
framework ExtJs.
Para o desenvolvimento da aplicao necessrio incluir os
arquivos do framework no cdigo HTML, como mostra no
exemplo a seguir.

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Desenvolvimento

Desenvolvimento da Aplicao Web com ExtJs.

Example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Mini-Curso de ExtJs</title>
<link rel="stylesheet" type="text/css"
href="extjs/extjs/resources/css/ext-all.css">
<script type="text/javascript"
src="extjs/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/extjs/ext-all.js"></script>
<script type="text/javascript"
src="extjs/extjs/src/locale/ext-lang-pt_BR.js"></script>
</head>
<body>
</body>
</html> 

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Desenvolvimento

Exerccio.

Crie uma pasta chamada cursoextjs e coloque o framework

ExtJs dentro desta pasta.

Crie um novo projeto PHP na IDE Netbeans.

Obs: Ao criar o projeto altere o caminho no Netbeans para
que o projeto seja criado na pasta cursoextjs.

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Desenvolvimento

Desenvolvimento da Aplicao Web com ExtJs.

Dentro dos arquivos do Framework existe uma documentao

(API) que pode ser consultada para obter mais informaes
das funcionalidades e propriedades.
Para acessar a API digite o caminho no navegador
localhost/nome da pasta da sua aplicao/extjs/extjs/docs.

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Desenvolvimento

Desenvolvimento da Aplicao Web com ExtJs.

necessrio o uso da funo Ext.onReady no inicio do cdigo

ExtJs, pois esse mtodo automaticamente chamado quando
a pgina estiver totalmente carregada.
Example
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('botao').on('click',function(){
alert('Reconhecido Click do Boto');
})
});
</script>

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Desenvolvimento

Desenvolvimento da Aplicao Web com ExtJs.

No ExtJs possvel trabalhar com eventos, assim como um
simples click, doubleclick em uma grid (tabela) e outros.
Example
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('botao').on('click',function(){
alert('Reconhecido Click do Boto');
})
});
</script>
</head>
<body>
<button id=botao>Boto</button>
</body>
V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Desenvolvimento

Exerccio.

Crie um novo arquivo do tipo Pgina Web PHP com o nome

evento.php. Nesse novo arquivo desenvolva um boto para
acionar o evento click e mostrar uma mensagem dizendo que o
evento foi chamado.

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Desenvolvimento

Desenvolvimento da Aplicao Web com ExtJs.

O ExtJs tem um grande nmero de classes, algumas delas

adiciono campos de entrada e sade de dados.
Exemplo de algumas classes:
TextField
ComboBox
RadioGrup
MessageBox
Buttons

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Desenvolvimento

Desenvolvimento da Aplicao Web com ExtJs.

A classe Window cria uma janela que por padro

redimensionvel e arrastvel.
Example
new Ext.Window({
title: 'Cadastro',
layout: 't',
id:'winformCad',
modal:true,
height: 300,
width: 550,
items: []
})

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Desenvolvimento

Desenvolvimento da Aplicao Web com ExtJs.

A classe FormPanel utilizado para renderizar campos e labels

do formulrio.
Example
new Ext.form.FormPanel({
frame:true,
id:'formCad',
width:260,
labelWidth:60
})

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Desenvolvimento

Desenvolvimento da Aplicao Web com ExtJs.

A classe TextField adiciona um campo de entrada de dados e
parecido com o tradicional campo input do HTML.
Example
new Ext.form.TextField({
id:"nome",

eldLabel:"Nome",

allowBlank:false,

blankText:"Digite seu

Nome"
})

A classe MessageBox atribui uma janela de avisos.

Example
Ext.MessageBox.show({
title: 'Ateno',

msg: 'Cadastrado com Sucesso!',

buttons: Ext.MessageBox.OK,

icon: Ext.MessageBox.INFO

})
V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Desenvolvimento

Desenvolvimento da Aplicao Web com ExtJs.

A classe ComoBox adiciona um campo de seleo no
formulrio.
Example
{ xtype:'combo',
id:'id_estado',
eldLabel: 'Estado',
width: 80,
hiddenName:'vlr_estado',
submitValue:true,
mode: 'local',
valueField: 'id_estado',
displayField: 'estado',
store: new Ext.data.ArrayStore({
elds: [
data: [

'id_estado', 'estado'

],

[1, 'SP'], [2, 'PR'], [3, 'RJ']

})
}
V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Desenvolvimento

Desenvolvimento da Aplicao Web com ExtJs.

A classe RadioGroup adiciona no formulrio uma forma de
seleo diferente da Classe ComboBox.
Example
new Ext.form.RadioGroup({
name: 'genero',
vertical:true,
eldLabel:'Sexo',
items: [
{

boxLabel: 'Masculino',
name: 'genero',

boxLabel: 'Feminino',
name: 'genero',

id:'masc',

inputValue: 1

},

id:'fen',

inputValue: 2

},

]
})
V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Introduo
Requisitos Bsicos
Desenvolvimento

Desenvolvimento

Exerccio.

Crie um novo arquivo chamado index.php e adiciona nesse

novo arquivo, os campos necessrio para o cadastro dos dados
do cliente.
Obs: Nesse formulrio necessrio ter os seguintes campos:
Nome, Endereo, Bairro, Cidade, Estado e Sexo.

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs

Aplicao Web com ExtJs

Aplicao Web com ExtJs

Obrigado

Autor: Rafael L. de Macedo

rafaelldemacedo@gmail.com
Centro Universitrio Eurpides de Marlia UNIVEM/COMPSI

V Semana de TI - UNIVEM/COMPSI

Aplicaes Web com ExtJs