使用gwt实现的一个模式框

/* * Copyright 2007 Hilbrand Bouwkamp, hs@bouwkamp.com * * Licensed under the Apache License, Version 2.0 (the "License"); you may not * use this file except in compliance with the License. You may obtain a copy of * the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the * License for the specific language governing permissions and limitations under * the License. */ //package com.bouwkamp.gwt.user.client.ui; package com.educourseware.cms.gwt.client.ui.thirdparty; import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.Element; import com.google.gwt.user.client.ui.SimplePanel; import com.google.gwt.user.client.ui.Widget; /** * The <code>RoundedPanel</code> class adds similar rounded corners, as seen * in other Google applications, to a widget. This is done by adding several * <code>div</code> Elements around a Widget. The HTML code roughly for a * corner height 2 looks as follows: * * <pre> * &lt;div&gt; * &lt;div style=&quot;margin:0 2px&quot;&gt;&lt;/div&gt; * &lt;div style=&quot;margin:0 1px&quot;&gt;&lt;/div&gt; * &lt;div&gt;your widget&lt;/div&gt; * &lt;div style=&quot;margin:0 1px&quot;&gt;&lt;/div&gt; * &lt;div style=&quot;margin:0 2px&quot;&gt;&lt;/div&gt; * &lt;/div&gt; * </pre> * * To add the rounded corners to a widget start simply wrap your own widget * in the <code>RoundedPanel</code> class, for example with all corners * rounded: * * <pre> * // all 4 corners are rounded. * RoundedPanel rp = new RoundedPanel(yourWidget); * // use rp where you would use 'yourWidget' otherwise * </pre> * * Or with custom set corners, like only on the left: * * <pre> * // custom set corners * RoundedPanel rp = new RoundedPanel(yourWidget, RoundedPanel.LEFT); * // use rp where you would use 'yourWidget' otherwise * </pre> * * By default the height of the corners is 2px. It is possible to set * a different height at construction time. The height can be a value * between and including 1 and 9. This value doesn't correspond exactly * with the height, e.g. 9 is 12px heigh. * * <pre> * // all 4 corners are rounded and height index 5 * RoundedPanel rp = new RoundedPanel(yourWidget, ALL, 5); * // use rp where you would use 'yourWidget' otherwise * </pre> * * Programmatically set the color of the corners with * {@link #setCornerColor(String)}: * * <pre> * // all 4 corners are rounded. * RoundedPanel rp = new RoundedPanel(yourWidget); * rp.setCornerColor(&quot;red&quot;); * </pre> * * Default the css style name of the rounded corner divs is * <code>cbg-RP</code>. Use it to set the colors of the corner. For example: * * <pre> * .cbg-RP { background-color:#c3d9ff; } * </pre> * * A custom style might be needed when the corners are visible only when a panel * is selected (see the KitchenSink example modification below). Use the * <code>setCornerStyleName</code> method to set the custom style name. For * example set a custom style <code>my-RP</code> and add something like the * following to the stylesheet: * * <pre> * .selected .my-RP { background-color:#c3d9ff; } * </pre> * * <h3>Adding rounded corners to DialogBox widgets</h3> * Adding rounded corners to a <code>DialogBox</code> is somewhat more * complicated. The problem with <code>DialogBox</code> is that it uses a * private panel and the <code>RoundedPanel</code> should be applied to this * private <code>Panel</code>. To add the rounded corners to a * <code>DialogBox</code> you have to rewrite the implementation of the * <code>DialogBox</code>. For the <code>DialogBox</code> widget this can * be done as follows. First create a new class like * <code>RoundedDialogBox</code> and copy the code from the original * <code>DialogBox</code> (Please take the copyright of this class into * account). Next make the following changes to the code: * * <pre> * // Private variable for RoundedPanel * private RoundedPanel rp; * </pre> * * In the constructor change: * * <pre> * super.add(panel); * </pre> * * into: * * <pre> * rp = new RoundedPanel(panel); * super.add(rp); * </pre> * * Next change the style, otherwise the style of the dialog box is applied to * the rounded lines too. Do this by changing the following line: * * <pre> * setStyleName(&quot;gwt-DialogBox&quot;); * </pre> * * into: * * <pre> * panel.setStyleName(&quot;gwt-DialogBox&quot;); * </pre> * * In your css add the color of the border, something like: * * <pre> * .cbg-RP { background-color:#AAAAAA; } * </pre> * * There seems to be a problem with the width under IE. The RoundedPanel divs * don't follow the width of the dialog. To fix this change the * <code>show</code> method as follows: * * <pre> * public void show() { * super.show(); * // (The width must be set after the super.show() otherwise it will be 0). * // NOTE: As of GWT 1.1 the .getOffsetWidth() returns 0 at this point. * // This is different with earlier versions of GWT. Disable the line will make * // the rounded corners work in at least Firefox 1.5, but not in IE. * // I'm looking into this issue. * rp.setWidth(panel.getOffsetWidth() + &quot;px&quot;); * } * </pre> * * Now by extending your own dialog class on this <code>RoundedDialogBox</code> * instead of the original <code>DialogBox</code> you will have rounded * corners around your dialog. * * * @author Hilbrand Bouwkamp(hs@bouwkamp.com) * @version 1.3 */ public class RoundedPanel extends SimplePanel { /** * <code>TOPLEFT</code> top left rounded corner */ public final static int TOPLEFT = 1; /** * <code>TOPRIGHT</code> top right rounded corner */ public final static int TOPRIGHT = 2; /** * <code>BOTTOMLEFT</code> bottom left rounded corner */ public final static int BOTTOMLEFT = 4; /** * <code>BOTTOMRIGHT</code> bottom right rounded corner */ public final static int BOTTOMRIGHT = 8; /** * <code>BOTTOM</code> rounded corners at the top */ public final static int TOP = TOPLEFT | TOPRIGHT; /** * <code>TOP</code> rounded corners at the bottom */ public final static int BOTTOM = BOTTOMLEFT | BOTTOMRIGHT; /** * <code>LEFT</code> rounded corners on the left side */ public final static int LEFT = TOPLEFT | BOTTOMLEFT; /** * <code>RIGHT</code> rounded corners on the right side */ public final static int RIGHT = TOPRIGHT | BOTTOMRIGHT; /** * <code>ALL</code> rounded corners on all sides */ public final static int ALL = TOP | BOTTOM; /** * Default border style */ private final static String RPSTYLE = "cbg-RP"; /** * Lookup table for corner border width */ private final static String[][] CORNERBORDER = { { "1px" }, { "1px", "1px"}, { "1px", "1px", "1px"}, { "1px", "1px", "1px", "1px" }, { "1px", "1px", "1px", "2px", "1px" }, { "1px", "1px", "1px", "1px", "2px", "1px" }, { "1px", "1px", "1px", "1px", "1px", "2px", "1px" }, { "1px", "1px", "1px", "1px", "1px", "2px", "2px", "1px" }, { "1px", "1px", "1px", "1px", "1px", "1px", "2px", "3px", "1px" }}; /** * Lookup table for corner height */ private final static String[][] CORNERHEIGHT = { { "1px" }, { "1px", "1px"}, { "1px", "1px", "1px"}, { "1px", "1px", "1px", "1px" }, { "2px", "1px", "1px", "1px", "1px" }, { "2px", "1px", "1px", "1px", "1px", "1px" }, { "2px", "1px", "1px", "1px", "1px", "1px", "1px" }, { "2px", "1px", "1px", "1px", "1px", "1px", "1px", "1px" }, { "3px", "2px", "1px", "1px", "1px", "1px", "1px", "1px", "1px" }}; /** * Lookup table for corner margin */ private final static String[][] CORNERMARGIN = { { "1px" }, { "1px", "2px" }, { "1px", "2px", "3px" }, { "1px", "2px", "3px", "4px