Javascrip based components

Creating a component using a 3rd Party JavaScript library

The JBStrap framework allows you to create your own components, based on third-party libraries, that you can use the same way as if they were default JBStrap component. This could be a different Combobox, a map component, etc.

To begin the development of your Component, you need to access the JavaScript library. You can access it locally, or remotely, but it is recommended that you use it locally, in case of a version change, or if the server where the library is normally found cannot be accessed, your components can still work.

In this section, a simplified map component will be created. The component will display a zoomable map on the user interface. In this example, we use the Leaflet JavaScript library . The library offers much deeper functionality, but we will try to keep it simple in this example.


As a first step, download the library and it’s CSS class. Place these in the project’s WebContent folder. After this, the library will be accessible.

The next step is registering the style sheet, so that it is automatically downloaded when a client connects.

Registering the CSS file. We recommend that you do this in the Startup class:

In order to be able to use your component easily, create a JavaScript package, in which the needed functions are implemented. These are responsible for interpreting (wrapper method) instructions for the map API and storing the needed data on the client-side.

Source code of the file, containing the Leaflet map API and the JavaScript responsible for interpreting instructiosn between the API and component:

Save this JavaScript file to the project’s WebContent folder, as map.js . The code in this file is responsible for the component is initialization, adding POIs to the map, and resetting the map to its default state.

If this is done, implement the component, that is, create the Java code. You must extend a class from the Component class, in which you will implement the new component itself. You must call the init method in this class, as this method loads the needed JavaScript packages to the client, in case they are not loaded.

Java source code of the Map component:

In the above code, a new component was created. You need to specify how big the map should be on the user interface. This can be defined by using CSS, following the CSS3 standard. The component has four methods, these are used to create, display or get POIs and you can reset the component to be in its default state. When any of the methods are called, the changes are applied instantly on both the client and server-side, without redrawing the component, if the map is already displayed.

In the source code, there are two more special methods, inherited from the Component class. The first is the init method. You have to implement the client-side component initialization. You don’t have to do this for every component, but if the component uses a JavaScript library, it is mandatory. The method is called after the component has been drawn, so every related HTML DOM object already exists during the component initialization. In this method, in the case of this map component, 4 things are happening:

  • Loading the Leaflet JavaScript API, if it is not yet loaded on the client
  • Loading the self-made JavaScript wrapper, if it is not yet loaded
  • Initializing the map on the interface, displaying the map
  • If you add a POI before the component is displayed, those will be placed on the map during initialization

With this, the component will be displayed according to the server-side settings. If you add a new POI after this, the addPOI method will be used to place a POI on the client-side map.

The other special method is the writeHTML method, which is responsible for drawing the component. Every component must implement this, as the Component ancestor class has this as an abstract method. You have to implement the drawing of the HTML content, with the help of the StringWriter object. In this case this means that you are placing a div tag in the HTML DOM, which marks the placement of the map itself. The map will be displayed in this div tag, meaning that the size of the map can be modified by altering the size of the div tag.

After this, the component can be used anywhere freely in the JBStrap framework. You can place it on a component or page. Next, let’s see how to place the Map component on to a page. In the following example, the Map component will be placed on a page, and there will be a toolbar with 4 buttons above the map. Three of these buttons will display three POIs on the map, (The London Eye, The Leaning Tower of Pisa and The Statue of Liberty). The fourth button will reset the map to its default state.

Source code of the page displaying the map: