Personalización de la ventana de conexión

Cuando ejecutamos Velneo vClient, se presenta la ventana de conexión con Velneo vServer

Mediante la creación de una serie de valores en el registro del sistema operativo de Velneo vClient, podremos personalizar determinados elementos de la misma:

En primer lugar, debemos crear la siguiente clave:

Windows: HKEY_CURRENT_USER/Software/Velneo/vClient/Login

Linux:

$HOME/USUARIO/.config/Velneo/vClient.conf/Login

Mac:

/users/USUARIO/Library/Preferences/com.Velneo.vClient.plist/Login

Y los valores que podemos crear dentro de dicha clave son:

Title: Para personalizar el título de la ventana de conexión.

Image: Para personalizar la imagen de la ventana de conexión. En dicho valor estableceremos una senda en disco o una url de un fichero de imagen.

ImagePosition: Para indicar la posición de la imagen anterior dentro de la ventana de conexión. Los valores posibles son: top, left o right.

WindowIcon: Para personalizar el icono de la ventana de conexión. En dicho valor estableceremos una senda en disco o una url de un fichero de imagen.

Ejemplo:

Esta es una configuración centralizada para todos los vClient. Con esta opción de parámetros en el registro, podemos configurar corporativamente todos nuestros accesos desde vClient a todas las aplicaciones.

También es posible personalizar nuestro formulario de login en función de los parámetros de arranque de Velneo vClient. Esta opción permite que cada acceso directo pueda tener una personalización específica.

Los parámetros de acceso tienen un nombre largo y un nombre abreviado, podremos usar cualquiera de los dos indistintamente.

Los parámetros de arranque de Velneo vClient que debemos utilizar son:

loginTitle: título de la ventana de conexión. El nombre abreviado del parámetro es lt.

loginWindowIcon: ruta del fichero o URL de la imagen de icono de la barra de título. El nombre abreviado del parámetro es lwi.

loginImage: ruta del fichero o URL de la imagen de la ventana de conexión. El nombre abreviado del parámetro es li.

loginImagePosition: posición de la imagen de la ventana de conexión. Puede ser: “top”, “left” o “right”. El nombre abreviado del parámetro es lip.

loginLocale: idioma del vClient. El nombre abreviado del parámetro es llo. El idioma tenemos que especificarlo siguiendo la sintaxis siguiente:

idioma[_país]

Idioma: son dos letras minúsculas con el código del idioma según la norma ISO 639-1.
País son dos letras mayúsculas que identifican al país según la norma ISO 3166-1.

Ejemplo: /loginLocale=es_ES

Estos parámetros serán incluidos en el acceso directo después de la especificación de la senda de Velneo vClient.

Si tenemos configurado nuestro Velneo vClient para que el cuadro de diálogo del Login muestre personalizado el título, icono e imagen y su posición, tanto mediante parámetros en el acceso directo como mediante entradas en el registro de configuración del sistema, a partir de la versión 7.12 se mantendrá dicha personalización cuando se deba efectuar la actualización automática de Velneo vClient.

Personalización de Login mediante ficheros QML

Funcionalidad disponible a partir de la versión 7.14. Permite diseñar en QML, con ayuda del API de Velneo para QML, las ventanas de conexión y selección de instancia cuando ejecutas Velneo vClient.

La versión de QML soportada para el login es QML1.

