Example usage for com.google.gwt.user.client.ui HTMLPanel HTMLPanel

Introduction

In this page you can find the example usage for com.google.gwt.user.client.ui HTMLPanel HTMLPanel.

Prototype

private HTMLPanel(Element elem)

Source Link

Document

Construct a new HTMLPanel with the specified element.

Usage

From source file:asquare.gwt.tk.demo.client.DebugPanel.java

License:Apache License

private Widget createDocPanel() {
    String content = "<H2>Debug Utilities</H2>"
            + "<p>Includes a debug console, <a href='#' onclick=\"Debug.prettyPrint(window);return false;\">pretty printing</a> of native JavaScript objects, a stub implementation for compile-time removal and an experimental event monitor. </p>"
            + "<p>Debugging statements are output to the in-browser Debug Console. In hosted mode the message also goes to <code>System.out</code> and the GWT Shell. The console will appear when it recieves output if it is enabled (it is enabled by default). Press <code>w</code> twice to enable/disable the debug console independently of other debug funtions.</p>"
            + "<p>You can print debug statments from JSNI and <a href='#' onclick=\"Debug.println('This is an inline HTML onclick handler');return false;\">regular JavaScript</a>. </p>"
            + "<p>Debug output can be enabled at runtime via <code>Debug.enable()</code> or by pressing <code>Caps Lock</code> twice (debug is enabled for this demo, but is otherwise disabled by default).</p>"
            + "<p>Press <code>e</code> twice to enable event tracing. Mouse move/in/out &amp; scroll events are ignored by default. </p>"
            + "<p>A stub implementation facilitates removal of trace statements and class definitions from the deliverable. </p>"
            + "<p>Debug classes are packaged in a separate module for manual dependency elimination; just comment out the <code>inherit</code> element in your application's model descriptor. </p>"
            + "<p>See the API documentation for usage notes. </p>" + "";
    HTMLPanel doc = new HTMLPanel(content);
    DOM.setAttribute(doc.getElement(), "id", "debug-doc");
    return doc;/*from   w ww . j  a  v a 2  s. c  o  m*/
}

From source file:asquare.gwt.tk.demo.client.DropDownPanelPanel.java

License:Apache License

public DropDownPanelPanel() {
    HorizontalPanel outer = new HorizontalPanel();
    outer.setSize("100%", "100%");

    setWidget(outer);/*from   w w w  . j av a  2  s. c o  m*/

    BasicPanel left = new BasicPanel();
    DOM.setAttribute(left.getElement(), "id", "dropDown-left");

    DropDownPanel dropDown1 = new DropDownPanel();
    DOM.setAttribute(dropDown1.getElement(), "id", "dropDown-1");
    dropDown1.setHeaderText("Drop Down 1", false);
    Image image = new Image("icecube.jpg");
    image.setSize("100px", "100px");
    dropDown1.add(image);
    dropDown1.setOpen(true);
    left.add(dropDown1);

    DropDownPanel dropDown2 = new DropDownPanel();
    DOM.setAttribute(dropDown2.getElement(), "id", "dropDown-2");
    dropDown2.setHeaderText("Drop Down 2", true);
    image = new Image("icecube.jpg");
    image.setSize("100px", "250px");
    dropDown2.add(image);
    left.add(dropDown2);

    outer.add(left);
    outer.setCellWidth(left, "1px");

    String content = "<H2>Drop Down Panel</H2>"
            + "<p>This widget consists of a hideable content DIV and an optional header DIV.</p>"
            + "<p>The content can be <span id='open'></span>&nbsp;&amp; <span id='close'></span>&nbsp;programatically.</p>"
            + "<p>The headers prevent selection of the text within them. In IE this is done in a special implementation using an <code>onselectstart</code> listener which returns <code>false</code>. In other browsers, <code>DOM.eventPreventDefault(Event)</code> for <code>Event.ONMOUSEDOWN</code> suffices. </p>"
            + "<p>You can add a listener to the DropDownPanel and make layout changes when the it opens/closes (e.g. maximize its parent element when it opens). </p>"
            + "<p>The tip-down arrows on the left are background images applied through CSS rules. <em>Note: we cannot put a border around the header itself because in IE the background image would be obscured by the border.</em></p>"
            + "<h4>Known problems</h4>"
            + "<ul><li>In IE, the cursor reverts to the system arrow after opening the headers on the left. This is a result of changing the tipdown arrow background image. (Alternative: insert the image with <code>DropDownPanel.setHeaderText()</code> and then change it via a DropDownListener.)</li></ul>"
            + "<p>Tested in IE 6 (Win), Firefox 1.5 (Win), Opera 8 (win) and Safari 2.0.4 (Mac) in Strict and Quirks modes.</p>";
    DropDownPanel dropDown3 = new DropDownPanel();
    DOM.setAttribute(dropDown3.getElement(), "id", "dropDown-3");
    dropDown3.setHeaderText("Drop&nbsp;Down&nbsp;3", true);
    HTMLPanel center = new HTMLPanel(content);
    SimpleHyperLink close = new SimpleHyperLink("hidden");
    SimpleHyperLink open = new SimpleHyperLink("shown");
    center.add(close, "close");
    center.add(open, "open");
    dropDown3.add(center);
    dropDown3.setOpen(true);
    outer.add(dropDown3);

    final DropDownPanel dropDown4 = new DropDownPanel();
    DOM.setAttribute(dropDown4.getElement(), "id", "dropDown-4");
    image = new Image("icecube.jpg");
    image.setSize("200px", "250px");
    dropDown4.add(image);
    outer.add(dropDown4);
    outer.setCellWidth(dropDown4, "1px");

    open.addClickListener(new ClickListener() {
        public void onClick(Widget sender) {
            dropDown4.setOpen(true);
        }
    });
    close.addClickListener(new ClickListener() {
        public void onClick(Widget sender) {
            dropDown4.setOpen(false);
        }
    });
}

