{{indexmenu_n>1}}
===== Nodo GROUP =====
\\
Los Group son las %%pestañas%% que nos aparecerán cuando creamos un nuevo objeto o editamos un objeto existente de la colección, a cada grupo se le asigna un ID, que es utilizado para definir en los campos a que pestaña pertenece dicho campo.

Si no se indica grupo para una propiedad, la capa de datos siempre hará pertenecer las propiedades al primer grupo definido en la colección.

<WRAP center centeralign >
|< 80% 33% 33% 33% >|
|  {{:wiki:2.-desarrollo-app:2.3.-codigo:a.-estructura-xml:3.-nodo-group:screenshot_20190621-104616.png?240&nolink}}  |  {{:wiki:2.-desarrollo-app:2.3.-codigo:a.-estructura-xml:3.-nodo-group:screenshot_20190621-104651.png?240&nolink}}  |  {{:wiki:2.-desarrollo-app:2.3.-codigo:a.-estructura-xml:3.-nodo-group:screenshot_20200226-102338.png?230&nolink}}  |
</WRAP>
====Ejemplo de definición de groups====
<code xml>
  <group name="General" id="1"></group>
  <group name="Actividad" id="2"></group>
  <group name="Cobro" id="3"></group>
  <group name="Ventas" id="4"></group>
  <GROUP name=”” id=”” disableedit=”” disablevisible=”” imgbk=”” bgcolor=””/>\\
</code>
\\
El nodo GROUP a nivel visual son las pestañas de la edición de un objeto. \\
\\
====Atributos del nodo GROUP====
<WRAP center >
<datatables>
|< 90% 18% 82% >|
^ ATRIBUTO                      ^ DESCRIPCION                                                                                                                                                                                                     ^
| **name**                      | Caption o literal que se verá en la pestaña.                                                                                                                                                                    |
| **id**                        | Valor %%numérico%% que va a identificar %%de forma única%% a ese grupo/pestaña.                                                                                                                                 |
| **disableedit**               | %%Si se cumple la condición%%, deshabilita la edición de todas las propiedades/campos de la pestaña. IMPORTANTE, no dejar espacios entre el campo y el valor de la condición, por ejemplo: "ESTADO=1"           |
| **disablevisible**            | Similar al anterior, pero en este caso, %%Si se cumple la condición%%, la pestaña ni siquiera se muestra. Al igual que ocurre con el disableedit, NO dejar espacios entre el campo y el valor de la condición.  |
| **imgbk="fondo.png"**         | Imagen a mostrar de fondo en la pestaña. Cuando convive el atributo imgbk con bgcolor, prevalece el valor de imgbk.                                                                                             |
| **bgcolor="#FFFFFF"**         | Color de fondo de la pestaña en RGB.                                                                                                                                                                            |
| **tab-width="50%"**           | Permite definir el ancho de una pestaña. Por defecto toma el valor "33%".                                                                                                                                       |
| **fixed="true|false"**        | Pestaña fija que se muestra siempre, aunque navegues por el resto de pestañas.                                                                                                                                  |
| **height="10%"**              | Solo se utiliza en grupos fixed=”true”.Indica el alto de la ventana a mostrar.                                                                                                                                  |
| **width="100%"**              | Solo se utiliza en grupos fixed=”true”.Indica el ancho de la ventana a mostrar.                                                                                                                                 |
| **orientation="top|bottom"**  | Solo se utiliza en grupos fixed=”true”.Indica donde se va a mostrar el grupo bloqueado.                                                                                                                         |
| **animation-in**              | Animación que se produce cuando se entra en el grupo.                                                                                                                                                           |
| **animation-out**             | Animación que se produce cuando se sale del grupo.                                                                                                                                                              |
</datatables>
</WRAP>

Todas las propiedades donde se ponga group="Valor" pertenecerán a ese grupo.\\
\\
**Ejemplo:**
<code xml>
  <group name="General" id="1" disableedit="ESTADO=1 OR VISIBLE='TRUE'" />  
  <prop name="CODIGO" ... group="1">    
<!-- 
	Esto indica que el campo código se verá en la pestaña "General".
	En lugar de deshabilitar un campo concreto, podemos poner una regla a nivel de group para que TODOS los campos
	de dicha pestaña estén deshabilitados. 
-->
</code>

