VInstances
Última actualización
¿Te fue útil?
¿Te fue útil?
///////////////////////////////////////////////////////////////////////////////////////////////////
//
// 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.6
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()
}
}
}
}
}