Mostrando postagens com marcador Internet. Mostrar todas as postagens
Mostrando postagens com marcador Internet. Mostrar todas as postagens

segunda-feira, 24 de agosto de 2009

Delphi - Intraweb: Passar e recuperar parâmetros entre requisições HTTP

Inicie uma aplicação Intraweb no Delphi. O Assunto é sobre passar, e recuperar, parâmetros entre requisições HTTP. Especificamente, pretendo exemplificar como chamar uma outra aplicação web, sendo que nesta chamada passaremos parâmetros, os quais, obviamente, serão recuperados e processados pela aplicação que foi requisitada.


Neste artigo criaremos duas aplicações Intraweb ISAPI. Um delas (“AppEstacaoZNSubmit”) servirá para passar parâmetros para outra (“AppRequestQueryFieldsEstacaoZN”). Esta segunda por sua vez, recupera os valores destes parâmetros processa e os exibe.
Ok, definido o que pretendemos fazer passamos agora a parte prática.

A seguir o código fonte da aplicação ISAPI que chama e passa os parâmetros. Salvei essa app de com o nome “AppEstacaoZNSubmit”.

O Form principal e único desta aplicação “IWUnit1.pas”:

unit IWUnit1;
{PUBDIST}

interface

uses
IWAppForm, IWApplication, IWTypes, IWCompButton, Classes, Controls,
IWControl, IWCompEdit, IWCompLabel;

type
TformMain = class(TIWAppForm)
IWEdit1: TIWEdit;
IWButton1: TIWButton;
IWLabel1: TIWLabel;
EdtURLZN: TIWEdit;
IWLabel2: TIWLabel;
procedure IWAppFormCreate(Sender: TObject);
procedure IWButton1Click(Sender: TObject);
public
end;

implementation
{$R *.dfm}

uses
ServerController, SysUtils, IWForm;

procedure TformMain.IWAppFormCreate(Sender: TObject);
begin
IWEdit1.Text := '';
IWButton1.Caption := 'Enviar - ZN';
IWLabel1.Caption := 'Digite o valor que será enviado';
IWLabel2.Caption := 'Digite a URL da aplicação ISAPI que será chamada' +
'e exibirá o valor digitado acima.';
EdtURLZN.Text := '';
end;

procedure TformMain.IWButton1Click(Sender: TObject);
const
AJSComando = 'window.open("%s?estacaoZnValor=%s")';
begin
AddToInitProc(Format(AJSComando, [EdtURLZN.Text, IWEdit1.Text]));
end;

end.


Em seguida o “.dpr”:

library AppEstacaoZNSubmit;

uses
IWInitISAPI,
ServerController in 'ServerController.pas' {IWServerController: TIWServerControllerBase},
IWUnit1 in 'IWUnit1.pas' {formMain: TIWForm1};

{$R *.RES}

begin
IWRun(TFormMain, TIWServerController);
end.


Não editei nada no “IWServerController”, portanto após compilar e efetuar o deploy da “AppEstacaoZNSubmit.dll” no IIS damos por encerrada esta etapa do nosso exemplo.


O próximo passo é codificar a segunda aplicação. Logo, novamente inicie um novo projeto Intraweb ISAPI, salve com o nome de “AppRequestQueryFieldsEstacaoZN”. No evento “OnRender” do IWForm1 implementaremos o que especificamos anteriormente. Abaixo, o fonte da IWUnit1.pas:

unit IWUnit1;
{PUBDIST}

interface

uses
IWAppForm, IWApplication, IWTypes, Classes, Controls, IWControl,
IWCompLabel, IWCompListbox, IWCompMemo;

type
TformMain = class(TIWAppForm)
IWLabel1: TIWLabel;
procedure IWAppFormRender(Sender: TObject);
public
end;

implementation
{$R *.dfm}

uses
ServerController, IWForm, SysUtils;

procedure TformMain.IWAppFormRender(Sender: TObject);
const
ZnMsg = 'www.estacaozn.blogspot.com O Valor recebido de "%s" é: %s';
begin
IWLabel1.Caption := Format(ZnMsg,
[WebApplication.Request.RemoteAddr,
WebApplication.Request.QueryFields.Values['estacaoZnValor']]);
IWLabel1.Font.Size := 20;
end;


Vejamos o “.dpr” da “AppRequestQueryFieldsEstacaoZN.dpr”.


library AppRequestQueryFieldsEstacaoZN;

uses
IWInitISAPI,
ServerController in 'ServerController.pas' {IWServerController: TIWServerControllerBase},
IWUnit1 in 'IWUnit1.pas' {formMain: TIWForm1};

{$R *.RES}

begin
IWRun(TFormMain, TIWServerController);
end.


Após proceder a implementação deste módulo conforme ilustrado acima, semelhante ao exemplo anterior compile e efetue o deploy da “AppRequestQueryFieldsEstacaoZN.dll” no ISS.
Feito isso já é possível testar. No browser, chame o diretório virtual definido no deploy da primeira aplicação (AppEstacaoZNSubmit.dll).




Digite no “IWEdit1” o valor para parâmetro “estacaoZnValor”, o qual será exibido. Digite também a URL da segunda aplicação no “EdtURLZN”, para somente então clicar no IWButton1.






Na primeira aplicação, no evento OnClick do IWButton1, chamamos o método “AddToInitProc” de “TformMain”. Este método nos permite “colocar” scripts (Javascript) que serão executados quando a função “Initialize()" padronizada pelo framework Intraweb, quando o browser estiver interpretando a tag “body”, da página construída pelo Intraweb. No body onload é definida a chamada a função “Initialize()".





function Initialize() {
InitSubmitter();
StaticInit();
if (document.body.leftMargin < 0 && document.body.topMargin < 0) {
document.body.leftMargin = 0;
document.body.topMargin = 0;
}
InitRects(614, 451);
InitIWCLObjects();

window.open("http://localhost/requesestacaozn/?estacaoZnValor=Landjah Estação ZN")
}



Então, podemos concluir que, no Intraweb quando você precisar executar uma função qualquer no evento “onload” no body basta para isso passá-la como parâmetro no método “AddToInitProc” do TIWForm em questão.

Na segunda aplicação, “AppEstacaoZNSubmit”, o comando
"WebApplication.Request.QueryFields.Values" pode ser entendido da mesma forma que o Webbrocker trabalha com o protocolo http.
Podemos também recuperas outras variáveis através do objeto “WebApplication”, sua propriedade “Request”, tais como o “RemoteHost”, “UserAgent” e etc..

Por hora é só .... Até a próx!!!


Artigo completo (View Full Post)

sábado, 23 de maio de 2009

Você já isntalou o IE8?

Como o título já diz: eu já. A microsoft colocou o Internet Explorer 8 como atualização crítica para o Windows XP e cá estamos nós usuários deste maravilhoso sistema operacional atualizando.

O navegador é muito bonitinho: A interface é boa, tem depurador de Javascript (já dava para fazer isso anteriormente, mas agora está incorporado no navegador), etc. Mas um problema assola alguns usuários (como minha digníssima que ainda usa muito o Internet Explorer): o teclado.

Alguns usuários têm notado que no IE 8 o teclado não responde legal. Na minhma máquina acontece isso Neste link [forum.clubedohardware.com.br] há uma discussão do problema e possíveis causas e soluções.

