| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa |
| wiki:2.-desarrollo-app:2.3.-codigo:a.-estructura-xml:4.-nodo-frame:start [2018/09/05 19:22] – [Definición] ejetoro | wiki:2.-desarrollo-app:2.3.-codigo:a.-estructura-xml:4.-nodo-frame:start [2020/08/27 13:22] (actual) – [Tabla] ary |
|---|
| **Sintáxis:** | **Sintáxis:** |
| <code xml> | <code xml> |
| <frame name="id1" ATRIBUTOS/> | <frame name="id1" ... /> |
| <prop name="PRUEBA" ... /> | <prop name="PRUEBA" ... /> |
| <prop name="PRUEBA2" --- /> | <prop name="PRUEBA2" ... /> |
| </frame> | <frame name="id2" ... /> |
| </code> | <prop name="PRUEBA3" ... /> |
| | <prop name="PRUEBA4" ... /> |
| | </frame> |
| | </frame></code> |
| ==== Ubicación espacial de los frame y sus elementos ==== | ==== Ubicación espacial de los frame y sus elementos ==== |
| |
| </code> | </code> |
| |
| | 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 de los Nodos Frame ==== |
| \\ | \\ |
| |
| ^ ATRIBUTOS ^ DESCRIPCIÓN ^ | ^ ATRIBUTOS ^ DESCRIPCIÓN ^ |
| ^frame | cadena con cualquier formato. Indica el nombre del frame padre al que pertenece este frame. | | ^ frame | cadena con cualquier formato. Indica el nombre del frame padre al que pertenece este frame. | |
| ^newline | true ''<nowiki>|</nowiki>'' false. (Valor por defecto “true”) Indica si el frame se ubica a continuación o al lado del elemento anterior.| | ^ 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. | | ^ 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 | | ^ 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. | | ^ imgbk | cadena fromato ruta.(Valor por defecto “” vacío) Imagen de fondo del frame. | |
| ^framebox | true ''<nowiki>|</nowiki>'' false. (Valor por defecto “true”)Permite mostrar u ocultar la caja de bordes alrededor 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-width | numérico entero. (Valor por defecto “1”) .Ancho del borde alrededor del frame. | |
| ^border-left | true ''<nowiki>|</nowiki>'' false. (Valor por defecto “true”). Permite definir si se muestra o no el borde izquierdo. | | ^ border-left | true ''%%|%%'' false. (Valor por defecto “true”). Permite definir si se muestra o no el borde izquierdo. | |
| ^border-top | true ''<nowiki>|</nowiki>'' false. (Valor por defecto “true”). Permite definir si se muestra o no el borde superior. | | ^ border-top | true ''%%|%%'' false. (Valor por defecto “true”). Permite definir si se muestra o no el borde superior. | |
| ^border-right | true ''<nowiki>|</nowiki>'' false. (Valor por defecto “true”). Permite definir si se muestra o no el borde derecho. | | ^ border-right | true ''%%|%%'' false. (Valor por defecto “true”). Permite definir si se muestra o no el borde derecho. | |
| ^border-bottom | true ''<nowiki>|</nowiki>'' false. (Valor por defecto “true”). Permite definir si se muestra o no el borde inferior. | | ^ border-bottom | true ''%%|%%'' false. (Valor por defecto “true”). Permite definir si se muestra o no el borde inferior. | |
| ^align | left ''<nowiki>|</nowiki>'' right ''<nowiki>|</nowiki>'' center ''<nowiki>|</nowiki>'' top ''<nowiki>|</nowiki>'' bottom. (Valor por defecto “left”). Puede ser una combinación de esos valores separados por ''<nowiki>|</nowiki>'' 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 ''<nowiki>|</nowiki>'' bottom, se descarta la combinación. center ''<nowiki>|</nowiki>'' top, ubicado al centro en la parte superior del frame. center, ubicado en el centro de la pantalla. center ''<nowiki>|</nowiki>'' left. Ubicado en el centro horizontal y a la derecha | | ^ 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. | | ^ 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. | | ^ 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. | | ^ 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. | | ^ 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. | | ^ 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. | | ^ 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. | | ^ 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. | | ^ 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. | | ^ 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. | | ^ 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. | | ^ 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//.| | ^ 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. | | ^ 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//.| | ^ 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 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 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-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//.| | ^ 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.| | ^ 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.| | ^ 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 ==== |
| |
| | \\ |
| | <code xml> |
| | <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> |
| | </code> |
| | |
| | <code xml> |
| | <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> |
| | </code> |
| | <code xml> |
| | <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> |
| | </code> |
| | \\ |
| ==== Atributos de animación ==== | ==== 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... | 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... |
| 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.\\ | 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^ | ^ 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.| | | **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. | | | **Behavior** | Define el comportamiento del control, es este caso su valor es bottom-sheet. | |
| |
| **Metodos para manejarlo por script**:\\ | **Metodos para manejarlo por script**:\\ |