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

java.lang.Object
  extended by com.google.gwt.user.client.ui.UIObject
      extended by com.google.gwt.user.client.ui.Widget
          extended by com.sencha.gxt.widget.core.client.Component
              extended by com.sencha.gxt.widget.core.client.container.Container
                  extended by com.sencha.gxt.widget.core.client.container.AbstractHtmlLayoutContainer
                      extended by com.sencha.gxt.widget.core.client.container.HtmlLayoutContainer
All Implemented Interfaces:
HasAttachHandlers, HasResizeHandlers, HasHandlers, EventListener, 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, 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:

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(String html)
          Creates an HTML layout container using the specified HTML template.
 
Method Summary
 SafeHtml getHTML()
           
 void setHTML(SafeHtml html)
           
 void setHTML(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(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(String html)
Sets the HTML template for the layout container.

Parameters:
html - the HTML template for the layout container


Copyright © 2012. All Rights Reserved.