[HOWTO] Como crear un Editor de Texto

En este tutorial explicare como crear un pequeno editor de texto.

1.- Abrimos el IDE Qt Creator.

2.- Crearemos un nuevo proyecto en el menu Archivo -> Nuevo archivo o proyecto -> Qt Gui Aplication. y luego clic en Aceptar.

3.- El proyecto lo llamaremos TextEditor o pueden ponerle el nombre que quieran (Nota: el nombre que tendra el proyecto debe de estar escrito junto, si lo ponen separado no les dejara continuar).

4.- En la ventana Seleccion de modulos requeridos lo dejan asi como esta ya que los demas no los vamos a ocupar. Clic en siguiente.

6.- En Informacion de Clases. donde dice nombre de la clase escribanle TextEditor y en Base de la clase seleccionen QMainWindow. clic en siguiente y despues en finalizar.

7.- Despues se crearan varios archivos los cuales son:

• texteditor.ui este nos servira para crear la interfas grafica del programa.
  
  
• texteditor.h aqui declararemos todas las funciones que hara el programa o algo asi.
  
  
• main.cpp y texteditor.cpp aqui escribiremos todo lo que el programa tendra que hacer.

8.- seleccionamos el archivo texteditor.ui y crearemos los menus que tendra el programa.

• Hacemos 2 clic seguidos donde dice Type Here (en el form)y escribimos Archivo. y luego crearemos los submenus Abrir, Guardar y Cerrar.
  
  
  
  
• En el otro menu escribiremos Editar y los submenus seran Cortar, Copiar, Pegar y Limpiar.
  
  
  
  
  
• Ahora agregaremos 6 PushButton. Seleccionen un PushButton y haciendo 2 clic sobre el boton le pueden cambiar el nombre, la otra forma es que en la barra de propiedades busquen donde dice Text y ahi le pueden cambiar el nombre (oviamente el boton debe de estar seleccionado).
  
  
• Luego presionamos las teclas Ctrl + A y luego Ctrl + h esto lo que hara es acomodar los botones (como se ve en la imagen).
  
  
  
  
  
• Luego agregaremos un Text Edit. luego seleccionen los widget y presionen Ctrl + A y Ctrl + V.

Si lo compilamos y ejecutamos se vera asi:


8.- Ahora procederemos a realizar las conecciones del programa. hacemos clic en el boton Editar Signals/Slots o presionar la tecla F4.

• Escojan el boton Cortar y unanlo con el Text Edit. Se abrira la sig ventana, seleccionen clicked() luego cut() y Aceptar.
  
  
  
  
  
  
• Hagan lo mismo con los demas botones pero esta vez sera asi:
  
  boton Cortar -> Text Edit :: clicked() -> cut()
  boton Copiar -> Text Edit :: clicked() -> copy()
  boton Pegar -> Text Edit :: clicked() -> paste()
  boton Limpiar -> Text Edit :: clicked() -> clear()
  
  
  
  
• Ahora procederemos a conectar los botones Abrir y Guardar. Escojemos el primer boton y lo unimos al widget. Se abrira la ventana de arriba y hacemos clic en el boton Edit. luego clic en el boton + escriban abrir() y guardar().
  
  
  
  
  
• Despues clic en Aceptar. y veran de que se agregaron 2 slots. seleccione el slot abrir() para el boton Abrir y guardar() para el boton Guardar.

Ahora procederemos a conectar los menus con los slots. Si le dan clic al signo de + deben de hacerle clic 7 veces para conectar los 7 submenus:

actionAbrir -> triggered() -> TextEditor -> abrir()
actionGuardar -> triggered() -> TextEditor -> abrir()
actionCerrar -> triggered() -> TextEditor -> close()
actionCortar -> triggered() -> textEdit -> cut()
actionCopiar -> triggered() -> textEdit -> copy()
actionPegar -> triggered() -> textEdit -> paste()
actionLimpiar -> triggered() -> textEdit -> clear()


Luego de que terminemos de disenar la aplicacion ahora procederemos a programarla.

9.- seleccionamos el archivo textedit.h y agregamos:

Código:

public slots:
    void abrir();
    void guardar();

10.- En el archivo textedit.cpp escribimos:

Código:

void TextEditor::abrir()
{
    QString nombreArchivo = QFileDialog::getOpenFileName(this,
                                                        ("Abrir archivo"), "",
                                                        ("txt(*.txt);;All Files(*)"));
    QFile archivo(nombreArchivo);

    if (archivo.open(QIODevice::ReadOnly|QIODevice::Text)) {
        ui->textEdit->QTextEdit::setPlainText(QString::fromUtf8(archivo.readAll()));
    }

}

void TextEditor::guardar()
{
    QString nombreArchivo = QFileDialog::getSaveFileName(this,
                                                        ("Guardar archivo"), "",
                                                        ("txt(*.txt);;All Files(*)"));

    if(nombreArchivo.isEmpty())
        return;

    QFile archivo(nombreArchivo);
    if (archivo.open(QIODevice::WriteOnly|QIODevice::Text))
    {
        archivo.write(ui->textEdit->toPlainText().toUtf8());
    }
}


__________________________________________________________________
VideoTutorial creado por: lexblas



__________________________________________________________________
Descarga del video:

Enlace 1: Subido por lexblas
Enlace 2: Subido por Lycus HackerEmo

Se agrego el Videotutorial en youtube de como crear un Editor de Texto, ademas de 2 enlaces para descargar el video.