bundles/org.eclipse.rap.doc/guide/articles/tree-table.html - rap/org.eclipse.rap.tools - Git at Google

 <?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta name="copyright" content="Copyright (c) 2012, 2022 EclipseSource. This page is made available under license. For full details see the LEGAL in the documentation book that contains this page."/>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <title>Tree, Table and the Nebula Grid</title>
   <link rel="stylesheet" href="../../../PRODUCT_PLUGIN/book.css" type="text/css"/>
 </head>
 <body>
   <h1>Tree, Table and the Nebula Grid</h1>
   <h3 id="virtual">SWT Tree/Table</h3>
   <p>
     <em><a href="../reference/api/org/eclipse/swt/widgets/Tree.html">Tree</a></em>
     and
     <em><a href="../reference/api/org/eclipse/swt/widgets/Table.html">Table</a></em>
     are among the most powerful widgets in SWT and RAP.
     Thanks to <a href="#jface">JFace</a> and virtual
     rendering they can easily display vast amounts of data. Any tree/table will only render HTML for the
     items that are currently visible on screen, keeping client memory consumption low and initial
     rendering time short regardless of item count. Also, if the widget (or viewer) is created with a
     <em><a href="../reference/api/org/eclipse/swt/SWT.html#VIRTUAL">VIRTUAL</a></em>
     flag, items can be created lazily. As a result, data that is not (yet) visible will also
     not be transferred to the client. However, you will also experience a small rendering delay
     when scrolling to previously unseen data. You can reduce this effect by
     <a href="#caching">pre-caching</a> some items.
   </p>
   <h3 id="nebula">Nebula Grid</h3>
   <p>
     In addition to the <em>Tree</em> and <em>Table</em> widgets, RAP also includes a port of the
     <a href="http://www.eclipse.org/nebula/widgets/grid/grid.php">Nebula</a>
     <a href="../reference/api/org/eclipse/nebula/widgets/grid/Grid.html"><em>Grid</em></a> and
     it's <a href="../reference/api/org/eclipse/nebula/jface/gridviewer/package-summary.html">JFace
     Viewers</a>.
     (As of RAP 3.0. RAP 2.x compatible ports of the Grid are available in the
     <a href="http://eclipse.org/rap/incubator/">RAP Incubator</a>.)
     The <em>Grid</em> API is very similar to <em>Tree</em> and <em>Table</em>,
     but includes a number of additional features like column grouping,
     checkboxes on multiple columns, variable/automatic item height, and a column footer.
     (Note that for technical reasons the RAP port can only support a subset of the features of the
     original Nebula Grid.)
   </p>
   <p>
     The <em>Grid</em> and it's viewers are placed in separate bundles. To use them you need
     to add a dependency from your project to the <em>org.eclipse.rap.nebula.widgets.grid</em>
     and <em>org.eclipse.rap.nebula.jface.gridviewer</em> Plug-Ins, or to the
     <em>org.eclipse.nebula.widgets.grid</em> and <em>org.eclipse.nebula.jface.gridviewer</em>
     packages.
   </p>

   <h3 id="enhancements">RAP Enhancements</h3>
   <p>
     RAP adds some some significant functionality to <em>Tree</em>, <em>Table</em> and <em>Grid</em>
     not found in their SWT/Nebula counterparts. Like most RAP enhancements, these features are
     <a href="rwt.html#setdata">activated using the <em>setData</em> method</a>. Even when
     using a viewer this can still be done in one line:
   </p>
   <pre class="lang-java">viewer.getTable().setData( RWT.MARKUP_ENABLED, Boolean.TRUE );</pre>
   <p>
     The following is a list of RAP exclusive features supported by
     <em>Tree</em>, <em>Table</em> and/or <em>Grid</em>:
   </p>

     <h3 id="fixedcolumns">Fixed Columns (Tree and Table)</h3>
     <p>
       When a table or tree displays many columns, the user often has to scroll horizontally to see
       specific data.
       Doing so means losing sight of the first columns, which may contain vital information that
       should be visible at all times.
       Using
       <em><a href="../reference/api/org/eclipse/rap/rwt/RWT.html#FIXED_COLUMNS">RWT.FIXED_COLUMNS</a></em>,
       it is possible to exclude any number of leftmost
       columns from scrolling, so that they always stick on the left side of the tree or table.</p>
     <p>
       Example:
     </p>
     <pre class="lang-java">tree.setData( RWT.FIXED_COLUMNS, new Integer( 1 ) );</pre>

     <h3 id="templats">Templates (Tree, Table and Grid)</h3>
     <p>
       Row templates allow developers to customize the way a Table/Tree/Grid present
       items on screen, completely replacing the default column layout.
       A template consists of text and image cells that can be freely arranged.
       These cells can display either data from an item, or static content.
     </p>
     <p>
       <img src="../images/rowtemplate.png" />
     </p>
     <p>
       To create a new template, construct an instance of the
       <em><a href="../reference/api/org/eclipse/rap/rwt/template/Template.html">Template</a></em> class,
       and then add any number of
       <em><a href="../reference/api/org/eclipse/rap/rwt/template/ImageCell.html">ImageCell</a></em> and
       <em><a href="../reference/api/org/eclipse/rap/rwt/template/TextCell.html">TextCell</a></em> instances.
       To apply it,
       <em><a href="../reference/api/org/eclipse/rap/rwt/RWT.html#ROW_TEMPLATE">RWT.ROW_TEMPLATE</a></em> is used:
     </p>
     <pre class="lang-java">Template template = new Template();
 ImageCell imageCell = new ImageCell( template );
 TextCell nameCell = new TextCell( template );
 //... configure cells
 table.setData( RWT.ROW_TEMPLATE, template );</pre>
     <p>
       The call to <em>setData</em> should be placed directly after the controls creation.
       Once a template is applied to a control it will no longer be affected by changes to the template.
       The same template instance can also be applied to multiple controls.
     </p>
     <p>
       To position a cell, you have to set exactly two horizontal and two vertical dimensions
       (two out of left, right and width, and two out of top, bottom and height). The cells are
       positioned relative to the area that is available to display
       the current item - which is usually the inner width of the Tree/Table/Grid widget and the height
       given using <em><a href="../reference/api/org/eclipse/rap/rwt/RWT.html#CUSTOM_ITEM_HEIGHT">RWT.CUSTOM_ITEM_HEIGHT</a></em> or the <em>Grid.setItemHeight</em> method.
       The values for left, top, right and bottom may be absolute (in pixel), relative
       (in percentage), or the sum of both. The values for width and height may only be absolute.
     </p>
     <pre class="lang-java">imageCell.setLeft( 40, 0 ).setWidth( 48 ).setTop( 4 ).setBottom( 33.33f, 4 );</pre>
     <p>
       All cells can by further styled with colors, fonts, alignments, etc.
       Since all setter return the cell instance, chaining the commands as shown
       above is always possible. Note that as of RAP 2.2, the vertical alignment property
       is not supported for text cells, only for image cells.
     </p>
     <p>
       Each cell can either display static content (using
       <em><a href="../reference/api/org/eclipse/rap/rwt/template/TextCell.html#setText-java.lang.String-">setText</a></em> or
       <em><a href="../reference/api/org/eclipse/rap/rwt/template/ImageCell.html#setImage-org.eclipse.swt.graphics.Image-">setImage</a></em>
       on the cell itself), or content form the current Tree/Table/Grid item. For this the cell
       needs to be bound to a specific column using the
       <em><a href="../reference/api/org/eclipse/rap/rwt/template/Cell.html#setBindingIndex-int-">bindingIndex</a></em>. For example, this
       shows only the text from the first column:
     </p>
     <pre class="lang-java">Table table = new Table( parent, SWT.FULL_SELECTION );
 new TableColumn( table, SWT.NONE ); // important
 Template template = new Template();
 TextCell textCell = new TextCell( template );
 textCell.setLeft( 0 ).setRight( 0 ).setTop( 0 ).setBottom( 0 );
 textCell.setBindingIndex( 0 );
 table.setData( RWT.ROW_TEMPLATE, template );
 TableItem item = new TableItem( table, SWT.NONE );
 item.setText( 0, "Data in the first column" );</pre>
     <p>
       Please note that while it is not useful to set the <em>headerVisible</em> property to true if
       row templates are used, it is still necessary to create column objects. They don't need
       a text or width though.
     </p>
     <p>
       Cells can also be
       <a href="../reference/api/org/eclipse/rap/rwt/template/Cell.html#setSelectable-boolean-">selectable</a>.
       When a selectable cell is clicked on,
       it does not select the item, but triggers a selection event with the
       event.detail field set to <em><a href="../reference/api/org/eclipse/rap/rwt/RWT.html#CELL">RWT.CELL</a></em>.
       Items can still be selected by clicking elsewhere, though <strong>the selection is only visible if the
       SWT.FULL_SELECTION style flag is set</strong>.
       If multiple cells in a template are selectable, cells
       <a href="../reference/api/org/eclipse/rap/rwt/template/Cell.html#setName-java.lang.String-">can be given a name</a>
       that is reflected in the <em>event.text</em> field in order to identify the selected cell.
     </p>
     <h3 id="markup">Markup Support (Tree, Table and Grid)</h3>
     <p>
       You can use the <a href="markup.html#markup">markup feature</a> to format the text
       within a cell or embed links and additional images.
       See also <q><a href="markup.html#grid">Markup on List, Tree, Table and Grid</a></q>.
     </p>

     <h3 id="break">Line breaks in Columns (Tree, Table and Grid)</h3>
     <p>
       Unlike SWT, RAP supports line breaks (<q>\n</q>) in a columns text property.
     </p>

     <h3 id="caching">Item Pre-Caching (Tree and Table)</h3>
     <p>
       By default, a <em>VIRTUAL Tree/Table</em> will resolve only items currently on screen. If an unresolved
       item becomes visible, a placeholder (<q>...</q>) will be displayed while data is transferred to the client.
       This can often be avoided by also resolving a number of items above and below the visible area.
       You can set the amount of items to be pre cached using
       <code><a href="../reference/api/org/eclipse/rap/rwt/RWT.html#PRELOADED_ITEMS">RWT.PRELOADED_ITEMS</a></code>.
     </p>

     <h3 id="rendering">Selection/Hover rendering order (Tree, Table and Grid)</h3>
     <p>
       <b>Note:</b><em>Grid</em> uses the theming of <em>Tree</em>, so everything in this section that applies to the Tree also applies to the Grid.
     </p>
     <p>
       Any item and every cell of an item may have a custom background to highlight a specific unit
       of data. In SWT (and RAP, by default), hovering or selecting such an item will completely
       overlay these backgrounds, essentially removing onscreen information. This behavior
       can be configured in RAP using the CSS Theming API. Note that any item that has a background
       set on all cells (or the item itself), will only be identifiable as selected by the text color,
       or not at all (if there is <i>also</i> a custom foreground set).
     </p>
     <p>
      In addition to the
      <em><a href="../reference/theming/Table.html#TableItem">TableItem</a></em> /
      <em><a href="../reference/theming/Tree.html#TreeItem">TreeItem</a></em>
      theming elements, there are also
      <em style="white-space:nowrap;"><a href="../reference/theming/Table.html#Table-RowOverlay">Table-RowOverlay</a></em> /
      <em style="white-space:nowrap;"><a href="../reference/theming/Tree.html#Tree-RowOverlay">Tree-RowOverlay</a></em>
      elements. In the default theme,
      these overlay elements are used to define the hover and selection behavior. If you wish
      for the item backgrounds to paint over the selection/hover effects, you will have to use
      these overlay element to create the effects. (You can also mix, so that hover or selection
      paints over the backgrounds, but not the other.)
     </p>
     <p>
       Assuming you implement a
       <a href="theming.html#custom">complete custom theme</a>,
       this is easy. Simply use <i>only</i> the item element
       to define the effect and define the overlay element as below:
     </p>
     <pre class="lang-css">
 Table-RowOverlay {
   background-color: transparent;
   color: inherit;
   background-image: none;
 }</pre>
     <p>
       If you wish to only make a
       <a href="theming.html#contribution">theme contribution</a>,
       you also need to overwrite every possible
       combination for the overlay element that may be defined in the main/default theme:
     </p>
     <pre class="lang-css">Table-RowOverlay,
 Table-RowOverlay:hover,
 Table-RowOverlay:selected,
 Table-RowOverlay:selected:unfocused,
 Table-RowOverlay:linesvisible:even:hover,
 Table-RowOverlay:linesvisible:even:selected,
 Table-RowOverlay:linesvisible:even:selected:unfocused {
   background-color: transparent;
   color: inherit;
   background-image: none;
 }</pre>
     <p>
       To create the new hover/selection effect you then have to define some or all of these combinations for the
       item element, for example:
     </p>
     <pre class="lang-css">TableItem:hover {
   color: #4a4a4a;
   background-color: #b5b5b5;
   background-image: gradient(
     linear, left top, left bottom,
     from( #ebebeb ),
     to( #d5d5d5 )
   );
 }

 TableItem:selected,
 TableItem:linesvisible:even:selected {
   color: #ffffff;
   background-color: #5882b5;
   background-image: gradient(
     linear, left top, left bottom,
     from( #5882b5 ),
     to( #416693 )
   );
 }</pre>
     <p>
       Alternatively, it's also possible to define semi-transparent background colors for the
       overlay element using the
       <a href="../reference/theming/Properties.html#format/rgba-color">rgba notation</a>.
       This would then create a hover/selection effect
       with the items background color(s) shining through.
     </p>

 </body>
 </html>
	<?xml version="1.0" encoding="UTF-8" ?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta name="copyright" content="Copyright (c) 2012, 2022 EclipseSource. This page is made available under license. For full details see the LEGAL in the documentation book that contains this page."/>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>Tree, Table and the Nebula Grid</title>
	<link rel="stylesheet" href="../../../PRODUCT_PLUGIN/book.css" type="text/css"/>
	</head>
	<body>
	<h1>Tree, Table and the Nebula Grid</h1>
	<h3 id="virtual">SWT Tree/Table</h3>
	<p>
	<em><a href="../reference/api/org/eclipse/swt/widgets/Tree.html">Tree</a></em>
	and
	<em><a href="../reference/api/org/eclipse/swt/widgets/Table.html">Table</a></em>
	are among the most powerful widgets in SWT and RAP.
	Thanks to <a href="#jface">JFace</a> and virtual
	rendering they can easily display vast amounts of data. Any tree/table will only render HTML for the
	items that are currently visible on screen, keeping client memory consumption low and initial
	rendering time short regardless of item count. Also, if the widget (or viewer) is created with a
	<em><a href="../reference/api/org/eclipse/swt/SWT.html#VIRTUAL">VIRTUAL</a></em>
	flag, items can be created lazily. As a result, data that is not (yet) visible will also
	not be transferred to the client. However, you will also experience a small rendering delay
	when scrolling to previously unseen data. You can reduce this effect by
	<a href="#caching">pre-caching</a> some items.
	</p>
	<h3 id="nebula">Nebula Grid</h3>
	<p>
	In addition to the <em>Tree</em> and <em>Table</em> widgets, RAP also includes a port of the
	<a href="http://www.eclipse.org/nebula/widgets/grid/grid.php">Nebula</a>
	<a href="../reference/api/org/eclipse/nebula/widgets/grid/Grid.html"><em>Grid</em></a> and
	it's <a href="../reference/api/org/eclipse/nebula/jface/gridviewer/package-summary.html">JFace
	Viewers</a>.
	(As of RAP 3.0. RAP 2.x compatible ports of the Grid are available in the
	<a href="http://eclipse.org/rap/incubator/">RAP Incubator</a>.)
	The <em>Grid</em> API is very similar to <em>Tree</em> and <em>Table</em>,
	but includes a number of additional features like column grouping,
	checkboxes on multiple columns, variable/automatic item height, and a column footer.
	(Note that for technical reasons the RAP port can only support a subset of the features of the
	original Nebula Grid.)
	</p>
	<p>
	The <em>Grid</em> and it's viewers are placed in separate bundles. To use them you need
	to add a dependency from your project to the <em>org.eclipse.rap.nebula.widgets.grid</em>
	and <em>org.eclipse.rap.nebula.jface.gridviewer</em> Plug-Ins, or to the
	<em>org.eclipse.nebula.widgets.grid</em> and <em>org.eclipse.nebula.jface.gridviewer</em>
	packages.
	</p>

	<h3 id="enhancements">RAP Enhancements</h3>
	<p>
	RAP adds some some significant functionality to <em>Tree</em>, <em>Table</em> and <em>Grid</em>
	not found in their SWT/Nebula counterparts. Like most RAP enhancements, these features are
	<a href="rwt.html#setdata">activated using the <em>setData</em> method</a>. Even when
	using a viewer this can still be done in one line:
	</p>
	<pre class="lang-java">viewer.getTable().setData( RWT.MARKUP_ENABLED, Boolean.TRUE );</pre>
	<p>
	The following is a list of RAP exclusive features supported by
	<em>Tree</em>, <em>Table</em> and/or <em>Grid</em>:
	</p>

	<h3 id="fixedcolumns">Fixed Columns (Tree and Table)</h3>
	<p>
	When a table or tree displays many columns, the user often has to scroll horizontally to see
	specific data.
	Doing so means losing sight of the first columns, which may contain vital information that
	should be visible at all times.
	Using
	<em><a href="../reference/api/org/eclipse/rap/rwt/RWT.html#FIXED_COLUMNS">RWT.FIXED_COLUMNS</a></em>,
	it is possible to exclude any number of leftmost
	columns from scrolling, so that they always stick on the left side of the tree or table.</p>
	<p>
	Example:
	</p>
	<pre class="lang-java">tree.setData( RWT.FIXED_COLUMNS, new Integer( 1 ) );</pre>

	<h3 id="templats">Templates (Tree, Table and Grid)</h3>
	<p>
	Row templates allow developers to customize the way a Table/Tree/Grid present
	items on screen, completely replacing the default column layout.
	A template consists of text and image cells that can be freely arranged.
	These cells can display either data from an item, or static content.
	</p>
	<p>
	<img src="../images/rowtemplate.png" />
	</p>
	<p>
	To create a new template, construct an instance of the
	<em><a href="../reference/api/org/eclipse/rap/rwt/template/Template.html">Template</a></em> class,
	and then add any number of
	<em><a href="../reference/api/org/eclipse/rap/rwt/template/ImageCell.html">ImageCell</a></em> and
	<em><a href="../reference/api/org/eclipse/rap/rwt/template/TextCell.html">TextCell</a></em> instances.
	To apply it,
	<em><a href="../reference/api/org/eclipse/rap/rwt/RWT.html#ROW_TEMPLATE">RWT.ROW_TEMPLATE</a></em> is used:
	</p>
	<pre class="lang-java">Template template = new Template();
	ImageCell imageCell = new ImageCell( template );
	TextCell nameCell = new TextCell( template );
	//... configure cells
	table.setData( RWT.ROW_TEMPLATE, template );</pre>
	<p>
	The call to <em>setData</em> should be placed directly after the controls creation.
	Once a template is applied to a control it will no longer be affected by changes to the template.
	The same template instance can also be applied to multiple controls.
	</p>
	<p>
	To position a cell, you have to set exactly two horizontal and two vertical dimensions
	(two out of left, right and width, and two out of top, bottom and height). The cells are
	positioned relative to the area that is available to display
	the current item - which is usually the inner width of the Tree/Table/Grid widget and the height
	given using <em><a href="../reference/api/org/eclipse/rap/rwt/RWT.html#CUSTOM_ITEM_HEIGHT">RWT.CUSTOM_ITEM_HEIGHT</a></em> or the <em>Grid.setItemHeight</em> method.
	The values for left, top, right and bottom may be absolute (in pixel), relative
	(in percentage), or the sum of both. The values for width and height may only be absolute.
	</p>
	<pre class="lang-java">imageCell.setLeft( 40, 0 ).setWidth( 48 ).setTop( 4 ).setBottom( 33.33f, 4 );</pre>
	<p>
	All cells can by further styled with colors, fonts, alignments, etc.
	Since all setter return the cell instance, chaining the commands as shown
	above is always possible. Note that as of RAP 2.2, the vertical alignment property
	is not supported for text cells, only for image cells.
	</p>
	<p>
	Each cell can either display static content (using
	<em><a href="../reference/api/org/eclipse/rap/rwt/template/TextCell.html#setText-java.lang.String-">setText</a></em> or
	<em><a href="../reference/api/org/eclipse/rap/rwt/template/ImageCell.html#setImage-org.eclipse.swt.graphics.Image-">setImage</a></em>
	on the cell itself), or content form the current Tree/Table/Grid item. For this the cell
	needs to be bound to a specific column using the
	<em><a href="../reference/api/org/eclipse/rap/rwt/template/Cell.html#setBindingIndex-int-">bindingIndex</a></em>. For example, this
	shows only the text from the first column:
	</p>
	<pre class="lang-java">Table table = new Table( parent, SWT.FULL_SELECTION );
	new TableColumn( table, SWT.NONE ); // important
	Template template = new Template();
	TextCell textCell = new TextCell( template );
	textCell.setLeft( 0 ).setRight( 0 ).setTop( 0 ).setBottom( 0 );
	textCell.setBindingIndex( 0 );
	table.setData( RWT.ROW_TEMPLATE, template );
	TableItem item = new TableItem( table, SWT.NONE );
	item.setText( 0, "Data in the first column" );</pre>
	<p>
	Please note that while it is not useful to set the <em>headerVisible</em> property to true if
	row templates are used, it is still necessary to create column objects. They don't need
	a text or width though.
	</p>
	<p>
	Cells can also be
	<a href="../reference/api/org/eclipse/rap/rwt/template/Cell.html#setSelectable-boolean-">selectable</a>.
	When a selectable cell is clicked on,
	it does not select the item, but triggers a selection event with the
	event.detail field set to <em><a href="../reference/api/org/eclipse/rap/rwt/RWT.html#CELL">RWT.CELL</a></em>.
	Items can still be selected by clicking elsewhere, though <strong>the selection is only visible if the
	SWT.FULL_SELECTION style flag is set</strong>.
	If multiple cells in a template are selectable, cells
	<a href="../reference/api/org/eclipse/rap/rwt/template/Cell.html#setName-java.lang.String-">can be given a name</a>
	that is reflected in the <em>event.text</em> field in order to identify the selected cell.
	</p>
	<h3 id="markup">Markup Support (Tree, Table and Grid)</h3>
	<p>
	You can use the <a href="markup.html#markup">markup feature</a> to format the text
	within a cell or embed links and additional images.
	See also <q><a href="markup.html#grid">Markup on List, Tree, Table and Grid</a></q>.
	</p>

	<h3 id="break">Line breaks in Columns (Tree, Table and Grid)</h3>
	<p>
	Unlike SWT, RAP supports line breaks (<q>\n</q>) in a columns text property.
	</p>

	<h3 id="caching">Item Pre-Caching (Tree and Table)</h3>
	<p>
	By default, a <em>VIRTUAL Tree/Table</em> will resolve only items currently on screen. If an unresolved
	item becomes visible, a placeholder (<q>...</q>) will be displayed while data is transferred to the client.
	This can often be avoided by also resolving a number of items above and below the visible area.
	You can set the amount of items to be pre cached using
	<code><a href="../reference/api/org/eclipse/rap/rwt/RWT.html#PRELOADED_ITEMS">RWT.PRELOADED_ITEMS</a></code>.
	</p>

	<h3 id="rendering">Selection/Hover rendering order (Tree, Table and Grid)</h3>
	<p>
	<b>Note:</b><em>Grid</em> uses the theming of <em>Tree</em>, so everything in this section that applies to the Tree also applies to the Grid.
	</p>
	<p>
	Any item and every cell of an item may have a custom background to highlight a specific unit
	of data. In SWT (and RAP, by default), hovering or selecting such an item will completely
	overlay these backgrounds, essentially removing onscreen information. This behavior
	can be configured in RAP using the CSS Theming API. Note that any item that has a background
	set on all cells (or the item itself), will only be identifiable as selected by the text color,
	or not at all (if there is <i>also</i> a custom foreground set).
	</p>
	<p>
	In addition to the
	<em><a href="../reference/theming/Table.html#TableItem">TableItem</a></em> /
	<em><a href="../reference/theming/Tree.html#TreeItem">TreeItem</a></em>
	theming elements, there are also
	<em style="white-space:nowrap;"><a href="../reference/theming/Table.html#Table-RowOverlay">Table-RowOverlay</a></em> /
	<em style="white-space:nowrap;"><a href="../reference/theming/Tree.html#Tree-RowOverlay">Tree-RowOverlay</a></em>
	elements. In the default theme,
	these overlay elements are used to define the hover and selection behavior. If you wish
	for the item backgrounds to paint over the selection/hover effects, you will have to use
	these overlay element to create the effects. (You can also mix, so that hover or selection
	paints over the backgrounds, but not the other.)
	</p>
	<p>
	Assuming you implement a
	<a href="theming.html#custom">complete custom theme</a>,
	this is easy. Simply use <i>only</i> the item element
	to define the effect and define the overlay element as below:
	</p>
	<pre class="lang-css">
	Table-RowOverlay {
	background-color: transparent;
	color: inherit;
	background-image: none;
	}</pre>
	<p>
	If you wish to only make a
	<a href="theming.html#contribution">theme contribution</a>,
	you also need to overwrite every possible
	combination for the overlay element that may be defined in the main/default theme:
	</p>
	<pre class="lang-css">Table-RowOverlay,
	Table-RowOverlay:hover,
	Table-RowOverlay:selected,
	Table-RowOverlay:selected:unfocused,
	Table-RowOverlay:linesvisible:even:hover,
	Table-RowOverlay:linesvisible:even:selected,
	Table-RowOverlay:linesvisible:even:selected:unfocused {
	background-color: transparent;
	color: inherit;
	background-image: none;
	}</pre>
	<p>
	To create the new hover/selection effect you then have to define some or all of these combinations for the
	item element, for example:
	</p>
	<pre class="lang-css">TableItem:hover {
	color: #4a4a4a;
	background-color: #b5b5b5;
	background-image: gradient(
	linear, left top, left bottom,
	from( #ebebeb ),
	to( #d5d5d5 )
	);
	}

	TableItem:selected,
	TableItem:linesvisible:even:selected {
	color: #ffffff;
	background-color: #5882b5;
	background-image: gradient(
	linear, left top, left bottom,
	from( #5882b5 ),
	to( #416693 )
	);
	}</pre>
	<p>
	Alternatively, it's also possible to define semi-transparent background colors for the
	overlay element using the
	<a href="../reference/theming/Properties.html#format/rgba-color">rgba notation</a>.
	This would then create a hover/selection effect
	with the items background color(s) shining through.
	</p>

	</body>
	</html>