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

Class HtmlLayoutContainer

java.lang.Object

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:

HasGestureRecognizers, 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

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

Field Summary

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

adjustSize, allowTextSelection, cacheSizes, disableContextMenu, disabled, disabledStyle, ensureVisibilityOnSizing, height, hidden, lastSize, layer, left, mask, maskMessage, monitorWindowResize, pageX, pageY, resizeHandler, shim, tabIndex, toolTip, toolTipConfig, top, width, windowResizeDelay, windowResizeTask

Constructor Summary

Constructors

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

Method Summary

Modifier and Type	Method and Description
SafeHtml	getHTML()
void	setHTML(SafeHtml html)

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

add, doPhysicalAttach, onAfterFirstAttach

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

add, add, addAddHandler, addBeforeAddHandler, addBeforeRemoveHandler, addContainerHandler, addRemoveHandler, adjustIndex, adopt, checkIndexBoundsForInsertion, clear, disable, doAttachChildren, doDetachChildren, doPhysicalDetach, enable, ensureGroupingHandlerRegistration, findWidget, getChildren, getContainerTarget, getItemByItemId, getWidget, getWidgetCount, getWidgetIndex, getWidgetIndex, insert, iterator, onInsert, onRemove, onWidgetHide, onWidgetShow, orphan, remove, remove, remove

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

addBeforeHideHandler, addBeforeShowContextMenuHandler, addBeforeShowHandler, addBlurHandler, addDisableHandler, addEnableHandler, addFocusHandler, addGestureRecognizer, addHideHandler, addMoveHandler, addResizeHandler, addShowContextMenuHandler, addShowHandler, addStyleDependentName, addStyleOnOver, adjustPosition, adjustSize, applyState, assertAfterRender, assertPreRender, blur, clearSizeCache, disableContextMenu, disableEvents, enableEvents, fireCancellableEvent, fireEvent, focus, getData, getElement, getFocusEl, getFocusSupport, getGestureRecognizer, getGestureRecognizerCount, getHideMode, getId, getItemId, getOffsetHeight, getOffsetWidth, getPositionEl, getShadow, getShadowPosition, getStateId, getTabIndex, getToolTip, hide, hideShadow, hideToolTip, isAllowTextSelection, isAutoHeight, isAutoWidth, isDeferHeight, isEnabled, isMonitorWindowResize, isRendered, isStateful, isVisible, isVisible, mask, mask, notifyHide, notifyShow, onAttach, onBlur, onBrowserEvent, onDetach, onDisable, onEnable, onFocus, onHide, onHideContextMenu, onLoad, onPosition, onResize, onRightClick, onShow, onShowContextMenu, onTouch, onUnload, onWindowResize, removeStyleDependentName, removeStyleOnOver, removeToolTip, setAllowTextSelection, setBorders, setBounds, setBounds, setContextMenu, setData, setDeferHeight, setEnabled, setHeight, setHeight, setHideMode, setId, setItemId, setMonitorWindowResize, setPagePosition, setPixelSize, setPosition, setShadow, setShadowPosition, setSize, setStateful, setStateId, setStyleDependentName, setTabIndex, setToolTip, setToolTipConfig, setVisible, setWidth, setWidth, show, sync, syncSize, unmask

Methods inherited from class java.lang.Object

clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, 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

Method Detail

getHTML

public SafeHtml getHTML()

Overrides:

getHTML in class AbstractHtmlLayoutContainer

setHTML

public void setHTML(SafeHtml html)

Overrides:

setHTML in class AbstractHtmlLayoutContainer