This element, UserInterface, is part of the appData object, having own characteristics which make it has been described below.

Within this scope, we can find functions that allow us to interact with the user or with the physical device, by allowing enabling or unabling peripherals, printing, sound notifications or more basic functionalities as amsgbox.

It is possible to call the methods with ui.nombremetodo, instead using the former appdata.userinterface.

It shows a message windows at the corresponding UI.

Depending on the platform also we can take a text by the console of the system like a trace.

The values of the options have been normalized according to those defined for Windows, so they can be used at any of the platforms with same meaning, since the machinery is responsible for translating the meanings.

<mensajes show-wait-dialog="false">
  <action name="runscript">
	<script language="VBScript">
	Dim vResult
 
	Select Case this("MAP_TIPO_MENSAJE")
	Case "MsgBox0"
		ui.MsgBox "Mensaje Informativo solo con OK","Titulo Ventana",0
	Case "MsgBox1"
		'Si pulsa ACEPTAR vale 1 y si pulsa CANCELAR vale 2
		vResult =ui.MsgBox ("Pregunta si ACEPTAR o CANCELAR","Advertencia",1)
		ui.MsgBox "Ha pulsado el botón con valor: "+cstr(vResult),"Titulo Ventana",0
	Case "MsgBox4"
		'Si pulsa SI vale 6 y si pulsa NO vale 7
		vResult =ui.MsgBox ("Pregunta SI ó NO","Advertencia",4)
		ui.MsgBox "Ha pulsado el botón con valor: "+cstr(vResult),"Titulo Ventana",0
	End Select
	</script>
  </action>
</mensajes> 

Only Android. This method allows to send an email by filling the fields in the mail manager that the client has installed. The user is responsible to click on the send button. A file can be attached which is in the files folder or in any other path if it is full specified.

 Example: ui.SendMail "direcciondestino@correo.es", "direccionencopia@correo.es", "Subject", "Message text", ""

It shows a collection on screen.

Depending on how the UI of the collection in the mappings is defined, we can use an special control or in case not having anything defined, it is displayed on grid mode.

This function only is defined in some frameworks, independently of the platform, but the idea is to generalize.

Anyways, the use of the UI new rules will make that this kind of functionality is being replaced.

Example:

ui.OpenMenu "ColeccionQueSea",31,1   

It displays an screen to ask the user for a datum.

The form that this data request has depends on the platform.

In some platforms, even, it may be available or not depending on the framework used, as could be in the PC case.

It starts and connects with the printer indicated by parameter.

It ends the connection to the printer.

It prints the string received as parameter.

It prints the string received by parameter and causes a break line.

It makes as much line breaks as indicated by parameter.

(*)The sintax can be: 
1) For writing normal text and that the control interpretes them as ASCII, it would be:\\
appdata.userinterface.PrintCommand "##TEXT##hola 130 15 ##END_TEXT##"
appdata.userinterface.PrintCommand "##TEXT##! 0 200 200 210 1##END_TEXT##"
2) Any value between commas without the previous macros, will be interpreted as an ASCII value: 
appdata.userinterface.PrintCommand "32,35,104,111,108,97,10" it would be same than: appdata.userinterface.PrintCommand "32,35,##TEXT##hola##END_TEXT##,10"

It prints specific commands of the printer, through the string received as parameter.

It prints a bars code of the type specified by parameter.

It starts a time counter.

It stops the time counter.

It returns the time elapsed in milliseconds, from the timer was started or from the last call to ChronoValue.

It launchs or connects the scanner for the 2d codes reading, by making the reading it will be assigned the value to the property with the barcode =”true” attribute.
Later has been implemented a third parameter which allows us to specify the destination property of the bars code reading, no matter it has the barcode=“true” attribute or it has not. This command, for its proper functioning will search an application named “Barcode Scanner” by ZXing. If it is not installed, it will open us the market in order to install it.

Example of use:

<button name="ScannerCamera" group="1" caption="Lanzar scanner" visible="1"  labelwidth="10" lmargin="6"  method="ExecuteNode (StartScanner)” />
 
