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.combination;
009:
010: import com.gwtext.client.core.*;
011: import com.gwtext.client.data.*;
012: import com.gwtext.client.util.Format;
013: import com.gwtext.client.widgets.*;
014: import com.gwtext.client.widgets.event.ButtonListenerAdapter;
015: import com.gwtext.client.widgets.form.*;
016: import com.gwtext.client.widgets.grid.*;
017: import com.gwtext.client.widgets.layout.BorderLayout;
018: import com.gwtext.client.widgets.layout.BorderLayoutData;
019: import com.gwtext.client.widgets.layout.FitLayout;
020: import com.gwtext.sample.showcase2.client.ShowcasePanel;
021:
022: public class ChartGeneratorSample extends ShowcasePanel {
023:
024: private Store store;
025: private RecordDef recordDef;
026: private static String CHART_URL_PREFIX = "http://chart.apis.google.com/chart";
027: private FormPanel chartForm;
028:
029: public String getCssUrl() {
030: return "source/combination/ChartGeneratorSample.css.html";
031: }
032:
033: public String getSourceUrl() {
034: return "source/combination/ChartGeneratorSample.java.html";
035: }
036:
037: public Panel getViewPanel() {
038: if (panel == null) {
039:
040: panel = new Panel();
041: panel.setLayout(new FitLayout());
042:
043: Panel mainPanel = new Panel();
044: mainPanel.setLayout(new BorderLayout());
045:
046: //add south region
047: BorderLayoutData southLayoutData = new BorderLayoutData(
048: RegionPosition.SOUTH);
049: southLayoutData.setSplit(true);
050: southLayoutData.setMargins(new Margins(5, 5, 5, 5));
051:
052: final Panel previewPanel = new Panel();
053: previewPanel.setTitle("Preview");
054: previewPanel.setClosable(false);
055: previewPanel.setCollapsible(true);
056: previewPanel.setAutoScroll(true);
057: previewPanel.setHeight(220);
058: previewPanel.setPaddings(5);
059: previewPanel
060: .setHtml("<span id=\"help\">Once you select a type of chart, fill "
061: + "in the required data, and click on the PREVIEW button."
062: + "<br>At that time, a preview of the chat will appear here.</span>");
063:
064: mainPanel.add(previewPanel, southLayoutData);
065:
066: BorderLayoutData centerLayoutData = new BorderLayoutData(
067: RegionPosition.CENTER);
068: centerLayoutData.setMargins(new Margins(5, 5, 5, 0));
069:
070: Panel centerPanel = new Panel();
071: centerPanel.setLayout(new BorderLayout());
072: centerPanel.setTitle("Dion's ChartMaker");
073: centerPanel.addTool(new Tool(Tool.GEAR, new Function() {
074: public void execute() {
075: Panel panel = new Panel();
076: panel
077: .setHtml("<p>This example is based on "
078: + "<a href=\"http://almaer.com/blog/chartmaker-ext-2-ui-on-top-"
079: + "of-the-google-chart-api\" target=\"_blank\">Dion's ChartMaker</a>.<p>"
080: + " <p>"
081: + " - Enter the core settings<br>"
082: + " - Choose the type of chart<br>"
083: + " - Seed Data to get a start, and enter your data<br>"
084: + " - Click on the GET CHART button<br>"
085: + " - Copy the URL for the chart<br>"
086: + " </p>");
087:
088: Window window = new Window();
089: window.setClosable(true);
090: window.setWidth(350);
091: window.setIconCls("paste-icon");
092: window.add(panel);
093: window.setTitle("Chart Maker Help");
094: window.show();
095: }
096: }, "Settings Help"));
097:
098: chartForm = new FormPanel();
099: chartForm.setLabelWidth(40);
100: chartForm.setLabelAlign(Position.RIGHT);
101: chartForm.setWidth(300);
102: chartForm.setPaddings(20);
103: chartForm.setTitle("Chart Poperties");
104: chartForm.add(new TextField("Title", "title", 100,
105: "My Graph"));
106: chartForm.add(new NumberField("Width", "width", 40, 280));
107: chartForm.add(new NumberField("Height", "height", 40, 140));
108: chartForm.add(new TextField("URL", "url", 185));
109:
110: final TabPanel tabPanel = new TabPanel();
111: tabPanel.setActiveTab(0);
112: tabPanel.setResizeTabs(true);
113: tabPanel.setMinTabWidth(115);
114: tabPanel.setTabWidth(135);
115:
116: tabPanel.add(getLineChartPanel());
117: tabPanel.add(getPieChartPanel());
118:
119: centerPanel.add(chartForm, new BorderLayoutData(
120: RegionPosition.WEST));
121: centerPanel.add(tabPanel, new BorderLayoutData(
122: RegionPosition.CENTER));
123:
124: Toolbar toolbar = new Toolbar();
125: toolbar.addFill();
126: ToolbarButton toolbarButton = new ToolbarButton(
127: "Update Chart", new ButtonListenerAdapter() {
128: public void onClick(Button button, EventObject e) {
129: store.commitChanges();
130: String chartURL = ((ChartPanel) tabPanel
131: .getActiveTab()).getChartURL();
132: previewPanel.getBody().update(
133: "<img src =\"" + chartURL + "\"/>");
134: chartForm.getForm().findField("url")
135: .setValue(chartURL);
136: }
137: });
138: toolbarButton.setIconCls("image-icon");
139: toolbar.addButton(toolbarButton);
140:
141: centerPanel.setBottomToolbar(toolbar);
142: mainPanel.add(centerPanel, centerLayoutData);
143: panel.add(mainPanel);
144: }
145: return panel;
146: }
147:
148: private Panel getLineChartPanel() {
149: Panel lineChart = new ChartPanel() {
150: public String getChartURL() {
151: String type = "cht=lc";
152: String size = "chs=" + getChartSize();
153: String title = "chtt=" + getChartTitle();
154: String labels = "chl=";
155: String colors = "chco=";
156: String data = "chd=t:";
157: Record[] records = store.getRecords();
158: for (int i = 0; i < records.length; i++) {
159: Record record = records[i];
160: String sport = record.getAsString("sport");
161: String dataVal = record.getAsString("data");
162: String color = record.getAsString("color");
163: labels += sport + "%7C";
164: colors += color + ",";
165: data += dataVal.replaceAll(" ", ",") + "%7C";
166: }
167: labels = labels.substring(0, labels.length() - 3);
168: data = data.substring(0, data.length() - 3);
169: colors = colors.substring(0, colors.length() - 1);
170:
171: String url = Format.format(
172: "{0}?{1}&{2}&{3}&{4}&{5}&{6}", new String[] {
173: CHART_URL_PREFIX, type, size, title,
174: labels, colors, data });
175: return url;
176: }
177: };
178: lineChart.setTitle("Line Chart");
179: lineChart.setLayout(new FitLayout());
180: lineChart.setPaddings(5);
181: lineChart.setAutoScroll(true);
182: lineChart.setIconCls("line-chart-icon");
183: lineChart.add(getGridPanel());
184: return lineChart;
185: }
186:
187: private Panel getPieChartPanel() {
188: FormPanel formPanel = new FormPanel();
189: formPanel.setLabelWidth(30);
190: formPanel.setPaddings(5);
191: formPanel.setBorder(false);
192: formPanel.setHeight(100);
193:
194: FieldSet fsType = new FieldSet("Type");
195: final Radio typeRadio = new Radio("2D", "type");
196: typeRadio.setChecked(true);
197: fsType.add(typeRadio);
198: fsType.add(new Radio("3D", "type"));
199: fsType.setWidth(150);
200:
201: formPanel.add(fsType);
202:
203: Panel lineChart = new ChartPanel() {
204: public String getChartURL() {
205: String type = "cht=";
206:
207: if (typeRadio.getValue()) {
208: type += "p";
209: } else {
210: type += "p3";
211: }
212: String size = "chs=" + getChartSize();
213: String title = "chtt=" + getChartTitle();
214: String labels = "chl=";
215: String colors = "chco=";
216: String data = "chd=t:";
217: Record[] records = store.getRecords();
218: for (int i = 0; i < records.length; i++) {
219: Record record = records[i];
220: String sport = record.getAsString("sport");
221: String dataVal = record.getAsString("data");
222: String color = record.getAsString("color");
223: labels += sport + "%7C";
224: colors += color + ",";
225: data += dataVal.replaceAll(" ", ",") + "%7C";
226: }
227: labels = labels.substring(0, labels.length() - 3);
228: data = data.substring(0, data.length() - 3);
229: colors = colors.substring(0, colors.length() - 1);
230:
231: String url = Format.format(
232: "{0}?{1}&{2}&{3}&{4}&{5}&{6}", new String[] {
233: CHART_URL_PREFIX, type, size, title,
234: labels, colors, data });
235: return url;
236: }
237: };
238: lineChart.setTitle("Pie Chart");
239: lineChart.setLayout(new BorderLayout());
240: lineChart.setPaddings(5);
241: lineChart.setIconCls("pie-chart-icon");
242: GridPanel gridPanel = getGridPanel();
243:
244: lineChart.add(formPanel, new BorderLayoutData(
245: RegionPosition.NORTH));
246: lineChart.add(gridPanel, new BorderLayoutData(
247: RegionPosition.CENTER));
248:
249: return lineChart;
250: }
251:
252: public GridPanel getGridPanel() {
253: if (recordDef == null) {
254: recordDef = new RecordDef(new FieldDef[] {
255: new StringFieldDef("sport"),
256: new StringFieldDef("data"),
257: new StringFieldDef("color") });
258:
259: ArrayReader reader = new ArrayReader(recordDef);
260: MemoryProxy proxy = new MemoryProxy(
261: new Object[][] {
262: new Object[] { "Soccer", "10 30 50 70",
263: "ff0000" },
264: new Object[] { "Cricket", "20 20 20 20",
265: "00ff00" },
266: new Object[] { "Rugby", "50 40 30 20",
267: "0000ff" } });
268: store = new Store(proxy, reader);
269: store.load();
270: }
271:
272: final EditorGridPanel grid = new EditorGridPanel();
273: grid.setStripeRows(true);
274: grid.setStore(store);
275:
276: ColumnConfig sportConfig = new ColumnConfig("Sport", "sport",
277: 150);
278: sportConfig.setEditor(new GridEditor(new TextField()));
279:
280: ColumnConfig dataConfig = new ColumnConfig("Data", "data", 150);
281: dataConfig.setEditor(new GridEditor(new TextField()));
282:
283: ColumnConfig colorConfig = new ColumnConfig("Color", "color",
284: 100);
285: colorConfig.setEditor(new GridEditor(new TextField()));
286:
287: ColumnModel columnModel = new ColumnModel(new ColumnConfig[] {
288: sportConfig, dataConfig, colorConfig });
289: grid.setColumnModel(columnModel);
290:
291: GridView view = new GridView();
292: view.setForceFit(true);
293: grid.setView(view);
294:
295: Toolbar toolbar = new Toolbar();
296: toolbar.addFill();
297: ToolbarButton toolbarButton = new ToolbarButton("Add Data",
298: new ButtonListenerAdapter() {
299: public void onClick(Button button, EventObject e) {
300: Record record = recordDef
301: .createRecord(new Object[] {
302: "My Sport", "5 30 18 25",
303: "0000ff" });
304: store.insert(0, record);
305: grid.startEditing(0, 0);
306: }
307: });
308: toolbarButton.setIconCls("add-icon");
309: toolbar.addButton(toolbarButton);
310: grid.setTopToolbar(toolbar);
311:
312: return grid;
313: }
314:
315: private String getChartSize() {
316: Form form = chartForm.getForm();
317: String width = form.findField("width").getValueAsString();
318: String height = form.findField("height").getValueAsString();
319: return width + "x" + height;
320: }
321:
322: private String getChartTitle() {
323: Form form = chartForm.getForm();
324: return form.findField("title").getValueAsString();
325: }
326: }
327:
328: abstract class ChartPanel extends Panel {
329:
330: public abstract String getChartURL();
331: }
|