You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »


In this tutorial, we will be following the guideline for developing a plugin to develop a Userview Theme plugin.

1. What is the problem?

Extends and customize the look and feel of existing Userview Theme to obtain different look and feel on the end user's interface.

2. How to solve the problem?

Joget has provided a plugin type called Userview Theme Plugin. We will develop one to a new Userview Theme by extending one of the existing themes.

3. What is the input needed for your plugin?

To develop a Userview Theme plugin, we will need to first determine the design change that we want to bring to the existing look and feel. In this tutorial, we will attempt to change the look and feel of how a form is displayed.

This is how a form looks like using the Universal Theme.

And, we are going to attempt to change the design by taking cues from this design (Source https://colorlib.com/etc/regform/colorlib-regform-2/).


4. What is the output and expected outcome of your plugin?

We are going to customize the design of the form, to adapt from the site that we have chosen, and introduce the necessary coding (CSS, JS etc) on top of the Universal Theme.

5. Are there any resources/API that can be reused?

We can refer to the documentation of Userview Theme Plugin and look at its Overridable Methods.

6. Prepare your development environment

We need to always have our Joget Workflow Source Code ready and built by following this guideline. 

The following tutorial is prepared with a Macbook Pro and Joget Source Code version 7.0-SNAPSHOT. Please refer to the Guideline for developing a plugin article for other platform commands. 

Let's say our folder directory is as follows. 

- Home
  - joget
    - plugins
    - jw-community
      -7.0-SNAPSHOT

The "plugins" directory is the folder we will create and store all our plugins and the "jw-community" directory is where the Joget Workflow Source code is stored.

Run the following command to create a maven project in "plugins" directory.

cd joget/plugins/
~/joget/jw-community/7.0-SNAPSHOT/wflow-plugin-archetype/create-plugin.sh org.joget.tutorial eva-theme 7.0-SNAPSHOT

Then, the shell script will ask us to key in a version number for the plugin and request for confirmation before generating the maven project.

Define value for property 'version':  1.0-SNAPSHOT: : 7.0.0
[INFO] Using property: package = org.joget.tutorial
Confirm properties configuration:
groupId: org.joget.tutorial
artifactId: eva-theme
version: 7.0.0
package: org.joget.tutorial
Y: : y

We should get "BUILD SUCCESS" message shown in our terminal and a "jdbc_options_binder" folder created in "plugins" folder.

Open the maven project with your favorite IDE. I will be using NetBeans.  

7. Just code it!

Implementation of all basic abstract methods 
package org.joget.tutorial;

import java.util.Map;
import java.util.Set;
import org.joget.apps.app.service.AppUtil;
import org.joget.apps.userview.service.UserviewUtil;
import org.joget.commons.util.ResourceBundleUtil;
import org.joget.plugin.base.PluginManager;
import org.joget.plugin.enterprise.UniversalTheme;

public class EvaTheme extends UniversalTheme{
    //extends UniversalTheme so that we can take advantage of all PWA capabilities.
    
    @Override
    public String getName() {
        return "Eva Theme";
    }

    @Override
    public String getVersion() {
        return "7.0.0";
    }

    @Override
    public String getDescription() {
        return "Eva Theme based on Universal Theme to support PWA";
    }

    @Override
    public String getLabel() {
        return getName();
    }

    @Override
    public String getClassName() {
        return getClass().getName();
    }
    
    @Override
    public String getPropertyOptions() {
        return AppUtil.readPluginResource(getClass().getName(), "/properties/userview/EvaTheme.json", null, true, "messages/userview/EvaTheme");
    }
    
    @Override
    public String getJsCssLib(Map<String, Object> data) {
        String cssJs = super.getJsCssLib(data);
        
        //change where needed to to inject custom css on top of the universal theme
        String bn = ResourceBundleUtil.getMessage("build.number");
        cssJs += "<link href=\"" + data.get("context_path") + "/plugin/"+getClassName()+"/eva.css?build=" + bn + "\" rel=\"stylesheet\" />\n";
        cssJs += "<script src=\"" + data.get("context_path") + "/plugin/"+getClassName()+"/eva.js?build=" + bn + "\" async></script>\n";
        
        return cssJs;
    }
    
    @Override
    public Set<String> getOfflineStaticResources() {
        String contextPath = AppUtil.getRequestContextPath();
        String bn = ResourceBundleUtil.getMessage("build.number");
        Set<String> urls = super.getOfflineStaticResources();
        urls.add(contextPath + "/plugin/"+getClassName()+"/eva.css?build=" + bn);
        urls.add(contextPath + "/plugin/"+getClassName()+"/eva.js?build=" + bn);
        
        return urls;
    }

//   use with caution - not recommended to use custom template file as there are alot of placeholder for other methods to fill in     
    @Override
    public String getLayout(Map<String, Object> data) {
         data.put("body_inner_before", "<div class=\"page-loader\"><div class=\"preloader pl-xl\" style=\"width:80px\"><svg class=\"pl-circular\" viewBox=\"25 25 50 50\"><circle class=\"plc-path\" cx=\"50\" cy=\"50\" r=\"20\" /></svg></div></div>");
        return super.getLayout(data);
    }
    
//   use with caution - not recommended to use custom template file as there are alot of placeholder for other methods to fill in 
    @Override
    public String getContentContainer(Map<String, Object> data) {
        return UserviewUtil.getTemplate(this, data, "/templates/userview/contentContainer.ftl");
    }
}

Then, we have to create a UI for admin user to provide inputs for our plugin. In getPropertyOptions method, we have already specified that our Plugin Properties Options definition file is located at "/properties/EvaTheme.json". Let us create a directory "resources/properties" under "eva-theme/src/main" directory. After creating the directory, create a file named "EvaTheme.json" in the "properties" folder.

In the properties definition options file, we will need to provide options as below. Please note that we will use "@@message.key@@" syntax to support i18n in our properties options.

Since we are extending our theme from Universal Theme, we can simply copy Universal Theme's file and to modify line 2 to rename its label. Keep in mind of the label key that we are declaring here - "theme.eva.config".

[{
    title : '@@theme.eva.config@@',
    properties : [
    {
        name : 'horizontal_menu',
        label : '@@theme.universal.menu_position@@',
        type : 'selectbox',
        options : [{
            value : '',
            label : '@@theme.universal.menu.sideMenu@@'
        },
        {
            value : 'true',
            label : '@@theme.universal.menu.horizontalMenu@@'
        },
        {
            value : 'horizontal_inline',
            label : '@@theme.universal.menu.inlineHorizontalMenu@@'
        },
        {
            value : 'no',
            label : '@@theme.universal.menu.no@@'
        }]
    },
    {
        name : 'themeScheme',
        label : '@@theme.universal.themeScheme@@',
        type : 'selectbox',
        value: 'light',
        options : [{
            value : 'dark',
            label : '@@theme.universal.themeScheme.dark@@'
        },{
            value : 'light',
            label : '@@theme.universal.themeScheme.light@@'
        }]
    },
    {
        name : 'primaryColor',
        label : '@@theme.universal.primaryColor@@',
        type : 'selectbox',
        options_label_processor : 'color',
        value: 'DARKROYALBLUE',
        options : [{
            value : '',
            label : ''
        },{
            value : 'RED',
            label : '@@theme.universal.colorScheme.red@@'
        },{
            value : 'PINK',
            label : '@@theme.universal.colorScheme.pink@@'
        },{
            value : 'LAVENDERBLUSH',
            label : '@@theme.universal.colorScheme.lavenderBlush@@'
        },{
            value : 'THISTLE',
            label : '@@theme.universal.colorScheme.thistle@@'
        },{
            value : 'PLUM',
            label : '@@theme.universal.colorScheme.plum@@'
        },{
            value : 'PURPLE',
            label : '@@theme.universal.colorScheme.purple@@'
        },{
            value : 'DEEP_PURPLE',
            label : '@@theme.universal.colorScheme.deepPurple@@'
        },{
            value : 'INDIGO',
            label : '@@theme.universal.colorScheme.indigo@@'
        },{
            value : 'LAVENDER',
            label : '@@theme.universal.colorScheme.lavender@@'
        },{
            value : 'GHOSTWHITE',
            label : '@@theme.universal.colorScheme.ghostWhite@@'
        },{
            value : 'BLUE',
            label : '@@theme.universal.colorScheme.blue@@'
        },{
            value : 'LIGHT_BLUE',
            label : '@@theme.universal.colorScheme.lightBlue@@'
        },{
            value : 'DARKROYALBLUE',
            label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
        },{
            value : 'ROYALBLUE',
            label : '@@theme.universal.colorScheme.royalBlue@@'
        },{
            value : 'CORNFLOWERBLUE',
            label : '@@theme.universal.colorScheme.cornflowerBlue@@'
        },{
            value : 'ALICEBLUE',
            label : '@@theme.universal.colorScheme.aliceBlue@@'
        },{
            value : 'LIGHTSTEELBLUE',
            label : '@@theme.universal.colorScheme.lightSteelBlue@@'
        },{
            value : 'STEELBLUE',
            label : '@@theme.universal.colorScheme.steelBlue@@'
        },{
            value : 'LIGHTSKYBLUE',
            label : '@@theme.universal.colorScheme.lightSkyBlue@@'
        },{
            value : 'SKYBLUE',
            label : '@@theme.universal.colorScheme.skyBlue@@'
        },{
            value : 'DEEPSKYBLUE',
            label : '@@theme.universal.colorScheme.deepSkyBlue@@'
        },{
            value : 'AZURE',
            label : '@@theme.universal.colorScheme.azure@@'
        },{
            value : 'LIGHTCYAN',
            label : '@@theme.universal.colorScheme.lightCyan@@'
        },{
            value : 'CYAN',
            label : '@@theme.universal.colorScheme.cyan@@'
        },{
            value : 'TEAL',
            label : '@@theme.universal.colorScheme.teal@@'
        },{
            value : 'GREEN',
            label : '@@theme.universal.colorScheme.green@@'
        },{
            value : 'LIGHT_GREEN',
            label : '@@theme.universal.colorScheme.lightGreen@@'
        },{
            value : 'LIME',
            label : '@@theme.universal.colorScheme.lime@@'
        },{
            value : 'IVORY',
            label : '@@theme.universal.colorScheme.ivory@@'
        },{
            value : 'LEMONCHIFFON',
            label : '@@theme.universal.colorScheme.lemonChiffon@@'
        },{
            value : 'WHEAT',
            label : '@@theme.universal.colorScheme.wheat@@'
        },{
            value : 'YELLOW',
            label : '@@theme.universal.colorScheme.yellow@@'
        },{
            value : 'AMBER',
            label : '@@theme.universal.colorScheme.amber@@'
        },{
            value : 'ORANGE',
            label : '@@theme.universal.colorScheme.orange@@'
        },{
            value : 'DEEP_ORANGE',
            label : '@@theme.universal.colorScheme.deepOrange@@'
        },{
            value : 'BROWN',
            label : '@@theme.universal.colorScheme.brown@@'
        },{
            value : 'LIGHTGREY',
            label : '@@theme.universal.colorScheme.lightGrey@@'
        },{
            value : 'GREY',
            label : '@@theme.universal.colorScheme.grey@@'
        },{
            value : 'BLUE_GREY',
            label : '@@theme.universal.colorScheme.blueGrey@@'
        },{
            value : 'DEEP_GREY',
            label : '@@theme.universal.colorScheme.deepGrey@@'
        },{
            value : 'SILVER',
            label : '@@theme.universal.colorScheme.silver@@'
        },{
            value : 'BLACK',
            label : '@@theme.universal.colorScheme.black@@'
        },{
            value : 'WHITE',
            label : '@@theme.universal.colorScheme.white@@'
        },{
            value : 'custom',
            label : '@@theme.universal.colorScheme.custom@@'
        }]
    },
    {
        name : 'customPrimary',
        label : '@@theme.universal.customPrimary@@',
        type : 'color',
        control_field: 'primaryColor',
        control_value: 'custom',
        control_use_regex: 'false',
        required : 'true'
    },
    {
        name : 'customPrimaryDark',
        label : '@@theme.universal.customPrimaryDark@@',
        type : 'color',
        control_field: 'primaryColor',
        control_value: 'custom',
        control_use_regex: 'false'
    },
    {
        name : 'customPrimaryLight',
        label : '@@theme.universal.customPrimaryLight@@',
        type : 'color',
        control_field: 'primaryColor',
        control_value: 'custom',
        control_use_regex: 'false'
    },
    {
        name : 'accentColor',
        label : '@@theme.universal.accentColor@@',
        type : 'selectbox',
        options_label_processor : 'color',
        value: 'BLUE',
        options : [{
            value : '',
            label : ''
        },{
            value : 'RED',
            label : '@@theme.universal.colorScheme.red@@'
        },{
            value : 'PINK',
            label : '@@theme.universal.colorScheme.pink@@'
        },{
            value : 'LAVENDERBLUSH',
            label : '@@theme.universal.colorScheme.lavenderBlush@@'
        },{
            value : 'THISTLE',
            label : '@@theme.universal.colorScheme.thistle@@'
        },{
            value : 'PLUM',
            label : '@@theme.universal.colorScheme.plum@@'
        },{
            value : 'PURPLE',
            label : '@@theme.universal.colorScheme.purple@@'
        },{
            value : 'DEEP_PURPLE',
            label : '@@theme.universal.colorScheme.deepPurple@@'
        },{
            value : 'INDIGO',
            label : '@@theme.universal.colorScheme.indigo@@'
        },{
            value : 'LAVENDER',
            label : '@@theme.universal.colorScheme.lavender@@'
        },{
            value : 'GHOSTWHITE',
            label : '@@theme.universal.colorScheme.ghostWhite@@'
        },{
            value : 'BLUE',
            label : '@@theme.universal.colorScheme.blue@@'
        },{
            value : 'LIGHT_BLUE',
            label : '@@theme.universal.colorScheme.lightBlue@@'
        },{
            value : 'DARKROYALBLUE',
            label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
        },{
            value : 'ROYALBLUE',
            label : '@@theme.universal.colorScheme.royalBlue@@'
        },{
            value : 'CORNFLOWERBLUE',
            label : '@@theme.universal.colorScheme.cornflowerBlue@@'
        },{
            value : 'ALICEBLUE',
            label : '@@theme.universal.colorScheme.aliceBlue@@'
        },{
            value : 'LIGHTSTEELBLUE',
            label : '@@theme.universal.colorScheme.lightSteelBlue@@'
        },{
            value : 'STEELBLUE',
            label : '@@theme.universal.colorScheme.steelBlue@@'
        },{
            value : 'LIGHTSKYBLUE',
            label : '@@theme.universal.colorScheme.lightSkyBlue@@'
        },{
            value : 'SKYBLUE',
            label : '@@theme.universal.colorScheme.skyBlue@@'
        },{
            value : 'DEEPSKYBLUE',
            label : '@@theme.universal.colorScheme.deepSkyBlue@@'
        },{
            value : 'AZURE',
            label : '@@theme.universal.colorScheme.azure@@'
        },{
            value : 'LIGHTCYAN',
            label : '@@theme.universal.colorScheme.lightCyan@@'
        },{
            value : 'CYAN',
            label : '@@theme.universal.colorScheme.cyan@@'
        },{
            value : 'TEAL',
            label : '@@theme.universal.colorScheme.teal@@'
        },{
            value : 'GREEN',
            label : '@@theme.universal.colorScheme.green@@'
        },{
            value : 'LIGHT_GREEN',
            label : '@@theme.universal.colorScheme.lightGreen@@'
        },{
            value : 'LIME',
            label : '@@theme.universal.colorScheme.lime@@'
        },{
            value : 'IVORY',
            label : '@@theme.universal.colorScheme.ivory@@'
        },{
            value : 'LEMONCHIFFON',
            label : '@@theme.universal.colorScheme.lemonChiffon@@'
        },{
            value : 'WHEAT',
            label : '@@theme.universal.colorScheme.wheat@@'
        },{
            value : 'YELLOW',
            label : '@@theme.universal.colorScheme.yellow@@'
        },{
            value : 'AMBER',
            label : '@@theme.universal.colorScheme.amber@@'
        },{
            value : 'ORANGE',
            label : '@@theme.universal.colorScheme.orange@@'
        },{
            value : 'DEEP_ORANGE',
            label : '@@theme.universal.colorScheme.deepOrange@@'
        },{
            value : 'BROWN',
            label : '@@theme.universal.colorScheme.brown@@'
        },{
            value : 'LIGHTGREY',
            label : '@@theme.universal.colorScheme.lightGrey@@'
        },{
            value : 'GREY',
            label : '@@theme.universal.colorScheme.grey@@'
        },{
            value : 'BLUE_GREY',
            label : '@@theme.universal.colorScheme.blueGrey@@'
        },{
            value : 'DEEP_GREY',
            label : '@@theme.universal.colorScheme.deepGrey@@'
        },{
            value : 'SILVER',
            label : '@@theme.universal.colorScheme.silver@@'
        },{
            value : 'BLACK',
            label : '@@theme.universal.colorScheme.black@@'
        },{
            value : 'WHITE',
            label : '@@theme.universal.colorScheme.white@@'
        },{
            value : 'custom',
            label : '@@theme.universal.colorScheme.custom@@'
        }]
    },
    {
        name : 'customAccent',
        label : '@@theme.universal.customAccent@@',
        type : 'color',
        control_field: 'accentColor',
        control_value: 'custom',
        control_use_regex: 'false',
        required : 'true'
    },
    {
        name : 'customAccentLight',
        label : '@@theme.universal.customAccentLight@@',
        type : 'color',
        control_field: 'accentColor',
        control_value: 'custom',
        control_use_regex: 'false'
    },
    {
        name : 'buttonColor',
        label : '@@theme.universal.buttonColor@@',
        type : 'selectbox',
        options_label_processor : 'color',
        value: 'GREY',
        options : [{
            value : '',
            label : ''
        },{
            value : 'RED',
            label : '@@theme.universal.colorScheme.red@@'
        },{
            value : 'PINK',
            label : '@@theme.universal.colorScheme.pink@@'
        },{
            value : 'LAVENDERBLUSH',
            label : '@@theme.universal.colorScheme.lavenderBlush@@'
        },{
            value : 'THISTLE',
            label : '@@theme.universal.colorScheme.thistle@@'
        },{
            value : 'PLUM',
            label : '@@theme.universal.colorScheme.plum@@'
        },{
            value : 'PURPLE',
            label : '@@theme.universal.colorScheme.purple@@'
        },{
            value : 'DEEP_PURPLE',
            label : '@@theme.universal.colorScheme.deepPurple@@'
        },{
            value : 'INDIGO',
            label : '@@theme.universal.colorScheme.indigo@@'
        },{
            value : 'LAVENDER',
            label : '@@theme.universal.colorScheme.lavender@@'
        },{
            value : 'GHOSTWHITE',
            label : '@@theme.universal.colorScheme.ghostWhite@@'
        },{
            value : 'BLUE',
            label : '@@theme.universal.colorScheme.blue@@'
        },{
            value : 'LIGHT_BLUE',
            label : '@@theme.universal.colorScheme.lightBlue@@'
        },{
            value : 'DARKROYALBLUE',
            label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
        },{
            value : 'ROYALBLUE',
            label : '@@theme.universal.colorScheme.royalBlue@@'
        },{
            value : 'CORNFLOWERBLUE',
            label : '@@theme.universal.colorScheme.cornflowerBlue@@'
        },{
            value : 'ALICEBLUE',
            label : '@@theme.universal.colorScheme.aliceBlue@@'
        },{
            value : 'LIGHTSTEELBLUE',
            label : '@@theme.universal.colorScheme.lightSteelBlue@@'
        },{
            value : 'STEELBLUE',
            label : '@@theme.universal.colorScheme.steelBlue@@'
        },{
            value : 'LIGHTSKYBLUE',
            label : '@@theme.universal.colorScheme.lightSkyBlue@@'
        },{
            value : 'SKYBLUE',
            label : '@@theme.universal.colorScheme.skyBlue@@'
        },{
            value : 'DEEPSKYBLUE',
            label : '@@theme.universal.colorScheme.deepSkyBlue@@'
        },{
            value : 'AZURE',
            label : '@@theme.universal.colorScheme.azure@@'
        },{
            value : 'LIGHTCYAN',
            label : '@@theme.universal.colorScheme.lightCyan@@'
        },{
            value : 'CYAN',
            label : '@@theme.universal.colorScheme.cyan@@'
        },{
            value : 'TEAL',
            label : '@@theme.universal.colorScheme.teal@@'
        },{
            value : 'GREEN',
            label : '@@theme.universal.colorScheme.green@@'
        },{
            value : 'LIGHT_GREEN',
            label : '@@theme.universal.colorScheme.lightGreen@@'
        },{
            value : 'LIME',
            label : '@@theme.universal.colorScheme.lime@@'
        },{
            value : 'IVORY',
            label : '@@theme.universal.colorScheme.ivory@@'
        },{
            value : 'LEMONCHIFFON',
            label : '@@theme.universal.colorScheme.lemonChiffon@@'
        },{
            value : 'WHEAT',
            label : '@@theme.universal.colorScheme.wheat@@'
        },{
            value : 'YELLOW',
            label : '@@theme.universal.colorScheme.yellow@@'
        },{
            value : 'AMBER',
            label : '@@theme.universal.colorScheme.amber@@'
        },{
            value : 'ORANGE',
            label : '@@theme.universal.colorScheme.orange@@'
        },{
            value : 'DEEP_ORANGE',
            label : '@@theme.universal.colorScheme.deepOrange@@'
        },{
            value : 'BROWN',
            label : '@@theme.universal.colorScheme.brown@@'
        },{
            value : 'LIGHTGREY',
            label : '@@theme.universal.colorScheme.lightGrey@@'
        },{
            value : 'GREY',
            label : '@@theme.universal.colorScheme.grey@@'
        },{
            value : 'BLUE_GREY',
            label : '@@theme.universal.colorScheme.blueGrey@@'
        },{
            value : 'DEEP_GREY',
            label : '@@theme.universal.colorScheme.deepGrey@@'
        },{
            value : 'SILVER',
            label : '@@theme.universal.colorScheme.silver@@'
        },{
            value : 'BLACK',
            label : '@@theme.universal.colorScheme.black@@'
        },{
            value : 'WHITE',
            label : '@@theme.universal.colorScheme.white@@'
        },{
            value : 'custom',
            label : '@@theme.universal.colorScheme.custom@@'
        }]
    },
    {
        name : 'customButton',
        label : '@@theme.universal.customButton@@',
        type : 'color',
        control_field: 'buttonColor',
        control_value: 'custom',
        control_use_regex: 'false',
        required : 'true'
    },
    {
        name : 'buttonTextColor',
        label : '@@theme.universal.buttonTextColor@@',
        type : 'selectbox',
        options_label_processor : 'color',
        value: 'WHITE',
        options : [{
            value : '',
            label : ''
        },{
            value : 'RED',
            label : '@@theme.universal.colorScheme.red@@'
        },{
            value : 'PINK',
            label : '@@theme.universal.colorScheme.pink@@'
        },{
            value : 'LAVENDERBLUSH',
            label : '@@theme.universal.colorScheme.lavenderBlush@@'
        },{
            value : 'THISTLE',
            label : '@@theme.universal.colorScheme.thistle@@'
        },{
            value : 'PLUM',
            label : '@@theme.universal.colorScheme.plum@@'
        },{
            value : 'PURPLE',
            label : '@@theme.universal.colorScheme.purple@@'
        },{
            value : 'DEEP_PURPLE',
            label : '@@theme.universal.colorScheme.deepPurple@@'
        },{
            value : 'INDIGO',
            label : '@@theme.universal.colorScheme.indigo@@'
        },{
            value : 'LAVENDER',
            label : '@@theme.universal.colorScheme.lavender@@'
        },{
            value : 'GHOSTWHITE',
            label : '@@theme.universal.colorScheme.ghostWhite@@'
        },{
            value : 'BLUE',
            label : '@@theme.universal.colorScheme.blue@@'
        },{
            value : 'LIGHT_BLUE',
            label : '@@theme.universal.colorScheme.lightBlue@@'
        },{
            value : 'DARKROYALBLUE',
            label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
        },{
            value : 'ROYALBLUE',
            label : '@@theme.universal.colorScheme.royalBlue@@'
        },{
            value : 'CORNFLOWERBLUE',
            label : '@@theme.universal.colorScheme.cornflowerBlue@@'
        },{
            value : 'ALICEBLUE',
            label : '@@theme.universal.colorScheme.aliceBlue@@'
        },{
            value : 'LIGHTSTEELBLUE',
            label : '@@theme.universal.colorScheme.lightSteelBlue@@'
        },{
            value : 'STEELBLUE',
            label : '@@theme.universal.colorScheme.steelBlue@@'
        },{
            value : 'LIGHTSKYBLUE',
            label : '@@theme.universal.colorScheme.lightSkyBlue@@'
        },{
            value : 'SKYBLUE',
            label : '@@theme.universal.colorScheme.skyBlue@@'
        },{
            value : 'DEEPSKYBLUE',
            label : '@@theme.universal.colorScheme.deepSkyBlue@@'
        },{
            value : 'AZURE',
            label : '@@theme.universal.colorScheme.azure@@'
        },{
            value : 'LIGHTCYAN',
            label : '@@theme.universal.colorScheme.lightCyan@@'
        },{
            value : 'CYAN',
            label : '@@theme.universal.colorScheme.cyan@@'
        },{
            value : 'TEAL',
            label : '@@theme.universal.colorScheme.teal@@'
        },{
            value : 'GREEN',
            label : '@@theme.universal.colorScheme.green@@'
        },{
            value : 'LIGHT_GREEN',
            label : '@@theme.universal.colorScheme.lightGreen@@'
        },{
            value : 'LIME',
            label : '@@theme.universal.colorScheme.lime@@'
        },{
            value : 'IVORY',
            label : '@@theme.universal.colorScheme.ivory@@'
        },{
            value : 'LEMONCHIFFON',
            label : '@@theme.universal.colorScheme.lemonChiffon@@'
        },{
            value : 'WHEAT',
            label : '@@theme.universal.colorScheme.wheat@@'
        },{
            value : 'YELLOW',
            label : '@@theme.universal.colorScheme.yellow@@'
        },{
            value : 'AMBER',
            label : '@@theme.universal.colorScheme.amber@@'
        },{
            value : 'ORANGE',
            label : '@@theme.universal.colorScheme.orange@@'
        },{
            value : 'DEEP_ORANGE',
            label : '@@theme.universal.colorScheme.deepOrange@@'
        },{
            value : 'BROWN',
            label : '@@theme.universal.colorScheme.brown@@'
        },{
            value : 'LIGHTGREY',
            label : '@@theme.universal.colorScheme.lightGrey@@'
        },{
            value : 'GREY',
            label : '@@theme.universal.colorScheme.grey@@'
        },{
            value : 'BLUE_GREY',
            label : '@@theme.universal.colorScheme.blueGrey@@'
        },{
            value : 'DEEP_GREY',
            label : '@@theme.universal.colorScheme.deepGrey@@'
        },{
            value : 'SILVER',
            label : '@@theme.universal.colorScheme.silver@@'
        },{
            value : 'BLACK',
            label : '@@theme.universal.colorScheme.black@@'
        },{
            value : 'WHITE',
            label : '@@theme.universal.colorScheme.white@@'
        },{
            value : 'custom',
            label : '@@theme.universal.colorScheme.custom@@'
        }]
    },
    {
        name : 'customButtonText',
        label : '@@theme.universal.customButtonText@@',
        type : 'color',
        control_field: 'buttonTextColor',
        control_value: 'custom',
        control_use_regex: 'false',
        required : 'true'
    },
    {
        name : 'menuFontColor',
        label : '@@theme.universal.menuFontColor@@',
        type : 'selectbox',
        options_label_processor : 'color',
        value: 'BLACK',
        options : [{
            value : '',
            label : ''
        },{
            value : 'RED',
            label : '@@theme.universal.colorScheme.red@@'
        },{
            value : 'PINK',
            label : '@@theme.universal.colorScheme.pink@@'
        },{
            value : 'LAVENDERBLUSH',
            label : '@@theme.universal.colorScheme.lavenderBlush@@'
        },{
            value : 'THISTLE',
            label : '@@theme.universal.colorScheme.thistle@@'
        },{
            value : 'PLUM',
            label : '@@theme.universal.colorScheme.plum@@'
        },{
            value : 'PURPLE',
            label : '@@theme.universal.colorScheme.purple@@'
        },{
            value : 'DEEP_PURPLE',
            label : '@@theme.universal.colorScheme.deepPurple@@'
        },{
            value : 'INDIGO',
            label : '@@theme.universal.colorScheme.indigo@@'
        },{
            value : 'LAVENDER',
            label : '@@theme.universal.colorScheme.lavender@@'
        },{
            value : 'GHOSTWHITE',
            label : '@@theme.universal.colorScheme.ghostWhite@@'
        },{
            value : 'BLUE',
            label : '@@theme.universal.colorScheme.blue@@'
        },{
            value : 'LIGHT_BLUE',
            label : '@@theme.universal.colorScheme.lightBlue@@'
        },{
            value : 'DARKROYALBLUE',
            label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
        },{
            value : 'ROYALBLUE',
            label : '@@theme.universal.colorScheme.royalBlue@@'
        },{
            value : 'CORNFLOWERBLUE',
            label : '@@theme.universal.colorScheme.cornflowerBlue@@'
        },{
            value : 'ALICEBLUE',
            label : '@@theme.universal.colorScheme.aliceBlue@@'
        },{
            value : 'LIGHTSTEELBLUE',
            label : '@@theme.universal.colorScheme.lightSteelBlue@@'
        },{
            value : 'STEELBLUE',
            label : '@@theme.universal.colorScheme.steelBlue@@'
        },{
            value : 'LIGHTSKYBLUE',
            label : '@@theme.universal.colorScheme.lightSkyBlue@@'
        },{
            value : 'SKYBLUE',
            label : '@@theme.universal.colorScheme.skyBlue@@'
        },{
            value : 'DEEPSKYBLUE',
            label : '@@theme.universal.colorScheme.deepSkyBlue@@'
        },{
            value : 'AZURE',
            label : '@@theme.universal.colorScheme.azure@@'
        },{
            value : 'LIGHTCYAN',
            label : '@@theme.universal.colorScheme.lightCyan@@'
        },{
            value : 'CYAN',
            label : '@@theme.universal.colorScheme.cyan@@'
        },{
            value : 'TEAL',
            label : '@@theme.universal.colorScheme.teal@@'
        },{
            value : 'GREEN',
            label : '@@theme.universal.colorScheme.green@@'
        },{
            value : 'LIGHT_GREEN',
            label : '@@theme.universal.colorScheme.lightGreen@@'
        },{
            value : 'LIME',
            label : '@@theme.universal.colorScheme.lime@@'
        },{
            value : 'IVORY',
            label : '@@theme.universal.colorScheme.ivory@@'
        },{
            value : 'LEMONCHIFFON',
            label : '@@theme.universal.colorScheme.lemonChiffon@@'
        },{
            value : 'WHEAT',
            label : '@@theme.universal.colorScheme.wheat@@'
        },{
            value : 'YELLOW',
            label : '@@theme.universal.colorScheme.yellow@@'
        },{
            value : 'AMBER',
            label : '@@theme.universal.colorScheme.amber@@'
        },{
            value : 'ORANGE',
            label : '@@theme.universal.colorScheme.orange@@'
        },{
            value : 'DEEP_ORANGE',
            label : '@@theme.universal.colorScheme.deepOrange@@'
        },{
            value : 'BROWN',
            label : '@@theme.universal.colorScheme.brown@@'
        },{
            value : 'LIGHTGREY',
            label : '@@theme.universal.colorScheme.lightGrey@@'
        },{
            value : 'GREY',
            label : '@@theme.universal.colorScheme.grey@@'
        },{
            value : 'BLUE_GREY',
            label : '@@theme.universal.colorScheme.blueGrey@@'
        },{
            value : 'DEEP_GREY',
            label : '@@theme.universal.colorScheme.deepGrey@@'
        },{
            value : 'SILVER',
            label : '@@theme.universal.colorScheme.silver@@'
        },{
            value : 'BLACK',
            label : '@@theme.universal.colorScheme.black@@'
        },{
            value : 'WHITE',
            label : '@@theme.universal.colorScheme.white@@'
        },{
            value : 'custom',
            label : '@@theme.universal.colorScheme.custom@@'
        }],
        control_field: 'themeScheme',
        control_value: 'light',
        control_use_regex: 'false',
        required : 'true'
    },
    {
        name : 'customMenuFontColor',
        label : '@@theme.universal.customMenuFontColor@@',
        type : 'color',
        control_field: 'menuFontColor',
        control_value: 'custom',
        control_use_regex: 'false',
        required : 'true'
    },
    {
        name : 'fontColor',
        label : '@@theme.universal.fontColor@@',
        type : 'selectbox',
        options_label_processor : 'color',
        value: 'WHITE',
        options : [{
            value : '',
            label : ''
        },{
            value : 'RED',
            label : '@@theme.universal.colorScheme.red@@'
        },{
            value : 'PINK',
            label : '@@theme.universal.colorScheme.pink@@'
        },{
            value : 'LAVENDERBLUSH',
            label : '@@theme.universal.colorScheme.lavenderBlush@@'
        },{
            value : 'THISTLE',
            label : '@@theme.universal.colorScheme.thistle@@'
        },{
            value : 'PLUM',
            label : '@@theme.universal.colorScheme.plum@@'
        },{
            value : 'PURPLE',
            label : '@@theme.universal.colorScheme.purple@@'
        },{
            value : 'DEEP_PURPLE',
            label : '@@theme.universal.colorScheme.deepPurple@@'
        },{
            value : 'INDIGO',
            label : '@@theme.universal.colorScheme.indigo@@'
        },{
            value : 'LAVENDER',
            label : '@@theme.universal.colorScheme.lavender@@'
        },{
            value : 'GHOSTWHITE',
            label : '@@theme.universal.colorScheme.ghostWhite@@'
        },{
            value : 'BLUE',
            label : '@@theme.universal.colorScheme.blue@@'
        },{
            value : 'LIGHT_BLUE',
            label : '@@theme.universal.colorScheme.lightBlue@@'
        },{
            value : 'DARKROYALBLUE',
            label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
        },{
            value : 'ROYALBLUE',
            label : '@@theme.universal.colorScheme.royalBlue@@'
        },{
            value : 'CORNFLOWERBLUE',
            label : '@@theme.universal.colorScheme.cornflowerBlue@@'
        },{
            value : 'ALICEBLUE',
            label : '@@theme.universal.colorScheme.aliceBlue@@'
        },{
            value : 'LIGHTSTEELBLUE',
            label : '@@theme.universal.colorScheme.lightSteelBlue@@'
        },{
            value : 'STEELBLUE',
            label : '@@theme.universal.colorScheme.steelBlue@@'
        },{
            value : 'LIGHTSKYBLUE',
            label : '@@theme.universal.colorScheme.lightSkyBlue@@'
        },{
            value : 'SKYBLUE',
            label : '@@theme.universal.colorScheme.skyBlue@@'
        },{
            value : 'DEEPSKYBLUE',
            label : '@@theme.universal.colorScheme.deepSkyBlue@@'
        },{
            value : 'AZURE',
            label : '@@theme.universal.colorScheme.azure@@'
        },{
            value : 'LIGHTCYAN',
            label : '@@theme.universal.colorScheme.lightCyan@@'
        },{
            value : 'CYAN',
            label : '@@theme.universal.colorScheme.cyan@@'
        },{
            value : 'TEAL',
            label : '@@theme.universal.colorScheme.teal@@'
        },{
            value : 'GREEN',
            label : '@@theme.universal.colorScheme.green@@'
        },{
            value : 'LIGHT_GREEN',
            label : '@@theme.universal.colorScheme.lightGreen@@'
        },{
            value : 'LIME',
            label : '@@theme.universal.colorScheme.lime@@'
        },{
            value : 'IVORY',
            label : '@@theme.universal.colorScheme.ivory@@'
        },{
            value : 'LEMONCHIFFON',
            label : '@@theme.universal.colorScheme.lemonChiffon@@'
        },{
            value : 'WHEAT',
            label : '@@theme.universal.colorScheme.wheat@@'
        },{
            value : 'YELLOW',
            label : '@@theme.universal.colorScheme.yellow@@'
        },{
            value : 'AMBER',
            label : '@@theme.universal.colorScheme.amber@@'
        },{
            value : 'ORANGE',
            label : '@@theme.universal.colorScheme.orange@@'
        },{
            value : 'DEEP_ORANGE',
            label : '@@theme.universal.colorScheme.deepOrange@@'
        },{
            value : 'BROWN',
            label : '@@theme.universal.colorScheme.brown@@'
        },{
            value : 'LIGHTGREY',
            label : '@@theme.universal.colorScheme.lightGrey@@'
        },{
            value : 'GREY',
            label : '@@theme.universal.colorScheme.grey@@'
        },{
            value : 'BLUE_GREY',
            label : '@@theme.universal.colorScheme.blueGrey@@'
        },{
            value : 'DEEP_GREY',
            label : '@@theme.universal.colorScheme.deepGrey@@'
        },{
            value : 'SILVER',
            label : '@@theme.universal.colorScheme.silver@@'
        },{
            value : 'BLACK',
            label : '@@theme.universal.colorScheme.black@@'
        },{
            value : 'WHITE',
            label : '@@theme.universal.colorScheme.white@@'
        },{
            value : 'custom',
            label : '@@theme.universal.colorScheme.custom@@'
        }]
    },
    {
        name : 'customFontColor',
        label : '@@theme.universal.customFontColor@@',
        type : 'color',
        control_field: 'fontColor',
        control_value: 'custom',
        control_use_regex: 'false',
        required : 'true'
    }],
},
{
    title : '@@theme.universal.advanced@@',
    properties : [
    {
        name : 'fav_icon',
        label : '@@theme.universal.favIcon@@',
        type: 'image',
        appPath: '[APP_PATH]',
        allowInput : 'true',
        isPublic : 'true',
        imageSize : 'width:16px;height:16px;'
    },
    {
        name : 'logo',
        label : '@@theme.universal.logo@@',
        type: 'image',
        appPath: '[APP_PATH]',
        allowInput : 'true',
        isPublic : 'true',
        imageSize : 'width:80px; height:35px; background-size: contain; background-repeat: no-repeat;'
    },
    {
        name : 'profile',
        label : '@@theme.universal.disabledProfile@@',
        type : 'checkbox',
        options : [{
            value : 'true',
            label : ''
        }]
    },
    {
        name : 'userImage',
        label : '@@theme.universal.userImage@@',
        type : 'selectbox',
        value : '',
        options : [{
            value : 'no',
            label : '@@theme.universal.userImage.no@@'
        },{
            value : '',
            label : '@@theme.universal.userImage.gravatar@@'
        },{
            value : 'hashVariable',
            label : '@@theme.universal.userImage.hashVariable@@'
        }]
    },
    {
        name : 'userImageUrlHash',
        label : '@@theme.universal.userImageUrlHash@@',
        type : 'textfield',
        control_field: 'userImage',
        control_value: 'hashVariable',
        control_use_regex: 'false',
        required : 'true'
    },
    {
        name : 'inbox',
        label : '@@theme.universal.inbox@@',
        type : 'selectbox',
        value : 'current',
        options : [{
            value : '',
            label : '@@theme.universal.inbox.no@@'
        },{
            value : 'all',
            label : '@@theme.universal.inbox.all@@'
        },{
            value : 'current',
            label : '@@theme.universal.inbox.current@@'
        }]
    },    
    {
        name : 'homeUrl',
        label : '@@theme.universal.homeUrl@@',
        type : 'textfield'
    },    
    {
        name : 'shortcutLinkLabel',
        label : '@@theme.universal.shortcutLinkLabel@@',
        value : '@@theme.universal.shortcut@@',
        type : 'textfield'
    },
    {
        name : 'shortcut',
        label : '@@theme.universal.shortcut@@',
        description : '@@theme.universal.shortcut.desc@@',
        type : 'grid',
        columns : [{
            key : 'label',
            label : '@@theme.universal.label@@'
        },
        {
            key : 'href',
            label : '@@theme.universal.href@@'
        },
        {
            key : 'target',
            label : '@@theme.universal.target@@',
            options : [
                {value: '', label: ''},
                {value: '_blank', label: '@@theme.universal.target.newTab@@'},
            ]
        },
        {
            key : 'isPublic',
            label : '@@theme.universal.shortcut.public@@',
            type : 'truefalse'
        }]
    },
    {
        name : 'userMenu',
        label : '@@theme.universal.userMenu@@',
        description : '@@theme.universal.userMenu.desc@@',
        type : 'grid',
        columns : [{
            key : 'label',
            label : '@@theme.universal.label@@'
        },
        {
            key : 'href',
            label : '@@theme.universal.href@@'
        },
        {
            key : 'target',
            label : '@@theme.universal.target@@',
            options : [
                {value: '', label: ''},
                {value: '_blank', label: '@@theme.universal.target.newTab@@'},
            ]
        }]
    },
    {
        name : 'enableResponsiveSwitch',
        label : '@@theme.universal.enableResponsiveSwitch@@',
        type : 'checkbox',
        value : 'true',
        options : [{
            value : 'true',
            label : ''
        }]
    },
    {
        name : 'removeAssignmentTitle',
        label : '@@theme.universal.removeAssignmentTitle@@',
        type : 'checkbox',
        options : [{
            value : 'true',
            label : ''
        }]
    },
    {
        name : 'homeAttractBanner',
        label : '@@theme.universal.homeAttractBanner@@',
        type : 'codeeditor',
        mode : 'html'
    },
    {
        name : 'css',
        label : '@@theme.universal.customCss@@',
        type : 'codeeditor',
        mode : 'css'
    },
    {
        name : 'js',
        label : '@@theme.universal.customJavascript@@',
        type : 'codeeditor',
        mode : 'javascript'
    },
    {
        name : 'subheader',
        label : '@@theme.universal.subHeader@@',
        type : 'codeeditor',
        mode : 'html'
    },
    {
        name : 'subfooter',
        label : '@@theme.universal.subFooter@@',
        type : 'codeeditor',
        mode : 'html'
    },
    {
        name: 'disableHelpGuide',
        label: '@@theme.universal.disableHelpGuide@@',
        type: 'checkbox',
        value: 'false',
        options: [{
            value: 'true',
            label: ''
        }]
    }]
},
{
    title : '@@pwa.settings@@',
    properties : [
    {
        name: 'disablePwa',
        label: '@@pwa.disablePwa@@',
        type: 'checkbox',
        value: 'false',
        options: [{
            value: 'true',
            label: ''
        }]
    },
    {
        name: 'disablePush',
        label: '@@push.disablePush@@',
        type: 'checkbox',
        value: 'false',
        options: [{
            value: 'true',
            label: ''
        }]
    },
    {
        name: 'urlsToCache',
        label: '@@pwa.urlsToCache@@',
        type:'textarea',
        description: '@@pwa.urlsToCache.desc@@',
        cols:'40',
        rows:'10'
    }],
    buttons : [{
        name : 'testpush',    
        label : '@@push.sendTestPush@@',
        ajax_url : '[CONTEXT_PATH]/web/json/push/message',
        ajax_method : 'POST',
        addition_fields : [
        {
            name : 'username',
            label : '@@push.username@@',
            type : 'textfield',
            required : 'True'
        },
        {
            name : 'title',
            label : '@@push.title@@',
            type : 'textfield',
            required : 'True'
        },
        {
            name : 'text',
            label : '@@push.text@@',
            type : 'textfield',
            required : 'True'
        },
        {
            name : 'url',
            label : '@@push.url@@',
            type : 'textfield',
            required : 'False'
        },
        {
            name : 'icon',
            label : '@@push.icon@@',
            type : 'textfield',
            required : 'False'
        },
        {
            name : 'badge',
            label : '@@push.badge@@',
            type : 'textfield',
            required : 'False'
        }]
    }]
}]





c. Manage the dependency libraries of your plugin

Our plugin is using dbcp, javax.servlet.http.HttpServletRequest and javax.servlet.http.HttpServletResponse class, so we will need to add jsp-api and commons-dbcp library to our POM file.

<!-- Change plugin specific dependencies here -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jsp-api</artifactId>
    <version>2.0</version>
</dependency>
<!-- End change plugin specific dependencies here -->

d. Make your plugin internationalization (i18n) ready

We are using i18n message key in getLabel and getDescription method. We also used i18n message key in our properties options definition as well. So, we will need to create a message resource bundle properties file for our plugin.Create directory "resources/messages" under "eva-theme/src/main" directory. Then, create a "EvaTheme.properties" file in the folder. In the properties file, let us add all the message keys and labels as below.

theme.eva.config=Configure Eva Theme

e. Register your plugin to the Felix Framework

We will have to register our plugin class in Activator class (Auto generated in the same class package) to tell the Felix Framework that this is a plugin.

    public void start(BundleContext context) {
        registrationList = new ArrayList<ServiceRegistration>();
        //Register plugin here
        registrationList.add(context.registerService(EvaTheme.class.getName(), new EvaTheme(), null));
    } 

f. Build it and test

Let build our plugin. Once the building process is done, we will find that a "eva-theme-7.0.0.jar" file is created under "eva-theme/target" directory.

Then, let us upload the plugin jar to Manage Plugins. After uploading the jar file, double check that the plugin is uploaded and activated correctly.

Configure any of your app's userview to point to the newly built theme.


8. Take a step further, share it or sell it

You can download the source code from jdbc_options_binder_src.zip.

To download the ready-to-use plugin jar, please find it in http://marketplace.joget.org/.

 




  • No labels