| <div> |
| |
| <h2>Widget Set</h2> |
| |
| <h3>Row Templates</h3> |
| |
| <p> |
| We introduced row templates, a new feature that allows you replace the column layout model of |
| a table with a custom presentation. |
| Templates consist of cells that can be freely arranged. |
| A cell can display a text or an image from the table item, but also static content. |
| </p> |
| <p> |
| <img class="framed" alt="A table with row template" src="./images/row-template.png"/> |
| </p> |
| To position a cell, you have to set exactly two horizontal and two vertical dimensions |
| (two out of <em>left</em>, <em>right</em>, and <em>width</em> and two out of <em>top</em>, |
| <em>bottom</em>, and <em>height</em>). |
| Here's a code example that creates a template with two cells: |
| <p> |
| </p> |
| <pre class="lang-java"> |
| Template template = new Template(); |
| |
| ImageCell imageCell = new ImageCell( template ); |
| imageCell.setBindingIndex( 0 ); // bind to image from column 0 |
| imageCell.setTop( 4 ).setLeft( 4 ).setWidth( 48 ).setHeight( 48 ); |
| |
| TextCell nameCell = new TextCell( template ); |
| nameCell.setBindingindex( 1 ); // display text from column 1 |
| nameCell.setLeft( 60 ).setWidth( 180 ).setTop( 30 ).setBottom( 8 ); |
| nameCell.setHorizontalAlignment( SWT.LEFT ); // left-align the text in this cell |
| nameCell.setFont( font ); |
| ... |
| </pre> |
| <p> |
| Cells can also be selectable. |
| When a selectable cell is clicked on, this click does not select the item, but triggers a |
| selection event with the <code>event.detail</code> field set to <code>RWT.CELL</code>. |
| If multiple cells in a template are selectable, cells can be given a name that is reflected |
| in the <code>event.text</code> field in order to identify the selected cell. |
| </p> |
| <p> |
| To apply a row template on a Table or a Tree, use the <code>setData()</code> method with the |
| new constant <code>RWT.ROW_TEMPLATE</code> as key: |
| </p> |
| <pre class="lang-java"> |
| Table table = new Table( parent, SWT.FULL_SELECTION ); |
| // Add as many columns as needed to add multiple texts/images to items |
| new TableColumn(); |
| ... |
| table.setData( RWT.ROW_TEMPLATE, template ); |
| </pre> |
| <p> |
| The call to <code>setData()</code> must be placed directly after the control's creation. Once a |
| template is applied to a control, the control will not be affected by changes to the template. |
| </p> |
| <p> |
| Row templates are currently supported by Tree and Table. |
| We expect that this approach will be useful also in other contexts in the future. |
| </p> |
| |
| <h3>Markup Support for ToolTips</h3> |
| |
| <p> |
| The <em>ToolTipText</em> property and the <em>ToolTip</em> widget now support |
| markup. To enable tooltip markup for on any widget with a <em>setToolTipText</em> method, |
| use the <em>RWT.TOOLTIP_MARKUP_ENABLED</em> constant like this: |
| </p> |
| <pre class="lang-java">widget.setData( RWT.TOOLTIP_MARKUP_ENABLED, Boolean.TRUE ); |
| widget.setToolTipText( "This is a tooltip<br/><i>with</i> <b>some</b> <big>markup</big>" ); |
| </pre> |
| <img src="./images/tooltip-markup.png"/> |
| <p> |
| For the <em>ToolTip</em> widget, the API is the same as it is for other |
| widget: <code class="lang-java">toolTip.setData( RWT.MARKUP_ENABLED, Boolean.TRUE );</code> |
| </p> |
| |
| <h3>Ability to specify number of pre-loaded items in virtual Tree/Table</h3> |
| |
| <p> |
| To improve the responsiveness of a virtual Tree or Table, we introduced the possibility to |
| specify a number of items to be pre-loaded by the client. |
| When scrolling the table in small steps, pre-loaded items will appear immediately. Example: |
| </p> |
| <pre class="lang-java"> |
| Table table = new Table( parent, SWT.VIRTUAL ); |
| table.setData( RWT.PRELOADED_ITEMS, new Integer( 10 ) ); |
| </pre> |
| <p> |
| With the snippet above, in addition to visible items in the Tree/Table client area, another 10 |
| items (above and below) will be resolved and sent to the client. |
| </p> |
| |
| <h2>Theming</h2> |
| |
| <h3>Horizontal Alignment for ToolTips</h3> |
| |
| <p>It is now possible to set the horizontal alignment for texts in tooltips.</p> |
| <pre class="lang-css">Widget-ToolTip { |
| text-align: left; |
| }</pre> |
| <p> |
| Since tooltips are only as wide as their content, this only has a visible effect if the tooltip |
| has a newline in it, e.g.: |
| </p> |
| <pre class="lang-java">widget.setToolTipText( "This has a \n new line" ); </pre> |
| |
| </div> |