Como buscar o CSS de algum objeto de uma tela em ADVPL

Você já precisou buscar ou o descobrir o CSS de um objeto em uma tela AdvPL? Saiba como no artigo de hoje.

Recentemente me perguntaram, como descobrir o CSS de um botão numa tela em AdvPL, pois bem jovens, é mais simples do que parece.

O que você precisa fazer, é pegar todos os componentes da tela, percorrer eles, e quando for do tipo botão, você usa o método GetCSS e grava em um diretório essa informação.

Por exemplo, no ponto de entrada AfterLogin, coloquei um atalho para executar a função u_zBuscaCSS, e abaixo é o código dela:

//Bibliotecas
#Include "TOTVS.ch"

/*/{Protheus.doc} User Function zBuscaCSS
Função que busca o CSS de um objeto na tela do Protheus
@type  Function
@author Atilio
@since 29/05/2021
@version version
@example Colocar no AfterLogin, por exemplo:
	User Function AfterLogin() 
		SetKey(K_SH_F7, { || u_zBuscaCSS() })    //Shift + F7
	Return
/*/

User Function zBuscaCSS()
    Local aArea := GetArea()
    Local nAtual
    Local cCSS
    Local cPasta := GetTempPath()
    Local cArquivo := "zBuscaCSS.txt"
    //Busca a tela e os objetos dentro dela
    Private nAtuPvt
    Private oPai       := GetWndDefault()
    Private aControles := oPai:aControls

    //Percorre todos os objetos da tela
    For nAtual := 1 To Len(aControles)
        nAtuPvt := nAtual

        //Se tiver algum atributo de ação e tiver o texto Confirmar
        If ValAtrib("aControles[nAtuPvt]:bAction") != "U" .And. aControles[nAtuPvt]:cCaption == "Confirmar"

            //Pega o CSS do objeto, grava ele em um arquivo txt, e abre o arquivo para visualizar
            cCSS := aControles[nAtuPvt]:GetCSS()
            MemoWrite(cPasta + cArquivo, cCSS)
            ShellExecute("OPEN", cArquivo, "", cPasta, 1)
        EndIf

    Next

    RestArea(aArea)
Return

Static Function ValAtrib(cVar)
Return Type(cVar)

A partir disso, ao executar esse atalho, será exibido na tela, o txt gerado:

Pegando o CSS

Dessa forma, nós podemos copiar esse trecho e colocar em nossas customizações. Por exemplo, se eu mudar através do método SetCSS, ele irá ter esse estilo gráfico. Abaixo o exemplo de como ficaria o código:

//Percorre todos os objetos da tela
    For nAtual := 1 To Len(aControles)
        nAtuPvt := nAtual

        //Se for do botão Outras Ações, irá definir o CSS
        If ValAtrib("aControles[nAtuPvt]:bAction") != "U" .And. aControles[nAtuPvt]:cCaption == "Outras Ações"
            aControles[nAtuPvt]:SetCSS("TButton { font: bold;     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #3DAFCC, stop: 1 #0D9CBF);    color: #FFFFFF;     border-width: 1px;     border-style: solid;     border-radius: 3px;     border-color: #369CB5; }TButton:focus {	padding:0px; outline-width:1px; outline-style:solid; outline-color: #51DAFC; outline-radius:3px; border-color:#369CB5;}TButton:hover {	color: #FFFFFF;     background-color : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #3DAFCC, stop: 1 #1188A6);    border-width: 1px;     border-style: solid;     border-radius: 3px;     border-color: #369CB5; }TButton:pressed {	color: #FFF;     background-color : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #1188A6, stop: 1 #3DAFCC);    border-width: 1px;     border-style: solid;     border-radius: 3px;     border-color: #369CB5; }TButton:disabled {	color: #FFFFFF;     background-color: #4CA0B5; }")
        EndIf
    Next

Eu fiz um teste para vocês visualizarem, alterando o estilo do botão Outras Ações, abaixo um print do original:

Exemplo da tela sem alteração

E abaixo um print da versão modificada com o css:

Exemplo do Outras Ações alterado

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. Súlivan disse:

    Como sempre, artigos incríveis.

Deixe uma resposta