Results 1 to 14 of 14

Thread: Suggestion for Multiple Page Widget.

  1. #1
    Join Date
    Jun 2013
    Posts
    31
    Thanks
    8
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Suggestion for Multiple Page Widget.

    I have a multiple page widget with a layout like the pic shown.
    I have a top level 8 buttons (A,B,C...)). On clicking any one button a subpage appears. Now this page has 12 pages which are to change based on the side functional 12 buttons ( 6 on each side).

    I wanted to know which is the best solution from the following three.
    1. Having a mdiarea with 8 subwindows for top 8 buttons and each subwindow having a QStackedWidget for the side buttons.
    2. A QTabWidget with a QStackedWidget for each subpage.
    3. A QStackedWidget having 8 pages of top buttons and further everypage of this stackedwidget will have another QStackedWidget for the side buttons.


    demo.jpg

    Thank You

  2. #2
    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: Suggestion for Multiple Page Widget.

    If everything is a button (ie. 8+12 buttons = 20) and all the 20 buttons do not change from page to page (i.e. for all 8*12 = 96 pages) then I will recommend to use QGridLayout,
    adjust the layout as per requirements and let the pages be displayed using QStackedWidget (the central one). Make and brake signal and slot connections of vertical buttons s dynamically when the top buttons are clicked.
    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.

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

    SiddhantR (12th July 2013)

  4. #3
    Join Date
    Jun 2013
    Posts
    31
    Thanks
    8
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Suggestion for Multiple Page Widget.

    Thanks for the reply.
    Do you mean to say that Stacked Widget should contain all the 96 pages and the stcked widget is placed on a grid layout. If I do this what will be the advantage of using a Grid layout?

  5. #4
    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: Suggestion for Multiple Page Widget.

    If I do this what will be the advantage of using a Grid layout?
    You can layout the top, left and right buttons around the stacked widget.
    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.

  6. #5
    Join Date
    Jun 2013
    Posts
    31
    Thanks
    8
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Suggestion for Multiple Page Widget.

    But by having all the 96 pages in a single stacked widget the coding will increase right. As of now I have to write just 8+12 lines of code for setting current index and if I use single stacked widget I will have to have a function in which a top button will relate to fixed index limit according to the requirement.
    Last edited by SiddhantR; 12th July 2013 at 14:50.

  7. #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: Suggestion for Multiple Page Widget.

    It should not be a big thing, here is an working exmaple of what you are looking for. This what I suggested and mapping of buttons and the widgets is done using QSignalMapper
    Qt Code:
    1. class Widget : public QWidget
    2. {
    3. Q_OBJECT
    4. public:
    5. explicit Widget(QWidget * parent = 0)
    6. : QWidget(parent)
    7. , mStackedWidget(new QStackedWidget)
    8. , mHPushButtons()
    9. , mVPushButtons()
    10. , mGridLayout(new QGridLayout(this))
    11. , mActivePage(0)
    12. , mActiveWidget()
    13. {
    14. // Create Horizontal QPushButton 8 Qty
    15. for(int i = 0; i < HButtons; i++)
    16. {
    17. mHPushButtons[i] = new QPushButton(QString("Page %1").arg(i + 1));
    18. mActiveWidget[i] = 0;
    19. }
    20.  
    21. // Create Vertical QPushButton 6 * 2 = 12 Qty
    22. for(int i = 0; i < LButtons + RButtons; i++)
    23. mVPushButtons[i] = new QPushButton(QString("Widget %1").arg(i + 1));
    24.  
    25. QSignalMapper * pageSignalMapper = new QSignalMapper(this);
    26. connect(pageSignalMapper, SIGNAL(mapped(int)), SLOT(hButtonClicked(int)));
    27.  
    28. QSignalMapper * widgetSignalMapper = new QSignalMapper(this);
    29. connect(widgetSignalMapper, SIGNAL(mapped(int)), SLOT(vButtonClicked(int)));
    30.  
    31.  
    32. // Create Page Widgets - 8 * 12 = 96 Qty
    33. for(int i = 0; i < HButtons; i++)
    34. {
    35. connect(mHPushButtons[i], SIGNAL(clicked()), pageSignalMapper, SLOT(map()));
    36. pageSignalMapper->setMapping(mHPushButtons[i], i);
    37.  
    38. for(int j = 0; j < LButtons + RButtons; j++)
    39. {
    40. QLabel * label = new QLabel(QString("QWidget : Page %1, Widget %2").arg(i + 1).arg(j + 1));
    41. mStackedWidget->addWidget(label);
    42.  
    43. connect(mVPushButtons[j], SIGNAL(clicked()), widgetSignalMapper, SLOT(map()));
    44. widgetSignalMapper->setMapping(mVPushButtons[j], j);
    45. }
    46. }
    47.  
    48. // Add Horozontal QPushButtons to QGridLayout
    49. for(int i = 0; i < HButtons; i++)
    50. mGridLayout->addWidget(mHPushButtons[i], 0, i, 1, 1);
    51.  
    52. // Add Left Vertical QPushButtons to QGridLayout
    53. for(int i = 0; i < LButtons; i++)
    54. mGridLayout->addWidget(mVPushButtons[i], 1 + i, 0, 1, 1);
    55.  
    56. // Add Vertical QPushButtons to QGridLayout
    57. for(int i = LButtons; i < LButtons + RButtons; i++)
    58. mGridLayout->addWidget(mVPushButtons[i], 1 + i - LButtons, HButtons - 1, 1, 1);
    59.  
    60. // Add QStackedWidget to QGridLayout
    61. mGridLayout->addWidget(mStackedWidget, 1, 1, LButtons, HButtons - 2);
    62. }
    63.  
    64. private slots:
    65. void hButtonClicked(int page)
    66. {
    67. mActivePage = page;
    68. activateWidget();
    69. }
    70.  
    71. void vButtonClicked(int widget)
    72. {
    73. mActiveWidget[mActivePage] = widget;
    74. activateWidget();
    75. }
    76.  
    77. private:
    78. static const int HButtons = 8;
    79. static const int LButtons = 6;
    80. static const int RButtons = 6;
    81.  
    82. QStackedWidget * mStackedWidget;
    83. QPushButton * mHPushButtons[HButtons];
    84. QPushButton * mVPushButtons[LButtons + RButtons];
    85. QGridLayout * mGridLayout;
    86.  
    87. int mActivePage;
    88. int mActiveWidget[HButtons];
    89.  
    90.  
    91. void activateWidget(void)
    92. {
    93. int index = mActivePage * (LButtons + RButtons) + mActiveWidget[mActivePage];
    94. mStackedWidget->setCurrentIndex(index);
    95. }
    96. };
    To copy to clipboard, switch view to plain text mode 
    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.

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

    SiddhantR (15th July 2013)

  9. #7
    Join Date
    Jun 2013
    Posts
    31
    Thanks
    8
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Suggestion for Multiple Page Widget.

    Hey thanks a ton for your help. This works really well...

  10. #8
    Join Date
    Jun 2013
    Posts
    31
    Thanks
    8
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Suggestion for Multiple Page Widget.

    Hey I have one more problem. Below the buttons there are labels which change color on button click. I am not able to align them exactly below the buttons. I have tried playing with layouts but nothing is helping. Actually the buttons will go once I integrate it with my actual hardware and hence I cant keep them in a layout with the buttons. Can you please suggest something here.
    Thanks.

  11. #9
    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: Suggestion for Multiple Page Widget.

    As you say buttons will to go away, then why not put the labels in place of buttons?
    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.

  12. #10
    Join Date
    Jun 2013
    Posts
    31
    Thanks
    8
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Suggestion for Multiple Page Widget.

    There are labels jus below buttons. But their size is fixed and to try now we need the buttons. The buttons will go away when we integrate that is still another 3 4 months away...
    Last edited by SiddhantR; 16th July 2013 at 07:39.

  13. #11
    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: Suggestion for Multiple Page Widget.

    Can you show me what you want and what you get?
    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.

  14. #12
    Join Date
    Jun 2013
    Posts
    31
    Thanks
    8
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Suggestion for Multiple Page Widget.

    Hiii,
    The code that you gave for multiple widgets is working fine. Today I found that when the index is set the loop gets executed 8 times. It is causing problem when I integrate business logic on the button click. That code also gets executed 8 times which is causing problem. Can you please guide on this as to why am I facing this problem?
    I added a QMessageBox in actvateWidget() after setCurrentIndex and it gets executed 8 times if I click any of the functional buttons. I have written the code constructor of main window.
    Thank you.
    Last edited by SiddhantR; 31st July 2013 at 12:08.

  15. #13
    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: Suggestion for Multiple Page Widget.

    Here you go, the problem was with the signal mapper connections, it was being created multiple (8) time.
    Qt Code:
    1. class Widget : public QWidget
    2. {
    3. Q_OBJECT
    4. public:
    5. explicit Widget(QWidget * parent = 0)
    6. : QWidget(parent)
    7. , mStackedWidget(new QStackedWidget)
    8. , mHPushButtons()
    9. , mVPushButtons()
    10. , mGridLayout(new QGridLayout(this))
    11. , mActivePage(0)
    12. , mActiveWidget()
    13. {
    14. // Create Horizontal QPushButton 8 Qty
    15. for(int i = 0; i < HButtons; i++)
    16. {
    17. mHPushButtons[i] = new QPushButton(QString("Page %1").arg(i + 1));
    18. mActiveWidget[i] = 0;
    19. }
    20.  
    21. // Create Vertical QPushButton 6 * 2 = 12 Qty
    22. for(int i = 0; i < LButtons + RButtons; i++)
    23. mVPushButtons[i] = new QPushButton(QString("Widget %1").arg(i + 1));
    24.  
    25. QSignalMapper * pageSignalMapper = new QSignalMapper(this);
    26. connect(pageSignalMapper, SIGNAL(mapped(int)), SLOT(hButtonClicked(int)));
    27.  
    28. QSignalMapper * widgetSignalMapper = new QSignalMapper(this);
    29. connect(widgetSignalMapper, SIGNAL(mapped(int)), SLOT(vButtonClicked(int)));
    30.  
    31. // Create Page Widgets - 8 * 12 = 96 Qty
    32. for(int i = 0; i < HButtons; i++)
    33. {
    34. connect(mHPushButtons[i], SIGNAL(clicked()), pageSignalMapper, SLOT(map()));
    35. pageSignalMapper->setMapping(mHPushButtons[i], i);
    36.  
    37. for(int j = 0; j < LButtons + RButtons; j++)
    38. {
    39. QLabel * label = new QLabel(QString("QWidget : Page %1, Widget %2").arg(i + 1).arg(j + 1));
    40. mStackedWidget->addWidget(label);
    41. }
    42. }
    43.  
    44. for(int j = 0; j < LButtons + RButtons; j++)
    45. {
    46. connect(mVPushButtons[j], SIGNAL(clicked()), widgetSignalMapper, SLOT(map()));
    47. widgetSignalMapper->setMapping(mVPushButtons[j], j);
    48. }
    49.  
    50. // Add Horozontal QPushButtons to QGridLayout
    51. for(int i = 0; i < HButtons; i++)
    52. mGridLayout->addWidget(mHPushButtons[i], 0, i, 1, 1);
    53.  
    54. // Add Left Vertical QPushButtons to QGridLayout
    55. for(int i = 0; i < LButtons; i++)
    56. mGridLayout->addWidget(mVPushButtons[i], 1 + i, 0, 1, 1);
    57.  
    58. // Add Vertical QPushButtons to QGridLayout
    59. for(int i = LButtons; i < LButtons + RButtons; i++)
    60. mGridLayout->addWidget(mVPushButtons[i], 1 + i - LButtons, HButtons - 1, 1, 1);
    61.  
    62. // Add QStackedWidget to QGridLayout
    63. mGridLayout->addWidget(mStackedWidget, 1, 1, LButtons, HButtons - 2);
    64. }
    65.  
    66. private slots:
    67. void hButtonClicked(int page)
    68. {
    69. mActivePage = page;
    70. activateWidget();
    71. }
    72.  
    73. void vButtonClicked(int widget)
    74. {
    75. mActiveWidget[mActivePage] = widget;
    76. activateWidget();
    77. }
    78.  
    79. private:
    80. static const int HButtons = 8;
    81. static const int LButtons = 6;
    82. static const int RButtons = 6;
    83.  
    84. QStackedWidget * mStackedWidget;
    85. QPushButton * mHPushButtons[HButtons];
    86. QPushButton * mVPushButtons[LButtons + RButtons];
    87. QGridLayout * mGridLayout;
    88.  
    89. int mActivePage;
    90. int mActiveWidget[HButtons];
    91.  
    92.  
    93. void activateWidget(void)
    94. {
    95. int index = mActivePage * (LButtons + RButtons) + mActiveWidget[mActivePage];
    96. mStackedWidget->setCurrentIndex(index);
    97. }
    98. };
    To copy to clipboard, switch view to plain text mode 
    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.

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

    SiddhantR (1st August 2013)

  17. #14
    Join Date
    Jun 2013
    Posts
    31
    Thanks
    8
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Suggestion for Multiple Page Widget.

    Thanks a lot...

Similar Threads

  1. Replies: 2
    Last Post: 16th April 2014, 05:26
  2. Multiple page menu
    By Borghal in forum Qt Quick
    Replies: 2
    Last Post: 21st March 2013, 19:58
  3. multiple page linear interface
    By ahkv9 in forum Qt Programming
    Replies: 3
    Last Post: 17th April 2007, 20:44
  4. Replies: 0
    Last Post: 21st December 2006, 12:48
  5. need a widget suggestion
    By TheKedge in forum Qt Programming
    Replies: 1
    Last Post: 31st August 2006, 19:04

Tags for this Thread

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.