Layout Design

[beowulf]

I'm trying to create a layout to my application, i don't like use Qt Designer, i'm trying to make using Qt Code, but i'm studying, watching a lot of tutorials, but i'm not understanding. Have some ways to create a layout, QHBoxLayout, QVBoxLayout, QGridLayout, QLayout, and i'm confuse, i want to make like this scratch:

!http://i.minus.com/iom35Iz5o4eOJ.png!

Thank you. :D

[Mathai]

Try to be more specific. I don't think anybody will be able to help unless you give some more details. Your question is very vague. Well, it's not even a question.

[Sam]

Hi,
You can have a look at this "thread":http://qt-project.org/forums/viewthread/16547/

[Eddy]

Hi l3e0wulf,

Your image is not visible for us. Is it in a private place? Please make it public if so.
Then we can have a look at it.

[beowulf]

Hi Guys, thank you for the aswers.

@Eddy - I'm sorry, i've updated the image. Can u see now? - "Image Here":http://i.minus.com/iom35Iz5o4eOJ.png

@Soumitra - Thank u, i'll see. :D

[chaos6]

I think in your image you must make (left , Right , middle) area with QHBoxLayout to make it horizontal and make all of this with (the footer) area by QVBoxLayout to make it vertical

[beowulf]

But, how i organize it? How the left float to left and the right float to right...?

When i put the left, right, middle on the MainWindow (QWidget) but don't work. :(

@#include <QApplication>
#include <QtGui>

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

QApplication application(argc, argv);

QWidget *window = new QWidget;

QHBoxLayout *left = new QHBoxLayout(window);
QHBoxLayout *middle = new QHBoxLayout(window);
QHBoxLayout *right = new QHBoxLayout(window);
QVBoxLayout *bottom = new QVBoxLayout(window);

QPushButton *buttonLeft = new QPushButton("Button Left");
QPushButton *buttonMiddle = new QPushButton("Button middle");
QPushButton *buttonRight = new QPushButton("Button right");
QPushButton *buttonBottom = new QPushButton("Button bottom");

left->addWidget(buttonLeft);
middle->addWidget(buttonMiddle);
right->addWidget(buttonRight);
bottom->addWidget(buttonBottom);

window->show();

application.exec();

}
@

[dbzhang800]

Following code is wrong
@
QHBoxLayout *left = new QHBoxLayout(window);
QHBoxLayout *middle = new QHBoxLayout(window);
QHBoxLayout *right = new QHBoxLayout(window);
QVBoxLayout *bottom = new QVBoxLayout(window);
@

Only one layout can be the child of window.

And you should have got warning message when you try to run this application.

[Wilk]

Hello
I think the best way is to use Designer that's built in QtCreator.
Reasons:

You will see results while creating your GUI.

You will be able to make more flexible application, cause it's possible to load .ui files while running your application.

I think it's closer to "Qt Way"

It's faster in anyway

I've spent 5 minutes to draw "UI":http://dl.dropbox.com/u/17989265/mainwindow.ui, that looks aproximately like one you'd like to have. Now you only need to rename UI elements, to make it possible to find them by name and set size politics and size limitations for UI elements.

If you categorically don't want to learn how to use Designer, the remember, that layouts are hierarchical, and, as 1+1=2 said above, window can have only one layout. The solution is easy: if you need some specific layout, you should combine some standard layouts by putting one into another one.

[beowulf]

Thank you, i'll learn about Qt Designer. I prefer the Qt Code because is code, is a way to i know how to make a application if i don't have the Qt Designer installed on my computer, understand?

Anyway, Thank you very much, if anyone have a code than can help me, please post, because have other peoples with the same question.

Keep posting, when i found something about it, i'll post too, and maybe, if i learn, i can make a screencast tutorial to teach the newbies like me.

Please help me, to help other peoples.

See ya'

[elephanten]

Well, then all is simple. This example should give you the main idea behind these words
[quote author="Wilk" date="1336001678"]
The solution is easy: if you need some specific layout, you should combine some standard layouts by putting one into another one.[/quote]

@
#include <QApplication>
#include <QtGui>

int main(int argc, char *argv[])
{
QApplication application(argc, argv);
QWidget *window = new QWidget;

QHBoxLayout *hLay1, *hLay2;
QVBoxLayout *vLay1;
QPushButton *btn1, *btn2, *btn3, *btn4, *btn5;

vLay1 = new QVBoxLayout;
hLay1 = new QHBoxLayout;
hLay2 = new QHBoxLayout;
btn1 = new QPushButton; // See how simple design makes lots of code?..
btn2 = new QPushButton;
btn3 = new QPushButton;
btn4 = new QPushButton;
btn5 = new QPushButton; // In larger applications code gets monstrous :-E

vLay1->addLayout(hLay1);
vLay1->addLayout(hLay2);
vLay1->addWidget(btn1);
hLay1->addWidget(btn2);
hLay1->addWidget(btn3);
hLay2->addWidget(btn4);
hLay2->addWidget(btn5); // 8-E

window->setLayout(vLay1);
window->show();
application.exec();

}
@

And one final note: think of testing this design. Every simple correction will cause recompilation, and it, believe me, is very boring.

[beowulf]

I have to admit that when I saw the Qt first time was love at sight, I found it very complete and very attractive, but I found the content of tutorials a little vague on the Internet, there are many tutorials that are specific on the Internet.

I spent some time researching this issue layout, the most that I found tutorials, but it was not someone talking about each layout (QVBoxLayout, QHBoxLayout, etc..), but not how to use them. That was the biggest problem.

When I went looking for some tutorial to learn how to build my applications, I realized had more tutorial oriented than Qt Designer for Qt Code itself.

For you have idea, I found it easier to do QTextEdit with syntax highlight, rather than structure my application.

Thank you elephanten. Based on his code, I did a similar structure to my wireframe. Hope that helps some beginners.

Many think I'm crazy not like to use Qt Designer, but every programmer, passion and heart, you know the codes have the power in your hands, take complete control of the application.

edit

I forgot to post the code, just wait.

edit

@#include <QApplication>
#include <QtGui>

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

QApplication application(argc, argv);

QWidget *window = new QWidget;

QHBoxLayout *leftWrapper, *middleWrapper, *rightWrapper;

QVBoxLayout *GlobalWrapper;

QTabWidget *leftTab, *middleTab, *rightTab;

leftWrapper = new QHBoxLayout;
middleWrapper = new QHBoxLayout;
rightWrapper = new QHBoxLayout;

GlobalWrapper = new QVBoxLayout;

leftTab = new QTabWidget;
middleTab = new QTabWidget;
rightTab = new QTabWidget;

GlobalWrapper->addLayout(leftWrapper);
GlobalWrapper->addLayout(middleWrapper);
GlobalWrapper->addLayout(rightWrapper);

leftWrapper->addWidget(leftTab);
leftWrapper->addWidget(middleTab);
leftWrapper->addWidget(rightTab);

window->setLayout(GlobalWrapper);

window->resize(600, 400);

window->show();

application.exec();

}
@

[Wilk]

Hello
Yep, you are right, code has power in hands of a programmer, but the fact is that you should not write each line of code by yourself. If some part of code might be generated automaticaly then it's the best way of creating this code.
If you think, that you don't have control over code that's generated by designer, then you're wrong. You can get every element of your UI by using findChild method. And I say it again - use of designer makes your application more flexible. You'll never get this level of flexibility while your UI is hard coded in your application.

[beowulf]

I'm with a problem.

Looking at my code I found a mistake.

@
    leftWrapper->addWidget(leftTab);
    leftWrapper->addWidget(middleTab);
    leftWrapper->addWidget(rightTab);
@
I put all to the LeftWrapper, so I thought was a mistake.

I change to the "correct way":

@
leftWrapper->addWidget(leftTab);
middleWrapper->addWidget(middleTab);
rightWrapper->addWidget(rightTab);
@

But the "correct way" is not the really correct way.

All the tabs are aligned horizontally.

[beowulf]

Wilk, yes, i know, but this does not prevent us know the Qt Code, because of what the C + + itself, if there was an application that created the GUI for the user by dragging and dropping.
So we see many problems with applications on the Internet, because the "nephews" as we call non-professionals, are loose on the Internet. Because they are accustomed to the "Lord Makes Everything." Want a better example? - Delphi, many feel that Delphi is a programming language, but it is not, is a Delphi IDE for Pascal. Understand my point of view?

[beowulf]

I've fixed!

@#include <QApplication>
#include <QtGui>

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

QApplication application(argc, argv);

QWidget *window = new QWidget;

QHBoxLayout *TabsWrapper;

QVBoxLayout *GlobalWrapper, *FooterWrapper;

QTabWidget *leftTab, *middleTab, *rightTab, *footerTab;

TabsWrapper = new QHBoxLayout;

GlobalWrapper = new QVBoxLayout;
FooterWrapper = new QVBoxLayout;

leftTab = new QTabWidget;
middleTab = new QTabWidget;
rightTab = new QTabWidget;
footerTab = new QTabWidget;

GlobalWrapper->addLayout(TabsWrapper);
GlobalWrapper->addLayout(FooterWrapper);

TabsWrapper->addWidget(leftTab);
TabsWrapper->addWidget(middleTab);
TabsWrapper->addWidget(rightTab);
FooterWrapper->addWidget(footerTab);

window->setLayout(GlobalWrapper);

window->resize(600, 400);

window->show();

application.exec();

}
@

[Wilk]

Yes, I guess I understand you.
But first, I'd say that Delphi is a kind of software development platform, like Java, .Net and Qt. And the problem is not that Delphi is bad, the problem is that it's used by those “nephews”.
About your code.
I think that it's better to use "QMainWindow":http://qt-project.org/doc/qt-4.8/QMainWindow.html#qt-main-window-framework for main window implementation because it was developed for this.
Next. If you want to make this example more usefull, put UI construction in your own class, derived from QMainWindow or QWidget, if you like it.
Next. I think it's better not to keep references for each UI element - just create it, set it's name, make signal-slot connections if needed and add it to layout. There are at least two reasons for it: first, you don't need to care about validity of your pointers - you get objects using findChild method instead; second, it'll be easier for you to add UI, created in Designer if you'll ever need it.

[beowulf]

Yes, i'll use the Qt Designer, of course. Is fast and more useful, i'll post a example usign the Qt Designer after here.

I use QMainWindow too, the code i've posted is only a example.

Thank you.

[Wilk]

I'm glad we've understood each other.
I understand that your code is just an example, but if someone will find it, he will also read my comment and then will understand, that there are couple ways of making application.
Thanks for your patience.

[beowulf]

I who thank you for helping me.

Let's try to keep this topic alive, keep posting experiences, mistakes and how to fix them.

I have only two days using Qt, I'm still beginner, but I'm learning.

Watch hours and hours and hours of tutorials.

• I've a question, i'm using the QMainWindow, and i'm trying to create a layout inside:

@MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent)
{
QVBoxLayout *layout = new QVBoxLayout;
layout->addWidget(new QPushButton("Test"));
this->setLayout(layout);
}@

Don't working, the window is blank.

edit

I've fixed it:

@MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent)
{
QWidget *window = new QWidget;
QVBoxLayout *layout = new QVBoxLayout(window);
layout->addWidget(new QPushButton("Test"));
setCentralWidget(window);
}@