<StartScanner>
	<action name="runscript">
		<script language="VBScript">
 
			<!-- Este comando lee TODOS los tipos de códigos soportados  -->
			ui.StartScanner "zxing", "", "MAP_CODIGOBARRAS"
 
			<!-- Sólo para leer códigos QR y ponemos la lectura en el campo "MAP_CODIGO -->	
			ui.StartScanner "zxing", "QRCODE", "MAP_CODIGO"
 
			<!-- Sólo para leer códigos ISBN -->
			ui.StartScanner "zxing", "ISBN"
 
			<!-- Sólo para leer códigos QR, EAN e ISBN -->
			ui.StartScanner "zxing", "QRCODE,EAN,ISBN"
 
		</script>
	</action>
</StartScanner>

It opens the file passed as parameter.

Example 1: appdata.userinterface.OpenFile "##APP##\Files"+this("FICHATECNICA")
Example 2: appdata.userinterface.OpenFile "http://www.xone.es/XOneAndroidFramework.apk", "donotcachethefile"

It opens the URL passed as parameter.

AppData.UserInterface.OpenUrl strURL
ui.OpenUrl strURL

It returns the window object associated to the object passed as parameter. If the object has no window yet, it returns NULL.
The possible actions over such window are: Refresh, Bind, SetFocus, PickFile.

Example of use:

 Set mViewEdit = ui.GetView(objMain)
 If Not mViewEdit = nothing Then
   mViewEdit.Refresh "MAP_PROPIEDAD"
 End If

It returns the Bluetooth status.

It assigns the new bluetooth status.

This function shows a group or a frame of the collection with a transition through script.

(*)The types of animation that can be put in the “entrance animation” and “exit animation” parameters:

• “##ALPHA_IN##“ - Degraded from less to more for entry effect.
• ”##ALPHA_OUT##“ - Degraded from more to less for exit effect.
• ”##LEFT##“ Entrance on the left.
• ”##LEFT_OUT##“ Exit on the left.
• ”##PUSH_IN##“ Entry through the bottom.
• ”##PUSH_OUT##“ Exit from the top.
• ”##RIGHT##“ Entrance on the right.
• ”##RIGHT_OUT##“ Exit on the right.
• ”##ROTATE_IN##“ 2D rotation for entrance.
• ”##ROTATE_OUT##“ 2D rotation for exit.
• ”##ROTATE3D_IN##“ 3D rotation for entrance.
• ”##ROTATE3D_OUT##“ 3D rotation for exit.
• ”##ZOOM_IN##“ Entry from lowest to highest.
• ”##ZOOM_OUT##“ Exit from highest to lowest.

Examples of Use:

<action name="runscript">
	<script language="VBScript">
		<!-- Entrada del group id="3" con rotación 3D y tiempo de espera de 1000 ms -->
		AppData.UserInterface.ShowGroup "3","##ROTATE3D_IN##",1000,"##ROTATE3D_OUT##",1000
 
		<!-- Entrada del group id="1" con difuminado con duración de 600 milisegundos -->
		AppData.UserInterface.ShowGroup "1","##ALPHA_IN##",600,"##ALPHA_OUT##",600
 
		<!-- Entrada del group id="2" con Zoom de entrada y salida y duración de 1000 ms -->
		AppData.UserInterface.ShowGroup "2","##ZOOM_IN##",1000,"##ZOOM_OUT##",1000
	</script>
</action>

Also, it can be defined in the heading of the groups or in the frames the entrance effect required by default for the group,

<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="300px" left="200px" width="600px" height="300px" 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##;	
}

It meets the same macros than the script.

Also, you can hide the waiting window that is by default in the script execution in order the effect be cleaner.

In the heading of the script node you put the attributes:

show-wait-dialog="false" refresh="false"

This allows the wait dialog not to be displayed and the screen not to be refreshed either. The animation will already be done automatically.

Example of Use:

<button1_Click show-wait-dialog="false" refresh="false">
	<action name="runscript">
		<script language="vbscript">
			AppData.UserInterface.ShowGroup "3","##ROTATE3D_IN##",1000,"##ROTATE3D_OUT##",1000
		</script>
	</action>
</button1_Click>

It is used to know if an application is installed in the device, it returns 0 or if it is installed.

