Creating a new Viewlet to render data the way you want



In this tutorial:

Generate a project outline


ubos-scaffold list

ubos-scaffold generate --template mesh_underbars_viewlet --directory .
To parameterize things properly, we still need to know a few things.
Name of the Viewlet package (e.g. ubos-mesh-underbars-vl-northpole): ubos-mesh-underbars-vl-order
Name of the Viewlet (e.g. net.ubos.underbars.vl.northpole): net.ubos.underbars.vl.order
The Maven Group ID for the Viewlet (e.g. net.ubos.underbars): net.ubos.underbars
URL of the developer, such as your company URL:
URL of the package, such as a product information page on your company website:
One-line description of your package, which will be shown to the user when
they ask pacman about your package (-i flag to pacman): UBOS Mesh Viewlet to render commerce Orders
License of your package, such as GPL, Apache, or Proprietary: AGPL3
Generating UBOS files for package ubos-mesh-underbars-vl-order using template mesh_underbars_viewlet into directory ..

This has created a directory hierarchy in ubos-mesh-underbars-vl-order. If we look into this directory hierarchy, we find the following files:


Build file for the package. We may need to edit this later.


Ignore certain files when checking into Git. No need to change.


Metadata for UBOS administration. For Viewlets like this one the needed content is minimal and always the same. No need to change.


Default icon for the Viewlet. Currently not used.


Default icon for the Viewlet. Currently not used.


Default CSS file. Put the CSS you need for your Viewlet here.


Handlebars template to emit compact HTML when the Viewlet is contained inside another Viewlet, such as in a search result. Edit this to change how the Viewlet renders its MeshObject in compact form.


Handlebars template to emit full HTML when the Viewlet is used normally. Edit this to change how the Viewlet renders its MeshObject normally.


Handlebars template to emit the (hopefully short) HTML title for the Viewlet.


Module activation code. Most importantly contains the code that determines which MeshObjects this Viewlet can render, and how well.


Name of the Viewlet in the user interface.


Gradle build file. Edit this for correct dependencies, such as dependencies on the code that defines the Model that the Viewlet uses.


Gradle build file. No need to edit.

Include the project outline into the Gradle parent project

The ubos-scaffold does not attempt to edit the Gradle parent project (in parent directory ubos-mesh-underbars-ui). So you need to do this manually.

  1. In ubos-mesh-underbars-ui, edit build.gradle.

    Look for a section that defines the diet4jProperties for a project, copy it and adjust the names, so that the following extra section is being added:

    project(':ubos-mesh-underbars-vl-purchase:net.ubos.underbars.vl.purchase') {
        ext {
            diet4jProperties = [ 'diet4j.activationclass' : 'net.ubos.underbars.vl.purchase.ModuleInit' ]
  2. In ubos-mesh-underbars-ui, edit settings.gradle. You need to add two include and two project lines:



    project(':ubos-mesh-underbars-vl-purchase').projectDir = file('ubos-mesh-underbars-vl-purchase')
    project(':ubos-mesh-underbars-vl-purchase:net.ubos.underbars.vl.purchase').projectDir = file('ubos-mesh-underbars-vl-purchase/net.ubos.underbars.vl.purchase')
  3. In ubos-mesh-underbars-ui, edit devtools.json, and add this line in the vl section, next to all the other listed Viewlets:


Build once

Some IDEs don’t like to parse projects that have never been built before. So build this (so far uncustomized) project: