...
We can refer to the documentation of Userview Theme Plugin and look at its Overridable Methods.
6. Prepare your development environment
...
7. Just code it!
| Thai |
|---|
เพียงแค่รหัส! |
a. Extending the abstract class of a plugin type
In this case, we are extending UniversalTheme rather than UserviewV5Theme so that we can customize our theme on the top of it.
b. Implement all the abstract methods
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
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");
}
} |
...
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".
We have also added line 25-33 to allow app designer to upload their own background image to be placed on the left in the form design. The label key used here is "theme.eva.formImage".
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
[{
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 : 'themeSchemeform_image',
label : '@@theme.universaleva.themeScheme@@formImage@@',
type : 'selectboximage',
valueappPath: 'light[APP_PATH]',
optionsallowInput : [{'true',
valueisPublic : 'darktrue',
imageSize : 'width:100px; height: label200px; background-repeat: '@@theme.universal.themeScheme.dark@@repeat-y;'
},{
{
valuename : 'lightthemeScheme',
label : '@@theme.universal.themeScheme.light@@themeScheme@@',
}]
type }: 'selectbox',
{
name value: 'primaryColorlight',
labeloptions : '@@theme.universal.primaryColor@@',
[{
type : 'selectbox value : 'dark',
options_label_processor : 'color',
label value: 'DARKROYALBLUE',@@theme.universal.themeScheme.dark@@'
options : [},{
value : 'light',
label : '@@theme.universal.themeScheme.light@@'
}]
},{
{
valuename : 'REDprimaryColor',
label : '@@theme.universal.colorScheme.red@@primaryColor@@',
type }: 'selectbox',{
value options_label_processor : 'PINKcolor',
label value: '@@theme.universal.colorScheme.pink@@'DARKROYALBLUE',
},options : [{
value : 'LAVENDERBLUSH',
label : '@@theme.universal.colorScheme.lavenderBlush@@'
},{
value : 'THISTLERED',
label : '@@theme.universal.colorScheme.thistle@@red@@'
},{
value : 'PLUMPINK',
label : '@@theme.universal.colorScheme.plum@@pink@@'
},{
value : 'PURPLELAVENDERBLUSH',
label : '@@theme.universal.colorScheme.purple@@lavenderBlush@@'
},{
value : 'DEEP_PURPLETHISTLE',
label : '@@theme.universal.colorScheme.deepPurple@@thistle@@'
},{
value : 'INDIGOPLUM',
label : '@@theme.universal.colorScheme.indigo@@plum@@'
},{
value : 'LAVENDERPURPLE',
label : '@@theme.universal.colorScheme.lavender@@purple@@'
},{
value : 'GHOSTWHITEDEEP_PURPLE',
label : '@@theme.universal.colorScheme.ghostWhite@@deepPurple@@'
},{
value : 'BLUEINDIGO',
label : '@@theme.universal.colorScheme.blue@@indigo@@'
},{
value : 'LIGHT_BLUELAVENDER',
label : '@@theme.universal.colorScheme.lightBlue@@lavender@@'
},{
value : 'DARKROYALBLUEGHOSTWHITE',
label : '@@theme.universal.colorScheme.darkRoyalBlue@@ghostWhite@@'
},{
value : 'ROYALBLUEBLUE',
label : '@@theme.universal.colorScheme.royalBlue@@blue@@'
},{
value : 'CORNFLOWERBLUELIGHT_BLUE',
label : '@@theme.universal.colorScheme.cornflowerBlue@@lightBlue@@'
},{
value : 'ALICEBLUEDARKROYALBLUE',
label : '@@theme.universal.colorScheme.aliceBlue@@darkRoyalBlue@@'
},{
value : 'LIGHTSTEELBLUEROYALBLUE',
label : '@@theme.universal.colorScheme.lightSteelBlue@@royalBlue@@'
},{
value : 'STEELBLUECORNFLOWERBLUE',
label : '@@theme.universal.colorScheme.steelBlue@@cornflowerBlue@@'
},{
value : 'LIGHTSKYBLUEALICEBLUE',
label : '@@theme.universal.colorScheme.lightSkyBlue@@aliceBlue@@'
},{
value : 'SKYBLUELIGHTSTEELBLUE',
label : '@@theme.universal.colorScheme.skyBlue@@lightSteelBlue@@'
},{
value : 'DEEPSKYBLUESTEELBLUE',
label : '@@theme.universal.colorScheme.deepSkyBlue@@steelBlue@@'
},{
value : 'AZURELIGHTSKYBLUE',
label : '@@theme.universal.colorScheme.azure@@lightSkyBlue@@'
},{
value : 'LIGHTCYANSKYBLUE',
label : '@@theme.universal.colorScheme.lightCyan@@skyBlue@@'
},{
value : 'CYANDEEPSKYBLUE',
label : '@@theme.universal.colorScheme.cyan@@deepSkyBlue@@'
},{
value : 'TEALAZURE',
label : '@@theme.universal.colorScheme.teal@@azure@@'
},{
value : 'GREENLIGHTCYAN',
label : '@@theme.universal.colorScheme.green@@lightCyan@@'
},{
value : 'LIGHT_GREENCYAN',
label : '@@theme.universal.colorScheme.lightGreen@@cyan@@'
},{
value : 'LIMETEAL',
label : '@@theme.universal.colorScheme.lime@@teal@@'
},{
value : 'IVORYGREEN',
label : '@@theme.universal.colorScheme.ivory@@green@@'
},{
value : 'LEMONCHIFFONLIGHT_GREEN',
label : '@@theme.universal.colorScheme.lemonChiffon@@lightGreen@@'
},{
value : 'WHEATLIME',
label : '@@theme.universal.colorScheme.wheat@@lime@@'
},{
value : 'YELLOWIVORY',
label : '@@theme.universal.colorScheme.yellow@@ivory@@'
},{
value : 'AMBERLEMONCHIFFON',
label : '@@theme.universal.colorScheme.amber@@lemonChiffon@@'
},{
value : 'ORANGEWHEAT',
label : '@@theme.universal.colorScheme.orange@@wheat@@'
},{
value : 'DEEP_ORANGEYELLOW',
label : '@@theme.universal.colorScheme.deepOrange@@yellow@@'
},{
value : 'BROWNAMBER',
label : '@@theme.universal.colorScheme.brown@@amber@@'
},{
value : 'LIGHTGREYORANGE',
label : '@@theme.universal.colorScheme.lightGrey@@orange@@'
},{
value : 'GREYDEEP_ORANGE',
label : '@@theme.universal.colorScheme.grey@@deepOrange@@'
},{
value : 'BLUE_GREYBROWN',
label : '@@theme.universal.colorScheme.blueGrey@@brown@@'
},{
value : 'DEEP_GREYLIGHTGREY',
label : '@@theme.universal.colorScheme.deepGrey@@lightGrey@@'
},{
value : 'SILVERGREY',
label : '@@theme.universal.colorScheme.silver@@grey@@'
},{
value : 'BLACKBLUE_GREY',
label : '@@theme.universal.colorScheme.black@@blueGrey@@'
},{
value : 'WHITEDEEP_GREY',
label : '@@theme.universal.colorScheme.white@@deepGrey@@'
},{
value : 'customSILVER',
label : '@@theme.universal.colorScheme.custom@@silver@@'
}]
},{
{
namevalue : 'customPrimaryBLACK',
label : '@@theme.universal.customPrimary@@',
colorScheme.black@@'
},{
typevalue : 'colorWHITE',
control_fieldlabel : 'primaryColor',@@theme.universal.colorScheme.white@@'
},{
control_value value : 'custom',
control_use_regex label : 'false',@@theme.universal.colorScheme.custom@@'
required : 'true'}]
},
{
name : 'customPrimaryDarkcustomPrimary',
label : '@@theme.universal.customPrimaryDark@@customPrimary@@',
type : 'color',
control_field: 'primaryColor',
control_value: 'custom',
control_use_regex: 'false',
required : 'true'
},
{
name : 'customPrimaryLightcustomPrimaryDark',
label : '@@theme.universal.customPrimaryLight@@customPrimaryDark@@',
type : 'color',
control_field: 'primaryColor',
control_value: 'custom',
control_use_regex: 'false'
},
{
name : 'accentColorcustomPrimaryLight',
label : '@@theme.universal.accentColor@@customPrimaryLight@@',
type : 'selectboxcolor',
options_label_processor control_field: 'colorprimaryColor',
control_value: 'BLUEcustom',
options : [{control_use_regex: 'false'
},
{
valuename : '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'
}]
}]
}] |
...
After which we have carried out the task of customizing, we would need the ability to insert the CSS/JS code into the plugin itself. We can introduce these 2 methods into the class.
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
@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";
\n";
cssJs += "<script src=\"" + data.get("context_path") + "/plugin/"+getClassName()+"/eva.js?build=" + bn + "\" async></script>\n";
//overrides with user's selected form image background if set
if(getProperty("form_image") != null && !getProperty("form_image").toString().isEmpty()){
cssJs += "<style type=\"text/css\">";
cssJs += "<script src=\".form-container{ background-image : url('" + data.getgetProperty("contextform_pathimage").toString() + "/plugin/"+getClassName()+"/eva.js?build=" + bn + "\" async></script>\n')}";
cssJs += "</style>";
}
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;
} |
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
main #form-canvas .label {
display: none;
}
legend, main #form-canvas .form-section-title span, main #form-canvas .subform-section-title span{
text-transform: uppercase;
padding: 10px 0;
font-size: xx-large;
margin: 10px 0;
background: none;
color: #222;
}
body input:not([type]), body input[type=text], body input[type=password], body input[type=email], body input[type=url], body input[type=time], body input[type=date], body input[type=datetime], body input[type=datetime-local], body input[type=tel], body input[type=number], body input[type=search], body textarea, body select:not([class^=ui]), body .editor-cell input:not([type]), body .editor-cell input[type=text], body .editor-cell input[type=password], body .editor-cell input[type=email], body .editor-cell input[type=url], body .editor-cell input[type=time], body .editor-cell input[type=date], body .editor-cell input[type=datetime], body .editor-cell input[type=datetime-local], body .editor-cell input[type=tel], body .editor-cell input[type=number], body .editor-cell input[type=search], body .editor-cell textarea, body .editor-cell select:not([class^=ui]){
max-width: 100%;
width: 100%;
}
body #form-canvas .form-section {
border-radius: 15px;
}
#form-canvas *, #form-canvas textarea {
font-size: 16px;
}
body .form-cell, body .subform-cell {
padding-bottom: 10px;
}
.form-container{
padding-left: 220px;
background-image: url("eva-bg.jpg");
background-color: #f9f9f9;
background-position: left;
background-repeat: repeat-y;
background-clip: border-box;
background-size: 190px;
border-radius: 10px;
margin: 10px;
padding-top: 10px;
} |
...
| Code Block |
|---|
theme.eva.config=Configure Eva Theme
theme.eva.formImage=Form Image |
f. Register your plugin to the Felix Framework
...
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_srceva-theme.zip.
To download the ready-to-use plugin jar, please find it in http://marketplace.joget.org/.
| Thai |
|---|
คุณสามารถดาวน์โหลดซอร์สโค้ดจาก eva-theme.zip. |
| Thai |
คุณสามารถดาวน์โหลดซอร์สโค้ดจาก jdbc_options_binder_src.zip หากต้องการดาวน์โหลด jar ปลั๊กอินที่พร้อมใช้งานโปรดค้นหาได้ที่ http://marketplace.joget.org/ |