ECE 424 (Fall-12) Lab 1: User InterfaceInstructor: Dr. Ning Weng, nweng@siu.eduTA: Cheng-Liang Hsieh, isapapa@siu.edu

Due: 11:59pm, Monday, Sep, 17th, Desire2learn website

The goal of this lab is to learn how to build a simple graphical user interface by Qt

software development framework. It is recommended that you follow the steps and

use Qt Designer for the graphical user interface. To perform this lab, you will need a

PC with Qt SDK installed (available in ECE PC lab E132). You can also download it

from the following link for your personal PC:

http://qt.nokia.com/products/qt-sdk/

For Qt class reference, please refer to the following link:

http://doc.qt.nokia.com/

Note1:1. Please submit lab report answering questions 1 to 10 and source codes for

questions 11-132. At least 5 hours required to complete the lab. Please start now!

Step 1: Create a new project for lab 1

(1) Open Qt creator from Qt SDK.

(2) Create a new “Qt Gui Application” project under “Qt Widget Project” template.

Figure 1

(3) Name your project. Choose “Desktop” for Target Setup.

1

Figure 2

(4) Name your Main Window and choose the Base class as “QMianWindow”.

Then finish all the initial set-up for the project.

Step 2: Add “actions” for the main window.

(1) After finish step 1, you should entry Qt creator to edit your code as following:

Figure 3

Q1: How many files do you have now which is related to “mainwindow” now in Qt

Creator?

Q2: What is the purpose for each file?

Q3: Which header file that we included in mainwindow.cpp is for the form of

“mainwindow.ui”?

(2) Choose “Design” on the left side on the window (or press Ctrl+3) to entry Qt Designer.

You should have a window like following:

2

Figure 4

In the central design area, click “Type Here” to add your first function cluster and name it as

”File”. Then add another function cluster and name it as “Account”.

(3) Click “File” again then add a function called “Save”. Click “Account” again then add three

functions called “Log In”, “Log Out”, and “Add User”. On the lower right hand side, you

can change the property of each object. Please give all your functions an ObjectName

then disable “Save”, ”Log Out”, and ”Add User” functions. After you done the design, your

design area should looks like following capture.

Figure 5

Step 3: Design the dialog for each function.

(1) Come back to Edit mode. Then right click on your project to add new Qt Designer Form

Class.

3

Figure 6 Figure 7

(2) Choose “Dialog with Buttons Right” from templates. Then give the dialog a suitable

Name. Here we use “Dialog_LogIn” since we are going to use this dialog for log in

function. However, you can just choose a name as you wish.

Figure 8

(3) Design your Log In dialog. Change the dialog size. Draw two “Label” from Display

Widgets and two “Line Edit” into your dialog. Then name those objects as you wise. Here

we name the first LineEdit Box for user name as “lineEdit_UserName” and the other one

for password as “lineEdit_Password”. Then use the layout tool to align all labels and line

edit boxes. Your form should look like as following. Save this form.

4

Figure 9

Figure 10

Q4: How many files do you have which is related to “dialog_login” now in Qt Creator?

Q5: What is the purpose for each file?

Q6: Which header file that we included in dialog_login.cpp is for the form of

“dialog_login.ui”?

Step4: Let main window know that Dialog_LogIn and make it be able to access the

objects of Dialog_LogIn.

(1) Include the header file of Dialog_LogIn in to mainwindow.cpp as following:

#include "mainwindow.h"

#include "ui_mainwindow.h"

#include "dialog_login.h" // Include the dialog_login.h in mainwindow.cpp.

Step5: Connect your action with dialog.

(1) Now we are going to connect the “Log In” action from the form of main window to the Log

In dialog. Here, we have to use the signal-slot mechanism.

(2) In mainwindow.h, please declare one private slot in you code for the dialog we just create

as following: (Note: Depending on how you do the coding, it can either be a private or

public slot. Here we make it as a private slot.)

class MainWindow : public QMainWindow

{

Q_OBJECT

public:

explicit MainWindow(QWidget *parent = 0);

~MainWindow();

public slots:

5

bool login(); // this is where we add a private slot for login function.

private:

Ui::MainWindow *ui;

};

Q7: What is the purpose of “Q_OBJECT” in mainwindow.h ?

(3) In mainwindow.cpp, please implement the signal-slot mechanism for an action of “log in”

function as following:

MainWindow::MainWindow(QWidget *parent) :

QMainWindow(parent),

ui(new Ui::MainWindow)

{

ui->setupUi(this);

connect(ui->actionLog_In,SIGNAL(triggered()),this,SLOT(login())); //set up signal-slot mechanism

}

bool MainWindow::login()

{

Dialog_LogIn *dialog = new Dialog_LogIn(this);

dialog->exec();

return false;

}

Q8: In connect function (signal-slot mechanism) above, what does this mean?

Q9: In connect function above, who is the sender and who is the receiver?

Step6: Modify “Log In” function to read the data set of user name and password from a

file.

(1) Declare two functions in dialog_login.h and add them in dialog_log.cpp to return the input

values from the login dialog form. In dialog_login.h we have to declare these two function

first.

class Dialog_LogIn : public QDialog

{

Q_OBJECT

public:

explicit Dialog_LogIn(QWidget *parent = 0);

~Dialog_LogIn();

QString return_UserName(); // Declare one function to return the input user name

6

QString return_Password(); // Declare another function to return the input password

private:

Ui::Dialog_LogIn *ui;

};

In dialog_login.cpp, we implement these two functions as following:

QString Dialog_LogIn::return_UserName() //Add first function to return user name from the current UI

{

return ui->lineEdit_Name->text(); // We use text() here to get the value from the input dialog.

}

QString Dialog_LogIn::return_Password() ////Add 2nd function to return password from the current UI

