Programming Widget Layout

Use the gained knowledge to create forms

Table of Contents

1. About The Project
   • getting started
2. Experimenting with QHBOXLayout
3. Nested Layouts
4. Bug report Form
5. Grid Layout

About The Project

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

1. How to install Qt
2. Clone the repo

   git clone https://github.com/IlyasKadi/Widgets_and_Layouts.git

(back to top)

Experimenting-with-QHBOXLayout

Create a project called hbox with the following code:

int main(int argc, char* argv[])
{
  QApplication app(argc, argv);

  QWidget* window = new QWidget();
  window->setWindowTitle("QHBoxLayout Test");

  window->show();

  return app.exec();
}

This will show an empty window. Your goal is to modify the code in order to display the following form:

A QHBoxLayout example.

.Header

class dialoge1 : public QWidget
{
public:
    explicit dialoge1(QWidget *parent = nullptr);
protected:
    void createWidgets();
    void placeWidgets();
protected:
    QLabel *namelabel;
    QLineEdit *line;
    QPushButton *search;
    QHBoxLayout *hlayout;
};

.cpp

dialoge1::dialoge1(QWidget *parent) : QWidget(parent)
{
   createWidgets();
   placeWidgets();
}
void dialoge1::createWidgets()
{

   namelabel   = new QLabel("Name");
   line        = new QLineEdit();
   search      = new QPushButton("Search");
   hlayout     = new QHBoxLayout();

   setLayout(hlayout);
   setWindowTitle("QHBoxLayout Test");

}
void dialoge1::placeWidgets()
{
   hlayout->addWidget(namelabel);
   hlayout->addWidget(line);
   hlayout->addWidget(search);
}

(back to top)

Nested-Layouts

The goal of the exercice is learn to analyse the construction of a form and thencode it using Netsted layouts.

Here we show you a classic dialog from the book GB to search for a user.

You do not have to code any functinality, just the form of the dialog.

Nested Layout. .Header

class Dialog2 : public QWidget
{
public:
    explicit Dialog2(QWidget *parent = nullptr);
protected:
    void createWidgets();
    void placeWidgets();
protected:
    QLabel *namelabel;
    QLineEdit *line;
    QPushButton *search;
    QPushButton *close;
    QHBoxLayout *mainLayout;
    QVBoxLayout *rightLayout;
    QVBoxLayout *leftLayout;
    QHBoxLayout *topLeftLayout;
    QCheckBox *match;
    QCheckBox *backward;
};

.cpp

Dialog2::Dialog2(QWidget *parent) : QWidget(parent)
{
    createWidgets();
    placeWidgets();
}
void Dialog2::createWidgets()
{
    //Labels
    namelabel = new QLabel("Name");
    //Lines
    line   = new QLineEdit();
    //Buttons
    search  = new QPushButton("Search");
    close   = new QPushButton("Close");
    //checkboxes
    match    = new QCheckBox("Match case");
    backward = new QCheckBox("Search backward");
    //Layouts
    mainLayout    = new QHBoxLayout();   
    topLeftLayout = new QHBoxLayout();
    rightLayout   = new QVBoxLayout(); 
    leftLayout    = new QVBoxLayout();
    setLayout(mainLayout);
    setWindowTitle("Nested Layout Test");
    resize(400,200);
 }
void Dialog2::placeWidgets()
{
    //Layouts structure
    mainLayout->addLayout(leftLayout);
    mainLayout->addLayout(rightLayout);
    leftLayout->addLayout(topLeftLayout);
    //objects
    rightLayout->addWidget(search);
    rightLayout->addWidget(close);
    
    topLeftLayout->addWidget(namelabel);
    topLeftLayout->addWidget(line);
    
    leftLayout->addWidget(match);
    leftLayout->addWidget(backward);
    
    topLeftLayout->addSpacerItem(new QSpacerItem(15,0,QSizePolicy::Fixed));
    
    rightLayout->addSpacerItem(new QSpacerItem(10,50,QSizePolicy::Fixed));
}

