Hi Hez, So, the top of the DecoratorPanel is one colour and the bottom another? Couldn't you have an image in the css for the vertical borders that faded between the two colours (though that might not look so good as the panel increases in height)?
//A On 2 Maj, 11:12, hezjing <[email protected]> wrote: > Hi Adam > > Please be patience while I try my best to describe the problem :-) > > Here is my code: > > public void onModuleLoad() { > > // create a label for header and apply a background color > Label header = new Label("Header"); > header.addStyleName("header"); > > // create a label for footer and apply a background color > Label footer = new Label("Footer"); > footer.addStyleName("footer"); > > DockPanel dockPanel = new DockPanel(); > dockPanel.setSize("100%", "100%"); > > // add the header > dockPanel.add(header, DockPanel.NORTH); > dockPanel.setCellHeight(header, "5%"); > > // add the footer > dockPanel.add(footer, DockPanel.SOUTH); > dockPanel.setCellHeight(footer, "5%"); > > DecoratorPanel decoratorPanel = new DecoratorPanel(); > decoratorPanel.setSize("30%", "50%"); > decoratorPanel.add(dockPanel); > > RootPanel root = RootPanel.get(); > root.setSize("100%", "100%"); > root.add(decoratorPanel); > > } > > You will need to add the following CSS styles in order to display the > DecoratorPanel correctly: > > .gwt-DecoratorPanel .middleCenter { > height: 100%; > width: 100%; > background: #d0e4f6; > > } > > .header,.footer { > background: #f6ef32; > > } > > If we take a look athttp://www.ebay.com/, the header and footer starts from > the edge of the rounded rectangle. > So the background color of the topLeft, topCenter and topRight should be the > same as the header. > Whereas the background color of the bottomLeft, bottomCenter and bottomRight > should be the same as the footer. > This can be done easily by replacing the corners and horizontal border with > the same color as the header and footer. > > The problem now is the color of the middleLeft and middleRight, where the > color of the top part of these vertical borders should be the same as the > header, and the color of the bottom part should be the same as the footer. > How do we create such vertical border so that the top and bottom color are > aligned to the header (the DockPanel.NORTH) and footer (the > DockPanel.SOUTH)? > > > > On Sat, May 2, 2009 at 12:18 PM, Adam T <[email protected]> wrote: > > > Hi, > > > I would say the best approach is to add a DockPanel as the single > > content of the DecoratorPanel and then the header is DockPanel.NORTH, > > the footer DockPanel.SOUTH and you content goes in DockPanel.CENTER > > (the DecoratorPanel is a 9 celled table and topCenterInner is part of > > the structure to give you nice edges). > > > //Adam > > > On 2 Maj, 05:08, hezjing <[email protected]> wrote: > > > Hi > > > > I want to create a rounded corner panel which has a header and footer, > > > similar to the one shown onhttp://www.ebay.com/ > > > Thanks to the community, I got the customized rounded corners on the > > > DecoratorPanel :-) > > > > To add the header and footer to the DecoratorPanel, I think I need to set > > > the header into the widget at topCenterInner, > > > and the footer into the widget at bottomCenterInner. > > > > May I know how do we get/set the widget to the topCenterInner > > > and bottomCenterInner cell? > > > > -- > > > > Hez > > -- > > Hez --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/Google-Web-Toolkit?hl=en -~----------~----~----~----~------~----~------~--~---
