A partir de la v4.8.8.6 del framework de Android y las versiones del Framework de iOs que ya estaban disponibles con anterioridad, se ha implememntado incluir animaciones a nivel de colección para cuando se entra y se sale de un objeto en edición.

Estas se implementan definiendo los atributos de colección animation-in y animation-out, que pueden tomar los valores siguientes:

Efectos Valor del Atributo animation_in/out
Transparencia “##ALPHA##” o “##FADE##”
Entrada/salida por la izquierda “##LEFT##”
Entrada/salida por la derecha “##RIGHT##”
Entrada/salida por arriba “##TOP##”
Entrada/salida por abajo “##BOTTOM##”
Efecto de zoom “##ZOOM##”
Efecto de crecer/decrecer “##GROW##”



Se pueden combinar los atributos animation-in y animation-out como se quiera.

Por ejemplo:

<coll ... animation-in="##GROW##" animation-out="##ALPHA##" ... />


Si sólo se define uno de ellos, el que resta por definir tomará la animación por defecto del sistema operativo.


Es recomendable desactivar el cuadro de diálogo de “Cargando…” que pone la ventana cuando está pintando todavía los controles, con el atributo load-wait=“false” del nodo <app>, para evitar se observe flash al lanzar la ventana, puesto que suele ser muy rápido pintando.



Efecto de Transparencia


Atributo Valor del atributo
animation_in / animation_out “##ALPHA##” o “##FADE##”


Ejemplo:

<coll name="Alpha" animation-in="##ALPHA##" animation-out="##ALPHA##" bgcolor="#000000" notab="true" special="true">
    <group name="General" id="1" align="center" bgcolor="#000000">
        <prop name="MAP_SALIR" type="B" title="Salir" width="80%" height="10%" visible="7" onclick="ui.getView().exit();" />
    </group>
</coll>



Entrada/salida por la izquierda


Atributo Valor del atributo
animation_in / animation_out “##LEFT##”


Ejemplo:

<coll name="LeftInLeftOut" animation-in="##LEFT##" animation-out="##LEFT##" bgcolor="#000000" notab="true" special="false" show-toolbar="false" check-owner="false" dependent="false">
    <group name="General" id="1" align="center" bgcolor="#000000">
        <prop name="MAP_SALIR" type="B" title="Salir" width="80%" height="10%" visible="7" onclick="ui.getView().exit();" />
    </group>
</coll>


Entrada/salida por la derecha


Atributo Valor del atributo
animation_in / animation_out “##RIGHT##”


Ejemplo:

<coll name="RightInRightOut" animation-in="##RIGHT##" animation-out="##RIGHT##" bgcolor="#000000" notab="true" special="false" show-toolbar="false" check-owner="false" dependent="false">
    <group name="General" id="1" align="center" bgcolor="#000000">
        <prop name="MAP_SALIR" type="B" title="Salir" width="80%" height="10%" visible="7" onclick="ui.getView().exit();" />
    </group>
</coll>


Entrada/salida por arriba


Atributo Valor del atributo
animation_in / animation_out “##TOP##“


Ejemplo:

<coll name="RightInRightOut" animation-in="##TOP##" animation-out="##TOP##" bgcolor="#000000" notab="true" special="false" show-toolbar="false" check-owner="false" dependent="false">
    <group name="General" id="1" align="center" bgcolor="#000000">
        <prop name="MAP_SALIR" type="B" title="Salir" width="80%" height="10%" visible="7" onclick="ui.getView().exit();" />
    </group>
</coll>


Entrada/salida por abajo


Atributo Valor del atributo
animation_in / animation_out ”##BOTTOM##“


Ejemplo:

<coll name="RightInRightOut" animation-in="##BOTTOM##" animation-out="##BOTTOM##" bgcolor="#000000" notab="true" special="false" show-toolbar="false" check-owner="false" dependent="false">
    <group name="General" id="1" align="center" bgcolor="#000000">
        <prop name="MAP_SALIR" type="B" title="Salir" width="80%" height="10%" visible="7" onclick="ui.getView().exit();" />
    </group>
</coll>


Efecto de crecer/decrecer


Atributo Valor del atributo
animation_in / animation_out ”##GROW##”


Ejemplo:

