Ripla Skins

To create a skin for a Ripla application, you first have to create a bundle fragment containing the layout resources, i.e. style sheets and images for the layout you want to use for your application. The second step is to create a skin bundle for your application, i.e. a component containing the service provider for org.ripla.web.services.ISkin and referencing the skin bundle fragment.

Layout bundle fragment

The layout bundle fragment contains the skin's style sheets (css) and images. The fragment host has to be com.vaadin. Therefore, you have to add an entry like the following to the bundle's MANIFEST.MF:

Fragment-Host: com.vaadin 

The directory structure of the fragment bundle has to be as follows:

The skin resources have to reside in a subfolder of VAADIN/themes. The name of this subfolder is important, as it will be the skin identification. In this example, the fragment bundle provides the resources for a skin identified as org.ripla.web.skin.

Skin bundle

The skin bundle's task is to register the skin resources at the Ripla skin registery. To achieve this, the bundle has to provide an implementation of the org.ripla.services.ISkinService service. The skin bundle's component description (OSGI-INF/skin.xml) could look as follows:

<?xml version="1.0" encoding="UTF-8"?>
<scr:component xmlns:scr="http://www.osgi.org/xmlns/scr/v1.1.0" name="org.ripla.web.skin">
   <implementation class="org.ripla.web.skin.default.Skin"/>
   <service>
      <provide interface="org.ripla.services.ISkinService"/>
   </service>
</scr:component>

The skin service class has to implement the following interface:

public interface ISkinService {
    String getSkinID();
    String getSkinName();
    ISkin createSkin();
} 

The important methods are ISkinService.getSkinID() and
ISkinService.createSkin(). The first method has to return the name of the folder containing the skin resources in the fragment bundle. In our example, this method has to return org.ripla.web.skin. ISkinService.createSkin() has to create the skin instance used for the UIs in the application.

public interface ISkin {
    boolean hasHeader();
    Component getHeader();
    boolean hasFooter();
    Component getFooter();
    boolean hasToolBar();
    Label getToolbarSeparator();
    boolean hasMenuBar();
    HorizontalLayout getMenuBarMedium();    
    HorizontalLayout getMenuBar();
    Resource getSubMenuIcon();
}

These methods configure aspects of the skin, e.g. whether a header should be displayed or not. If yes, ISkin.getHeader() has to return the Vaadin component that renders the header view.