com.sencha.gxt.widget.core.client.container
Class HtmlLayoutContainer

java.lang.Object
  com.google.gwt.user.client.ui.UIObject
      com.google.gwt.user.client.ui.Widget
          com.sencha.gxt.widget.core.client.Component
              com.sencha.gxt.widget.core.client.container.Container
                  com.sencha.gxt.widget.core.client.container.AbstractHtmlLayoutContainer
                      com.sencha.gxt.widget.core.client.container.HtmlLayoutContainer

All Implemented Interfaces:

HasAttachHandlers, HasResizeHandlers, HasHandlers, EventListener, HasEnabled, HasVisibility, HasWidgets, HasWidgets.ForIsWidget, IndexedPanel, IndexedPanel.ForIsWidget, IsWidget, AddEvent.HasAddHandlers, BeforeAddEvent.HasBeforeAddHandlers, BeforeHideEvent.HasBeforeHideHandlers, BeforeRemoveEvent.HasBeforeRemoveHandlers, BeforeShowContextMenuEvent.HasBeforeShowContextMenuHandler, BeforeShowEvent.HasBeforeShowHandlers, BlurEvent.HasBlurHandlers, ContainerHandler.HasContainerHandlers, DisableEvent.HasDisableHandlers, EnableEvent.HasEnableHandlers, FocusEvent.HasFocusHandlers, HideEvent.HasHideHandlers, MoveEvent.HasMoveHandlers, RemoveEvent.HasRemoveHandlers, ShowContextMenuEvent.HasShowContextMenuHandler, ShowEvent.HasShowHandlers, HasFocusSupport, HasItemId, java.lang.Iterable<Widget>

public class HtmlLayoutContainer
extends AbstractHtmlLayoutContainer

A layout container that lays out its children using an HTML template. The mapping of each child to a corresponding selector is specified using HtmlData.

Code Snippet #1 - The first code snippet is a simple example that uses in-line HTML:

  public interface HtmlLayoutContainerTemplate extends XTemplates {
    @XTemplate("<div><div class='cell1'></div><div class='cell2'></div><div class='cell3'></div></div>")
    SafeHtml getTemplate();
  }

  private void onModuleLoad() {
    HtmlLayoutContainerTemplate templates = GWT.create(HtmlLayoutContainerTemplate.class);
    HtmlLayoutContainer c = new HtmlLayoutContainer(templates.getTemplate());
    c.add(new TextButton("Button 1"), new HtmlData(".cell1"));
    c.add(new TextButton("Button 2"), new HtmlData(".cell2"));
    c.add(new TextButton("Button 3"), new HtmlData(".cell3"));
    Viewport v = new Viewport();
    v.add(c);
    RootPanel.get().add(v);
  }
 

Code Snippet #2 - The second code snippet is more complex and illustrates the use of external HTML and CSS files:

• CodeSnippet.html - the HTML template
• CodeSnippet.css - the CSS for the template

The external HTML and CSS are injected into the content that is downloaded to the browser.

  public interface CodeSnippetStyle extends CssResource {
    String cell1();
    String cell2();
    String cell3();
  }

  public interface CodeSnippetHtml extends XTemplates {
    @XTemplate(source = "CodeSnippet.html")
    SafeHtml getTemplate(CodeSnippetStyle style);
  }

  public interface CodeSnippetCss extends ClientBundle {
    @Source("CodeSnippet.css")
    CodeSnippetStyle style();
  }

  private void onModuleLoad() {
    CodeSnippetHtml html = GWT.create(CodeSnippetHtml.class);
    CodeSnippetCss css = GWT.create(CodeSnippetCss.class);
    css.style().ensureInjected();
    HtmlLayoutContainer c = new HtmlLayoutContainer(html.getTemplate(css.style()));
    c.add(new Label("Label 1"), new HtmlData("." + css.style().cell1()));
    c.add(new Label("Label 2"), new HtmlData("." + css.style().cell2()));
    c.add(new Label("Label 3"), new HtmlData("." + css.style().cell3()));
    Viewport v = new Viewport();
    v.add(c);
    RootPanel.get().add(v);
  }
 

By default, GWT generates short, obfuscated names for the injected CSS. For debugging purposes, instruct GWT to generate recognizable style names by including the following in the module file (.gwt.xml).

 <set-configuration-property name='CssResource.style' value='pretty' />
 

CodeSnippet.html contains the HTML, for example:

<div>
  <div class="{style.cell1}"></div>
  <div class="{style.cell2}"></div>
  <div class="{style.cell3}"></div>
</div>
 

CodeSnippet.css contains the styles, for example:

