Examples of DecoratorPanel

• com.google.gwt.user.client.ui.DecoratorPanel

  A {@link SimplePanel} that wraps its contents in stylized boxes, which can beused to add rounded corners to a {@link Widget}.

  Wrapping a {@link Widget} in a "9-box" allows users to specify images in eachof the corners and along the four borders. This method allows the content within the {@link DecoratorPanel} to resize without disrupting the look ofthe border. In addition, rounded corners can generally be combined into a single image file, which reduces the number of downloaded files at startup. This class also simplifies the process of using AlphaImageLoaders to support 8-bit transparencies (anti-aliasing and shadows) in ie6, which does not support them normally.

  Setting the Size:

  If you set the width or height of the {@link DecoratorPanel}, you need to set the height and width of the middleCenter cell to 100% so that the middleCenter cell takes up all of the available space. If you do not set the width and height of the {@link DecoratorPanel}, it will wrap its contents tightly.

   .gwt-DecoratorPanel .middleCenter { height: 100%; width: 100%; } 

  CSS Style Rules

  • .gwt-DecoratorPanel { the panel }
  • .gwt-DecoratorPanel .top { the top row }
  • .gwt-DecoratorPanel .topLeft { the top left cell }
  • .gwt-DecoratorPanel .topLeftInner { the inner element of the cell }
  • .gwt-DecoratorPanel .topCenter { the top center cell }
  • .gwt-DecoratorPanel .topCenterInner { the inner element of the cell }
  • .gwt-DecoratorPanel .topRight { the top right cell }
  • .gwt-DecoratorPanel .topRightInner { the inner element of the cell }
  • .gwt-DecoratorPanel .middle { the middle row }
  • .gwt-DecoratorPanel .middleLeft { the middle left cell }
  • .gwt-DecoratorPanel .middleLeftInner { the inner element of the cell }
  • .gwt-DecoratorPanel .middleCenter { the middle center cell }
  • .gwt-DecoratorPanel .middleCenterInner { the inner element of the cell }
  • .gwt-DecoratorPanel .middleRight { the middle right cell }
  • .gwt-DecoratorPanel .middleRightInner { the inner element of the cell }
  • .gwt-DecoratorPanel .bottom { the bottom row }
  • .gwt-DecoratorPanel .bottomLeft { the bottom left cell }
  • .gwt-DecoratorPanel .bottomLeftInner { the inner element of the cell }
  • .gwt-DecoratorPanel .bottomCenter { the bottom center cell }
  • .gwt-DecoratorPanel .bottomCenterInner { the inner element of the cell }
  • .gwt-DecoratorPanel .bottomRight { the bottom right cell }
  • .gwt-DecoratorPanel .bottomRightInner { the inner element of the cell }

Examples of com.google.gwt.user.client.ui.DecoratorPanel