From source file:asquare.gwt.tkdemo.client.demos.DebugPanel.java

License:Apache License

private Widget createDocPanel() {
    String content = "<H2>Debug Utilities</H2>" + "<h4>Features</h4>" + "<dl>" + "  <dt>Tracing</dt>"
            + "  <dd>Debug output can be enabled at runtime via <code>Debug.enable()</code> or by pressing <code>Esc</code> twice (debug is enabled for this demo, but is otherwise disabled by default)."
            + "    You can <a href='#' onclick=\"Debug.prettyPrint(window);return false;\">pretty print</a> and <a href='#' onclick=\"Debug.dump(window);return false;\">dump</a> native JavaScript objects to the console."
            + "    Trace statments can be printed from JSNI and <a href='#' onclick=\"Debug.println('This is a pure HTML onclick handler');return false;\">external JavaScript</a>. "
            + "  </dd>" + "  <dt>Debug console</dt>"
            + "  <dd>Debugging messages are output to the in-browser Debug Console. In hosted mode, messages are mirrored to <code>System.out</code> and the GWT Shell. "
            + "    The console will be shown when it recieves output if it is enabled (it is enabled by default). "
            + "    Press <code>w</code> twice to enable/disable the debug console independently of other debug funtions. "
            + "  </dd>" + "  <dt>Event monitor</dt>"
            + "  <dd>Press <code>e</code> twice to enable event tracing. MouseMove, mouseIn, mouseOut &amp; scroll events are ignored by default. </dd>"
            + "  <dt>Stub implementation</dt>"
            + "  <dd>Facilitates compile-time removal of trace statements and debug class definitions. Place ahead of GWT Tk in your classpath when compiling. </dd>"
            + "</dl>"
            + "<p>Debug classes are packaged in a separate module for manual dependency elimination; just comment out the <code>inherit</code> element in your application's model descriptor. </p>"
            + "<p>See the API documentation for usage notes. </p>" + "";
    HTMLPanel doc = new HTMLPanel(content);
    DomUtil.setAttribute(doc, "id", "debug-doc");
    doc.addStyleName("description");
    return doc;/*from  www . j a v  a 2 s  .  c o  m*/
}

From source file:asquare.gwt.tkdemo.client.demos.DialogPanel.java

License:Apache License

private Widget createDoc() {
    String content = "<H2>ModalDialog</H2>" + "<h4>Features</h4>" + "<ul>"
            + "<li>automatic centering in browser's main viewport</li>"
            + "<li>light box effect (using <span id='glassPanelRef'></span>)</li>"
            + "<li>caption allows child widgets</li>" + "<li>caption prevents text selection</li>"
            + "<li>focus management and containment (internal tab cycle)</li>"
            + "<li>can focus a widget upon dismissal</li>"
            + "<li>minimim size enforcement for content panel (optional, default is 200 x 75 px)</li>" + "</ul>"
            + "<H2>AlertDialog</H2>" + "<h4>Features</h4>" + "<ul>"
            + "<li>icon in the caption indicates severity</li>"
            + "<li>default button is automatically focused</li>" + "<li>cancel button is mapped to Esc key</li>"
            + "<li>button hot keys + Esc + Enter</li>" + "<li>focus cycle traversable with arrow keys</li>"
            + "</ul>";
    HTMLPanel description = new HTMLPanel(content);
    Hyperlink glassPanelLink = new Hyperlink("GlassPanel", false, GlassPanelDemo.NAME);
    DomUtil.setStyleAttribute(glassPanelLink, "display", "inline");
    description.add(glassPanelLink, "glassPanelRef");
    description.setStyleName("description division");
    return description;
}

From source file:asquare.gwt.tkdemo.client.demos.DropDownPanelPanel.java

