Difference between revisions of "Basic Qt Programming Tutorial/es"

From Qt Wiki
Jump to: navigation, search
 
m (Revisión del contenido, se encuentra actualizado, por lo cual se retira de la lista (Articles needing cleanup).)
 
(10 intermediate revisions by 4 users not shown)
Line 1: Line 1:
'''Español''' [[Basic Qt Programming Tutorial|English]] [[Basic Qt Programming Tutorial SimplifiedChinese|简体中文]] [[Basic Qt Programming Tutorial Persian|فارسی]] [[Temel Qt Programlama Egitimi|Türkçe]]
+
[[Category:HowTo]]
 +
[[Category:Developing_with_Qt::General]]
 +
[[Category:Tutorial]]
  
=Introducción=
+
 
 +
'''Español''' [[Basic_Qt_Programming_Tutorial|English]] [[Basic_Qt_Programming_Tutorial_SimplifiedChinese|简体中文]] [[Basic_Qt_Programming_Tutorial_Persian|فارسی]] [[Temel_Qt_Programlama_Egitimi|Türkçe]]
 +
 
 +
= Introducción =
  
 
En este tutorial se explica en detalle como dar los primeros pasos programando con Qt usando el entorno de desarrollo Qt Creator.
 
En este tutorial se explica en detalle como dar los primeros pasos programando con Qt usando el entorno de desarrollo Qt Creator.
Line 7: Line 12:
 
Si quieres aprender a hacer potentes interfaces de usuario con las últimas tecnologías este no es tu tutorial. Lo único que se persigue aquí es proporcionar una introducción a quienes están empezando para que pierdan el miedo.
 
Si quieres aprender a hacer potentes interfaces de usuario con las últimas tecnologías este no es tu tutorial. Lo único que se persigue aquí es proporcionar una introducción a quienes están empezando para que pierdan el miedo.
  
Empezaremos creando un nuevo proyecto de Qt, modificando el código para mostrar una interfaz gráfica (<span class="caps">GUI</span>) muy simple. Una vez que la aplicación básica esté funcionando, la modificaremos para hacer algunas cosas útiles.
+
Empezaremos creando un nuevo proyecto de Qt, modificando el código para mostrar una interfaz gráfica (GUI) muy simple. Una vez que la aplicación básica esté funcionando, la modificaremos para hacer algunas cosas útiles.
  
Para comenzar, instala el Qt <span class="caps">SDK</span>, o, en Linux, consigue una copia de Qt y un compilador.
+
Para comenzar, instala el Qt SDK, o, en Linux, consigue una copia de Qt y un compilador.
  
==Primer contacto: Crear un nuevo proyecto==
+
== Primer contacto: Crear un nuevo proyecto ==
  
 
Intentaremos hacer una aplicación básica con una sola ventana que muestra un QLabel y un QLineEdit. Para ello sólo hay que seguir estos pasos:
 
Intentaremos hacer una aplicación básica con una sola ventana que muestra un QLabel y un QLineEdit. Para ello sólo hay que seguir estos pasos:
  
# Abre Qt Creator.<br />[http://gallery.theharmers.co.uk/picture.php?/22/category/7 [[Image:TN-20110503152033-f24040e3.jpg|Start Qt-Creator]]] ''[gallery.theharmers.co.uk]''
+
# Abre Qt Creator.
# Ve a File-&gt;“New File or Project…” en el menú.
+
[[File:Qtcreator-001.png|600px]]
# Elige Qt Gui Application y ponle un nombre.<br />[http://gallery.theharmers.co.uk/picture.php?/23/category/7 [[Image:TN-20110503152034-ea9bb58a.jpg|Select project type]]] ''[gallery.theharmers.co.uk]''
+
 
