Google’s Polymer and Paper Elements


An interesting take on web future at Devoxx 2014 was Polymer. This framework is build on top of the HTML Web Components specification. It allows you to create your own HTML elements. These elements have their own element-contained HTML (called shadow-dom), private CSS for styling and even some JavaScript for the user to be able to interact with the component.

One example of a useful way to use your own HTML element is the Google Maps widget. Normally we should import the JavaScript source (functionality), create a div with a certain ID, and then initiate the map by selecting the HTML element that represents the map. With the Web Components specification, Google was able to create a <google-map>-element that does all that for you. The only thing you need to do is import the element (which contains element, styling and functionality). Making your code more readable.

Paper elements

In a previous blogpost we mentioned the style guidelines for Material Design. Google also implemented these guidelines in Polymer, giving you a range of new HTML Web Components that follow the Material Design guidelines. This HTML extension is called Paper elements and is easy to install and use.

Installing Polymer and Paper elements

Using Bower, we can easily install Polymer and Paper elements, but you can also download the ZIPs on the polymer website.

bower install --save Polymer/polymer
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements

After installing, you will see that all the new HTML elements are added to the bower_components folder in your application.

Using core and paper-elements

First of all, we will need to include the polymer.html script to make sure that everything runs on legacy browsers supported by Polymer. Also a main.css file can be useful to style the added elements.

<!doctype html>
        <meta charset="utf-8">
        <title>polymer blogpost</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <script src="../bower_components/polymer/polymer.html"></script>
        <link rel="stylesheet" href="styles/main.css">



Next, we will need to import some core-elements to create a nice looking app. For this example we will use core-toolbar, paper-icon-button, and paper-progress.

We can import these elements by adding a link to the html page’s HEAD section.

<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-progress/paper-progress.html">

Now we can start using the new HTML elements, but first of all we need to add some attributes to the body tag. To make sure that the layout is displayed correctly we need to add: fullbleed (makes sure there are no more margins and paddings), layout (makes sure body takes up 100% of the screen), and vertical (makes sure the layout is vertically flowed).

<body fullbleed layout vertical>


Now that we got the body out of the way, we will need to add the toolbar to our application. We’ll add a nice looking menu button to the left of the application’s name.

<body fullbleed layout vertical>

            <paper-icon-button icon="menu"></paper-icon-button>
            <div>MY APP</div>


This will show us a nice looking toolbar with our application name (originally called MY APP). The button on the left of the title has the fancy ripple effect when you click on it (as described in the Material Design guidelines). but we can do more than that. For example we can add a progress bar to this toolbar. We can even make it fit and stick to the bottom.

<body fullbleed layout vertical>

            <paper-icon-button icon="menu"></paper-icon-button>
            <div>MY APP</div>
            <paper-progress class="bottom fit" value="30"></paper-progress>


The result looks somewhat like this

Polymer, Paper elements ExampleThis looks and feels already like a native mobile application and we didn’t have to style anything. Everything has been done with real HTML Elements, which makes the code very readable and easy to maintain.

For more examples and guides for creating your own polymer / paper elements application goto the polymer website.

Caching in a JEE : don’t write it yourself, use LoadingCache from Google Guava libraries.

Caching data is something you use in almost every JEE project. Most of the time it’s pretty simple : put your data in a .properties file and use a PropertyManager to fetch the data.

But that’s not very flexible and manageable. Updating the values means, updating your property file, repackaging the ear file, and redeploying, and only developers can update the data.

Putting the data in JNDI entries, and using JNDI lookups may solve the problem of redeploying, but if you got a few 100 properties, it’s still not very manageable.

Most of the times, JNDI entries are entered via some application server console which, in a production environment, is not accessible for your users who need to manage this data.

So lets put the data that needs to be cached in a database, or make it accessible via a web service. That would be ideal. You can write your own application on it, and have the data managed by your users.

But that means that you have to write your own, thread safe, caching algorithms.

No big deal if the data only changes once every 10 years, but refreshing it on a time or size basis, makes the whole thing a bit more complicated. And that’s where the great LoadingCache class from the Google Guava library comes in.

What are the Guave libraries ? Well, here’s how they describe it : ‘The Guava project contains several of Google’s core libraries that we rely on in our Java-based projects: collections, caching, primitives support, concurrency libraries, common annotations, string processing, I/O, and so forth.’

Now for caching, the Guava LoadingCache class caches data in a key-object map, and lets you define a cache refreshing mechanism, all done in a thread safe manner.

So lets show a small  example and explain how it works. Suppose your cache contains a list of products that are on sale for 1 day. Depending on the no. of sold products, the price will increase during that day. This means that the cache should be updated every few seconds, to update the price, and after 1 day, the whole cache should be refreshed with new products. Suppose that price setting and product selections are in the database, updated by some back-end application, and we need the new data in our frontend application and we want to cache it.

All this can be done with this simple class :