Example:

  ui.isApplicationInstalled("com.google.android.apps.maps");

This function checks if the wireless adapter is enabled. This doesn´t mean that it has connected to a network. It returns 1 if it is true, otherwise 0.

This function enables the wifi. It must be used carefully, the user may consider this function very intrusive.

This function unables the wifi. The same than the previous one, but this one even could cort any download in progress.

It starts and connects the GPS of the device to capture the GPS coordinates for its later treatment on a script.

Example of use:

<!-- El onlogon es un nodo "especial" de la colección Empresas, y se ejecuta cuando nos logueamos en la aplicación. -->
<onlogon>
	<action name="runscript">
		<script language="VBScript">
			AppData.UserInterface.StartGPS
		</script>
	</action>
</onlogon>

It ends and closes the GPS of the device.

<!-- El onlogoff es un nodo "especial" de la colección Empresas, y se ejecuta cuando finaliza la ejecución del programa. -->
<onlogoff>
	<action name="runscript">
		<script language="VBScript">
			AppData.UserInterface.StopGPS
		</script>
	</action>
</onlogoff>

It makes the call from a script to the number inserted as parameter in the function.

AppData.UserInterface.MakePhoneCall(This("TELEFONO"))
' O lo que es lo mismo....
ui.MakePhoneCall(This("TELEFONO"))

It adds an event to the calendar integrated in Android.

If it is visible, it hides the keyboard on screen of Android.

When this method is called, it creates a direct access to application passed in the first parameter, which can be a different one to that one which is being executed. The second parameter indicates if we want to avoid creating duplicates by calling again to this function.

Anyway, this function is totally independent of the desktop application the user has installed, in some cases, it shows always a toast notification, in other ones, it does not, and in other ones it does not create the direct access. With the default desktop application that comes on Android it should work fine.

icon.png will be used as direct access icon.

If this method is defined in a button node such as it is displayed at the example, the downloading window will be replaced when executing the script by another one with a progress bar and title. It is useful when downloading a very heavy script.

<AbrirFiltro show-progress-dialog="true">
  <action name="runscript">
    <script language="VBScript">
      ui.UpdateWaitDialog "Ciclo 1",20
      [script aqui]
      ui.UpdateWaitDialog "Ciclo 2",30
      [script aqui]
      ui.UpdateWaitDialog "Ciclo 2.1",50
      [script aqui]
      ui.UpdateWaitDialog "Ciclo 3",70
      [script aqui]
      ui.UpdateWaitDialog "Ciclo 4",90
      [script aqui]
      ui.UpdateWaitDialog "Ciclo 5",100
    </script>
  </action>
</AbrirFiltro>

Combined with the previous function, this method sets the maximum of the progress bar. It is useful to not have to calcule the increase on each UpdateWaitDialog.
If, for instance, we would want to browse a collection and every time a record is processed or several ones, just increase only one, we save first the amount of pass we will make, we set it as the maximum value, and then on each round we increase the progress.

<AbrirFiltro show-progress-dialog="true">
  <action name="runscript">
    <script language="VBScript">
      aumento = 0
      ui.SetMaxWaitDialog 50
      [bucle aquí]
        ui.UpdateWaitDialog "Generando PDF...", aumento
        aumento = aumento + 1
      [fin bucle]
    </script>
  </action>
</AbrirFiltro>
 
<barraprogreso show-progress-dialog="true">
	<action name="runscript">
	  <script language="VBScript">
			'Para poner una barra de progreso en pantalla
			dim cont
			cont=0
			ui.SetMaxWaitDialog 15000
			For i = 1 To 15000
			  ui.UpdateWaitDialog "Generando lo que sea",cont
			  cont=cont+1
			Next
		</script>
	</action>
</barraprogreso>

This method is used to execute a node after waiting a certain time. The time is specified in seconds and the node must be in the collection where the script is with the call to this method. Decimals can be put, for instance, 0.3 which are 300 milliseconds. Do not put 0.

<before-edit> <!-- O en cualquier otra parte -->
	<action name="runscript">
		<script language="VBScript">
			ui.ExecuteActionAfterDelay "Nodo_A_Ejecutar", 20
			<!-- Ponemos que se ejecute cuando pasen 20 segundos -->
		</script>
	</action>
