Nesse vídeo demonstraremos a utilização da classe TButton, que serve para criar botões em uma dialog.
Abaixo o código fonte desenvolvido para o exemplo em vídeo acima:
//Bibliotecas
#Include "TOTVS.ch"
/*/{Protheus.doc} User Function zExe472
Classe para criar botões em uma Dialog
@type Function
@author Atilio
@since 03/04/2023
@see https://tdn.totvs.com/display/tec/TButton
@obs
**** Apoie nosso projeto, se inscreva em https://www.youtube.com/TerminalDeInformacao ****
/*/
User Function zExe472()
Local aArea := FWGetArea()
Local nCorFundo := RGB(238, 238, 238)
Local nJanAltura := 129
Local nJanLargur := 242
Local cJanTitulo := 'Exemplo TButton'
Local lDimPixels := .T.
Local lCentraliz := .T.
Local nObjLinha := 0
Local nObjColun := 0
Local nObjLargu := 0
Local nObjAltur := 0
Private cFontNome := 'Tahoma'
Private oFontPadrao := TFont():New(cFontNome, , -12)
Private oDialogPvt
Private bBlocoIni := {|| /*fSuaFuncao()*/ } //Aqui voce pode acionar funcoes customizadas que irao ser acionadas ao abrir a dialog
//objeto0
Private oBtnObj0
Private cBtnObj0 := 'Botão Normal'
Private bBtnObj0 := {|| MsgInfo('Coloque sua funcao aqui', 'Atencao objeto0')}
//objeto1
Private oBtnObj1
Private cBtnObj1 := 'Botão com CSS'
Private bBtnObj1 := {|| MsgInfo('Coloque sua funcao aqui', 'Atencao objeto1')}
//Cria a dialog
oDialogPvt := TDialog():New(0, 0, nJanAltura, nJanLargur, cJanTitulo, , , , , , nCorFundo, , , lDimPixels)
//objeto0 - usando a classe TButton
nObjLinha := 10
nObjColun := 10
nObjLargu := 100
nObjAltur := 15
oBtnObj0 := TButton():New(nObjLinha, nObjColun, cBtnObj0, oDialogPvt, bBtnObj0, nObjLargu, nObjAltur, , oFontPadrao, , lDimPixels)
//objeto1 - usando a classe TButton
nObjLinha := 35
nObjColun := 10
nObjLargu := 100
nObjAltur := 15
oBtnObj1 := TButton():New(nObjLinha, nObjColun, cBtnObj1, oDialogPvt, bBtnObj1, nObjLargu, nObjAltur, , oFontPadrao, , lDimPixels)
oBtnObj1: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; }")
//Ativa e exibe a janela
oDialogPvt:Activate(, , , lCentraliz, , , bBlocoIni)
FWRestArea(aArea)
Return
Bom pessoal, por hoje é só.
Abraços e até a próxima.
Utilizando o SmartClient fica 100%, mas não consigo aplicar utilizando o WebApp. Como ficaria nesse caso?
Bom dia Marco, tudo joia?
No caso, o que não está funcionando na 2410? Consegue contextualizar? Por exemplo, a cor do botão, o estilo CSS, a altura, o evento ao clicar, etc?
Ficamos no aguardo.
Tenha um ótimo e abençoado fim de semana.
Um forte abraço.
Bom dia Daniel. Estou bem obrigado!
E com o amigo?
Release do RPO: 12.1.2310
AppServer – Versão: 20.3.2.12
Não estou conseguindo alterar a cor de fundo do botão, a cor da Letra eu consigo alterar.
Rodando no SmartClient ele funciona sem problemas, mas quando eu rodo pelo WebApp ele não executa alteração do Background.
Eu criei uma User Function para padronizar a alteração de botões tentando VARIAS formas, (não está na versão final e LIMPA):
User Function AlteraBotao(oObj, cCor, lEnable,nFonte)
Default cCor := “AZUL”
Default lEnable := .T.
Default nFonte := 14
Local nTextColor := CLR_WHITE
Local nBackColor := CLR_BLUE
Local cBackground := “background-color: #369cb5” // AZUL padrão TOVS
Local cColor := “color: #1409dc” // AZUL padrão TOVS
Local oFonteBotao :=TFont():New(“Arial Narrow” ,,nFonte,,.T.,,,,,.F.,.F.)
cCor := UPPER(cCor)
// Define cores baseadas no nome
Do Case
Case cCor == “VERDE” .OR. cCor == “CSSBOTAO2”
nBackColor := CLR_GREEN
cBackground := “background-color: #0ca314”
cColor := “color: #1409dc”
Case cCor == “VERMELHO” .OR. cCor == “CSSBOTAO3”
nBackColor := CLR_RED
nTextColor := CLR_WHITE
cBackground := “background-color: #e50c0c”
cColor := “color: #ffffff”
Case cCor == “CINZA”
nBackColor := CLR_LIGHTGRAY
nTextColor := CLR_BLACK
cBackground := “background-color: #757575”
cColor := “color: #ffffff”
Case cCor == “AMARELO”
nBackColor := CLR_YELLOW
nTextColor := CLR_BLACK
Case cCor == “MARROM”
nBackColor := CLR_BROWN
Otherwise // AZUL padrão
cBackground := “background-color: #369cb5”
cColor := “color: #1409dc”
nBackColor := CLR_BLUE
nTextColor := CLR_BLUE
EndCase
If lEnable
oObj:Enable()
Else
oObj:Disable()
nBackColor := CLR_GRAY
nTextColor := CLR_WHITE
cBackground := “background-color: #757575”
cColor := “color: #ffffff”
EndIf
oObj:SetFont(oFonteBotao)
oObj:SetColor(nTextColor, nBackColor)
oObj:SetProperty(“style”,cBackground+” ; “+cColor+”;”+”border-radius: 5px”)
oObj:SetProperty(“cstyle”, “QWidget { “+cBackground+” ; “+cColor+”;”+ ” font: bold ;border: none; border-radius: 5px}”)
oObj:SetCss(“TButton:pressed { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #369cb5, stop: 1 #1409dc); }”)
oObj:SetCSS(“QWidget { “+cColor+”; }”)
oObj:Refresh()
Return oObj
Desde já, grato pelo retorno
Bom dia Marco, também estou bem graças a Deus.
Testei aqui na 12.1.2410 e funcionou com o SetCSS. Segue print de exemplo: https://terminaldeinformacao.com/wp-content/uploads/2025/07/button_css.png
E segue abaixo o código fonte do exemplo do print:
//Bibliotecas #Include "TOTVS.ch" /*/{Protheus.doc} User Function zTstButton Classe para criar botões em uma Dialog @type Function @author Atilio @since 03/04/2023 @see https://tdn.totvs.com/display/tec/TButton @obs **** Apoie nosso projeto, se inscreva em https://www.youtube.com/TerminalDeInformacao **** /*/ User Function zTstButton() Local aArea := FWGetArea() Local nCorFundo := RGB(238, 238, 238) Local nJanAltura := 250 Local nJanLargur := 242 Local cJanTitulo := 'Exemplo TButton' Local lDimPixels := .T. Local lCentraliz := .T. Local nObjLinha := 0 Local nObjColun := 0 Local nObjLargu := 0 Local nObjAltur := 0 Private cFontNome := 'Tahoma' Private oFontPadrao := TFont():New(cFontNome, , -12) Private oDialogPvt Private bBlocoIni := {|| /*fSuaFuncao()*/ } //Aqui voce pode acionar funcoes customizadas que irao ser acionadas ao abrir a dialog //objeto0 Private oBtnObj0 Private cBtnObj0 := 'Botão Normal' Private bBtnObj0 := {|| MsgInfo('Coloque sua funcao aqui', 'Atencao objeto0')} //objeto1 Private oBtnObj1 Private cBtnObj1 := 'Botão com CSS (Azul)' Private bBtnObj1 := {|| MsgInfo('Coloque sua funcao aqui', 'Atencao objeto1')} //objeto2 Private oBtnObj2 Private cBtnObj2 := 'Botão Amarelo' Private bBtnObj2 := {|| MsgInfo('Coloque sua funcao aqui', 'Atencao objeto2')} //objeto3 Private oBtnObj3 Private cBtnObj3 := 'Botão Verde' Private bBtnObj3 := {|| MsgInfo('Coloque sua funcao aqui', 'Atencao objeto3')} //objeto4 Private oBtnObj4 Private cBtnObj4 := 'Botão Laranja' Private bBtnObj4 := {|| MsgInfo('Coloque sua funcao aqui', 'Atencao objeto4')} //Cria a dialog oDialogPvt := TDialog():New(0, 0, nJanAltura, nJanLargur, cJanTitulo, , , , , , nCorFundo, , , lDimPixels) //objeto0 - usando a classe TButton nObjLinha := 10 nObjColun := 10 nObjLargu := 100 nObjAltur := 15 oBtnObj0 := TButton():New(nObjLinha, nObjColun, cBtnObj0, oDialogPvt, bBtnObj0, nObjLargu, nObjAltur, , oFontPadrao, , lDimPixels) //objeto1 - usando a classe TButton nObjLinha := 35 nObjColun := 10 nObjLargu := 100 nObjAltur := 15 oBtnObj1 := TButton():New(nObjLinha, nObjColun, cBtnObj1, oDialogPvt, bBtnObj1, nObjLargu, nObjAltur, , oFontPadrao, , lDimPixels) oBtnObj1: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; }") //objeto2 - usando a classe TButton nObjLinha := 60 nObjColun := 10 nObjLargu := 100 nObjAltur := 15 oBtnObj2 := TButton():New(nObjLinha, nObjColun, cBtnObj2, oDialogPvt, bBtnObj2, nObjLargu, nObjAltur, , oFontPadrao, , lDimPixels) oBtnObj2:SetCSS("TButton { background-color: #FFFF91; }") //objeto3 - usando a classe TButton nObjLinha := 85 nObjColun := 10 nObjLargu := 100 nObjAltur := 15 oBtnObj3 := TButton():New(nObjLinha, nObjColun, cBtnObj3, oDialogPvt, bBtnObj3, nObjLargu, nObjAltur, , oFontPadrao, , lDimPixels) oBtnObj3:SetCSS("TButton { background-color: #AEFFAE; }") //objeto4 - usando a classe TButton nObjLinha := 110 nObjColun := 10 nObjLargu := 100 nObjAltur := 15 oBtnObj4 := TButton():New(nObjLinha, nObjColun, cBtnObj4, oDialogPvt, bBtnObj4, nObjLargu, nObjAltur, , oFontPadrao, , lDimPixels) oBtnObj4:SetCSS("TButton { background-color: #FFDF83; }") //Ativa e exibe a janela oDialogPvt:Activate(, , , lCentraliz, , , bBlocoIni) FWRestArea(aArea) ReturnTenha uma ótima e abençoada terça feira.
Um forte abraço.