import java.util.concurrent.TimeUnit;
import javax.ejb.EJB;
import javax.ejb.Singleton;
import be.iadvise.dao.DatabaseDAO;
import be.iadvise.entities.Product;

public class ProductCache {

 DatabaseDAO databaseDAO;
 private static final Integer REFRESH_PRODUCT_AFTER_5_SECONDS = 5;
 private static final Integer EXPIRE_PRODUCT_AFTER_1_DAY = 1;
 private final LoadingCache<String, Optional<Product>> cache;

 public ProductCache() {
      cache = CacheBuilder.newBuilder()
           .expireAfterWrite(EXPIRE_PRODUCT_AFTER_1_DAY, TimeUnit.DAYS)
           .refreshAfterWrite(REFRESH_PRODUCT_AFTER_5_SECONDS, TimeUnit.SECONDS)
           .build( new CacheLoader<String, Optional<Product>>() {
                 public Optional<Product> load( String productId ) throws Exception {
                     return loadCache(productId);

 public Optional<Product> getEntry( String productId ) {
      return cache.getUnchecked( productId );

 private Optional<Product> loadCache(String productId) {
      Product product = databaseDAO.getProduct(productId);
      return Optional.fromNullable(product);


  1. In the constructor, we build the cache using the CacheLoader, defining the refresh mechanism. In our example we define 2 rules :
    – expireAfterWrite : after this period, the object will be evicted from the cache, and replaced the next time it is requested.
    – refreshAfterWrite : after this period, the object will be refreshed using the loadCache method. (with our new price)
  2. getEntry(String productId) method : will return the object with given key. So in this example, the cache is not loaded all at once, but only when the object is needed.
  3. loadCache(String productId) : will load the product and add it to the cache, or replace it if it’s already there and needs to be refreshed.

That’s all there is to it !

A few other remarks on the code

  1. There are other mechanism like expire/refresh AfterRead, which will time only from the last read, or let the cache hold only a certain no. of objects,…
  2. This code is implemented as a session bean. To make a singleton, I’m using EJB 3 annotation @Singleton. Because I only want 1 cache in my application
  3. My DAO is also injected using the @EJB annotation
  4. The LoadingCache does not want any null objects in the map (returns an error), so I’m using the Guava ‘Optional’ class here. This is basically a wrapper for my object and used to check if there is a value for my product id or not. So if someone uses a wrong productId, my cache will indicate that there is no product for this id, and I don’t have to go to the database every time it is requested.

To conclude:

Programming a caching mechanism in a JEE environment is not as trivial as it may seem. Testing it in a multithreaded environment is even more difficult. The caching classes of Guave gives you ready-to-use solution. It’s programmed, tested and used by Google, so I think we can say in all honesty : this is proven technology.

A remark on deploying on Weblogic 12c:

Weblogic also uses the Guava libraries, but an older version. This causes following error on deployment :



Adding the following to your weblogic-application.xml will solve the problem (force weblogic to use your deployed Guava libraries :


Guava libraries run under Apache license, more info/download can be found on :

Have fun !

Forms 11g javascript integration: Call others

Forms 11g holds a lot of interesting new features focused on event-driven architecture, one of these is javascript integration. There are two ways of using javascript with Forms 11g: “call others” and “let others call you”.

Javascript can call code in Forms(“Let others call you”) using the new forms trigger “when-custom-javacript-event”.

This post is going to show you the first one: “call others”, in other words call javascript from your Oracle Forms application.

During the Forms Modernization Seminar I showed a google map that could be manipulated from an Oracle Form. It’s an easy implementation with only a few lines of code(most of the javascript is taken from the api examples on the google code site:

  • Build a little form with one (control) block, one text field(to enter an address) and one button(to call the javascript code).
  • Next step is to create an HTML-page to display the form.

This code puts the form(in an iframe) and the map side by side:
(Click to enlarge)

And it will look like this:

  • The javascript that will be called is put in another file google.js:

  • The only thing to do is creating a “when-button-pressed” trigger in forms to call the javascript function showAddress.
    This is done by a new built-in procedure web.javascript_eval_expr:
  • Copy the HTML and javascript file to the following directory:
  • Create a new configuration using Enterprise Manager:

  • Make sure the parameter EnableJavascriptEvent is set to “true’ in your configuration!

And the working demo…

ApEx: Yellow Text Items

Today I came across a strange problem, I received an email of a customer with feedback about an application and the first line was: “Layout is nice but I don’t like the fact that certain text items have a yellow background”. I opened the application looking for yellow text items but I couldn’t find anything yellow so I emailed my customer for a screenshot:

Seeing the yellow text item I first inspected my items looking for something out of the ordinary but I couldn’t find anything special. After searching the internet for some time, I found finally an explanation. A user with the exact same problem posted that he had “google toolbar” causing the problem.

Seeing the screenshot above, I noticed that google toolbar was active. I then phoned my customer with the question for a screenshot without google toolbar:

My problem was found, the browser in question is IE 7.0. After some digging I came across where a workaround is explained. I will try some of their suggestions in the next couple of days…