</before-edit>
 
	..............
 
<Nodo_A_Ejecutar>
	<action name="runscript">
		<script language="VBScript">
 
			...... Hacemos lo que sea .......
			<!-- ui.ExecuteActionAfterDelay "Nodo_A_Ejecutar", 20 --> Si queremos que sea repetitivo
		</script>
	</action>
</Nodo_A_Ejecutar>

This method allows to change the language of the framework messages and from the XOne application at runtime. It is necessary to restart the application for changes to take effect.

<prop name="BTNESPANOL" type="B" frame="frm1" group="1" class="buttonlogin" title="Español" visible="1" labelwidth="5" fontsize="10" onchange="refresh" method="ExecuteNode(idioma(es))" />
<prop name="BTNINGLES" type="B" frame="frm1" group="1" class="buttonlogin" title="Inglés" visible="1" labelwidth="5" fontsize="10" onchange="refresh" method="ExecuteNode(idioma(en))" />
<idioma>
  <action name="runscript">
  <param name="idioma" />
    <script language="VBScript">
      Dim resp
      resp = ui.MsgBox("Cambiar el idioma reiniciará la aplicación. ¿Desea continuar?", "Mensaje", 4)
      if resp = 6 then
        ui.SetLanguage idioma
      end if
    </script>
  </action>
</idioma>

This method allows to launch a sound with or without vibration, and make it repeat n times. The sound can be anyone who can play the device, mp3, wav, etc. By default, the sound is searched in the files folder of the project. Also, the notification tone configured in the device can be played, as well as if the vibration is enabled or not with the ##DEFAULT## macro.

'El archivo de sonido tiene que estar en la carpeta files del proyecto
ui.PlaySoundAndVibrate "bultonoencontrado.wav", "###DEFAULT##",1
 
'Ejecuta el tono que tenga configurado el dispositivo 5 veces.
ui.PlaySoundAndVibrate "##DEFAULT##", "##DEFAULT##", 5
 
'Lo mismo que el anterior pero sin vibración
ui.PlaySoundAndVibrate "##DEFAULT##", "", 5

<detenersonido>
	<action name="runscript">
		<script language="VBScript">
			'Detiene la reproducción. No pasa nada si no hay nada reproduciéndose.
			ui.StopPlaySoundAndVibrate
		</script>
	</action>
</detenersonido>

This method allows to draw a route between 2 points in a map embedded in the application.

It modifies the led color of the devices that have it, this led only will be displayed if has a notification at the notifications bar and if the device is locked.

Parameters:

1. It defines the led color.
2. It defines the time the led is on.
3. It defines the time the led is off.

Example:

  ui.setNotificationLed "#00FF00", 1000, 1000

It shows a notification in the notifications bar of the devices.

Parameters:

1. Identifier of the notifications, if several calls are made with the same ID, it will modify the value of the last call, if it is done with different IDs it will generate a new notification on screen by each different ID.
2. Title of the notification.
3. Description of the notification.
4. (Optional) Text ticker, Text that comes out before showing the notification, only works in Android less than 5 (from this version, Android made this particularity obsolete.).
5. (Optional, it works together with the parameter 6) Dataobject, to know where it must search the node to execute, when clicking on the notification.
6. (Optional, it works together with the parameter 5) node which will execute as soon as you click on the notification.

Examples:

  Ej1:
  ui.showNotification 1, "Título", "Notificación #1"	

  Ej2: 
  ui.showNotification 1, "Título", "Notificación #1", “Mensaje nuevo”
  
  
  Ej3:
  ui.showNotification 3, "Título", "Notificación #3", "Mensaje nuevo", self, "mensajeria"

Method that will show on screen a calendar.

Parameters:

1. A JSON object in which we can define the following properties:
   

• (Mandatory if onDateSet was not defined) targetProperty: We indicate the prop name where we want to save the value once the date we want is selected.
• (Optional) initialYear: Year in which it will start selected in the calendar.
• (Optional) initialMonth: Month in which it will start selected in the calendar.
• (Optional) initialDay: Day in which it start selected in the calendar.
• (Optional) Title: Top title we want the calendar window to show.
• (Mandatory if targetProperty was not defined) onDateSet: (It is incompatible with targetProperty property, that is, if we put the onDateSet it wont pay attention to the targetProperty) where it will be defined a function which will be called once we select the date we want to.
  

