...
1. What is the problem?
| Thai |
|---|
อะไรคือปัญหา? |
| English |
|---|
| Extends and customize the look and feel of existing Userview Theme to obtain different look and feel on the end user's interface. |
| Thai |
|---|
2. How to solve the problem?
...
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?
| Thai |
|---|
ผลลัพธ์และผลลัพธ์ที่คาดหวังของปลั๊กอินของคุณคืออะไร? |
The first column of returned JDBC result will be the value of the option and second column is the label of the option. There will be another optional third column for grouping when not using AJAX for cascading drop-down list.
| Thai |
|---|
คอลัมน์แรกของผลลัพธ์ JDBC ที่ส่งคืนจะเป็นค่าของตัวเลือกและคอลัมน์ที่สองคือป้ายกำกับของตัวเลือก จะมีอีกคอลัมน์ที่สามที่เป็นทางเลือกสำหรับการจัดกลุ่มเมื่อไม่ได้ใช้ AJAX สำหรับรายการดรอปดาวน์แบบเรียงซ้อน |
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 5. Are there any resources/API that can be reused?
| Thai |
|---|
มีทรัพยากร / API ที่สามารถนำกลับมาใช้ใหม่ได้หรือไม่? |
We can refer to the implementation of other available Form Options Binder plugins. Joget default datasource can be retrieve with AppUtil.getApplicationContext().getBean("setupDataSource").
...
documentation of Userview Theme Plugin and look at its Overridable Methods.
6. Prepare your development environment
...
The following tutorial is prepared with a Macbook Pro and Joget Source Code version 57.0-SNAPSHOT. 0. Please refer to the Guideline for developing Developing a pluginPlugin article for other platform commands.
...
| Thai |
|---|
เราจำเป็นต้องให้ซอร์สโค้ด Joget Workflow ของเราพร้อมและสร้างโดยปฏิบัติตาม this guideline บทช่วยสอนต่อไปนี้จัดทำขึ้นด้วย Macbook Pro และ Joget Source Code เวอร์ชั่น 57.0.0 -SNAPSHOT โปรดอ้างอิง Guideline for developing Developing a pluginPlugin สำหรับคำสั่งแพลตฟอร์มอื่น ๆ สมมติว่าไดเรกทอรีโฟลเดอร์ของเรามีดังนี้ |
| Code Block |
|---|
- Home
- joget
- plugins
- jw-community
-57.0.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.
...
| Code Block | ||
|---|---|---|
| ||
cd joget/plugins/ ~/joget/jw-community/57.0.0-SNAPSHOT/wflow-plugin-archetype/create-plugin.sh org.joget.tutorial jdbc_options_binder 5.0.0eva-theme 7.0-SNAPSHOT |
Then, the shell script will ask us to key in a version number for the plugin and request for a confirmation before generating the maven project.
...
| Code Block | ||
|---|---|---|
| ||
Define value for property 'version': 1.0-SNAPSHOT: : 57.0.0 [INFO] Using property: package = org.joget.tutorial Confirm properties configuration: groupId: org.joget.tutorial artifactId: jdbc_options_bindereva-theme version: 57.0.0 package: org.joget.tutorial Y: : y |
...
Open the maven project with your favour favorite IDE. I will be using NetBeans.
| Thai |
|---|
เราควรได้รับข้อความ "BUILD SUCCESS" ที่ปรากฏในเครื่องของเราและโฟลเดอร์ "jdbc_options_bindereva-theme" ที่สร้างในโฟลเดอร์ "plugins" เปิดโครงการ maven ด้วย IDE ที่คุณโปรดปราน ฉันจะใช้ NetBeans |
...
a. Extending the abstract class of a plugin type
| Thai |
|---|
การขยายคลาสนามธรรมของประเภทปลั๊กอิน |
...
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 |
...
To make it work as a Form Options Binder, we will need to implement org.joget.apps.form.model.FormLoadOptionsBinder interface. We would like to support AJAX Cascading Drop-Down List as well, so we need to implement org.joget.apps.form.model.FormAjaxOptionsBinder interface also.
Please refer to Form Options Binder Plugin.
| Thai |
|---|
สร้างคลาส "JdbcOptionsBinder" ภายใต้แพ็คเกจ "org.joget.tutorial" จากนั้นขยายคลาสด้วย org.joget.apps.form.model.FormBinder คลาสนามธรรม เพื่อให้มันทำงานเป็น Binder ตัวเลือกแบบฟอร์มเราจะต้องใช้อินเตอร์เฟส org.joget.apps.form.model.FormLoadOptionsBinder เราต้องการสนับสนุน AJAX Cascading Drop-Down List เช่นกันดังนั้นเราจึงจำเป็นต้องใช้ส่วนต่อประสาน org.joget.apps.form.model.FormAjaxOptionsBinder เช่นกัน โปรดอ้างอิงถึงปลั๊กอินตัวเลือกแบบฟอร์ม |
b. Implement all the abstract methods
| Thai |
|---|
ใช้วิธีนามธรรมทั้งหมด |
As usual, we have to implement all the abstract methods. We will be using AppPluginUtil.getMessage method to support i18n and using constant variable MESSAGE_PATH for message resource bundle directory.
| Thai |
|---|
ตามปกติเราต้องใช้วิธีนามธรรมทั้งหมด เราจะใช้วิธี AppPluginUtil.getMessage เพื่อสนับสนุน i18n และการใช้ตัวแปร MESSAGE_PATH คงที่สำหรับไดเรกทอรีทรัพยากรข้อความมัด |
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
package org.joget.tutorial; import org.joget.apps.app.service.AppPluginUtil; import org.joget.apps.app.service.AppUtil; import org.joget.apps.form.model.Element; import org.joget.apps.form.model.FormAjaxOptionsBinder; import org.joget.apps.form.model.FormBinder; import org.joget.apps.form.model.FormData; import org.joget.apps.form.model.FormLoadOptionsBinder; import org.joget.apps.form.model.FormRowSet; public class JdbcOptionsBinder extends FormBinder implements FormLoadOptionsBinder, FormAjaxOptionsBinder { private final static String MESSAGE_PATH = "messages/JdbcOptionsBinder"; public String getName.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 "JDBC Option Binder7.0.0"; } @Override public String getVersiongetDescription() { return "5.0.0Eva Theme based on Universal Theme to support PWA"; } @Override public String getClassNamegetLabel() { return getClass().getName(); } @Override public String getLabelgetClassName() { //support i18n return AppPluginUtil.getMessage("org.joget.tutorial.JdbcOptionsBinder.pluginLabel", getClassName(), MESSAGE_PATHgetClass().getName(); } @Override public String getDescriptiongetPropertyOptions() { //support i18n return AppPluginUtil.getMessage("org.joget.tutorial.JdbcOptionsBinder.pluginDesc", getClassName(), MESSAGE_PATH); } public String getPropertyOptions() { return AppUtil.readPluginResource(getClassName(return AppUtil.readPluginResource(getClass().getName(), "/properties/userview/jdbcOptionsBinderEvaTheme.json", null, true, MESSAGE_PATH"messages/userview/EvaTheme"); } public FormRowSet load(Element element, String primaryKey, FormData formData) { return loadAjaxOptions(null); // reuse loadAjaxOptions method } public boolean useAjax() { return "true".equalsIgnoreCase(getPropertyString("useAjax")); // let user to decide whether or not to use ajax for dependency field } public FormRowSet loadAjaxOptions(String[] dependencyValues) { throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates. } } |
Then, we have to create a UI for admin user to provide inputs for our plugin. In getPropertyOptions method, we have already specify that our Plugin Properties Options definition file is located at "/properties/jdbcOptionsBinder.json". Let us create a directory "resources/properties" under "jdbc_options_binder/src/main" directory. After creating the directory, create a file named "jdbcOptionsBinder.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.
| Thai |
|---|
จากนั้นเราต้องสร้าง UI สำหรับผู้ใช้ผู้ดูแลระบบเพื่อให้อินพุตสำหรับปลั๊กอินของเรา ในวิธีการ getPropertyOptions เราได้ระบุไว้แล้วว่าไฟล์ข้อกำหนด Plugin Properties Options ของเราตั้งอยู่ที่ "/properties/jdbcOptionsBinder.json" ให้เราสร้างไดเรกทอรี "resources / properties" ภายใต้ไดเร็กทอรี "jdbc_options_binder / src / main" หลังจากสร้างไดเร็กทอรีให้สร้างไฟล์ชื่อ "jdbcOptionsBinder.json" ในโฟลเดอร์ "properties" ในไฟล์ตัวเลือกคำจำกัดความของคุณสมบัติเราจะต้องระบุตัวเลือกดังต่อไปนี้ โปรดทราบว่าเราจะใช้ไวยากรณ์ "@@ message.key @@" เพื่อรองรับ i18n ในตัวเลือกคุณสมบัติของเรา |
} |
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.
| Thai |
|---|
จากนั้นเราต้องสร้าง UI สำหรับผู้ใช้ผู้ดูแลระบบเพื่อให้อินพุตสำหรับปลั๊กอินของเรา ในวิธีการ getPropertyOptions เราได้ระบุไว้แล้วว่าไฟล์ข้อกำหนด Plugin Properties Options ของเราตั้งอยู่ที่ "/properties/jdbcOptionsBinder.json" ให้เราสร้างไดเรกทอรี "resources / properties" ภายใต้ไดเร็กทอรี "eva-theme / src / main" หลังจากสร้างไดเร็กทอรีให้สร้างไฟล์ชื่อ "EvaTheme.json" ในโฟลเดอร์ "properties" ในไฟล์ตัวเลือกคำจำกัดความของคุณสมบัติเราจะต้องระบุตัวเลือกดังต่อไปนี้ โปรดทราบว่าเราจะใช้ไวยากรณ์ "@@ message.key @@" เพื่อรองรับ i18n ในตัวเลือกคุณสมบัติของเรา |
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 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 | ||||||
|---|---|---|---|---|---|---|
| ||||||
| Code Block | ||||||
| ||||||
[{
title : '@@form@@theme.jdbcOptionsBindereva.config@@',
properties : [
{
name : 'jdbcDatasourcehorizontal_menu',
label : '@@form@@theme.jdbcOptionsBinderuniversal.datasource@@menu_position@@',
type : 'selectbox',
options : [{
value : 'custom',
label : '@@form@@theme.universal.jdbcOptionsBindermenu.customDatasource@@sideMenu@@'
},
{
value : 'defaulttrue',
label : '@@form@@theme.universal.jdbcOptionsBindermenu.defaultDatasource@@horizontalMenu@@'
}],
value : 'default'{
},{
namevalue : 'jdbcDriverhorizontal_inline',
label : '@@form@@theme.universal.jdbcOptionsBindermenu.driver@@'inlineHorizontalMenu@@'
},
{
description : '@@form.jdbcOptionsBinder.driver.desc@@',
typevalue : 'textfieldno',
value label : 'com@@theme.mysqluniversal.jdbcmenu.Driverno@@',
control_field: 'jdbcDatasource',}]
},
{
control_valuename : 'customform_image',
label control_use_regex: 'false@@theme.eva.formImage@@',
required type: 'trueimage',
},{ appPath: '[APP_PATH]',
nameallowInput : 'jdbcUrltrue',
labelisPublic : '@@form.jdbcOptionsBinder.url@@true',
typeimageSize : 'textfield'width:100px; height: 200px; background-repeat: repeat-y;'
},
{
value name : 'jdbc:mysql://localhost/jwdb?characterEncoding=UTF8themeScheme',
control_fieldlabel : 'jdbcDatasource@@theme.universal.themeScheme@@',
control_valuetype : 'customselectbox',
control_use_regexvalue: 'falselight',
requiredoptions : 'true'[{
},{
namevalue : 'jdbcUserdark',
label label : '@@form@@theme.universal.jdbcOptionsBinderthemeScheme.username@@dark@@',
type : 'textfield',},{
control_field: 'jdbcDatasource',
value control_value: 'customlight',
control_use_regex: 'false',
valuelabel : 'root',@@theme.universal.themeScheme.light@@'
required}]
: 'true'},
},{
name : 'jdbcPasswordprimaryColor',
label : '@@form@@theme.jdbcOptionsBinderuniversal.password@@primaryColor@@',
type : 'passwordselectbox',
control_fieldoptions_label_processor : 'jdbcDatasourcecolor',
control_value: 'customDARKROYALBLUE',
control_use_regexoptions : 'false',
[{
value : '',
},{
namelabel : 'useAjax',
label },{
value : '@@form.jdbcOptionsBinder.useAjax@@RED',
type label : 'checkbox',@@theme.universal.colorScheme.red@@'
options : [},{
value : 'truePINK',
label : '@@theme.universal.colorScheme.pink@@'
}],{
},{
namevalue : 'addEmptyLAVENDERBLUSH',
label : '@@form@@theme.universal.jdbcOptionsBindercolorScheme.addEmpty@@lavenderBlush@@',
type : 'checkbox',
options : [},{
value : 'trueTHISTLE',
label : '@@theme.universal.colorScheme.thistle@@'
}],{
},{
namevalue : 'emptyLabelPLUM',
label : '@@form@@theme.universal.jdbcOptionsBindercolorScheme.emptyLabel@@plum@@',
type : 'textfield',
},{
value control_field: 'addEmptyPURPLE',
control_value label : 'true',@@theme.universal.colorScheme.purple@@'
control_use_regex: 'false',
},{
value : 'DEEP_PURPLE',
},{
namelabel : 'sql',
@@theme.universal.colorScheme.deepPurple@@'
},{
labelvalue : '@@form.jdbcOptionsBinder.sql@@INDIGO',
description label : '@@form@@theme.jdbcOptionsBinderuniversal.sqlcolorScheme.desc@@indigo@@',
type : 'codeeditor',
},{
modevalue : 'sqlLAVENDER',
required : 'true'
label }],: '@@theme.universal.colorScheme.lavender@@'
buttons : [},{
name value : 'testConnectionGHOSTWHITE',
label : '@@form@@theme.universal.jdbcOptionsBindercolorScheme.testConnection@@',
ghostWhite@@'
},{
ajax_urlvalue : '[CONTEXT_PATH]/web/json/app[APP_PATH]/plugin/org.joget.tutorial.JdbcOptionsBinder/service?action=testConnectionBLUE',
fields : ['jdbcDriver', 'jdbcUrl', 'jdbcUser', 'jdbcPassword'], label : '@@theme.universal.colorScheme.blue@@'
control_field: 'jdbcDatasource',},{
control_value value : 'customLIGHT_BLUE',
control_use_regex: 'false'
label }]
}] |
In the Properties Options, we added a button for testing connection when using a custom datasource. This button will call a JSON API to do the test. So, our plugin will need to implement org.joget.plugin.base.PluginWebSupport interface to make it as a Web Service Plugin as well. Let's implement the webService method as follows, to test the JDBC connection.
| Thai |
|---|
ในตัวเลือกคุณสมบัติเราเพิ่มปุ่มสำหรับทดสอบการเชื่อมต่อเมื่อใช้แหล่งข้อมูลที่กำหนดเอง ปุ่มนี้จะเรียก JSON API เพื่อทำการทดสอบ ดังนั้นปลั๊กอินของเราจะต้องใช้ส่วนติดต่อ org.joget.plugin.base.PluginWebSupport เพื่อทำให้เป็นปลั๊กอินบริการบนเว็บเช่นกัน ลองใช้วิธี Web Service Plugin ดังนี้เพื่อทดสอบการเชื่อมต่อ JDBC |
| Code Block | ||
|---|---|---|
| ||
/** * JSON API for test connection button : '@@theme.universal.colorScheme.lightBlue@@' },{ *value @param request: 'DARKROYALBLUE', * @param response *label @throws ServletException: '@@theme.universal.colorScheme.darkRoyalBlue@@' * @throws IOException },{ */ public void webService(HttpServletRequest request,value HttpServletResponse response) throws ServletException, IOException {: 'ROYALBLUE', //Limit the API for adminlabel usage only: '@@theme.universal.colorScheme.royalBlue@@' boolean isAdmin = WorkflowUtil.isCurrentUserInRole(WorkflowUserManager.ROLE_ADMIN);},{ if (!isAdmin) { value : 'CORNFLOWERBLUE', response.sendError(HttpServletResponse.SC_UNAUTHORIZED); label : '@@theme.universal.colorScheme.cornflowerBlue@@' return; },{ } value : 'ALICEBLUE', String actionlabel = request.getParameter("action");: '@@theme.universal.colorScheme.aliceBlue@@' if ("testConnection".equals(action)) },{ Stringvalue message = "";: 'LIGHTSTEELBLUE', Connectionlabel conn = null;: '@@theme.universal.colorScheme.lightSteelBlue@@' try },{ value : 'STEELBLUE', AppDefinition appDef = AppUtil.getCurrentAppDefinition(); label : '@@theme.universal.colorScheme.steelBlue@@' },{ value : 'LIGHTSKYBLUE', String jdbcDriver = AppUtil.processHashVariable(request.getParameter("jdbcDriver"), null, null,label null, appDef); : '@@theme.universal.colorScheme.lightSkyBlue@@' },{ String jdbcUrl = AppUtil.processHashVariable(request.getParameter("jdbcUrl"), null, null, null, appDef); value : 'SKYBLUE', label : '@@theme.universal.colorScheme.skyBlue@@' String jdbcUser = AppUtil.processHashVariable(request.getParameter("jdbcUser"), null, null, null, appDef); },{ value : 'DEEPSKYBLUE', String jdbcPassword = AppUtil.processHashVariable(SecurityUtil.decrypt(request.getParameter("jdbcPassword")), null, null, null, appDef); label : '@@theme.universal.colorScheme.deepSkyBlue@@' },{ value : 'AZURE', label : '@@theme.universal.colorScheme.azure@@' Properties dsProps = new Properties(); },{ value dsProps.put("driverClassName", jdbcDriver);: 'LIGHTCYAN', label dsProps.put("url", jdbcUrl);: '@@theme.universal.colorScheme.lightCyan@@' },{ dsProps.put("username", jdbcUser); value : 'CYAN', dsProps.put("password", jdbcPassword); label : '@@theme.universal.colorScheme.cyan@@' },{ DataSource dsvalue = BasicDataSourceFactory.createDataSource(dsProps); : 'TEAL', label : '@@theme.universal.colorScheme.teal@@' },{ connvalue = ds.getConnection();: 'GREEN', label : '@@theme.universal.colorScheme.green@@' },{ message = AppPluginUtil.getMessage("form.jdbcOptionsBinder.connectionOk", getClassName(), MESSAGE_PATH); value : 'LIGHT_GREEN', }label catch (Exception e) {: '@@theme.universal.colorScheme.lightGreen@@' },{ LogUtil.error(getClassName(), e, "Test Connection error"); value : 'LIME', label message = AppPluginUtil.getMessage("form.jdbcOptionsBinder.connectionFail", getClassName(), MESSAGE_PATH) + "\n" + e.getMessage();: '@@theme.universal.colorScheme.lime@@' },{ }value finally {: 'IVORY', label : '@@theme.universal.colorScheme.ivory@@' try },{ value : 'LEMONCHIFFON', if (conn != null && !conn.isClosed()) { label : '@@theme.universal.colorScheme.lemonChiffon@@' },{ value : 'WHEAT', conn.close(); label : '@@theme.universal.colorScheme.wheat@@' },{ value : 'YELLOW', } catch (Exception e) { label : '@@theme.universal.colorScheme.yellow@@' },{ LogUtil.error(DynamicDataSourceManager.class.getName(), e, ""); value : 'AMBER', } label : '@@theme.universal.colorScheme.amber@@' },{ try {value : 'ORANGE', label JSONObject jsonObject = new JSONObject(); : '@@theme.universal.colorScheme.orange@@' },{ value jsonObject.accumulate("message", message);: 'DEEP_ORANGE', label jsonObject.write(response.getWriter());: '@@theme.universal.colorScheme.deepOrange@@' },{ } catch (Exception e) { value : 'BROWN', //ignore label : '@@theme.universal.colorScheme.brown@@' },{ }value else {: 'LIGHTGREY', response.setStatus(HttpServletResponse.SC_NO_CONTENT);label : '@@theme.universal.colorScheme.lightGrey@@' },{ } |
Once we are done with the properties option to collect input and the web service to test the connection, we can work on the main method of the plugin which is the loadAjaxOptions method.
| Thai |
|---|
เมื่อเราเสร็จสิ้นด้วยตัวเลือกคุณสมบัติเพื่อรวบรวมอินพุตและบริการเว็บเพื่อทดสอบการเชื่อมต่อเราสามารถทำงานกับวิธีหลักของปลั๊กอินซึ่งเป็นวิธีการ loadAjaxOptions |
| Code Block | ||
|---|---|---|
| ||
public FormRowSet loadAjaxOptions(String[] dependencyValues) { value : 'GREY', FormRowSet rows =label new FormRowSet();: '@@theme.universal.colorScheme.grey@@' rows.setMultiRow(true); },{ value : 'BLUE_GREY', //add empty option basedlabel on setting: '@@theme.universal.colorScheme.blueGrey@@' if ("true".equals(getPropertyString("addEmpty"))) { },{ value : 'DEEP_GREY', FormRow empty = new FormRow(); label : '@@theme.universal.colorScheme.deepGrey@@' empty.setProperty(FormUtil.PROPERTY_LABEL, getPropertyString("emptyLabel")); },{ value empty.setProperty(FormUtil.PROPERTY_VALUE, ""); : 'SILVER', label rows.add(empty);: '@@theme.universal.colorScheme.silver@@' },{ value : 'BLACK', //Check the sql. If require dependency value and dependency value islabel not exist, return empty result.: '@@theme.universal.colorScheme.black@@' String sql = getPropertyString("sql");},{ if ((dependencyValues == null || dependencyValues.length == 0) && sql.contains("?")) { value : 'WHITE', label return rows;: '@@theme.universal.colorScheme.white@@' },{ value Connection con = null; : 'custom', PreparedStatement pstmtlabel = null;: '@@theme.universal.colorScheme.custom@@' ResultSet rs = null;}] }, { try {name : 'customPrimary', label : '@@theme.universal.customPrimary@@', DataSource ds = createDataSource(); type : 'color', con = ds.getConnection();control_field: 'primaryColor', control_value: 'custom', control_use_regex: 'false', //support for multiplerequired dependency: values'true' }, { if (sql.contains("?") && dependencyValues !=name null && dependencyValues.length > 1) { : 'customPrimaryDark', label : '@@theme.universal.customPrimaryDark@@', type : String'color', mark = "?"; control_field: 'primaryColor', for (int i = 1; i < dependencyValues.length; i++) {control_value: 'custom', control_use_regex: 'false' }, { name : 'customPrimaryLight', mark += ", ?"; label : '@@theme.universal.customPrimaryLight@@', type }: 'color', control_field: 'primaryColor', sql = sql.replace("?", mark);control_value: 'custom', }control_use_regex: 'false' }, { name : 'accentColor', label pstmt = con.prepareStatement(sql);: '@@theme.universal.accentColor@@', type : 'selectbox', options_label_processor //set query parameters: 'color', value: 'BLUE', if (sql.contains("?") && dependencyValues != nulloptions && dependencyValues.length > 0) { : [{ value : '', for (int i = 0; i < dependencyValues.length; i++) { label : '' },{ value pstmt.setObject(i + 1, dependencyValues[i]);: 'RED', label }: '@@theme.universal.colorScheme.red@@' },{ } value : 'PINK', rslabel = pstmt.executeQuery();: '@@theme.universal.colorScheme.pink@@' },{ ResultSetMetaData rsmd = rs.getMetaData(); value : 'LAVENDERBLUSH', int columnsNumber = rsmd.getColumnCount(); label : '@@theme.universal.colorScheme.lavenderBlush@@' },{ // Set retrieved resultvalue to Form Row Set : 'THISTLE', label while (rs.next()) {: '@@theme.universal.colorScheme.thistle@@' },{ FormRow row = new FormRow(); value : 'PLUM', label : '@@theme.universal.colorScheme.plum@@' },{ String value = rs.getString(1); value : 'PURPLE', String label = rs.getString(2);: '@@theme.universal.colorScheme.purple@@' },{ value : 'DEEP_PURPLE', row.setProperty(FormUtil.PROPERTY_VALUE, (value != null)?value:"");label : '@@theme.universal.colorScheme.deepPurple@@' },{ row.setProperty(FormUtil.PROPERTY_LABEL, (label != null)?label:""); value : 'INDIGO', label : '@@theme.universal.colorScheme.indigo@@' },{ if (columnsNumber >value 2) {: 'LAVENDER', label : '@@theme.universal.colorScheme.lavender@@' String grouping = rs.getString(3); },{ value : 'GHOSTWHITE', row.setProperty(FormUtil.PROPERTY_GROUPING, grouping); label : '@@theme.universal.colorScheme.ghostWhite@@' },{ value : 'BLUE', label rows.add(row);: '@@theme.universal.colorScheme.blue@@' },{ } }value catch (Exception e) { : 'LIGHT_BLUE', label LogUtil.error(getClassName(), e, "");: '@@theme.universal.colorScheme.lightBlue@@' } finally ,{ value try {: 'DARKROYALBLUE', label : '@@theme.universal.colorScheme.darkRoyalBlue@@' if (rs != null) },{ value : 'ROYALBLUE', rs.close(); label : '@@theme.universal.colorScheme.royalBlue@@' },{ value : 'CORNFLOWERBLUE', if (pstmt != null) { label : '@@theme.universal.colorScheme.cornflowerBlue@@' pstmt.close();},{ value : 'ALICEBLUE', } label : '@@theme.universal.colorScheme.aliceBlue@@' if (con != null) },{ value : 'LIGHTSTEELBLUE', con.close(); label : '@@theme.universal.colorScheme.lightSteelBlue@@' },{ }value catch (Exception e) {: 'STEELBLUE', label LogUtil.error(getClassName(), e, "");: '@@theme.universal.colorScheme.steelBlue@@' },{ } } value : 'LIGHTSKYBLUE', label return rows;: '@@theme.universal.colorScheme.lightSkyBlue@@' } },{ /** * To creates data source basedvalue on setting: 'SKYBLUE', * @return * @throwslabel Exception : '@@theme.universal.colorScheme.skyBlue@@' */ },{ protected DataSource createDataSource() throws Exception { value : DataSource'DEEPSKYBLUE', ds = null; String datasourcelabel = getPropertyString("jdbcDatasource");: '@@theme.universal.colorScheme.deepSkyBlue@@' if ("default".equals(datasource)) },{ //value use current datasource: 'AZURE', label ds = (DataSource)AppUtil.getApplicationContext().getBean("setupDataSource");: '@@theme.universal.colorScheme.azure@@' } else ,{ // use custom datasource value : 'LIGHTCYAN', label : '@@theme.universal.colorScheme.lightCyan@@' Properties dsProps = new Properties(); },{ value dsProps.put("driverClassName", getPropertyString("jdbcDriver")); : 'CYAN', label dsProps.put("url", getPropertyString("jdbcUrl")); : '@@theme.universal.colorScheme.cyan@@' },{ dsProps.put("username", getPropertyString("jdbcUser")); value : 'TEAL', label dsProps.put("password", getPropertyString("jdbcPassword"));: '@@theme.universal.colorScheme.teal@@' },{ value : 'GREEN', dslabel = BasicDataSourceFactory.createDataSource(dsProps);: '@@theme.universal.colorScheme.green@@' },{ return ds; value : 'LIGHT_GREEN', } |
c. Manage the dependency libraries of your plugin
| Thai |
|---|
จัดการไลบรารีปลั๊กอินของคุณ |
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.
| Thai |
|---|
ปลั๊กอินของเราใช้ dbcp, javax.servlet.http.HttpServletRequest และ javax.servlet.http.HttpServletResponse คลาสดังนั้นเราจะต้องเพิ่มไลบรารี jsp-api และ commons-dbcp ลงในไฟล์ POM ของเรา |
| Code Block | ||
|---|---|---|
| ||
<!-- Change plugin specific dependencies here -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jsp-api</artifactId>
<version>2.0</version>
</dependency>
<dependency>
<groupId>commons-dbcp</groupId>
<artifactId>commons-dbcp</artifactId>
<version>1.3</version>
</dependency>
<!-- End change plugin specific dependencies here --> |
d. Make your plugin internationalization (i18n) ready
| Thai |
|---|
เตรียมปลั๊กอินสากลให้พร้อม (i18n) |
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.
| Thai |
|---|
| เรากำลังใช้คีย์ข้อความ i18n ในวิธี getLabel และ getDescription นอกจากนี้เรายังใช้คีย์ข้อความ i18n ในการกำหนดตัวเลือกคุณสมบัติของเราเช่นกัน ดังนั้นเราจะต้องสร้างไฟล์สำหรับปลั๊กอินของเรา |
Create directory "resources/messages" under "jdbc_options_binder/src/main" directory. Then, create a "JdbcOptionsBinder.properties" file in the folder. In the properties file, let us add all the message keys and labels as below.
| Thai |
|---|
สร้างไดเรกทอรี "ทรัพยากร / ข้อความ" ภายใต้ไดเรกทอรี "jdbc_options_binder / src / main" จากนั้นสร้างไฟล์ "JdbcOptionsBinder.properties" ในโฟลเดอร์ ในไฟล์คุณสมบัติให้เราเพิ่มคีย์ข้อความและป้ายกำกับทั้งหมดดังต่อไปนี้ |
| Code Block |
|---|
org.joget.tutorial.JdbcOptionsBinder.pluginLabel=JDBC Binder
org.joget.tutorial.JdbcOptionsBinder.pluginDesc=Used to load field's options using JDBC
form.jdbcOptionsBinder.config=Configure JDBC Binder
form.jdbcOptionsBinder.datasource=Datasource
form.jdbcOptionsBinder.customDatasource=Custom Datasource
form.jdbcOptionsBinder.defaultDatasource=Default Datasource
form.jdbcOptionsBinder.driver=Custom JDBC Driver
form.jdbcOptionsBinder.driver.desc=Eg. com.mysql.jdbc.Driver (MySQL), oracle.jdbc.driver.OracleDriver (Oracle), com.microsoft.sqlserver.jdbc.SQLServerDriver (Microsoft SQL Server)
form.jdbcOptionsBinder.url=Custom JDBC URL
form.jdbcOptionsBinder.username=Custom JDBC Username
form.jdbcOptionsBinder.password=Custom JDBC Password
form.jdbcOptionsBinder.useAjax=Use AJAX for cascade options?
form.jdbcOptionsBinder.addEmpty=Add Empty Option?
form.jdbcOptionsBinder.emptyLabel=Empty Option Label
form.jdbcOptionsBinder.sql=SQL SELECT Query
form.jdbcOptionsBinder.sql.desc=Use question mark (?) in your query to represent dependency values when using AJAX
form.jdbcOptionsBinder.testConnection=Test Connection
form.jdbcOptionsBinder.connectionOk=Database connected
form.jdbcOptionsBinder.connectionFail=Not able to establish connection. |
e. Register your plugin to the Felix Framework
| Thai |
|---|
ลงทะเบียนปลั๊กอินของคุณไปที่ 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.
| Thai |
|---|
เราจะต้องลงทะเบียนคลาสปลั๊กอินของเราในคลาส Activator (สร้างอัตโนมัติในแพ็คเกจคลาสเดียวกัน) เพื่อบอก Felix Framework ว่านี่เป็นปลั๊กอิน |
| Code Block | ||
|---|---|---|
| ||
public void start(BundleContext context) {
registrationList = new ArrayList<ServiceRegistration>();
//Register plugin here
registrationList.add(context.registerService(JdbcOptionsBinder.class.getName(), new JdbcOptionsBinder(), null));
} |
f. Build it and test
| Thai |
|---|
สร้างและทดสอบ |
Let build our plugin. Once the building process is done, we will find that a "jdbc_options_binder-5.0.0.jar" file is created under "jdbc_options_binder/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.
| Thai |
|---|
ให้สร้างปลั๊กอินของเรา เมื่อกระบวนการสร้างเสร็จสิ้นเราจะพบว่าไฟล์ "jdbc_options_binder-5.0.0.jar" ถูกสร้างขึ้นภายใต้ไดเรกทอรี "jdbc_options_binder / target" จากนั้นให้เราอัปโหลด jar ปลั๊กอินไปที่ Manage Plugins หลังจากอัปโหลดไฟล์ jar ให้ตรวจสอบอีกครั้งว่ามีการอัปโหลดและเปิดใช้งานปลั๊กอินอย่างถูกต้อง |
Then, let us create an AJAX Cascading Drop-Down List in a form to test it. Let's create our test form as follows.
| Thai |
|---|
จากนั้นให้เราสร้าง AJAX Cascading Drop-Down List ในแบบฟอร์มเพื่อทดสอบ มาสร้างแบบทดสอบของเรากันดังนี้ |
Then, configure our select box and JDBC binder.
| Thai |
|---|
จากนั้นกำหนดค่ากล่องเลือกของเราและ JDBC binder |
In the query, we will use the following query to get the user list based on group id.
| Thai |
|---|
ในแบบสอบถามเราจะใช้แบบสอบถามต่อไปนี้เพื่อรับรายชื่อผู้ใช้ตามรหัสกลุ่ม |
| Code Block | ||
|---|---|---|
| ||
select distinct username, firstName, groupId from dir_user u
join dir_user_group g on u.username=g.userId
where groupId in (?) group by username; |
Configure the dependency to "group". Then, test the result.
| Thai |
|---|
กำหนดค่าการพึ่งพา "กลุ่ม" จากนั้นทดสอบผลลัพธ์ |
The user select box options changed based on the selected values of group select box.
Now, let's change the query to the following to test the Cascading Drop-Down List without using AJAX.
| Thai |
|---|
ตัวเลือกกล่องที่ผู้ใช้เลือกเปลี่ยนไปตามค่าที่เลือกของกล่องเลือกกลุ่ม ทีนี้เรามาเปลี่ยนเคียวรีต่อไปนี้เพื่อทดสอบรายการดร็อปดาวน์แบบเรียงซ้อนโดยไม่ต้องใช้ AJAX |
| Code Block | ||
|---|---|---|
| ||
select distinct username, firstName, groupId from dir_user u
join dir_user_group g on u.username=g.userId
group by username; |
Remember to un-tick the "Use AJAX for cascade options?" option to make it not use AJAX.
| Thai |
|---|
อย่าลืมยกเลิกการเลือก "ใช้ AJAX สำหรับตัวเลือกการเรียงซ้อน?" ตัวเลือกเพื่อให้ไม่ใช้ AJAX |
Yes, it works as well. Then, we can test the custom configuration and the test connection button.
| Thai |
|---|
ใช่มันทำงานได้ดี จากนั้นเราสามารถทดสอบการกำหนดค่าที่กำหนดเองและปุ่มทดสอบการเชื่อมต่อ |
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. Customizing the Theme
This is the part we will insert our modifications to achieve the look and feel that we want.
It is good to note that each of the form element (i.e. textfield, textarea, date picker) has its own template file that follows a standardized layout with label on the left and content on the right. For example, this is the template file for TextField element.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<div class="form-cell" ${elementMetaData!}>
<#if !(includeMetaData!) && element.properties.style! != "" >
<script type="text/javascript" src="${request.contextPath}/plugin/org.joget.apps.form.lib.TextField/js/jquery.numberFormatting.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.textfield_${element.properties.elementUniqueKey!}').numberFormatting({
format : '${element.properties.style!}',
numOfDecimal : '${element.properties.numOfDecimal!}',
useThousandSeparator : '${element.properties.useThousandSeparator!}',
prefix : '${element.properties.prefix!}',
postfix : '${element.properties.postfix!}'
});
});
</script>
</#if>
<label field-tooltip="${elementParamName!}" class="label" for="${elementParamName!}">${element.properties.label} <span class="form-cell-validator">${decoration}</span><#if error??> <span class="form-error-message">${error}</span></#if></label>
<#if (element.properties.readonly! == 'true' && element.properties.readonlyLabel! == 'true') >
<div class="form-cell-value"><span>${valueLabel!?html}</span></div>
<input id="${elementParamName!}" name="${elementParamName!}" class="textfield_${element.properties.elementUniqueKey!}" type="hidden" value="${value!?html}" />
<#else>
<input id="${elementParamName!}" name="${elementParamName!}" class="textfield_${element.properties.elementUniqueKey!}" type="text" placeholder="${element.properties.placeholder!?html}" size="${element.properties.size!}" value="${value!?html}" maxlength="${element.properties.maxlength!}" <#if error??>class="form-error-cell"</#if> <#if element.properties.readonly! == 'true'>readonly</#if> />
</#if>
</div> |
We would also like to note that it would be easier to customize on top of existing themes such as Universal Theme as there were lots of meticulous works have gone down there to make it PWA-complaint as well. It is, of course, possible to develop a new theme from scratch but that would involve a lot of work in planning out the entire theme, down to every single detail.
We can make use of the browser's developer console to inspect the elements and introduce changes necessary to get to what we want.
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";
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 += ".form-container{ background-image : url('" + getProperty("form_image").toString() + "')}";
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;
} |
We are pointing to 2 files in the methods above - eva.css, and eva.js. Create these 2 files in "eva-theme/main/resources/resources" folder.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
$(function(){
if ($("#form-canvas").length > 0) {
$("#form-canvas").find(".form-cell, .subform-cell").each(function(){
var label = $(this).find("> label.label").text();
$(this).find("> textarea, > input, > select").attr("placeholder", label);
});
}
}); |
| 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;
} |
d. Manage the dependency libraries of your plugin
| Thai |
|---|
จัดการไลบรารีปลั๊กอินของคุณ |
| Code Block | ||
|---|---|---|
| ||
<!-- 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 --> |
e. Make your plugin internationalization (i18n) ready
| Thai |
|---|
เตรียมปลั๊กอินสากลให้พร้อม (i18n) |
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.
| Thai |
|---|
| เรากำลังใช้คีย์ข้อความ i18n ในวิธี getLabel และ getDescription นอกจากนี้เรายังใช้คีย์ข้อความ i18n ในการกำหนดตัวเลือกคุณสมบัติของเราเช่นกัน ดังนั้นเราจะต้องสร้างไฟล์สำหรับปลั๊กอินของเรา |
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.
| Thai |
|---|
สร้างไดเรกทอรี "ทรัพยากร / ข้อความ" ภายใต้ไดเรกทอรี "eva-theme / src / main" จากนั้นสร้างไฟล์ "JdbcOptionsBinder.properties" ในโฟลเดอร์ ในไฟล์คุณสมบัติให้เราเพิ่มคีย์ข้อความและป้ายกำกับทั้งหมดดังต่อไปนี้ |
| Code Block |
|---|
theme.eva.config=Configure Eva Theme
theme.eva.formImage=Form Image |
f. Register your plugin to the Felix Framework
| Thai |
|---|
ลงทะเบียนปลั๊กอินของคุณไปที่ 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.
| Thai |
|---|
เราจะต้องลงทะเบียนคลาสปลั๊กอินของเราในคลาส Activator (สร้างอัตโนมัติในแพ็คเกจคลาสเดียวกัน) เพื่อบอก Felix Framework ว่านี่เป็นปลั๊กอิน |
| Code Block | ||
|---|---|---|
| ||
public void start(BundleContext context) {
registrationList = new ArrayList<ServiceRegistration>();
//Register plugin here
registrationList.add(context.registerService(EvaTheme.class.getName(), new EvaTheme(), null));
} |
g. Build it and test
| Thai |
|---|
สร้างและทดสอบ |
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.
| Thai |
|---|
ให้สร้างปลั๊กอินของเรา เมื่อกระบวนการสร้างเสร็จสิ้นเราจะพบว่าไฟล์ "jdbc_options_binder-5.0.0.jar" ถูกสร้างขึ้นภายใต้ไดเรกทอรี "eva-theme / target" จากนั้นให้เราอัปโหลด jar ปลั๊กอินไปที่ Manage Plugins หลังจากอัปโหลดไฟล์ jar ให้ตรวจสอบอีกครั้งว่ามีการอัปโหลดและเปิดใช้งานปลั๊กอินอย่างถูกต้อง |
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/.
...
คุณสามารถดาวน์โหลดซอร์สโค้ดจาก jdbc_options_binder_src.zip
...
| Thai |
|---|
คุณสามารถดาวน์โหลดซอร์สโค้ดจาก eva-theme.zip. |