Alguns males vêm para bem: Agora minha patroa já está começando a usar o querido por todos Firefox para navegar, graças as minhas insistentes investidas. Ha ha. Aproveitei essa hora para trazê-la ao lado da luz.

Abraços e até a próxima!

Artigo completo (View Full Post)

sábado, 25 de abril de 2009

Ajax/JSON & Delphi technologies– Webbrocker, Intraweb (ISAPI), IWTemplateProcessorHTML com CSS

Estou com muita pressa, portanto serei o mais sucinto o possível ...
O objetivo deste artigo é documentar uma solução desenvolvida para atender um cliente.
Vamos criar um serviço de consulta que deverá fornecer dados para um requisição Ajax. Para isso construiremos uma aplicação servidora (Delphi/Webbrocker) a qual acessará uma base de dados MS SQL Server (especificamente o banco de dados para exemplos “Northwind”), para executarmos uma consulta parametrizada (valor que virá na requisição cliente) cujo os dados retornados serão devidamente formatados para Json (Wik) (Não vou usar XML). Ou seja, como resposta a requisição mencionada, a aplicação servidora retornará os dado que serão consumidos pelo Ajax/Json.


Não sei, ou sei muito pouco sobre o que vc esta falando, Gerson. Então veja:
Pesquisa 1
Pesquisa 2
Marco Cantù AJax XML/DOM
Neste artigo o Cantù mostra como aproveitar o XMLData do TClientDataSet no DOM/XML (mto legal para delpheros).
Marco Cantù Artigo Ajax
Json

Em seguida, desenvolveremos o aplicativo cliente, a camada de interface, em Delphi/Intraweb, aonde implementaremos uma função Javascript. Nela usaremos o XMLHttpRequest do javascript de forma assíncrona.


Mãos à Obra, Estação ZN!


Server-Side development

Inicie um projeto Webbrocker no Delphi. Menu ►File ►New ►Other ► Web Server Application.





A tecnologia de service web que vamos usar será API do IIS (ISAPI). No WebModule1 adicione os componentes de acesso a dados: TADOConnetion, TADODataSet, TDataSetProvider, TClientDataSet. No editor de string de conexão (Edit Connection String) do ADOConnection, configure a conexão com o SQL Server e em seguida associe os Datasets (Como Associar? veja no Estação ZN). O Comando SQl que definiremos no ADODataSet1 será:



select * from Customers
where CompanyName like :CompanyName


Criando a Webbrocker Action (WebAction)

Selecione o WebModule1, de maneira que suas propriedades sejam listadas no Object Inspector. Crie uma Action e configure suas propriedades conforme ilustrado abaixo:




Evento OnAction da Action “ZnConsClientes”:



uses
Math, StrUtils;