# Pon un nombre al proyecto, por ejemplo “qt-tutorial-01”.<br />[http://gallery.theharmers.co.uk/picture.php?/24/category/7 [[Image:TN-20110503152034-8dabd337.jpg|Choose project name]]] ''[gallery.theharmers.co.uk]''
+
# Ve a File->"New File or Project…" en el menú.
# Selecciona una o varias versiones de Qt. Una versión desktop build será apropiada para este tutorial.<br />[http://gallery.theharmers.co.uk/picture.php?/25/category/7 [[Image:TN-20110503152034-35f9e7cb.jpg|Choose Qt build to target]]] ''[gallery.theharmers.co.uk]''
+
# Elige Qt Gui Application y ponle un nombre.
# Nombra a la clase base QWidget (también puedes dejar el nombre que salga por defecto y usarlo más adelante en lugar de QWidget).<br />[http://gallery.theharmers.co.uk/picture.php?/26/category/7 [[Image:TN-20110503152034-26f92911.jpg|Select project generation options]]] ''[gallery.theharmers.co.uk]''
+
[[File:Qtcreator-002.png|600px]]
# Haz clic en “Finish” cuando hayas comprobado las opciones del proyecto.<br />[http://gallery.theharmers.co.uk/picture.php?/27/category/7 [[Image:TN-20110503152034-95ce9f30.jpg|Check project summary]]] ''[gallery.theharmers.co.uk]''
+
 
 +
# Pon un nombre al proyecto, por ejemplo "qt-tutorial-01".
 +
[[File:Qtcreator-003.png|600px]]
 +
 
 +
# Selecciona una o varias versiones de Qt. Una versión desktop build será apropiada para este tutorial.
 +
[[File:Qtcreator-004.png|600px]]
 +
 
 +
# Nombra a la clase base QWidget (también puedes dejar el nombre que salga por defecto y usarlo más adelante en lugar de QWidget).
 +
[[File:Qtcreator-005.png|600px]]
 +
 
 +
# Haz clic en "Finish" cuando hayas comprobado las opciones del proyecto.
 +
[[File:Qtcreator-006.png|600px]]
 +
 
  
 
Al terminar se creará un proyecto con los siguientes cuatro archivos:
 
Al terminar se creará un proyecto con los siguientes cuatro archivos:
Line 30: Line 47:
 
* widget.ui
 
* widget.ui
  
==Aprendiendo a gatear: Editar los archivos del proyecto==
+
== Aprendiendo a gatear: Editar los archivos del proyecto ==
  
 
Vamos a editar el archivo widget.ui primero:
 
Vamos a editar el archivo widget.ui primero:
  
# Haz clic en él y se abrirá el archivo pasando a modo diseño. Deberías ver una ventana vacía. Ahora haz esto:<br />[http://gallery.theharmers.co.uk/picture.php?/28/category/7 [[Image:TN-20110503154826-af1ea190.jpg|Open designer]]] ''[gallery.theharmers.co.uk]''
+
# Haz clic en él y se abrirá el archivo pasando a modo diseño. Deberías ver una ventana vacía. Ahora haz esto:
# Desde la barra de herramientas a la izquierda, arrastra un Label hasta el centro de la ventana.<br />[http://gallery.theharmers.co.uk/picture.php?/29/category/7 [[Image:TN-20110503154826-661b1ceb.jpg|Add label]]] ''[gallery.theharmers.co.uk]''
+
[[File:Qtcreator-007.png|600px]]
# Haz lo mismo con un Line Edit y colócalo a la derecha del Label. No importa la posición exacta.<br />[http://gallery.theharmers.co.uk/picture.php?/30/category/7 [[Image:TN-20110503154826-8c16787b.jpg|Add line edit]]] ''[gallery.theharmers.co.uk]''
+
 
# Haz clic en el fondo de la ventana para no tener nada seleccionado.<br />[http://gallery.theharmers.co.uk/picture.php?/31/category/7 [[Image:TN-20110503154826-5084f96c.jpg|Select parent widget]]] ''[gallery.theharmers.co.uk]''
+
# Desde la barra de herramientas a la izquierda, arrastra un Label hasta el centro de la ventana.
# En la barra superior haz clic en “Lay out Horizontall” o presiona Ctrl+h para añadir un bloque de disposición horizontal. De este modo el bloque se encargará de redimensionar automáticamente tus componentes si hay cambios de tamaño.<br />[http://gallery.theharmers.co.uk/picture.php?/32/category/7 [[Image:TN-20110503154826-01e7e207.jpg|Apply horizontal layout]]] ''[gallery.theharmers.co.uk]''
+
[[File:Qtcreator-008.png|600px]]
# Haz doble clic en el Label y cambiará a modo edición. Escribe en el “Me llamo:”<br />[http://gallery.theharmers.co.uk/picture.php?/33/category/7 [[Image:TN-20110503154826-4e8b7939.jpg|Change label text]]] ''[gallery.theharmers.co.uk]''
+
 
 +