Examples:

  Ej2:
  var params = 
        		initialYear: 2038,
        		initialMonth: 2,
        		initialDay: 15,
        		title: "Seleccione fecha",
        		onDateSet: function(nYear, nMonth, nDay) 
        			/*Aquí ponemos el script que queramos ejecutar*/
        	
  ui.showDatePicker(params)

  Ej3:
 var params = 
 targetProperty: "MAP_TEXTO_FLOAT_TOOLTIP_USUARIO",
        		initialYear: 2038,
        		initialMonth: 2,
        		initialDay: 15,
        		title: "Seleccione fecha"
        	
 ui.showDatePicker(params)

The methods of the Widget of the XOneLive for some time now have been implemented, in order to have them availables through script for its use in the application.

Example:

 Set obj = CreateObject("DebugTools")
ui.showtoast "Enviando Logs del sistema"
'Para obtener el IMEI del dispositivo\\
ui.MsgBox "PIN dispositivo: " + obj01.GetDeviceID, "Mensaje", 0
'Para obtener el log de operaciones del dispositivo \\
' (La dirección es opcional)
a=obj.SendLog("http://www.xone.es/XoneLogRec/reclog.aspx")
if a=-1 then ui.showtoast "No se pudo enviar el log de operaciones"
'Para obtener la base de datos del dispositivo\\
'(La dirección es opcional)
b=obj.SendDatabase("http://www.xone.es/XoneLogRec/reclog.aspx")
if b=-1 then ui.showtoast "No se pudo enviar la base de datos"
'Para obtener log de réplica de la base de datos del dispositivo\\
'(La dirección es opcional)
c=obj.SendReplicaDebugDatabase("http://www.xone.es/XoneLogRec/reclog.aspx")
if c=-1 then ui.showtoast "No se pudo enviar el log de replica de operaciones"
'Para obtener la base de datos de réplica de \\
'(La dirección es opcional)
d=obj.SendReplicaFilesDatabase("http://www.xone.es/XoneLogRec/reclog.aspx")
if d=-1 then ui.showtoast "No se pudo enviar la base de datos de replica de ficheros"
if a=0 and b=0 and c=0 and d=0 then ui.showtoast "Logs Enviados Correctamente"
Set obj = nothing

It opens a collection in edition mode with no need to make a create object and a pushvalue.

Example:

 ui.openEditView(“miColeccion”);

With this code we show only an embedded map with the POI we have at the corresponding table.

	<prop name="MAP_MAPA" zoom-to-my-location="false" visible="1" type="Z" contents="ClientesCoord" onchange="Refresh" mask="2" viewmode="mapview" mapview-embedded="true" width="80%" height="80%" zoom="true" />
	<contents name="ClientesCoord" src="ClientesCoord" />

The following code we put it inside the collection of the contents it has the data with the POI addresses, or we could put it also in a button or anywhere else.

Javascript Code:

<selecteditem refresh="false">
	<action name="runscript">
		<script language="javascript">
			/* ui.showToast("Soy el selecteditem del mapview: " + self.DIRECCION) */
			/* Esto pinta una ruta desde la ciudad de Lugo (43.0069, -7.5699) hacia la posición del POI que se ha pulsado */
			ui.drawMapRoute("MAP_MAPA", self.LATITUD, self.LONGITUD, 43.0069, -7.5699, "driving", "#FF0000")
		</script>
	</action>
</selecteditem>

Vbscript Code:

<selecteditem refresh="false">
	<action name="runscript">
		<script language="vbscript">
			'ui.ShowToast "Soy el selecteditem del mapview: " + this("DIRECCION")
			'Esto pinta una ruta desde Lugo hasta la posición del POI que se ha pulsado
			ui.DrawMapRoute "MAP_MAPA", this("LATITUD"), this("LONGITUD"), 43.0069, -7.5699, "driving", "#FF0000"
		</script>
	</action>
</selecteditem>

They are methods associated to the GPS control but they are called by the U.I.