| <div> |
| |
| <h2>New Minimum Requirements</h2> |
| |
| <h3>Browser Versions</h3> |
| |
| <p> |
| The RAP 3.0 web client will support the following browsers: |
| </p> |
| |
| <ul> |
| <li>Internet Explorer 9 and later</li> |
| <li>Google Chrome 29 and later</li> |
| <li>Firefox 23 and later</li> |
| <li>Safari 6 and later</li> |
| <li>Microsoft Edge 1.0 and later</li> |
| <li>Opera 15 and later</li> |
| <li>iOs 6 and later (Safari)</li> |
| <li>Android 4 and later (stock browser |
| (<a href="http://wiki.eclipse.org/RAP/Mobile_Browser">limited)</a> and Chrome)</li> |
| </ul> |
| |
| <p> |
| Dropping support for older browsers allowed us to remove thousands of lines of |
| JavaScript code and to take more advantage of modern HTML5/CSS3 features. |
| RAP also used to enable the so-called quirksmode in HTML in order to avoid glitches in old |
| IE versions. With the end of support for antique browsers, RAP now uses the HTML5 |
| <code><!DOCTYPE html></code> declaration that enables standard mode in all browsers. |
| </p> |
| |
| <p> |
| RAP <em>may</em> continue to work in some of the older browser, but not in Internet Explorer 8. |
| For Windows Vista, IE9 can be manually installed. |
| For Windows 7, IE10 is installed with Service Pack 1 and IE11 can be installed manually. |
| Windows 8 has IE10 as it's default browser, which is upgraded to IE11 with Windows 8.1. |
| If you still target Windows XP, you have to use either Firefox or Google Chrome. |
| </p> |
| |
| <h3>Move to Java 7</h3> |
| |
| <p> |
| As many other Eclipse projects, we decided to raise the minimal execution environment to Java 7. |
| Since Jetty 9 and even some parts of Equinox now depend on Java 7, it became almost impossible |
| to run and test RAP with Java 5. |
| Moving to Java 7 makes our life easier and allows us to make use of some new features. |
| With modern JREs being available even for embedded platforms, so we think that we won't |
| exclude anyone by this move. |
| </p> |
| |
| <p> |
| The Bundle-RequiredExecutionEnvironment (BREE) of all bundles has been updated to <em>JavaSE-1.7</em>. |
| </p> |
| |
| <h2>Application Development</h2> |
| |
| <h3>Removed Deprecated API</h3> |
| |
| <p> |
| Deprecated API has been removed in RAP 3.0. We provide |
| <a href="./migration-guide">migration guide</a> to help you find the proper replacements. |
| </p> |
| |
| <h3>New Client Service to Access Startup Parameters</h3> |
| |
| <p> |
| In RAP 2.x, you could access URL parameters by calling |
| </p> |
| <pre lang="java">RWT.getRequest().getParameter(name); // OLD</pre> |
| <p> |
| The problem with this approach was that it only worked in the first request. |
| Moreover, <code>RWT.getRequest()</code> returns the actual XHR request, not the request that |
| returned the HTML page. That's why using this method in application code is not recommended. |
| </p> |
| <p> |
| Now there is a client service named <code>StartupParameters</code> that provides access to those |
| startup parameters. Since this service interface is also implemented by <code>AbstractEntryPoint</code>, |
| you can access the methods <code>getParameter()</code>, <code>getParameterNames()</code>, |
| and <code>getParameterValues()</code> directly in your entrypoint: |
| </p> |
| |
| <pre lang="java"> |
| public class MyEntryPoint extends AbstractEntryPoint { |
| |
| @Override |
| protected void createContents(Composite parent) { |
| String foo = getParameter("foo"); |
| ... |
| </pre> |
| |
| <h3>New API for Unit Test</h3> |
| |
| <p> |
| When you test your UI components, you have to simulate the environment that RAP UI code |
| normally runs in (including the UI thread, a UISession, ApplicationContext etc.) |
| To do so, we provide the bundle <em>org.eclipse.rap.rwt.testfixture</em>. |
| However, we always claimed that the classes therein were not part the public RAP API. |
| </p> |
| |
| <p> |
| From now on, we provide public API for unit tests in the form of a JUnit Rule. |
| Instead of calling <code>Fixture.setUp()</code> and <code>Fixture.tearDown()</code>, |
| you now only need to include the following line in your test cases. |
| This will simulate a new test context for every test method. |
| There's also no need to fake the <em>PROCESS_ACTION</em> phase anymore. |
| </p> |
| |
| <pre lang="java"> |
| @Rule |
| public TestContext context = new TestContext(); |
| </pre> |
| |
| <p> |
| The class <code>Fixture</code> and all its companions have been moved to the internal package |
| <em>org.eclipse.rap.rwt.testfixture.internal</em>. |
| </p> |
| |
| <h2>Incubator Projects Migrated to RAP Core</h2> |
| |
| <h3>Nebula Grid</h3> |
| |
| <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>. The Nebula Grid also works with RAP specific features such as |
| <em>RWT.MARKUP_ENABLED</em> and <a href="../2.2/">Row Templates</a>. |
| </p> |
| |
| <p> |
| The Grid 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> |
| |
| <h3>FileDialog</h3> |
| |
| <p> |
| The file dialog and file upload components have been moved from the |
| <a href="http://eclipse.org/rap/incubator/">RAP Incubator</a> to the RAP repository. |
| <em>FileDialog</em> supports SWT single-sourcing and can upload multiple files with a clean user interface. |
| It now also support file drag and drop. |
| </p> |
| |
| <p> |
| The <em>FileDialog</em> is located in the <em>org.eclipse.rap.filedialog</em> bundle in the RAP target platform. |
| Older versions of the dialog and upload components for RAP 2.x versions will remain in the Incubator. |
| </p> |
| |
| <h2>Widget Set</h2> |
| |
| <h3>Re-Parenting Support</h3> |
| |
| <p> |
| The method <code>Control.setParent()</code> is now fully implemented and will move a control |
| from one parent to another. To indicate that the re-parenting was successful, the method will |
| return <code>true</code>. We implemented re-parenting in order to better support the E4 UI. |
| </p> |
| |
| <p> |
| Be aware you must not try to replace the parent of a control that is attached to another widget |
| using a <code>setControl()</code> method (e.g. a CoolItem, an ExpandItem, or a ScrolledComposite). |
| Those cases are neither supported by SWT nor by RAP. |
| </p> |
| |
| <h3>Badge support</h3> |
| |
| <p> |
| TabItem, <em>PUSH</em> Button and <em>PUSH</em> ToolItem now support badges. |
| </p> |
| |
| <img class="framed" alt="Badges on TabItems" src="./images/badges.png"/> |
| |
| <p> |
| Those badges can be set using a data key: |
| </p> |
| |
| <pre lang="java">tabItem.setData( RWT.BADGE, "23" );</pre> |
| |
| <p> |
| In TabItem and Button, the badge is overlaying the widget's border and part of the padding/margin areas. |
| The top padding + border + margin need provide enough space to display the badge, or it will be cut off. |
| For ToolItem, the badge is placed within the padding area, overlaying part of the content if necessary. |
| </p> |
| |
| <img class="framed" alt="Badges on Button" src="./images/badges_push.png"/> |
| |
| <h3>Support for GC clipping</h3> |
| |
| <p> |
| Several clipping methods have been implemented: |
| </p> |
| <ul> |
| <li><code>GC.setClipping( Path )</code></li> |
| <li><code>GC.setClipping( Rectangle )</code></li> |
| <li><code>GC.setClipping( int, int, int, int )</code></li> |
| </ul> |
| <p> |
| The implementation utilizes the native HTML canvas clipping capabilities. Once a region is |
| clipped, all future drawing operations will be limited to the clipped region. |
| </p> |
| <p> |
| <img class="framed" title="Clipping" src="images/gc-clipping.png" /> |
| </p> |
| |
| <h3>Markup support for Button and Tree/Table ToolTips</h3> |
| |
| <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> |
| |
| <h3>SWT.RIGHT support for ToolBar</h3> |
| |
| <p> |
| In SWT, the text of a ToolItem is placed below the icon by default. If the parent ToolBar is |
| created with the <code>SWT.RIGHT</code> flag, the text is to the right of the icon. |
| </p> |
| <p> |
| Until now RAP behaved as though <code>SWT.RIGHT</code> was always set on the ToolBar, so it was |
| not possible to have the text below the icon. Now RAP behaves as SWT does. If your |
| application has a ToolBar without <code>SWT.RIGHT</code>, text and icon will no longer be |
| side by side, but on top of each other. |
| </p> |
| |
| <h3>SWT.IMAGE_DISABLE and SWT.IMAGE_GRAY support for Images</h3> |
| <p> |
| It's now possible to create disabled and grayed images at runtime, using the SWT constants <code>IMAGE_DISABLE</code> and <code>IMAGE_GRAY</code>. |
| </p> |
| |
| <pre lang="java"> |
| Image disabled = new Image( display, srcImage, SWT.IMAGE_DISABLE ); |
| Image grayed = new Image( display, srcImage, SWT.IMAGE_GRAY ); |
| </pre> |
| |
| <h2>Theming</h2> |
| |
| <h3>Different borders for different edges</h3> |
| |
| <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> |
| |
| <h3>Hidden Focus Frame</h3> |
| |
| <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> |
| |
| <h3>Modernized Scroll Bars</h3> |
| |
| <p> |
| In the default theme the Scroll Bars now have a more modern look and feel. |
| They are invisible until they are "activated" by the user, which is when the |
| indicators fade-in to a semi-transparent state. |
| </p> |
| |
| <img class="framed" alt="Scrollbars" src="images/scrollbar2.png"/> |
| |
| <p> |
| This is achieved with a number of new theming options. 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>.The <em>opacity</em> property let's you |
| make the entire Scroll Bar (semi) transparent, with the content below visible. In addition, the |
| new <em>active</em> state is used to indicate that the scrollable area is hovered with the mouse, |
| or that the user is scrolling using the keyboard. |
| </p> |
| |
| <p> |
| <b>If you don't like the new look and feel, don't worry.</b> The business theme makes no changes to |
| the Scroll Bars, and by making a <a href="/rap/developers-guide/devguide.php?topic=theming.html#primer">theme-contribution</a> |
| you can easily adjust the opacity for the active and non-active states to be different values |
| (e.g. "1" for both) and/or change the Scroll Bar background from "transparent" back to |
| a solid color. |
| </p> |
| |
| <h3>TabItem theming enhancements</h3> |
| |
| <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> |
| |
| <h3>ToolBar theming enhancements</h3> |
| |
| <p> |
| <code>:first</code> and <code>:last</code> states have been added for ToolItem CSS element. This |
| allows first and last visible ToolItem to have distinct stylings, like different borders. The |
| ToolBar itself now also supports the <code>[VERTICAL]</code> and <code>[FLAT]</code> selectors. |
| </p> |
| |
| <img class="framed" alt="ToolBars with various style flag combinations" src="./images/toolbars.png"/> |
| |
| <p> |
| Exploiting some of the new theming features, the <em>ToolBar</em> has a new default look combining all |
| items to a single visual element. Single items are still distinguishable when hovered with the mouse. The previous |
| look is also still available, simply by setting the <em>SWT.FLAT</em> style flag. |
| This flag is used by default in workbench applications, so these will still look the same. The business theme |
| is also not affected by this change. |
| </p> |
| |
| <h3>Scale theming enhancements</h3> |
| |
| <p> |
| The Scale widget theming has been enhanced with the following CSS properties and states: |
| </p> |
| |
| <ul> |
| <li><code>background-image</code> property for Scale and Scale-Thumb</li> |
| <li><code>HORIZONTAL</code>/<code>VERTICAL</code> selectors for Scale and Scale-Thumb</li> |
| <li><code>hover</code> state for Scale-Thumb</li> |
| </ul> |
| |
| <h3>New Element “Widget-Badge”</h3> |
| |
| <p> |
| To adjust the look of badges (see above), the <em>Widget-Badge</em> element |
| can be used. It currently supports the properties <em>font</em>, <em>color</em>, |
| <em>background-color</em>, <em>border</em> and <em>border-radius</em>. |
| </p> |
| |
| <h3>New property <q>text-overflow</q></h3> |
| |
| <img class="framed" alt="Table items with ellipsis" src="./images/ellipsis.png"/> |
| |
| <p> |
| <em>Table</em> and <em>Tree</em> items (and columns as well) now support the property |
| <em>text-overflow</em>. When set to <em>ellipsis</em>, texts that don't fit into their cell will |
| end with “…” instead of being cut off. |
| The default RAP theme already has this setting. |
| For custom themes, the default value is <em>clip</em>. |
| </p> |
| |
| <h3>New "even" state on Combo Items</h3> |
| |
| <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> |
| |
| <h3>Changes in ProgressBar</h3> |
| |
| <p> |
| The ProgressBar has been partially rewritten to use CSS3 properties instead of vector graphics. |
| As a result, the indicator is now layouted more precisely when the bar is nearly empty or nearly |
| full, but as a side-effect the <em>ProgressBar-Indicator</em> theming no longer supports the |
| <em>border</em> property. It was not used by any of the themes included in RAP, so it won't change |
| how the bar looks by default. |
| </p> |
| |
| <h2>RAP Tools</h2> |
| |
| <h3>Launch RWT application from an ApplicationConfiguration</h3> |
| |
| <p> |
| The RWT Launcher now allows you to run an RWT application from its |
| <em>ApplicationConfiguration</em>. You can do this by specifying the |
| <em>ApplicationConfiguration</em> class in the launcher main tab, from the file/project context |
| menu or directly from the editor. |
| </p> |
| |
| <img class="framed" alt="RWT Launcher" src="./images/rwt_launcher_app_config.png"/> |
| |
| </div> |