{{indexmenu_n>1}} ===== Nodo FRAME ===== ==== Definición ==== El nodo //frame// permite crear áreas visuales en la ventana de edición. En la web sería el equivalente a la etiqueta DIV. Para respetar compatibilidad con lo anterior, el nodo frame y su utilización en los prop no afecta la interpretación de las maquinarias que no lo soporten. **Sintáxis:**

==== Ubicación espacial de los frame y sus elementos ==== Los nodos frame pueden estar anidados, es decir, un frame puede estar dentro de otro frame y así sucesivamente. Los nodos prop dentro de un frame se comportan igual que su ubicación en el grupo, si tiene newline="false" se ubica a continuación de la propiedad, de lo contrario en la parte inferior. En el frame se interpretan para todos los prop los atributos **lmargin** (margen a la izquierda),**tmargin**(margen superior),**rmargin**(margen a la derecha) y **bmargin**(margen inferior). \\ === Frame flotante === Un frame puede posicionarse de forma flotante, "flotando" sobre el resto de la pantalla, sin que el fondo vea afectado su posicionamiento por la ubicación de este frame "flotante.\\ \\ El posicionamiento se realiza con respecto al margen superior izquierdo, mediante los atributos "top" y "left".\\ \\ Evitar en la medida de lo posible dar valores de ancho y alto del frame flotante en porcentaje, utilizad píxeles para un mejor funcionamiento.\\ \\



	.....

