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

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

C:Net31Exemplo02 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>
Veja que o método do form é POST
</LABEL> 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:Net31Exemplo02imagens) contém os
seguintes arquivos:

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

C:Net31Exemplo02

<HTML>
<head>
<link rel="stylesheet" href="COBOLfileCss.css">
<script language="javaScript">
Arquivo Css para configuração da
function primeira()
tabela (Item 2.5)
{
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>

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

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

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

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:NET31EXEMPLO02DADOS.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:Net31Exemplo02

CdNet31Exemplo02 <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.2cgi-bin os
seguintes arquivos:

Listview.exe c:Net31exemplo02debug
Cblrtss.dll C:Arquivos de programasMERANTNet ExpressBaseBIN

Crie uma pasta chamada COBOL dentro da pasta htdocs C:Arquivos de programas Apache
Software Foundation Apache2.2htdocsCOBOL e copie para dentro dela:

O arquivo formConsulta.html origem: cNet31exemplo02
O arquivo fileCss.css origem: c:Net31exemplo02
A pasta imagens origem: c:Net31exemplo02

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.

Livro

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

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

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (12)

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

Semelhante a Cobol Web com Net Express 3.1/4.0/5.x - Parte 2 (20)

Último

Último (8)

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