¿Qué son el padding, border y margin? Son propiedades de los controles. Padding y Margin permiten manejar los espacios entre los controles, y Border es para dibujar un borde al control, de qué tamaño, color etc. La siguiente imagen ilustra claramente cómo se reflejan estas propiedades en ejecución:
En Genexus, estas propiedades se setean en las clases del theme SD usado en la aplicación. Sus valores se especifican en DIPs (Device Independant Pixel) y pueden ser aplicadas a los siguientes controles y o clases:
Clase \ Propiedad
|
Borde
|
Margin
|
Padding
|
Table
|
x
|
x
|
x
|
Attribute
|
x
|
x
|
NO
|
Grid
|
x
|
x
|
x
|
GridRow
|
x
|
x
|
x
|
Button
|
x
|
NO
|
NO
|
Tab
|
x
|
x
|
x
|
Textblock
|
x
|
x
|
NO
|
Ejemplo
Veamos como aplicar estas propiedades en un control 'Table' en un objeto de tipo "panel for sd". A la misma se le asigna la Class Table del theme con las siguietnes propiedades:
Ejemplo Class Table
El resultado en ejecución es el siguiente:
Android |
iPhone |
|
|
Consideraciones
Es importante setear estas propiedades tomando en cuenta ciertas consideraciones. De lo contrario puede pasar que al ejecutar no se 'dibujen' los controles como esperamos, o bien que aparezcan cortados o en un lugar diferente.
Veamos un ejemplo de un diseño MAL hecho para visualizar mejor el problema de setear equivocadamente estas propiedades en Genexus.
Supongamos una ‘table’ con rows sytle = 64 dips, y se le pone un margen, un borde y/o un padding, tales que sumados superan los 64 dips. Por ejemplo, creamos una clase tal que el MarignTOP y BOTTOM=20, BORDER= 10 y PADDING=10. Por lo tanto si sumamos, solo de bordes y espacios tenemos 20+10+10 arriba + 20+10+10 abajo, total 80 dips ocupados por estas propiededes, cuando la fila mide solo 64dips
¿Qué pasa cuando se ejecuta?
En este caso el ‘Hello World’ NO queda donde se espera:
Android |
iPhone |
|
|