Que tal montar suas telas em um formato diferente – Parte 3
Segue mais um exemplo do uso de CSS no Protheus. Agora iremos mostrar o uso de CSS em botões com a classe QPushButton, mais sobre a classe acesse o link http://doc.qt.io/qt-4.8/qpushbutton.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
#INCLUDE 'TOTVS.CH' User Function fBtnCSS() Local cEstilo1,cEstilo2,cEstilo3 //Crio um estico para cada botão, não é necessário caso todos sejam iguais DEFINE DIALOG oDlg TITLE "Usando estilos CSS no Protheus" FROM 180,180 TO 350,700 PIXEL //Irei utilizar a classe QPushButton, ela é responsável em criar a formatação do botão. cEstilo1 := "QPushButton {" //Usando a propriedade background-image, inserimos a imagem que será utilizada, a imagem pode ser pega pelo repositório (RPO) cEstilo1 += " background-image: url(rpo:totvsprinter_spool.png);background-repeat: none; margin: 2px;" cEstilo1 += " border-style: outset;" cEstilo1 += " border-width: 2px;" cEstilo1 += " border: 1px solid #C0C0C0;" cEstilo1 += " border-radius: 5px;" cEstilo1 += " border-color: #C0C0C0;" cEstilo1 += " font: bold 12px Arial;" cEstilo1 += " padding: 6px;" cEstilo1 += "}" //Na classe QPushButton:pressed , temos o efeito pressed, onde ao se pressionar o botão ele muda cEstilo1 += "QPushButton:pressed {" cEstilo1 += " background-color: #e6e6f9;" cEstilo1 += " border-style: inset;" cEstilo1 += "}" cEstilo2 := "QPushButton {background-image: url(rpo:totvsprinter_pdf.png);background-repeat: none; margin: 2px; " cEstilo2 += " border-style: outset;" cEstilo2 += " border-width: 2px;" cEstilo2 += " border: 1px solid #C0C0C0;" cEstilo2 += " border-radius: 0px;" cEstilo2 += " border-color: #C0C0C0;" cEstilo2 += " font: bold 12px Arial;" cEstilo2 += " padding: 6px;" cEstilo2 += "}" cEstilo2 += "QPushButton:pressed {" cEstilo2 += " background-color: #e6e6f9;" cEstilo2 += " border-style: inset;" cEstilo2 += "}" cEstilo3 := "QPushButton {background-image: url(rpo:totvsprinter_email.png);background-repeat: none; margin: 2px;}" //Cria-se os botoes normalmente, para mais detalhes das opções do botão acesse o TDN (http://tdn.totvs.com/display/tec/TButton) //O espaço entre a primeira aspa e o texto do botão, é necessário pois é neste espaço que a imagem entra oBtnImprimir := TButton():New(10,010," Imprimir" ,oDlg,{|| Alert('Botão Imprimir com efeito') },50,20,,,.F.,.T.,.F.,,.F.,,,.F. ) oBtnPDF := TButton():New(10,070," Gerar PDF" ,oDlg,{|| Alert('Botão Gerar PDF com efeito') },60,20,,,.F.,.T.,.F.,,.F.,,,.F. ) oBtnEmail := TButton():New(10,140," Enviar E-mail" ,oDlg,{|| Alert('Botão Enviar E-mail com efeito') },60,20,,,.F.,.T.,.F.,,.F.,,,.F. ) /*Neste momento, para definirmos o estilo, usaremos a propriedade SetCss, no qual informaremos a ela a variavel que contém o estilo que criamos anteriormente.*/ oBtnImprimir:SetCss(cEstilo1) oBtnPDF:SetCss(cEstilo2) oBtnEmail:SetCss(cEstilo3) ACTIVATE DIALOG oDlg CENTERED Return |
Uma outra forma de se incluir estilos, é utilizando um arquivo include.
Exemplificando o código acima:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#INCLUDE 'TOTVS.CH' #INCLUDE 'ESTILOS.CH' //Incluo o arquivo que deverá ser criado com o nome ESTILOS.CH User Function fBtnCSS() DEFINE DIALOG oDlg TITLE "Usando estilos CSS no Protheus" FROM 180,180 TO 350,700 PIXEL //Cria-se os botoes normalmente, para mais detalhes das opções do botão acesse o TDN (http://tdn.totvs.com/display/tec/TButton) //O espaço entre a primeira aspa e o texto do botão, é necessário pois é neste espaço que a imagem entra oBtnImprimir := TButton():New(10,010," Imprimir" ,oDlg,{|| Alert('Botão Imprimir com efeito') },50,20,,,.F.,.T.,.F.,,.F.,,,.F. ) oBtnPDF := TButton():New(10,070," Gerar PDF" ,oDlg,{|| Alert('Botão Gerar PDF com efeito') },60,20,,,.F.,.T.,.F.,,.F.,,,.F. ) oBtnEmail := TButton():New(10,140," Enviar E-mail" ,oDlg,{|| Alert('Botão Enviar E-mail com efeito') },60,20,,,.F.,.T.,.F.,,.F.,,,.F. ) /*Neste momento, para definirmos o estilo, usaremos a propriedade SetCss, no qual informaremos a ela a variavel que contém o estilo que criamos anteriormente.*/ oBtnImprimir:SetCss(STYLE0000) //Substituo pela variavel que criei no arquivo estilos.ch oBtnPDF:SetCss(STYLE0002) //Substituo pela variavel que criei no arquivo estilos.ch oBtnEmail:SetCss(STYLE0003) //Substituo pela variavel que criei no arquivo estilos.ch ACTIVATE DIALOG oDlg CENTERED Return |
Agora crio o arquivo ESTILOS.CH
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
//Irei utilizar a classe QPushButton, ela é responsável em criar a formatação do botão. #define STYLE0000 "QPushButton {" +; " background-image: url(rpo:totvsprinter_spool.png);background-repeat: none; margin: 2px;" +; " border-style: outset;" +; " border-width: 2px;" +; " border: 1px solid #C0C0C0;" +; " border-radius: 5px;" +; " border-color: #C0C0C0;" +; " font: bold 12px Arial;" +; " padding: 6px;" +; "}" +; "QPushButton:pressed {background-color: #e6e6f9;border-style: inset;}" #define STYLE0002 "QPushButton {background-image: url(rpo:totvsprinter_pdf.png);background-repeat: none; margin: 2px; " +; " border-style: outset;" +; " border-width: 2px;" +; " border: 1px solid #C0C0C0;" +; " border-radius: 0px;" +; " border-color: #C0C0C0;" +; " font: bold 12px Arial;" +; " padding: 6px;" +; "}" +; "QPushButton:pressed {background-color: #e6e6f9;border-style: inset;}" #define STYLE0003 "QPushButton {background-image: url(rpo:totvsprinter_email.png);background-repeat: none; margin: 2px;}" |
Desta maneira, reduzo bem a codificação do fonte principal, deixado-o mais limpo
11 comentários
Prezado, como com esse método(background-image: url(rpo:close.bmp)) do CSS como faço para pegar uma imagem em uma pasta?
Olá, a imagem deve está dentro da pasta raiz do protheus
tente background-image: url(\system\suaimagem.png))
Tentei usar uma imagem que estava dentro da system e não funcionou só mesmo com imagens do repositório. Alguém conseguiu?
Parabéns pelo artigo!
Olá, mande seu exemplo para nosso e-mail contatos@blogadvpl.com e a imagem que quer anexar que iremos tentar aqui.
abraços
Leonardo beleza?
Cara consegui fazer da uma olhadinha:
{background-image: url(C:\TOTVS11\Microsiga\Protheus_Data\system\Bitmaps:consultar.bmp)
Ve se funfa cara!
Bom dia,
Ref a função SETCSS.
Gostaria de saber como podemos utiliza-la para aplicar um efeito “ribbon” parecido com o browse do novo totvs pdv ?
Obrigado.
Olá, se ainda estiver na versão 11.X, os efeitos ainda são válidos, o uso de CSS no protheus 11 dá uma cara mais amigável.
Nesta tela que parece o totvs PDV foram efeitos css mais imagens sobrepostas, para criar um ribbon, pode se usar os componentes panel + um TMultiGet (http://tdn.totvs.com/display/tec/TMultiGet) com a fonte “courier new” para que cada coluna saia na mesma posição, e usando a propriedade TMultiGet:nPos (http://tdn.totvs.com/display/tec/TMultiGet%3AnPos) você pode ir se posicionando na linha
Bom dia, como consigo uma lista com os nomes das imagens contidas no repositório?
Obrigado
Boa tarde Oscar, temos o artigo Modificando imagens padrão e tema do Protheus, ná 3ª página tem um exemplo de como extrair, ao invés de extrair para discos as imagens existentes, você pode listá-las no arquivo para saber quais são estas imagens.
abraços
Quais os componentes que você utilizou para montar essa tela que parece com o PDV?
Olá, utilizamos os compomente tBitmap, tGet, tSay, tcBrowse, tCombobox, tlistbox, etc…
Mas personalizando com estilos (http://doc.qt.io/qt-4.8)