Hoje vou mostrar como montar uma legenda customizada em AdvPL e acionar via Shift + F8.
Muitas das vezes, criamos telas e relatórios, e mesmo documentando em word / pdf, o cliente quer alguma coisa mais simples e fácil.
Pensando nisso, criei uma ferramenta simples, que ao pressionar Shift+F8, ele mostra uma página conforme imagem abaixo:
Tela com Shift+F8
Agora vamos lá.
- Primeiro via AdvPL, vamos criar a chamada do Shift+F8 no ponto de entrada AfterLogin, chamando a função zLegend
User Function AfterLogin()
SetKey(K_SH_F8, { || u_zLegend() }) //Shift + F8
Return
- Agora, vamos criar a User Function zLegend, chamando o arquivo html, dentro da Protheus Data
//Bibliotecas
#Include "Totvs.ch"
/*/{Protheus.doc} zLegend
Funcao para ver legendas de rotinas da Gtex
@type Function
@author Atilio
@since 10/03/2020
@version 1.0
/*/
User Function zLegend()
Local aArea := GetArea()
Local cUrl := "file://///SERVIDOR/totvs/Protheus_Data/x_legenda/legendas.html"
//Tamanho da janela
Private aTamanho := MsAdvSize()
Private nJanLarg := aTamanho[5]
Private nJanAltu := aTamanho[6]
//Navegador Internet
Private oWebChannel
Private nPort
Private oWebEngine
DEFINE DIALOG oDlg TITLE "Legendas" FROM 000,000 TO nJanAltu,nJanLarg PIXEL
// Prepara o conector WebSocket
oWebChannel := TWebChannel():New()
nPort := oWebChannel::connect()
// Cria componente
oWebEngine := TWebEngine():New(oDlg, 0, 0, 100, 100,, nPort)
//oWebEngine:bLoadFinished := {|self,url| fRodaScript(url) }
oWebEngine:navigate(cUrl)
oWebEngine:Align := CONTROL_ALIGN_ALLCLIENT
ACTIVATE DIALOG oDlg CENTERED
RestArea(aArea)
Return
- Feito isso, agora vamos criar uma página em html, e colocar dentro da Protheus Data no mesmo caminho configurado no passo 2
<html> <head> <title>Legendas Protheus</title> <link rel="stylesheet" href="style.css"> </head> <body> <h3>Programas:</h3> <ul> <li><a href="#zTela01"><strong>Compras por Fornecedor Automático (por e-Mail)</strong> / <i>zTela01</i></a></li> </ul> <hr> <h3 id="zTela01">Tela de Cadastro de Ligações / <i>zTela01</i></h3> <table width="100%" id="legend"> <thead> <th width="25%">Descrição</th> <th width="75%">Observação</th> </thead> <tbody> <tr> <td>Símbolo Verde</td> <td>Ligação efetuada dentro do prazo</td> </tr> <tr> <td>Símbolo Vermelho</td> <td>Ligação efetuada fora do prazo</td> </tr> <tr> <td>Símbolo Preto</td> <td>Ligação que foi feita sem sucesso</td> </tr> <tr> <td>Símbolo Branco</td> <td>Ligação que foi feita, e será retornada em breve</td> </tr> </tbody> </table> <ul> <li><a href="#zTela02"><strong>Compras por Fornecedor Automático (por e-Mail)</strong> / <i>zTela02</i></a></li> </ul> <hr> <h3 id="zTela02">Tela de Cadastro de Ligações / <i>zTela02</i></h3> <table width="100%" id="legend"> <thead> <th width="25%">Descrição</th> <th width="75%">Observação</th> </thead> <tbody> <tr> <td>Símbolo Verde</td> <td>Ligação efetuada dentro do prazo</td> </tr> <tr> <td>Símbolo Vermelho</td> <td>Ligação efetuada fora do prazo</td> </tr> <tr> <td>Símbolo Preto</td> <td>Ligação que foi feita sem sucesso</td> </tr> <tr> <td>Símbolo Branco</td> <td>Ligação que foi feita, e será retornada em breve</td> </tr> </tbody> </table> </body> </html>
- Para deixar um pouco mais bonito e zebrado, vamos editar a folha de estilos
#legend {
border-collapse: collapse;
width: 100%;
}
#legend td, #legend th {
border: 1px solid #ddd;
padding: 8px;
}
#legend tr:nth-child(even){background-color: #f2f2f2;}
#legend tr:hover {background-color: #ddd;}
#legend th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #0F66EE;
color: white;
}
/* unvisited link */
a:link {
color: #0F66EE;
}
/* visited link */
a:visited {
color: #0F66EE;
}
/* mouse over link */
a:hover {
color: #0F66EE;
}
/* selected link */
a:active {
color: #0F66EE;
}
Bom pessoal, por hoje é só.
Abraços e até a próxima.
Muito bom esta personalização.
Há algum tempo já estava procurando uma forma de mostrar um help para as personalizações.
Acredito que vou adotar esta solução aqui na empresa.
Obrigado.
Eu que agradeço pelo comentário Armando.
Grande abraço jovem.