• In order to add a layout to a main one, you’ll have to use

  addLayout(layout)

• The vertical space (Stretch) could be added by

  • layout->addStretch(dimension)
  • layout->addSpacer(SpaceItem)

• the Widget with a empty checkable square is a QCheckBox

(back to top)

Bug-report-Form

This example is taken from Qt Tutorial. You task is to create the following form to report a problem.

Dialog to report a form.

.Header

class BugRepForm: public QWidget
{
public:
    explicit BugRepForm(QWidget *parent = nullptr);
protected:
    void makeConnexion();
    void createWidgets();
    void placeWidgets();
protected:
    //Layouts
    QVBoxLayout *mainlayout;
    QVBoxLayout *toplayout;
    
    QHBoxLayout *midlayout;
    QHBoxLayout *botlayout;
    QHBoxLayout *namelayout;
    QHBoxLayout *companylayout;
    QHBoxLayout *phonelayout;
    QHBoxLayout *emaillayout;
    QHBoxLayout *problemTlayout;
    QHBoxLayout *summinfolayout;
    QHBoxLayout *reprodlayout;
    QHBoxLayout *combblayout;
    QHBoxLayout *resetlayout;
    QHBoxLayout *subm_layout;
    QHBoxLayout *not_slayout;
    //Labels
    QLabel *name;
    QLabel *company;
    QLabel *phone;
    QLabel *email;
    QLabel *problemT;
    QLabel *summinfo;
    QLabel *reprod;
    //Lines
    QLineEdit  *nameL;
    QLineEdit  *companyL;
    QLineEdit  *phoneL;
    QLineEdit  *emailL;
    QLineEdit  *problemTL;
    QTextEdit  *summinfoL;
    //Buttons
    QPushButton  *reset;
    QPushButton  *DONOTsubmit;
    QPushButton  *subBugRep;
    //Combo_Box
    QComboBox  *combB;
};

.cpp

BugRepForm::BugRepForm(QWidget *parent) : QWidget(parent)
{
    createWidgets();
    placeWidgets();
}
void BugRepForm::createWidgets()
{
    //Layouts
    mainlayout         = new QVBoxLayout();
    toplayout          = new QVBoxLayout();
    midlayout          = new QHBoxLayout();
    botlayout          = new QHBoxLayout();
    namelayout         = new QHBoxLayout();
    companylayout      = new QHBoxLayout();
    phonelayout        = new QHBoxLayout();
    emaillayout        = new QHBoxLayout();
    problemTlayout     = new QHBoxLayout();
    summinfolayout     = new QHBoxLayout();
    reprodlayout       = new QHBoxLayout();
    combblayout        = new QHBoxLayout();
    resetlayout        = new QHBoxLayout();
    subm_layout        = new QHBoxLayout();
    not_slayout        = new QHBoxLayout();
    //Labels
    name      = new QLabel("Name:");
    company   = new QLabel("Company:");
    phone     = new QLabel("Phone:");
    email     = new QLabel("Email:");
    problemT  = new QLabel("Problem Title:");
    summinfo  = new QLabel("Summary information:");
    reprod    = new QLabel("Reproducibility:");
    //Lines
    nameL      = new QLineEdit();
    companyL   = new QLineEdit();
    phoneL     = new QLineEdit();
    emailL     = new QLineEdit();
    problemTL  = new QLineEdit();
    summinfoL  = new QTextEdit();
    //Buttons
    reset        = new QPushButton("Reset");
    DONOTsubmit  = new QPushButton("Don't Submit");
    subBugRep    = new QPushButton("Submit Bug Report");
    //Combo_Box
    combB   = new QComboBox;
    combB->addItem("Always");
    combB->addItem("Somtimes");
    combB->addItem("Rarely");
    
    setLayout(mainlayout);
    setWindowTitle("Report Bug");
    resize(600,600);
 }