procedure TWebModule1.WebModule1ZnConsClientesAction(Sender: TObject;
Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
const
ZnTag = '%s:%s';
var
StrStatment: String;
i, CodRetorno: Integer;
begin
with ClientDataSet1 do
begin
Params[0].AsString := '%' + Request.QueryFields.Values['znNomeCli']+ '%';
try
Open;
CodRetorno := IfThen(IsEmpty, -1, 1);
StrStatment := StrStatment +
Format(ZnTag, ['codretornoZn',
IntToStr(CodRetorno)]);

if CodRetorno = 0 then Exit;

for i := 0 to Pred(FieldCount) do
begin
StrStatment := StrStatment + ','+
Format(ZnTag, [LowerCase(ClientDataSet1.Fields[i].FieldName),
IfThen((ClientDataSet1.Fields[i].AsString = ''), QuotedStr('-'),
QuotedStr(ClientDataSet1.Fields[i].AsString))]);
end;

finally
Close;
Response.Content := Format('{%s}',[StrStatment]);
end;
end;
end;


Para usar as versões sobrecarregadas da função “IfTehn” precisamos, para este exemplo, declarar (fazer uses das ...) as units “Math” e “StrUtils” (observe na linha 2 do trecho acima).
Pronto, acabamos essa primeira parte! Antes de compilar, garanta que o ADOCOnnection esteja desconectado. Propriedade “Connected” igual a “false”. Agora sim!!! Compile a aplicação servidora para gerar a dll a qual faremos deploy no IIS (Deploy de uma dll ISAPI). Vou criar o diretório virtual no IIS com o nome de “ajaxjsonzn”.

Após ter tido sucesso em realizar o deploy, vamos testar.
Para isso digitar no browser "http://localhost/ajaxjsonzn/?znNomeCli=Cactus" para se emocionar ao ver o que acabamos de criar.


Veja a string retornada pela nossa aplicação servidora Webbrocker:

{codretornoZn:1,customerid:'CACTU',companyname:'Cactus Comidas para llevar',contactname:'Patricio Simpson',
contacttitle:'Sales Agent',address:'Cerrito 333',city:'Buenos Aires',region:'-',
postalcode:'1010',country:'Argentina',phone:'(1) 135-5555',fax:'(1) 135-4892'}



Cliente-Side development

Meu querido leitor do Estação ZN, neste momento vamos começar esta segunda parte do artigo construindo uma página html. Hum, ãhhh?!?!? Como?? Mas o assunto não é Delphi? Sim, o assunto gira em torno das tecnologias para web existentes no Delphi. O que nós vamos fazer agora é demonstrar também como o framework Intraweb pode interagir com projetos onde as páginas web são desenvolvidas a parte do Delphi. Existem várias situações onde isso poderá ser extremamente vantajoso. Por exemplo, imagine um projeto onde exista uma ênfase grande na parte de design e por isso as páginas do site são desenvolvidas especificamente pela equipe de designers e diante disto a equipe de desenvolvimento deve integrá-las a parte de lógica e persistência desenvolvida no Delphi. Este cenário no contexto Delphi é até bem comum, penso que sim.
Portanto, antes de qualquer coisa execute seu editor preferido de páginas htm e Javascript e bola pra frente. Abaixo, segue o código dá pagina que desenvolvi para este exemplo:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.AreaTexto {
font-family: "Comic Sans MS", "Courier New", Georgia;
width: 420px;
height:540px;
background-color:#FFFF38;
}
-->

</style>
<script type="text/javascript">

var ZnXmlAjaxHttpObj;

function ZnGetClienteWsAjx(ZnMyName) {

alert('estou na função!');
if (typeof XMLHttpRequest != "undefined"){ZnXmlAjaxHttpObj = new XMLHttpRequest();}
else{
ZnXmlAjaxHttpObj = new ActiveXObject('Msxml2.XMLHTTP');
if (!ZnXmlAjaxHttpObj){ZnXmlAjaxHttpObj = new ActiveXObject('Microsoft.XMLHTTP');}
}
alert(ZnMyName.value);
var ZnSpan = document.getElementById("IWLABEL1");

ZnSpan.innerHTML = "Estaçaõ Zn: Buscando dados do Cliente pelo nome fornecido: " + ZnMyName.value + " ....";

var url = "http://localhost/ajaxjsonzn/?znNomeCli="+ ZnMyName.value;
ZnXmlAjaxHttpObj.open("GET", url, true);
ZnXmlAjaxHttpObj.onreadystatechange = ZnDynProcessaReqBuscaCliente;
ZnXmlAjaxHttpObj.send(null);
}

function ZnDynProcessaReqBuscaCliente() {
var ZnSpan2 = document.getElementById("IWLABEL2");
var ZnElement = document.getElementById("IWEDIT1");
ZnSpan2.innerHTML = 'Processando ..................';
if (ZnSpan2.innerHTML.indexOf("buscando dados",0) >= 0){ZnSpan2.innerHTML = "Processando ...";}
else {ZnSpan2.innerHTML = "<b>buscando dados do Cliente: </b>" + ZnElement.value + " ....";}

if (ZnXmlAjaxHttpObj.readyState == 4) {
if (ZnXmlAjaxHttpObj.status == 200) {
processJsonEstacaoZn(ZnXmlAjaxHttpObj.responseText);
}
}
else return false;
}

function processJsonEstacaoZn(obj1) {

var ObjLandjah;
eval('ObjLandjah = ' + obj1);
var Aux =
" <br /> customerid: "+ ObjLandjah.customerid +
" <br /> contactname: "+ ObjLandjah.contactname +
" <br /> contacttitle: "+ ObjLandjah.contacttitle +
" <br /> companyname: "+ ObjLandjah.companyname +
" <br /> country: "+ ObjLandjah.country +
" <br /> CEP/postal code: " + ObjLandjah.postalcode +
"<br /> Região: " + ObjLandjah.region +
"<br /> Cidade: " + ObjLandjah.city +
"<br />Logradouro: " + ObjLandjah.address +
" <br /> fax: " + ObjLandjah.fax +
" <br /> phone: "+ ObjLandjah.phone;
alert(Aux);
document.getElementById("cj").innerHTML += '- <b>Ninguém vai subir #@#@%#@%#%@ ... vai ficar todo mundo quietinho ae.</b>';
document.getElementById("cj").innerHTML += Aux;
document.getElementById("IWMEMO1").innerHTML += ' \n <b>100% Quatorze? </b>';
document.getElementById("IWMEMO1").innerHTML += ' \n ************************************';
//****************************************************

var insertData = "<b> Resultado Consulta www.estacaozn.blogspot.com:</b>";
try {
//alert('Cod Retorno: ' + ObjLandjah.codretornoZn);
switch (ObjLandjah.codretornoZn * 1) {
case 1:
document.getElementById("IWMEMO1").innerHTML += ' \n - Cavera meu Capitão. ';
document.getElementById("IWMEMO1").innerHTML += ' \n ************************************';
insertData += " <br /> customerid: "+ ObjLandjah.customerid +
" <br /> contactname: "+ ObjLandjah.contactname +
" <br /> contacttitle: "+ ObjLandjah.contacttitle +
" <br /> companyname: "+ ObjLandjah.companyname +
" <br /> country: "+ ObjLandjah.country +
" <br /> CEP/postal code: " + ObjLandjah.postalcode +
"<br /> Região: " + ObjLandjah.region +
"<br /> Cidade: " + ObjLandjah.city +
"<br />Logradouro: " + ObjLandjah.address +
" <br /> fax: " + ObjLandjah.fax +
" <br /> phone: " + ObjLandjah.phone;
//alert("Case, estou aqui");
// Abaixo, veja como atribuir valor do JavaScript Object Notation ao IWMemo e aos IWEdits
document.getElementById("IWMEMO1").innerHTML += ' \n ************************************';
document.getElementById("CEP").value = ObjLandjah.postalcode;
document.getElementById("CEP").disabled = true;
document.getElementById("IWMEMO1").innerHTML += " \n CEP: " + ObjLandjah.postalcode;
document.getElementById("CONTACTNAME").value = ObjLandjah.contactname;
document.getElementById("CONTACTNAME").disabled = true;
document.getElementById("IWMEMO1").innerHTML += " \n Contato: " + ObjLandjah.contactname;
document.getElementById("CONTACTTITLE").value = ObjLandjah.contacttitle;
document.getElementById("CONTACTTITLE").disabled = true;
document.getElementById("IWMEMO1").innerHTML += " \n Contato: " + ObjLandjah.contacttitle;
document.getElementById("CIDADE").value = ObjLandjah.city;
document.getElementById("CIDADE").disabled = true;
document.getElementById("IWMEMO1").innerHTML += " \n Cidade: " + ObjLandjah.city;
document.getElementById("BAIRRO").value = "Bla!";
document.getElementById("BAIRRO").disabled = true;
document.getElementById("FAX").value = ObjLandjah.fax;
document.getElementById("FAX").disabled = true;
document.getElementById("IWMEMO1").innerHTML += "\n Fax: " + ObjLandjah.fax;
document.getElementById("LOGRADOURO").value = ObjLandjah.address;
document.getElementById("LOGRADOURO").disabled = true;
document.getElementById("IWMEMO1").innerHTML += "\n Logradouro:" + ObjLandjah.address;
document.getElementById("COMPANYNAME").value = ObjLandjah.companyname;
document.getElementById("COMPANYNAME").disabled = true;
document.getElementById("IWMEMO1").innerHTML += "\n Nome da Empresa:" + ObjLandjah.companyname;
document.getElementById("COUNTRY").value = ObjLandjah.country;
document.getElementById("COUNTRY").disabled = true;
document.getElementById("IWMEMO1").innerHTML += "\n Pais:" + ObjLandjah.country;
document.getElementById("UF").value = ObjLandjah.region;
document.getElementById("UF").disabled = true;
document.getElementById("IWMEMO1").innerHTML += " \n Região: " + ObjLandjah.region;
document.getElementById("PHONE").value = ObjLandjah.phone;
document.getElementById("PHONE").disabled = true;
document.getElementById("IWMEMO1").innerHTML += " \n Tel: " + ObjLandjah.phone;
document.getElementById("IWMEMO1").innerHTML += '\n ************************************';
break;
case -1: insertData += "Cliente não encontrado!"; break;
case -2: insertData += "Valor digitado inválido!"; break;
case -3: insertData += "Ta com nojinho 02?."; break;
case -4: insertData += "AH ESSA ALTURA DO CAMPEONATO VC TA SEM AH BANDOLEIRA ??!"; break;
default: "PEDE PRA SAIR 01. Pede pra sair.";
}
}
catch(Error) {
insertData = "<br> <font color=#FF0000> eRrO. TIRA ESSA ROUPA PRETA QUE VC NÃO É CAVEIRA. </font> As Landjhas de mirandjas!!!"
}

document.getElementById("IWLABEL2").innerHTML += insertData;
document.getElementById("IWLABEL1").innerHTML += " <br /><b> Os senhores estão bem? Os senhores estão feridos? Algum dos senhores estão baleados? " +
" Então, no próximo post vcs vão aprender a carregar corpos!!! </b>"
document.getElementById("IWMEMO1").innerHTML += ' \n ';
}



</script>

</head>

<body>
<form id="form1" name="form1" method="post" action="">
<div id="PosControles" style="position: absolute; top: 32px; left: 12px; width: 887px; height: 92px; background-color: #3399CC;
font-size:16px; font-weight:400" align="justify"><br />Digite o Nome do Cliente: {%IWEdit1%} | {%IWButton1%}
<br>
{%Logradouro%}{%Bairro%}{%Cidade%} {%UF%}{%CEP%} {%CompanyName%}
{%ContactName%}
{%ContactTitle%}
{%Phone%}
{%Fax%}
{%Country%}
{%IWLink1%} <a href="http://localhost/estacaozncliente">Reload Page</a></div>
<div id="PosSpan" style="position: absolute; top: 128px; left: 12px; width: 440px; height: 580px; background-color: #99FF99;">
{%IWLabel1%} {%IWLabel2%}
<span id="cj">
</span>
</div>
<div id="PosMemo" style="position: absolute; top: 128px; left: 458px; width: 440px; height: 580px; background-color: #99FF99;"
align="center"><p>
{%IWMEMO1%}
testando!!
</div>


</form>
</body>
</html>


Salve a página html (o arquivo html, referente a página que acabamos de criar) com o nome de “ZnPageAjaxJsonIntraweb.html”.




O próximo passo, será criar a aplicação cliente intraweb. Retornemos ao Delphi então, para iniciarmos um projeto Intraweb ISAPI. No menu File ► New ►Other ►Intraweb ►ISAPI Application.

Adicione no IWForm1 os seguintes componentes:


IWTemplateProcessorHTML1: TIWTemplateProcessorHTML;
IWLabel1: TIWLabel;
IWEdit1: TIWEdit;
IWButton1: TIWButton;
IWMemo1: TIWMemo;
CEP: TIWEdit;
UF: TIWEdit;
Bairro: TIWEdit;
Logradouro: TIWEdit;
Cidade: TIWEdit;
IWLabel2: TIWLabel;
CompanyName: TIWEdit;
ContactName: TIWEdit;
ContactTitle: TIWEdit;
Phone: TIWEdit;
Fax: TIWEdit;
Country: TIWEdit;


No evento OnCreate do IWForm1 codifique conforme ilustrado abaixo:

procedure TformMain.IWAppFormCreate(Sender: TObject);
begin
Self.TemplateProcessor := IWTemplateProcessorHTML1;
IWTemplateProcessorHTML1.Templates.default := 'ZnPageAjaxJsonIntraweb.html';
IWLabel1.Caption := ' ';
IWMemo1.Font.Enabled := False;
IWMemo1.Font.CSSStyle := 'AreaTexto';
CEP.Width := 80;
UF.Width := 40;
Cidade.Width := 120;
Logradouro.Width := 180;
Bairro.Width := 90;
IWButton1.ExtraTagParams.Add('onClick=ZnGetCLienteWsAjax(IWEDIT1)');
IWMemo1.Lines.Add(' ');
IWEdit1.Text := 'Cactus Comidas para llevar';
end;


Observe na linha 7, estou atribuindo dinamicamente ao IWMemo1 uma classe CSS (“'AreaTexto'”) a qual está definida na página HTML que criamos anteriormente.

Ok, muito bem, meus amigos e minhas amigas, a parte referente a aplicação cliente termina aqui!! Isso é mto bom! Agora, é chegado o momento do bom e velho amigo deploy. Para isso, um “build all” na aplicação Intraweb (alt, p, b) é bem vindo, ela será compilada e a dll para deploy será gerada. So .. next step ... enjoy yourself ...
O nome do diretório virtual que vou criar será “estacaozncliente”.


No mesmo diretório onde está a dll gerada pelo Delphi na compilação deste projeto Intraweb, crie um diretório onde ficará a pagina html que o IWTemplateProcessorHTML1 vai trabalhar. Me refiro ao arquivo da página que criamos anteriormente, “ZnPageAjaxJsonIntraweb.html”. Esse diretório tem que se chamar “Templates”, desta forma não precisamos definir nenhuma configuração para TemplateProcessorHTML encontrar o arquivo.


Testando Aplicação cliente IntraWeb/ISAPI.



O link “Reload Page” coloquei para facilitar o desenvolvimento da aplicação cliente. Assim evito de ficar digitandoa url do serviço toda vez que houver alguma alteração, seja na aplicação servidora, seja na aplicação cliente, ou na página html.

Conclusão
A partir da experiência realizada e documentada neste artigo, destaco as seguintes observações:
Usar a tecnologia Ajax nos seus sistemas web, sites, ou serviços traz, além de um ganho de performance, escalabilidade e interoperabilidade. Isso porque a solução Ajax é independente da tecnologia que esteja sendo utilizada no client-side. Pretendo, para o próximo post documentar um exemplo da mesma solução desenvolvida neste arquivo, sendo que a camada cliente desenvolverei em Java com o Netbeans.
O uso do JavaScript Object Notation (Json) descomplica muito a desenvolvimento de uma solução baseada em Ájax.
Um ponto muito importante neste artigo é o emprego do componente processador de “templates” o IWTemplateProcessorHTML. Ele permite que seu form Intraweb seja construído em cima de um arquivo HTML criado separadamente. Dessa forma um leque de possibilidades se abre. No momento a que eu mais quero destacar é que com isso é possível modularizar seu projeto colocando toda a parte de layout, disign, bem como o processamento client-side. Com isso, todo o Javascript que trabalhamos nos artigos anteriores pode ser definido na página web. Igualzinho é feito por webmasters, inclusive usando a tag “src” para códigos Javascript que ficam em arquivos separados.
Javascript placement: o Código JavaScript pode estar fisicamente disposto em um diretório específico para este fim, num arquivo “.js” separado da página HTML. Isso melhora inda mais a modularização do seu sistema, site, portal, etc...
O arquivo fonte do Javascript em questão é referenciado na página HTML usando a tag “script” o atributo "src" com o nome do arquivo e o path definidos como valor.


<head>
<script language="JavaScript" src="ZnJavaScriptFile.js"></script>
</head>

Estive conversando com o Felipe e com o Malta sobre os exemplos anteriores que estive postando. Onde demonstrei o código Javascript definido como string no meio do código Delphi. Essa forma de implementar é um metodologia que condeno enfaticamente nos meus projetos. Inclusive, todos dois, tanto o Felipe, quanto o Malta, concordam e estavam me chamando a atenção sobre isso. Que o Javascript no meio do código Delphi, mesmo eu “organizando”, através de constantes o caos, é uma solução macarrônica, feia, nojenta, asquerosa. Entretanto, eu fiz dessa forma nos exemplos anteriores porque acredito que assim o artigo que estou escrevendo para o Estação ZN fica menor, menos complexo, mais didático, na medida em que eu procuro estar focado nos assuntos que pretendo falar naquele momento. Quando estou postando aqui minha ênfase é totalmente didática. Entendo que para passar um conhecimento complexo ele deve ser simplificado, de maneira que seja reduzida toda complexidade inerente ao problema em questão.
Portanto, de agora em diante, sugiro que você cuide para que, imperativamente, o Javascript fique separado da aplicação Delphi. Para isso temos basicamente dois caminhos a tomar: O primeiro seria usar o “IWTemplateProcessorHTML”. Uma segunda opção seria usar um “LoadFromFile”, ou seja ler dinamicamente arquivos com as funções Javascript. Se você optar por usar o IwTemplateProcesso, implementar desta forma, o “js” na página HTML, é uma ação intuitiva. Como fazer isso está demostrado neste artigo. Caso negativo, uma idéia, proposta pelo Malta, que eu gostei bastante, seria do Delphi, fazer um “LoadFromFile” de um arquivo, onde estaria com código JavaScript parametrizado (semelhante a um parâmetro de um comando SQL). A idéia é usar, ao invés de parâmetros de “FormatString (%s)” uma sintaxe como nome de parâmetros (:nome) e fazer substituição por pares (nome, valor). Deixe-me explicar melhor:
Veja num dos artigos anteriores: O Código Javascript que defini não tem “%s” para usar na função Format? Então, substitua todos o “%s” por uma sintaxe própria, que estaríamos criando, que represente o nome de um parâmetro. Por exemplo: ..... :par1 ... :idade ... :cidade... :idade. A exemplo de um comando SQL num TSQLQurey. Para trabalhar em conjunto, criaríamos uma função para substituir os parâmetros por valores em runtime, por exemplo: “function ZnReplaceParams(const znParmName, znParamValue: String)”. A chamada seria: “ReplaceParams('idade', '18');”. De cara podemos citar como vantagens melhor legibilidade do código Javascript, além de não fica dependente de posição (como é o caso do “Format(%s)”). Dentro da função caixa preta “ZnReplaceParams”, um StringReplace pode dar conta do recado, com rfReplaceAll e rfIgnoreCase. O que inclusive facilita quando você precisa repetir o mesmo valor várias vezes no mesmo script bastaria repetir o nome da "macro" ou parâmetro. Boa Malta, Estação Zn agradece! Tks!!
Uma outra abordagem seria usar argumentos na própria função Javascript, a qual vai estar definida num arquivo “.txt”, ou “.js”, que seja, e no Delphi atribuir as definições das chamadas a essas funções nos eventos “Javascript”, nas propriedades “ExtragParams”, ou “ScriptEvent”. Como exemplifiquei no artigo sobre validação de CIC.


Falar sobre modularização é muito simples. Mas demonstrar, é no mínimo trabalhoso. Eu prefiro inclusive demonstrar o “como não fazer”, para melhorar, aumentar a aderência da explicação do sobre “como fazer”.

Aconselho ao desenvolvedor que decidir usar o Delphi/Intraweb ter muita atenção na hora de referenciar os objetos, inputs, submits, selects, criados pelo Intraweb, no que tange a caixa do nome dos controles definidos no Delphi. Isso pq o Delphi não é case sensitive, conseqüentemente o desenvolvedor delphi não deverá, a pricípio, estar acostumado com essa restrição. Portanto, cuidado com comandos do tipo “document.getElementById("IWMEMO1")”, porque todo componente Intraweb é criado na página html com o nome em CAIXA ALTA. A função “getElementById” é sensível a caixa.
Programar em Javascript exige muita atenção a questões extra-intelectuais, pois você não vai poder contar com code insight, nem auto-complemento de código (code complete) e ainda existe o overhead de atenção na questão do case sensitive sem contar que as mensagens de erro não são tão amigáveis. Uma ferramenta que pode ajudar neste sentido são os plugins para desenvolvimento web do Fire Fox.
Outro ponto adverso é desenvolver um script client-side compatível com todos os browsers. Isso exige bastante de quem está desenvolvendo. Entretanto os bônus adquiridos em usar enfaticamente Javascript acaba compensando todos os ônus listados. Além disso, com o tempo o desenvolvedor ganha prática nesta abordagem e esses fatores negativos acabam perdendo sua força.
A tecnologia Json ainda é bem nova, nas minhas pesquisas encontrei muito pouca gente usando. Mas pra minha surpresa um número razoável de pessoas, blogs, falando sobre. Dei uma pesquisada no google trends http://www.google.com/trends sobre as buscas sobre Json.





Abaixo, código completo das units Delphi:

Aplicação Cliente Intraweb


unit IWUnit1;
{PUBDIST}

interface

uses
IWAppForm, IWApplication, IWTypes, IWCompMemo, IWCompButton, IWCompEdit,
Controls, IWControl, IWCompLabel, Classes, IWLayoutMgr,
IWTemplateProcessorHTML, IWHTMLControls;

type
TformMain = class(TIWAppForm)
IWTemplateProcessorHTML1: TIWTemplateProcessorHTML;
IWLabel1: TIWLabel;
IWEdit1: TIWEdit;
IWButton1: TIWButton;
IWMemo1: TIWMemo;
CEP: TIWEdit;
UF: TIWEdit;
Bairro: TIWEdit;
Logradouro: TIWEdit;
Cidade: TIWEdit;
IWLabel2: TIWLabel;
CompanyName: TIWEdit;
ContactName: TIWEdit;
ContactTitle: TIWEdit;
Phone: TIWEdit;
Fax: TIWEdit;
Country: TIWEdit;
procedure IWAppFormCreate(Sender: TObject);
public
end;

implementation
{$R *.dfm}

uses
ServerController, IWForm;

//ajaxconcorretor

procedure TformMain.IWAppFormCreate(Sender: TObject);
begin
Self.TemplateProcessor := IWTemplateProcessorHTML1;
IWLabel1.Caption := ' ';
IWMemo1.Font.Enabled := False;
IWMemo1.Font.CSSStyle := 'AreaTexto';
CEP.Width := 80;
UF.Width := 40;
Cidade.Width := 120;
Logradouro.Width := 180;
Bairro.Width := 90;
IWButton1.ExtraTagParams.Add('onClick=return ZnGetClienteWsAjx(IWEDIT1);');
IWMemo1.RawText := True;
IWMemo1.Lines.Add(' ');
IWEdit1.Text := 'Cactus Comidas para llevar';
end;

end.



Aplicação Servidora Webbrocker



unit Unit1;

interface

uses
SysUtils, Classes, HTTPApp, DBClient, Provider, DB, ADODB;

type
TWebModule1 = class(TWebModule)
ADOConnection: TADOConnection;
ADODataSet1: TADODataSet;
DataSetProvider1: TDataSetProvider;
ClientDataSet1: TClientDataSet;
ClientDataSet1CustomerID: TWideStringField;
ClientDataSet1CompanyName: TWideStringField;
ClientDataSet1ContactName: TWideStringField;
ClientDataSet1ContactTitle: TWideStringField;
ClientDataSet1Address: TWideStringField;
ClientDataSet1City: TWideStringField;
ClientDataSet1Region: TWideStringField;
ClientDataSet1PostalCode: TWideStringField;
ClientDataSet1Country: TWideStringField;
ClientDataSet1Phone: TWideStringField;
ClientDataSet1Fax: TWideStringField;
procedure WebModule1ZnConsClientesAction(Sender: TObject;
Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
private
{ Private declarations }
public
{ Public declarations }
end;

var
WebModule1: TWebModule1;

implementation

{$R *.dfm}

uses
Math, StrUtils;

procedure TWebModule1.WebModule1ZnConsClientesAction(Sender: TObject;
Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
const
ZnTag = '%s:%s';
var
StrStatment: String;
i, CodRetorno: Integer;
begin
with ClientDataSet1 do
begin
Params[0].AsString := '%' + Request.QueryFields.Values['znNomeCli']+ '%';
try
Open;
CodRetorno := IfThen(IsEmpty, -1, 1);
StrStatment := StrStatment +
Format(ZnTag, ['codretornoZn',
IntToStr(CodRetorno)]);

if CodRetorno = 0 then Exit;

for i := 0 to Pred(FieldCount) do
begin
StrStatment := StrStatment + ','+
Format(ZnTag, [LowerCase(ClientDataSet1.Fields[i].FieldName),
IfThen((ClientDataSet1.Fields[i].AsString = ''), QuotedStr('-'),
QuotedStr(ClientDataSet1.Fields[i].AsString))]);
end;

finally
Close;
Response.Content := Format('{%s}',[StrStatment]);
end;
end;
end;


end.


Artigo completo (View Full Post)

segunda-feira, 15 de dezembro de 2008

Delphi Intraweb 8 – Acessando dados – BDS2006

Neste artigo pretendo demonstrar como usar os componentes dataware do framwork Intraweb 8.
Tenho observado muitos problemas com essa versão da Intraweb. Graças a Deus parece que ninguém ousou usar esse framework, com algumas raras exceções. Se você veio aqui procurando saber se deve ou não iniciar um projeto com essa tecnologia, minha sugestão é: Procure outra coisa, ou na falta de alternativa use Delphi 7 com a versão 5.o do Intraweb.

Vamos construir uma aplicação que vai acessar a base de dados Northwind do SQL Server. Northwind, é uma base criada por default no SQL server, na instalação, cujo objetivo é didático. Ela é usada nos treinamentos oficiais da Microsoft, e exemplifica integralmente um banco de dados usado em um cenário real, profissional



Explicando sobre a base de dados

OBS:
Caso você já conheça a base Northwind, pode pular essa parte indo direto para “Iniciando um projeto Intraweb”.


Vamos trabalhar com as tabelas Categories (Refere-se as categorias dos produtos) e Products (Produtos).
Com o botão direito do mouse sobre “Diagrams”, na tree view, dentro do nó “Northwind”, podemos criar um DER (Diagram Entidade Relacionamento) das tabelas e entender como os dados se relacionam neste data base.



Nosso exemplo estará restrito ao contexto demonstrado na figura abaixo:



O relacionamento demonstrado acima indica que uma “Categoria” pode classificar muitos produtos. Sendo que o “Produto” somente pode ser classificado por uma “Categoria”. Este tipo de relacionamento chama-se “Um para N” (1-N). No relacionamento “Um para N” a chave (campo de relacionamento) aponta para a tabela “N”, no caso “Produtos”.
Isso quer dizer que na tabela Producs, existe uma coluna que referencia a tabela “Categories”. Em outras palavras: A coluna “CategoryID”, de “Producs” aponta para a “CategoryID” de “Categories”.


Iniciando um projeto Intraweb

Inicie um novo projeto do DBS2006: No menu File ►New ► Other ►Intraweb, selecione “Intraweb Application Wizard”.



No diálogo seguinte, “Intraweb Application Wizard”, definiremos alguns parâmetros da nova aplicação que criaremos. Configure conforme ilustrado na imagem abaixo:



Adicione na Unit1 os seguintes componentes:

IWDBEdit1: TIWDBEdit
IWDBListbox1: TIWDBListbox
IWDBNavigator1: TIWDBNavigator
IWDBLookupComboBox1: TIWDBLookupComboBox
IWButton1: TIWButton
IWCheckBox1: TIWCheckBox
ADOConnection1: TADOConnection
ADODataSet: TADODataSet, altere a propriedade “Name” para: AdsCategotias.
DataSetProvider: TdataSetProvider , altere a propriedade “Name” para: DspCategotias
ClientDataSet: TClientDataSet, altere a propriedade “Name” para: CdsCategotias
DataSource: TDataSource, altere a propriedade “Name” para: DsCategotias
ADODataSet: TADODataSet, altere a propriedade “Name” para: AdsProdutos
DataSetProvider: TDataSetProvider, altere a propriedade “Name” para: DspProdutos
ClientDataSet: TClientDataSet, altere a propriedade “Name” para: CdsProdutos
DataSource: TDataSource, altere a propriedade “Name” para: DsProdutos
OBS: A partir do DBS 2005 foi inroduzido na IDE do Delphi um novo conceito para a “Tool Palette”. Para vizualizá-la acesse o menu Vew ► Tool Palette. Hot key “Ctrl + Alt + P” ou digite “Alt” seguido de “V” seguido de “L”.



Uma forma fácil de adicionar um novo componente ao seu projeto é clickar sobre o ícone de filtro na Tool Palette e digitar o nome do componente. Veja imagem abaixo:



Veja o meu Form como ficou em tempo de projeto:




Conecte os componentes de acesso a dados da seguinte forma:

Selecione o IWEdit1, acesse o Objetc Inspector (F11). Associe IWDbEdit1, através da propriedade DataSource, ao DsProdutos. Defina a coluna (campo) que será associada ao IWEdit na propriedade “DataField”. Selecione “ProductName”.

Selecione o DsProdutos, acesse o Objetc Inspector (F11). Associe DsProdutos, através da propriedade DataSet, ao CdsProdutos.

Selecione o CdsProdutos, acesse o Objetc Inspector (F11). Associe CdsProdutos, através da propriedade ProviderName, ao DspProdutos.

Selecione o DspProdutos, acesse o Objetc Inspector (F11). Associe DspProdutos, através da propriedade “DataSet”, ao AdsProdutos.

Selecione o AdsProdutos, acesse o Objetc Inspector (F11). Associe AdsProdutos, através da propriedade “Connection”, ao ADOConnction1.


Conectando o acesso a categoria de produtos:

Selecione o DsCategotias, acesse o Objetc Inspector (F11). Associe DsCategotias, através da propriedade DataSet, ao CdsCategotias.

Selecione o CdsCategotias, acesse o Objetc Inspector (F11). Associe CdsCategotias, através da propriedade ProviderName, ao DspCategotias.

Selecione o DspCategotias, acesse o Objetc Inspector (F11). Associe DspCategotias, através da propriedade “DataSet”, ao AdsCategotias.

Selecione o AdsCategotias, acesse o Objetc Inspector (F11). Associe AdsCategotias, através da propriedade “Connection”, ao ADOConnction1.


Conectando o IWDBLookupComboBox1:


Selecione o IWDBLookupComboBox1, acesse o Objetc Inspector (F11). Associe IWDBLookupComboBox1, através da propriedade DataSource, ao DsProdutos. Defina a coluna (campo) que será associada ao IWDBLookupComboBox1 na propriedade “DataField”. Selecione “CategoryID”. A associação ao CdsCategorias deve ser feita através das propriedades:

1 – “ListSource”, nela selecione “DsCategotias”.
2 - “KeyField”, nela selecione “CategoryID”.
3 - “ListField”, nela selecione “CategoryName”

Esses três campos são do CdsCategorias. Veja mais detalhes sobre a técnica de Lookup ...




Conectando o IWDBListbox1:

Selecione o IWDBListbox1, acesse o Objetc Inspector (F11). Associe IWDBListbox1, através da propriedade DataSource, ao DsProdutos. Defina a coluna (campo) que será associada ao IWDBListbox1 na propriedade “DataField”. Selecione “Discontinued”. Este campo indica se o produpo foi descontinuado ou não.


Definindo os valores no DBListBox:

Na propriedade “Items”, click para acessar o editor. Digite “True”, em seguida, na linha de baixo, digite “False”. Como o CdsProdutosDiscontinued é um “TbooleanField” isso vai funcionar.





Na propriedade ItemsHaveValues, Selecione “False”.

Para a propriedade Height digite 41.


Conectando o IWDBNavigator:


Selecione o IWDBNavigator1, acesse o Objetc Inspector (F11). Associe IWDBNavigator1, através da propriedade DataSource, ao DsProdutos.


String connection no ADOConnection


Provider=SQLOLEDB.1;Persist Security Info=True;User ID=sa;Initial Catalog=Northwind;Use Procedure for Prepare=1;Auto Translate=True;Packet Size=4096;Workstation ID=Landjah;Use Encryption for Data=False;Tag with column collation when possible=False

Conectei no SQL Server, usarei as tabelas Categories e Products do banco “Northwind”. Ele é o banco padrão do SQL Server para exemplo e estudo.

Comando SQL nos Ads:
AdsCategorias
Propriedade CommandText:
select CategoryID, CategoryName from Categories

AdsProdutos
Propriedade CommandText:
select * from Products


Codificando o evento OnClick do IWButton1:
procedure TTADo.IWButton1Click(Sender: TObject);
begin
CdsCategotias.Open;
CdsProdutos.Open;
end;


Podemos também trabalhar com o evento OnCreate do Form.
procedure TTADo.IWAppFormCreate(Sender: TObject);
begin
IWButton1Click(IWButton1);
end;

Agora você pode executar a aplicação e testar, navegando, alterando, inserindo, ou excluindo dados.


Veja a imagem ilustrando as conexões data ware no Delphi:



Para rodar o exemplo pressione F9, quando aparecer o diálogo referente ao servidor, pressione F9 novamente.



No IWCheckBox1, defina para a propriedade Caption = 'Editar Produto'. No evento OnClick programe:
procedure TTADo.IWCheckBox1Click(Sender: TObject);
begin
if IWCheckBox1.Checked then
CdsProdutos.Edit;
end;


Agora no evento AfterPost do CdsProdutos sicronise o comportamento do IWCheckBox:
procedure TTADo.CdsProdutosAfterPost(DataSet: TDataSet);
begin
IWCheckBox1.Checked := False;
end;


Testando o comando do IWCheckBox



Salvando as alterações realizadas




Sucesso!

Artigo completo (View Full Post)

quarta-feira, 10 de dezembro de 2008

3G Oi - Testando

Não é propaganda da Oi! Ok?
Acho importante registrar para os amigos que até aqui tudo está ok, afinal isso é do interesse de todos.
Estou usando o 3G da Oi (1 Mb) tem alguns dias. Por enquanto está funcionado mto bem.
Naveguei no You Tube, tranqüilo carregou os vídeos com poucas interrupções. Carregou o Estação Zn rapidão, ouvi os Zn Ringtones (sem legs). Postei tranqüilão, muito mais rápido que minha antiga conexão (TIM Móvel – não 3G).
Localidades onde usei o 3G da Oi:

Centro: Funcionou bem, registrei 500 Kbps, aproximadamente.
Botafogo: Funcionou bem, registrei 700 Kbps, aproximadamente (Dentro do Outback).
Méier: Funcionou bem, registrei 800 Kbps, aproximadamente.

Ainda não usei profissionalmente, tipo acesso remoto, mais em breve esse teste será realizado.




Artigo completo (View Full Post)

segunda-feira, 22 de setembro de 2008

Java para Web no Netbeans 6 – Servlet, JSP & CSS

Java é uma linguagem de programação. Entretanto, quando nos referimos a Java como uma tecnologia estamos tratando de um grande conjunto composto por elementos distintos. Esses elementos de forma generalizada são: Padrões, frameworks e tecnologias. Esses três elementos combinados definem um outro elemento que são as arquiteturas.

Objetivo

Vamos construir um exemplo de aplicação Web onde experimentaremos de perto a complexidade de construir conteúdo dinâmico para Web. Conseqüentemente esbarraremos em algumas questões arquiteturais envolvendo tecnologia do lado cliente, e servidor. Veremos uma das soluções Java para este cenário.
Temos o arquivo Index.jsp, ele define a participação da tecnologia JSP na nossa arquitetura. Neste arquivo definiremos um formulário (objeto http form) que enviará dados para uma classe servlet a qual processará esses dados.

A tecnologia Java tem uma abordagem própria para desenvolvimento Web. Basicamente, quando você ouve falar em Java para Web invariavelmente escutará associado a esta idéia duas tecnologias: Servlet e JSP. Digo basicamente, porque as duas não são absolutas neste contexto. Existem outras, as quais vermos mais adiante, que cujo a utilização, quando feita adequadamente, pode oferecer para o desenvolver um ganho satisfatório.
A tecnologia Servlet desempenha um papel muito importante neste cenário, vamos neste artigo desenvolver um pequeno exemplo de uma aplicação Web em Java usando explicitamente a tecnologia Servlet. Meu principal objetivo e experimentar o Netbeans 6 para esse fim, durante esse processo pretendo tocar em pontos de importância básica pertinentes ou tema que escolhi inicialmente. Portanto, prossigamos:

Inicie um novo projeto Web no Netbeans 6 (Veja em “Um novo Projeto no Netbeans 6.”).




Entendendo um projeto Web Java

Veja na janela “Projects” (Project explorer vou chamar assim ...) , os diversos elementos que compõem o nosso projeto. Eles ficam organizados e dispostos numa estrutura hierarquizada de diretórios que são representados por uma Tree View a qual fornece acesso aos arquivos contidos por cada diretório.



O Diretório “Web Pages” é o principal, a raiz, de uma aplicação Java Web convencional. Contidos nele temos um arquivo index.jsp (que define a home page do site, por exemplo), além do diretório “WEB-INF” o qual contém o arquivo descritor de deploy (deployment descriptor), web.xml.

Configuration Files”, é o diretório onde ficam todos os arquivos referentes a configurações da aplicação web.

Source Packages”, velho conhecido, onde devem ficar todos os pacotes, classes Java e Servlets (obviamente, que serão criados durante o desenvolvimento da aplicação web).

Test Package”, para testes unitários.

As bibliotecas ficam em “Libraries”, exceto as que forem necessárias aos testes que devem ficar em “Tests Libraries” (por default as bibliotecas do Junit 3.8.2 e 4.1 já serão adicionadas nesta pasta).



Usando CSS

Vou criar um arquivo CSS o qual usarei neste exemplo. Para armazená-lo, vou criar um novo diretório dentro de “Web Pages”, a este chamarei de “ZnCss”. Com o botão direito do mouse, na treeview do project explorer, sobre a pasta “Web Pages” selecione New ► Folder, conforme ilustração abaixo:




O Netbeans, através do assistente vai auxiliar este trabalho. Em “Folder Name” digite o nome desejado para o novo diretório. Note que, você pode também definir a hierarquia desse novo diretório em “Parent Folder”. Para completar a criação do diretório click em “Finish”.



Para criar o arquivo CSS, selecione, com o botão direito do mouse no novo diretório, a opção New ►Other, para acessar o assistente. Em seguida, dentre as opções listadas, na categoria “Web”, selecione “Cascading Style Sheet”. Click em “Next” para continuar a criação do arquivo CSS.



Em “CSS File Name” digite o nome do arquivo: “ZnCSSlandjah”. Veja que “Location” e “Folder” já estão definidos em decorrência de termos selecionado o diretório “ZnCss”.



Click em “Finish” e seu arquivo será criado. Esse foi meu primeiro contato com o editor de CSS do Netbeans 6, gostei! Basta você digitar a classe, ou tag que deseja redefinir, e intuitivamente é possível usar os recursos da IDE para edição de CSS.
O Preview lhe permite em tempo de design ver o efeito do css que você está editando.

A seguir o código do meu css

/*
Document : ZnCSSlandjah
Created on : 22/09/2008, 10:59:57
Author : Gmotta Zn
Description:
Purpose of the stylesheet follows.
*/

div{
font-family: Cosmic Sans, Veranda,Tahoma;
font-size: 14px;
background-color: #330099;
color: #ccff99;
font-weight: bolder;
text-align: center;

}


Editando o arquivo Index.jsp

Quando iniciamos um projeto Web no Netbeans ele define no deployment descriptor qual o arquivo será executado quando o Glass Fish atender uma requisição cliente chamando a URL do seu serviço. Esse arquivo, por default é o Index.jsp. Você pode alterar isso no o arquivo “web.xml” (basta um duplo click sobre o arquivo, ou com o botão direito selecione “Open”), pela IDE na aba “Pages”.



Na tag “head” do arquivo “Index.jsp” vou linkar o CSS “ZnCSSlandjah.css”.


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF- 8">
<title>Estação ZN - Nova JSP Page</title>
<link href="ZnCss/ZnCSSlandjah.css" rel="stylesheet" type="text/css">


O próximo passo será adicionar um “form” para postar dados para efetuarmos um processamento qualquer no servidor. Na janela “Palhette” (provavelmente ela deve estar no lado direito da IDE), selecione em “HML Forms” um objeto “Form”, click sobre ele e arraste para um local, entre a abertura e o fechamento da tag “body”. Em seguida prossiga com o assistente.



Em “Action” vou digitar “ZnLandjha” (esse vai ser o nome do Servlet que criarei posteriormente), o “method” selecione "POST".



O Editor no Netbeans é sensacional, veja um code insigth para HTML muito bom.



Agora, o “body” da minha página jsp está assim: (indexJSP.txt)

<body>
<h2> Estação ZN - Servlets </h2>
<h3> GlassFish <h3>
<div>
www.estacaozn.blogspot.com
</div>
<br>

<form name="form1" action="ZnLandjha" method="POST">

</form>
</body>


OBS: Na tag "div" pretendo aplicar o efeito do CSS ...

Vou adicionar um objeto HTML “Table” na minha página aonde pretendo colocar os “inputs”. Depois de editar o código, digite conforme ilustrado abaixo:


<%--
Document : index
Created on : 18/09/2008, 03:25:39
Author : GMotta Zn
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Estação ZN - Nova JSP Page</title>
<link href="ZnCss/ZnCSSlandjah.css" rel="stylesheet"
type="text/css">

</head>
<body>
<h2> Estação ZN - Servlets </h2>
<h3> GlassFish <h3>
<div>
www.estacaozn.blogspot.com
</div>
<br>

<form name="form1" action="ZnLandjha" method="POST">
<div>
<table border="0" cellpadding="1">
<tbody>
<tr>
<td>
Digite o Nome:
</td>
<td>
<input type="text" name="znBla" value="Bla!"
size="32" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Ok Zn" name="btnEnviar"
/>
</td>
<td>
Netbeans 6 - Servlet, JSP & CSS
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>



Criando o Servlet

Com o botão direito do mouse no que eu chamo de “Project Explore”, selecione a opção: New ►Servlet




O Nome da Classe servlet vai ser “ZnLandjha”. Note que o assistente já define pra você o projeto (Project: AppWebServletsZN, não editável) e o diretório (Location: Source Pakcages) onde será criado o arquivo onde está defina a classe que vamos codificar. Ainda não definimos uma package para nosso projeto, isso deverá ser feito neste momento. Digite “ZnWebLandjahPkg” em Pakcage. Veja ilustração abaixo:



Clicando em “Next” você pode configurar a URL de chamada ao seu servlet mediante ao valor digitado em “URL Pattern(s):”. Todas as informações definidas precisam ser persistidas no “Deployment Descriptor”, o arquivo “web.xml”. Portanto, a opção “Add information to deployment descriptor” deve ficar selecionada. Logo, vou deixar tudo como está neste diálogo e finalizar aqui. Click em “Finish”.



Codificando o Servlet “ZnLandjha”

package ZnWebLandjahPkg;

import java.io.*;
import java.net.*;
import java.util.Iterator;
import javax.servlet.*;
import javax.servlet.http.*;

/**
* @author GMottaZn
*/
public class ZnLandjha extends HttpServlet {

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String znBla = request.getParameter("znBla");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet ZnLandjha</title>");
out.println("<link href=ZnCss/ZnCSSlandjah.css rel=stylesheet type=text/css>");
out.println("</head>");
out.println("<body>");
out.println("<h1>Servlet ZnLandjha at " + request.getContextPath
() + "</h1> <br>");
out.println("<h4> Você Digitou: " + znBla + "</h4> <br>");
out.println("<div> Ivertendo temos: " + inverterZn(znBla)+ "</div>");
out.println("</body>");
out.println("</html>");

} finally {
out.close();
}
}

protected String inverterZn(String znValue){
StringBuffer znAux = new StringBuffer(znValue);
znAux.reverse();
return znAux.toString();
};

// <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
/**
* Handles the HTTP <code>GET</code> method.
* @param request servlet request
* @param response servlet response
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}

/**
* Handles the HTTP <code>POST</code> method.
* @param request servlet request
* @param response servlet response
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}

/**
* Returns a short description of the servlet.
*/
public String getServletInfo() {
return "Short description";
}
// </editor-fold>
}


Até que em fim um pouco de código Java. Analisado o código acima:

Linha 1: referência ao pacote (package).

Linha 3 – 7: importação de bibliotecas.

Linha 9-11: Comentário para documentação.

Linha 12- 71: Codificação da classe “ZnLandjha”, que estende de “HttpServlet” (Superclasse para Servlet). A classe “HttpServlet” estende a classe javax.servlet.GenericServlet. Ela acrescenta os métodos “doXXXX” que são executados mediante as requisições “http”. “doGet”, “doPost”, “doPut”, “doDelete”, “doOption” e “doTrave”. Cada um desses métodos são chamados em resposta a um método http evocado. Exemplo: O método “doGet” é executado quando o Servlet recebe uma requisição (de uma página que submeteu um “form”) que foi enviada ao servidor web (por exemplo, o Glass Fish) usando o método http “GET”.




Linha 16: Recebendo do “Form” postado (do lado cliente) o valor do objeto “input” cujo nome é "znBla" (O qual foi definido no arquivo “Index.jsp”).

Linha 19-34: Dentro de um bloco protegido (try...), monta a página para saída dos valores processados pelo Servlet “ZnLandjha”.

Linha 28: Saída do valor processado pelo método protegido que codificamos “inverterZn”.

Linha 37-41: Método protected “inverterZn”, responsável pela inversão da string digitada pelo cliente. A inversão está sendo efetuada na linha 39, pela execução do método “reverse”. Na linha 40 uso o método “toString” para poder atribuir o valor de “znAux”, que é do tipo “StringBuffer”, para String e dessa forma posso retornar o valor invertido no método em questão.

Agora vamos fazer o deploy da nossa aplicação, com o botão direito sobre a raiz do projeto no “project explorer”, selecione “Undeploy and Deploy”.




Testando aplicação criada

Para testar basta pressionar F6, ou na barra de ferramentas click sobre o triângulo verde.



O browser vai ser executado ...



Digite alguma coisa na caixa de texto e submeta ...



O Servlet processou a requisição ...




Fontes deste artigo

Artigo completo (View Full Post)

 
BlogBlogs.Com.Br