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: 

<frame name="id1" ... />
	<prop name="PRUEBA" ... />
	<prop name="PRUEBA2" ... />
	<frame name="id2" ... />
		<prop name="PRUEBA3" ... />
		<prop name="PRUEBA4" ... />
	</frame>
</frame>

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.

<frame name="frmFlotante" floating="true" top="300p" left="200p" width="600p" height="300p" class="FrameAnimateFromRight" >
	.....
</frame>

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:

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


      <frame name="floatadd1" top="920p" left="610p" width="90p" height="90p" floating="true">
            <prop name="BTADD1" type="B" visible="1" labelwidth="0" method="ExecuteNode(nuevo)" width="75p" img="add.png" imgsel="add_click.png" />
      </frame>
 <group name="General" id="1">
        <frame name="frmgrid" width="100%">
          <prop name="MAP_FECHA" type="D" visible="4" labelwidth="0" width="200p" text-align="center" textfont-size="8" />
          <prop name="MAP_DESCRIPCION" type="T" visible="4" labelwidth="0" width="520p" text-align="center" textfont-size="8" newline="false" />
        </frame>
        <frame name="frmTitleCalendario" height="100%" align="center|top" width="96%" lmargin="2%" animation-in="##PUSH_IN##" animation-out="##ROTATE3D_OUT##">
          <prop name="FECHA" type="D" visible="1" datefrom="true" dateto="true" title="Fecha:" class="classdate" />
          <prop name="MAP_TIPO" type="T" mapcol-values="Info: Azul,Visita: Naranja,Pedido: Verde" visible="0" />
          <prop name="HORAINI" type="TT" mask="Hh#:#Mm" visible="1" timefrom="true" title="Hora Inicio:" class="classtime" />
          <prop name="HORAFIN" timeto="true" type="TT" visible="1" mask="Hh#:#Mm" title="Hora Fin:" class="classtime" />
          <prop name="TIPO" type="T" showinline="true" class="classT" visible="1" title="Tipo:" linkedto="MAP_TIPO" linkedfield="DATA" onchange="refresh(TIPO)" />
          <prop name="DESCRIPCION" type="T" visible="1" title="Descripción:" class="classTMultiline" />
          <prop name="MAP_COLORVIEW" type="T" visible="0" colorview="true" />
          <prop name="MAP_BUTCANCELAR" type="B" caption="CANCELAR" class="btnButton" method="ExecuteNode(onback)" />
          <prop name="MAP_BUTACEPTAR" type="B" caption="ACEPTAR" class="btnButton" method="ExecuteNode(guardar)" newline="false"  />
        </frame>
        <frame name="floatadd1" top="900p" left="610p" width="90p" height="90p" floating="true">
          <prop name="BTADD1" type="B" visible="1" labelwidth="0" method="ExecuteNode(addcalendario)" width="75p" img="add.png" imgsel="add_click.png" />
        </frame>
      </group>
 <group name="Antes" id="2" class="coll colorGrupo" height="93%">
        <frame name="frmGeneral4" imgbk="fondo-registro.png" align="top|center">
            <frame name="frmmaparuta" tmargin="2%"  width="90%" height="72%" align="center" class="frmconborde" >
                <prop name="DatosMapaVer" class="mapaRutaRealizada" type="Z" visible="1" contents="DatosMapaViaje" />
                <contents name="DatosMapaVer" src="DatosMapaViaje" filter="ID=-1"  />
                <contents name="DatosMapaViaje" src="DatosMapaViaje" />
            </frame>
            <frame name="frmmaparuta2" tmargin="1%"  width="90%" height="12%" align="center"  class="frmconborde" >
                <prop name="MAP_LYT1" title="Inicio viaje" height="24%" type="B" width="30%" fontsize="2" locked="true" text-align="center"  />
                <prop name="MAP_LYT2" title="Ruta" type="B" height="24%" width="33%" newline="false"  fontsize="2" locked="true" text-align="center" />
                <prop name="MAP_LYT3" title="Fin viaje" type="B" height="24%" width="33%" newline="false"  fontsize="2" locked="true" text-align="center" >
                <frame name="frmmaparuta3" width="33%" height="66%" align="center" newline="true" tmargin="2%">
                    <prop name="MAP_LY1" type="B" width="33%" heightx="98%" img="coche-averia.png" locked="true" keep-aspect-ratio="true"/>
                </frame>
                <frame name="frmmaparuta4" width="33%" height="66%"  align="center" newline="false" tmargin="2%" >
                    <prop name="MAP_LY2" type="B" width="33%" heightx="98%" img="viaje0.png"  locked="true" keep-aspect-ratio="true"/>
                </frame>
                <frame name="frmmaparuta5" width="33%"  height="66%" align="center" newline="false" tmargin="2%" >
                    <prop name="MAP_LY3" type="B" width="33%" heightx="98%" img="coche-disponible.png" locked="true" keep-aspect-ratio="true"/>
                </frame>
            </frame>
 
 
            <frame name="frmButton2" width="100%" height="10%" tmargin="1%" align="center">
                <prop name="MAP_BT_UN2" title="Datos" onclick="javascript:irGrupo('1');" type="B" visible="1" class="propBTInferiorPerfil" bgcolor="#84B819" forecolor="#FFFFFF" 
                 width="28%" lmargin="4%" />    
                <prop name="MAP_BT_DO2" title="Ruta Realizada" onclick="javascript:irGrupo('2');" type="B" visible="1" class="propBTInferiorPerfil" bgcolor="#FFFFFF" 
                forecolor="#84B819" width="28%" lmargin="4%" newline="false"/>  
                <prop name="MAP_BT_TRE2" title="Fotos" onclick="javascript:irGrupo('3');" type="B" visible="1" class="propBTInferiorPerfil" bgcolor="#84B819" forecolor="#FFFFFF" 
                width="28%" lmargin="4%" newline="false" />    
            </frame>
        </frame>
    </group>


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… 

<group name="General" id="1" height="100%" animation-out="animación de salida" animation-in="animación de entrada" >
<frame name="frmFlotante" floating="true" top="300p" left="200p" width="600p" height="300p" class="FrameAnimateFromRight" >

.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.
<frame name="bottom_sheet_ejemplo" 
      initial-state="collapsed" floating="true" left="150p" behavior="bottom-sheet"  width="80%" height="80%">
          <prop name="MAP_HOLA_BOTTOM" type="TL" labelwidth="10" width="100%" 	height="10%" title="Hola bottom-sheet" bgcolor="#FFFFFF"/>
          <prop name="MAP_TYPEZ" type="Z" contents="Usuarios" bgcolor="#FFFF00" width="100%" height="100%" />
          </frame>
Métodos de script:
var window = ui.getView(self);
window.setBottomSheetState(sProp, "expanded");