void BugRepForm::placeWidgets()
{
    //Layouts structure
    mainlayout->addLayout(toplayout);
    mainlayout->addLayout(midlayout);
    mainlayout->addLayout(botlayout);

    toplayout->addLayout(namelayout);
    toplayout->addLayout(companylayout);
    toplayout->addLayout(phonelayout);
    toplayout->addLayout(emaillayout);
    toplayout->addLayout(problemTlayout);
    toplayout->addLayout(summinfolayout);

    midlayout->addLayout(reprodlayout);
    midlayout->addLayout(combblayout);

    botlayout->addLayout(resetlayout);
    botlayout->addLayout(subm_layout);
    botlayout->addLayout(not_slayout);
    //objects
    namelayout->addWidget(name);
    namelayout->addWidget(nameL);

    companylayout->addWidget(company);
    companylayout->addWidget(companyL);

    phonelayout->addWidget(phone);
    phonelayout->addWidget(phoneL);

    emaillayout->addWidget(email);
    emaillayout->addWidget(emailL);

    problemTlayout->addWidget(problemT);
    problemTlayout->addWidget(problemTL);

    summinfolayout->addWidget(summinfo);
    summinfolayout->addWidget(summinfoL);

    reprodlayout->addWidget(reprod);
    combblayout->addWidget(combB,1);
    resetlayout->addWidget(reset);
    subm_layout->addWidget(subBugRep);
    not_slayout->addWidget(DONOTsubmit);
    //spacing settings
    namelayout->setSpacing(132);
    companylayout->setSpacing(104);
    phonelayout->setSpacing(129);
    emaillayout->setSpacing(135);
    problemTlayout->setSpacing(72);
    summinfolayout->setSpacing(5);
    midlayout->setSpacing(60);
    resetlayout->addSpacerItem(new QSpacerItem(50,80,QSizePolicy::Expanding));
}

(back to top)

Grid-Layout

For our final exercice, we will visit an imporant layout that we missed in class.

• Check and read the documentation for the QGridLayout
• Once you’ve read it, try to construct the following calculator:

Calculator using the Grid Layout.

• The component showing the number is called a LCDNumber
• You may assume that at max it can contains 6 digits.
• Call the method setMinimumHeight on you LCDNumber to set a minimu height of 80 pixels.

.Header

class Calculator : public QWidget
{
public:
    explicit Calculator(QWidget *parent = nullptr);
protected:
    void makeConnexion();
    void createWidgets();
    void placeWidgets();
protected:
    //Layouts
    QGridLayout *mainGridlayout;
    //Buttons
    QVector<QPushButton*> calelements;
    QPushButton *element;
    //lcd
    QLCDNumber *lcdnum;
private:
    int k=0;
};

.cpp

Calculator::Calculator(QWidget *parent) : QWidget(parent)
{
    createWidgets();
    placeWidgets();
}
void Calculator::createWidgets()
{
    //Buttons
    for (int i=9;i>0;i--)
    {
        element  = new QPushButton(QString::number(i));
        calelements.push_back(element);
    }
    //LCDnum
    lcdnum  = new QLCDNumber();
    mainGridlayout = new QGridLayout;

    setLayout(mainGridlayout);
    setWindowTitle("Numeric Keypad");
    resize(340,320);
 }
void Calculator::placeWidgets()
{
    //Objects
    lcdnum->setMinimumHeight(80);
    mainGridlayout->addWidget(lcdnum,0,0,1,3);
    for (int i=1;i<=3 ;i++)
    {
        for (int j=0;j<=2;j++)
        {
            mainGridlayout->addWidget(calelements[k],i,j);
                    k++;
        }
    }
    mainGridlayout->addWidget(new QPushButton("0"),4,0);
    mainGridlayout->addWidget(new QPushButton("enter"),4,1,1,2);
}

(back to top)

Our Team - AIT EL KADI Ilyas - AZIZ Oussama

Project Link: Widgets_and_Layouts

Encadré par : Mr.BELCAID-Anass

(back to top)