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 at http://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
-~----------~----~----~----~------~----~------~--~---
