Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anterior Revisión previa
Próxima revisión 		Revisión previa
wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_coll:start [2020/09/16 13:05]
ejetoro [Animaciones en Colecciones] 		wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_coll:start [2023/05/15 11:07] (actual)
ary [Efecto de zoom]
Línea 17: Línea 17:
 \\ \\
 \\ \\
-<WRAP round 80% center info>Se pueden combinar los atributos animation-in y animation-out como se quiera.\\ +<WRAP round 80% center info>**Se pueden combinar los atributos animation-in y animation-out como se quiera**.\\ 
 \\ \\
-Por ejemplo: <code xml>animation-in="##GROW##" animation-out="##ALPHA##"</code>+Por ejemplo: <code xml><coll ... animation-in="##GROW##" animation-out="##ALPHA##" ... /></code>
 \\ \\
-o definir uno solo de ellos y el que resta por definir tomará la animación por defecto del sistema operativo.</WRAP> +Si sólo se define  uno de ellos, el que resta por definir tomará la animación por defecto del sistema operativo.</WRAP> 
 \\ \\
-<WRAP round 80% tip>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.</WRAP>+<WRAP round 80% center tip>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.</WRAP>
 \\ \\
 \\ \\
Línea 132: Línea 132:
 </code> </code>
  
 +\\
 === Efecto de zoom === === Efecto de zoom ===
 \\ \\
Línea 146: Línea 147:
     </group>     </group>
 </coll> </coll>
 +
 +</code>
 +
 +<code xml>
 +
 +<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>
  
 </code> </code>