Java tutorial
/* * Ext GWT - Ext for GWT * Copyright(c) 2007-2009, Ext JS, LLC. * licensing@extjs.com * * http://extjs.com/license */ package com.extjs.gxt.ui.client.widget; import java.util.List; import com.extjs.gxt.ui.client.Style.SelectionMode; import com.extjs.gxt.ui.client.binder.DataViewBinder; import com.extjs.gxt.ui.client.core.Template; import com.extjs.gxt.ui.client.core.XDOM; import com.extjs.gxt.ui.client.event.BaseEvent; import com.extjs.gxt.ui.client.event.ComponentEvent; import com.extjs.gxt.ui.client.event.ContainerEvent; import com.extjs.gxt.ui.client.event.DataViewEvent; import com.extjs.gxt.ui.client.store.ListStore; import com.extjs.gxt.ui.client.util.Params; import com.extjs.gxt.ui.client.widget.menu.Menu; import com.extjs.gxt.ui.client.widget.selection.AbstractSelectionModel; import com.extjs.gxt.ui.client.widget.selection.Selectable; import com.google.gwt.dom.client.NodeList; import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.Element; import com.google.gwt.user.client.Event; /** * A mechanism for displaying data using custom layout templates. DataView uses * an {@link Template} as its internal templating mechanism. * * <p /> * A {@link #itemSelector} MUST be provided for the DataView to determine what * nodes it will be working with. * * <dl> * <dt><b>Events:</b></dt> * * <dd><b>BeforeAdd</b> : DataViewEvent(view, item, index)<br> * <div>Fires before an item is added or inserted. Listeners can cancel the * action by calling {@link BaseEvent#setCancelled(boolean)}.</div> * <ul> * <li>view : this</li> * <li>item : the item being added</li> * <li>index : the index at which the item will be added</li> * </ul> * </dd> * * <dd><b>BeforeRemove</b> : DataViewEvent(view, item)<br> * <div>Fires before an item is removed. Listeners can cancel the action by * calling {@link BaseEvent#setCancelled(boolean)}.</div> * <ul> * <li>view : this</li> * <li>item : the item being removed</li> * </ul> * </dd> * * <dd><b>Add</b> : DataViewEvent(view, item, index)<br> * <div>Fires after an item has been added or inserted.</div> * <ul> * <li>view : this</li> * <li>item : the item that was added</li> * <li>index : the index at which the item will be added</li> * </ul> * </dd> * * <dd><b>Remove</b> : DataViewEvent(view, item)<br> * <div>Fires after an item has been removed.</div> * <ul> * <li>view : this</li> * <li>item : the item that was removed</li> * </ul> * </dd> * * <dd><b>SelectionChange</b> : DataViewEvent(view, selected)<br> * <div>Fires after the selection changes.</div> * <ul> * <li>view : this</li> * <li>selected : the selected items</li> * </ul> * </dd> * * <dd><b>ContextMenu</b> : DataViewEvent(view)<br> * <div>Fires before the view's context menu is shown. Listeners can cancel the * action by calling {@link BaseEvent#setCancelled(boolean)}.</div> * <ul> * <li>view : this</li> * <li>menu : menu</li> * </ul> * </dd> * </dl> * * <dl> * <dt>Inherited Events:</dt> * <dd>ScrollContainer Scroll</dd> * <dd>BoxComponent Move</dd> * <dd>BoxComponent Resize</dd> * <dd>Component Enable</dd> * <dd>Component Disable</dd> * <dd>Component BeforeHide</dd> * <dd>Component Hide</dd> * <dd>Component BeforeShow</dd> * <dd>Component Show</dd> * <dd>Component Attach</dd> * <dd>Component Detach</dd> * <dd>Component BeforeRender</dd> * <dd>Component Render</dd> * <dd>Component BrowserEvent</dd> * <dd>Component BeforeStateRestore</dd> * <dd>Component StateRestore</dd> * <dd>Component BeforeStateSave</dd> * <dd>Component SaveState</dd> * </dl> * * @deprecated see {@link ListView} */ public class DataView extends ScrollContainer<DataViewItem> implements Selectable<DataViewItem> { /** * Data view selection model. */ public class DataViewSelectionModel extends AbstractSelectionModel<DataView, DataViewItem> { public DataViewSelectionModel() { super(); } public DataViewSelectionModel(SelectionMode mode) { super(mode); } } /** * The view's selection model. */ protected DataViewSelectionModel sm; private String itemSelector = ".x-view-item"; private String selectStyle = "x-view-item-sel"; private String overStyle = "x-view-item-over"; private Template template; private String defaultTemplate = "<div class=x-view-item>{text}</div>"; private DataViewBinder<?> binder; private boolean selectOnHover; private String containerTagName = "div"; /** * Creates a new data view. */ public DataView() { baseStyle = "x-view"; setSelectionMode(SelectionMode.SINGLE); } /** * Creates a new data view with the given template. * * @param template the template */ public DataView(Template template) { this(); this.template = template; } @Override public boolean add(DataViewItem component) { return super.add(component); } /** * Returns the view's binder. Only applies when set * {@link #setStore(ListStore)} is used. * * @return the binder */ public DataViewBinder<?> getBinder() { return binder; } /** * Returns the container's tag name. * * @return the container tag name */ public String getContainerTagName() { return containerTagName; } @Override public Menu getContextMenu() { return super.getContextMenu(); } /** * Returns the default template. * * @return the default template */ public String getDefaultTemplate() { return defaultTemplate; } /** * Returns the item selector. * * @return the selector */ public String getItemSelector() { return itemSelector; } /** * Returns the over style. * * @return the over style */ public String getOverStyle() { return overStyle; } public DataViewItem getSelectedItem() { return (DataViewItem) sm.getSelectedItem(); } public List<DataViewItem> getSelectedItems() { return sm.getSelectedItems(); } /** * Returns the view's selection mode. * * @return the selection mode. */ public SelectionMode getSelectionMode() { return sm.getSelectionMode(); } /** * Returns the view's selection model. * * @return the selection model */ public DataViewSelectionModel getSelectionModel() { return sm; } /** * Returns true if select on hover is enabled. * * @return the select on hover state */ public boolean getSelectOnOver() { return selectOnHover; } /** * Returns the select style. * * @return the select style */ public String getSelectStyle() { return selectStyle; } /** * Returns the view's template. * * @return the template */ public Template getTemplate() { return template; } @Override public boolean insert(DataViewItem item, int index) { boolean added = super.insert(item, index); if (added) { if (rendered) { renderItem(item, index); } } return added; } public void onComponentEvent(ComponentEvent ce) { DataViewItem item = findItem(ce.getTarget()); if (item != null) { switch (ce.getEventTypeInt()) { case Event.ONMOUSEOVER: onMouseOver(item); break; case Event.ONMOUSEOUT: onMouseOut(item); break; } item.onComponentEvent(ce); } } public void onSelectChange(DataViewItem item, boolean select) { item.el().setStyleName(selectStyle, select); } @Override public boolean remove(DataViewItem component) { return super.remove(component); } /** * Sets the container's tag name (defaults to 'div', pre-render). * * @param containerTagName */ public void setContainerTagName(String containerTagName) { assertPreRender(); this.containerTagName = containerTagName; } @Override public void setContextMenu(Menu menu) { super.setContextMenu(menu); } /** * Sets the default template. * * @param defaultTemplate the default template */ public void setDefaultTemplate(String defaultTemplate) { this.defaultTemplate = defaultTemplate; } /** * This is a required setting. A simple CSS selector (e.g. div.some-class or * span:first-child) that will be used to determine what nodes this DataView * will be working with (defaults to 'x-view-item'). * * @param itemSelector the item selector */ public void setItemSelector(String itemSelector) { this.itemSelector = itemSelector; } /** * Sets the style name to be applied on mouse over (defaults to * 'x-view-item-over'). * * @param overStyle the over style */ public void setOverStyle(String overStyle) { this.overStyle = overStyle; } public void setSelectedItem(DataViewItem item) { sm.select(item, false); } public void setSelectedItems(List<DataViewItem> items) { sm.select(items, false); } /** * Sets the list's selection mode. * * @param mode the selection mode */ public void setSelectionMode(SelectionMode mode) { setSelectionModel(new DataViewSelectionModel(mode)); } /** * True to select the item when mousing over a element (defaults to false). * * @param selectOnHover true to select on mouse over */ public void setSelectOnOver(boolean selectOnHover) { this.selectOnHover = selectOnHover; } /** * The style to be applied to each selected item (defaults to * 'x-view-item-sel'). * * @param selectStyle the select style */ public void setSelectStyle(String selectStyle) { this.selectStyle = selectStyle; } /** * Convenience method that create a new {@link DataViewBinder} using the given * store. * * @param store the store */ @SuppressWarnings("unchecked") public void setStore(ListStore store) { binder = new DataViewBinder(this, store); binder.init(); } /** * Sets the view's template. * * @param html the HTML fragment */ public void setTemplate(String html) { setTemplate(new Template(html)); } /** * Sets the view's template. * * @param template the template */ public void setTemplate(Template template) { this.template = template; } protected String bulkRenderItem(DataViewItem item) { return template.applyTemplate(new Params(item.getValues())); } @Override protected ComponentEvent createComponentEvent(Event event) { return new DataViewEvent(this, (event == null) ? null : findItem(DOM.eventGetTarget(event))); } @SuppressWarnings("unchecked") @Override protected ContainerEvent createContainerEvent(DataViewItem item) { return new DataViewEvent(this, item); } protected void onMouseOut(DataViewItem item) { item.el().removeStyleName(overStyle); } protected void onMouseOver(DataViewItem item) { if (el() != null) { if (selectOnHover) { setSelectedItem(item); } else { item.el().addStyleName(overStyle); } } } protected void onRender(Element target, int index) { setElement(DOM.createElement(containerTagName), target, index); setStyleAttribute("overflow", "auto"); renderAll(); el().addEventsSunk(Event.ONCLICK | Event.ONDBLCLICK | Event.MOUSEEVENTS | Event.KEYEVENTS); } protected void renderAll() { if (template == null) { template = new Template(defaultTemplate); } StringBuffer sb = new StringBuffer(); for (DataViewItem item : getItems()) { sb.append(bulkRenderItem(item)); } getElement().setInnerHTML(sb.toString()); NodeList<Element> elems = el().select(itemSelector); for (int i = 0; i < elems.getLength(); i++) { DataViewItem item = getItem(i); item.setElement(elems.getItem(i)); } } protected void renderItem(DataViewItem item, int index) { item.setElement(XDOM.create(template.applyTemplate(new Params(item.getValues())))); el().insertChild(item.getElement(), index); } protected void setSelectionModel(DataViewSelectionModel sm) { assert sm != null; if (this.sm != null) { this.sm.bind(null); } this.sm = sm; sm.bind(this); } }