001: /*
002: * GWT-Ext Widget Library
003: * Copyright(c) 2007-2008, GWT-Ext.
004: * licensing@gwt-ext.com
005: *
006: * http://www.gwt-ext.com/license
007: */
008: package com.gwtext.sample.showcase2.client.view;
009:
010: import com.google.gwt.user.client.Element;
011: import com.gwtext.client.core.EventObject;
012: import com.gwtext.client.core.XTemplate;
013: import com.gwtext.client.data.*;
014: import com.gwtext.client.util.Format;
015: import com.gwtext.client.widgets.DataView;
016: import com.gwtext.client.widgets.Panel;
017: import com.gwtext.client.widgets.event.DataViewListenerAdapter;
018: import com.gwtext.client.widgets.layout.FitLayout;
019: import com.gwtext.sample.showcase2.client.ShowcasePanel;
020:
021: public class DataViewSample extends ShowcasePanel {
022:
023: public String getSourceUrl() {
024: return "source/view/DataViewSample.java.html";
025: }
026:
027: public String getCssUrl() {
028: return "source/view/DataViewSample.css.html";
029: }
030:
031: public Panel getViewPanel() {
032: if (panel == null) {
033: panel = new Panel();
034:
035: MemoryProxy dataProxy = new MemoryProxy(getData());
036: RecordDef recordDef = new RecordDef(new FieldDef[] {
037: new StringFieldDef("name"),
038: new IntegerFieldDef("size"),
039: new DateFieldDef("lastmod", "timestamp"),
040: new StringFieldDef("url") });
041:
042: ArrayReader reader = new ArrayReader(recordDef);
043:
044: //for loading from json data
045: //JsonStore store = new JsonStore("data/images.json", "images", recordDef);
046: //store.load();
047:
048: //or
049:
050: //HttpProxy dataProxy = new HttpProxy("data/images.json");
051: //JsonReader reader = new JsonReader("images", recordDef);
052:
053: final Store store = new Store(dataProxy, reader, true);
054: store.load();
055:
056: XTemplate template = new XTemplate(
057: new String[] {
058: "<tpl for='.'>",
059: "<div class='thumb-wrap'>",
060: "<div class='thumb'><img src='{url}' ext:qtip='{name}'></div>",
061: "<span class='x-editable' ext:qtip='{name}'>{shortName}</span></div>",
062: "</tpl>", "<div class='x-clear'></div>" });
063:
064: Panel inner = new Panel();
065: inner.setWidth(535);
066: inner.setId("images-view");
067: inner.setFrame(true);
068: inner.setAutoHeight(true);
069: inner.setCollapsible(true);
070: inner.setLayout(new FitLayout());
071: inner.setTitle("Simple DataView");
072:
073: DataView dataView = new DataView("div.thumb-wrap") {
074: public void prepareData(Data data) {
075: data.setProperty("shortName", Format.ellipsis(data
076: .getProperty("name"), 15));
077: }
078: };
079: dataView.setWidth(535);
080:
081: dataView.addListener(new DataViewListenerAdapter() {
082: public boolean doBeforeClick(DataView source,
083: int index, Element node, EventObject e) {
084:
085: log(EVENT, "doBeforeClick::"
086: + getSelectedMovies(source));
087: return true;
088: }
089:
090: public boolean doBeforeSelect(DataView source,
091: Element node, Element[] selections) {
092: log(EVENT, "doBeforeSelect::"
093: + getSelectedMovies(source));
094: return super .doBeforeSelect(source, node,
095: selections);
096: }
097:
098: public void onClick(DataView source, int index,
099: Element node, EventObject e) {
100: log(EVENT, "onClick::" + getSelectedMovies(source));
101: super .onClick(source, index, node, e);
102: }
103:
104: public void onContainerClick(DataView source,
105: EventObject e) {
106: log(EVENT, "onContainerClick");
107: super .onContainerClick(source, e);
108: }
109:
110: public void onContextMenu(DataView source, int index,
111: Element node, EventObject e) {
112: log(EVENT, "onContextMenu");
113: super .onContextMenu(source, index, node, e);
114: }
115:
116: public void onDblClick(DataView source, int index,
117: Element node, EventObject e) {
118: log(EVENT, "onDblClick");
119: super .onDblClick(source, index, node, e);
120: }
121:
122: public void onSelectionChange(DataView view,
123: Element[] selections) {
124: log(EVENT, "onSelectionChange");
125: super .onSelectionChange(view, selections);
126: }
127: });
128:
129: dataView.setStore(store);
130: dataView.setTpl(template);
131: dataView.setAutoHeight(true);
132: dataView.setMultiSelect(true);
133: dataView.setOverCls("x-view-over");
134: dataView.setEmptyText("No Images to display");
135:
136: inner.add(dataView);
137:
138: panel.add(inner);
139: }
140: return panel;
141: }
142:
143: protected boolean showEvents() {
144: return true;
145: }
146:
147: private String getSelectedMovies(DataView view) {
148: Record[] records = view.getSelectedRecords();
149: String msg = "";
150: for (int i = 0; i < records.length; i++) {
151: Record record = records[i];
152: msg += record.getAsString("name") + " ";
153: }
154: return msg;
155: }
156:
157: private Object[][] getData() {
158: return new Object[][] {
159: new Object[] { "Pirates of the Caribbean",
160: new Integer(2120), new Long(1180231870000l),
161: "images/view/carribean.jpg" },
162: new Object[] { "Resident Evil", new Integer(2120),
163: new Long(1180231870000l),
164: "images/view/resident_evil.jpg" },
165: new Object[] { "Blood Diamond", new Integer(2120),
166: new Long(1180231870000l),
167: "images/view/blood_diamond.jpg" },
168: new Object[] { "No Reservations", new Integer(2120),
169: new Long(1180231870000l),
170: "images/view/no_reservations.jpg" },
171: new Object[] { "Casino Royale", new Integer(2120),
172: new Long(1180231870000l),
173: "images/view/casino_royale.jpg" },
174: new Object[] { "Good Shepherd", new Integer(2120),
175: new Long(1180231870000l),
176: "images/view/good_shepherd.jpg" },
177: new Object[] { "Ghost Rider", new Integer(2120),
178: new Long(1180231870000l),
179: "images/view/ghost_rider.jpg" },
180: new Object[] { "Batman Begins", new Integer(2120),
181: new Long(1180231870000l),
182: "images/view/batman_begins.jpg" },
183: new Object[] { "Last Samurai", new Integer(2120),
184: new Long(1180231870000l),
185: "images/view/last_samurai.jpg" },
186: new Object[] { "Italian Job", new Integer(2120),
187: new Long(1180231870000l),
188: "images/view/italian_job.jpg" },
189: new Object[] { "Mission Impossible III",
190: new Integer(2120), new Long(1180231870000l),
191: "images/view/mi3.jpg" },
192: new Object[] { "Mr & Mrs Smith", new Integer(2120),
193: new Long(1180231870000l),
194: "images/view/smith.jpg" },
195: new Object[] { "Inside Man", new Integer(2120),
196: new Long(1180231870000l),
197: "images/view/inside_man.jpg" },
198: new Object[] { "The Island", new Integer(2120),
199: new Long(1180231870000l),
200: "images/view/island.jpg" } };
201: }
202:
203: public String getIntro() {
204: return "<p>This example demonstrates the use of the DataView class. DataView is a very powerful class yet easy to use.</p>"
205: + "<p>You essentially pass DataView a Store, and a template on how to render a given Store record and it does the rest. "
206: + "It is important to note that the output of DataView is not just static html, but a control that is backed by a rich event model"
207: + " giving you complete control over that actions you want to carry when, say, a given item is clicked.</p>";
208: }
209: }
|