How to use multiple browser tabs in your RAP 2.1 Application
May 10, 2013 | 2 min ReadYou can now download RAP 2.1 M2, the final milestone of RAP before the 2.1 (Kepler) release in June.
This milstone adds quite a few nice features like bézier curves for Canvas, background-position and -repeat for CSS theming, and (especially) improved multi-tab browsing: It is now possible to host multiple UI-Sessions within the same HTTP-Session, meaning that there are no more tricks required to use multiple tabs with RAP applications in the same browser. Lets look at an example how multiple browser tabs can be used within a RAP application by integrating it with the markup and BrowserNavigation features.
Assuming our application lets the user select a person from a database to edit, the typical setup would be a TableViewer that opens a Dialog on a DefaultSelection event. We want to give the user the additional option to open this dialog in a new browser tab. This tab may run the same EntryPoint, or in this case one designed for this specific purpose only.
https://eclipsesource.com/images/multitab.png does not existWe create a TableViewer with markup support:
viewer = new TableViewer( parent );
viewer.getTable().setData( RWT.MARKUP_ENABLED, Boolean.TRUE );
Then we insert a link in the last cell of each row, whereby “edit” is the name of another EntryPoint:
viewer.setLabelProvider( new CellLabelProvider() {
@Override
public void update( ViewerCell cell ) {
Person person = ( Person )cell.getElement();
switch( cell.getColumnIndex() ) {
case COLUMN_FIRST_NAME:
cell.setText( person.name );
break;
case COLUMN_PLACE_OF_BIRTH:
cell.setText( person.nation );
break;
case COLUMN_LINKS:
String url = "edit#person/" + persons.indexOf( person );
cell.setText(
"edit"
);
break;
}
}
} );
In the other EntryPoint, we add deep-link support like this:
BrowserNavigation bn
= RWT.getClient().getService( BrowserNavigation.class );
bn.addBrowserNavigationListener( new BrowserNavigationListener() {
@Override
public void navigated( BrowserNavigationEvent event ) {
String state = event.getState();
if( state.startsWith( "person/" ) ) {
int index = Integer.parseInt( state.substring( 7 ) );
editPerson( persons.get( index ) );
}
}
} );
Done. You could also use the URLLauncher service to open the tab without using a “real” link.