Results 1 to 10 of 10

Thread: Create multi UI screen application using C++ and navigate through it using PushButton

  1. #1
    Join Date
    Aug 2013
    Location
    India
    Posts
    9
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default Create multi UI screen application using C++ and navigate through it using PushButton

    Hello All,
    I want to create multi UI screen application using C++ and navigate through it using PushButtons.
    Suppose on every screen there are many other objects and Next and Previous PushButtons. When I press the button the respective screen must appear and previous screen must get closed. I have gone through net and found that using QStackWidget this is possible and easy, like:

    Qt Code:
    1. QWidget *firstPageWidget = new QWidget;
    2. QWidget *secondPageWidget = new QWidget;
    3. QWidget *thirdPageWidget = new QWidget;
    4.  
    5. QStackedWidget *stackedWidget = new QStackedWidget;
    6. stackedWidget->addWidget(firstPageWidget);
    7. stackedWidget->addWidget(secondPageWidget);
    8. stackedWidget->addWidget(thirdPageWidget);
    To copy to clipboard, switch view to plain text mode 


    With setCurrentIndex ( int index )

    Problem:
    I am not getting how to use it, suppose I have 2 UI’s 1. MainWindow.UI and 2. MainWindow2.UI. So how to fit my MainWindow.UI and MainWindow2.UI there.

    Can someone please share a simple working project for the same. I am new to QT and so not able to construct from help available on net.

    Thanks in Advance
    Sahil Kulkarni.

  2. #2
    Join Date
    Sep 2008
    Location
    Bangalore
    Posts
    658
    Thanks
    116
    Thanked 42 Times in 41 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Create multi UI screen application using C++ and navigate through it using PushBu

    "Behind every great fortune lies a crime" - Balzac

  3. #3
    Join Date
    Mar 2011
    Location
    Hyderabad, India
    Posts
    1,882
    Thanks
    3
    Thanked 452 Times in 435 Posts
    Qt products
    Qt4 Qt5
    Platforms
    MacOS X Unix/X11 Windows
    Wiki edits
    15

    Default Re: Create multi UI screen application using C++ and navigate through it using PushBu

    I have gone through net and found that using QStackWidget this is possible and easy, like:
    Did you consider using QWizard, it might be better for your need, it already has forward and backward navigation between multiple pages (widgets)
    When you know how to do it then you may do it wrong.
    When you don't know how to do it then it is not that you may do it wrong but you may not do it right.

  4. #4
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,364
    Thanks
    3
    Thanked 5,012 Times in 4,791 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: Create multi UI screen application using C++ and navigate through it using PushBu

    Quote Originally Posted by sask1236 View Post
    Can someone please share a simple working project for the same. I am new to QT and so not able to construct from help available on net.
    A simple working project for the same is available in QStackedWidget docs.
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  5. #5
    Join Date
    Aug 2013
    Location
    India
    Posts
    9
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default Re: Create multi UI screen application using C++ and navigate through it using PushBu

    Quote Originally Posted by Santosh Reddy View Post
    Did you consider using QWizard, it might be better for your need, it already has forward and backward navigation between multiple pages (widgets)
    Thanks, but basically i mean Goto specific screen on pushbutton press. Sorry i should have mentioned that.
    I am still not able to link it, how to add MainWindow.UI and MainWindow1.UI to QStackWidget and access them by index.

    Thanks in Advance
    Sahil Kulkarni

  6. #6
    Join Date
    Mar 2011
    Location
    Hyderabad, India
    Posts
    1,882
    Thanks
    3
    Thanked 452 Times in 435 Posts
    Qt products
    Qt4 Qt5
    Platforms
    MacOS X Unix/X11 Windows
    Wiki edits
    15

    Default Re: Create multi UI screen application using C++ and navigate through it using PushBu

    Thanks, but basically i mean Goto specific screen on pushbutton press. Sorry i should have mentioned that.
    That can be done using QWizard, the push button can be linked to any wizard page.

    I am still not able to link it, how to add MainWindow.UI and MainWindow1.UI to QStackWidget and access them by index.
    Load mainwindow.ui into widget, load mainwindow1.ui into widget1 and then put widget and widget1 into QStackedWidget
    When you know how to do it then you may do it wrong.
    When you don't know how to do it then it is not that you may do it wrong but you may not do it right.

  7. The following user says thank you to Santosh Reddy for this useful post:

    sask1236 (30th August 2013)

  8. #7
    Join Date
    Aug 2013
    Location
    India
    Posts
    9
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default Re: Create multi UI screen application using C++ and navigate through it using PushBu

    Quote Originally Posted by Santosh Reddy View Post
    That can be done using QWizard, the push button can be linked to any wizard page.


    Load mainwindow.ui into widget, load mainwindow1.ui into widget1 and then put widget and widget1 into QStackedWidget
    I have attached my project files, can you please help with loding ui files. I am not so trong in C++, i am studing for it.

    I am using Qt Creator 2.4.1
    Based on Qt 4.8.0 (32 bit)
    Built on Mar 21 2012

    main.cpp
    Qt Code:
    1. #include <QtGui/QApplication>
    2. #include "mainwindow.h"
    3.  
    4. int main(int argc, char *argv[])
    5. {
    6. QApplication a(argc, argv);
    7. MainWindow w;
    8. w.show();
    9.  
    10. return a.exec();
    11. }
    To copy to clipboard, switch view to plain text mode 

    mainwindow.cpp
    Qt Code:
    1. #include "mainwindow.h"
    2. #include "ui_mainwindow.h"
    3.  
    4. MainWindow::MainWindow(QWidget *parent) :
    5. QMainWindow(parent),
    6. ui(new Ui::MainWindow)
    7. {
    8. ui->setupUi(this);
    9. }
    10.  
    11. MainWindow::~MainWindow()
    12. {
    13. delete ui;
    14. }
    15.  
    16. void MainWindow::on_pushButton_clicked()
    17. {
    18. // Load Screen 2
    19. }
    20.  
    21. void MainWindow::on_pushButton_2_clicked()
    22. {
    23. // Load Screen 3
    24. }
    To copy to clipboard, switch view to plain text mode 

    mainwindow.h
    Qt Code:
    1. #ifndef MAINWINDOW_H
    2. #define MAINWINDOW_H
    3.  
    4. #include <QMainWindow>
    5.  
    6. namespace Ui {
    7. class MainWindow;
    8. }
    9.  
    10. class MainWindow : public QMainWindow
    11. {
    12. Q_OBJECT
    13.  
    14. public:
    15. explicit MainWindow(QWidget *parent = 0);
    16. ~MainWindow();
    17.  
    18. private slots:
    19. void on_pushButton_clicked();
    20.  
    21. void on_pushButton_2_clicked();
    22.  
    23. private:
    24. Ui::MainWindow *ui;
    25. };
    26.  
    27. #endif // MAINWINDOW_H
    To copy to clipboard, switch view to plain text mode 

    mainwindow.ui
    Qt Code:
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <ui version="4.0">
    3. <class>MainWindow</class>
    4. <widget class="QMainWindow" name="MainWindow">
    5. <property name="geometry">
    6. <rect>
    7. <x>0</x>
    8. <y>0</y>
    9. <width>400</width>
    10. <height>300</height>
    11. </rect>
    12. </property>
    13. <property name="windowTitle">
    14. <string>MainWindow</string>
    15. </property>
    16. <widget class="QWidget" name="centralWidget">
    17. <widget class="QPushButton" name="pushButton">
    18. <property name="geometry">
    19. <rect>
    20. <x>50</x>
    21. <y>170</y>
    22. <width>131</width>
    23. <height>27</height>
    24. </rect>
    25. </property>
    26. <property name="text">
    27. <string>Go To Screen 2</string>
    28. </property>
    29. </widget>
    30. <widget class="QPushButton" name="pushButton_2">
    31. <property name="geometry">
    32. <rect>
    33. <x>237</x>
    34. <y>170</y>
    35. <width>121</width>
    36. <height>27</height>
    37. </rect>
    38. </property>
    39. <property name="text">
    40. <string>Go To Screen 3</string>
    41. </property>
    42. </widget>
    43. <widget class="QLabel" name="label">
    44. <property name="geometry">
    45. <rect>
    46. <x>150</x>
    47. <y>60</y>
    48. <width>81</width>
    49. <height>21</height>
    50. </rect>
    51. </property>
    52. <property name="text">
    53. <string>Screen 1</string>
    54. </property>
    55. </widget>
    56. </widget>
    57. <widget class="QMenuBar" name="menuBar">
    58. <property name="geometry">
    59. <rect>
    60. <x>0</x>
    61. <y>0</y>
    62. <width>400</width>
    63. <height>25</height>
    64. </rect>
    65. </property>
    66. </widget>
    67. <widget class="QToolBar" name="mainToolBar">
    68. <attribute name="toolBarArea">
    69. <enum>TopToolBarArea</enum>
    70. </attribute>
    71. <attribute name="toolBarBreak">
    72. <bool>false</bool>
    73. </attribute>
    74. </widget>
    75. <widget class="QStatusBar" name="statusBar"/>
    76. </widget>
    77. <layoutdefault spacing="6" margin="11"/>
    78. <resources/>
    79. <connections/>
    80. </ui>
    To copy to clipboard, switch view to plain text mode 

    Now using Add New... -> Qt Designer Form Class -> Main Window i have created 2 UI
    mainwindow1.cpp
    Qt Code:
    1. #include "mainwindow1.h"
    2. #include "ui_mainwindow1.h"
    3.  
    4. MainWindow1::MainWindow1(QWidget *parent) :
    5. QMainWindow(parent),
    6. ui(new Ui::MainWindow1)
    7. {
    8. ui->setupUi(this);
    9. }
    10.  
    11. MainWindow1::~MainWindow1()
    12. {
    13. delete ui;
    14. }
    15.  
    16. void MainWindow1::on_pushButton_clicked()
    17. {
    18. // Load Screen 1
    19. }
    20.  
    21. void MainWindow1::on_pushButton_2_clicked()
    22. {
    23. // Load Screen 3
    24. }
    To copy to clipboard, switch view to plain text mode 

    mainwindow1.h
    Qt Code:
    1. #ifndef MAINWINDOW1_H
    2. #define MAINWINDOW1_H
    3.  
    4. #include <QMainWindow>
    5.  
    6. namespace Ui {
    7. class MainWindow1;
    8. }
    9.  
    10. class MainWindow1 : public QMainWindow
    11. {
    12. Q_OBJECT
    13.  
    14. public:
    15. explicit MainWindow1(QWidget *parent = 0);
    16. ~MainWindow1();
    17.  
    18. private slots:
    19. void on_pushButton_clicked();
    20.  
    21. void on_pushButton_2_clicked();
    22.  
    23. private:
    24. Ui::MainWindow1 *ui;
    25. };
    26.  
    27. #endif // MAINWINDOW1_H
    To copy to clipboard, switch view to plain text mode 

    mainwindow1.ui
    Qt Code:
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <ui version="4.0">
    3. <class>MainWindow1</class>
    4. <widget class="QMainWindow" name="MainWindow1">
    5. <property name="geometry">
    6. <rect>
    7. <x>0</x>
    8. <y>0</y>
    9. <width>400</width>
    10. <height>300</height>
    11. </rect>
    12. </property>
    13. <property name="windowTitle">
    14. <string>MainWindow</string>
    15. </property>
    16. <widget class="QWidget" name="centralwidget">
    17. <widget class="QPushButton" name="pushButton">
    18. <property name="geometry">
    19. <rect>
    20. <x>57</x>
    21. <y>150</y>
    22. <width>111</width>
    23. <height>27</height>
    24. </rect>
    25. </property>
    26. <property name="text">
    27. <string>Go To Screen 1</string>
    28. </property>
    29. </widget>
    30. <widget class="QPushButton" name="pushButton_2">
    31. <property name="geometry">
    32. <rect>
    33. <x>230</x>
    34. <y>150</y>
    35. <width>121</width>
    36. <height>27</height>
    37. </rect>
    38. </property>
    39. <property name="text">
    40. <string>Go To Screen 3</string>
    41. </property>
    42. </widget>
    43. <widget class="QLabel" name="label">
    44. <property name="geometry">
    45. <rect>
    46. <x>150</x>
    47. <y>50</y>
    48. <width>66</width>
    49. <height>17</height>
    50. </rect>
    51. </property>
    52. <property name="text">
    53. <string>Screen 2</string>
    54. </property>
    55. </widget>
    56. </widget>
    57. <widget class="QMenuBar" name="menubar">
    58. <property name="geometry">
    59. <rect>
    60. <x>0</x>
    61. <y>0</y>
    62. <width>400</width>
    63. <height>25</height>
    64. </rect>
    65. </property>
    66. </widget>
    67. <widget class="QStatusBar" name="statusbar"/>
    68. </widget>
    69. <resources/>
    70. <connections/>
    71. </ui>
    To copy to clipboard, switch view to plain text mode 
    mainwindow2.cpp
    Qt Code:
    1. #include "mainwindow2.h"
    2. #include "ui_mainwindow2.h"
    3.  
    4. MainWindow2::MainWindow2(QWidget *parent) :
    5. QMainWindow(parent),
    6. ui(new Ui::MainWindow2)
    7. {
    8. ui->setupUi(this);
    9. }
    10.  
    11. MainWindow2::~MainWindow2()
    12. {
    13. delete ui;
    14. }
    15.  
    16. void MainWindow2::on_pushButton_clicked()
    17. {
    18. // Load Screen 1
    19. }
    20.  
    21. void MainWindow2::on_pushButton_2_clicked()
    22. {
    23. // Load Screen 2
    24. }
    To copy to clipboard, switch view to plain text mode 
    mainwindow2.h
    Qt Code:
    1. #ifndef MAINWINDOW2_H
    2. #define MAINWINDOW2_H
    3.  
    4. #include <QMainWindow>
    5.  
    6. namespace Ui {
    7. class MainWindow2;
    8. }
    9.  
    10. class MainWindow2 : public QMainWindow
    11. {
    12. Q_OBJECT
    13.  
    14. public:
    15. explicit MainWindow2(QWidget *parent = 0);
    16. ~MainWindow2();
    17.  
    18. private slots:
    19. void on_pushButton_clicked();
    20.  
    21. void on_pushButton_2_clicked();
    22.  
    23. private:
    24. Ui::MainWindow2 *ui;
    25. };
    26.  
    27. #endif // MAINWINDOW2_H
    To copy to clipboard, switch view to plain text mode 
    mainwindow2.ui
    Qt Code:
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <ui version="4.0">
    3. <class>MainWindow2</class>
    4. <widget class="QMainWindow" name="MainWindow2">
    5. <property name="geometry">
    6. <rect>
    7. <x>0</x>
    8. <y>0</y>
    9. <width>400</width>
    10. <height>300</height>
    11. </rect>
    12. </property>
    13. <property name="windowTitle">
    14. <string>MainWindow</string>
    15. </property>
    16. <widget class="QWidget" name="centralwidget">
    17. <widget class="QPushButton" name="pushButton">
    18. <property name="geometry">
    19. <rect>
    20. <x>40</x>
    21. <y>160</y>
    22. <width>121</width>
    23. <height>27</height>
    24. </rect>
    25. </property>
    26. <property name="text">
    27. <string>Go To Screen 1</string>
    28. </property>
    29. </widget>
    30. <widget class="QPushButton" name="pushButton_2">
    31. <property name="geometry">
    32. <rect>
    33. <x>217</x>
    34. <y>160</y>
    35. <width>121</width>
    36. <height>27</height>
    37. </rect>
    38. </property>
    39. <property name="text">
    40. <string>Go To Screen 2</string>
    41. </property>
    42. </widget>
    43. <widget class="QLabel" name="label">
    44. <property name="geometry">
    45. <rect>
    46. <x>150</x>
    47. <y>50</y>
    48. <width>66</width>
    49. <height>17</height>
    50. </rect>
    51. </property>
    52. <property name="text">
    53. <string>Screen 3</string>
    54. </property>
    55. </widget>
    56. </widget>
    57. <widget class="QMenuBar" name="menubar">
    58. <property name="geometry">
    59. <rect>
    60. <x>0</x>
    61. <y>0</y>
    62. <width>400</width>
    63. <height>25</height>
    64. </rect>
    65. </property>
    66. </widget>
    67. <widget class="QStatusBar" name="statusbar"/>
    68. </widget>
    69. <resources/>
    70. <connections/>
    71. </ui>
    To copy to clipboard, switch view to plain text mode 
    MultiScr9.pro
    Qt Code:
    1. #-------------------------------------------------
    2. #
    3. # Project created by QtCreator 2013-08-31T03:15:06
    4. #
    5. #-------------------------------------------------
    6.  
    7. QT += core gui
    8.  
    9. TARGET = MultiScr9
    10. TEMPLATE = app
    11.  
    12.  
    13. SOURCES += main.cpp\
    14. mainwindow.cpp \
    15. mainwindow1.cpp \
    16. mainwindow2.cpp
    17.  
    18. HEADERS += mainwindow.h \
    19. mainwindow1.h \
    20. mainwindow2.h
    21.  
    22. FORMS += mainwindow.ui \
    23. mainwindow1.ui \
    24. mainwindow2.ui
    To copy to clipboard, switch view to plain text mode 


    Added after 8 minutes:


    Please find the project attached


    -
    Sahil Kulkarni
    Attached Files Attached Files
    Last edited by sask1236; 31st August 2013 at 19:46.

  9. #8
    Join Date
    Mar 2011
    Location
    Hyderabad, India
    Posts
    1,882
    Thanks
    3
    Thanked 452 Times in 435 Posts
    Qt products
    Qt4 Qt5
    Platforms
    MacOS X Unix/X11 Windows
    Wiki edits
    15

    Default Re: Create multi UI screen application using C++ and navigate through it using PushBu

    It is evident that you are reading the documentation, please do read the documentation it answers many of your initial startup questions.

    Anyway, here is the some modified code to look at.
    Attached Files Attached Files
    When you know how to do it then you may do it wrong.
    When you don't know how to do it then it is not that you may do it wrong but you may not do it right.

  10. The following user says thank you to Santosh Reddy for this useful post:

    sask1236 (1st September 2013)

  11. #9
    Join Date
    Aug 2013
    Location
    India
    Posts
    9
    Thanks
    3
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default Re: Create multi UI screen application using C++ and navigate through it using PushBu

    Thanks for your support,
    The project worked fine and i could navigate using Next and Previous buttons.
    But you have created a page using C++, and added objects using C++. For me its is but difficult to code the objects used and assign SLOT and SIGNAL to them using C++, thus i am interested in using UI file as a beginner level.
    As in the attached application i have created 3 UI files, can you help me with UI based project.

    Thanks in Advance,
    Sahil Kulkarni

  12. #10
    Join Date
    Mar 2011
    Location
    Hyderabad, India
    Posts
    1,882
    Thanks
    3
    Thanked 452 Times in 435 Posts
    Qt products
    Qt4 Qt5
    Platforms
    MacOS X Unix/X11 Windows
    Wiki edits
    15

    Default Re: Create multi UI screen application using C++ and navigate through it using PushBu

    It is very similar, anyway I have attached updated project using ui files
    Attached Files Attached Files
    When you know how to do it then you may do it wrong.
    When you don't know how to do it then it is not that you may do it wrong but you may not do it right.

  13. The following user says thank you to Santosh Reddy for this useful post:

    sask1236 (2nd September 2013)

Similar Threads

  1. Replies: 3
    Last Post: 25th January 2011, 13:36
  2. Replies: 0
    Last Post: 19th January 2011, 03:29
  3. How to detect multi screen in QT?
    By Kevin Hoang in forum Qt Programming
    Replies: 9
    Last Post: 26th March 2010, 23:02
  4. Display a QWidget using multi-screen
    By tarod in forum Qt Programming
    Replies: 3
    Last Post: 30th June 2008, 14:02
  5. multi screen
    By Thomas Feldman in forum Qt Programming
    Replies: 5
    Last Post: 9th May 2007, 16:41

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.