Before reading about my problem, first look at this GUI Diagram.
There are three bars at the top as follows:
- one having buttons "pictorial view", "textual view" etc.
- second having buttons "processes", "organisation" etc.
- third having buttons "application to processes" etc.
After that two information bars are there.
After that a canvas window displaying the diagram.
Now, I want a GUI similar to this with the following features (relative to the above diagram):
At first, only first bar appears and below it a white blank canvas having no diagram appears spreading all over the GUI.
When the user clicks on the "pictorial view" button the second bar appears below the first bar and after that the same canvas without diagram spreading over the remaining space
When the user clicks on the "application" button on the second bar, the third bar appears below the second bar, and after that the same empty canvas spreading over the remaing space in the GUI.
I had tried to implement it by first having a "main panel" with BorderLayout. After that as showing in the following figure:
mainPanel(Border Layout)
|
|--topPanel (at NORTH of the mainPanel's Border Layout)
|
|
|--centerPanel (at CENTER of the mainPanel's Border Layout)
topPanel - to contain all the bars (bars should be added dynamically when a user clicks on a button)
centerPanel - to contain the canvas and adjust its size automatically when new bars are added in the topPanel