Delphi & JavaScript - IntraWeb

IntraWeb

Trata-se de um framework, desenvolvido pela Atozed, incorporado ao Delphi na versão 7. É uma suíte de desenvolvimento RAD (Rapid application development – Aplicação de desenvolvimento rápido) para web, na época em que foi lançada se apresentou no mercado, comparativamente com as demais tecnologias, extremamente poderosa. Por volta de 2004 e durante os anos seguintes, o IntraWeb fez do Delphi 7 um marco no desenvolvimento de aplicações sob o protocolo “http”.
Os componentes IW são extendidos da VCL tornando possível que o desenvolvimento com está tecnologia seja semelhante a um projeto desktop. Essa, na minha opinião foi uma característica importante do IntraWeb, visto que sua adoção por um profissional oriundo do ambiente “off-line” minimizou sensivelmente tanto o impacto, quanto a curva de aprendizagem dos novos conceitos concernentes ao ambiente web.
O IntraWeb permite, a partir de um form (web form), adicionar componentes, inclusive dataware, escrever códigos para os eventos dos mesmos e atribuir valores para suas propriedades (da mesma maneira que os desenvolvedores já faziam desde o Delphi 1). Pronto, eis o seu sistema ou site para Intranet, ou Internet! Tudo isso usando o boa e velha Delphi Language.
Esse framework ainda está presente nas novas versões do Delphi, contudo, ao que parece, são raros os projeto hoje que o utilizam. Acredito que a causa mais determinante para isso é o caráter fechado, proprietário, pois a Atozed não disponibilizou nem os fontes, nem mesmo uma documentação adequada do produto. Além disso tentou “arquitetar” um lance “mercadológico genial” de disponibilizar para venda versões supostamente mais estáveis e poderosas que ela havia incorporado ao Delphi. Não preciso gastar muitas linhas para descrever aonde ela chegou com essa estratégia genial.
Apesar disso, é possível conseguir em resultado bastante satisfatório usando o IntraWeb.

Javascript

“Linguagem de script, orientada a objetos, que permite a programação do lado cliente”.
O Javascript permite que haja processamento em resposta a interação do usuário com a página (no chamado “lado cliente”), sem a necessidade de remetê-la para ser processada no servidor. Isso se torna extremamente útil nos casos em que esse processamento não é exclusivamente necessário no servidor, visto que a dinâmica de requisição/resposta tem custos: o próprio processamento, que demanda do servidor recursos, e o fluxo na rede, que é um gargalo pro seu sistema. Por exemplo, a validação de valores digitados nas caixas de texto, como CPF, datas, valores nulos, e-mail e etc., são casos que podem, e devem, ser processados do lado cliente.

CSS

Cascading Style Sheets (Folhas de Estilo em Cascata): Permite controlar a aparência da página. Isso influencia diretamente o design do seu site ou aplicação web. Ao utilizar o CSS você pode especificar o estilo dos elementos que formatam a página (espaçamento, margens, tipo e tamanho de fonte) separadamente da estrutura dela (cabeçalhos de seção, títulos, corpo do texto e links). Essa separação da estrutura do conteúdo permite maior gerenciabilidade tornando, se necessária, qualquer mudança no estilo do site muito mais fácil e rápida.

DHTML

A Dynamic HTML foi projetada para que uma aplicação web possa ser construída de forma que grande parte de suas funcionalidades sejam executadas diretamente no lado cliente, ao invés do lado servidor. Ela faz as páginas web tornarem-se muito mais interativas fornecendo efeitos multimídia que incluem animação, áudio e vídeo. Ora, mas o Javascript não possui o mesmo objetivo? Então, o que é exatamente o DHTM? Basicamente a DHTML permite que os elementos do HTML possam ser tratados como objetos. Logo, torna possível manipular os valores dos atributos desses elementos como propriedades. A manipulação dessas propriedades é feita através do Javascript, ou qualquer outra linguagem de script como o JScript, ou VBScript, por exemplo. A DHTML da Microsoft é incompatível com a da Netscape, portanto, saiba que a utilização desta técnica pode lhe trazer problemas. Por isso é imprescindível que testes sejam realizados nos diferentes navegadores, pelo menos nos mais usados, se você optar por utilizar a DHTML.

Criando a plicação web para teste

Começaremos nosso primeiro exemplo criando um novo projeto IntraWeb no Delphi. Antes de Qualquer coisa crie um diretório para salvarmos nosso exemplo em: C:\Exemplo_1.

Agora podemos voltar ao Delphi, no menu "File" - "New" click em "Other". Em seguida, no repositório de objetos escolha, na aba IntraWeb, Stand Alone Aplication.

O próximo passo será salvar a aplicação iniciada em “c: Exemplo_1”.



Aperte “Ctrl + F12”, selecione IWUnit1 e click “OK” para chamarmos o form Intraweb.