.cell1 {
  background-color: #ffffcc;
}
.cell2 {
  background-color: #ccffff;
}
.cell3 {
  background-color: #ffccff;
}
 

Nested Class Summary

Nested classes/interfaces inherited from class com.sencha.gxt.widget.core.client.container.AbstractHtmlLayoutContainer

AbstractHtmlLayoutContainer.HtmlData

Nested classes/interfaces inherited from class com.google.gwt.user.client.ui.UIObject

UIObject.DebugIdImpl, UIObject.DebugIdImplEnabled

Nested classes/interfaces inherited from interface com.google.gwt.user.client.ui.HasWidgets

HasWidgets.ForIsWidget

Nested classes/interfaces inherited from interface com.google.gwt.user.client.ui.IndexedPanel

IndexedPanel.ForIsWidget

Field Summary

Fields inherited from class com.google.gwt.user.client.ui.UIObject

DEBUG_ID_PREFIX

Constructor Summary

HtmlLayoutContainer(SafeHtml html)
Creates an HTML layout container using the specified HTML template.

HtmlLayoutContainer(java.lang.String html)
Creates an HTML layout container using the specified HTML template.

Method Summary

SafeHtml	getHTML()
void	setHTML(SafeHtml html)
void	setHTML(java.lang.String html) Sets the HTML template for the layout container.

Methods inherited from class com.sencha.gxt.widget.core.client.container.AbstractHtmlLayoutContainer

add

Methods inherited from class com.sencha.gxt.widget.core.client.container.Container

add, add, addAddHandler, addBeforeAddHandler, addBeforeRemoveHandler, addContainerHandler, addRemoveHandler, clear, disable, enable, findWidget, getItemByItemId, getWidget, getWidgetCount, getWidgetIndex, getWidgetIndex, iterator, remove, remove, remove

Methods inherited from class com.sencha.gxt.widget.core.client.Component

addBeforeHideHandler, addBeforeShowContextMenuHandler, addBeforeShowHandler, addBlurHandler, addDisableHandler, addEnableHandler, addFocusHandler, addHideHandler, addMoveHandler, addResizeHandler, addShowContextMenuHandler, addShowHandler, addStyleOnOver, clearSizeCache, disableEvents, enableEvents, fireEvent, focus, getData, getElement, getFocusSupport, getHideMode, getId, getItemId, getOffsetHeight, getOffsetWidth, getShadow, getStateId, getToolTip, hide, hideToolTip, isAllowTextSelection, isAutoHeight, isAutoWidth, isDeferHeight, isEnabled, isRendered, isStateful, isVisible, isVisible, mask, mask, onBrowserEvent, removeToolTip, setAllowTextSelection, setBorders, setBounds, setBounds, setContextMenu, setData, setDeferHeight, setEnabled, setHeight, setHeight, setHideMode, setId, setItemId, setPagePosition, setPixelSize, setPosition, setShadow, setSize, setStateful, setStateId, setTabIndex, setToolTip, setToolTipConfig, setVisible, setWidth, setWidth, show, sync, syncSize, unmask

Methods inherited from class com.google.gwt.user.client.ui.Widget

addAttachHandler, addBitlessDomHandler, addDomHandler, addHandler, asWidget, asWidgetOrNull, getLayoutData, getParent, isAttached, removeFromParent, setLayoutData, sinkEvents

Methods inherited from class com.google.gwt.user.client.ui.UIObject

addStyleDependentName, addStyleName, ensureDebugId, ensureDebugId, getAbsoluteLeft, getAbsoluteTop, getOffsetHeight, getOffsetWidth, getStyleName, getStylePrimaryName, getTitle, isVisible, removeStyleDependentName, removeStyleName, setStyleDependentName, setStyleName, setStyleName, setStylePrimaryName, setTitle, setVisible, sinkBitlessEvent, toString, unsinkEvents

Methods inherited from class java.lang.Object

equals, getClass, hashCode, notify, notifyAll, wait, wait, wait

Constructor Detail

HtmlLayoutContainer

public HtmlLayoutContainer(SafeHtml html)

Creates an HTML layout container using the specified HTML template.

Parameters:

html - the HTML representation of the layout container

HtmlLayoutContainer

public HtmlLayoutContainer(java.lang.String html)

Creates an HTML layout container using the specified HTML template.

Parameters:

html - the HTML representation of the layout container

Method Detail

getHTML

public SafeHtml getHTML()

setHTML

public void setHTML(SafeHtml html)

setHTML

public void setHTML(java.lang.String html)

Sets the HTML template for the layout container.

Parameters:

html - the HTML template for the layout container