La funcionalidad de Login QML nos permite personalizar el aspecto de la ventana de conexión y la ventana de selección de instancia de Velneo vClient, la interacción con el usuario y la forma en que se conecta, por medio de ficheros QML, permitiendo definir la construcción de la VRL (vatp://domino:puerto) para la conexión y gestionando la selección de instancia.

Para definir la ventana de conexión usaremos el fichero Login.qml, y para definir la ventana de selección de instancia usaremos el fichero Instances.qml.

Podemos personalizar el aspecto completo de la ventana de conexión de Velneo vClient por lo que podremos diseñar nuestra propia ventana de conexión partiendo de cero, con el aspecto, logos e información que nos interese presentar al usuario.

De igual forma, la ventana de selección de instancias también es enteramente personalizable por lo que podemos incluir la información e imágenes que nos interese presentar además de la información de instancias.

Podemos aprovechar por tanto la potencia del lenguaje QML para adecuar ambas ventanas a la imagen de nuestra marca o producto.

También podremos personalizar la forma en que el usuario interacciona y en que se realiza el acceso, por ejemplo:

Estableciendo una lista de datos de acceso fijos entre las que el usuario elegirá, es decir, datos de acceso predeterminados no modificables por el usuario en la ventana de conexión y que incluyan toda la información de acceso: VRL, usuario y contraseña por defecto, permitiendo al usuario introducir la contraseña.

Conectarse de forma directa sin solicitar información al usuario o solicitando únicamente usuario y contraseña.

Datos de acceso configurables de forma completa por el usuario, con mantenimiento de VRL, usuario y contraseña correspondientes, guardados en offline.

Incluir información personalizada asociada a las conexiones (nombre o alias del servidor y/o aplicación), y mostrar únicamente esta información para la conexión, evitando mostrar la información de conexión usada realmente.

Realizar la configuración de acceso por medio de ficheros xml de definición de datos de acceso independientes del fichero QML, que puede ser común a los usuarios.

Obtener los datos de acceso del sistema y acceder a la información de las últimas conexiones.

Conectarse de forma directa a una aplicación en el caso de haber una única instancia disponible para el usuario.

Configuración de los ficheros QML

Existen dos formas de configurar el uso de los ficheros de configuración QML del login y las instancias en Velneo vClient:

  • Los ficheros Login.qml e Instances.qml se encuentran en la misma carpeta que el ejecutable de Velneo vClient. Velneo vClient tomará en primer lugar estos fichero si los encuentra en la misma carpeta en la que se encuentra el ejecutable.
  • Hemos definido en la rama de registro /Velneo/vClient/Login/QmlLogin dónde se encuentra el fichero Login.qml y en la rama /Velneo/vClient/Login/QmlInstances dónde se encuentra el fichero Instances.qml. En segundo lugar, si no encuentra los ficheros antes, mirará si existen estas claves de registro para definir la configuración.

Clases, objetos y funciones para Login.qml

En el fichero Login.qml podremos hacer uso de la clase VLogin, que tiene las funciones necesarias para realizar la conexión.

En este fichero dispondremos del objeto theLogin ya creado que nos permitirá ejecutar estas funciones.

VLogin

Esta clase representa la conexión de Velneo vClient V7 y dispone de las funciones necesarias para realizar la conexión.

El objeto theLogin

El script QML está conectado al objeto theLogin que representa la ventana de conexión en curso.

Funciones

Funciones de información

String user()

String server()

String applicationDirPath()

model servers()

Funciones de conexión

void setServer( String szVRL )

void setUser( String szUser )

void setPassword( String szPasswd )

void accept( void )

void reject( void )

Funciones de error

void errorText( void )

Funciones de marco

void setWindowTitle( String szTitle )

void setWindowIcon( String szPath )

Documentación de funciones

Documentación de funciones de información

String user()

Devuelve el nombre del último usuario usado para conectarse. Esta información es la misma que se muestra en la ventana de conexión estándar y se devuelve por cada usuario del sistema operativo.

String server()

Devuelve la última senda VRL usada para conectarse. Esta información es la misma que se muestra en la ventana de conexión estándar y se devuelve por cada usuario del sistema operativo.

String applicationDirPath()

Devuelve la senda de Velneo vClient.

model servers()

Devuelve un modelo con el histórico de sendas VRL usadas para conectarse. Esta información es la misma que se muestra en la ventana de conexión estándar y se devuelve por cada usuario del sistema operativo.

Por cada ítem del modelo dispondremos de la propiedad modelData que contiene la VRL correspondiente y que podemos usar para presentar la información al usuario.

Documentación de funciones de conexión

void setServer( String szVRL )

Establece el valor de VRL, es decir, el dominio y puerto del servidor al que nos conectaremos.

void setUser( String szUser )

Establece el usuario del servidor al que nos conectaremos.

void setPassword( String szPasswd )

Establece la contraseña del usuario del servidor al que nos conectaremos.

void accept( void )

Realiza la conexión una vez establecidos los parámetros de conexión VRL, usuario y contraseña.

void reject( void )

Cancela la ventana de conexión y por tanto el proceso de conexión.

Documentación de funciones de error

void errorText( void )

Devuelve el mensaje de error en el caso de que falle la conexión, la contraseña sea errónea, etc.

Documentación de funciones de marco

void setWindowTitle( String szTitle )

Establece el título que aparece en el marco. Para que se muestre el marco, hemos de establecer el título o una imagen como icono.

void setWindowIcon( String szPath )

Establece la senda en disco de la imagen que aparecerá como icono en el marco. Para que se muestre el marco, hemos de establecer el título o una imagen como icono.

Si queremos usar sendas relaivas, debemos tener en cuenta que la senda base será la de Velneo vClient.

Documentación de funciones de configuración

void setLocale( String szLanguage )

Establece el idioma en el que se inicializará la aplicación. El parámetro del idioma se especificará según la norma ISO-639-1 (http://es.wikipedia.org/wiki/ISO_639-1). Ejemplo, para cargar el idioma español haríamos:

theLogin.setLocale( “es”);

Ejemplo

///////////////////////////////////////////////////////////////////////////////////////////////////
//
// Login Sin, Login.qml
//
// Ejemplo de Qml para login en V7.
// En este ejemplo se realiza la conexión de forma directa al servidor sin solicitar información al usuario.
// Los datos de acceso están definidos de forma predeterminada y no son modificables
// por el usuario (vatp://localhost, usuario velneo sin contraseña).
// Se accede de forma directa al listado de instancias que presenta el servidor.
//

import QtQuick 1.1

Rectangle
{ 
 width: 240;
 height: 120;

 Component.onCompleted:
 {
  // Indicamos el título y el icono de la ventana
  theLogin.setWindowTitle("Acceso al servidor sin login previo");  

  // Al no especificar la senda, se buscará el icono en el directorio de Velneo vClient
  theLogin.setWindowIcon("icono.png");
 } 
  
 Item
 {
  x: 10;
  y: 5;
  
  Image
  {  
   width: 93
   height: 25
   source: "http://velneo.es/files/2011/02/logo_velneo-cab.gif"
   
   fillMode: Image.PreserveAspectFit;
   smooth: true;
   asynchronous: true;
  }
 } 
 
 Text
 {
  id:textMsg
  anchors.horizontalCenter: parent.horizontalCenter;
  anchors.verticalCenter: parent.verticalCenter;
  
  text: "Conectando con el servidor en la nube...";
  
  wrapMode: Text.WordWrap;
 }
  
 Timer {
  interval: 500; running: true; repeat: false
  onTriggered:
  {
   // Nos conectamos    
   theLogin.setServer( "vatp://localhost" );
   theLogin.setUser( "velneo" );
   theLogin.setPassword( "" );
   theLogin.accept();
   
   textMsg.text = theLogin.errorText() + " " + theLogin.server();
  }  
    }   
}

Clases, objetos y funciones para Instances.qml

En el fichero Instances.qml podremos hacer uso de la clase VInstance, que tiene las funciones necesarias para realizar la selección de instancia.

En este fichero dispondremos del objeto theInstances ya creado que nos permitirá ejecutar estas funciones.

VInstances

Esta clase representa la selección de instancias de Velneo vClient V7 y dispone de las funciones necesarias para realizar la selección y ejecución de la aplicación seleccionada.

El objeto theInstances

El script QML está conectado al objeto theInstances que representa la ventana de selección de instancia en curso.

Funciones

Funciones de información

model instancesModel( void )

Funciones de selección

void setInstance( Number index )

void accept( void )

Funciones de marco

void setWindowTitle( String szTitle )

void setWindowIcon( String szPath )

Documentación de funciones

Documentación de funciones de información

model instancesModel( void )

Devuelve un modelo con la lista de instancias a las que tiene acceso el usuario en el servidor.

Por cada item del modelo dispondremos de las propiedades display y decoration. La propiedad display nos devolverá el nombre de la instancia y la propiedad decoration contendrá el icono que tiene asociado la instancia. Podremos usar ambos para presentar la información necesaria al usuario para que seleccione la instancia.

Documentación de funciones de selección

void setInstance( number index )

Establece la instancia que será ejecutada. Usaremos como parámetro el index o posición en la lista devuelta en el modelo (comienza a contar desde 0).

void accept( void )

Ejecuta la instancia seleccionada.

void reject( void )

Cancela la selección de instancia.

Documentación de funciones de marco

void setWindowTitle( String szTitle )

Establece el título que aparece en el marco. Para que se muestre el marco, hemos de establecer el título o una imagen como icono.

void setWindowIcon( String szPath )

Establece la senda en disco de la imagen que aparecerá como icono en el marco. Para que se muestre el marco, hemos de establecer el título o una imagen como icono.

Ejemplo

///////////////////////////////////////////////////////////////////////////////////////////////////
//
// Instances.qml
//
// Ejemplo de Qml para la lista de instancias en V7.
//
// En el ejemplo se carga la lista de instancias y se muestra al usuario para que seleccione. Si únicamente
// hay una instancia, se carga ésta de forma automática.
//

import QtQuick 1.1

Rectangle
{
 width: 480
 height: 320

 Component.onCompleted:
 {
  // Indicamos el título y el icono de la ventana
  theInstances.setWindowTitle("Selecciona la aplicación");  
  theInstances.setWindowIcon("icono.png");
 }
 
 Item
 {
  x: 10;
  y: 5;
  
  Image
  {  
   width: 93
   height: 25
   source: "http://velneo.es/files/2011/02/logo_velneo-cab.gif"
   
   fillMode: Image.PreserveAspectFit;
   smooth: true;
   asynchronous: true;
  }
 }
 
 Item
 {
  width: parent.width - 20;
  height: parent.height - 100;
  anchors.horizontalCenter: parent.horizontalCenter;
  y: 40
   
  Column 
  {
   // Lista de instancias
   id: instancesList
   
   anchors.top: parent.top;
   width: parent.width;
   height: parent.height;
   spacing: 10;
     
   Text
   { 
    text: "Lista de aplicaciones"
    font.bold: true
   } 
   
   Rectangle
   {
    id: instancesListRec
    
    width: parent.width;
    height: parent.height - 20;
    border.color: "lightgrey";
    border.width: 2; 
    radius: 10;
     
    ListView 
    {
     id: instanciasListView
     anchors.fill: parent;
     
     signal clicked;
     
     clip: true;
     focus: true;     

     Keys.onReturnPressed: aceptarBoton.clicked(Qt.LeftButton);     
     
     highlight
     {    
      Rectangle {
       width: parent.width;
       height: 40;
       anchors.horizontalCenter: parent.horizontalCenter;
       color: "#E30B0B";
       radius: 10;
              
       y: instanciasListView.currentItem.y
       Behavior on y {
        SpringAnimation {
         spring: 3
         damping: 0.2
        }
       }
      }
     }
     
     highlightFollowsCurrentItem: false;
        
     model: theInstances.instancesModel()
          
     delegate
     { 
      Row
      {
       id: intanciaRow
       
       width: parent.width -10;
       height: 40;
       anchors.horizontalCenter: parent.horizontalCenter;

       Rectangle
       {
        id: iconoRec
        width: 80;
        anchors.verticalCenter: parent.verticalCenter;

        Image
        {
         id: icono
         source: decoration
         smooth: true
         anchors.verticalCenter: parent.verticalCenter;
         anchors.horizontalCenter: parent.horizontalCenter;
         fillMode: Image.PreserveAspectFit
        }
       }
       
       Text
       {
        anchors {left: iconoRec.right; verticalCenter: parent.verticalCenter }
        text: display;
        color: intanciaRow.ListView.isCurrentItem ? "white" : "#E30B0B";
        font.pointSize: 10;
        font.bold: true;
       }

       MouseArea
       {
        id: instanciasListViewMouseArea
        anchors.fill: parent
        
        // En caso de hacer clic, se guarda la información correspondiente al servidor
        onClicked:
        {
         instanciasListView.currentIndex = index;
        }
        
        // En caso de doble clic, hacemos lo mismo y además lanzamos la conexión
        onDoubleClicked:
        {
         instanciasListView.currentIndex = index;
         aceptarBoton.clicked();
        }
       }
      }
     } 
     
     Component.onCompleted:
     {
      instanciasListView.currentIndex = 0;
      positionViewAtIndex( instanciasListView.currentIndex, ListView.Center);
     }     
     
     Timer
     {
      interval: 500; running: true; repeat: false
      onTriggered:
      {
       if ( 1 == instanciasListView.count )
        aceptarBoton.clicked();
      }
     }
    }
   }
  }
 }
 
 Column
 {
  id: botones
  // Botones Aceptar y Cancelar
  width: parent.width - 20;
  spacing: 10;
  anchors.horizontalCenter: parent.horizontalCenter; 
  anchors.bottom: parent.bottom;
  anchors.margins: 10;
  
  Row
  {
   id: botonesRow
   
   width: parent.width
   anchors.horizontalCenter: parent.horizontalCenter; 

   Rectangle {
    id: aceptarBoton
    width: 90;
    height: conectarAceptarLabel.height + 8;
    anchors.left: parent.left;
    border.width: 2;
    border.color: "lightgrey";
    radius: 10;
    
    signal clicked;   
    
    Text {
     id: conectarAceptarLabel
     text: "Aceptar"
     color: aceptarRegion.pressed? "grey" : "#E30B0B"
     anchors.centerIn: aceptarBoton;
     font.bold: true;
    }
    
    MouseArea {
     id: aceptarRegion;
     anchors.fill: aceptarBoton;
     onClicked: aceptarBoton.clicked();
    }
    
    onClicked: 
    {
     // Nos conectamos    
     theInstances.setInstance( instanciasListView.currentIndex );
     theInstances.accept()
    }
   }

   Rectangle {
    id: cancelarBoton
    width: 90 ;
    height: conectarAceptarLabel.height + 8
    border.width: 2;
    border.color: "lightgrey";
    radius: 10;  
    anchors.right: parent.right;    
        
    Text {
     id: cancelLabel
     text: "Cancelar"
     color: cancelRegion.pressed? "grey" : "#E30B0B"
     anchors.centerIn: cancelarBoton;
     font.bold: true
    }
    MouseArea {
     id: cancelRegion;
     anchors.fill: cancelarBoton;
     onClicked: theInstances.reject();
    }
   }
  }
 }  
}