# Haz lo mismo con un Line Edit y colócalo a la derecha del Label. No importa la posición exacta.
 +
[[File:Qtcreator-009.png|600px]]
 +
 
 +
# Haz clic en el fondo de la ventana para no tener nada seleccionado.
 +
[[File:Qtcreator-010.png|600px]]
 +
 
 +
# En la barra superior haz clic en "Lay out Horizontall" o presiona Ctrl+h para añadir un bloque de disposición horizontal. De este modo el bloque se encargará de redimensionar automáticamente tus componentes si hay cambios de tamaño.
 +
[[File:Qtcreator-011.png|600px]]
 +
 
 +
# Haz doble clic en el Label y cambiará a modo edición. Escribe en el "Me llamo:"
 +
[[File:Qtcreator-012.png|600px]]
 +
 
 
# Pulsa Ctrl+s para guardar.
 
# Pulsa Ctrl+s para guardar.
# Haz clic en el botón de modo Edit en el panel a la izquierda para volver a ese modo. Probablemente verás el contenido xml del archivo UI. Ciérralo.<br />[http://gallery.theharmers.co.uk/picture.php?/34/category/7 [[Image:TN-20110503154826-abad6378.jpg|Switch to Edit mode]]] ''[gallery.theharmers.co.uk]''
+
# Haz clic en el botón de modo Edit en el panel a la izquierda para volver a ese modo. Probablemente verás el contenido xml del archivo UI. Ciérralo.
 +
[[File:Qtcreator-013.png|600px]]
  
 
Ahora abre el archivo widget.h y modifícalo para que sea igual que:
 
Ahora abre el archivo widget.h y modifícalo para que sea igual que:
 +
 +
<code>
 +
#ifndef WIDGET_H
 +
#define WIDGET_H
 +
 +
#include <QWidget>
 +
 +
namespace Ui {
 +
  class Widget;
 +
}
 +
 +
class Widget : public QWidget
 +
{
 +
  Q_OBJECT
 +
 +
public:
 +
  explicit Widget(QWidget *parent = 0);
 +
  ~Widget();
 +
 +
void setName(const QString &name);
 +
  QString name() const;
 +
 +
private:
 +
  Ui::Widget *ui;
 +
};
 +
 +
#endif // WIDGET_H
 +
</code>
 +
  
 
Ahora edita el archivo .cpp correspondiente para que coincida con este:
 
Ahora edita el archivo .cpp correspondiente para que coincida con este:
 +
 +
<code>
 +
#include "widget.h"
 +
#include "ui_widget.h"
 +
 +
Widget::Widget(QWidget *parent) :
 +
  QWidget(parent),
 +
  ui(new Ui::Widget)
 +
{
 +
  ui->setupUi(this);
 +
}
 +
 +
Widget::~Widget()
 +
{
 +
  delete ui;
 +
}
 +
 +
void Widget::setName(const QString &name)
 +
{
 +
  ui->lineEdit->setText(name);
 +
}
 +
 +
QString Widget::name() const
 +
{
 +
  return ui->lineEdit->text();
 +
}
 +
</code>
  
 
Para terminar edita main.cpp :
 
Para terminar edita main.cpp :
  
==De pie y corriendo: Compilando y ejecutando la aplicación==
+
<code>
 +
#include <QApplication>
 +
#include "widget.h"
 +
 +
int main(int argc, char *argv[])
 +
{
 +
  QApplication a(argc, argv);
 +
  Widget w;
 +
 +
  w.setName("Slim Shady");
 +
 +
  w.show();
 +
 +
  return a.exec();
 +
}
 +
</code>
  
