GettingStartedQML Spanish p2: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
=Introducción a la Programación con <span class="caps">QML</span> (Segunda parte)=
#REDIRECT [[Getting Started Programming with QML/es-AR]]
 
Este artículo es la continuación de: [http://developer.qt.nokia.com/wiki/GettingStartedQML_Spanish Introducción a la programación con <span class="caps">QML</span>] ''[developer.qt.nokia.com]''
 
==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.<br /> El cambió de menú implica que los menús necesitan más estructura que simplemente mostrarlos en una fila. <span class="caps">QML</span> utiliza modelos y vistas para estructurar datos y mostrar los datos estructurados.
 
===Utilizando Modelos de Datos y Vistas===
 
<span class="caps">QML</span> 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 <span class="caps">QML</span> y en EditMenu.qml un simple menu edit está definido.
 
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.
 
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.
 
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: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 <span class="caps">QML</span> 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.
 
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. <span class="caps">QML</span> utiliza sintáxist de Javascript para sus scripts, y como se menciono previamente, los archivos Javascript se pueden importar y utilizar en un archivo <span class="caps">QML</span>.
 
===Combinando Componentes para el Editor de Texto===
 
Ahora estamos listos para crear el diseño de nuestro editor de texto utilizando <span class="caps">QML</span>. El editor de texto tiene dos componentes, la barra de menús que creamos y el área de texto. <span class="caps">QML</span> 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.
 
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.
 
[[Image:qml-texteditor3_texteditor.png]]
 
===Categories:===
 
* [[:Category:Learning|Learning]]
* [[:Category:Spanish|Spanish]]

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"