<WRAP center round tip 80%>
\\
Para deshabilitar todas las propiedades de una pestaña, a nivel de GROUP, podemos poner una regla que se cumpla siempre.\\
Por ejemplo: **<group name="Cobro" id="3" disableedit="1=1" />**
</WRAP>

====Atributos a nivel de COLL====
<WRAP center >
|< 90% 22% 78% >|
^ ATRIBUTO                          ^ DESCRIPCIÓN                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ^
| **notab=”true|false”**            | Por defecto es “false”. Si se pone a “true”, oculta todas las pestañas de la edición. Ésto no quiere decir que no podamos ir "de una pestaña a otra" con botones o haciendo "swipe" con el dedo, simplemente es que el usuario no las ve en pantalla y no puede pulsarlas directamente.                                                                                                                                                                                                                                                                            |
| **group-swipe="true|false"**      | Por defecto a true, nos permite pasar de una pestaña a otra pasando con el dedo como si de una hoja de papel se tratara. Si lo ponemos a false, y se combina con notab="true", el usuario ya no podrá cambiar de una pestaña a otra, de forma que el programador tendrá que hacer botones que muestren una pestaña u otra.                                                                                                                                                                                                                                         |
| **tab-orientation=”top|bottom”**  | Indica donde se van a mostrar las pestañas en pantalla. Arriba o abajo. Por defecto arriba.                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| **group-theme="material"**        | Es un nuevo tema en los tabs de los grupos. Se activa con el atributo a nivel de colección de **group-theme="material"**. \\ Puede ser de dos tipos **fijo ** o **escroleable**:\\  - **Fijo** significa que pondrá todos los tabs en lo ancho de la pantalla para que no se tenga que hacer scroll con el atributo. Mediante el atributo tab-mode="fixed".\\ - **Escroleable** significa que dibujará los tabs según lo que ocupe su título, uno al lado del otro y si no caben en pantalla se habilitará el scroll. Mediante el atributo tab-mode="scrollable".  |
</WRAP>

<WRAP round center important 80%>
Si tenemos varios **GROUP** se mostrarán en pantalla por orden de aparición en el código, **NO** por su ID.
</WRAP>

==== GRUPO FIJO ====
Se ha definido una forma de dejar un grupo fijo (pestaña), fija en todas las pantallas de una colección, de forma que lo que cambia cuando cambiamos a otra "pantalla" sea únicamente el contenido que no es "fijo".\\
\\
Por el momento solamente es posible poner grupos fijos en la parte de arriba y de abajo. Útil cuando queremos dejar una cabecera de navegación ó un pie de opciones en pantalla.\\
\\
La definición del grupo fijo se realiza con los atributos a nivel de GROUP: **fixed="true"** y **orientation="top|bottom"**.\\
\\
Una vez definido el grupo fijo con un tamaño, el espacio restante pasará a tomarse como el 100% de la pantalla, es decir, NO se debe contar con lo que ocupa el grupo fijo.\\
\\
<code xml>
<group name="HEADER" id="10" fixed="true" orientation="top" width="100%" height="7%">
	<prop name="SALIR" type="B" class="btsalirsuper" />
	<prop name="MENU" type="TL" class="tlsuper" title="BASICOS" />
	<prop name="BTMENU" type="B" class="btmenuicon" method="ExecuteNode(onback)" />
</group>

</code>


==== GRUPO DESPLEGABLE. DRAWER. ====
Un drawer, es un grupo de controles que es invisible hasta que se saca arrastrando con el dedo desde uno de los bordes laterales de la pantalla.\\
\\
El grupo drawer se puede desplegar mientras se esté en cualquier grupo de la colección.\\
\\
Cuando el drawer está desplegado, a lo que hay detrás se le aplica una capa semitransparente que oscurece el fondo. Al hacer click sobre la capa semitransparente se oculta el drawer.\\
\\

<WRAP center centeralign >
|< 80% 33% 33% 33% >|
|  {{:wiki:2.-desarrollo-app:2.3.-codigo:a.-estructura-xml:3.-nodo-group:gamesimag.png?260&nolink}}  |  {{:wiki:2.-desarrollo-app:2.3.-codigo:a.-estructura-xml:3.-nodo-group:screenshot_20200226-110230.png?260&nolink}}  |
</WRAP>
\\
\\
<WRAP center round tip 60%>
Para que un grupo se comporte como DRAWER se tiene que definir el atributo **drawer-orientation**="left o right" en la declaración del grupo, este atributo indica que el grupo es un drawer y desde donde se despliega. 
</WRAP>
\\
=== Atributos XML ===
\\
^ ATRIBUTOS ^ DESCRIPCIÓN ^
| drawer-orientation | Valores: **left** o **right**. Indica que el grupo es un drawer y desde donde se despliega. |
| width | Ancho en píxeles o porcentaje del grupo desplegable. |
| height| Alto en píxeles o porcentaje del grupo desplegable. |
\\
**Declaración**
\\
<code javascript>
<group name="Drawer" id="99" drawer-orientation="left" width="70%" height="100%">
	<prop .... />
