# Walkthrough: MyDialog

- Choose File->New and choose the template "Dialog with Buttons (Bottom)"
- Choose the tabwidget tool and add one to the right
- Choose the Buttongroup tool and add one to the left
- Select the inserted buttongroup and change the title to "&Choose" (change the title in the property editor at the left)
- Select the radiobutton tool and insert a radiobutton into the buttongroup
- Repeat that three times
- Change the textes of the radiobuttons either by doubleclicking on them or by selecting and changin the text property in the properyt editor

### Result:

- Rightclick on the tabwidget and choose "Add Page"
- Repeat that once
- Click on the first tab and change the title in the property editor.
- Repeat that for the the second tab
- Click on the first tab and insert a listview in the current tab page.
- Insert Two pushbuttons at the right of it (vertically orderd)
- Put a spacer below the buttons (you find the tool in the Layout Menu/Toolbar - to insert a vertical one just insert it by opening a rectange which is higher than wide)
- Change the text of the buttons using the property editor or double-clicking on them to "Up" and "Down".
- Double-Click on the listview to edit it contents. Add some columns and items there

### Result:

- Click on the second tab and insert a vertical slider at the left of the tabpage
- Insert a LCD number right from it

### Result:

- Layout the dialog in a grid now by right-clicking on the dialog and choosing "Layout in Grid"
- Layout the groupbox vertically by rightclicking on it and choosing "Layout Vertically"
- Layout the first tabpage. Select the two buttons and the spacer, and choose from the Layout menu "Layout Vertically". Now rightclick on the tabpage and choose "Layout Horizontally"
- Layout the second tabpage by righclicking on it and choosing "Layout Horizontally"

### Result:

- Now we give the widgets we need to access later in the code names like the radioButtons, the listview, the tow buttons, the slider and the lcdnumber.
- Now we want to connect the slider and the LCD-Number on the second tabpage. For that activate the second page. Then choose the connection tool. Now press the mouse on the slider and drag it (while keeping the mousebutton pressed) onto the LCD-Number and release the mousebutton.
- Choose in the dialog which pops up the signal "valueChanged(int) and the slot "display(int)" and click connect. It should look like in step5.png now. Press OK.

- In the preview (CTRL+T) you can move the slider now which will change the value of the LCD-Number.
- Now we add a custom slot to the diaoog. Do that by choosing from the Edit menu "Slots". Add a slot upClicked()

- Now connect the clicked signal of the upBotton (of the first tabpage) with that slot by choosing the connection tool, pressing on the up button in the first tabpage and dragging the mouse until you reached the form (you see this be the pink highlighte rectangle and by the message in the statusbar). Use the connection dialog to make that connection now.
- Now we want to set the taborder. Choose the taborder tool and click on the widgets in the order as you want it. See also step7.png.

- Finally you could change the caption of the dialog by clicking on the form and changing that property in the property editor.
- After that save the dialog as mydialog.ui
- Create in the same directory a file mydialog.pro with following contents

      TEMPLATE        = app
      CONFIG          = qt warn_on release
      HEADERS	        = mydialogimpl.h
      SOURCES	        = main.cpp mydialogimpl.cpp
      INTERFACES      = mydialog.ui
      TARGET          = mydialog

- Create a file main.cpp with following contents in that directory

      #include <qapplication.h>
      #include "mydialogimpl.h"

      int main( int argc, char ** argv )
      {
          QApplication a( argc, argv );
          MyDialogImpl * mw = new MyDialogImpl;
          mw->show();
          a.connect( &a, SIGNAL(lastWindowClosed()), &a, SLOT(quit()) );
          return a.exec();
      }

- Create a mydialog.h file in that directory

      #include "mydialogimpl.h"

      class MyDialogImpl : public MyDialog
      {
      public:
          MyDialogImpl();

      public slots:
          void upClicked();

      };

- Create a mydialogimpl.cpp file in that directory

      #include "mydialogimpl.h"
      #include <qmessagebox.h>

      MyDialogImpl::MyDialogImpl()
          : MyDialog()
      {
      }

      void MyDialogImpl::upClicked()
      {
          QMessageBox::information( this, tr( "Message" ), tr( "Item-Up clicked!" ) );
      }

  For faster results, you could ask `uic` to create a skeleton for your implementation subclass with:

          uic -subdecl MyDialogImpl mydialog.h mydialog.ui > mydialogimpl.h
          uic -subimpl MyDialogImpl mydialogimpl.h mydialog.ui > mydialogimpl.cpp

- Run

      tmake -o Makefile mydialog.pro

- run

      (n)make -f Makefile

- Now you can run mydialog which opens the created dialog. When you click on the Up button in the first tabpage a messagebox pops up. And changing the slider in the second tab changes the value of the LCD-number.