{

return ui->lineEdit_Password->text();

}

Please note that lineEdit_UserName and lineEdit_Password are the names we gave before

for those two lineEdit boxes when we design the Log_In dialog.

(2) Add one additional function called LogIn_Verify() to Main Window to help us check if a

user is valid or not. In the “mainwindow.h”, we declare a new function as following:

class MainWindow : public QMainWindow

{

Q_OBJECT

public:

explicit MainWindow(QWidget *parent = 0);

~MainWindow();

bool LogIn_Verify(QString temp_UserName, QString temp_Password); //Declare a new function here.

public slots:

bool login();

private:

Ui::MainWindow *ui;

};

(3) Since we are going to get data from a text file then use those data in a list as a reference

to compare the input data from user, we have to include more header files for those jobs.

To implement those new jobs, we include those header files in the “mainwindow.cpp” as

following:

#include "mainwindow.h"

#include "ui_mainwindow.h"

7

#include "dialog_login.h"

#include "QMessageBox"//Include this to have a message to show if a user is valid or not.

#include <QFile> // Include this to help us to open a file

#include <QList> //Include this to help us to put those data we get from a file to a list

#include <QTextStream> //Include this header to help us to get the text data from a file

#include <QDebug>// This is an optional header. This can help you to output error message.

(4) Modify login() in “mainwindow.cpp” for the new function as following:

bool MainWindow::login()

{

Dialog_LogIn *dialog = new Dialog_LogIn(this);

dialog->exec(); //Q8

QString temp_UserName = dialog->return_UserName();

QString temp_Password = dialog->return_Password();

if(LogIn_Verify(temp_UserName,temp_Password)){ //LogIn_Verify() is not defined yet.

return true;

}

else {

return false;

}

}

Q10: What is the difference if we modify the code above from “dialog_>exec() to dialog-

>show()?

Step7: Implement LogIn_Verify() in mainwindow.cpp

(1) Add LogIn_Verify() function as following:

bool MainWindow::LogIn_Verify(QString temp_UserName,QString temp_Password)

{

QFile inFile("c://Users/Pa/Test_Lab1/accounts.txt"); //Open your account file.

inFile.open(QIODevice::ReadOnly); //Read from your file

QTextStream ReadIn(&inFile);//Read your file as a text stream

QStringList list_Name, list_Password, list_Priority; //Make 3 different lists to store data

while(!ReadIn.atEnd()){ //Read file until reach the end of your account file

QString line = ReadIn.readLine(); //Read one lie each iteration

QStringList fields = line.split(' ');// Have a list to store all data

if (fields.size() >=3){

list_Name<<fields.takeFirst(); //Remove first input from a list and put it to List_Name

8

list_Password<<fields.takeFirst();

list_Priority<<fields.takeFirst();

}

}

int i=0;

while(i<list_Name.count()){ //Get the number of name inputs. Use it as the index for checking loop.

if

((temp_UserName==list_Name[i])&&(temp_Password==list_Password[i])&&("1"==list_Priority[i])) {

QMessageBox msgBox; //Make a Message Box and use it to show user the log in status.

msgBox.setText("Log in as a administrator!");

msgBox.exec();

ui->actionLog_In->setEnabled(0); //Disable “Log In”action since a valid user existed.

ui->actionLog_Out->setEnabled(1); //Enable “Log_Out”action

ui->action_Save->setEnabled(1);//Enable “Save” action

ui->actionAdd_User->setVisible(1);//Make “Add User”action visible

ui->actionAdd_User->setEnabled(1);//Enable “Add User”action.

return true;

}

else if

((temp_UserName==list_Name[i])&&(temp_Password==list_Password[i])&&("0"==list_Priority[i])) {

QMessageBox msgBox;

msgBox.setText("Log in as a user!");

msgBox.exec();

ui->actionLog_In->setEnabled(0);

ui->actionLog_Out->setEnabled(1);

ui->action_Save->setEnabled(1);

ui->actionAdd_User->setVisible(0);

ui->actionAdd_User->setEnabled(0);

ui->action_Save->setEnabled(1);

return true;

}

i++;

}

if (i=list_Name.count()){ //Handle the situation when there is no valid user existed.

QMessageBox msgBox;

msgBox.setText("Log in failed!");

msgBox.exec();

return false;

9

}

}

Q11:

Now add the “Log Out” function to your applicattion. Here you can just simply pop up a

message box to remind user again before logging out as figure 11. Once user choosing “Yes”,

you make all actions back the default status (Enabled: Log In, Disabled: Add User, Log Out,

and Save) by using Signal-Slot mechanism.

Figure 11

You code might look like following:

bool MainWindow::logout()

{

Dialog_logout *dialog = new Dialog_logout(this);

dialog->show();

connect(dialog,SIGNAL(accepted()),this,SLOT(ButtonDefault())); //signal-slot mechanism

return true;

}

Please note that ButtonDefault() is a function defined by you to set all button status back as

default.

Q12: Add the “Add User” function to your application. Besides user name and password, you

also need a feature to see if new user can work as administrator or not. Only administrator is

allowed to add new user. New user is not added to the external file until we click “Save”

function.

Figure 12

Q13: Make the “Save” function to work correctly.

You should pop up a warning message once you click this function. Once Yes is selected, all

data need to be stored back the same account file. When you open this application again in

10

the future, this new user should be able to log in system without any problem.

Figure 13

The code to pop out a warning message looks like following.

bool MainWindow::save()

{

int r = QMessageBox::warning(this,tr("Save"),tr("Do you want to save your data?"),

QMessageBox::Yes|QMessageBox::Default,

QMessageBox::No,QMessageBox::Cancel); //Pop up a warning box.

//Add your code to complete this function.

}

Done!

11