Qt Tutorial : C++ Notepad App
I thought it would be fun to make a real app in this Qt Tutorial, so I made a working Notepad app. We’ll install Qt for Windows and MacOS. Then we’ll cover Qt Basics, Dialogs, Widgets, Drag and Drop Interfaces, Creating / Opening / Saving Files, Menus, Toolbars, Icons, Printing, and much more.
Qt is an amazing framework for creating cross platform C++ GUI applications. All of the code follows the video below. Here are the icons used.
If you like videos like this consider donating $1, or simply turn off Ad Blocking software. Either allows me to continue making free tutorials.
Code from the Video
I made a small change to the code. I changed my main program code into notepad because I thought that made more sense.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 |
// ---------- QT5 TUTORIAL 1 ---------- // ---------- HelloWorld ---------- I. First Program 1. New Project (File | New File or Project) 2. Qt Widgets Application 3. Set Project Name, Project Directory and Default Project Location 4. Select Desktop Qt kit 5. Leave class names as default 6. Finish 7. Click mainwindow.ui under Forms 8. Drag a Label out and change the text to Hello World 9. Click Run in bottom left hand corner II. Interface 1. Widget Box : Contains all widgets you can drag into the Form Editor 2. Form Toolbar : is above the Form Editor : Click on different layouts 3. Object Inspector : Lists all current Widgets 4. Property Editor : Change properties of currently selected Widget 5. Action Editor : Create actions associated with your toolbars and menubars 6. Output Pane : At very bottom, provides information for debugging // ---------- END HelloWorld ---------- // ---------- WIDGETS ---------- I. Layouts : Provide structure and a common look 1. Vertical : layout widgets in columns from top to bottom 2. Horizontal : layout in rows from left to right 3. Grid : layout in 2 dimensional grid in which widgets can take up more then 1 cell 4. Form : layout in a 2 column style // ---------- END WIDGETS ---------- // ---------- STYLE SHEETS ---------- // Stylesheets in Qt are similar to CSS // Stylesheets can be changed by your code, the properties editor, or // by right clicking a widget and then selecting Change stylesheet // To change styling on a layout, select it in the Object Inspector and // then Right click -> Morph into -> QFrame // ---------- END STYLE SHEETS ---------- // ---------- NOTEPAD.PRO ---------- # Add printing support QT += core gui printsupport // ---------- END NOTEPAD.PRO ---------- // ---------- NOTEPAD.H ---------- #ifndef NOTEPAD_H #define NOTEPAD_H // Provides the main application window on which the user interface // is built by adding widgets #include <QMainWindow> #include <QFile> #include <QFileDialog> #include <QTextStream> #include <QMessageBox> #include <QPrinter> #include <QPrintDialog> // Use the standard UI namespace which is tied to the .ui file namespace Ui { class Notepad; } class Notepad : public QMainWindow { // Declares our class as a QObject which is the base class // for all Qt objects // QObjects handle events // Each QObject executes on a thread Q_OBJECT public: // Declare a constructor and by passing 0 we state this widget // has no parent explicit Notepad(QWidget *parent = 0); // Declare a destructor which will free resources ~Notepad(); private slots: void on_actionNew_triggered(); void on_actionOpen_triggered(); void on_actionSave_as_triggered(); void on_actionPrint_triggered(); void on_actionExit_triggered(); void on_actionSave_triggered(); void on_actionCopy_triggered(); void on_actionCut_triggered(); void on_actionPaste_triggered(); void on_actionUndo_triggered(); void on_actionRedo_triggered(); private: // Point to the ui class Ui::Notepad *ui; // A Qt character string that will hold text entered by the user QString currentFile = ""; }; #endif // NOTEPAD_H // ---------- END NOTEPAD.H ---------- // ---------- MAIN.CPP ---------- #include "notepad.h" // Handles widgets, event handling, mouse, windows look and feel #include <QApplication> // Where execution begins int main(int argc, char *argv[]) { // Creates the application object QApplication a(argc, argv); // Create the main application object and display it on screen Notepad w; w.show(); // Puts the application into a loop in which events are handled return a.exec(); } // ---------- END MAIN.CPP ---------- // ---------- NOTEPAD.CPP ---------- #include "notepad.h" #include "ui_notepad.h" // The Notepad constructor Notepad::Notepad(QWidget *parent) : // Call the QMainWindow constructor QMainWindow(parent), // Create the UI class and assign it to the ui member ui(new Ui::Notepad) { // Setup the UI ui->setupUi(this); // Have the textedit widget take up the whole window this->setCentralWidget(ui->textEdit); } // Destructor that deletes the UI Notepad::~Notepad() { delete ui; } // We can type in commands on our menubar which will then appear in // the Action Editor. // Right click the Action -> Go to slot -> Triggered -> Add code for the event // With Qt objects communicate in a different way from other frameworks // Most frameworks handle an event by creating a function that processes // events by calling other functions when an event occurs // With Qt widgets issue a Signal when an event occurs and specific // Slots (functions) are called in response to the signal // ----- ADDING ICONS TO TOOLBAR & MENU ----- // 1. Add Resource Folder : Right Click Project -> Add New -> // Qt -> Qt Resource File -> Name : Resources Path: Folder // 2. Add Icons to Resource Folder : Select resource file -> // Add Prefix -> /imgs -> Add Files -> Select icons // 3. Add Icons to File Menu : Right click item in Action Editor -> // Choose Resource -> Select Icon -> Click to show image // 4. Add items to the toolbar by dragging from the Action // Editor to the toolbar // ----- END ADDING ICONS TO TOOLBAR & MENU ----- void Notepad::on_actionNew_triggered() { // Global referencing the current file that we are clearing currentFile.clear(); // Clear the textEdit widget buffer ui->textEdit->setText(QString()); } void Notepad::on_actionOpen_triggered() { // Opens a dialog that allows you to select a file to open QString fileName = QFileDialog::getOpenFileName(this, "Open the file"); // An object for reading and writing files QFile file(fileName); // Store the currentFile name currentFile = fileName; // Try to open the file as a read only file if possible or display a // warning dialog box if (!file.open(QIODevice::ReadOnly | QFile::Text)) { QMessageBox::warning(this, "Warning", "Cannot open file: " + file.errorString()); return; } // Set the title for the window to the file name setWindowTitle(fileName); // Interface for reading text QTextStream in(&file); // Copy text in the string QString text = in.readAll(); // Put the text in the textEdit widget ui->textEdit->setText(text); // Close the file file.close(); } void Notepad::on_actionSave_as_triggered() { // Opens a dialog for saving a file QString fileName = QFileDialog::getSaveFileName(this, "Save as"); // An object for reading and writing files QFile file(fileName); // Try to open a file with write only options if (!file.open(QFile::WriteOnly | QFile::Text)) { QMessageBox::warning(this, "Warning", "Cannot save file: " + file.errorString()); return; } // Store the currentFile name currentFile = fileName; // Set the title for the window to the file name setWindowTitle(fileName); // Interface for writing text QTextStream out(&file); // Copy text in the textEdit widget and convert to plain text QString text = ui->textEdit->toPlainText(); // Output to file out << text; // Close the file file.close(); } void Notepad::on_actionSave_triggered() { QString fileName = QFileDialog::getSaveFileName(this, "Save"); QFile file(fileName); if (!file.open(QFile::WriteOnly | QFile::Text)) { QMessageBox::warning(this, "Warning", "Cannot save file: " + file.errorString()); return; } currentFile = fileName; setWindowTitle(fileName); QTextStream out(&file); QString text = ui->textEdit->toPlainText(); out << text; file.close(); } void Notepad::on_actionPrint_triggered() { // Allows for interacting with printer QPrinter printer; // You'll put your printer name here printer.setPrinterName("Printer Name"); // Create the print dialog and pass the name and parent QPrintDialog pDialog(&printer, this); if(pDialog.exec() == QDialog::Rejected){ QMessageBox::warning(this, "Warning", "Cannot Access Printer"); return; } // Send the text to the printer ui->textEdit->print(&printer); } void Notepad::on_actionExit_triggered() { QApplication::quit(); } void Notepad::on_actionCopy_triggered() { ui->textEdit->copy(); } void Notepad::on_actionCut_triggered() { ui->textEdit->cut(); } void Notepad::on_actionPaste_triggered() { ui->textEdit->paste(); } void Notepad::on_actionUndo_triggered() { ui->textEdit->undo(); } void Notepad::on_actionRedo_triggered() { ui->textEdit->redo(); } // ---------- END NOTEPAD.CPP ---------- // ---------- END QT5 TUTORIAL 1 ---------- |
Leave a Reply