GettingStartedQML Spanish p2: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
(Convert ExpressionEngine links)
 
Line 1: Line 1:
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
#REDIRECT [[Getting Started Programming with QML/es-AR]]
 
[[Category:Learning]] [[Category:Spanish]]
 
= Introducción a la Programación con QML (Segunda parte) =
 
Este artículo es la continuación de: [http://developer.qt.nokia.com/wiki/GettingStartedQML_Spanish Introducción a la programación con QML]
 
== 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.
 
<code>VisualItemModel{
id: menuListModel
FileMenu{
width: menuListView.width
height: menuBar.height
color: fileColor
}
EditMenu{
color: editColor
width: menuListView.width
height: menuBar.height
}
}</code>
 
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.
 
<code>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
}</code>
 
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.
 
<code>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
}
}
}</code>
 
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.
 
[[Image:http://doc.qt.nokia.com/4.7/images/qml-texteditor2_menubar.png|http://doc.qt.nokia.com/4.7/images/qml-texteditor2_menubar.png]]
 
== 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.
 
<code>TextEdit{
id: textEditor
anchors.fill:parent
width:parent.width; height:parent.height
color:"midnightblue"
focus: true
 
wrapMode: TextEdit.Wrap
 
onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle)
}</code>
 
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.
 
<code>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;
}</code>
 
=== 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.
 
<code>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
}
}</code>
 
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.

Latest revision as of 16:15, 4 May 2015

Redirect to:

Retrieved from "https://wiki.qt.io/index.php?title=GettingStartedQML_Spanish_p2&oldid=16544"