# VInstances
Esta clase representa la selección de instancias de Velneo vClient y dispone de las funciones necesarias para realizar la selección y ejecución de la aplicación seleccionada.
Es una clase específica para [personalizar la ventana de conexión de Velneo vClient con QML](https://doc.velneo.com/34/velneo-vclient/funcionalidades-especificas/personalizacion-de-la-ventana-de-conexion-de-velneo-vclient#personalizacion-mediante-ficheros-qml).
### El objeto theInstances
El script QML está conectado al objeto theInstances que representa la ventana de selección de instancia en curso.
## Indice de funciones
### **De información**
model [instancesModel](#instancesmodel)( void )
### **De selección**
void [setInstance](#setinstance)( Number index )
void [accept](#accept)( void )
void [reject](#reject)( void )
### **De marco**
void [setWindowTitle](#setwindowtitle)( String szTitle )
void [setWindowIcon](#setwindowicon)( String szPath )
## Documentación de funciones
### 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.
### 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.
### 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 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.
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
Ejemlpo de QML para la lista de instancias en Velneo
```qml
///////////////////////////////////////////////////////////////////////////////////////////////////
//
// Instances.qml
//
// Ejemplo de Qml para la lista de instancias en Velneo.
//
// 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 2.15
Rectangle
{
width: 480
height: 460
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: 60
height: 30
source: "logo.png"
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: 50
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()
}
}
}
}
}
```