DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Join us tomorrow at 1 PM EST: "3-Step Approach to Comprehensive Runtime Application Security"
Save your seat
  1. DZone
  2. Testing, Deployment, and Maintenance
  3. Deployment
  4. Java/JavaScript Integration in OSGI: Part 2

Java/JavaScript Integration in OSGI: Part 2

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

Kees Pieters user avatar by
Kees Pieters
·
Dec. 04, 18 · Tutorial
Like (3)
Save
Tweet
Share
8.39K Views

Join the DZone community and get the full member experience.

Join For Free

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.

Popular on DZone

  • NEXT.JS 13: Be Dynamic Without Limits
  • What Is Policy-as-Code? An Introduction to Open Policy Agent
  • Building Angular Library and Publishing in npmjs Registry
  • The 31 Flavors of Data Lineage and Why Vanilla Doesn’t Cut It

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: