Como fazer um atalho de legendas com Shift + F8 em AdvPL

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

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

Dan Atilio (Daniel Atilio)
Especialista em Engenharia de Software pela FIB. Entusiasta de soluções Open Source. E blogueiro nas horas vagas.

2 Responses

  1. Armando Neto disse:

    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.

Deixe uma resposta