Histórico da Página

Introdução

Esta documentação explica detalha as diferenças no cálculo de dimensões dos componentes entre o sistema desktop (QT) SmartClient Desktop e o WebApp.

A principal diferença está no tratamento da margem ( margin margin )no desktop, que no Desktop ela é considerada no cálculo do layout, enquanto no WebApp não é incluída devido a questões de performance , devido às características nativas dos navegadores.

Essas diferenças de comportamento já eram esperadas entre o SmartClient Desktop e o SmartClient WebApp, devido às particularidades de cada plataforma.

Diferenças entre

...

Deskop e WebApp

Desktop

...

No sistema desktop QTSmartclient Desktop, as margens são incluídas no cálculo do layout dos componentes. Isso significa que o espaço disponível dentro de um componente é reduzido conforme as margens aplicadas, pois elas fazem parte da dimensão total do elemento.

WebApp

...

No WebApp, é utilizado a propriedade box-sizing: border-box , que inclui o padding e a borda no cálculo da largura e altura. No entanto, a margem (margin) não é considerada, pois ela não faz parte do elemento em si, mas sim do espaço ao seu redor.

Além disso, incluir a margem nos cálculos de layout no WebApp resultaria em uma perda significativa de performance, especialmente em layouts mais dinâmicos, motivo pelo qual essa abordagem não foi adotada.

Solução Recomendada

Para garantir um comportamento mais consistente entre os sistemas, recomendamos substituir a margem por padding e utilizar a propriedade background-clip: content-box;a utilização de componentes baseados em FlexBox, como:

Esses componentes gerenciam automaticamente o espaçamento interno e externo, oferecendo um comportamento que melhor se aproxima do SmartClient Desktop, descontando a margem do cálculo total do layout para evitar que o preenchimento afete a área do padding.

Exemplo de Implementação

Bloco de código

language	bash
firstline	0
title	Aplicando estilo CSS e definindo padding e background-clip
linenumbers	true

  
user function _calcAlign()
	local oDlg			:= nil
	local oPanel01		:= nil
	local oPanel02		:= nil 	#Include "totvs.ch"
	#define LAYOUT_LINEAR_L2R 0 // LEFT TO RIGHT
	#define LAYOUT_LINEAR_R2L 1 // RIGHT TO LEFT
	#define LAYOUT_LINEAR_T2B 2 // TOP TO BOTTOM
	#define LAYOUT_LINEAR_B2T 3 // BOTTOM TO TOP

	#define LAYOUT_ALIGN_LEFT     1
	#define LAYOUT_ALIGN_RIGHT    2
	#define LAYOUT_ALIGN_HCENTER  4
	#define LAYOUT_ALIGN_TOP      32
	#define LAYOUT_ALIGN_BOTTOM   64
	#define LAYOUT_ALIGN_VCENTER  128

