StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can use a Vaadin Table to solve the original problem, more or less like this. The trick is to create a Vaadin Container and put components in it, as data. On the text side, wrap a label in VerticalLayout then add a click listener. This yields the ability to display "paragraphs" of XHTML text, detect clicks on them with relative locations, and still be able to handle large numbers of paragraphs.</p> <p>You might need to modify your styles.css to allow wrapping of text within a table row, so you'll get ragged rows.</p> <pre><code>package com.soletta.clickytable; import com.vaadin.Application; import com.vaadin.data.util.IndexedContainer; import com.vaadin.event.LayoutEvents.LayoutClickEvent; import com.vaadin.event.LayoutEvents.LayoutClickListener; import com.vaadin.terminal.Sizeable; import com.vaadin.terminal.gwt.server.WebApplicationContext; import com.vaadin.ui.Button; import com.vaadin.ui.Label; import com.vaadin.ui.Table; import com.vaadin.ui.VerticalLayout; import com.vaadin.ui.Window; import com.vaadin.ui.Window.CloseEvent; import com.vaadin.ui.Window.CloseListener; public class ClickytableApplication extends Application { @Override public void init() { Window mainWindow = new Window("Clickytable 2 Application"); setMainWindow(mainWindow); mainWindow.addListener(new CloseListener(){ public void windowClose(CloseEvent e) { WebApplicationContext context = (WebApplicationContext) getContext(); context.getHttpSession().invalidate(); close(); }}); IndexedContainer container = new IndexedContainer(); container.addContainerProperty("text", VerticalLayout.class, new VerticalLayout()); container.addContainerProperty("edit", Button.class, new Button("Edit")); for (int i = 0; i < 10; i++) { final int index = i; Object item = container.addItem(); Label lbl = new Label("Text Content " + i); VerticalLayout vl = new VerticalLayout(); vl.setWidth(100, Sizeable.UNITS_PERCENTAGE); vl.addComponent(lbl); vl.addListener(new LayoutClickListener() { public void layoutClick(LayoutClickEvent event) { System.out.println(String.format("Clicked on text %,d at client(%,d,%,d), relative(%,d %,d)\n", index, event.getClientX(), event.getClientY(), event.getRelativeX(), event.getRelativeY())); } }); container.getItem(item).getItemProperty("text").setValue(vl); container.getItem(item).getItemProperty("edit").setValue(new Button("Button " + i)); } Table table = new Table("ClickyTable 2", container); table.setColumnExpandRatio("text", 1); table.setColumnExpandRatio("edit", 0); table.setSizeFull(); VerticalLayout fl = new VerticalLayout(); fl.setSizeFull(); fl.addComponent(table); mainWindow.setContent(fl); } } </code></pre> <p>With some style changes in place, the result can look something like this:</p> <p><a href="http://www.soletta.com/images/ClickyTable.PNG" rel="nofollow noreferrer">ClickTable Screen Shot http://www.soletta.com/images/ClickyTable.PNG</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload