Hand code GUI completely
-
[quote author="Tobias Hunger" date="1327420165"]Gerolf: There are cases where hand-coding makes sense, I agree about that, but in general you are faster and get better results using the designer.
This thread is about "how to complete design a GUI by hand". I do challenge that "personal choice" is a valid reason for any professional to hand-craft UIs.[/quote]
I would say, it's ok, if you know what you do (and as a professional, you should know :-) ).
Why should using a UI tool be better? It might be easier for some things and for some it may not.In MFC, it was not possible to code UI's by hand, as you had no layouters, only coordinates, but with layout classes, it's fairly easy to code the UI by hand.
-
As said, I am still learning Qt so please go easy on me as I might make dumb mistakes, so my apologies for that if I do so.
I wrote this (start) code:
@#include <QApplication>
#include <QWidget>
#include <QGroupBox>
#include <QGridLayout>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QLabel>
#include <QLineEdit>
#include <QSlider>
#include <QSpinBox>
#include <QSpacerItem>
#include <QPushButton>int main(int argc, char *argv[])
{
QApplication app(argc, argv);// create a main widget QWidget *mainAppWindow = new QWidget; mainAppWindow->setWindowTitle("Custom made GUI - Test 0.1"); mainAppWindow->setFixedSize(500, 600); // create the widgets QLabel *nameLabel = new QLabel; nameLabel->setText("name"); QLineEdit *nameText = new QLineEdit; QSlider *aAmount = new QSlider; aAmount->setRange(0, 100); aAmount->setValue(25); QGroupBox *personalInfoBox = new QGroupBox; personalInfoBox->setTitle("Personal Info"); // create the layout for the personalInfoBox QHBoxLayout *pibLayout = new QHBoxLayout; pibLayout->addWidget(nameLabel); pibLayout->addWidget(nameText); pibLayout->addWidget(surnameLabel); pibLayout->addWidget(surnameText); pibLayout->addWidget(ageLabel); pibLayout->addWidget(ageText); pibLayout->addWidget(genderLabel); pibLayout->addWidget(genderText); // create the topleft box and add the group to it QHBoxLayout *topLeftLayout = new QHBoxLayout; topLeftLayout->addLayout(personalInfoBox); // add the layout to the main window mainAppWindow->setLayout(pibLayout); // display the window mainAppWindow->show(); return app.exec();}@
It gives me the following error:
no matching function for call to 'QHBoxLayout::addLayout(QGroupBox*&)'I tried looking into the documentation but I cant see what I did wrong. I tried declaring it in two ways:
@QGroupBox *personalInfoBox = new QGroupBox;
personalInfoBox->setTitle("Personal Info");@and
@QGroupBox *personalInfoBox = new QGroupBox("Personal Info");@
but both give me the same error. When I use:
@QGroupBox *personalInfoBox = new QGroupBox(tr("Personal Info"));@
it says that tr cannot be found, but for now dont mind the translate thingy ;)P.S. I shorten the code a bit otherwise the list would be long, but I did declerate all the QLabels and QSliders and other stuff in my code. I have shown you one of each to see how I declerate them, but I remove the others to keep this 'post' a bit smaller ;)
-
[quote author="Volker" date="1327494502"]Looking at my forms, with tons of widgets, I would drive nuts if I had to hand code them all in C++ :)[/quote]
Spit it up to sub forms? :-)
I know there are cases, where it really makes sense, but I try to avoid forms with hundreds of widgets. -
[quote author="Gerolf" date="1327498560"]
[quote author="Volker" date="1327494502"]Looking at my forms, with tons of widgets, I would drive nuts if I had to hand code them all in C++ :)[/quote]Spit it up to sub forms? :-)
I know there are cases, where it really makes sense, but I try to avoid forms with hundreds of widgets.[/quote]True, but you can Copy & Paste a lot to though ;)
And I also use the clicking on the numbers on the left side to "fold" code. This way my screen stays pritty clean, and when I need something I can just "unfold" it, edit it or look at it, and fold it back up lol :)Anyways, I posted my code and question on page 2 (top). I am doing something wrong with the Group option :(
-
Hi,
I could boiler plate you, and give you a working version :-)
But it would be complete.First your bugs:
a group box is a widget --> addWidget not addlayout
pibLayout is the layout of the group box, add it there, not on the main window
Full source for the sollution, only read it if you don't want to learn by building it on your own :-)
@
#include <QApplication>
#include <QWidget>
#include <QGroupBox>
#include <QGridLayout>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QLabel>
#include <QLineEdit>
#include <QSlider>
#include <QSpinBox>
#include <QSpacerItem>
#include <QPushButton>int main(int argc, char *argv[])
{
QApplication app(argc, argv);// create a main widget QWidget *mainAppWindow = new QWidget; mainAppWindow->setWindowTitle("Custom made GUI - Test 0.1"); mainAppWindow->setFixedSize(500, 600); // main vertical layout QVBoxLayout* pMainLayout = new QVBoxLayout(mainAppWindow); mainAppWindow->setLayout(pMainLayout); // ------------------------------------------------------ // first sub layouts QHBoxLayout* pTopHBox = new QHBoxLayout; pMainLayout->addLayout(pTopHBox); QGridLayout* pLabelGrid = new QGridLayout; pMainLayout->addLayout(pLabelGrid); pMainLayout->addItem(new QSpacerItem(0,0,QSizePolicy::Minimum, QSizePolicy::Expanding)); QHBoxLayout* pBtnHBox = new QHBoxLayout; pMainLayout->addLayout(pBtnHBox); // ------------------------------------------------------ // create the group box QGroupBox *personalInfoBox = new QGroupBox(mainAppWindow); personalInfoBox->setTitle("Personal Info"); QLabel *nameLabel = new QLabel(QObject::tr("name"), personalInfoBox); QLineEdit *nameText = new QLineEdit(personalInfoBox); QLabel *surnameLabel = new QLabel(QObject::tr("surname"), personalInfoBox); QLineEdit *surnameText = new QLineEdit(personalInfoBox); QLabel *ageLabel = new QLabel(QObject::tr("age"), personalInfoBox); QLineEdit *ageText = new QLineEdit(personalInfoBox); QLabel *genderLabel = new QLabel(QObject::tr("gender"), personalInfoBox); QLineEdit *genderText = new QLineEdit(personalInfoBox); // create the layout for the personalInfoBox QGridLayout *pibLayout = new QGridLayout; pibLayout->addWidget(nameLabel, 0, 0); pibLayout->addWidget(nameText, 0, 1); pibLayout->addWidget(surnameLabel, 1, 0); pibLayout->addWidget(surnameText, 1, 1); pibLayout->addWidget(ageLabel, 2, 0); pibLayout->addWidget(ageText, 2, 1); pibLayout->addWidget(genderLabel, 3, 0); pibLayout->addWidget(genderText, 3, 1); personalInfoBox->setLayout(pibLayout); pTopHBox->addWidget(personalInfoBox); // ------------------------------------------------------ // create the slider area QVBoxLayout* pSlidersLayout = new QVBoxLayout; pTopHBox->addLayout(pSlidersLayout); QSlider *aAmount = new QSlider(Qt::Horizontal, mainAppWindow); aAmount->setRange(0, 100); aAmount->setValue(25); QSlider *bAmount = new QSlider(Qt::Horizontal, mainAppWindow); bAmount->setRange(0, 100); bAmount->setValue(25); QSlider *cAmount = new QSlider(Qt::Horizontal, mainAppWindow); cAmount->setRange(0, 100); cAmount->setValue(25); pSlidersLayout->addWidget(new QLabel(QObject::tr("a - amount"), mainAppWindow)); pSlidersLayout->addWidget(aAmount); pSlidersLayout->addWidget(new QLabel(QObject::tr("b - amount"), mainAppWindow)); pSlidersLayout->addWidget(bAmount); pSlidersLayout->addWidget(new QLabel(QObject::tr("c - amount"), mainAppWindow)); pSlidersLayout->addWidget(cAmount); // ------------------------------------------------------ // create the info area pLabelGrid->addWidget(new QLabel(QObject::tr("a - statistic display"), mainAppWindow), 0, 0); pLabelGrid->addWidget(new QLabel(QObject::tr("a - runtime statistic display"), mainAppWindow), 0, 1); pLabelGrid->addItem(new QSpacerItem(0,0, QSizePolicy::Expanding,QSizePolicy::Minimum), 0, 2); pLabelGrid->addWidget(new QLabel(QObject::tr("b - statistic display"), mainAppWindow), 1, 0); pLabelGrid->addWidget(new QLabel(QObject::tr("b - runtime statistic display"), mainAppWindow), 1, 1); pLabelGrid->addWidget(new QLabel(QObject::tr("c - statistic display"), mainAppWindow), 2, 0); pLabelGrid->addWidget(new QLabel(QObject::tr("c - runtime statistic display"), mainAppWindow), 2, 1); // ------------------------------------------------------ // create the button area QPushButton* pBtn = new QPushButton(QObject::tr("Push me"), mainAppWindow); pBtnHBox->addWidget(pBtn); pBtnHBox->addItem(new QSpacerItem(0,0, QSizePolicy::Expanding,QSizePolicy::Minimum)); // display the window mainAppWindow->show(); return app.exec();}
@ -
Gerolf, thank you very much. I will try to fix my code first before copy pasting yours lol, need to learn it anyways haha. Thank you so much once again ;)
P.S. I see you do a LOT of stuff totally different i.e.
@pLabelGrid->addWidget(new QLabel(QObject::tr("c - runtime statistic display"), mainAppWindow), 2, 1);@
@pibLayout->addWidget(nameText, 0, 1);@you use tr (translate?) and a 2nd attribute. After that you give the QLabel object a 2nd and 3rd attribute (2 and 1).
Never seen that / done that but... ill try to fix my code and try to find out what this all means :)Also in the 2nd example the INT for a row and so on, thats pritty cool! this will surely help me out a LOT!
-
[quote author="Gerolf" date="1327498560"]
Spit it up to sub forms? :-)
I know there are cases, where it really makes sense, but I try to avoid forms with hundreds of widgets.[/quote]It's already subforms :-)
Collecting data isn't always doable with two line edits and a combo box ;-) -
[quote author="GroundZero" date="1327501166"]P.S. I see you do a LOT of stuff totally different i.e.
@pLabelGrid->addWidget(new QLabel(QObject::tr("c - runtime statistic display"), mainAppWindow), 2, 1);@
@pibLayout->addWidget(nameText, 0, 1);@you use tr (translate?) and a 2nd attribute. After that you give the QLabel object a 2nd and 3rd attribute (2 and 1).
Never seen that / done that but... ill try to fix my code and try to find out what this all means :)Also in the 2nd example the INT for a row and so on, thats pritty cool! this will surely help me out a LOT![/quote]
All widgets have parameters in the constructor, one is the parent, which I ALWAYS set. It also works without, then the layout sets them.
the integers in the addWidget is for the grid layout.
-
yeah awesome, I never knew this does help me out a lot :)
trying to code it now my self, hope I can figure this stuff out lol pritty hard to understand all the boxes and stuff.Webdevelopment is so much easier lol lol :-)
EDIT:
Figured I would but... I made a much simpler layout. Problem is that it is displayed right under each other instead of next
to each other. How can I fix this? my code:@int main(int argc, char *argv[])
{
QApplication app(argc, argv);// ------------------------------------------------------- // create the main widget QWidget *mainApplication = new QWidget; mainApplication->setWindowTitle("Hand coded GUI"); mainApplication->setFixedSize(500, 600); // ------------------------------------------------------- // main box QVBoxLayout *mainLayout = new QVBoxLayout; mainApplication->setLayout(mainLayout); // ------------------------------------------------------- // sub boxes QHBoxLayout *pLeftSide = new QHBoxLayout; QVBoxLayout *pRightSide = new QVBoxLayout; mainLayout->addLayout(pLeftSide); mainLayout->addLayout(pRightSide); // ------------------------------------------------------- // create the group box QGroupBox *userinfoGroupBox = new QGroupBox; userinfoGroupBox->setTitle("Personal Info"); // ------------------------------------------------------- // create the content of the group box QLabel *nameLabel = new QLabel(QObject::tr("name")); QLineEdit *nameEdit = new QLineEdit; QLabel *surnameLabel = new QLabel(QObject::tr("surname")); QLineEdit *surnameEdit = new QLineEdit; // ------------------------------------------------------- // create the layout for the userinfoGroupBox QGridLayout *gridView = new QGridLayout; gridView->addWidget(nameLabel, 0, 0); gridView->addWidget(nameEdit, 0, 1); gridView->addWidget(surnameLabel, 1, 0); gridView->addWidget(surnameEdit, 1, 1); // ------------------------------------------------------- // add the layout to the group box userinfoGroupBox->setLayout(gridView); // ------------------------------------------------------- // add the groupbox to the leftside box pLeftSide->addWidget(userinfoGroupBox); // ------------------------------------------------------- // create some sliders QLabel *aSliderLabel = new QLabel(QObject::tr("a value")); QSlider *aSlider = new QSlider(Qt::Horizontal); aSlider->setRange(0, 100); aSlider->setValue(88); QLabel *bSliderLabel = new QLabel(QObject::tr("b value")); QSlider *bSlider = new QSlider(Qt::Horizontal); bSlider->setRange(0, 300); bSlider->setValue(142); // ------------------------------------------------------- // add the widgets to the right window pRightSide->addWidget(aSliderLabel); pRightSide->addWidget(aSlider); pRightSide->addWidget(bSliderLabel); pRightSide->addWidget(bSlider); // display the window mainApplication->show(); return app.exec();}@
So what I want is:
- mainLayout = my main wrapper / container / box, or what ever you want to call it.
- pLeftSide and pRightSide are two boxes which should be displayed NEXT to each other.
- pLeftSide should display stuff by pairs of two next to each other (this is working)
- pRightSize should display stuff under each other (this is working)
Also, my sliders get stretched out... so they are extremely width :-(
EDIT:
I have another question if I may so...I was reading the book. I made a GUI by using Qt Designer. Works flawless BUT... the book tells me the following:
bq. Now run qmake to create a .pro file and a makefile (qmake -project;qmake gotocell.pro). The qmake tool is smart enough to detect the user interface file gotocell-dialog.ui and to generate the appropriate makefule rules to invoke uic, Qt's user interface compiler.Now... I have no clue what they mean with qmake this and qmake that lol. I want to see the source, how the GUI I made was build up in plain C++ and not a (no offence) stupid XML file look a like markup lol.
Could someone walk me through the process of turning this XML look-a-like thingy to a C++ type.
-
If you only use box layouts, you will never create grids :-)
Try using QGridLayout, it helps much in the UI you have.Another thing, what I typically do is, put creation of sub parts in a method. E.g. create the group box in a method and return the group box pointer. Using this, you can test it independently and just use it later.
Do you use QtCreator? Or all tools by hand?
Regarding your last question:
call qmake to create a qt project file (qmake -project) and then create a make file (qmake xxx.pro). When you now compile the makefile (nmake, make, mingw-make, what ever tool chain you use), you get a ui_xxx.h file (or is it xxx_ui.h?). This is the C++ code of the ui file.
-
bq. In MFC, it was not possible to code UI’s by hand, as you had no layouters, only coordinates, but with layout classes, it’s fairly easy to code the UI by hand.
I am a pretty big stickler when it comes to making guis. I don't really like using forms either. I am an engineer by trade, so when I tried C++/CLI, .NET, and sometimes straight winapi it was extremely hard for me to code without relying on forms. Finally discovered qt and all my problems were solved :)
-
@ Gerolf;
I use Qt Creator to do everything. I will change my code and use some GridLayouts and hopefully that will make things look better haha.
I am a bit confused though, but I will give it another try and hopefully get it done right this time ;)
Thanks for your answer guys!
-
It is a mystery to me why even experienced Qt coders prefer hand-coding UIs over using designer. Sure, there are situations where manual layouting is needed to achieve some special results, but those should be exceptions.
It is a good approach to learn about layouting by looking at the code generated by designer. I suggest to use that insight to learn enough about designer to use it. Since layout initialization code is usually not executed repeatedly, hand-crafting layouts will not result is significant performance gains, and makes UIs much harder to maintain.