user function clcLinear()
	local cCSS			:= ""

	oDlg				oWnd:= tDialogTWindow():New(0000, 0000, 600500, 800400, "TAlignLayout Aninhado", NIL, NIL, NIL, NIL, NIL, NIL, NIL, CLR_BLACK, CLR_WHITE, NIL, NIL, NIL, NIL, NIL, NIL, .tT. )

	oPanel01			oBodyLyt := tPaneltLinearLayout():New(000oWnd, LAYOUT_LINEAR_T2B, CONTROL_ALIGN_ALLCLIENT, 000, " Panel 01 ", oDlg,,.f0, 0)
	cCSS				:=	"QWidget { "
	cCSS				+=		"background-color: #17a2b8;"
	cCSS				+=		"border: 1px solid #000000; "
	cCSS				+=		"border-radius: 4px;"
	cCSS				+=		"padding: 10px;"
	cCSS				+=	"} "
	oBodyLyt:SetCSS(cCSS)
	oPanel01 := tPanel():New(0,0,,oBodyLyt,,.T.,,,CLR_YELLOW, 000, 000)
	oPanel01:align		:=LIGHTGRAY,0,0)
	cCSS				:=	"QWidget { "
	cCSS				+=		"background-color: #e8dba2; "
	cCSS				+=		"border: 1px solid #000000; "
	cCSS				+=		"margin: 0 10px 10px 0; "
	cCSS				+=		"border-radius: 4px; "
	cCSS				+=		"padding: 10px;"
	cCSS				+=	"} "
	oPanel01:SetCSS(cCSS)
	oPanel02 := tLinearLayout():New(oBodyLyt, LAYOUT_LINEAR_L2R, CONTROL_ALIGN_ALLCLIENT, 0, 0)
	cCSS				:=	"QWidget { "
	cCSS				+=		"background-color: #17a2b8: #a2e8d5; "
	cCSS				+=		"border: 1px solid #000000; "
	cCSS				+=		"margin: 0 10px 10px 0; "
	cCSS				+=		"border-radius: 4px; "
	cCSS				+=		"padding: 10px;"
	cCSS				+=	"} "
	oPanel02:SetCSS(cCSS)
	oPanel03 := tPanel():New(0,0,,oBodyLyt,,.T.,,,CLR_BROWN,0,0)
	cCSS				:=	"QWidget { "
	cCSS				+=		"background-color: #000000#b9a2e8; "
	cCSS				+=		"border: 1px solid #000000; "
	cCSS				+=		"font-size: 12pxmargin: 0 10px 10px 0; "
	cCSS				+=		"padding: 010px; "
	cCSS				+=		"border-radius: 4px; "
	cCSS				+=	"} "
	oPanel01oPanel03:SetCSS(cCSS)

	oBodyLyt:addInLayout(oPanel01,,33)
	oBodyLyt:addInLayout(oPanel02,,33)
			oBodyLyt:addInLayout(oPanel03,,33)

	oPnel01 := tPanel():New(000, 000, "Panel 02 ", oPanel01,, .f0,0,,oPanel02,,.T.,,,CLR_YELLOW,0,0)
	cCSS				:=	"QWidget { "
	cCSS				+=		"background-color:rgb(232, 162, 177); "
	cCSS				+=		"border: 1px solid #000000; "
	cCSS				+=		"margin: 0 10px 10px 0; "
	cCSS				+=		"padding: 10px;"
	cCSS				+=		"border-radius: 4px; "
	cCSS				+=	"} "
	oPnel01:SetCSS(cCSS)
	oPnel02 := tPanel():New(0,0,,oPanel02,,.T.,,,CLR_BLUE,0, 000, 100)
	oPanel02:align		:= CONTROL_ALIGN_TOP0)
	cCSS				:=	"QWidget { "
	cCSS				+=		"background-color:rgb(162, 232, 165); "
	cCSS				+=		"border: 1px solid #000000; "
	cCSS				+=		"margin: 0 10px 10px 0; "
	cCSS				+=		"padding: 10px;"
	cCSS				+=		"border-radius: 4px; "
	cCSS				+=	"} "
	oPnel02:SetCSS(cCSS)
	oPnel03 := tPanel():New(0,0,,oPanel02,,.T.,,,CLR_GREEN,0,0)
	cCSS				:=	"QWidget { "
	cCSS				+=		"background-color: #e8dba2rgb(217, 232, 162); "
	cCSS				+=		"colorborder: 1px solid #000000; "
	cCSS				+=		"font-sizemargin: 12px 0 10px 10px 0; "
	cCSS				+=		"padding: 15px10px;"
	cCSS				+=		"backgroundborder-clipradius: content-box4px; "
	cCSS				+=	"} "
	oPanel02oPnel03:SetCSS(cCSS)

	oDlg:Activate(,,, .T.oPanel02:addInLayout(oPnel01,,33)
	oPanel02:addInLayout(oPnel02,,33)
	oPanel02:addInLayout(oPnel03,,33)
	oWnd:Activate("MAXIMIZED")
return

Essa abordagem permite que o espaço entre os elementos seja controlado de forma eficiente.

Conclusão

A diferença no tratamento das margens entre QT Desktop e WebApp é uma escolha decisão arquitetural feita voltada para otimizar o desempenho do WebAppno ambiente web.
Embora isso essa abordagem possa causar resultar em pequenas diferenças visuais entre os dois sistemas, o uso adequado de padding e background-clip pode dos componentes como TGridLayout, TLinearLayout e TFlowLayout, ajuda a minimizar esses impactos e garantir um comportamento mais consistente e previsível.

Árvore de páginas

Versões comparadas

Versão antiga 4

Nova versão 5

Chave