Ahora compila (con el icono del martillo abajo a la izquierda o con Ctrl-Shift-B) y ejecuta la aplicación (botón verde “play”). Verás aparecer algunos mensajes en el panel “Compile Output” abajo mientras se compila.<br />[http://gallery.theharmers.co.uk/picture.php?/35/category/7 [[Image:TN-20110503160137-3e61f249.jpg|Compiling the project]]] ''[gallery.theharmers.co.uk]''
+
== De pie y corriendo: Compilando y ejecutando la aplicación ==
 +
Ahora compila (con el icono del martillo abajo a la izquierda o con Ctrl-Shift-B) y ejecuta la aplicación (botón verde "play"). Verás aparecer algunos mensajes en el panel "Compile Output" abajo mientras se compila.
  
Este es el aspecto de la aplicación al ejecutarse:<br />[http://gallery.theharmers.co.uk/picture.php?/36/category/7 [[Image:TN-20110503160137-aac48922.jpg|The running application]]] ''[gallery.theharmers.co.uk]''
+
[[File:Qtcreator-014.png|600px]]
  
Como puedes ver la función main() es muy sencilla. Todo lo que hacemos es crear una [http://doc.qt.nokia.com/latest/qapplication.html QApplication] ''[doc.qt.nokia.com]'' y luego un Widget (la ventana que modificamos en el diseñador y a la que añadimos un comportamiento en el código con las funciones name() y setName()).
+
Este es el aspecto de la aplicación al ejecutarse:
  
Después invocamos a setName en el widget. Este a partir de un puntero al [http://doc.qt.nokia.com/latest/qlineedit.html QLineEdit] ''[doc.qt.nokia.com]'' que colocamos en el diseño llama al método [http://doc.qt.nokia.com/latest/qlineedit.html#text-prop setText()] ''[doc.qt.nokia.com]''().
+
[[File:Qtcreator-015.png|600px]]
  
Finalmente mostramos el widget y entramos en el bucle de eventos invocando a a.exec().
+
Como puedes ver la función <tt>main()</tt> es muy sencilla. Todo lo que hacemos es crear una [http://doc.qt.io/qt-5/qapplication.html QApplication] y luego un Widget (la ventana que modificamos en el diseñador y a la que añadimos un comportamiento en el código con las funciones name() y setName()).
  
Una vez que entiendas como funciona este simple programa puedes empezar a añadirle florituras como conexiones signal/slot.
+
Después invocamos a setName en el widget. Este a partir de un puntero al {{DocLink|QLineEdit}} que colocamos en el diseño llama al método {{DocLink|QLineEdit|text-prop|setText()}}.
  
==Ver también==
+
Finalmente mostramos el widget y entramos en el bucle de eventos invocando a <tt>a.exec()</tt>).
  
* [[Introduction to Qt Quick for Cpp developers|“Introduction to Qt Quick for C++ Developers”]]<br />''Note:'' The paper above is deprecated. Its content is now part of [[Introduction to Qt Quick|“Introduction to Qt Quick”]].
+
Una vez que entiendas como funciona este simple programa puedes empezar a añadirle florituras como conexiones signal/slot.
* [[How to Use QPushButton|“How to Use QPushButton”]]
 
* [[How-to-use-signals-and-slots|“How to use signals and slots”]]
 
 
 
===Categories:===
 
  
* [[:Category:Developing with Qt|Developing_with_Qt]]
+
== Ver también ==
** [[:Category:Developing with Qt::General|General]]
+
''' [[Introduction_to_Qt_Quick_for_Cpp_developers|"Introduction to Qt Quick for C++ Developers"]]
* [[:Category:HowTo|HowTo]]
+
''Note:'' The paper above is deprecated. Its content is now part of [[Introduction_to_Qt_Quick|"Introduction to Qt Quick"]].
* [[:Category:Tutorial|Tutorial]]
+
* [[How_to_Use_QPushButton|"How to Use QPushButton"]]

Latest revision as of 00:30, 20 June 2017


Español English 简体中文 فارسی Türkçe

Introducción

En este tutorial se explica en detalle como dar los primeros pasos programando con Qt usando el entorno de desarrollo Qt Creator.

Si quieres aprender a hacer potentes interfaces de usuario con las últimas tecnologías este no es tu tutorial. Lo único que se persigue aquí es proporcionar una introducción a quienes están empezando para que pierdan el miedo.

Empezaremos creando un nuevo proyecto de Qt, modificando el código para mostrar una interfaz gráfica (GUI) muy simple. Una vez que la aplicación básica esté funcionando, la modificaremos para hacer algunas cosas útiles.

Para comenzar, instala el Qt SDK, o, en Linux, consigue una copia de Qt y un compilador.

Primer contacto: Crear un nuevo proyecto

Intentaremos hacer una aplicación básica con una sola ventana que muestra un QLabel y un QLineEdit. Para ello sólo hay que seguir estos pasos:

  1. Abre Qt Creator.

Qtcreator-001.png

  1. Ve a File->"New File or Project…" en el menú.
  2. Elige Qt Gui Application y ponle un nombre.

Qtcreator-002.png

  1. Pon un nombre al proyecto, por ejemplo "qt-tutorial-01".

Qtcreator-003.png

  1. Selecciona una o varias versiones de Qt. Una versión desktop build será apropiada para este tutorial.

Qtcreator-004.png

  1. Nombra a la clase base QWidget (también puedes dejar el nombre que salga por defecto y usarlo más adelante en lugar de QWidget).

Qtcreator-005.png

  1. Haz clic en "Finish" cuando hayas comprobado las opciones del proyecto.

Qtcreator-006.png


Al terminar se creará un proyecto con los siguientes cuatro archivos:

  • main.cpp
  • widget.h
  • widget.cpp
  • widget.ui

Aprendiendo a gatear: Editar los archivos del proyecto

Vamos a editar el archivo widget.ui primero:

  1. Haz clic en él y se abrirá el archivo pasando a modo diseño. Deberías ver una ventana vacía. Ahora haz esto:

Qtcreator-007.png

  1. Desde la barra de herramientas a la izquierda, arrastra un Label hasta el centro de la ventana.

Qtcreator-008.png

  1. Haz lo mismo con un Line Edit y colócalo a la derecha del Label. No importa la posición exacta.

Qtcreator-009.png

  1. Haz clic en el fondo de la ventana para no tener nada seleccionado.

Qtcreator-010.png

  1. En la barra superior haz clic en "Lay out Horizontall" o presiona Ctrl+h para añadir un bloque de disposición horizontal. De este modo el bloque se encargará de redimensionar automáticamente tus componentes si hay cambios de tamaño.

Qtcreator-011.png

  1. Haz doble clic en el Label y cambiará a modo edición. Escribe en el "Me llamo:"

Qtcreator-012.png

  1. Pulsa Ctrl+s para guardar.
  2. Haz clic en el botón de modo Edit en el panel a la izquierda para volver a ese modo. Probablemente verás el contenido xml del archivo UI. Ciérralo.

Qtcreator-013.png

Ahora abre el archivo widget.h y modifícalo para que sea igual que:

#ifndef WIDGET_H
#define WIDGET_H 

#include <QWidget>

namespace Ui {
 class Widget;
}

class Widget : public QWidget
{
 Q_OBJECT

public:
 explicit Widget(QWidget *parent = 0);
 ~Widget();

void setName(const QString &name);
 QString name() const;

private:
 Ui::Widget *ui;
};

#endif // WIDGET_H


Ahora edita el archivo .cpp correspondiente para que coincida con este:

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent) :
 QWidget(parent),
 ui(new Ui::Widget)
{
 ui->setupUi(this);
}

Widget::~Widget()
{
 delete ui;
}

void Widget::setName(const QString &name)
{
 ui->lineEdit->setText(name);
}

QString Widget::name() const
{
 return ui->lineEdit->text();
}

Para terminar edita main.cpp :

#include <QApplication>
#include "widget.h" 

int main(int argc, char *argv[])
{
 QApplication a(argc, argv);
 Widget w;

 w.setName("Slim Shady");

 w.show();

 return a.exec();
}

De pie y corriendo: Compilando y ejecutando la aplicación

Ahora compila (con el icono del martillo abajo a la izquierda o con Ctrl-Shift-B) y ejecuta la aplicación (botón verde "play"). Verás aparecer algunos mensajes en el panel "Compile Output" abajo mientras se compila.

Qtcreator-014.png

Este es el aspecto de la aplicación al ejecutarse:

Qtcreator-015.png

Como puedes ver la función main() es muy sencilla. Todo lo que hacemos es crear una QApplication y luego un Widget (la ventana que modificamos en el diseñador y a la que añadimos un comportamiento en el código con las funciones name() y setName()).

Después invocamos a setName en el widget. Este a partir de un puntero al QLineEdit que colocamos en el diseño llama al método setText().

Finalmente mostramos el widget y entramos en el bucle de eventos invocando a a.exec()).

Una vez que entiendas como funciona este simple programa puedes empezar a añadirle florituras como conexiones signal/slot.

Ver también

"Introduction to Qt Quick for C++ Developers" Note: The paper above is deprecated. Its content is now part of "Introduction to Qt Quick".