Você está na página 1de 16

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.

terá duas páginas, uma de entrada e uma de saída gerada pelo CGI COBOL. Exemplos abaixo.

Figura 1.0 - Página entrada

terá duas páginas, uma de entrada e uma de saída gerada pelo CGI COBOL. Exemplos abaixo.

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>

Veja que o método do form é POST e a action=/CGI-bin/listview.exe

<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:

2.2 – Edite o arquivo cabec.html conforme código HTML abaixo e salve-o na pasta C:\Net31\Exemplo02

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()

{

Arquivo Css para configuração da tabela (Item 2.5)

var d = document.form; d.hiddenAcao.value="PRIMEIRA"; d.submit();

}

function anterior()

{

var d = document.form; d.hiddenAcao.value="ANTERIOR"; d.submit();

}

function proxima()

{

var d = document.form; d.hiddenAcao.value="PROXIMA";

d.submit();

}

function ultima()

{

var d = document.form; 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>

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.

serão utilizados pelo CGI COBOL para o start no arquivo. } será executada a função Java

} 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.

Ao clicar no ícone de navegação { Próxima página

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)

negócios Abra o NE e crie um novo projeto (Empty Project) Crie um novo programa File

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 move f-hiddenQtdeLin to f-scrQtdeLinha perform proxima-pagina perform close-file

to f-hiddenNomFim f-scrNome

when "PROXIMA"

*> próxima página

perform open-file perform proxima-pagina 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 proxima-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 to cod-cli

move zeros move f-scrNome

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.

to nome-cli

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

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 String "Nenhum registro encontrado"

delimited by size into wMsg perform MSG-ERROR Exit paragraph End-Start 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.

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

Pagina-anterior. move f-hiddenNomIni to nome-cli move f-hiddenCodIni to cod-cli Start CLIENTES key is <= splitKey Invalid key String "Nenhum registro encontrado" delimited by size into wMsg perform MSG-ERROR Exit paragraph End-start move 0 to c-lin f-hiddenCodFim set endOfFile to FALSE Perform until endOfFile or c-Lin > f-hiddenQtdeLin Read CLIENTES previous At End set endOfFile to TRUE Not At End add 1 to c-lin if f-hiddenCodFim = 0 move cod-cli to f-hiddenCodFim move nome-cli to f-hiddenNomFim

end-if move nome-cli to f-hiddenNomIni move cod-cli to f-hiddenCodIni End-Read End-perform Exit paragraph.

*---------

ReadNext. move f-hiddenNomIni to nome-cli move f-hiddenCodIni to cod-cli Start CLIENTES key is >= 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.

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

Ultima-pagina. move high-value to nome-cli move 99999 to cod-cli Start CLIENTES key is < splitKey Invalid key String "Nenhum registro encontrado" delimited by size into wMsg perform MSG-ERROR exit paragraph End-start move 0 to c-lin move 0 to f-hiddenCodIni set endOfFile to FALSE Perform until endOfFile or c-Lin > f-hiddenQtdeLin Read CLIENTES previous 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 move nome-cli to f-hiddenNomFim move cod-cli to f-hiddenCodFim End-Read End-perform Exit paragraph.

*----------

open-file. open input clientes if not fs-ok String "Erro: " status-2 " na abertura do arquivo" delimited by size into wMsg 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 '<A href="/cgi-bin/cadastro.exe?scrCodigo=' cod-cli '&scrAcao='"INCLUIR"'">' '<img src="/cobol/imagens/add.png"width="16"' 'height="16" border="0"></A>' into lnkIncluir end-string

*--- Link Deletar initialize lnkDeletar string '<A href="/cgi-bin/cadastro.exe?scrCodigo=' cod-cli '&scrAcao='"DELETAR"'">' '<img src="/cobol/imagens/delete.png"width="16"' 'height="16" border="0"></A>' 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

OPÇÃO (A): Usando a IDE do Net Express
OPÇÃO (A): Usando a IDE do Net Express
OPÇÃO (A): Usando a IDE do Net Express
EXE gerado é hora de configurar o Animate , mas antes, é preciso alterar a

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

. Altere para 8686, por exemplo. Menu / Options / Project Carregue o SOLO Menu /

Carregue o SOLO Menu / Tools / Solo

O ícone aparecerá na bandeja do Windows

/ Tools / Solo O ícone aparecerá na bandeja do Windows Dê um duplo Clique e

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

Configurando o Animate Menu / Animate / Settings

Configurando o Animate Menu / Animate / Settings Na caixa de texto Start Animating at informe:

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

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

ou F5 para executar

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

OPÇÃO (B):

Através do prompt de comando do Net Express

OPÇÃO (B): Através do prompt de comando do Net Express Após abrir a janela, vá para

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

Cbllink – bfm listview.cbl Executando no WebServer SOLO Abra o browser e digite na URL o

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

8686 é o número da porta. Executando no WebServer Apache Copie para a pasta seguintes arquivos:

Copie para a pasta seguintes arquivos:

C:\Arquivos de programas \ Apache Software Foundation \ Apache2.2\cgi-bin

os

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
Na terceira e última parte, será criado o cadastro.cbl para execução das ações Incluir, Alterar

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.

Até a próxima. Livro http://www.agbook.com.br/book/34170--Cobol_Web Comentários e sugestões borgesaltair@hotmail.com
Livro
Livro

Comentários e sugestões borgesaltair@hotmail.com

2011