License:Apache License

public DropDownPanelPanel() {
    HorizontalPanel outer = new HorizontalPanel();
    outer.setSize("100%", "100%");

    initWidget(outer);//from  w  w w.  j av  a 2 s  . co m

    BasicPanel left = new BasicPanel();
    left.addStyleName("division");
    DomUtil.setAttribute(left, "id", "dropDown-left");

    DropDownPanel dropDown1 = new DropDownPanel();
    DomUtil.setAttribute(dropDown1, "id", "dropDown-1");
    dropDown1.setHeaderText("Drop Down 1", false);
    HTML dd1Content = new HTML("This DropDownPanel uses CSS to change the header image.");
    dropDown1.add(dd1Content);
    dropDown1.setOpen(true);
    left.add(dropDown1);

    final DropDownPanel dropDown2 = new DropDownPanel();
    DomUtil.setAttribute(dropDown2, "id", "dropDown-2");
    final String closedHeader = "<img src='triangle.gif'/>&nbsp;Drop Down 2";
    final String openHeader = "<img src='opentriangle.gif'/>&nbsp;Drop Down 2";
    dropDown2.setHeaderText(closedHeader, true);
    dropDown2.addDropDownListener(new DropDownListener() {
        public void dropDownClosed(DropDownPanel sender) {
            dropDown2.setHeaderText(closedHeader, true);
        }

        public void dropDownOpened(DropDownPanel sender) {
            dropDown2.setHeaderText(openHeader, true);
        }
    });
    HTML dd2Content = new HTML("This DropDownPanel uses a listener to change the header image.");
    dropDown2.add(dd2Content);
    dropDown2.setOpen(true);
    left.add(dropDown2);

    outer.add(left);
    outer.setCellWidth(left, "1px");

    String content = "<H2>DropDownPanel</H2>"
            + "<p>This widget consists of a hideable content DIV and an optional header DIV.</p>"
            + "<p>The content can be <span id='open'></span>&nbsp;&amp; <span id='close'></span>&nbsp;programatically.</p>"
            + "<p>The headers prevent selection of the text within them. In IE this is done in a special implementation using an <code>onselectstart</code> listener which returns <code>false</code>. In other browsers, <code>DOM.eventPreventDefault(Event)</code> for <code>Event.ONMOUSEDOWN</code> suffices. </p>"
            + "<p>You can add a listener to the DropDownPanel and make layout changes when the it opens/closes (e.g. maximize its parent element when it opens). </p>"
            + "<p><em>Note: we cannot put a border around the Drop Down 1 header because in IE the background image would be obscured by the border.</em></p>";
    DropDownPanel dropDown3 = new DropDownPanel();
    dropDown3.addStyleName("division");
    DomUtil.setAttribute(dropDown3, "id", "dropDown-3");
    dropDown3.setHeaderText("Drop&nbsp;Down&nbsp;3", true);
    HTMLPanel center = new HTMLPanel(content);
    center.addStyleName("description");
    SimpleHyperLink close = new SimpleHyperLink("hidden");
    SimpleHyperLink open = new SimpleHyperLink("shown");
    center.add(close, "close");
    center.add(open, "open");
    dropDown3.add(center);
    dropDown3.setOpen(true);
    outer.add(dropDown3);

    final DropDownPanel dropDown4 = new DropDownPanel();
    dropDown4.addStyleName("division");
    DomUtil.setAttribute(dropDown4, "id", "dropDown-4");
    Image image = new Image("icecube.jpg");
    image.setSize("200px", "250px");
    dropDown4.add(image);
    outer.add(dropDown4);
    outer.setCellWidth(dropDown4, "1px");

    open.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {
            dropDown4.setOpen(true);
        }
    });
    close.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {
            dropDown4.setOpen(false);
        }
    });
}

From source file:asquare.gwt.tkdemo.client.demos.ExposedCellPanelPanel.java

License:Apache License