A continuación se muestra una distribución visual y como se pueden definir los frames, sus posiciones, relación entre ellos y los elementos que contienen: {{ :wiki:2.-desarrollo-app:2.3.-codigo:a.-estructura-xml:4.-nodo-frame:screenshot_20200227-100437.png?nolink&230 |}} ==== Atributos de los Nodos Frame ==== \\ ^ ATRIBUTOS ^ DESCRIPCIÓN ^ ^ frame | cadena con cualquier formato. Indica el nombre del frame padre al que pertenece este frame. | ^ newline | true ''%%|%%'' false. (Valor por defecto “true”) Indica si el frame se ubica a continuación o al lado del elemento anterior. | ^ forecolor | cadena formato color.(Valor por defecto “#000000”) Color con que se dibujan los bordes del frame. | ^ bgcolor | cadena formato color. (Valor por defecto “#00000000” transparente) Color de fondo del frame. Cumple el formato para degradados rectangulares ##COLOR1,#COLOR2,#COLOR3 | ^ imgbk | cadena fromato ruta.(Valor por defecto “” vacío) Imagen de fondo del frame. | ^ framebox | true ''%%|%%'' false. (Valor por defecto “true”)Permite mostrar u ocultar la caja de bordes alrededor del frame. | ^ border-width | numérico entero. (Valor por defecto “1”) .Ancho del borde alrededor del frame. | ^ border-left | true ''%%|%%'' false. (Valor por defecto “true”). Permite definir si se muestra o no el borde izquierdo. | ^ border-top | true ''%%|%%'' false. (Valor por defecto “true”). Permite definir si se muestra o no el borde superior. | ^ border-right | true ''%%|%%'' false. (Valor por defecto “true”). Permite definir si se muestra o no el borde derecho. | ^ border-bottom | true ''%%|%%'' false. (Valor por defecto “true”). Permite definir si se muestra o no el borde inferior. | ^ align | left ''%%|%%'' right ''%%|%%'' center ''%%|%%'' top ''%%|%%'' bottom. (Valor por defecto “left”). Puede ser una combinación de esos valores separados por ''%%|%%'' y posiciona todos los elementos dentro del frame en la ubicación derivada de la combinación usada. Hay algunas combinaciones no lógicas se realiza solo las combinaciones que se puede realizar Ej. top ''%%|%%'' bottom, se descarta la combinación. center ''%%|%%'' top, ubicado al centro en la parte superior del frame. center, ubicado en el centro de la pantalla. center ''%%|%%'' left. Ubicado en el centro horizontal y a la derecha | ^ lmargin | Númericofloat.(Valor por defecto “0”). Margen a la izquierda a partir del cual se ubica del frame. Su valor es la multiplicación de un ancho de carácter con el Font estándar del dispositivo por el valor indicado. | ^ tmargin | Númericofloat.(Valor por defecto “0”). Margen superior a partir del cual se ubica del frame. Su valor es la multiplicación de un ancho de carácter con el Font estándar del dispositivo por el valor indicado. | ^ rmargin | Númericofloat.(Valor por defecto “0”). Margen a la derecha a partir del cual se ubica del frame. Su valor es la multiplicación de un ancho de carácter con el Font estándar del dispositivo por el valor indicado. | ^ bmargin | Númericofloat.(Valor por defecto “0”). Margen inferior a partir del cual se ubica del frame. Su valor es la multiplicación de un ancho de carácter con el Font estándar del dispositivo por el valor indicado. | ^ lpadding | Númericofloat.(Valor por defecto “0”). Margen interior del frame a la derecha a partir del cual se ubican los elementos que estén dentro del frame. Su valor es la multiplicación de un ancho de carácter con el Font estándar del dispositivo por el valor indicado. | ^ tpadding | Númericofloat.(Valor por defecto “0”). Margen interior del frame en la parte superior a partir del cual se ubican los elementos que estén dentro del frame. Su valor es la multiplicación de un ancho de carácter con el Font estándar del dispositivo por el valor indicado. | ^ rpadding | Númericofloat.(Valor por defecto “0”). Margen interior del frame a la izquierda a partir del cual se ubican los elementos que estén dentro del frame. Su valor es la multiplicación de un ancho de carácter con el Font estándar del dispositivo por el valor indicado. | ^ bpadding | Númericofloat.(Valor por defecto “0”). Margen interior del frame en la parte inferior a partir del cual se ubican los elementos que estén dentro del frame. Su valor es la multiplicación de un ancho de carácter con el Font estándar del dispositivo por el valor indicado. | ^ width | ** Tipo dimensión* ** (valor por defecto ajuste a los hijos.) Permite definir el ancho del frame en el espacio que se ubique. Si no está definido, se ajusta al tamaño de las propiedades que lo contienen. | ^ height | ** Tipo dimensión* ** (valor por defecto ajuste a los hijos.) Permite definir el alto del frame en el espacio que se ubique. Si no está definido, se ajusta al tamaño de las propiedades que lo contienen. | ^ floating | Valores **true** o **false**(el valor **false** es el predeterminado).Si es **true** indica que el //frame// es flotante y se dibujará en las coordenadas especificadas en //left// y //top // por encima de cualquier otro control. La posición de //frame// flotante es relativa al grupo cuando no está definido el atributo //frame // en el caso contrario (que esté definido el atributo //frame//)su posición será relativa al //frame// padre. | ^ top | Valor decimal en pixels. Indica la coordenada vertical donde se posicionará el //frame//. | ^ scroll | Valores **true** o **false**(el valor //false// es el predeterminado). Si es //true// indica que permite hacer //scroll// si el área de contenido del //frame// es más grande. | ^ left | Valor decimal en pixels. Indica la coordenada horizontal donde se posicionará el //frame//. | ^ animation in | Valor //string//. Indica la macro de animación para mostrar el //frame//. | ^ animation out | Valor //string//. Indica la macro de animación para ocultar el //frame//. | ^ animation-in-delay | Valor decimal en milisegundos. Indica la duración de la animación para mostrar el //frame//. | ^ animation-out-delay | Valor decimal en milisegundos. Indica la duración de la animación para ocultar el //frame//. | ^ disablevisible | Atributo que permite decidir la visibilidad de forma condicional, estará invisible MIENTRAS se cumpla la condición. | ^ ignore-touch-on-transparent-area | Atributo que utilizado en un frame flotante (floating="true), al ponerlo a true, evita que se pulse sobre un área transparente del frame flotante y se pase el evento touch al contenido que se ve por debajo del frame flotante. | \\ ==== Ejemplos de declaración de Frames ==== \\

\\ ==== Atributos de animación ==== Se puede definir en la cabecera de los **__grupos__** o en los **__frames__** el efecto de entrada que se quiere por defecto para el grupo o frame... {{ :b.-programacion:animaciones.gif?nolink |}}


.FrameAnimateFromTop
{
	animation-in-delay:500;
	animation-out-delay:500;
	
	/* Entra y sale por arriba. */
	animation-in:##PUSH_DOWN_IN##;		/* Aparece por arriba */
	animation-out:##PUSH_OUT##;		/* Se va por arriba */
}

.FrameAnimateFromBottom
{
	animation-in-delay:500;
	animation-out-delay:500;
	
	/* Entra y sale por abajo. */
	animation-in:##PUSH_IN##;		/* Aparece por abajo */
	animation-out:##PUSH_DOWN_OUT##; 	/* Se va por abajo */
}

.FrameAnimateFromRight
{
	animation-in-delay:500;
	animation-out-delay:500;
	
	/* Entra y sale por la derecha. */
	animation-in:##RIGHT_IN##;
	animation-out:##LEFT_OUT##;
}

.FrameAnimateFromLeft
{
	animation-in-delay:500;
	animation-out-delay:500;
	
	/* Entra y sale por la izquierda. */
	animation-in:##LEFT_IN##;
	animation-out:##RIGHT_OUT##;
}

.FrameAnimateRotate3D
{
	animation-in-delay:500;
	animation-out-delay:500;
	
	/* Entra y sale rotando en 3D. */
	animation-in:##ROTATE3D_IN##;
	animation-out:##ROTATE3D_OUT##;
}

.FrameAnimateAlpha
{
	animation-in-delay:500;
	animation-out-delay:500;

	/* Aparece y desaparece;. */
	animation-in:##ALPHA_IN##;
	animation-out:##ALPHA_OUT##;
	
	/* ZOOM. */
	animation-in:##ZOOM_IN##;
	animation-out:##ZOOM_OUT##;
}

.FrameAnimateZoom
{
	animation-in-delay:500;
	animation-out-delay:500;

	/* ZOOM. */
	animation-in:##ZOOM_IN##;
	animation-out:##ZOOM_OUT##;	
}

**Tipo dimensión: ** Es un tipo de dato para los atributos de dimensiones en pantalla. Puede tener los siguientes formatos: \\ * N%: Permite definir en porcientos del display. Ej.width=”50%” * N: Permite definir en DIP, teniendo en cuenta la densidad del display. Ej.width=”56” * Np: Permite definir las dimensiones en pixels. Ej.height=”100p” \\ ====Control Bottom Shel==== \\ Es un panel deslizante, al estilo del navigation drawer, pero que aparece el parte inferior de la pantalla. Se define a nivel de nodo frame, este último debe ser flotante.\\ \\ ^ Attributos ^ Descripción ^ | **initial-state** | Define el estado inicial como aparece el control. Puede tener los siguientes valores: \\ -expanded: El control aparece expandido ocupando el 100% del tamaño que se le asignara.\\ -collapsed: El control aparece contraído ocupando una pequeña parte de la pantalla.\\ -hidden: El control aparece oculto. | | **Behavior** | Define el comportamiento del control, es este caso su valor es bottom-sheet. | **Metodos para manejarlo por script**:\\ |**setBottomSheetState**| Cambia el estado inicial del control, sus valores son los mismos del atributo initial-state.| \\ **Ejemplos:** \\ Definición del nodo. Métodos de script: var window = ui.getView(self); window.setBottomSheetState(sProp, "expanded");