Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>There are millions of way you could achieve that. I will give you my opinion and try to explain why I would do it this way.</p> <p>First of all, it seems you want, like most websites have, a top header (or two) and a menu on the left. The DockLayoutPanel can do this quite nicely, so I would use it to start with. By the way, consider adding a footer to your layout (sorry, just thinking most apps have one)...</p> <p>Then, you have two little panels on the left (Tree Str1 and 2) and the content areas. Depending on how flexible you want these to be, you will need different structures.</p> <p>Let's say you want to have not only two, but potentially many Tree Str on the left, and your Content Areas would not change much. I would add to the West area of the DockLayoutPanel a VerticalPanel (wich will contain the 2 Tree Strs, possibly more).</p> <p>In the main area of the DockLayoutPanel, add a VerticalPanel to represent the central area. This VerticalPanel must be sized appropriately (probably width,height=100%).</p> <p>Add to the VerticalPanel 2 rows (HorizontalPanels).</p> <p>Now, you can add Content Area 1 to the first row, and the others to row 2.</p> <p>Well, let the code speak:</p> <pre><code>public Panel getMainPanel() { DockLayoutPanel mainPanel = new DockLayoutPanel(Unit.PX); mainPanel.setSize("500px", "500px"); VerticalPanel leftPanel = new VerticalPanel(); Label treeStr1 = new Label("Tree Str1"); treeStr1.setSize("100%", "100px"); Label treeStr2 = new Label("Tree Str2"); treeStr1.setSize("100%", "200px"); leftPanel.add(treeStr1); leftPanel.add(treeStr2); VerticalPanel centralArea = new VerticalPanel(); centralArea.setSize("100%", "100%"); centralArea.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER); centralArea.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE); centralArea.getElement().getStyle().setBorderStyle(BorderStyle.SOLID); HorizontalPanel row1 = new HorizontalPanel(); row1.setWidth("90%"); HorizontalPanel row2 = new HorizontalPanel(); row2.setWidth("90%"); row2.getElement().getStyle().setBorderStyle(BorderStyle.SOLID); row2.getElement().getStyle().setBorderColor("red"); row2.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT); centralArea.add(row1); centralArea.add(row2); HTML ca1 = new HTML("Content Area 1"); ca1.setSize("100%", "100px"); ca1.getElement().getStyle().setBorderStyle(BorderStyle.SOLID); HTML ca2 = new HTML("Content Area 2"); ca2.setSize("60%", "60px"); ca2.getElement().getStyle().setBorderStyle(BorderStyle.SOLID); HTML ca3 = new HTML("Content Area 3"); ca3.setSize("30%", "60px"); ca3.getElement().getStyle().setBorderStyle(BorderStyle.SOLID); row1.add(ca1); row2.add(ca2); row2.add(ca3); mainPanel.addNorth(new HTML( "&lt;h1&gt;This is your header, create a Widget instead of this&lt;/h1&gt;"), 150); mainPanel.addNorth(new HTML( "&lt;h2&gt;Some more user options&lt;/h2&gt;"), 60); mainPanel.addWest(leftPanel, 150); mainPanel.add(centralArea); return mainPanel; } </code></pre> <p>If any of these areas must be REALLY flexible, try GWT's <a href="http://google-web-toolkit.googlecode.com/svn/javadoc/2.4/com/google/gwt/user/client/ui/FlexTable.html" rel="nofollow">FlexTable</a>!</p>
    singulars
    1. This table or related slice is empty.
    1. PODesign a GWT UI Layout
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USRenato
    1. USRenato
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PODesign a GWT UI Layout
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThank you very much for your valuable inputs. I will definitely try with this. I have only one question now on this. We are seeting the width of panels using pixels. Cant we give in percentages? Because otherwise, how screen looks in different monitor size, it will leave too much of space if screen size is more rt? What is the best practice?
      singulars
      1. PO
      1. USSantosh
    2. COAlso, please let me know what is best practice for setting up the different section height and widths? Pixel or Percentages?
      singulars
      1. PO
      1. USSantosh
    3. COThis is a HTML design question. Wether you use percentage for widths depends on how you want your website to behave on window-resize and in different screens. Roughly, there are two strategies: [Fixed or Flexible Width Pages](http://webdesign.about.com/od/webdesign/a/aa080904.htm). You can also mix the two... it depends on your content and target audience (mobile, tablet, or desktops/laptops).
      singulars
      1. PO
      1. USRenato
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload