Cálculo de Dimensões dos Componentes: Diferenças entre WebApp e Desktop

Introdução

Esta documentação explica as diferenças no cálculo de dimensões dos componentes entre o sistema desktop (QT) e o WebApp. A principal diferença está no tratamento da margem (margin), que no Desktop é considerada no cálculo do layout, enquanto no WebApp não é incluída devido a questões de performance .

Diferenças entre QT e WebApp

Desktop

No sistema desktop QT, 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; para evitar que o preenchimento afete a área do padding.

Exemplo de Implementação

  
user function _calcAlign()
	local oDlg			:= nil
	local oPanel01		:= nil
	local oPanel02		:= nil
	local cCSS			:= ""

	oDlg				:= tDialog():New(000, 000, 600, 800, "",,,,,,,,, .t.)

	oPanel01			:= tPanel():New(000, 000, " Panel 01 ", oDlg,,.f.,,,CLR_YELLOW, 000, 000)
	oPanel01:align		:= CONTROL_ALIGN_ALLCLIENT
	cCSS				:=	"QWidget { "
	cCSS				+=		"background-color: #17a2b8; "
	cCSS				+=		"color: #000000; "
	cCSS				+=		"border: 1px solid #000000; "
	cCSS				+=		"font-size: 12px; "
	cCSS				+=		"padding: 0; "
	cCSS				+=		"border-radius: 4px; "
	cCSS				+=	"} "
	oPanel01:SetCSS(cCSS)

	oPanel02			:= tPanel():New(000, 000, "Panel 02 ", oPanel01,, .f.,,,CLR_BLUE, 000, 100)
	oPanel02:align		:= CONTROL_ALIGN_TOP
	cCSS				:=	"QWidget { "
	cCSS				+=		"background-color: #e8dba2; "
	cCSS				+=		"color: #000000; "
	cCSS				+=		"font-size: 12px; "
	cCSS				+=		"padding: 15px;"
	cCSS				+=		"background-clip: content-box;"
	cCSS				+=	"} "
	oPanel02:SetCSS(cCSS)

	oDlg:Activate(,,, .T.)
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 e WebApp é uma escolha arquitetural feita para otimizar o desempenho do WebApp. Embora isso possa causar pequenas diferenças visuais entre os dois sistemas, o uso adequado de padding e background-clip pode minimizar esses impactos e garantir um comportamento mais previsível.