Design a GWT UI Layout -


we wanted design layout in gwt has quite lot of small small sections on screen. has left menu, header, footer, main content area lot of sub sections can closed user in case if not want see them. remaining content section should adjusted automatically. using gwt platform. in doubt, whether docklayoutpanel suits or not, because, has must more flexible. apart that, didnt layout examples. can achieve using gwt enter image description herepanels or have manually using div in module html file?

please find below draft layout. confused panel start.... kindly advice.

there millions of way achieve that. give opinion , try explain why way.

first of all, seems want, websites have, top header (or two) , menu on left. docklayoutpanel can quite nicely, use start with. way, consider adding footer layout (sorry, thinking apps have one)...

then, have 2 little panels on left (tree str1 , 2) , content areas. depending on how flexible want these be, need different structures.

let's want have not two, potentially many tree str on left, , content areas not change much. add west area of docklayoutpanel verticalpanel (wich contain 2 tree strs, possibly more).

in main area of docklayoutpanel, add verticalpanel represent central area. verticalpanel must sized appropriately (probably width,height=100%).

add verticalpanel 2 rows (horizontalpanels).

now, can add content area 1 first row, , others row 2.

well, let code speak:

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(             "<h1>this header, create widget instead of this</h1>"), 150);     mainpanel.addnorth(new html(             "<h2>some more user options</h2>"), 60);     mainpanel.addwest(leftpanel, 150);     mainpanel.add(centralarea);     return mainpanel; } 

if of these areas must flexible, try gwt's flextable!


Comments

Popular posts from this blog

django - How can I change user group without delete record -

java - Need to add SOAP security token -

java - EclipseLink JPA Object is not a known entity type -