0

mais Prximoblog ahcsistemas@gmail.com Painel Sair

Estao ZN
Estamos estudando e o resultado disso postamos aqui. Sinceramente desejamos que o
contedo aqui semeado possa ser til para muitas pessoas.
Seja bemvindo e fique vontade para contribuir da forma que puder e quiser.
Bola pra frente ... :)

sextafeira, 30 de janeiro de 2009

Delphi Intraweb JavaScript II (Continua)

Groove ZN by
Grooveshark

por GMotta ZN
Quem desenvolve para Web, precisa conhecer bem JavaScript. Quem
desenvolve para Web, precisa usar muito JavaScript. Mesmo que ainda
no saiba disso, quem desenvolve em Delphi para Web, tambm
precisa ousar usar mais JavaScript.
JavaScript o caminho o qual trilharemos neste artigo. No temas, o
Intraweb no e no precisa ser to feio quanto tem sido
apresentado.

Intraweb (Atozed Software)

Ser que voc ficaria surpreso ao saber que existem pessoas
desenvolvendo em Intraweb? Bem, pelo menos o indica os nmeros
no frum da Embarcadero Technologies. Bem interessante o
Embarcadero Discussion Forums para quem esta pesquisando sobre
o Intraweb recomendo dar uma passada por l.
Ser que a pergunta por que, apesar de tantos pontos fracos, o
nmero de projetos Intraweb vem crescendo? Pelo que percebi, fora
do Brasil tambm. Principalmente, diante do amadurecimento do
.Net e do JSF, alm da competitividade do Rails, ser que o
Intraweb ainda assim tem flego para competir com essas
tecnologias? Pretendo dedicar um tempo e investigar em busca dessas
repostas.
Neste artigo, vamos ver mais sobre Delphi Intraweb com
JavaScript. Como conseqncia voc poder aprender mais e
conhecer melhor o framework Intraweb.
Em forma geral, sobre Web e programao no lado cliente, percebo
cada vez maior a pertinncia desse tema. Acredito ser totalmente
improvvel o sucesso de um sistema Web, o qual no exista uma
nfase no balanceamento do que vai ser processado clientside e o
que vai ser processado serverside. Temos discutido bastante sobre
isso aqui no Estao Zn.
Portanto, vamos falar mais sobre.
Usaremos JavaScript no Intraeweb para tentar demonstrar como

RSS Feed

podemos obter um ganho em performance, robustez e elegncia no

desenvolvimento para Web.

Blog in English Google

Translator version

Vamos comear com um exemplo simplrio. Adicione no IWForm um

IWEdit (Palheta IWStandard). Meu objetivo mostrar como podemos
acessar e manipular no lado cliente (browser) os objetos que
adicionamos no IWForm. O desenvolvedor acostumado a pensar
puramente em Delphi pode estar interessado em como interagir
atravs do seu mundo delphiano com mundo dos navegadores.
Prosseguindo, aps adicionar o IWEdit, codifique a funo JavaScript
exatamente conforme ilustrado abaixo. Muita ateno a caixa das
letras digitadas. No importa a caixa do nome do IWComponente que
voc definiu no Delphi. O Intraweb sempre vai criar um objeto HTML,
em JavaScript na pgina que ele cria, referente ao IWForm em
questo, em caixa ALTA.

Busca no blog:

Pesquisar
Contedo
Aleatrio
Cyber Culture
Games
Multimdia
Msica
Programao
WEB

function testaEdit(){
alert(document.forms[0].IWEDIT1.value);
document.forms[0].IWEDIT1.value = "";
document.forms[0].IWEDIT1.focus();
}

Colaboradores
ralencar
Pedro

A funo acima, simplesmente trata de exibir o contedo digitado no

IWEdit1, lembrando que esse processamento realizado no prprio
browser. Ela deve ser adicionada na propriedade JavaScript do
IWForm.
Para poder acessar o IWEDIT1 em JavaScript usei a referencia
document.forms[0] porque a forma mais comum seria usar
document.all. IWEDIT1. O Problema que dessa forma o script vai
funcionar somente no browser da MS (Internet Explorer). Ento,
podemos concluir que ao usar document.forms[0] nosso JavaScript,
pelo menos no que tange a referencias os objetos numa pgina HTML,
estaria compatvel com todos os navegadores? Sim, dessa forma nosso
JavaScript est compatvel. Todavia, isso no funciona no Intraewb 8.
Ou melhor, ou talvez pior, ora funciona, ora no funciona. O
Intraweb 8 criar vrias tags form na pgina HTML. Provavelmente
por isso que volta e meia me deparo com aplicaes Intraweb 8 que
no esto usando nada de JavaScript.
Ento, para garantir o comportamento adequado da funo
testaEdit() vamos modificar o cdigo para:

function testaEdit(){
var ZnEdt = FindElem("IWEDIT1);
alert(ZnEdt.value);
ZnEdt.value = "";
ZnEdt.focus();
}

Felipe Guero
Daniel Bezerra
Bruno Lichot
GMotta ZN

Amigos do EstaoZN
Muito obrigado!
Participardestesite
GoogleFriendConnect

Membros(41) Mais

Arquivo do blog
2011 (6)
2010 (2)

Adicione ao IWForm um IWButton (TIWButton, palheta IWStandard).

2009 (25)

Altere a propriedade Name dele para BtnTestaEdit. Altere o

Caption dele para Testa IWEdit1 JavaScript. Usaremos o
BtnTestaEdit para chamarmos essa nova funo. Digite na
propriedade ScriptEvent do BtnTestaEdit, no Event OnClick,
conforme ilustrado abaixo (adiante veremos como setar essa
propriedade dinamicamente):

Ago (2)
Mai (6)
Abr (6)
Mar (5)
Fev (2)
Jan (4)
Inicializando o IWForm
com alguns controles
desabi...
Delphi Intraweb
JavaScript II
(Continua)
Mais Threads,
ClassLoader,
Classpath,
Arquitetura ...

ServerSide X ClientSide Delphi Intraweb

Podemos, para ilustrar nosso exemplo, implementar um
procedimento em Delphi equivalente ao processamento realizado pela
funo JavaScript testaEdit(). Para isso, adicione mais um
IWButton (TIWButton, palheta IWStandard). Altere a propriedade
Name dele para BtnTestaEditServerSide. Altere a propriedade
Caption para Testa IWEdit1 Delphi.

Java: Threads
concorrentes, swing,
observable para...

2008 (80)
2007 (125)

tags
.NET
ADO
AJAX
Vejamos, no evento OnClick do BtnTestaEditServerSide digite:

Apache
Arquitetura de Software

procedure TIWForm1.BtnTestaEditServerSideClick(Sen
der: TObject);
begin
Self.ActiveControl := IWEdit1;
WebApplication.ShowMessage(IWEdit1.Text);
IWEdit1.Text := ''
end;

ASP.NET
Audio
Automao OLE
Banco de Dados
BDS

Agora voc pode experimentar o efeito da diferena entre processar

Serverside frente ao processamento clientside. Para testar,
pressione F9. Em seguida, na janela de dilogo do servidor standalone
pressione F9 novamente.

C#
Componentes
Controle de Verso
CSS

VCL X HTML

Cyber Culture

No papo de bbado, garanto. Conforme mencionei anteriormente,

o framework Intraweb gera, a partir de um form Delphi (IWForm
VCL) e de controles (IWControls VCL) associados a ele, uma pgina
HTML na qual objetos so declarados (em JavaScript) referentes a
cada um dos controles VCL dispostos no IWForm que a originou.
Para conhecer todos os objetos que compem o objeto form de
uma pgina HTML:

DBA
Delphi
Diversos
English
Ferramentas Case
Flash

function percorreTudo(){
var ZnForms = document.getElementsByTagName("f
orm");
alert("Oi");
for (i = 0; i< ZnForms.length;i++) {
alert("Bla!! O nome do form : " + ZnForms[
i].name);
for (j = 0; j< ZnForms[i].elements.length;
j++) {
alert("Bla!! O nome do form : " + ZnForm
s[i].name + " o elemento :" + ZnForms[i].elements
[j].name);
}
}
}

HTML
Humor
IDE
Internet
Internet Explorer
Intraweb
Introduo a Programo
Introduo Harmonia
Funcional
Java

Essa funo pode ser utilizada em qualquer pgina HTML. No Intrweb,

podemos codificla na propriedade JavaScript do IWForm
(TIWForm).

Javascript
JCL
Json
Linq
Linux
Literatura Delphi
Mencoder
Modelagem
Mplayer
Multimidia
Multimdia

Para chamarmos a funo precorreTudo() vou adicionar ao

IWForm1 um IWButton (palheta IWStandard). Em seguida na
propriedade ScriptEvent, no evento OnClick digite, conforme
ilustrado na imagem abaixo:

Music
MySQL
Msica
Navegadores
NetBeans
Novidades
OLE DB
Oracle
Partituras
PHP
PL/SQL

POO
Na propriedade Caption do IWButton1 vou digitar PrecorreTudo.
Ok, caro leitor do Estao ZN, mais um teste j pode ser feito.
Porem, antes adicione alguns controles no IWForm1. Por exemplo
umas IWListBox, uns IWEdits (todos da palheta IWStandard).
Manipulando os objetos HTML via JavaScript no Intraweb
Na prxima funo seremos mais ousados. Vamos percorrer todos os
objetos do form num lao (for), atribuindo o nome, tanto do
form, quanto dos objetos associados a ele, num IWListBox. Veja
como o framework Intraweb cria e manipula os objetos, componentes
visuais Delphi, numa pgina HTML.

RPC
RSS
Script
Shell Script
Sibelius
Slackware
SQL
Subversion
Suporte
SVN

function percorreTudoSetValue(){
var ZnForms = document.getElementsByTagName("f
orm");
var ZnList = FindElem("IWLISTBOX1");
var ZnMemo = FindElem("IWMEMO1");
for (i = 0; i< ZnForms.length;i++) {
alert("Bla!! O nome do form : " + ZnForms[
i].name);
alert("Bla!! O ID do form : " + ZnForms[i
].id);
alert(ZnList.item(i).innerHTML);
idx = ZnList.options.length++;
ZnList.options[idx].value = ZnForms[i].name
;
ZnList.options[idx].text = ZnForms[i].name;
ZnList.setAttribute("Selected","Selected");
document.SubmitForm.IWLISTBOX1.text = "
" + ZnForms[i].name;
ZnMemo.value += ZnForms[i].name;
for (j = 0; j< ZnForms[i].elements.length;
j++) {
alert("Bla!! O nome do form : " + ZnFor
ms[i].name + " o elemento : " + ZnForms[i].elemen
ts[j].name);
idx = ZnList.options.length++;
ZnList.options[idx].value = ZnForms[i].n
ame + " | elemento: " + ZnForms[i].elements[j].nam
e;
ZnList.options[idx].text = ZnForms[i].na
me + "
| elemento: " + ZnForms[i].elements[j].na
me;
ZnList.setAttribute("Selected","Selected
");
ZnMemo.value += "\n" + ZnForms[i].elemen
ts[j].name;
}
}
}

Tableless
Tortoise
Tratamento de Excees
Tcnicas de desenvolvimento
UDF
UML
Variedades
VB6
VdeoGame
WAP
Web
Web 2.0
Web 3.0
Webservice
Windowhttp://www.blogger.
com/img/blank.gifs
Windows
Windows API
WML
XML
XSL

Observe que atribuir valor a um objeto Select usando JavaScript

para isso no um das coisas mais triviais. Observe tambm que
sabendo fazer isso voc pode ganhar bastante performance no seu
aplicativo, isso caso voc substitua processamento serverside, para
montar os valores num Select, fazendo atravs de JavaScript,
clientside.
Vamos testar ento? O prximo passo: Voc vai adicionar um
IWListBox e manter a propriedade name dele como IWLISTBOX1.
Adicione um IWMemo tambm IWMEMO1. O Memo criado na

Zn Ringtones

ZN Media Player
Links
Willian Rodrigues

pgina HTML como um objeto TextArea, ao passo que o IWListBox

gera um Select.
Agora, adicionaremos mais um IWButton, para fazermos chamada a
essa function. No IWButton3, altere a propriedade Caption para
Percorre Tudo II. No evento ScriptEvent, semelhante ao que
fizemos
no
IWButton1,
no
item
OnClick,
digite
percorreTudoSetValue().

Web 4
Shimatai
Pensamentos de um
Profissional de TI
Malta on Delphi
Linguagem de Mquina
Bruno Lichot Borland
Atelier das Idias

Helio Delmiro
Beijo Partido10/09/2008
All The Things You
Are03/09/2008
Inai26/05/2007
Um Novo Tempo
Msica20/05/2007
Rom Msica17/05/2007

OBS: O JavaScript super, ultra, hiper, case sensitive.

Portanto, muito cuidado com a digitao. Nas funes JavaScript que
estamos criando, devemos ter sempre a preocupao de usar um
JavaScript que seja compatvel com todos os navegadores (ou no
mnino com os mais conhecidos: IE e FireFox). Por isso, note que no
estou usando document.all.Obj Esse comando no suportado pelo
Fire Fox.

Propriedade Name do Form

No me refiro ao form VCL (IWForm), mas a tag form da pgina
HTML.
A prxima funo ser para definirmos dinamicamente um nome para
o objeto form na pgina HTML:
function NamedForm(){
alert("www.estacaozn.blogspot.com");
document.forms[0].name = "Landjah";
document.forms[0].id = "Landjah
";
alert("Estao zn - O nome do form : " + docu
ment.forms[0].name);
document.forms[0].IWEDIT1.value
= "Landjah";
}

Vou adicionar outro IWButton ao IWForm1, para a propriedade

Caption dele vou definir Nome do Form. Desta vez, vamos fazer a
chamada da funo NamedForm() em outra propriedade. Faremos
isso na propriedade ExtraTagParams, do IWButton2:

Gora, se voc clicar no IWButton2 antes de fazlo no IWBurron1,

perceber que o nome do form foi, na verdade pela primeira vez,
definido.

Habilitando e Desabilitando controles atravs de JavaScript.

Pode ser de grande utilidade saber habilitar e desabilitar os controles,
inputs de um form HTML, sem que para isso precise ir ao servidor.
Veja a funo abaixo:

function HabilitaControleEmail(){
var ZnEdtMail = FindElem("EDTEMAIL");
var ZnCmbTipoMail = FindElem("CMBTIPOEMAIL");
var ZnChkBoxMail = FindElem("IWCHECKBOX1");
ZnChkBoxMail.checked = !ZnChkBoxMail.checked;
ZnEdtMail.disabled = !ZnChkBoxMail.checked;
ZnCmbTipoMail.disabled = !ZnChkBoxMail.checked
;
if (ZnEdtMail.disabled) {
ZnEdtMail.style.backgroundColor = "#E7E7E7";
ZnCmbTipoMail.style.backgroundColor = "#E7E7
E7";
}
else {
ZnEdtMail.style.backgroundColor = "#FFFFFF
";
ZnCmbTipoMail.style.backgroundColor = "#FFFF
FF";
}
}

Na linha 2, recupero o objeto "EDTEMAIL".

Na linha 3, recupero o objeto Select o qual representa uma

IWComboBox "CMBTIPOEMAIL ".
Na linha 4, recupero o objeto CheckBox o qual representa
uma IWCheckBox "IWCHECKBOX1".

Na linha 5, simulo o comportamento do CheckBox.

Na linha 6 e 7, atribumos a propriedade disabled dos

controles EDTMAIL e CMBTIPOEMAIL a negao do valor do
CheckBox.

A partir da linha 9, controlamos o efeito visual: atribumos a

cor cinza aos controles caso estejam desabilitados. Caso contrrio,
recebem a cor branca.

Precisamos, ento, adicionar outro IWEdit, o qual

alteraremos a propriedade Name para EdtEMail. Adicione um
IWComboBox, altere sua propriedade Name para CMBTIPOEMAIL.
Vamos atribuir dinamicamente valores a propridade Items do
CMBTIPOEMAIL. Na seo private declare o procedimento
LoadCmbTipoEmail. Implemente conforme ilustrado abaixo:

procedure TZnIWForm.LoadCmbTipoEmail;
begin
CMBTIPOEMAIL.Items.Add('Email Comercial');
CMBTIPOEMAIL.Items.Add('Email Residencial');
end;

No envento OnCreate do IWForm faa chamada ao mtodo

LoadCmbTipoEmail.
Adicione tambm ao IWForm um IWCheckBox. No Intraweb 8,
no possvel acessar um CheckBox simplesmente pelo nome que ele
esta definido no Delphi. Por exemplo, para voc acessar o
IWCheckBox1, alm de ter usar caixa alta ainda temos que
acrescentar _CHECKBOX com sufixo do nome do componente. O
IWCheckBos1
deve
ser
referenciado
em
cdigo
como
IWCHECKBOX1_CHECKBOX . Como alternativa podemos acessar o
componente usando document.all[IWCHECKBOX1]. Esse comando
compatvel tanto com o Mozila, quanto com o IE.
Na propriedade ExtraTagParams do IWCheckBox1 digite conforme
ilustrado abaixo:

Observe que a propriedade ExtraTagParams habilita o

Code Editor (Delphi 2006 Intraweb 8).

Continua ....

tags: Delphi, Intraweb, Javascript, Web

Nenhum comentrio:
Postar um comentrio

Digiteseucomentrio...

Comentarcomo:

Publicar

Alexandre(Google)

Visualizar

Postagem mais recente

Sair

Notifiqueme

Pgina inicial

Postagem mais antiga

Assinar: Postar comentrios (Atom)

BlogBlogs.Com.Br