Java/JavaScript Integration in OSGI: Part 2

This post demonstrates how to make the bundle context-aware using the Bootstrap library.

Kees Pieters

Dec. 04, 18 · Tutorial

Like (3)

Save

8.39K Views

In the previous post, we discussed ways to set up an OSGI bundle in such a way that it can provide web content using Eclipse RAP to generate the entry point for web content. We also looked at ways to make the bundle secure. In this post, we will expand this bundle and demonstrate how we can make our bundle context-aware using the Bootstrap library to provide the mechanism to resize and reposition the widgets. In order to so we must first make a few changes to our bundle.

Multiple Entry Points

If you regularly work with Eclipse RAP, you may be accustomed to develop your front-end application from the BasicEntrypoint class that is provided in the root package. You will normally add a composite, which will offer all the functionality you want to provide for the end user. This approach works fine, but it does make you dependent on the RAP framework and limits the ways you can integrate new javascript libraries in your application. So we will take a different approach here, and consider Eclipe RAP as a means to develop widgets that we can add to javascript libraries!. In order to demonstrate this, do the following:

Add a package to your bundle with the name: test.openlayers.map.entry
Copy the test.openlayers.map.BasicEntryPoint. java file to this package, and rename it to MapEntryPoint.java .
Add the following line to test.openlayers.map.BasicApplication.java: application.addEntryPoint("/map", MapEntryPoint.class, properties);
Comment out the original line: application.addEntryPoint("/map", BasicEntryPoint.class, properties);
Rename the index.html file to map.html, and adjust the path in MapEntryPoint.java .

If all went well, you should be able to launch the bundle and see the same map that we made in the previous post.

package test.openlayers.map.entry;

import java.io.InputStream;
import java.util.Scanner;

import org.eclipse.rap.rwt.application.AbstractEntryPoint;
import org.eclipse.swt.SWT;
import org.eclipse.swt.browser.Browser;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Composite;

public class MapEntryPoint extends AbstractEntryPoint {
private static final long serialVersionUID = 1L;

private static final String S_INDEX_LOCATION = "/resources/map.html";

@Override
    protected void createContents(Composite parent) {
        parent.setLayout(new GridLayout(2, false));
        Browser browser = new Browser(parent, SWT.NONE);
        browser.setText( readInput(getClass().getResourceAsStream(S_INDEX_LOCATION)));
        browser.setLayoutData(new GridData( SWT.FILL, SWT.FILL, true, true ));
    }

protected String readInput( InputStream in ){
StringBuffer buffer = new StringBuffer();
Scanner scanner = new Scanner( in );
try{
while( scanner.hasNextLine() )
buffer.append( scanner.nextLine() );
}
finally{
scanner.close();
}
return buffer.toString();
}
}

But now we are going to add the Bootstrap library. For this, we use the approach of the Getting Started Section of this popular JavaScript library:

Create a new index.html file in the resources folder of your bundle, and copy the code of the starter example of Bootstrap in this file.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Uncomment the line you commented out in test.openlayers.map.BasicApplication.java:

Last we make a small change in the index.html file:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <div class="embed-responsive embed-responsive-16by9">
      <iframe src="/map" allowfullscreen/>
    </div>
  </body>
</html>

Note the <iframe> element at the bottom, where the entry point for the openlayer map has been added. If you launch the bundle, you will see that the openlayers map has become integrated in the bootstrap front-end. Try resizing the browser to see how the widgets change dynamically with the browser size. You can add multiple entry points this way so that every SWT/JFace widget you develop can be added to JavaScript. Instead of developing a rich client in JAVA, we now just provide the widgets we need and bring them together under Bootstrap!

NOTE: If you would copy index.html to the web folder, you can also open the web page at http://127.0.0.1:<port>/openlayers/test. You can, therefore, choose between an "html-first" option, where an html file is opened, or a "RAP-first", where the html file is embedded in an SWT Browser object (i.e an iframe).

Wrapping Up

If you, like myself, are usually building Rich Clients in JAVA/Eclipse, then the novelty of the approach described above will probably be clear. Instead of developing the Rich Client with SWT and JFace components, we start with HTML and JavaScript (libraries) and embed the JFace/SWT widgets in the user interface. This way we can fully utilize the power of JavaScript libraries, while still being able to use the widgets we are accustomed to.

Integration

Opinions expressed by DZone contributors are their own.

Comments

Java/JavaScript Integration in OSGI: Part 2

This post demonstrates how to make the bundle context-aware using the Bootstrap library.

Multiple Entry Points

Wrapping Up

Popular on DZone

Partner Resources