Tiled views can be connected to editors. (Smart GWT)
/* * SmartGWT (GWT for SmartClient) * Copyright 2008 and beyond, Isomorphic Software, Inc. * * SmartGWT is free software; you can redistribute it and/or modify it * under the terms of the GNU Lesser General Public License version 3 * as published by the Free Software Foundation. SmartGWT is also * available under typical commercial license terms - see * http://smartclient.com/license * This software is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. */ package com.smartgwt.sample.showcase.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.RootPanel; import com.smartgwt.client.data.DSCallback; import com.smartgwt.client.data.DSRequest; import com.smartgwt.client.data.DSResponse; import com.smartgwt.client.data.DataSource; import com.smartgwt.client.data.fields.DataSourceImageField; import com.smartgwt.client.data.fields.DataSourceIntegerField; import com.smartgwt.client.data.fields.DataSourceTextField; import com.smartgwt.client.types.SelectionStyle; import com.smartgwt.client.widgets.Canvas; import com.smartgwt.client.widgets.IButton; import com.smartgwt.client.widgets.events.ClickEvent; import com.smartgwt.client.widgets.events.ClickHandler; import com.smartgwt.client.widgets.form.DynamicForm; import com.smartgwt.client.widgets.form.fields.SelectItem; import com.smartgwt.client.widgets.form.fields.TextItem; import com.smartgwt.client.widgets.layout.HLayout; import com.smartgwt.client.widgets.layout.VStack; import com.smartgwt.client.widgets.tile.TileGrid; import com.smartgwt.client.widgets.tile.events.RecordClickEvent; import com.smartgwt.client.widgets.tile.events.RecordClickHandler; import com.smartgwt.client.widgets.viewer.CellStyleHandler; import com.smartgwt.client.widgets.viewer.DetailFormatter; import com.smartgwt.client.widgets.viewer.DetailViewerField; import com.smartgwt.client.widgets.viewer.DetailViewerRecord; public class Showcase implements EntryPoint { public void onModuleLoad() { RootPanel.get().add(getViewPanel()); } public Canvas getViewPanel() { VStack vStack = new VStack(20); vStack.setWidth100(); final TileGrid tileGrid = new TileGrid(); tileGrid.setTileWidth(150); tileGrid.setTileHeight(205); tileGrid.setHeight(400); tileGrid.setSelectionType(SelectionStyle.SINGLE); tileGrid.setShowAllRecords(true); tileGrid.setDataSource(AnimalXmlDS.getInstance()); tileGrid.setAnimateTileChange(true); DetailViewerField pictureField = new DetailViewerField("picture"); DetailViewerField commonNameField = new DetailViewerField("commonName"); commonNameField.setCellStyle("commonName"); DetailViewerField lifeSpanField = new DetailViewerField("lifeSpan"); lifeSpanField.setCellStyle("lifeSpan"); lifeSpanField.setDetailFormatter(new DetailFormatter() { public String format(Object value, DetailViewerRecord record, DetailViewerField field) { return "Lifespan: " + value; } }); DetailViewerField statusField = new DetailViewerField("status"); statusField.setCellStyleHandler(new CellStyleHandler() { public String execute(Object value, DetailViewerField field, DetailViewerRecord record) { if ("Endangered".equals(value)) { return "endangered"; } else if ("Threatened".equals(value)) { return "threatened"; } else if ("Not Endangered".equals(value)) { return "notEndangered"; } else { return null; } } }); tileGrid.setFields(pictureField, commonNameField, lifeSpanField, statusField); vStack.addMember(tileGrid); final DynamicForm boundForm = new DynamicForm(); boundForm.setNumCols(6); boundForm.setDataSource(AnimalXmlDS.getInstance()); boundForm.setAutoFocus(false); TextItem commonNameItem = new TextItem("commonName"); TextItem lifeSpanItem = new TextItem("lifeSpan"); SelectItem statusItem = new SelectItem("status"); boundForm.setFields(commonNameItem, lifeSpanItem, statusItem); vStack.addMember(boundForm); tileGrid.addRecordClickHandler(new RecordClickHandler() { public void onRecordClick(RecordClickEvent event) { boundForm.editRecord(event.getRecord()); } }); HLayout hLayout = new HLayout(10); hLayout.setHeight(22); IButton button = new IButton("Save"); button.setAutoFit(true); button.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { boundForm.saveData(); boundForm.clearValues(); } }); hLayout.addMember(button); vStack.addMember(hLayout); tileGrid.fetchData(null, new DSCallback() { public void execute(DSResponse response, Object rawData, DSRequest request) { tileGrid.sortByProperty("lifeSpan", true); } }); return vStack; } } class AnimalXmlDS extends DataSource { private static AnimalXmlDS instance = null; public static AnimalXmlDS getInstance() { if (instance == null) { instance = new AnimalXmlDS("animalDS"); } return instance; } public AnimalXmlDS(String id) { setID(id); setRecordXPath("/List/Object"); DataSourceTextField commonNameField = new DataSourceTextField("commonName", "Animal"); DataSourceTextField scientificName = new DataSourceTextField("scientificName", "Scientific Name"); scientificName.setRequired(true); scientificName.setPrimaryKey(true); DataSourceIntegerField lifeSpanField = new DataSourceIntegerField("lifeSpan", "Life Span"); DataSourceTextField statusField = new DataSourceTextField("status", "Endangered Status"); statusField.setValueMap("Threatened", "Endangered", "Not Endangered", "Not currently listed", "May become threatened", "Protected"); DataSourceTextField dietField = new DataSourceTextField("diet", "Diet"); DataSourceTextField infoField = new DataSourceTextField("information", "Interesting Facts"); infoField.setLength(1000); DataSourceImageField pictureField = new DataSourceImageField("picture", "Picture"); pictureField.setImageURLPrefix("animals/"); setFields(commonNameField, scientificName, lifeSpanField, statusField, dietField, infoField, pictureField); setDataURL("ds/test_data/animals.data.xml"); setClientOnly(true); } protected Object transformRequest(DSRequest dsRequest) { return super.transformRequest(dsRequest); } }