Getting Started on the Commandline/es: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
(Add "cleanup" tag)
(Convert ExpressionEngine links)
Line 27: Line 27:
}</code>
}</code>


Revisemos el código línea por línea. En las primeras dos líneas, incluimos los archivos de cabecera de "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html y "QTextEdit":http://doc.qt.nokia.com/4.7/qtextedit.html, las cuales son las dos clases que necesitamos para este ejemplo. Todas las clases de Qt tienen un archivo de cabecera que lleva su nombre.
Revisemos el código línea por línea. En las primeras dos líneas, incluimos los archivos de cabecera de [http://doc.qt.nokia.com/4.7/qapplication.html QApplication] y [http://doc.qt.nokia.com/4.7/qtextedit.html QTextEdit], las cuales son las dos clases que necesitamos para este ejemplo. Todas las clases de Qt tienen un archivo de cabecera que lleva su nombre.


En la línea 6 creamos un objeto de la clase "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html. Este objeto administra los recursos de la aplicación y es necesario para ejecutar cualquier programa de Qt que tenga GUI. Necesita '''argv''' y '''argc''' debido a que Qt acepta algunos argumentos de la línea de comandos.
En la línea 6 creamos un objeto de la clase [http://doc.qt.nokia.com/4.7/qapplication.html QApplication]. Este objeto administra los recursos de la aplicación y es necesario para ejecutar cualquier programa de Qt que tenga GUI. Necesita '''argv''' y '''argc''' debido a que Qt acepta algunos argumentos de la línea de comandos.


En la línea 8 creamos un objeto de la clase "QTextEdit":http://doc.qt.nokia.com/4.7/qtextedit.html. Un editor de texto es un elemento visual en la interfaz gráfica. En Qt, estos elementos se conocen con el nombre de widgets. Otros ejemplos de widgets son: barras de desplazamiento, etiquetas, y botones de radio. Un widget también puede ser un contenedor para otros widgets; un diálogo o la ventana principal de una aplicación, por ejemplo.
En la línea 8 creamos un objeto de la clase [http://doc.qt.nokia.com/4.7/qtextedit.html QTextEdit]. Un editor de texto es un elemento visual en la interfaz gráfica. En Qt, estos elementos se conocen con el nombre de widgets. Otros ejemplos de widgets son: barras de desplazamiento, etiquetas, y botones de radio. Un widget también puede ser un contenedor para otros widgets; un diálogo o la ventana principal de una aplicación, por ejemplo.


En la línea 9 mostramos el editor de texto en la pantalla en su propio marco de ventana. Debido a que los widgets también funcionan como contenedores (por ejemplo una "QMainWindow":http://doc.qt.nokia.com/4.7/qmainwindow.html, la cual tiene barras de herramientas, menús, una barra de estatus, y algunos otros widgets), es posible mostrar un solo widget en su propia ventana. Los widgets no son visibles por defecto, la función show() hace visibles los widgets.
En la línea 9 mostramos el editor de texto en la pantalla en su propio marco de ventana. Debido a que los widgets también funcionan como contenedores (por ejemplo una [http://doc.qt.nokia.com/4.7/qmainwindow.html QMainWindow], la cual tiene barras de herramientas, menús, una barra de estatus, y algunos otros widgets), es posible mostrar un solo widget en su propia ventana. Los widgets no son visibles por defecto, la función show() hace visibles los widgets.


En la línea 11 la "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html entra en su ciclo de eventos. Cuando una aplicación de Qt se está ejecutando, los eventos son generados y enviados a los widgets de la aplicación. Algunos ejemplos de eventos son presionar algún botón del mouse y pulsar alguna tecla. Cuando usted escribe texto en el widget editor de texto, este recibe eventos de tecla presionada y responde dibujando el texto tecleado.
En la línea 11 la [http://doc.qt.nokia.com/4.7/qapplication.html QApplication] entra en su ciclo de eventos. Cuando una aplicación de Qt se está ejecutando, los eventos son generados y enviados a los widgets de la aplicación. Algunos ejemplos de eventos son presionar algún botón del mouse y pulsar alguna tecla. Cuando usted escribe texto en el widget editor de texto, este recibe eventos de tecla presionada y responde dibujando el texto tecleado.


Para ejecutar la aplicación, ejecute una terminal o símbolo del sistema en (Windows), y entre al directorio en el cual tiene el archivo .cpp del programa. Los siguientes comandos de shell construyen el programa.
Para ejecutar la aplicación, ejecute una terminal o símbolo del sistema en (Windows), y entre al directorio en el cual tiene el archivo .cpp del programa. Los siguientes comandos de shell construyen el programa.
Line 49: Line 49:
h3. Aprender Más
h3. Aprender Más


* Widgets y Geometría de Ventanas- "Widgets Diálogo y Ventana":http://doc.qt.nokia.com/4.7/application-windows.html
* Widgets y Geometría de Ventanas- [http://doc.qt.nokia.com/4.7/application-windows.html Widgets Diálogo y Ventana]
''' Eventos y manejo de eventos- "El Sistema de Eventos":http://doc.qt.nokia.com/4.7/eventsandfilters.html
''' Eventos y manejo de eventos- [http://doc.qt.nokia.com/4.7/eventsandfilters.html El Sistema de Eventos]


== Agregando un botón Salir (Quit) ==
== Agregando un botón Salir (Quit) ==


En una aplicación real, normalmente necesitará más de un widget. Vamos ahora a agregar un "QPushButton":http://doc.qt.nokia.com/4.7/qpushbutton.html debajo del editor de texto. El botón hará que la aplicación Bloc de Notas finalice cuando sea presionado (ejemplo, se da click con el mouse).
En una aplicación real, normalmente necesitará más de un widget. Vamos ahora a agregar un [http://doc.qt.nokia.com/4.7/qpushbutton.html QPushButton] debajo del editor de texto. El botón hará que la aplicación Bloc de Notas finalice cuando sea presionado (ejemplo, se da click con el mouse).


[[Image:http://doc.qt.nokia.com/4.7/images/gs2.png|http://doc.qt.nokia.com/4.7/images/gs2.png]]
[[Image:http://doc.qt.nokia.com/4.7/images/gs2.png|http://doc.qt.nokia.com/4.7/images/gs2.png]]
Line 85: Line 85:
</code>
</code>


La línea 1 incluye el archivo de cabecera "QtGui":http://doc.qt.nokia.com/4.7/qtgui.html, el cual contiene todas las clases de GUI de Qt.
La línea 1 incluye el archivo de cabecera [http://doc.qt.nokia.com/4.7/qtgui.html QtGui], el cual contiene todas las clases de GUI de Qt.


La línea 10 utiliza el mecanismo de '''Signals''' y '''Slots''' de Qt para hacer que la aplicación termine cuando el '''botón Quit''' sea presionado. Un '''slot''' es una función que puede ser invocada en tiempo de ejecución utilizando su nombre (como una cadena de caracteres literal). Una '''signal''' es una función que invoca a los slots registrados con ella, cuando es llamada; Invocamos eso para conectar el slot con la signal y emitir la signal.
La línea 10 utiliza el mecanismo de '''Signals''' y '''Slots''' de Qt para hacer que la aplicación termine cuando el '''botón Quit''' sea presionado. Un '''slot''' es una función que puede ser invocada en tiempo de ejecución utilizando su nombre (como una cadena de caracteres literal). Una '''signal''' es una función que invoca a los slots registrados con ella, cuando es llamada; Invocamos eso para conectar el slot con la signal y emitir la signal.


"quit()":http://doc.qt.nokia.com/4.7/qcoreapplication.html#quit es un slot de "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html que termina la aplicación. "clicked()":http://doc.qt.nokia.com/4.7/qabstractbutton.html#clicked es una signal que "QPushButton":http://doc.qt.nokia.com/4.7/qpushbutton.html emite cuando es presionado. La función estática "QObject::connect()":http://doc.qt.nokia.com/4.7/qobject.html#connect se encarga de conectar el slot a la signal. SIGNAL() y SLOT() son dos macros que reciben la firma de las funciones signal y slot a conectar. También necesitamos enviar apuntadores a los objetos que deben enviar y recibir la señal.
[http://doc.qt.nokia.com/4.7/qcoreapplication.html#quit quit()] es un slot de [http://doc.qt.nokia.com/4.7/qapplication.html QApplication] que termina la aplicación. [http://doc.qt.nokia.com/4.7/qabstractbutton.html#clicked clicked()] es una signal que [http://doc.qt.nokia.com/4.7/qpushbutton.html QPushButton] emite cuando es presionado. La función estática [http://doc.qt.nokia.com/4.7/qobject.html#connect QObject::connect()] se encarga de conectar el slot a la signal. SIGNAL() y SLOT() son dos macros que reciben la firma de las funciones signal y slot a conectar. También necesitamos enviar apuntadores a los objetos que deben enviar y recibir la señal.


En la línea 12 creamos un "QVBoxLayout":http://doc.qt.nokia.com/4.7/qvboxlayout.html. Como mencionamos, los widgets pueden contener otros widgets. Es posible establecer los límites (la localización y el tamaño) de los widgets hijos directamente, pero usualmente es más sencillo utilizar un layout. Un layout administra los límites de los widgets hijos. "QVBoxLayout":http://doc.qt.nokia.com/4.7/qvboxlayout.html, por ejemplo, coloca los hijos en una fila vertical.
En la línea 12 creamos un [http://doc.qt.nokia.com/4.7/qvboxlayout.html QVBoxLayout]. Como mencionamos, los widgets pueden contener otros widgets. Es posible establecer los límites (la localización y el tamaño) de los widgets hijos directamente, pero usualmente es más sencillo utilizar un layout. Un layout administra los límites de los widgets hijos. [http://doc.qt.nokia.com/4.7/qvboxlayout.html QVBoxLayout], por ejemplo, coloca los hijos en una fila vertical.


Las líneas 13 y 14 agregan el editor de texto y el botón al layout. En la línea 17, establecemos el layout sobre el widget.
Las líneas 13 y 14 agregan el editor de texto y el botón al layout. En la línea 17, establecemos el layout sobre el widget.
Line 97: Line 97:
=== Aprender Más ===
=== Aprender Más ===


* Signals y slots - "Signals &amp; Slots":http://doc.qt.nokia.com/4.7/signalsandslots.html
* Signals y slots - [http://doc.qt.nokia.com/4.7/signalsandslots.html Signals &amp; Slots]
* Layouts - "Administración de Layout":http://doc.qt.nokia.com/4.7/layout.html, "Widgets y Layouts":http://doc.qt.nokia.com/4.7/widgets-and-layouts.html, "Ejemplos de Layout":http://doc.qt.nokia.com/4.7/examples-layouts.html
* Layouts - [http://doc.qt.nokia.com/4.7/layout.html Administración de Layout], [http://doc.qt.nokia.com/4.7/widgets-and-layouts.html Widgets y Layouts], [http://doc.qt.nokia.com/4.7/examples-layouts.html Ejemplos de Layout]
* Los widgets que se incluyen con Qt - "Galería de Widgets de Qt":http://doc.qt.nokia.com/4.7/gallery.html, "Ejemplos de Widgets":http://doc.qt.nokia.com/4.7/examples-widgets.html
* Los widgets que se incluyen con Qt - [http://doc.qt.nokia.com/4.7/gallery.html Galería de Widgets de Qt], [http://doc.qt.nokia.com/4.7/examples-widgets.html Ejemplos de Widgets]


== Crear Una Subclase de QWidget ==
== Crear Una Subclase de QWidget ==
Line 123: Line 123:
};</code>
};</code>


La macro Q_OBJECT debe estar primero en la definición de la clase, y declara nuestra clase como un QObject (Naturalmente, también debe de heredar de "QObject":http://doc.qt.nokia.com/4.7/qobject.html). Un "QObject":http://doc.qt.nokia.com/4.7/qobject.html añade varias capacidades a una clase normal de C++. Notablemente, el nombre de la clase y los nombres de los slots pueden ser consultados en tiempo de ejecución. También es posible consultar el tipo de los parámetros de un slot e invocarlo.
La macro Q_OBJECT debe estar primero en la definición de la clase, y declara nuestra clase como un QObject (Naturalmente, también debe de heredar de [http://doc.qt.nokia.com/4.7/qobject.html QObject]). Un [http://doc.qt.nokia.com/4.7/qobject.html QObject] añade varias capacidades a una clase normal de C++. Notablemente, el nombre de la clase y los nombres de los slots pueden ser consultados en tiempo de ejecución. También es posible consultar el tipo de los parámetros de un slot e invocarlo.


La línea 13 declara el '''slot quit()'''. Esto es sencillo utilizando la marco '''slots'''. El '''slot quit()''' ahora puede conectarse a las '''signals''' que coincidan en su firma (cualquier signal que no reciba parámetros).
La línea 13 declara el '''slot quit()'''. Esto es sencillo utilizando la marco '''slots'''. El '''slot quit()''' ahora puede conectarse a las '''signals''' que coincidan en su firma (cualquier signal que no reciba parámetros).
Line 145: Line 145:
}</code>
}</code>


Como se puede ver en la definición de la clase, utilizamos apuntadores (punteros) a nuestros "QObject":http://doc.qt.nokia.com/4.7/qobject.htmls (textEdit y quitButton) Como regla, usted siempre debe reservar memoria para "QObject":http://doc.qt.nokia.com/4.7/qobject.htmls en el heap y nunca copiarlos.
Como se puede ver en la definición de la clase, utilizamos apuntadores (punteros) a nuestros [http://doc.qt.nokia.com/4.7/qobject.htmls QObject] (textEdit y quitButton) Como regla, usted siempre debe reservar memoria para [http://doc.qt.nokia.com/4.7/qobject.htmls QObject] en el heap y nunca copiarlos.


Ahora utilizamos la función "tr()":http://doc.qt.nokia.com/4.7/qobject.html#tr alrededor de las cadenas de texto que serán visibles por el usuario. Esta función es necesaria cuando usted desea proveer su aplicación en más de un lenguaje (ejemplo, Inglés y Chino) No entraremos en detalles aquí, pero puede consultar el enlace Qt Linguist de la tabla de aprenda más.
Ahora utilizamos la función [http://doc.qt.nokia.com/4.7/qobject.html#tr tr()] alrededor de las cadenas de texto que serán visibles por el usuario. Esta función es necesaria cuando usted desea proveer su aplicación en más de un lenguaje (ejemplo, Inglés y Chino) No entraremos en detalles aquí, pero puede consultar el enlace Qt Linguist de la tabla de aprenda más.


h3. Aprender Más
h3. Aprender Más


''' tr() e internacionalización - "Manual Qt Linguist":http://doc.qt.nokia.com/4.7/linguist-manual.html, "Escribiendo Código Fuente Para Traducción":http://doc.qt.nokia.com/4.7/i18n-source-translation.html, "Ejemplo Hola tr()":http://doc.qt.nokia.com/4.7/linguist-hellotr.html, "Internacionalización con Qt":http://doc.qt.nokia.com/4.7/internationalization.html
''' tr() e internacionalización - [http://doc.qt.nokia.com/4.7/linguist-manual.html Manual Qt Linguist], [http://doc.qt.nokia.com/4.7/i18n-source-translation.html Escribiendo Código Fuente Para Traducción], [http://doc.qt.nokia.com/4.7/linguist-hellotr.html Ejemplo Hola tr()], [http://doc.qt.nokia.com/4.7/internationalization.html Internacionalización con Qt]
* "QObjects":http://doc.qt.nokia.com/4.7/qtwebkit-bridge.html#qobjects y el Modelo de Objetos de Qt (Esto es esencial para entender Qt) - "Modelo de Objetos":http://doc.qt.nokia.com/4.7/object.html
* [http://doc.qt.nokia.com/4.7/qtwebkit-bridge.html#qobjects QObjects] y el Modelo de Objetos de Qt (Esto es esencial para entender Qt) - [http://doc.qt.nokia.com/4.7/object.html Modelo de Objetos]
* qmake y el sistema de construcción de Qt - "Manual qmake":http://doc.qt.nokia.com/4.7/qmake-manual.html
* qmake y el sistema de construcción de Qt - [http://doc.qt.nokia.com/4.7/qmake-manual.html Manual qmake]


== Creando un archivo .pro ==
== Creando un archivo .pro ==
Line 172: Line 172:
h2. Usando una QMainWindow
h2. Usando una QMainWindow


Muchas aplicaciones se beneficiarán del uso de un "QMainWindow":http://doc.qt.nokia.com/4.7/qmainwindow.html, la cual tiene su propio layout al cual puede agregar una barra de menús, widgets de acoplamiento (dock widgets), barras de herramientas, y una barra de estado. "QMainWindow":http://doc.qt.nokia.com/4.7/qmainwindow.html tiene un área central que puede ser ocupada por cualquier tipo de widget. En nuestro caso, vamos a ubicar nuestro editor de texto aquí.
Muchas aplicaciones se beneficiarán del uso de un [http://doc.qt.nokia.com/4.7/qmainwindow.html QMainWindow], la cual tiene su propio layout al cual puede agregar una barra de menús, widgets de acoplamiento (dock widgets), barras de herramientas, y una barra de estado. [http://doc.qt.nokia.com/4.7/qmainwindow.html QMainWindow] tiene un área central que puede ser ocupada por cualquier tipo de widget. En nuestro caso, vamos a ubicar nuestro editor de texto aquí.


[[Image:http://doc.qt.nokia.com/4.7/images/gs4.png|http://doc.qt.nokia.com/4.7/images/gs4.png]]
[[Image:http://doc.qt.nokia.com/4.7/images/gs4.png|http://doc.qt.nokia.com/4.7/images/gs4.png]]
Line 204: Line 204:
Incluimos dos '''slots''' más que pueden guardar y abrir un documento. Implementaremos su funcionalidad en la siguiente sección.
Incluimos dos '''slots''' más que pueden guardar y abrir un documento. Implementaremos su funcionalidad en la siguiente sección.


A menudo, en una ventana principal (main window), el mismo '''slot''' debe ser invocado por varios widgets. Ejemplos de ello son los elementos de menú y los botones en una barra de herramientas. Para hacer esto más fácil, Qt proporciona "QAction":http://doc.qt.nokia.com/4.7/qaction.html, que puede ser dada a varios widgets, y ser conectada a un slot. Por ejemplo, tanto "QMenu":http://doc.qt.nokia.com/4.7/qmenu.html como "QToolBar":http://doc.qt.nokia.com/4.7/qtoolbar.html pueden crear elementos de menú y botones de herramientas de las mismas "QAction":http://doc.qt.nokia.com/4.7/qaction.htmls. En breve vamos a ver como funciona esto.
A menudo, en una ventana principal (main window), el mismo '''slot''' debe ser invocado por varios widgets. Ejemplos de ello son los elementos de menú y los botones en una barra de herramientas. Para hacer esto más fácil, Qt proporciona [http://doc.qt.nokia.com/4.7/qaction.html QAction], que puede ser dada a varios widgets, y ser conectada a un slot. Por ejemplo, tanto [http://doc.qt.nokia.com/4.7/qmenu.html QMenu] como [http://doc.qt.nokia.com/4.7/qtoolbar.html QToolBar] pueden crear elementos de menú y botones de herramientas de las mismas [http://doc.qt.nokia.com/4.7/qaction.htmls QAction]. En breve vamos a ver como funciona esto.


Como antes, usamos el constructor del Bloc de Notas (Notepad) para configurar la GUI.
Como antes, usamos el constructor del Bloc de Notas (Notepad) para configurar la GUI.
Line 230: Line 230:
}</code>
}</code>


Las "QAction":http://doc.qt.nokia.com/4.7/qaction.htmls son creadas con el texto que debe aparecer en los widgets a los que las adicionemos (en nuestro caso, los elementos de menú). Si también quisieramos añadirlos a una barra de herramientas, podríamos haberles dado "iconos":http://doc.qt.nokia.com/4.7/qaction.html a las acciones (actions).
Las [http://doc.qt.nokia.com/4.7/qaction.htmls QAction] son creadas con el texto que debe aparecer en los widgets a los que las adicionemos (en nuestro caso, los elementos de menú). Si también quisieramos añadirlos a una barra de herramientas, podríamos haberles dado [http://doc.qt.nokia.com/4.7/qaction.html iconos] a las acciones (actions).


Cuando un elemento de menú es presionado, el elemento dispara la accion, y el respectivo slot se invocará.
Cuando un elemento de menú es presionado, el elemento dispara la accion, y el respectivo slot se invocará.
Line 236: Line 236:
=== Aprender Más ===
=== Aprender Más ===


* Main windows y clases main window - "Aplicación Main Window":http://doc.qt.nokia.com/4.7/mainwindow.html, "Ejemplos Main Window":http://doc.qt.nokia.com/4.7/examples-mainwindow.html
* Main windows y clases main window - [http://doc.qt.nokia.com/4.7/mainwindow.html Aplicación Main Window], [http://doc.qt.nokia.com/4.7/examples-mainwindow.html Ejemplos Main Window]
* Aplicaciones MDI - "QMdiArea":http://doc.qt.nokia.com/4.7/qmdiarea.html, "Ejemplo MDI":http://doc.qt.nokia.com/4.7/mainwindows-mdi.html
* Aplicaciones MDI - [http://doc.qt.nokia.com/4.7/qmdiarea.html QMdiArea], [http://doc.qt.nokia.com/4.7/mainwindows-mdi.html Ejemplo MDI]


== Guardando y Cargando ==
== Guardando y Cargando ==
Line 262: Line 262:
}</code>
}</code>


El primer paso es preguntar al usuario por el nombre del archivo a abrir. Qt viene con "QFileDialog":http://doc.qt.nokia.com/4.7/qfiledialog.html, éste es un dialogo con el cual el usuario puede seleccionar un archivo. La siguiente imagen muestra el dialogo en Kubuntu. La funcion estática (static) "getOpenFileName()":http://doc.qt.nokia.com/4.7/qfiledialog.html#getOpenFileName muestra un dialogo de archivos modales, y no retorna hasta que el usuario ha seleccionado un archivo. Éste retorna la ruta del archivo seleccionado, o una cadena de texto (string) vacía si el usuario cancela el diálogo.
El primer paso es preguntar al usuario por el nombre del archivo a abrir. Qt viene con [http://doc.qt.nokia.com/4.7/qfiledialog.html QFileDialog], éste es un dialogo con el cual el usuario puede seleccionar un archivo. La siguiente imagen muestra el dialogo en Kubuntu. La funcion estática (static) [http://doc.qt.nokia.com/4.7/qfiledialog.html#getOpenFileName getOpenFileName()] muestra un dialogo de archivos modales, y no retorna hasta que el usuario ha seleccionado un archivo. Éste retorna la ruta del archivo seleccionado, o una cadena de texto (string) vacía si el usuario cancela el diálogo.


Si tenemos un nombre de archivo, tratamos de abrirlo con "open()":http://doc.qt.nokia.com/4.7/qiodevice.html#open, que devuelve verdadero (true) si el archivo se puede abrir. No vamos a entrar en el manejo de errores aquí, pero puede consultar los enlaces de la sección de aprender más. Si el archivo no se puede abrir, utilizamos "QMessageBox":http://doc.qt.nokia.com/4.7/qmessagebox.html para mostrar un diálogo con un mensaje de error (consulte la descripción de la clase "QMessageBox":http://doc.qt.nokia.com/4.7/qmessagebox.html para más detalles).
Si tenemos un nombre de archivo, tratamos de abrirlo con [http://doc.qt.nokia.com/4.7/qiodevice.html#open open()], que devuelve verdadero (true) si el archivo se puede abrir. No vamos a entrar en el manejo de errores aquí, pero puede consultar los enlaces de la sección de aprender más. Si el archivo no se puede abrir, utilizamos [http://doc.qt.nokia.com/4.7/qmessagebox.html QMessageBox] para mostrar un diálogo con un mensaje de error (consulte la descripción de la clase [http://doc.qt.nokia.com/4.7/qmessagebox.html QMessageBox] para más detalles).


En realidad, la lectura de los datos es trivial utilizando la función "readAll()":http://doc.qt.nokia.com/4.7/qiodevice.html#readAll, la cual devuelve todos los datos del archivo en un "QByteArray":http://doc.qt.nokia.com/4.7/qbytearray.html. La función "constData()":http://doc.qt.nokia.com/4.7/qbytearray.html#constData devuelve todos los datos del arreglo (array) como un const char''', "QString":http://doc.qt.nokia.com/4.7/qstring.html tiene un constructor para éste. Los contenidos se pueden visualizar en el editor de texto. Luego llamamos la función "close()":http://doc.qt.nokia.com/4.7/qiodevice.html#close que cierra el archivo para retornar la descripción del archivo al sistema operativo.
En realidad, la lectura de los datos es trivial utilizando la función [http://doc.qt.nokia.com/4.7/qiodevice.html#readAll readAll()], la cual devuelve todos los datos del archivo en un [http://doc.qt.nokia.com/4.7/qbytearray.html QByteArray]. La función [http://doc.qt.nokia.com/4.7/qbytearray.html#constData constData()] devuelve todos los datos del arreglo (array) como un const char''', [http://doc.qt.nokia.com/4.7/qstring.html QString] tiene un constructor para éste. Los contenidos se pueden visualizar en el editor de texto. Luego llamamos la función [http://doc.qt.nokia.com/4.7/qiodevice.html#close close()] que cierra el archivo para retornar la descripción del archivo al sistema operativo.


Ahora, vamos a pasar al slot save().
Ahora, vamos a pasar al slot save().
Line 285: Line 285:
}</code>
}</code>


Cuando escribimos el contenido del editor de texto en el archivo, utillizamos la clase "QTextStream":http://doc.qt.nokia.com/4.7/qtextstream.html, que envuelve al objeto "QFile":http://doc.qt.nokia.com/4.7/qfile.html. El flujo de texto puede escribir QStrings directamente al archivo; "QFile":http://doc.qt.nokia.com/4.7/qfile.html sólo acepta los datos en bruto (char''') con las funciones "write()":http://doc.qt.nokia.com/4.7/qiodevice.html#write de "QIODevice":http://doc.qt.nokia.com/4.7/qiodevice.html.
Cuando escribimos el contenido del editor de texto en el archivo, utillizamos la clase [http://doc.qt.nokia.com/4.7/qtextstream.html QTextStream], que envuelve al objeto [http://doc.qt.nokia.com/4.7/qfile.html QFile]. El flujo de texto puede escribir QStrings directamente al archivo; [http://doc.qt.nokia.com/4.7/qfile.html QFile] sólo acepta los datos en bruto (char''') con las funciones [http://doc.qt.nokia.com/4.7/qiodevice.html#write write()] de [http://doc.qt.nokia.com/4.7/qiodevice.html QIODevice].


=== Aprender Más ===
=== Aprender Más ===

Revision as of 08:28, 4 March 2015

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

Introducción a la Programación con Qt

Bienvenido al mundo de Qt, la herramienta multiplataforma para GUI (interfaz gráficas de usuario). En esta guía de introducción, aprenderemos temas básicos de Qt mediante la implementación de una simple aplicación Notepad (Bloc de Notas). Al terminar de leer esta guía, usted debería estar listo para ahondar en nuestras descripciones tecnológicas generales y en la documentación del API, para poder encontrar la información que necesite sobre la aplicación que esté desarrollando.

Hola Bloc de Notas

En este primer ejemplo, simplemente creamos y mostramos en el escritorio, un editor de texto dentro de un marco de ventana. Esto representa el programa más simple posible de Qt que posea GUI.

http://doc.qt.nokia.com/4.7/images/gs1.png

Este es el código:

#include <QApplication>
#include <QTextEdit>

int main(int argv, char **args)
{
 QApplication app(argv, args);

QTextEdit textEdit;
 textEdit.show();

return app.exec();
}

Revisemos el código línea por línea. En las primeras dos líneas, incluimos los archivos de cabecera de QApplication y QTextEdit, las cuales son las dos clases que necesitamos para este ejemplo. Todas las clases de Qt tienen un archivo de cabecera que lleva su nombre.

En la línea 6 creamos un objeto de la clase QApplication. Este objeto administra los recursos de la aplicación y es necesario para ejecutar cualquier programa de Qt que tenga GUI. Necesita argv y argc debido a que Qt acepta algunos argumentos de la línea de comandos.

En la línea 8 creamos un objeto de la clase QTextEdit. Un editor de texto es un elemento visual en la interfaz gráfica. En Qt, estos elementos se conocen con el nombre de widgets. Otros ejemplos de widgets son: barras de desplazamiento, etiquetas, y botones de radio. Un widget también puede ser un contenedor para otros widgets; un diálogo o la ventana principal de una aplicación, por ejemplo.

En la línea 9 mostramos el editor de texto en la pantalla en su propio marco de ventana. Debido a que los widgets también funcionan como contenedores (por ejemplo una QMainWindow, la cual tiene barras de herramientas, menús, una barra de estatus, y algunos otros widgets), es posible mostrar un solo widget en su propia ventana. Los widgets no son visibles por defecto, la función show() hace visibles los widgets.

En la línea 11 la QApplication entra en su ciclo de eventos. Cuando una aplicación de Qt se está ejecutando, los eventos son generados y enviados a los widgets de la aplicación. Algunos ejemplos de eventos son presionar algún botón del mouse y pulsar alguna tecla. Cuando usted escribe texto en el widget editor de texto, este recibe eventos de tecla presionada y responde dibujando el texto tecleado.

Para ejecutar la aplicación, ejecute una terminal o símbolo del sistema en (Windows), y entre al directorio en el cual tiene el archivo .cpp del programa. Los siguientes comandos de shell construyen el programa.

qmake -project
qmake
 make

Esto generará un ejecutable en el directorio part1 (note que en Windows, posiblemente tenga que utilizar nmake en lugar de make. Note, que el ejecutable estará localizado en part1/debug o part1/release). Qmake es la herramienta de construcción de proyectos de Qt, el cual, utiliza un archivo de configuración. Qmake genera este archivo por nosotros cuando le enviamos el argumento -project*. Dado el archivo de configuración (con el sufijo .pro), qmake produce un archivo make el cual, construirá el programa por usted. Más adelante veremos como escribir nuestros propios archivos .pro

h3. Aprender Más

Eventos y manejo de eventos- El Sistema de Eventos

Agregando un botón Salir (Quit)

En una aplicación real, normalmente necesitará más de un widget. Vamos ahora a agregar un QPushButton debajo del editor de texto. El botón hará que la aplicación Bloc de Notas finalice cuando sea presionado (ejemplo, se da click con el mouse).

http://doc.qt.nokia.com/4.7/images/gs2.png

Revisemos el código.

#include <QtGui>

int main(int argv, char **args)
{
 QApplication app(argv, args);

QWidget window;

QTextEdit *textEdit = new QTextEdit(&amp;window);
 QPushButton *quitButton = new QPushButton("Quit");

QObject::connect(quitButton, SIGNAL (clicked()), qApp, SLOT (quit()));

QVBoxLayout layout;
 layout.addWidget(textEdit);
 layout.addWidget(quitButton);

window.setLayout(&amp;layout);

window.show();

return app.exec();
}

La línea 1 incluye el archivo de cabecera QtGui, el cual contiene todas las clases de GUI de Qt.

La línea 10 utiliza el mecanismo de Signals y Slots de Qt para hacer que la aplicación termine cuando el botón Quit sea presionado. Un slot es una función que puede ser invocada en tiempo de ejecución utilizando su nombre (como una cadena de caracteres literal). Una signal es una función que invoca a los slots registrados con ella, cuando es llamada; Invocamos eso para conectar el slot con la signal y emitir la signal.

quit() es un slot de QApplication que termina la aplicación. clicked() es una signal que QPushButton emite cuando es presionado. La función estática QObject::connect() se encarga de conectar el slot a la signal. SIGNAL() y SLOT() son dos macros que reciben la firma de las funciones signal y slot a conectar. También necesitamos enviar apuntadores a los objetos que deben enviar y recibir la señal.

En la línea 12 creamos un QVBoxLayout. Como mencionamos, los widgets pueden contener otros widgets. Es posible establecer los límites (la localización y el tamaño) de los widgets hijos directamente, pero usualmente es más sencillo utilizar un layout. Un layout administra los límites de los widgets hijos. QVBoxLayout, por ejemplo, coloca los hijos en una fila vertical.

Las líneas 13 y 14 agregan el editor de texto y el botón al layout. En la línea 17, establecemos el layout sobre el widget.

Aprender Más

Crear Una Subclase de QWidget

Cuando el usuario quiere salir de una aplicación, es muy normal mostrar un diálogo que le pregunte sobre si de verdad desea salir. En este ejemplo, crearemos una subclase de QWidget, y agregaremos un slot que conectaremos al botón Quit.

http://doc.qt.nokia.com/4.7/images/gs3.png

Revisemos el código:

class Notepad : public QWidget
{
 Q_OBJECT

public:
 Notepad();

private slots:
 void quit();

private:
 QTextEdit *textEdit;
 QPushButton *quitButton;
};

La macro Q_OBJECT debe estar primero en la definición de la clase, y declara nuestra clase como un QObject (Naturalmente, también debe de heredar de QObject). Un QObject añade varias capacidades a una clase normal de C++. Notablemente, el nombre de la clase y los nombres de los slots pueden ser consultados en tiempo de ejecución. También es posible consultar el tipo de los parámetros de un slot e invocarlo.

La línea 13 declara el slot quit(). Esto es sencillo utilizando la marco slots. El slot quit() ahora puede conectarse a las signals que coincidan en su firma (cualquier signal que no reciba parámetros).

En lugar de configurar la interfaz gráfica y conectar el slot en la función main(), ahora utilizamos el constructor del Bloc de Notas.

Notepad::Notepad()
{
 textEdit = new QTextEdit;
 quitButton = new QPushButton(tr("Quit"));

connect(quitButton, SIGNAL (clicked()), this, SLOT (quit()));

QVBoxLayout '''layout = new QVBoxLayout;
 layout->addWidget(textEdit);
 layout->addWidget(quitButton);

 setLayout(layout);

 setWindowTitle(tr("Notepad"));
}

Como se puede ver en la definición de la clase, utilizamos apuntadores (punteros) a nuestros QObject (textEdit y quitButton) Como regla, usted siempre debe reservar memoria para QObject en el heap y nunca copiarlos.

Ahora utilizamos la función tr() alrededor de las cadenas de texto que serán visibles por el usuario. Esta función es necesaria cuando usted desea proveer su aplicación en más de un lenguaje (ejemplo, Inglés y Chino) No entraremos en detalles aquí, pero puede consultar el enlace Qt Linguist de la tabla de aprenda más.

h3. Aprender Más

tr() e internacionalización - Manual Qt Linguist, Escribiendo Código Fuente Para Traducción, Ejemplo Hola tr(), Internacionalización con Qt

Creando un archivo .pro

Para este ejemplo escribiremos nuestro archivo en lugar de utilizar la opción de qmake -project

HEADERS = notepad.h
SOURCES = notepad.cpp main.cpp

Los siguientes comandos de shell construyen el ejemplo

qmake
make

h2. Usando una QMainWindow

Muchas aplicaciones se beneficiarán del uso de un QMainWindow, la cual tiene su propio layout al cual puede agregar una barra de menús, widgets de acoplamiento (dock widgets), barras de herramientas, y una barra de estado. QMainWindow tiene un área central que puede ser ocupada por cualquier tipo de widget. En nuestro caso, vamos a ubicar nuestro editor de texto aquí.

http://doc.qt.nokia.com/4.7/images/gs4.png

Revisemos la nueva definición de la clase Bloc de Notas (Notepad)

#include <QtGui>

class Notepad : public QMainWindow
{
 Q_OBJECT

public:
 Notepad();

 private slots:
 void open();
 void save();
 void quit();

 private:
 QTextEdit *textEdit;

 QAction *openAction;
 QAction *saveAction;
 QAction *exitAction;

 QMenu *fileMenu;
};

Incluimos dos slots más que pueden guardar y abrir un documento. Implementaremos su funcionalidad en la siguiente sección.

A menudo, en una ventana principal (main window), el mismo slot debe ser invocado por varios widgets. Ejemplos de ello son los elementos de menú y los botones en una barra de herramientas. Para hacer esto más fácil, Qt proporciona QAction, que puede ser dada a varios widgets, y ser conectada a un slot. Por ejemplo, tanto QMenu como QToolBar pueden crear elementos de menú y botones de herramientas de las mismas QAction. En breve vamos a ver como funciona esto.

Como antes, usamos el constructor del Bloc de Notas (Notepad) para configurar la GUI.

Notepad::Notepad()
{
 saveAction = new QAction(tr("&amp;Open"), this);
 saveAction = new QAction(tr("&amp;Save"), this);
 exitAction = new QAction(tr("E&amp;amp;xit"), this);

 connect(openAction, SIGNAL (triggered()), this, SLOT (open()));
 connect(saveAction, SIGNAL (triggered()), this, SLOT (save()));
 connect(exitAction, SIGNAL (triggered()), qApp, SLOT (quit()));

 fileMenu = menuBar()->addMenu(tr("&amp;File"));
 fileMenu->addAction(openAction);
 fileMenu->addAction(saveAction);
 fileMenu->addSeparator();
 fileMenu->addAction(exitAction);

textEdit = new QTextEdit;
 setCentralWidget(textEdit);

setWindowTitle(tr("Notepad"));
}

Las QAction son creadas con el texto que debe aparecer en los widgets a los que las adicionemos (en nuestro caso, los elementos de menú). Si también quisieramos añadirlos a una barra de herramientas, podríamos haberles dado iconos a las acciones (actions).

Cuando un elemento de menú es presionado, el elemento dispara la accion, y el respectivo slot se invocará.

Aprender Más

Guardando y Cargando

En este ejemplo, vamos a implementar la funcionalidad de los slots open() y save() que adicionamos en el ejemplo anterior.

http://doc.qt.nokia.com/4.7/images/gs5.png

Vamos a iniciar con el slot open():

QString fileName = QFileDialog::getOpenFileName(this, tr("Open File"), "",
 tr("Text Files ('''.txt);;C++ Files ('''.cpp '''.h)"));

if (fileName != "") {
 QFile file(fileName);
 if (!file.open(QIODevice::ReadOnly)) {
 QMessageBox::critical(this, tr("Error"),
 tr("Could not open file"));
 return;
 }
 QString contents = file.readAll().constData();
 textEdit->setPlainText(contents);
 file.close();
}

El primer paso es preguntar al usuario por el nombre del archivo a abrir. Qt viene con QFileDialog, éste es un dialogo con el cual el usuario puede seleccionar un archivo. La siguiente imagen muestra el dialogo en Kubuntu. La funcion estática (static) getOpenFileName() muestra un dialogo de archivos modales, y no retorna hasta que el usuario ha seleccionado un archivo. Éste retorna la ruta del archivo seleccionado, o una cadena de texto (string) vacía si el usuario cancela el diálogo.

Si tenemos un nombre de archivo, tratamos de abrirlo con open(), que devuelve verdadero (true) si el archivo se puede abrir. No vamos a entrar en el manejo de errores aquí, pero puede consultar los enlaces de la sección de aprender más. Si el archivo no se puede abrir, utilizamos QMessageBox para mostrar un diálogo con un mensaje de error (consulte la descripción de la clase QMessageBox para más detalles).

En realidad, la lectura de los datos es trivial utilizando la función readAll(), la cual devuelve todos los datos del archivo en un QByteArray. La función constData() devuelve todos los datos del arreglo (array) como un const char, QString tiene un constructor para éste. Los contenidos se pueden visualizar en el editor de texto. Luego llamamos la función close() que cierra el archivo para retornar la descripción del archivo al sistema operativo.

Ahora, vamos a pasar al slot save().

QString fileName = QFileDialog::getSaveFileName(this, tr("Save File"), "",
 tr("Text Files ('''.txt);;C++ Files ('''.cpp '''.h)"));

if (fileName != "") {
 QFile file(fileName);
 if (!file.open(QIODevice::WriteOnly)) {
 // error message
 } else {
 QTextStream stream(&amp;file);
 stream << textEdit->toPlainText();
 stream.flush();
 file.close();
 }
}

Cuando escribimos el contenido del editor de texto en el archivo, utillizamos la clase QTextStream, que envuelve al objeto QFile. El flujo de texto puede escribir QStrings directamente al archivo; QFile sólo acepta los datos en bruto (char) con las funciones write() de QIODevice.

Aprender Más