Cobol Web com Net Express 3.1/4.0/5.x - Parte 2

Cobol Web com Net Express 3.1

Altair Borges

Parte 2 - ListView com paginação, Link dinâmico e Css

Conforme prometido no tutorial parte 1, vou mostrar como criar uma listview com paginação,

link dinâmico e recursos Css. O NE 3.1 será usado apenas para escrever as regras de negócios e

debugar. A interface ficará mais uma vez a cargo do Dreamweaver. Quer usar outra IDE? Fique a

vontade. Este projeto terá duas páginas, uma de entrada e uma de saída gerada pelo CGI COBOL.

Exemplos abaixo.

Figura 1.0 - Página entrada

Figura 1.1 - Página de saida gerada pelo programa CGI COBOL

1º Passo – Criar a página de entrada

Crie a pasta C:\Net31\Exemplo02

2.2 – Edite o arquivo formConsulta.html conforme código HTML abaixo e salve-o na pasta

C:\Net31\Exemplo02 Dica: Use o (ctrl-c + ctrl-v) para copiar os códigos deste tutorial.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD>

<META content="text/html; charset=windows-1252" http-equiv=Content-Type>

<STYLE type=text/css>

.style2 {color: #0000FF}

.style3 {color: #0066FF}

.style4 {color: #FF6633}

.style5 {

font-family: "Courier New", Courier, monospace;

font-weight: bold;

}

.style6 {

color: #FF0000;

font-weight: bold;

}

</STYLE>

<META name=GENERATOR content="MSHTML 8.00.6001.19120"></HEAD>

<BODY>

<P class="style5">Aplicação Web com Net Express 3.1 </P>

<P class="style5"><span class="style4">Exemplo 02</span> <span

class="style3">Consulta com paginação </span>(ListView) </P>

<FORM

style="BORDER-BOTTOM: double; BORDER-LEFT: double; BACKGROUND-COLOR: #ffffcc; BORDER-

TOP: double; BORDER-RIGHT: double"

method=post name=form1 action=/cgi-bin/listview.exe>

<LABEL><br>

</LABEL>

<table width="793">

<tr>

<td scope="col"><div align="right">Informe o nome para pesquisa:</div></td>

<th scope="col"><div align="left">

<INPUT

name=scrNome id=scrNome style="WIDTH: 501px; HEIGHT: 22px" size=40 maxLength=40>

</div></th>

</tr>

<tr>

<td><div align="right">Quantos registro por página:</div></td>

<td><div align="left">

<INPUT style="WIDTH: 50px; HEIGHT: 22px" id=scrQtdeLinha maxLength=5 size=5

name=scrQtdeLinha>

</div></td>

</tr>

</table>

<P><LABEL><INPUT value=Submit type=submit name=Submit> </LABEL></P>

<P>Mensagem de retorno: <span class="style6">:wMsg</span></P>

</FORM>

</BODY>

</HTML>

2º Passo – Criar a listview

2.1 – Antes de editar o código HTML da listview é importante definir as imagens que serão utilizadas

na página. Neste exemplo, a pasta imagens (C:\Net31\Exemplo02\imagens) contém os

seguintes arquivos:

Veja que o método do form é POST

e a action=/CGI-bin/listview.exe

2.2 – Edite o arquivo cabec.html conforme código HTML abaixo e salve-o na pasta

C:\Net31\Exemplo02

<HTML>

<head>

<link rel="stylesheet" href="\COBOL\fileCss.css">

<script language="javaScript">

function primeira()

{

var d = document.form;

d.hiddenAcao.value="PRIMEIRA";

d.submit();

}

function anterior()

{


d.hiddenAcao.value="ANTERIOR";

d.submit();

}

function proxima()

{


d.hiddenAcao.value="PROXIMA";

d.submit();

}

function ultima()

{


d.hiddenAcao.value="ULTIMA";

d.submit();

}

</script>

</head>

<FORM method=post name=form action=/cgi-bin/listview.exe>

<TABLE>

<caption style="background-color:#FFCC66">

Aplicação Web com Net Express 3.1 - Parte 2 <br>

ListView com paginação, Hiperlink e Css

</caption>

<TR bgColor=#FFFFFF>

<Th ALIGN=LEFT><div align="center">Código</div></Th>

<Th ALIGN=CENTER><div align="center">Nome</div></Th>

<Th ALIGN=CENTER><div align="center">Cidade</div></Th>

<Th ALIGN=CENTER><div align="center">Cep</div></Th>

<Th ALIGN=CENTER><div align="center">Uf</div></Th>

<Th COLSPAN="2" ALIGN=CENTER><div align="center">Ações</div></Th>

</TR>

Arquivo Css para configuração da

tabela (Item 2.5)

Observe que falta o fechamento das tags </tabela>, </form> e </html>. Isto será realizado

no arquivo rodape.html. O conceito de página dinâmica é o mesmo de um relatório. Você escreve o

cabeçalho, lê o arquivo para imprimir as linhas de detalhes e por último imprime o rodapé.

2.3 - Edite o arquivo detalhe.html conforme código HTML abaixo e salve-o na pasta

C:\Net31\Exemplo02

<tr bgcolor=:corfundo>

<td align=center>:cod-cli</td>

<td>:nome-cli</td>

<td>:cidade-cli</td>

<td align=center>:cep-cli</td>

<td align=center>:uf-cli</td>

<td align="center">:lnkEditar :lnkDeletar :lnkIncluir</td>

</tr>

Os textos precedidos de dois pontos (:) são campos definidos na working-storage section e

na FD do programa listview.cbl.

:corfundo Cor da linha da tabela

:cod-cli Código do cliente

:cidade-cli Cidade do cliente

:cep-cli Cep do cliente

:uf-cli Unidade Federativa

:lnkEditar Link para edição

:lnkDeletar Link para exclusão

:lnkIncluir Link para inclusão

2.4 - Edite o arquivo rodape.html conforme código HTML abaixo e salve-o na pasta

C:\Net31\Exemplo02

</TABLE>

<table background="#e5f1f4">

<tr>

<td><div align="right"><img src="/cobol/imagens/first.png" width="48" height="48"

border="0" title="Página inicial" onclick="primeira()"

/></div>

</td>

<td><div align="center"><img src="/cobol/imagens/left.png" width="48" height="48"

border="0" title="Página anterior" onclick="anterior()"

/></div></td>

<td><div align="center"><img src="/cobol/imagens/right.png" width="48"

height="48" border="0" title="Próxima página" onClick="proxima()"

/></div></td>

<td><div align="left"><img src="/cobol/imagens/last.png" width="48" height="48"

border="0" title="Última página" onclick="ultima()"/>

</div></td>

</table>

<p><LABEL></LABEL>

<input name=hiddenCodIni type=hidden id=hiddenCodIni value=":f-hiddenCodIni">

<input name=hiddenCodFim type=hidden id=hiddenCodFim value=":f-hiddenCodFim">

<input name=hiddenNomIni type=hidden id=hiddenNomIni value=":f-hiddenNomIni">

<input name=hiddenNomFim type=hidden id=hiddenNomFim value=":f-hiddenNomFim">

<input name=hiddenQtdeLin type=hidden id=hiddenQtdeLin value=":f-hiddenQtdeLin">

<input name=hiddenAcao id=hiddenAcao type=hidden value=":f-hiddenAcao">

</p>

</FORM>

</HTML>

Observe que no rodapé existem 4 ícones de navegação e 6 Hidden Fields. Os objetos hidden

serão utilizados para armazenar as seguintes informações da tabela: Código e nome inicial, código

e nome final bem como a quantidade de linhas e a ação a ser executada. O conteúdo dos objetos

hiddenCodIni, hiddenCodFim, hiddenNomIni e hiddenNomFim serão utilizados pelo CGI COBOL para

o start no arquivo.

Ao clicar no ícone de navegação – { Próxima página } será executada a função Java

script proxima() e o objeto hiddenAcao receberá o valor “PROXIMA” em seguida o comando

submit será executado chamando o programa listview.exe definido na action do form.

2.5 – Edite o arquivo fileCss.css conforme código CSS abaixo e salve-o na pasta

C:\Net31\Exemplo02

table, td{

font:85% 'Lucida Sans Unicode','sans-serif';

}

table{width:80%;

border-collapse:collapse;

margin:1em 0px;}

th, td{padding:.5em;

border:1px solid #fff;}

th{background:#328aa4 url/COBOL/(linha.gif) repeat-x;

color:#fff;}

A página dinâmica está pronta e será montada pela CGI COBOL.

3º Passo – Regras de negócios

Abra o NE e crie um novo projeto (Empty Project)

Crie um novo programa File / New / Program e salve-o como listview.cbl.

Ele deverá ter o seguinte código:

$set preprocess(htmlpp) stephtml endp

*-----------------------------------------------------------------

* Autor: Altair Borges / 2011

*-----------------------------------------------------------------

program-id. listview.

input-output section.

file-control.

select CLIENTES assign to "C:\NET31\EXEMPLO02\DADOS.DAT"

organization is indexed

access is dynamic

record key is cod-cli

lock mode is automatic

alternate record key is splitKey =

nome-cli cod-cli

file status is fs.

*-----------------------------------------------------------------

data division.

file section.

fd CLIENTES.

01 reg-cli.

03 cod-cli pic 9(5).

03 nome-cli pic x(40).

03 cidade-cli pic x(30).

03 cep-cli pic x(08).

03 uf-cli pic xx.

*-----------------------------------------------------------------

working-storage section.

01 HTMLForm is external-form.

03 f-scrNome pic x(40) identified by "scrNome".

03 f-scrQtdeLinha pic 9(05) identified by "scrQtdeLinha".

03 f-hiddenCodIni pic 9(05) identified by "hiddenCodIni".

03 f-hiddenCodFim pic 9(05) identified by "hiddenCodFim".

03 f-hiddenNomIni pic x(40) identified by "hiddenNomIni".

03 f-hiddenNomFim pic x(40) identified by "hiddenNomFim".

03 f-hiddenQtdeLin pic 9(05) identified by "hiddenQtdeLin".

03 f-hiddenAcao pic x(20) identified by "hiddenAcao".

01 camposAuxliares.

03 wMsg pic x(60).

03 c-Lin pic 9(05).

03 lnkEditar pic x(160).

03 lnkIncluir pic x(160).

03 lnkDeletar pic x(160).

01 cores.

03 corFundo pic x(07) value spaces.

03 cor1 pic x(07) value "#e5f1f4".

03 cor2 pic x(07) value "#E6E6FA".

01 fs.

88 fs-ok value "00" "02".

88 endOfFile value 'X' FALSE SPACE.

03 erro-code.

05 status-1 pic x.

05 status-2 pic x.

05 status-binario redefines status-2 pic 99 comp-x.

*-----------------------------------------------------------------

Procedure Division.

inicio.

initialize camposAuxliares

accept htmlform

call "cbl_toupper" using f-scrNome by value 40

call "cbl_toupper" using f-hiddenNomIni by value 40

call "cbl_toupper" using f-hiddenNomFim by value 40

evaluate f-hiddenAcao

when "PRIMEIRA" *> página inicial

perform open-file

move spaces to f-hiddenNomFim f-scrNome

move f-hiddenQtdeLin to f-scrQtdeLinha

perform proxima-pagina

perform close-file

when "PROXIMA" *> próxima página

perform open-file


perform close-file

when "ANTERIOR" *> página anterior

perform open-file

perform pagina-anterior

perform readnext

perform close-file

when "ULTIMA" *> última página

perform open-file

perform ultima-pagina


perform close-file

when other *> primeiro start

perform open-file

perform primeiro-Start

perform close-file

end-evaluate

perform close-file

Exit paragraph.

*---------------

Primeiro-Start.

move f-scrQtdeLinha to f-hiddenQtdeLin

move zeros to cod-cli

move f-scrNome to nome-cli

Start CLIENTES key is not less than splitKey Invalid key

String "Nenhum registro encontrado"

delimited by size into wMsg

perform msg-error

Exit paragraph

End-Start

perform CABECALHO

move 0 to c-lin f-hiddenCodIni

set endOfFile to FALSE

Perform until endOfFile or c-Lin = f-hiddenQtdeLin

Read CLIENTES Next

At End

set endOfFile to TRUE

Not At End

add 1 to c-lin

if f-hiddenCodIni = 0

move cod-cli to f-hiddenCodIni

move nome-cli to f-hiddenNomIni

end-if

perform DETALHE

move nome-cli to f-hiddenNomFim

move cod-cli to f-hiddenCodFim

End-Read

End-perform

perform RODAPE

Exit paragraph.

*---------------

Proxima-pagina.

move f-hiddenNomFim to f-scrNome

move f-hiddenQtdeLin to f-scrQtdeLinha

move f-hiddenCodFim to cod-cli

move f-hiddenNomFim to nome-cli

Start CLIENTES key is > splitKey

Invalid key

move f-hiddenCodIni to cod-cli

move f-hiddenNomIni to nome-cli

Start CLIENTES key is >= splitKey

Invalid key



perform MSG-ERROR

Exit paragraph

End-Start

End-start

perform CABECALHO




Read CLIENTES Next

At End


Not At End

add 1 to c-lin




end-if

perform DETALHE



End-Read

End-perform

perform RODAPE

Exit paragraph.

*----------------

Pagina-anterior.



Start CLIENTES key is <= splitKey Invalid key



perform MSG-ERROR

Exit paragraph

End-start

move 0 to c-lin f-hiddenCodFim


Perform until endOfFile or c-Lin > f-hiddenQtdeLin

Read CLIENTES previous

At End


Not At End

add 1 to c-lin

if f-hiddenCodFim = 0



end-if



End-Read

End-perform

Exit paragraph.

*---------

ReadNext.



Start CLIENTES key is >= splitKey invalid key



perform MSG-ERROR

exit paragraph

End-Start

perform CABECALHO




Read CLIENTES Next

At End


Not At End

add 1 to c-lin




end-if

perform DETALHE



End-Read

End-perform

perform RODAPE

exit paragraph.

*--------------

Ultima-pagina.

move high-value to nome-cli

move 99999 to cod-cli

Start CLIENTES key is < splitKey Invalid key



perform MSG-ERROR

exit paragraph

End-start

move 0 to c-lin move 0 to f-hiddenCodIni


Perform until endOfFile or c-Lin > f-hiddenQtdeLin

Read CLIENTES previous

At End


Not At End

add 1 to c-lin




end-if



End-Read

End-perform

Exit paragraph.

*----------

open-file.

open input clientes

if not fs-ok

String "Erro: " status-2 " na abertura do arquivo"


perform MSG-ERROR

end-if

Exit paragraph.

*-----------

close-file.

Close CLIENTES

Exit program

Stop run.

*----------

Msg-Error.

exec html

<html>

:wMsg

</html>

end-exec

Exit paragraph.

*----------

cabecalho.

exec html

copy "cabec.html".

end-exec

Exit paragraph.

*--------

detalhe.

if corFundo = spaces or corFundo = cor1

move cor2 to corFundo

else

move cor1 to corFundo

end-if

*--- Link Editar

initialize lnkEditar

string

'<A href="/cgi-bin/cadastro.exe?scrCodigo=' cod-cli

'&scrAcao='"EDITAR"'">'

'<img src="/cobol/imagens/edit.png"width="16"'

'height="16" border="0"></A>'

into lnkEditar

end-string

*--- Link Incluir

initialize lnkIncluir

string


'&scrAcao='"INCLUIR"'">'

'<img src="/cobol/imagens/add.png"width="16"'


into lnkIncluir

end-string

*--- Link Deletar

initialize lnkDeletar

string


'&scrAcao='"DELETAR"'">'

'<img src="/cobol/imagens/delete.png"width="16"'


into lnkDeletar

end-string

exec html

copy "detalhe.html".

end-exec

Exit paragraph.

*-------

rodape.

exec html

copy "rodape.html".

end-exec

Exit paragraph.

*-----------------------End---------------------------------------

O próximo passo será gerar o EXE e isto pode ser feito de duas formas: Usando a IDE do NE

ou através do Prompt de comando.

OPÇÃO (A): Usando a IDE do Net Express

EXE gerado é hora de configurar o Animate, mas antes, é preciso alterar a porta do

WebServer SOLO, pois ele por padrão usa a porta 80 a mesma que, neste caso, está sendo usada

pelo Apache. Altere para 8686, por exemplo. Menu / Options / Project

Carregue o SOLO Menu / Tools / Solo

O ícone aparecerá na bandeja do Windows

Dê um duplo Clique e verifique se a configuração está igual à figura abaixo:

Configurando o Animate Menu / Animate / Settings

Na caixa de texto Start Animating at informe: http://127.0.0.1/COBOL/formConsulta.html

Marque também a opção Wait for animatable attachment e clique em ok

Pressione F11 para animar ou F5 para executar

OPÇÃO (B): Através do prompt de comando do Net Express

Após abrir a janela, vá para a pasta C:\Net31\Exemplo02

Cd\Net31\Exemplo02 <Enter>

Comando de compilação:

Cbllink –bfm listview.cbl

Executando no WebServer SOLO

Abra o browser e digite na URL o seguinte endereço:

http://127.0.0.1:8686/COBOL/formConsulta.html Onde 8686 é o número da porta.

Executando no WebServer Apache

Copie para a pasta C:\Arquivos de programas \ Apache Software Foundation \ Apache2.2\cgi-bin os

seguintes arquivos:

Listview.exe c:\Net31\exemplo02\debug

Cblrtss.dll C:\Arquivos de programas\MERANT\Net Express\Base\BIN

Crie uma pasta chamada COBOL dentro da pasta htdocs C:\Arquivos de programas \ Apache

Software Foundation \ Apache2.2\htdocs\COBOL e copie para dentro dela:

O arquivo formConsulta.html origem: c\Net31\exemplo02

O arquivo fileCss.css origem: c:\Net31\exemplo02

A pasta imagens origem: c:\Net31\exemplo02

Abra o browser e digite na URL o seguinte endereço:

http://localhost/COBOL/formConsulta.html

O resultado deverá ser este:

Na terceira e última parte, será criado o cadastro.cbl para execução das ações Incluir,

Alterar e Excluir da listview.

Até a próxima.

http://www.agbook.com.br/book/34170--Cobol_Web

Comentários e sugestões [email protected]

Livro

2011


mailto:[email protected]



Cobol Web com Net Express 3.1/4.0/5.x - Parte 2

Technology

Transcript of Cobol Web com Net Express 3.1/4.0/5.x - Parte 2