</group>
</code>

\\
=== Métodos Drawer ===
\\
^ MÉTODO ^ DESCRIPCIÓN ^
| ui.showGroup( "param1" ,“param2”, param3 ,“param4”,param5 ) | param1: (cadena), Grupo que queremos mostrar. \\ param2: (cadena), animación de entrada. \\ param3: (entero), duración de entrada. \\ param4: (cadena), animación de salida. \\ param5: (entero), duración de salida. |
| ui.hideGroup(idGrupo) | Como parámetro hay que indicarle el grupo que queremos ocultar. |
| ui.toggleGroup(grupo) | Como parámetro hay que indicarle el grupo que queremos mostrar/ocultar. Actúa como un interruptor, si el grupo está visible lo oculta y si está oculto, lo despliega. |
| ui.lockGroup(idGrupo,close) | Como parámetros hay que indicarle el grupo que queremos bloquear y en qué estado lo queremos bloquear, visible u oculto. Este segundo parámetro es close(booleano) de forma que **true** lo bloqueará cerrado u oculto y **false** lo bloqueará desplegado ó visible. |
| ui.unlockGroup(idGrupo) | Como parámetro hay que indicarle el grupo que queremos desbloquear. |
\\
<code javascript>
function irGrupo(grupo){
    ui.showGroup(grupo,'##RIGHTN##',1000,'##RIGHTN_OUT##',200);
}
function ocultarGrupo(grupo){
    ui.hideGroup(grupo);
}
function MostrarGrupo(grupo){
    ui.toggleGroup(grupo);
}

