GettingStartedQML Spanish p2

Introducción a la Programación con QML (Segunda parte)

Este artículo es la continuación de: "Introducción a la programación con QML":http://developer.qt.nokia.com/wiki/GettingStartedQML_Spanish

Implementando una Barra de Menús

Nuestra aplicación de editor de textos necesitará una manera de mostrar menús utilizando una barra de menús. La barra de menús realizará los cambios entre los diferentes menús y el usuario puede elegir cual menú desplegar. El cambió de menú implica que los menús necesitan más estructura que simplemente mostrarlos en una fila. QML utiliza modelos y vistas para estructurar datos y mostrar los datos estructurados.

Utilizando Modelos de Datos y Vistas

QML tiene diferentes vistas de datos para mostrar modelos. Nuestra barra de menús mostrará los menús en una lista, con el encabezado mostrando una fila con los nombres de los menús. La lista de menús se declara dentro de un VisualItemModel. El elemento VisualItemModel contiene elementos que ya tienen vistas, como elementos Rectangle y elementos de Interfaz de Usuario importados. Otrostipos de modelo como el elemento ListModel necesitan un delegate para mostrar su información.

Declaramos dos elementos visuales en el menuListModel, el FileMenu y el EditMenu. Personalizamos los dos menús y los mostramos utilizando una ListView. El archivo MenuBar.qml contiene las declaraciones QML y en EditMenu.qml un simple menu edit está definido.

VisualItemModel{
 id: menuListModel
 FileMenu{
 width: menuListView.width
 height: menuBar.height
 color: fileColor
 }
 EditMenu{
 color: editColor
 width: menuListView.width
 height: menuBar.height
 }
}

El elemento ListView mostrará un modelo de acuerdo a un delegate. El delegate declarará los elemento del modelo de manera que se muestren en un elemento Row o en un grid. Nuestro menuListModel ya tiene elementos visibles, por lo tanto, no necesitamos declarar un delegate.

ListView{
 id: menuListView

//Anchors are set to react to window anchors
 anchors.fill:parent
 anchors.bottom: parent.bottom
 width:parent.width
 height: parent.height

//the model contains the data
 model: menuListModel

//control the movement of the menu switching
 snapMode: ListView.SnapOneItem
 orientation: ListView.Horizontal
 boundsBehavior: Flickable.StopAtBounds
 flickDeceleration: 5000
 highlightFollowsCurrentItem: true
 highlightMoveDuration:240
 highlightRangeMode: ListView.StrictlyEnforceRange
}

Adicionalmente, ListView hereda de Flickable, haciendo que la lista responda al arrastre del mouse y otros gestos. La última porción del código de arriba establece las propiedades de Flickable para crear el movimiento de deslizamiento (flicking) que deseamos en nuestra vista. En particular, la propiedad highlightMoveDuration cambia la duración de la transición de deslizamiento. Un valor más alto de la propiedad highlightMoveDuration da como resultado un cambio de menú más lento.

La listView mantiene los elementos del modelo a través de un índice y cada elemento visual en el modelo es accesible a través de un índice con el valor del orden en que se declararon los elementos. Cambiar la propiedad currentIndex (índice actual) cambia el elemento resaltado en la ListView. El encabezado de nuestra barra de menú ejemplifica este efecto. Hay dos botones en una fila, ambos cambian el menú actual cuándo se presionan. El fileButton cambia el menú actual al menú file cuando se presiona, el índice será 0 debido a que FileMenu se declara primero en el menuListModel. De manera similar, el editButton cambiará el menú actual a EditMenu cuando se presiona.

El rectángulo labelList tiene valor z de 1, denotando que será mostrado frente a la barra de menús. Los elementos con un valor de z más alto se muestran frente a elementos con valores menores de z. El valor por defecto para z es 0.

Rectangle{
 id: labelList
 …
 z: 1
 Row{
 anchors.centerIn: parent
 spacing:40
 Button{
 label: "File"
 id: fileButton
 …
 onButtonClick: menuListView.currentIndex = 0
 }
 Button{
 id: editButton
 label: "Edit"
 …
 onButtonClick: menuListView.currentIndex = 1
 }
 }
}

Podemos acceder a los menús de la barra de herramientas que acabamos de crear deslizando hacia los menús o presionando los nombres de los menús de la parte superior. El cambio entre las pantallas del menú se siente intuitivo y responsivo.

Construyendo un Editor de Texto

Declarando un Área de Texto (TextArea)

Nuestro editor de texto no es un editor de texto si no contiene un área para editar texto. El elemento TextEdit de QML permite la declaración de un área multilínea de texto editable. TextEdit es diferente de un elemento Text, el cual no permite al usuario editar el texto directamente.

TextEdit{
 id: textEditor
 anchors.fill:parent
 width:parent.width; height:parent.height
 color:"midnightblue"
 focus: true

wrapMode: TextEdit.Wrap

onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle)
}

El editor tiene establecidas las propiedades de color y ajuste de texto. El área de edición de texto está dentro de un área deslizable que desplazará el texto si el cursor está fuera del área visible. La función ensureVisible() verificará si el rectángulo del cursor está fuera de los límites de visibilidad y moverá el área de texto de acuerdo a esto. QML utiliza sintáxist de Javascript para sus scripts, y como se menciono previamente, los archivos Javascript se pueden importar y utilizar en un archivo QML.

function ensureVisible®{
 if (contentX >= r.x)
 contentX = r.x;
 else if (contentX+width <= r.x+r.width)
 contentX = r.x+r.width-width;
 if (contentY >= r.y)
 contentY = r.y;
 else if (contentY+height <= r.y+r.height)
 contentY = r.y+r.height-height;
}

Combinando Componentes para el Editor de Texto

Ahora estamos listos para crear el diseño de nuestro editor de texto utilizando QML. El editor de texto tiene dos componentes, la barra de menús que creamos y el área de texto. QML nos permite reutilizar componentes, haciendo nuestro código más simple, importando componentes y personalizándolos cuándo sea necesario. Nuestro editor de texto divide la ventana en dos; un tercio de la pantalla está dedicado a la barra de menús y dos tercios de la pantalla muestran el área de texto. La barra de menús se muestra en frente de cualquier otro elementos.

Rectangle{

id: screen
 width: 1000; height: 1000

//the screen is partitioned into the MenuBar and TextArea. 1/3 of the screen is assigned to the MenuBar
 property int partition: height/3

MenuBar{
 id:menuBar
 height: partition
 width:parent.width
 z: 1
 }

TextArea{
 id:textArea
 anchors.bottom:parent.bottom
 y: partition
 color: "white"
 height: partition*2
 width:parent.width
 }
}

Mediante la importación de componentes reutilizables, el código de nuestro Editor de Texto se ve mucho más simple. Ahora podemos personalizar la aplicación principal sin preocuparnos acerca de propiedades que ya tienen comportamientos definidos. Utilizando este enfoque, se puede crear fácilmente tanto el diseño de la aplicación como los componentes de la UI.