public ExposedCellPanelPanel() {
    DomUtil.setId(this, "rowPanelPanel");
    setSize("100%", "100%");

    String text = "<h2>RowPanel, ColumnPanel</h2>"
            + "<p>Flexible replacements for VerticalPanel &amp; HorizontalPanel</p>"
            + "<ul><li>Allow multiple widgets in each table cell</li>" + "<li>Exposes TD to CSS</li>"
            + "<li>Simplifies layout by eliminating need for a nested container (e.g. the DIV in TabBar tabs)</li>"
            + "<li>Random access to rows and widgets</li>" + "</ul>";
    HTMLPanel description = new HTMLPanel(text);
    description.setStyleName("description division");
    add(description);/*from   www.j a  va  2 s. co m*/

    ColumnPanel examples = new ColumnPanel();
    add(examples);

    BasicPanel ex1 = new BasicPanel();
    ex1.setStyleName("example division");
    examples.add(ex1);

    ex1.add(new Label("RowPanel"));

    RowPanel rp1 = new RowPanel();
    DomUtil.setId(rp1, "ex1");
    rp1.setSpacing(2);
    ex1.add(rp1);

    rp1.addCell();
    rp1.addCellStyleName("ex1-caption");
    Label label1 = new Label("Cell 1");
    label1.setWidth("100%");
    label1.setHeight("100%");
    rp1.addWidget(label1, false);

    rp1.addCell();
    rp1.addCellStyleName("ex1-content");
    Label label2 = new Label("Cell 2");
    rp1.addWidget(label2, false);

    rp1.addWidget(new Button("Button"), false);

    BasicPanel ex2 = new BasicPanel();
    ex2.setStyleName("example division");
    examples.add(ex2);

    ex2.add(new Label("ColumnPanel"));

    ColumnPanel cp1 = new ColumnPanel();
    DomUtil.setId(cp1, "ex1");
    cp1.setSpacing(2);
    ex2.add(cp1);

    cp1.addCell();
    cp1.addCellStyleName("ex1-caption");
    Label label3 = new Label("Cell 1");
    label3.setWidth("100%");
    label3.setHeight("100%");
    cp1.addWidget(label3, false);

    cp1.addCell();
    cp1.addCellStyleName("ex1-content");
    Label label4 = new Label("Cell 2");
    cp1.addWidget(label4, false);

    cp1.addWidget(new Button("Button"), false);
}

From source file:cc.kune.core.client.invitation.AbstractInvitationConfirmDialog.java

License:GNU Affero Public License

/**
 * Instantiates a new generic invitation confirm dialog.
 * //from ww w . j a v a2 s. c om
 * @param builder
 *          the builder
 */
protected AbstractInvitationConfirmDialog(final AbstractInvitationConfirmDialog.Builder builder) {
    super(builder);
    final FocusPanel focus = new FocusPanel();
    final HTMLPanel label = new HTMLPanel(builder.getMessage());
    focus.add(label);
    focus.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(final ClickEvent event) {
            hide();
        }
    });
    super.getInnerPanel().add(focus);
    super.setFirstBtnVisible(false);
    this.getSecondBtn().addClickHandler(new ClickHandler() {
        @Override
        public void onClick(final ClickEvent event) {
            hide();
        }
    });
}

From source file:cc.kune.polymer.client.actions.ui.PoToolbarGui.java

License:GNU Affero Public License

@Override
public AbstractGuiItem create(final GuiActionDescrip descriptor) {
    super.descriptor = descriptor;
    final String id = descriptor.getId();

    if ("undefined".equals(id) || TextUtils.empty(id)) {
        shouldBeAdded = true;/* w w w.ja  va 2s.c  o m*/
        toolbar = new HTMLPanel("");
        toolbar.getElement().setAttribute("horizontal", "");
        toolbar.getElement().setAttribute("layout", "");
    } else { // Already created (polymer) element
        shouldBeAdded = false;
        toolbar = HTMLPanel.wrap(DOM.getElementById(id));
    }

    initWidget(toolbar);
    configureItemFromProperties();
    descriptor.putValue(ParentWidget.PARENT_UI, this);
    return this;
}

From source file:cc.kune.polymer.client.actions.ui.PoToolbarSeparatorGui.java

License:GNU Affero Public License

@Override
public AbstractGuiItem create(final GuiActionDescrip descriptor) {
    super.descriptor = descriptor;
    final PoToolbarGui toolbar = ((PoToolbarGui) descriptor.getParent().getValue(ParentWidget.PARENT_UI));
    if (toolbar == null) {
        throw new UIException(
                "To add a toolbar separator you need to add the toolbar before. Item: " + descriptor);
    }/*from   w  w  w . j av a 2s  .co m*/
    final Type type = ((ToolbarSeparatorDescriptor) descriptor).getSeparatorType();

    switch (type) {
    case fill:
        widget = new HTMLPanel("");
        widget.getElement().setAttribute("flex", "");
        break;
    case spacer:
        widget = new Label(" ");
    case separator:
        // We'll not use | separator in polymer gui
        widget = new Label("");
        break;
    default:
        break;
    }
    toolbar.add(widget);
    widget.addStyleName("k-toolbar-separator");
    configureItemFromProperties();
    return this;
}

From source file:com.agnie.gwt.common.client.widget.BreadCrumbPanel.java

License:Open Source License

/**
 * Creates an empty Bread Crumb panel./*from ww w  .j  av a 2 s .  c o m*/
 */
public BreadCrumbPanel(String styleClassName) {
    container = new HTMLPanel("");
    container.addStyleName("clearfix");

    panel = new HTMLPanel("");
    container.add(panel);
    initWidget(container);
    sinkEvents(Event.ONCLICK);
    panel.addStyleName(styleClassName);
}