Form IntraWeb (TWIForm)

O TIWForm é o componente IntraWeb similar ao TForm da VCL, através deste componente o Delphi gera páginas web. Nele podemos definir o estilo CSS que será usado para o design da página, também podemos programar scripts do lado cliente e desta forma extrair o máximo do paradigma web.

ExtraHeader

Começaremos pela propriedade do ExtraHeader do TIWForm, nela podemos adicionar qualquer tag com código dentro da seção Head (que é definida pela tag “<head> </head>” de uma página HTML). O browser interpreta o conteúdo da tag head antes da tag body , deste modo podemos tanto escrever programas em Javascript para serem executados imediatamente no momento em que a página é renderisada pelo navegador, quanto podemos codificar funções que serão executadas mediante uma determinada interação do usuário com o browser. Você pode usar o editor do
DreamWeaver para lhe auxiliar a criar as funções em Javascript.

O código na anterior deve ser colocado na propriedade ExtraHead do TformMain. Para isso, com o TIWForm selecionado, vá ao Object inspector e click na propriedade ExtraHeader.



StringList Editor



Segue o código:

<script type="text/javascript">
  document.writeln("<center> <h1> <font face= 'Australian Sunrise' color=#220099> Javascript no Itraweb - powered by Delphi</font> </h1> </center>");
  var shadowDirection = 0;
  function iniciar(){
    window.setInterval("demostrar()",500); 
   }

  function demostrar(){
    shadowText.filters("shadow").direction = (shadowDirection % 360); 
    shadowDirection += 15;
    }
</script>

Para executarmos a função iniciar adicionaremos ao Form um TIWButton e um IWLabel da palheta IWStandard. Na tabela a baixo veja como configura-los.



Configuraçao dos Componentes

TIWButton: Name = BtConfirmar, Top = 360, Left = 350, Caption = Confirmar

TIWLabel: RawText = True, Caption = <h2 id = "shadowText" style= "position:absolute; top:120px; left:340px; filter: shadow(direction = 0, color = #220099)"><font face="Australian Sunrise" color="#FF6633"> DHTM - Dynamic HTML </font></h2>


Depois de adicionar o código que vai definir o texto animado na propriedade caption do IWLabel1 a aparência fo IWForm ficará semelhante a figura abaixo:



Codifique a unit “IWUnit1” conforma exemplificado abaixo:

Crie uma procedure na seção public para validar campos vazios em JavaScript. Essa função criará uma critica dinamicamente para cada componente que possuir um valor na propriedade FriendlyName iniciando por “v_”.

procedure TformMain.Validacao;
var i: Integer;
 Funcoes: array of TStringList;
 EditAtual: TIWCustomEdit;
begin
{esta funçao monta o java script na página. Lembre-se de, no FriendlyName do Edite ou memo, iniciar com "V_" .
Depois no evento scripEvent do IWbutton chamar a função   ValidaEmBranco() }
 Self.JavaScript.Add('function ValidaEmBranco() {');
 SetLength(Funcoes, Self.ComponentCount);
 for i := 0 to Pred(Self.ComponentCount) do
 begin
   if (Self.Components[i] is TIWCustomEdit) then
   begin
     EditAtual := TIWCustomEdit(Self.Components[i]);
     if Copy(EditAtual.FriendlyName, 1, 2) = 'v_' then
     begin
       Funcoes[EditAtual.TabOrder] := TStringList.Create;
       with Funcoes[EditAtual.TabOrder] do
       begin
         Add(#13#10);
         Add('  if (document.forms[0].' + UpperCase(EditAtual.Name) + '.value == "") {');
         Add('    alert("Preencha o campo ' + Copy(EditAtual.FriendlyName, 3,
           Length(EditAtual.FriendlyName)) + '");');
         Add('    document.forms[0].' + UpperCase(EditAtual.Name) + '.select();');
         Add('    return false;');
         Add('  }');
       end;
     end;
   end
 end;

 for i := 0 to Pred(Length(Funcoes)) do
   if not (Funcoes[i] = nil) then
     Self.JavaScript.Add(Funcoes[i].Text);

 Self.JavaScript.Add('    return true;');
 Self.JavaScript.Add('}');
end;

No evento "OnCreate" do formMain digite:

procedure TformMain.IWAppFormCreate(Sender: TObject);
begin
 Validacao;
end;
 

Na propriedade ExtraTagParams do BtConfirmar digite:

onClick=ValidaEmBranco();

Adicione ao formMain um TIWEdit da palheta IWStandard. Apague o valor da propriedade Text, em seguida altere o valor da propriedade "FriendlyName" para v_IWEdit1. Para que nossa função para efetuar a crítica conforme espera a procedue "Validacao" que criamos anteriormente.

Para executar a plicação basta apertar o F9, ou no menu "Run" selecionar "Run".