<coll name="Grow" animation-in="##GROW##" animation-out="##GROW##" bgcolor="#000000" notab="true" special="false" show-toolbar="false" check-owner="false" dependent="false">
    <group name="General" id="1" align="center" bgcolor="#000000">
        <prop name="MAP_SALIR" type="B" title="Salir" width="80%" height="10%" visible="7" onclick="ui.getView().exit();" />
    </group>
</coll>


Efecto de zoom


Atributo Valor del atributo
animation_in / animation_out “##ZOOM##“


Ejemplo:

<coll name="ZoomInZoomOut" animation-in="##ZOOM##" animation-out="##ZOOM##" bgcolor="#000000" notab="true" special="false" show-toolbar="false" check-owner="false" dependent="false">
    <group name="General" id="1" align="center" bgcolor="#000000">
        <prop name="MAP_SALIR" type="B" title="Salir" width="80%" height="10%" visible="7" onclick="ui.getView().exit();" />
    </group>
</coll>
<coll name="EspecialBasicosPlus" title="XoneCollvacia" sql="" objname="" updateobj="" progid="" special="true" group-swipe="true" animation-in="##LEFT_IN##" animation-out="##LEFT_OUT##" >
      <group name="HEADER" id="10" fixed="true" orientation="top" width="100%" height="120p">
        <frame name="frmtitulo" class="frmsuperior">  
          <prop name="SALIR" type="B" class="btvolversuper" />
          <prop name="MENU" type="TL" class="tlsuper" title="Basicos Plus" />
          <prop name="MAP_COLORACTIVO" type="T" visible="0" />
 
 
        </frame>
      </group>
      <group name="FOOTER" id="0" class="groupfixed_footer">
        <prop name="MAP_GROUP" type="N" visible="0" />
        <prop name="MAP_TOTAL_PAGES" type="N" visible="0" />
        <frame name="FLOAT_FOOTER_FRAME" class="frmsuperior">
          <prop name="MAP_LAST" type="B" img="last.png" title="Anterior" onclick="javascript:prev(self,'ir'); ui.refresh('MAP_LAST', 'MAP_NEXT', 'MAP_LAST_EMPTY');" methodx="ExecuteNode(anterior)" forecolor="#FFFFFF" width="45%" height="80%" labelwidth="1" imgsel="last-sel.png" disablevisible="MAP_GROUP=1" />
          <prop name="MAP_LAST_EMPTY" type="B" bgcolor="#00000000" width="45%" height="80%" labelwidth="1" newline="false" disablevisible="MAP_GROUP&gt;1" />
          <prop name="MAP_NEXT" type="B" img="next.png" title="Siguiente " onclick="javascript:next(self,'ir'); ui.refresh('MAP_LAST', 'MAP_NEXT', 'MAP_LAST_EMPTY');" methodx="ExecuteNode(siguiente)" forecolor="#FFFFFF" width="45%" height="80%" labelwidth="1" newline="false" lmargin="6%" imgsel="next-sel.png" disablevisible="MAP_GROUP=MAP_TOTAL_PAGES" />
        </frame>
      </group>
      <group name="Group1_Reproducir" id="1">
        <prop name="MAP_ETQ11" type="TL" class="classtl" title="MESSAGEBOX PERSONALIZADO" tmargin="20p" />
        <prop name="MAP_ETQ12" type="TL" label-wrap="true" title="El comando ui.msgBox para mostrar un mensaje al usuario, puede ser personalizado de forma simple utilizando una colección que defina la apariencia del mensaje." width="96%" lmargin="2%" tmargin="10p" />
        <prop name="MAP_ETIQ13" type="TL" class="classtl" title="Ejemplos de MsgBox personalizado" tmargin="20p" />
        <prop name="MAP_ETIQMSG1" type="TL" title="MsgBox con OK" tmargin="30p" lmargin="2%" width="76%" />
        <prop name="MAP_BTMSG1" type="B" width="112p" height="112p" lmargin="2%" tmargin="20p" img="msgbox_1.png" newline="false" method="ExecuteNode(showmsgbox(1))" />
        <prop name="MAP_ETIQMSG2" type="TL" title="MsgBox con Sí y No" tmargin="30p" lmargin="2%" width="76%" />
        <prop name="MAP_BTMSG2" type="B" width="112p" height="112p" lmargin="2%" tmargin="20p" img="msgbox_2.png" newline="false" method="ExecuteNode(showmsgbox(2))" />
        <prop name="MAP_ETIQMSG3" type="TL" title="MsgBox con Aceptar y Cancelar" tmargin="30p" lmargin="2%" width="76%" />
        <prop name="MAP_BTMSG3" type="B" width="112p" height="112p" lmargin="2%" tmargin="20p" img="msgbox_4.png" newline="false" method="ExecuteNode(showmsgbox(4))" />
        <prop name="MAP_ETQ14" type="TL" class="classtl" title="VALOR DEVUELTO POR EL MSGBOX" tmargin="10p" />
        <prop name="MAP_VALORDEVUELTO" type="T" width="96%" lmargin="2%" tmargin="20p" labelwidth="0" />
      </group>
      <group name="Group2_FirmaDR" id="2">
        <prop name="MAP_COLOR_TRAZO" visible="0" type="T" />
        <prop name="MAP_COLOR_FONDO" visible="0" type="T" />
        <prop name="MAP_TAMANO_TRAZO" visible="0" type="N" mapcol-values="2,5,10,15,20,30,40,50,80" />
        <prop name="MAP_TOOLBARVISIBILITY" visible="0" type="N" />
        <frame name="control" width="100%" height="80%" class="FrameAnimateFromTop" align="center">
          <prop name="MAP_ETIQ14" type="TL" class="classtl" title="Ejemplo de firma" tmargin="20p" width="90%" lmargin="0"/>
          <prop name="MAP_PROP_CAMARA" type="B" visible="1" width="50%" height="80p" labelwidth="6" title="test" onclick="javascript:doDRCamera();" />
 
          <prop name="DIBUJO" type="DR"  img="xone.png" stroke-width="##FLD_MAP_TAMANO_TRAZO_DESPLEGABLE##" stroke-color="##FLD_MAP_COLOR_TRAZO##" bgcolor="##FLD_MAP_COLOR_FONDO##" apply-format-to-file="true" width="90%" height="90%" />
        </frame>
        <frame name="Acciones" width="100%" height="20%" bgcolor="#F2F2F2"  class="FrameAnimateFromBottom" align="center">
          <prop name="MAP_BT_SHOW_TOOLBAR" newline="true" type="B" class="Firma_Dibujo_boton" img="./icons/config_negro.png" method="ExecuteNode(toolbarvisibility)" />
          <prop name="MAP_BT_SAVE" type="B" class="Firma_Dibujo_boton" img="./icons/grabar_negro.png" lmargin="5%" method="ExecuteNode(guardar)" />
          <prop name="MAP_BT_CLEAR" type="B" class="Firma_Dibujo_boton" img="./icons/cancelar_negro.png" lmargin="5%" method="ExecuteNode(borrar)" />
        </frame>
 
        <frame name="ToolbarFloating" top="100p" left="8%" floating="true" class="FrameAnimateFromRight" disablevisible="MAP_TOOLBARVISIBILITY=0" width="84%" height="600p" bgcolor="#CCCCCC" framebox="true">
          <frame name="ToolbarColoresTrazo" width="100%" height="180px" tmargin="100px" >
            <prop name="MAP_BT_TRAZO" type="B" class="Firma_Dibujo_boton" lmargin="4%" img="./icons/editar_negro.png" bgcolor="#FFFFFF" locked="true" />
            <prop name="MAP_BT_TRAZO_BLANCO" width="64p" type="B" class="Firma_Dibujo_boton" bgcolor="#FFFFFF" lmargin="4%" method="ExecuteNode(cambiarcolortrazo('#FFFFFF'))" />
            <prop name="MAP_BT_TRAZO_NEGRO" width="64p" type="B" class="Firma_Dibujo_boton" bgcolor="#000000" method="ExecuteNode(cambiarcolortrazo('#000000'))" />
            <prop name="MAP_BT_TRAZO_ROJO" width="64p" type="B" class="Firma_Dibujo_boton" bgcolor="#FF0000" method="ExecuteNode(cambiarcolortrazo('#FF0000'))" />
            <prop name="MAP_BT_TRAZO_AZUL" width="64p" type="B" clfass="Firma_Dibujo_boton" bgcolor="#0000FF" method="ExecuteNode(cambiarcolortrazo('#0000FF'))" />
            <prop name="MAP_BT_TRAZO_VERDE" width="64p" type="B" class="Firma_Dibujo_boton" bgcolor="#00FF00" method="ExecuteNode(cambiarcolortrazo('#00FF00'))" />
            <prop name="MAP_TRAZO_LINEA" type="B" class="Firma_Dibujo_boton" tmargin="34px" width="96%" height="2px" img="./icons/pixelnegro.png" newline="true" locked="true" />
          </frame>
          <frame name="ToolbarColoresFondo" width="100%" height="180px">
            <prop name="MAP_BT_FONDO" type="B" class="Firma_Dibujo_boton" lmargin="4%" img="./icons/relleno_negro.png" bgcolor="#FFFFFF" locked="true" />
            <prop name="MAP_BT_FONDO_BLANCO" width="64p" type="B" class="Firma_Dibujo_boton" bgcolor="#FFFFFF" lmargin="4%" method="ExecuteNode(cambiarcolorfondo('#FFFFFF'))" />
            <prop name="MAP_BT_FONDO_NEGRO" width="64p" type="B" class="Firma_Dibujo_boton" bgcolor="#000000" method="ExecuteNode(cambiarcolorfondo('#000000'))" />
            <prop name="MAP_BT_FONDO_ROJO" width="64p" type="B" class="Firma_Dibujo_boton" bgcolor="#FF0000" method="ExecuteNode(cambiarcolorfondo('#FF0000'))" />
            <prop name="MAP_BT_FONDO_AZUL" width="64p" type="B" class="Firma_Dibujo_boton" bgcolor="#0000FF" method="ExecuteNode(cambiarcolorfondo('#0000FF'))" />
            <prop name="MAP_BT_FONDO_VERDE" width="64p" type="B" class="Firma_Dibujo_boton" bgcolor="#00FF00" method="ExecuteNode(cambiarcolorfondo('#00FF00'))" />
            <prop name="MAP_FONDO_LINEA" type="B" class="Firma_Dibujo_boton" tmargin="26px" width="96%" height="2px" img="./icons/pixelnegro.png" newline="true" locked="true" />
          </frame>
          <frame name="ToolbarTamanoTrazo" width="100%" height="180px" align="center">
            <prop name="MAP_TAMANO_TRAZO_TEXT" lmargin="0" width="70%" type="TL" title="Tamaño del Trazo: " labelbox="false" />
            <prop name="MAP_TAMANO_TRAZO_DESPLEGABLE" img-width="48p" img-height="48p" width="100p" type="T" newline="false" visible="1" title="" labelwidth="0" linkedto="MAP_TAMANO_TRAZO" linkedfield="DATA" showinline="true" onchange="ExecuteNode(cambiartamanotrazo)" />
          </frame>
        </frame>
 
        <frame name="ToolbarFloatingClose" top="115p" left="594p" floating="true" class="FrameAnimateFromRight" disablevisible="MAP_TOOLBARVISIBILITY=0" width="60px" height="60px">
          <frame name="ToolbarFloatingClose1" width="100%" height="100%">
            <prop name="MAP_FLOATING_CLOSE" visible="1" class="Firma_Dibujo_boton" type="B" lmargin="0" width="60px" height="60px" img="./icons/cerrar_frame.png" method="ExecuteNode(toolbarvisibility)" />
          </frame>
        </frame>
      </group>
      <create>
        <action name="runscript">
          <script language="javascript">
				//Inicialización de valores para la pestaña de firma DR
				self.MAP_COLOR_TRAZO = "#000000";
				self.MAP_COLOR_FONDO = "#A58855";
				self.MAP_TAMANO_TRAZO_DESPLEGABLE = "30";
				self.MAP_TOOLBARVISIBILITY = 0;
			</script>
        </action>
      </create>
      <before-edit>
        <action name="runscript">
          <script language="javascript">			
				self.MAP_GROUP=1;
				self.MAP_TOTAL_PAGES=2;
			</script>
        </action>
      </before-edit>
      <!-- ************************************************** -->
      <!--   ACCIONES DE LA PESTAÑA 1, MSGBOX PERSONALIZADO   -->
      <!-- ************************************************** -->
      <showmsgbox show-wait-dialog="false">
        <action name="runscript">
          <param name="tipo" />
          <script language="javascript">
				var vSelected=0;
				switch (tipo){
				case "1":
 
					vSelected=userMsgBox("Titulo 1", "Mensaje que queremos mostrar en el medio de la ventana para que lo acepte el usuario", "1");
					break;
				case "2":
					vSelected=userMsgBox("Titulo 2", "Mensaje que queremos mostrar en el medio de la ventana y que el usuario nos diga SI ó NO a lo que sea", "2");
					break;
				case "4":
					vSelected=userMsgBox("Titulo 4", "Mensaje que queremos mostrar en el medio de la ventana para que el usuario lo ACEPTE ó CANCELE", "4");
					break;
				default: 
					vSelected=99;
					break;
				}
				self.MAP_VALORDEVUELTO=vSelected.toString();
				ui.refresh("MAP_VALORDEVUELTO");
			</script>
        </action>
      </showmsgbox>
      <!-- ************************************************** -->
      <!--         ACCIONES DE LA PESTAÑA 2,   FIRMA DR       -->
      <!-- ************************************************** -->
      <toolbarvisibility show-wait-dialog="false">
        <action name="runscript">
          <script language="javascript">
				if( self.MAP_TOOLBARVISIBILITY == 0){
					self.MAP_TOOLBARVISIBILITY = 1;
				}else{
					self.MAP_TOOLBARVISIBILITY = 0;
				}
				ui.refresh("ToolbarFloatingClose,ToolbarFloating,ToolbarColoresTrazo,ToolbarColoresFondo,ToolbarTamanoTrazo,ToolbarFloatingClose,ToolbarFloatingClose1");
			</script>
        </action>
      </toolbarvisibility>
      <cambiarcolortrazo show-wait-dialog="false" refresh-prop="DIBUJO">
        <action name="runscript">
          <param name="color" />
          <script language="javascript">
				self.MAP_COLOR_TRAZO = color;
			</script>
        </action>
      </cambiarcolortrazo>
      <cambiarcolorfondo show-wait-dialog="false" refresh-prop="DIBUJO">
        <action name="runscript">
          <param name="color" />
          <script language="javascript">
				self.MAP_COLOR_FONDO = color;
			</script>
        </action>
      </cambiarcolorfondo>
      <cambiartamanotrazo show-wait-dialog="false" refresh-prop="DIBUJO">
        <action name="runscript">
          <script language="javascript"></script>
        </action>
      </cambiartamanotrazo>
      <guardar show-wait-dialog="false" refresh-prop="DIBUJO">
        <action name="runscript">
          <script language="javascript">
				//Opcional: Acepta un segundo parámetro, nombre de fichero
				ui.saveDrawing("DIBUJO");
				//Comprobación extra, ver si se ha guardado correctamente
				var FileManager = createObject("FileManager");
				var path = appData.filesPath + self.DIBUJO.toString();
				var result = FileManager.fileExists(path);
				if ( result == 0){
					ui.showToast("Fichero " + path + " guardado correctamente");
				}else{
					ui.showToast("Error al guardar fichero " + path);
				}
				FileManager = null;
			</script>
        </action>
      </guardar>
      <borrar show-wait-dialog="false" refresh-prop="DIBUJO">
        <action name="runscript">
          <script language="javascript">
				ui.clearDrawing("DIBUJO");
			</script>
        </action>
      </borrar>
      <!-- ************************************************** -->
      <!--      ACCIONES DE ANTERIOR, SIGUIENTE Y SALIR       -->
      <!-- ************************************************** -->
      <!--
      <ir show-wait-dialog="false">
        <action name="runscript">
          <param name="index" />
          <script language="javascript">
				ui.showGroup(index,"##ALPHA_IN##",500,"##ALPHA_OUT##",500);
				self.MAP_GROUP = index;
			</script>
        </action>
      </ir>
      <anterior show-wait-dialog="false">
        <action name="runscript">
          <script language="javascript">
				if (self.MAP_GROUP &gt; 1) {
					self.executeNode("ir",self.MAP_GROUP-1);
				}
			</script>
        </action>
      </anterior>
      <siguiente show-wait-dialog="false">
        <action name="runscript">
          <script language="javascript">
				if (self.MAP_GROUP &lt; self.MAP_TOTAL_PAGES) {
					self.executeNode("ir",self.MAP_GROUP+1);
				}
			</script>
        </action>
      </siguiente>
      -->
      <onback show-wait-dialog="false">
        <action name="runscript">
          <script language="javascript">
				appData.failWithMessage(-11888,"##EXIT##");
			</script>
        </action>
      </onback>
    </coll>