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.
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.
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.
- 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.