Scribd Logo
Importer

Bienvenue sur Scribd !

  • CobolWeb Com Net Express 3.1 - Parte 2

    Transféré par

    Altair Borges
    183 vues16 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    183 vues16 pages

    CobolWeb Com Net Express 3.1 - Parte 2

    Transféré par

    Altair Borges

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 16

    Cobol Web com Net Express 3.

    1
    Altair Borges

    Parte 2 - ListView com paginao, Link dinmico e Css


    Conforme prometido no tutorial parte 1, vou mostrar como criar uma listview com paginao, link dinmico e recursos Css. O NE 3.1 ser usado apenas para escrever as regras de negcios e debugar. A interface ficar mais uma vez a cargo do Dreamweaver. Quer usar outra IDE? Fique a vontade. Este projeto ter duas pginas, uma de entrada e uma de sada gerada pelo CGI COBOL. Exemplos abaixo.

    Figura 1.0 - Pgina entrada

    Figura 1.1 - Pgina de saida gerada pelo programa CGI COBOL

    1 Passo Criar a pgina de entrada


    Crie a pasta C:\Net31\Exemplo02 2.2 Edite o arquivo formConsulta.html conforme cdigo HTML abaixo e salve-o na pasta C:\Net31\Exemplo02 Dica: Use o (ctrl-c + ctrl-v) para copiar os cdigos 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">Aplicao Web com Net Express 3.1 </P> <P class="style5"><span class="style4">Exemplo 02</span> <span class="style3">Consulta com paginao </span>(ListView) </P> <FORM style="BORDER-BOTTOM: double; BORDER-LEFT: double; BACKGROUND-COLOR: #ffffcc; BORDERTOP: double; BORDER-RIGHT: double" method=post name=form1 action=/cgi-bin/listview.exe> <LABEL><br> Veja que o mtodo 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 pgina:</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 cdigo HTML da listview importante definir as imagens que sero utilizadas na pgina. Neste exemplo, a pasta imagens (C:\Net31\Exemplo02\imagens) contm os seguintes arquivos:

    2.2 Edite o arquivo cabec.html conforme cdigo HTML abaixo e salve-o na pasta C:\Net31\Exemplo02 <HTML> <head> <link rel="stylesheet" href="\COBOL\fileCss.css"> <script language="javaScript"> Arquivo Css para configurao da function primeira() 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"> Aplicao Web com Net Express 3.1 - Parte 2 <br> ListView com paginao, Hiperlink e Css </caption> <TR bgColor=#FFFFFF> <Th ALIGN=LEFT><div align="center">Cdigo</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">Aes</div></Th> </TR>

    Observe que falta o fechamento das tags </tabela>, </form> e </html>. Isto ser realizado no arquivo rodape.html. O conceito de pgina dinmica o mesmo de um relatrio. Voc escreve o cabealho, l o arquivo para imprimir as linhas de detalhes e por ltimo imprime o rodap. 2.3 - Edite o arquivo detalhe.html conforme cdigo 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 (:) so campos definidos na working-storage section e na FD do programa listview.cbl. :corfundo :cod-cli :cidade-cli :cep-cli :uf-cli :lnkEditar :lnkDeletar :lnkIncluir Cor da linha da tabela Cdigo do cliente Cidade do cliente Cep do cliente Unidade Federativa Link para edio Link para excluso Link para incluso

    2.4 - Edite o arquivo rodape.html conforme cdigo 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="Pgina inicial" onclick="primeira()" /></div> </td> <td><div align="center"><img src="/cobol/imagens/left.png" width="48" height="48" border="0" title="Pgina anterior" onclick="anterior()" /></div></td> <td><div align="center"><img src="/cobol/imagens/right.png" width="48" height="48" border="0" title="Prxima pgina" onClick="proxima()" /></div></td> <td><div align="left"><img src="/cobol/imagens/last.png" width="48" height="48" border="0" title="ltima pgina" 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 navegao e 6 Hidden Fields. Os objetos hidden sero utilizados para armazenar as seguintes informaes da tabela: Cdigo e nome inicial, cdigo

    e nome final bem como a quantidade de linhas e a ao a ser executada. O contedo dos objetos hiddenCodIni, hiddenCodFim, hiddenNomIni e hiddenNomFim sero utilizados pelo CGI COBOL para o start no arquivo. Ao clicar no cone de navegao { Prxima pgina } ser executada a funo 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 cdigo 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 pgina dinmica est pronta e ser montada pela CGI COBOL.

    3 Passo Regras de negcios


    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 cdigo: $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 03 c-Lin 03 lnkEditar 03 lnkIncluir 03 lnkDeletar cores. 03 corFundo 03 cor1 03 cor2 pic pic pic pic pic x(60). 9(05). x(160). x(160). x(160).

    01

    pic x(07) value spaces. pic x(07) value "#e5f1f4". 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" *> pgina 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" *> prxima pgina perform open-file perform proxima-pagina perform close-file when "ANTERIOR" *> pgina anterior perform open-file perform pagina-anterior perform readnext perform close-file when "ULTIMA" *> ltima pgina 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 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 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 prximo passo ser gerar o EXE e isto pode ser feito de duas formas: Usando a IDE do NE ou atravs do Prompt de comando.

    OPO (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 padro 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 configurao 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 tambm a opo Wait for animatable attachment e clique em ok Pressione F11 para animar ou F5 para executar

    OPO (B): Atravs do prompt de comando do Net Express

    Aps abrir a janela, v para a pasta C:\Net31\Exemplo02 Cd\Net31\Exemplo02 <Enter> Comando de compilao:

    Cbllink bfm listview.cbl

    Executando no WebServer SOLO


    Abra o browser e digite na URL o seguinte endereo: http://127.0.0.1:8686/COBOL/formConsulta.html Onde 8686 o nmero 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 endereo: http://localhost/COBOL/formConsulta.html O resultado dever ser este:

    Na terceira e ltima parte, ser criado o cadastro.cbl para execuo das aes Incluir, Alterar e Excluir da listview.

    At a prxima.

    Livro

    http://www.agbook.com.br/book/34170--Cobol_Web
    Comentrios e sugestes borgesaltair@hotmail.com

    2011

    Vous aimerez peut-être aussi