blob: 3a89fa5751210f30e76ac72b6dee6953faf58c7f [file] [log] [blame]
<div>
<h2>Nebula Grid migrated to RAP Core</h2>
<p>
The RAP port of the <a href="http://eclipse.org/nebula/widgets/grid/grid.php">Nebula Grid</a>
(including <em>GridViewer</em>) has been moved from the
<a href="http://eclipse.org/rap/incubator/">RAP Incubator</a> to the RAP repository.
It supports a subset of the API from the Grid found in the
<a href="http://eclipse.org/nebula/">Nebula Release</a>, now also including
<em>setAutoHeight</em>.
</p>
<p>
<img class="framed" alt="AutoHeight" src="./images/nebula2.gif"/><br/>
<em>Resizing a column with AutoHeight and WordWrap enabled</em><br/><br/>
</p>
<p>
The Nebula Grid also works with <em>RWT.MARKUP_ENABLED</em>. It is included in the RAP target
platform and can be used simply by importing the <em>org.eclipse.nebula.widgets.grid</em>
package, making it single-sourcing capable. The Nebula Grid ports for RAP 2.x versions will
remain in the Incubator.
</p>
<ul>
<li><b>Why the Grid instead of the NatTable?</b><br/>
The Nebula Grid API is by it's nature much better suited for the RAP architecture than
the NatTable. The Grid is also closer to the SWT Table and Tree, allowing us to use the
same mature JavaScript code for all three widgets.
</li>
</ul>
<h2>Markup support for Button and Tree/Table ToolTips</h2>
<p>
The <em>Button</em> widget now supports <em>RWT.MARKUP_ENABLED</em>, allowing you to
use an HTML subset in it's text. Also, Tree and Table now fully support
<em>RWT.TOOLTIP_MARKUP_ENABLED</em>. This was previously not the case if
the tooltip text was provided by a <em>ColumnViewer</em>.
</p>
<h2>Different styling for border edges</h2>
<p>
Until now every edge of a widget in RAP had to have the same border width, style and color.
Now every widget that supports the <em>border</em> shorthand property also supports the
four properties <em>border-left</em>, <em>border-right</em>, <em>border-bottom</em> and
<em>border-top</em>. This enables a number of new design choices, like visually merging
neighbouring widgets.
</p>
<p>
<img class="framed" alt="Merged buttons" src="./images/border.jpg"/><br/>
</p>
<p>
In this case a <em>RowLayout</em> was used with <em>spacing</em> set to 0 and the following
<a href="http://eclipse.org/rap/developers-guide/devguide.php?topic=theming.html#variants">
custom variants</a>:
</p>
<pre lang="css">Button[PUSH].left {
border-radius: 2px 0px 0px 2px;
border-right: none;
}
Button[PUSH].middle {
border-radius: 0px;
border-left: none;
border-right: none;
}
Button[PUSH].right {
border-radius: 0px 2px 2px 0px;
border-left: none;
}</pre>
<p>
The <em>Control.getBorderWidth()</em> method will from now on return the biggest width of the
widgets four edges.
</p>
<h2>Hidden ScrollBar Buttons</h2>
<p>
The up/down and left/right buttons of scroll bars can now be hidden by setting the
<em>background-image</em> property of <em>ScrollBar-UpButton</em> and
<em>ScrollBar-DownButton</em> to <em>none</em>. This is the case in the default theme.
Further theming enhancements on the ScrollBar are planned for M3.
</p>
<p>
<img class="framed" alt="Scrollbar" src="./images/scrollbar.jpg"/><br/>
</p>
<h2>Hidden Focus Frame</h2>
<p>
The focus frame (represented in the theming by <em>Button-FocusIndicator</em>,
<em>Combo-FocusIndicator</em> and <em>FileUpload-FocusIndicator</em>) will no longer be
visible if the widget is focused by the mouse. Like in MS Windows, it will only be visible when
focused using the keyboard.
</p>
<h2>TabItem theming enhancements</h2>
<p>
The TabItem has several new theming properties:
</p>
<ul>
<li><em>border</em></li>
<li><em>color</em></li>
<li><em>background-position</em></li>
<li><em>background-repeat</em></li>
<li><em>margin</em></li>
</ul>
<p>
Since <em>border</em> now also allows styling the different edges of the widget, the following
properties have been removed:
</p>
<ul>
<li><em>border-top-color</em></li>
<li><em>border-bottom-color</em></li>
</ul>
<p>
There is also a new state on <em>TabItem</em> that the item is a child of <em>TabFolder</em>
with the <em>SWT.BOTTOM</em> style flag:
</p>
<ul>
<li><em>bottom</em></li>
</ul>
<h2>New "even" state on Combo Items</h2>
<p>
The <em>Combo-List</em> now has an <em>even</em> state, allowing the <em>Combo</em> drop-down
to have alternating background colors.
</p>
</div>