</code>
\\
**Ejemplo de uso:**
<code javascript>
<coll name="Drawer" title="Entrada de la aplicacion" notab="true" editmask="0" special="true">
    <group name="Drawer" id="999" drawer-orientation="left" class="xnFondoDrawerC">
        
    <prop name="MAP_IMAGE_DRAWER" type="IMG" visible="1" class="xnDrawarImageC" />
        
                                
        <prop name="MAP_BT_OPCION1_DR" title="Menu" type="B" visible="1" onclick="javascript:irOpcion(0,5,'fmrOpcion',1);ocultarGrupo(999);" xonclick="javascript:irColl(ListaPresupuesto)" class="xnTituloDrawerC" />
       <prop name="MAP_BT_OPCION2_DR" title="Clientes" type="B" visible="1" onclick="javascript:irColl('ListaClientes');ocultarGrupo(999);" class="xnTituloDrawerC" /> 
        <prop name="MAP_BT_OPCION3_DR" title="Proveedores" type="B" visible="1" onclick="javascript:irColl('ListaProveedores');ocultarGrupo(999);" class="xnTituloDrawerC" /> 
        <prop name="MAP_BT_OPCION4_DR" title="Artículos" type="B" visible="1" onclick="javascript:irColl('ListaArticulos');ocultarGrupo(999);" class="xnTituloDrawerC" />
        <prop name="MAP_BT_OPCION5_DR" title="Presupuestos" type="B" visible="1" onclick="javascript:irColl('ListaPresupuestos');ocultarGrupo(999);" class="xnTituloDrawerC" />
        <prop name="MAP_BT_OPCION6_DR" title="Pedidos" type="B" visible="1" onclick="javascript:irColl('ListaPedidos');ocultarGrupo(999);" class="xnTituloDrawerC" />
       
        <prop name="MAP_BT_OPCION7_DR" tmargin="15p" title="Huella Dactilar" type="B" visible="1" method="ExecuteNode(assignarHuella)" xonclick="javascript:irOpcion(1,7,'fmrOpcion',1);ocultarGrupo(999);" class="xnTituloDrawerC" />                                                       
        <prop name="MAP_BT_SALIR_DR" title="Salir" type="B" visible="1" method="executenode(onback)" class="xnTituloDrawerC" />
         
    </group>
    
    <group name="Menu" id="1" width="100%" height="100%" bgcolor="#B60F55" class="xnFondoGroupC">
        <frame name="frmGeneral" class="xnBackgroundC" width="100%" height="100%" Xbgcolor="#00CC0000">
            <frame name="frmTop" class="xnHeaderC" width="100%" height="8%" Xdisablevisible="MAP_SELECCION&lt;&gt;1" framebox="false">
                <prop name="MAP_BT_MENU" type="B" visible="1" method="ExecuteNode(abrirDrawer(999))" class="xnButtonMenuHeaderC" />
                <prop name="MAP_TLTOP" type="TL" visible="1" title="PRESUPUESTOS" class="xnTituloHeaderC"  newline="false"  xbgcolor="#b60055" />
               
            </frame>
        </frame>
        
        <prop name="MAP_SHOWMENU" visible="0" type="N" />
        <prop name="MAP_SELECCION" visible="0" type="N" />
        <prop name="MAP_SELECTORS_VISIBLE" visible="0" type="N" />
        <prop name="MAP_SELECTOR_BGCOLOR" visible="0" type="T" />
        <prop name="MAP_SELECTOR_BGCOLOR2" visible="0" type="T" />
        <prop name="MAP_SELECTOR_BGCOLOR3" visible="0" type="T" />
        <prop name="MAP_SELECTOR_BGCOLOR4" visible="0" type="T" />
        <prop name="MAP_SELECTOR_BGCOLOR5" visible="0" type="T" />
        <prop name="MAP_HUELLADACTILAR" visible="0" type="N" />
        <prop name="MAP_DOPDF" visible="0" type="N" />
      </group>
    
     
    <before-edit>
        <action name="runscript">
            <script language="javascript"> 
                self.MAP_DOPDF = 0;
                self.MAP_SELECTOR_BGCOLOR = "#ffffff";
                self.MAP_SELECTOR_BGCOLOR2 = "#00000000";
                self.MAP_SELECTOR_BGCOLOR3 = "#00000000";
                self.MAP_SELECTOR_BGCOLOR4 = "#00000000";
                self.MAP_SELECTOR_BGCOLOR5 = "#00000000";
                self.MAP_HUELLADACTILAR = 0;       
                self.MAP_CONTADOR1=1;
                
                try{
    				if(!isWatch() &amp;&amp; fingerprintManager !== "undefined"){
        				if(fingerprintManager != null){
                            if (fingerprintManager.isHardwareAvailable())
                            {
                          		self.MAP_T_HUELLADACTILAR_IFO = "Su dispositivo soporta la lectura de huella dactilar, pulse el boton para asignar una huella al usuario actual.";
                          		self.MAP_HUELLADACTILAR = 1;
                            }else{
                            self.MAP_T_HUELLADACTILAR_IFO = "Su dispositivo no soporta la lectura de huella dactilar.";
                            }
        				}
    				}
                }catch(ex){
                    self.MAP_T_HUELLADACTILAR_IFO = "Su dispositivo no soporta la lectura de huella dactilar.";
				}
                
            </script>
        </action>
    </before-edit>
 
    <onback show-wait-dialog="false" refresh="false">
        <action name="runscript">
            <script language="javascript">
        		appData.failWithMessage(-11888, "##EXITAPP##");
            </script>
        </action>
    </onback>
    
   
    
    <abrirDrawer show-wait-dialog="false" refresh="false">
        <action name="runscript">
            <param name="grupo" />
            <script language="javascript">
				ui.startReplica();
                irGrupo(grupo);
                ui.refresh("MAP_IMAGE_DRAWER");
            </script>
        </action>
    </abrirDrawer>
    
    <menu show-wait-dialog="false" refresh="false">
        <action name="runscript">
            <param name="parametro" />
            <script language="javascript">
      		    ui.showToast("Ha seleccionado la opción " + parametro);
		    </script>
        </action>
    </menu>
    
    <abrirColl show-wait-dialog="false" refresh="false">
        <action name="runscript">
            <param name="coll" />
            <script language="javascript">
				ui.startReplica();
                irColl(coll);
            </script>
        </action>
    </abrirColl>
    
   <assignarHuella>
        <action name="runscript" >
            <script language="javascript">
                if(getOS() == "IOS"){
                    doRegisterNewFingerprintIOS();
                }else{
        		    doRegisterNewFingerprint();
                }
            </script>
        </action>
    </assignarHuella>

</coll>

</code>