...
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 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").
| Thai |
|---|
เราสามารถอ้างถึงการใช้งาน Form Options Binder plugins แหล่งข้อมูลเริ่มต้นของ Joget สามารถเรียกดูได้ด้วย 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.0-SNAPSHOT. Please refer to the Guideline for developing a plugin article for other platform commands.
...
| Thai |
|---|
เราจำเป็นต้องให้ซอร์สโค้ด Joget Workflow ของเราพร้อมและสร้างโดยปฏิบัติตาม this guideline บทช่วยสอนต่อไปนี้จัดทำขึ้นด้วย Macbook Pro และ Joget Source Code เวอร์ชั่น 57.0.0 -SNAPSHOT โปรดอ้างอิง Guideline for developing a plugin สำหรับคำสั่งแพลตฟอร์มอื่น ๆ สมมติว่าไดเรกทอรีโฟลเดอร์ของเรามีดังนี้ |
| 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 |
7. Just code it!
| Thai |
|---|
เพียงแค่รหัส! |
a. Extending the abstract class of a plugin type
| Thai |
|---|
การขยายคลาสนามธรรมของประเภทปลั๊กอิน |
...
| 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. |
...
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 getNameservice.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_PATH)getClass().getName(); } @Override public String getDescriptiongetPropertyOptions() { //support i18n return AppPluginUtil.getMessage("org.joget.tutorial.JdbcOptionsBinder.pluginDesc", getClassName(), MESSAGE_PATH); } public String getPropertyOptions() { return AppUtil.readPluginResource(getClassNamereturn AppUtil.readPluginResource(getClass().getName(), "/properties/jdbcOptionsBinderuserview/EvaTheme.json", null, true, MESSAGE_PATH"messages/userview/EvaTheme"); } @Override public FormRowSet load(Element element,public String primaryKeygetJsCssLib(Map<String, FormDataObject> formDatadata) { String cssJs return= loadAjaxOptionssuper.getJsCssLib(nulldata); // reuse loadAjaxOptions method } public boolean useAjax() { return "true".equalsIgnoreCase(getPropertyString("useAjax")); //change letwhere userneeded to decideto whetherinject orcustom notcss toon usetop ajaxof forthe dependencyuniversal fieldtheme } String publicbn FormRowSet= loadAjaxOptions(String[] dependencyValues) { ResourceBundleUtil.getMessage("build.number"); cssJs 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 ในตัวเลือกคุณสมบัติของเรา |
| Code Block | ||
|---|---|---|
| ||
[{ title : '@@form.jdbcOptionsBinder.config@@', properties : [{"<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"; name : 'jdbcDatasource',return cssJs; } label : '@@form.jdbcOptionsBinder.datasource@@', type : 'selectbox',@Override public options : [Set<String> getOfflineStaticResources() { String contextPath value : 'custom',= AppUtil.getRequestContextPath(); String bn label : '@@form.jdbcOptionsBinder.customDatasource@@'= ResourceBundleUtil.getMessage("build.number"); },{ Set<String> urls = super.getOfflineStaticResources(); urls.add(contextPath value : 'default',+ "/plugin/"+getClassName()+"/eva.css?build=" + bn); urls.add(contextPath + "/plugin/"+getClassName()+"/eva.js?build=" label : '@@form.jdbcOptionsBinder.defaultDatasource@@'+ bn); }], value : 'default'return urls; },{ // use with caution - not recommended nameto : 'jdbcDriver', label : '@@form.jdbcOptionsBinder.driver@@', use custom template file as there are alot of placeholder for other methods to fill in description : '@@form.jdbcOptionsBinder.driver.desc@@', @Override public type : 'textfield', value : 'com.mysql.jdbc.Driver', String getLayout(Map<String, Object> data) { control_field: 'jdbcDatasource', control_value: 'custom', control_use_regex: 'false',data.put("body_inner_before", "<div class=\"page-loader\"><div class=\"preloader pl-xl\" style=\"width:80px\"><svg class=\"pl-circular\" viewBox=\"25 25 50 50\"><circle class=\"plc-path\" cx=\"50\" cy=\"50\" r=\"20\" /></svg></div></div>"); required : 'true'return super.getLayout(data); },{ // use namewith : 'jdbcUrl', label : '@@form.jdbcOptionsBinder.url@@', type : 'textfield', value : 'jdbc:mysql://localhost/jwdb?characterEncoding=UTF8', control_field: 'jdbcDatasource',caution - not recommended to use custom template file as there are alot of placeholder for other methods to fill in @Override public String getContentContainer(Map<String, Object> data) { control_value: 'custom', control_use_regex: 'false', required : 'true'return UserviewUtil.getTemplate(this, data, "/templates/userview/contentContainer.ftl"); },{ name : 'jdbcUser', label : '@@form.jdbcOptionsBinder.username@@', type : 'textfield', control_field: 'jdbcDatasource', control_value: 'custom', control_use_regex: 'false', value : 'root } |
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 of the label key that we are declaring here - "theme.eva.config".
| Code Block | ||||
|---|---|---|---|---|
| ||||
[{ title : '@@theme.eva.config@@', requiredproperties : 'true'[ },{ name : 'jdbcPasswordhorizontal_menu', label : '@@form@@theme.jdbcOptionsBinderuniversal.password@@menu_position@@', type : 'passwordselectbox', options control_field: 'jdbcDatasource', [{ control_value : 'custom', label control_use_regex: 'false',@@theme.universal.menu.sideMenu@@' value}, : '' },{ name : 'useAjax value : 'true', label : '@@form@@theme.universal.jdbcOptionsBindermenu.useAjax@@horizontalMenu@@', type : 'checkbox'}, options : [{ value : 'truehorizontal_inline', label : '@@theme.universal.menu.inlineHorizontalMenu@@' }], }, { namevalue : 'addEmptyno', label : '@@form@@theme.universal.jdbcOptionsBindermenu.addEmpty@@no@@', type : 'checkbox',}] }, options : [{ valuename : 'truethemeScheme', label : '@@theme.universal.themeScheme@@', }] type },{: 'selectbox', name value: 'emptyLabellight', labeloptions : '@@form.jdbcOptionsBinder.emptyLabel@@', [{ type value : 'textfielddark', control_field label : 'addEmpty',@@theme.universal.themeScheme.dark@@' control_value: 'true',},{ control_use_regex value : 'falselight', valuelabel : '@@theme.universal.themeScheme.light@@' },{ }] }, name : 'sql',{ labelname : '@@form.jdbcOptionsBinder.sql@@primaryColor', descriptionlabel : '@@form@@theme.jdbcOptionsBinderuniversal.sql.desc@@primaryColor@@', type : 'codeeditorselectbox', modeoptions_label_processor : 'sqlcolor', required value: 'trueDARKROYALBLUE', }], buttonsoptions : [{ name : 'testConnection value : '', label : '@@form.jdbcOptionsBinder.testConnection@@', ' },{ ajax_urlvalue : '[CONTEXT_PATH]/web/json/app[APP_PATH]/plugin/org.joget.tutorial.JdbcOptionsBinder/service?action=testConnectionRED', fields : ['jdbcDriver', 'jdbcUrl', 'jdbcUser', 'jdbcPassword'], label : '@@theme.universal.colorScheme.red@@' control_field: 'jdbcDatasource',},{ control_value value : 'customPINK', control_use_regex label : 'false@@theme.universal.colorScheme.pink@@' }] }] |
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 value * @param request: 'LAVENDERBLUSH', * @param response *label @throws ServletException: '@@theme.universal.colorScheme.lavenderBlush@@' * @throws IOException },{ */ public void webService(HttpServletRequest request,value HttpServletResponse response) throws ServletException, IOException {: 'THISTLE', //Limit the API for adminlabel usage only: '@@theme.universal.colorScheme.thistle@@' boolean},{ isAdmin = WorkflowUtil.isCurrentUserInRole(WorkflowUserManager.ROLE_ADMIN); if (!isAdmin) { value : 'PLUM', label : response.sendError(HttpServletResponse.SC_UNAUTHORIZED);'@@theme.universal.colorScheme.plum@@' },{ return; } value : 'PURPLE', label String action = request.getParameter("action");: '@@theme.universal.colorScheme.purple@@' if ("testConnection".equals(action)) },{ Stringvalue message = "";: 'DEEP_PURPLE', Connectionlabel conn = null;: '@@theme.universal.colorScheme.deepPurple@@' try },{ value : 'INDIGO', AppDefinition appDef = AppUtil.getCurrentAppDefinition(); label : '@@theme.universal.colorScheme.indigo@@' },{ value : String jdbcDriver = AppUtil.processHashVariable(request.getParameter("jdbcDriver"), null, null, null, appDef);'LAVENDER', label : '@@theme.universal.colorScheme.lavender@@' },{ String jdbcUrl = AppUtil.processHashVariable(request.getParameter("jdbcUrl"), null, null, null, appDef); value : 'GHOSTWHITE', label : '@@theme.universal.colorScheme.ghostWhite@@' String jdbcUser = AppUtil.processHashVariable(request.getParameter("jdbcUser"), null, null},{ null, appDef); value : 'BLUE', String jdbcPassword = AppUtil.processHashVariable(SecurityUtil.decrypt(request.getParameter("jdbcPassword")), null, null, null, appDef); label : '@@theme.universal.colorScheme.blue@@' },{ value : 'LIGHT_BLUE', label : '@@theme.universal.colorScheme.lightBlue@@' Properties dsProps = new Properties(); },{ value dsProps.put("driverClassName", jdbcDriver);: 'DARKROYALBLUE', label : '@@theme.universal.colorScheme.darkRoyalBlue@@' dsProps.put("url", jdbcUrl); },{ dsProps.put("username", jdbcUser); value : 'ROYALBLUE', label dsProps.put("password", jdbcPassword); : '@@theme.universal.colorScheme.royalBlue@@' },{ DataSource ds = BasicDataSourceFactory.createDataSource(dsProps); value : 'CORNFLOWERBLUE', label : '@@theme.universal.colorScheme.cornflowerBlue@@' },{ conn = ds.getConnection(); value : 'ALICEBLUE', label : '@@theme.universal.colorScheme.aliceBlue@@' },{ message = AppPluginUtil.getMessage("form.jdbcOptionsBinder.connectionOk", getClassName(), MESSAGE_PATH); value : 'LIGHTSTEELBLUE', } catch (Exception e) { label : '@@theme.universal.colorScheme.lightSteelBlue@@' },{ LogUtil.error(getClassName(), e, "Test Connection error"); value : 'STEELBLUE', messagelabel =: AppPluginUtil.getMessage("form.jdbcOptionsBinder.connectionFail", getClassName(), MESSAGE_PATH) + "\n" + e.getMessage();'@@theme.universal.colorScheme.steelBlue@@' },{ }value finally {: 'LIGHTSKYBLUE', label try {: '@@theme.universal.colorScheme.lightSkyBlue@@' },{ ifvalue (conn != null && !conn.isClosed()) {: 'SKYBLUE', label : '@@theme.universal.colorScheme.skyBlue@@' conn.close();},{ value : 'DEEPSKYBLUE', } label : '@@theme.universal.colorScheme.deepSkyBlue@@' } catch (Exception e) ,{ value : 'AZURE', LogUtil.error(DynamicDataSourceManager.class.getName(), e, ""); label : '@@theme.universal.colorScheme.azure@@' },{ } value : 'LIGHTCYAN', try { label : '@@theme.universal.colorScheme.lightCyan@@' JSONObject jsonObject = new JSONObject();},{ value jsonObject.accumulate("message", message);: 'CYAN', label jsonObject.write(response.getWriter());: '@@theme.universal.colorScheme.cyan@@' } catch (Exception e) },{ value : 'TEAL', //ignore label }: '@@theme.universal.colorScheme.teal@@' },{ else { value response.setStatus(HttpServletResponse.SC_NO_CONTENT);: 'GREEN', } } |
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 | ||
|---|---|---|
| ||
label : '@@theme.universal.colorScheme.green@@' public FormRowSet loadAjaxOptions(String[] dependencyValues) },{ FormRowSet rows =value new FormRowSet(); : 'LIGHT_GREEN', label rows.setMultiRow(true);: '@@theme.universal.colorScheme.lightGreen@@' },{ //add empty option basedvalue on setting : 'LIME', if ("true".equals(getPropertyString("addEmpty"))) label : '@@theme.universal.colorScheme.lime@@' },{ FormRowvalue empty = new FormRow(); : 'IVORY', label : empty.setProperty(FormUtil.PROPERTY_LABEL, getPropertyString("emptyLabel")); '@@theme.universal.colorScheme.ivory@@' },{ value empty.setProperty(FormUtil.PROPERTY_VALUE, ""); : 'LEMONCHIFFON', label rows.add(empty);: '@@theme.universal.colorScheme.lemonChiffon@@' },{ value : 'WHEAT', //Check the sql. If require dependency value and dependency value islabel not exist, return empty result.: '@@theme.universal.colorScheme.wheat@@' String sql = getPropertyString("sql");},{ if ((dependencyValues == null || dependencyValues.length == 0) && sql.contains("?")) { value : 'YELLOW', label return rows;: '@@theme.universal.colorScheme.yellow@@' },{ value : 'AMBER', Connection con = null; PreparedStatementlabel pstmt = null;: '@@theme.universal.colorScheme.amber@@' ResultSet rs = null;},{ value try {: 'ORANGE', DataSourcelabel ds = createDataSource();: '@@theme.universal.colorScheme.orange@@' },{ con = ds.getConnection(); value : 'DEEP_ORANGE', //supportlabel for multiple dependency values: '@@theme.universal.colorScheme.deepOrange@@' },{ if (sql.contains("?") && dependencyValues != null && dependencyValues.length >value 1) {: 'BROWN', label String mark = "?";: '@@theme.universal.colorScheme.brown@@' },{ for (int i = 1;value i < dependencyValues.length; i++) {: 'LIGHTGREY', label : '@@theme.universal.colorScheme.lightGrey@@' mark += ", ?";},{ value }: 'GREY', label sql = sql.replace("?", mark);: '@@theme.universal.colorScheme.grey@@' },{ } value : 'BLUE_GREY', pstmtlabel = con.prepareStatement(sql);: '@@theme.universal.colorScheme.blueGrey@@' },{ //setvalue query parameters: 'DEEP_GREY', if (sql.contains("?") && dependencyValues != null && dependencyValues.length > 0) label : '@@theme.universal.colorScheme.deepGrey@@' },{ value : 'SILVER', for (int i = 0; i < dependencyValues.length; i++) {label : '@@theme.universal.colorScheme.silver@@' },{ pstmt.setObject(i + 1, dependencyValues[i]); value : 'BLACK', label : '@@theme.universal.colorScheme.black@@' },{ } value : 'WHITE', label : '@@theme.universal.colorScheme.white@@' rs = pstmt.executeQuery();},{ ResultSetMetaDatavalue rsmd = rs.getMetaData();: 'custom', intlabel columnsNumber = rsmd.getColumnCount();: '@@theme.universal.colorScheme.custom@@' }] }, { name // Set retrieved result to Form Row Set : 'customPrimary', label : '@@theme.universal.customPrimary@@', while (rs.next()) {type : 'color', control_field: 'primaryColor', FormRow row = new FormRow();control_value: 'custom', control_use_regex: 'false', required : 'true' }, String value = rs.getString(1); { name : 'customPrimaryDark', String label = rs.getString(2);: '@@theme.universal.customPrimaryDark@@', type : 'color', control_field: 'primaryColor', control_value: 'custom', row.setProperty(FormUtil.PROPERTY_VALUE, (value != null)?value:"");control_use_regex: 'false' }, { name : 'customPrimaryLight', row.setProperty(FormUtil.PROPERTY_LABEL, (label != null)?label:""); label : '@@theme.universal.customPrimaryLight@@', type : 'color', control_field: 'primaryColor', control_value: 'custom', if (columnsNumber > 2) {control_use_regex: 'false' }, { name : 'accentColor', String grouping = rs.getString(3);label : '@@theme.universal.accentColor@@', type : 'selectbox', options_label_processor row.setProperty(FormUtil.PROPERTY_GROUPING, grouping);: 'color', value: 'BLUE', } options : [{ value : '', label rows.add(row);: '' },{ } }value catch (Exception e) { : 'RED', label LogUtil.error(getClassName(), e, "");: '@@theme.universal.colorScheme.red@@' } finally ,{ try {value : 'PINK', label : '@@theme.universal.colorScheme.pink@@' if (rs != null) },{ value : 'LAVENDERBLUSH', rs.close(); label : '@@theme.universal.colorScheme.lavenderBlush@@' },{ value if (pstmt != null) { : 'THISTLE', label : '@@theme.universal.colorScheme.thistle@@' pstmt.close();},{ value : 'PLUM', } label : '@@theme.universal.colorScheme.plum@@' if (con != null) },{ value : 'PURPLE', con.close(); label : '@@theme.universal.colorScheme.purple@@' },{ }value catch (Exception e) {: 'DEEP_PURPLE', label LogUtil.error(getClassName(), e, ""); : '@@theme.universal.colorScheme.deepPurple@@' },{ } value : }'INDIGO', label return rows;: '@@theme.universal.colorScheme.indigo@@' } },{ /** * To creates datavalue source based on setting: 'LAVENDER', * @return * @throwslabel Exception : '@@theme.universal.colorScheme.lavender@@' */ },{ protected DataSource createDataSource() throws Exception { value : DataSource'GHOSTWHITE', ds = null; String datasourcelabel = getPropertyString("jdbcDatasource");: '@@theme.universal.colorScheme.ghostWhite@@' if ("default".equals(datasource)) },{ //value use current datasource: 'BLUE', label ds = (DataSource)AppUtil.getApplicationContext().getBean("setupDataSource");: '@@theme.universal.colorScheme.blue@@' } else ,{ //value use custom datasource: 'LIGHT_BLUE', Propertieslabel dsProps = new Properties();: '@@theme.universal.colorScheme.lightBlue@@' },{ dsProps.put("driverClassName", getPropertyString("jdbcDriver")); value : 'DARKROYALBLUE', dsProps.put("url", getPropertyString("jdbcUrl")); label dsProps.put("username", getPropertyString("jdbcUser"));: '@@theme.universal.colorScheme.darkRoyalBlue@@' dsProps.put("password", getPropertyString("jdbcPassword"));},{ dsvalue = BasicDataSourceFactory.createDataSource(dsProps);: 'ROYALBLUE', } label : '@@theme.universal.colorScheme.royalBlue@@' return ds; } |
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 |
|---|
ใช่มันทำงานได้ดี จากนั้นเราสามารถทดสอบการกำหนดค่าที่กำหนดเองและปุ่มทดสอบการเชื่อมต่อ |
,{
value : 'CORNFLOWERBLUE',
label : '@@theme.universal.colorScheme.cornflowerBlue@@'
},{
value : 'ALICEBLUE',
label : '@@theme.universal.colorScheme.aliceBlue@@'
},{
value : 'LIGHTSTEELBLUE',
label : '@@theme.universal.colorScheme.lightSteelBlue@@'
},{
value : 'STEELBLUE',
label : '@@theme.universal.colorScheme.steelBlue@@'
},{
value : 'LIGHTSKYBLUE',
label : '@@theme.universal.colorScheme.lightSkyBlue@@'
},{
value : 'SKYBLUE',
label : '@@theme.universal.colorScheme.skyBlue@@'
},{
value : 'DEEPSKYBLUE',
label : '@@theme.universal.colorScheme.deepSkyBlue@@'
},{
value : 'AZURE',
label : '@@theme.universal.colorScheme.azure@@'
},{
value : 'LIGHTCYAN',
label : '@@theme.universal.colorScheme.lightCyan@@'
},{
value : 'CYAN',
label : '@@theme.universal.colorScheme.cyan@@'
},{
value : 'TEAL',
label : '@@theme.universal.colorScheme.teal@@'
},{
value : 'GREEN',
label : '@@theme.universal.colorScheme.green@@'
},{
value : 'LIGHT_GREEN',
label : '@@theme.universal.colorScheme.lightGreen@@'
},{
value : 'LIME',
label : '@@theme.universal.colorScheme.lime@@'
},{
value : 'IVORY',
label : '@@theme.universal.colorScheme.ivory@@'
},{
value : 'LEMONCHIFFON',
label : '@@theme.universal.colorScheme.lemonChiffon@@'
},{
value : 'WHEAT',
label : '@@theme.universal.colorScheme.wheat@@'
},{
value : 'YELLOW',
label : '@@theme.universal.colorScheme.yellow@@'
},{
value : 'AMBER',
label : '@@theme.universal.colorScheme.amber@@'
},{
value : 'ORANGE',
label : '@@theme.universal.colorScheme.orange@@'
},{
value : 'DEEP_ORANGE',
label : '@@theme.universal.colorScheme.deepOrange@@'
},{
value : 'BROWN',
label : '@@theme.universal.colorScheme.brown@@'
},{
value : 'LIGHTGREY',
label : '@@theme.universal.colorScheme.lightGrey@@'
},{
value : 'GREY',
label : '@@theme.universal.colorScheme.grey@@'
},{
value : 'BLUE_GREY',
label : '@@theme.universal.colorScheme.blueGrey@@'
},{
value : 'DEEP_GREY',
label : '@@theme.universal.colorScheme.deepGrey@@'
},{
value : 'SILVER',
label : '@@theme.universal.colorScheme.silver@@'
},{
value : 'BLACK',
label : '@@theme.universal.colorScheme.black@@'
},{
value : 'WHITE',
label : '@@theme.universal.colorScheme.white@@'
},{
value : 'custom',
label : '@@theme.universal.colorScheme.custom@@'
}]
},
{
name : 'customAccent',
label : '@@theme.universal.customAccent@@',
type : 'color',
control_field: 'accentColor',
control_value: 'custom',
control_use_regex: 'false',
required : 'true'
},
{
name : 'customAccentLight',
label : '@@theme.universal.customAccentLight@@',
type : 'color',
control_field: 'accentColor',
control_value: 'custom',
control_use_regex: 'false'
},
{
name : 'buttonColor',
label : '@@theme.universal.buttonColor@@',
type : 'selectbox',
options_label_processor : 'color',
value: 'GREY',
options : [{
value : '',
label : ''
},{
value : 'RED',
label : '@@theme.universal.colorScheme.red@@'
},{
value : 'PINK',
label : '@@theme.universal.colorScheme.pink@@'
},{
value : 'LAVENDERBLUSH',
label : '@@theme.universal.colorScheme.lavenderBlush@@'
},{
value : 'THISTLE',
label : '@@theme.universal.colorScheme.thistle@@'
},{
value : 'PLUM',
label : '@@theme.universal.colorScheme.plum@@'
},{
value : 'PURPLE',
label : '@@theme.universal.colorScheme.purple@@'
},{
value : 'DEEP_PURPLE',
label : '@@theme.universal.colorScheme.deepPurple@@'
},{
value : 'INDIGO',
label : '@@theme.universal.colorScheme.indigo@@'
},{
value : 'LAVENDER',
label : '@@theme.universal.colorScheme.lavender@@'
},{
value : 'GHOSTWHITE',
label : '@@theme.universal.colorScheme.ghostWhite@@'
},{
value : 'BLUE',
label : '@@theme.universal.colorScheme.blue@@'
},{
value : 'LIGHT_BLUE',
label : '@@theme.universal.colorScheme.lightBlue@@'
},{
value : 'DARKROYALBLUE',
label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
},{
value : 'ROYALBLUE',
label : '@@theme.universal.colorScheme.royalBlue@@'
},{
value : 'CORNFLOWERBLUE',
label : '@@theme.universal.colorScheme.cornflowerBlue@@'
},{
value : 'ALICEBLUE',
label : '@@theme.universal.colorScheme.aliceBlue@@'
},{
value : 'LIGHTSTEELBLUE',
label : '@@theme.universal.colorScheme.lightSteelBlue@@'
},{
value : 'STEELBLUE',
label : '@@theme.universal.colorScheme.steelBlue@@'
},{
value : 'LIGHTSKYBLUE',
label : '@@theme.universal.colorScheme.lightSkyBlue@@'
},{
value : 'SKYBLUE',
label : '@@theme.universal.colorScheme.skyBlue@@'
},{
value : 'DEEPSKYBLUE',
label : '@@theme.universal.colorScheme.deepSkyBlue@@'
},{
value : 'AZURE',
label : '@@theme.universal.colorScheme.azure@@'
},{
value : 'LIGHTCYAN',
label : '@@theme.universal.colorScheme.lightCyan@@'
},{
value : 'CYAN',
label : '@@theme.universal.colorScheme.cyan@@'
},{
value : 'TEAL',
label : '@@theme.universal.colorScheme.teal@@'
},{
value : 'GREEN',
label : '@@theme.universal.colorScheme.green@@'
},{
value : 'LIGHT_GREEN',
label : '@@theme.universal.colorScheme.lightGreen@@'
},{
value : 'LIME',
label : '@@theme.universal.colorScheme.lime@@'
},{
value : 'IVORY',
label : '@@theme.universal.colorScheme.ivory@@'
},{
value : 'LEMONCHIFFON',
label : '@@theme.universal.colorScheme.lemonChiffon@@'
},{
value : 'WHEAT',
label : '@@theme.universal.colorScheme.wheat@@'
},{
value : 'YELLOW',
label : '@@theme.universal.colorScheme.yellow@@'
},{
value : 'AMBER',
label : '@@theme.universal.colorScheme.amber@@'
},{
value : 'ORANGE',
label : '@@theme.universal.colorScheme.orange@@'
},{
value : 'DEEP_ORANGE',
label : '@@theme.universal.colorScheme.deepOrange@@'
},{
value : 'BROWN',
label : '@@theme.universal.colorScheme.brown@@'
},{
value : 'LIGHTGREY',
label : '@@theme.universal.colorScheme.lightGrey@@'
},{
value : 'GREY',
label : '@@theme.universal.colorScheme.grey@@'
},{
value : 'BLUE_GREY',
label : '@@theme.universal.colorScheme.blueGrey@@'
},{
value : 'DEEP_GREY',
label : '@@theme.universal.colorScheme.deepGrey@@'
},{
value : 'SILVER',
label : '@@theme.universal.colorScheme.silver@@'
},{
value : 'BLACK',
label : '@@theme.universal.colorScheme.black@@'
},{
value : 'WHITE',
label : '@@theme.universal.colorScheme.white@@'
},{
value : 'custom',
label : '@@theme.universal.colorScheme.custom@@'
}]
},
{
name : 'customButton',
label : '@@theme.universal.customButton@@',
type : 'color',
control_field: 'buttonColor',
control_value: 'custom',
control_use_regex: 'false',
required : 'true'
},
{
name : 'buttonTextColor',
label : '@@theme.universal.buttonTextColor@@',
type : 'selectbox',
options_label_processor : 'color',
value: 'WHITE',
options : [{
value : '',
label : ''
},{
value : 'RED',
label : '@@theme.universal.colorScheme.red@@'
},{
value : 'PINK',
label : '@@theme.universal.colorScheme.pink@@'
},{
value : 'LAVENDERBLUSH',
label : '@@theme.universal.colorScheme.lavenderBlush@@'
},{
value : 'THISTLE',
label : '@@theme.universal.colorScheme.thistle@@'
},{
value : 'PLUM',
label : '@@theme.universal.colorScheme.plum@@'
},{
value : 'PURPLE',
label : '@@theme.universal.colorScheme.purple@@'
},{
value : 'DEEP_PURPLE',
label : '@@theme.universal.colorScheme.deepPurple@@'
},{
value : 'INDIGO',
label : '@@theme.universal.colorScheme.indigo@@'
},{
value : 'LAVENDER',
label : '@@theme.universal.colorScheme.lavender@@'
},{
value : 'GHOSTWHITE',
label : '@@theme.universal.colorScheme.ghostWhite@@'
},{
value : 'BLUE',
label : '@@theme.universal.colorScheme.blue@@'
},{
value : 'LIGHT_BLUE',
label : '@@theme.universal.colorScheme.lightBlue@@'
},{
value : 'DARKROYALBLUE',
label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
},{
value : 'ROYALBLUE',
label : '@@theme.universal.colorScheme.royalBlue@@'
},{
value : 'CORNFLOWERBLUE',
label : '@@theme.universal.colorScheme.cornflowerBlue@@'
},{
value : 'ALICEBLUE',
label : '@@theme.universal.colorScheme.aliceBlue@@'
},{
value : 'LIGHTSTEELBLUE',
label : '@@theme.universal.colorScheme.lightSteelBlue@@'
},{
value : 'STEELBLUE',
label : '@@theme.universal.colorScheme.steelBlue@@'
},{
value : 'LIGHTSKYBLUE',
label : '@@theme.universal.colorScheme.lightSkyBlue@@'
},{
value : 'SKYBLUE',
label : '@@theme.universal.colorScheme.skyBlue@@'
},{
value : 'DEEPSKYBLUE',
label : '@@theme.universal.colorScheme.deepSkyBlue@@'
},{
value : 'AZURE',
label : '@@theme.universal.colorScheme.azure@@'
},{
value : 'LIGHTCYAN',
label : '@@theme.universal.colorScheme.lightCyan@@'
},{
value : 'CYAN',
label : '@@theme.universal.colorScheme.cyan@@'
},{
value : 'TEAL',
label : '@@theme.universal.colorScheme.teal@@'
},{
value : 'GREEN',
label : '@@theme.universal.colorScheme.green@@'
},{
value : 'LIGHT_GREEN',
label : '@@theme.universal.colorScheme.lightGreen@@'
},{
value : 'LIME',
label : '@@theme.universal.colorScheme.lime@@'
},{
value : 'IVORY',
label : '@@theme.universal.colorScheme.ivory@@'
},{
value : 'LEMONCHIFFON',
label : '@@theme.universal.colorScheme.lemonChiffon@@'
},{
value : 'WHEAT',
label : '@@theme.universal.colorScheme.wheat@@'
},{
value : 'YELLOW',
label : '@@theme.universal.colorScheme.yellow@@'
},{
value : 'AMBER',
label : '@@theme.universal.colorScheme.amber@@'
},{
value : 'ORANGE',
label : '@@theme.universal.colorScheme.orange@@'
},{
value : 'DEEP_ORANGE',
label : '@@theme.universal.colorScheme.deepOrange@@'
},{
value : 'BROWN',
label : '@@theme.universal.colorScheme.brown@@'
},{
value : 'LIGHTGREY',
label : '@@theme.universal.colorScheme.lightGrey@@'
},{
value : 'GREY',
label : '@@theme.universal.colorScheme.grey@@'
},{
value : 'BLUE_GREY',
label : '@@theme.universal.colorScheme.blueGrey@@'
},{
value : 'DEEP_GREY',
label : '@@theme.universal.colorScheme.deepGrey@@'
},{
value : 'SILVER',
label : '@@theme.universal.colorScheme.silver@@'
},{
value : 'BLACK',
label : '@@theme.universal.colorScheme.black@@'
},{
value : 'WHITE',
label : '@@theme.universal.colorScheme.white@@'
},{
value : 'custom',
label : '@@theme.universal.colorScheme.custom@@'
}]
},
{
name : 'customButtonText',
label : '@@theme.universal.customButtonText@@',
type : 'color',
control_field: 'buttonTextColor',
control_value: 'custom',
control_use_regex: 'false',
required : 'true'
},
{
name : 'menuFontColor',
label : '@@theme.universal.menuFontColor@@',
type : 'selectbox',
options_label_processor : 'color',
value: 'BLACK',
options : [{
value : '',
label : ''
},{
value : 'RED',
label : '@@theme.universal.colorScheme.red@@'
},{
value : 'PINK',
label : '@@theme.universal.colorScheme.pink@@'
},{
value : 'LAVENDERBLUSH',
label : '@@theme.universal.colorScheme.lavenderBlush@@'
},{
value : 'THISTLE',
label : '@@theme.universal.colorScheme.thistle@@'
},{
value : 'PLUM',
label : '@@theme.universal.colorScheme.plum@@'
},{
value : 'PURPLE',
label : '@@theme.universal.colorScheme.purple@@'
},{
value : 'DEEP_PURPLE',
label : '@@theme.universal.colorScheme.deepPurple@@'
},{
value : 'INDIGO',
label : '@@theme.universal.colorScheme.indigo@@'
},{
value : 'LAVENDER',
label : '@@theme.universal.colorScheme.lavender@@'
},{
value : 'GHOSTWHITE',
label : '@@theme.universal.colorScheme.ghostWhite@@'
},{
value : 'BLUE',
label : '@@theme.universal.colorScheme.blue@@'
},{
value : 'LIGHT_BLUE',
label : '@@theme.universal.colorScheme.lightBlue@@'
},{
value : 'DARKROYALBLUE',
label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
},{
value : 'ROYALBLUE',
label : '@@theme.universal.colorScheme.royalBlue@@'
},{
value : 'CORNFLOWERBLUE',
label : '@@theme.universal.colorScheme.cornflowerBlue@@'
},{
value : 'ALICEBLUE',
label : '@@theme.universal.colorScheme.aliceBlue@@'
},{
value : 'LIGHTSTEELBLUE',
label : '@@theme.universal.colorScheme.lightSteelBlue@@'
},{
value : 'STEELBLUE',
label : '@@theme.universal.colorScheme.steelBlue@@'
},{
value : 'LIGHTSKYBLUE',
label : '@@theme.universal.colorScheme.lightSkyBlue@@'
},{
value : 'SKYBLUE',
label : '@@theme.universal.colorScheme.skyBlue@@'
},{
value : 'DEEPSKYBLUE',
label : '@@theme.universal.colorScheme.deepSkyBlue@@'
},{
value : 'AZURE',
label : '@@theme.universal.colorScheme.azure@@'
},{
value : 'LIGHTCYAN',
label : '@@theme.universal.colorScheme.lightCyan@@'
},{
value : 'CYAN',
label : '@@theme.universal.colorScheme.cyan@@'
},{
value : 'TEAL',
label : '@@theme.universal.colorScheme.teal@@'
},{
value : 'GREEN',
label : '@@theme.universal.colorScheme.green@@'
},{
value : 'LIGHT_GREEN',
label : '@@theme.universal.colorScheme.lightGreen@@'
},{
value : 'LIME',
label : '@@theme.universal.colorScheme.lime@@'
},{
value : 'IVORY',
label : '@@theme.universal.colorScheme.ivory@@'
},{
value : 'LEMONCHIFFON',
label : '@@theme.universal.colorScheme.lemonChiffon@@'
},{
value : 'WHEAT',
label : '@@theme.universal.colorScheme.wheat@@'
},{
value : 'YELLOW',
label : '@@theme.universal.colorScheme.yellow@@'
},{
value : 'AMBER',
label : '@@theme.universal.colorScheme.amber@@'
},{
value : 'ORANGE',
label : '@@theme.universal.colorScheme.orange@@'
},{
value : 'DEEP_ORANGE',
label : '@@theme.universal.colorScheme.deepOrange@@'
},{
value : 'BROWN',
label : '@@theme.universal.colorScheme.brown@@'
},{
value : 'LIGHTGREY',
label : '@@theme.universal.colorScheme.lightGrey@@'
},{
value : 'GREY',
label : '@@theme.universal.colorScheme.grey@@'
},{
value : 'BLUE_GREY',
label : '@@theme.universal.colorScheme.blueGrey@@'
},{
value : 'DEEP_GREY',
label : '@@theme.universal.colorScheme.deepGrey@@'
},{
value : 'SILVER',
label : '@@theme.universal.colorScheme.silver@@'
},{
value : 'BLACK',
label : '@@theme.universal.colorScheme.black@@'
},{
value : 'WHITE',
label : '@@theme.universal.colorScheme.white@@'
},{
value : 'custom',
label : '@@theme.universal.colorScheme.custom@@'
}],
control_field: 'themeScheme',
control_value: 'light',
control_use_regex: 'false',
required : 'true'
},
{
name : 'customMenuFontColor',
label : '@@theme.universal.customMenuFontColor@@',
type : 'color',
control_field: 'menuFontColor',
control_value: 'custom',
control_use_regex: 'false',
required : 'true'
},
{
name : 'fontColor',
label : '@@theme.universal.fontColor@@',
type : 'selectbox',
options_label_processor : 'color',
value: 'WHITE',
options : [{
value : '',
label : ''
},{
value : 'RED',
label : '@@theme.universal.colorScheme.red@@'
},{
value : 'PINK',
label : '@@theme.universal.colorScheme.pink@@'
},{
value : 'LAVENDERBLUSH',
label : '@@theme.universal.colorScheme.lavenderBlush@@'
},{
value : 'THISTLE',
label : '@@theme.universal.colorScheme.thistle@@'
},{
value : 'PLUM',
label : '@@theme.universal.colorScheme.plum@@'
},{
value : 'PURPLE',
label : '@@theme.universal.colorScheme.purple@@'
},{
value : 'DEEP_PURPLE',
label : '@@theme.universal.colorScheme.deepPurple@@'
},{
value : 'INDIGO',
label : '@@theme.universal.colorScheme.indigo@@'
},{
value : 'LAVENDER',
label : '@@theme.universal.colorScheme.lavender@@'
},{
value : 'GHOSTWHITE',
label : '@@theme.universal.colorScheme.ghostWhite@@'
},{
value : 'BLUE',
label : '@@theme.universal.colorScheme.blue@@'
},{
value : 'LIGHT_BLUE',
label : '@@theme.universal.colorScheme.lightBlue@@'
},{
value : 'DARKROYALBLUE',
label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
},{
value : 'ROYALBLUE',
label : '@@theme.universal.colorScheme.royalBlue@@'
},{
value : 'CORNFLOWERBLUE',
label : '@@theme.universal.colorScheme.cornflowerBlue@@'
},{
value : 'ALICEBLUE',
label : '@@theme.universal.colorScheme.aliceBlue@@'
},{
value : 'LIGHTSTEELBLUE',
label : '@@theme.universal.colorScheme.lightSteelBlue@@'
},{
value : 'STEELBLUE',
label : '@@theme.universal.colorScheme.steelBlue@@'
},{
value : 'LIGHTSKYBLUE',
label : '@@theme.universal.colorScheme.lightSkyBlue@@'
},{
value : 'SKYBLUE',
label : '@@theme.universal.colorScheme.skyBlue@@'
},{
value : 'DEEPSKYBLUE',
label : '@@theme.universal.colorScheme.deepSkyBlue@@'
},{
value : 'AZURE',
label : '@@theme.universal.colorScheme.azure@@'
},{
value : 'LIGHTCYAN',
label : '@@theme.universal.colorScheme.lightCyan@@'
},{
value : 'CYAN',
label : '@@theme.universal.colorScheme.cyan@@'
},{
value : 'TEAL',
label : '@@theme.universal.colorScheme.teal@@'
},{
value : 'GREEN',
label : '@@theme.universal.colorScheme.green@@'
},{
value : 'LIGHT_GREEN',
label : '@@theme.universal.colorScheme.lightGreen@@'
},{
value : 'LIME',
label : '@@theme.universal.colorScheme.lime@@'
},{
value : 'IVORY',
label : '@@theme.universal.colorScheme.ivory@@'
},{
value : 'LEMONCHIFFON',
label : '@@theme.universal.colorScheme.lemonChiffon@@'
},{
value : 'WHEAT',
label : '@@theme.universal.colorScheme.wheat@@'
},{
value : 'YELLOW',
label : '@@theme.universal.colorScheme.yellow@@'
},{
value : 'AMBER',
label : '@@theme.universal.colorScheme.amber@@'
},{
value : 'ORANGE',
label : '@@theme.universal.colorScheme.orange@@'
},{
value : 'DEEP_ORANGE',
label : '@@theme.universal.colorScheme.deepOrange@@'
},{
value : 'BROWN',
label : '@@theme.universal.colorScheme.brown@@'
},{
value : 'LIGHTGREY',
label : '@@theme.universal.colorScheme.lightGrey@@'
},{
value : 'GREY',
label : '@@theme.universal.colorScheme.grey@@'
},{
value : 'BLUE_GREY',
label : '@@theme.universal.colorScheme.blueGrey@@'
},{
value : 'DEEP_GREY',
label : '@@theme.universal.colorScheme.deepGrey@@'
},{
value : 'SILVER',
label : '@@theme.universal.colorScheme.silver@@'
},{
value : 'BLACK',
label : '@@theme.universal.colorScheme.black@@'
},{
value : 'WHITE',
label : '@@theme.universal.colorScheme.white@@'
},{
value : 'custom',
label : '@@theme.universal.colorScheme.custom@@'
}]
},
{
name : 'customFontColor',
label : '@@theme.universal.customFontColor@@',
type : 'color',
control_field: 'fontColor',
control_value: 'custom',
control_use_regex: 'false',
required : 'true'
}],
},
{
title : '@@theme.universal.advanced@@',
properties : [
{
name : 'fav_icon',
label : '@@theme.universal.favIcon@@',
type: 'image',
appPath: '[APP_PATH]',
allowInput : 'true',
isPublic : 'true',
imageSize : 'width:16px;height:16px;'
},
{
name : 'logo',
label : '@@theme.universal.logo@@',
type: 'image',
appPath: '[APP_PATH]',
allowInput : 'true',
isPublic : 'true',
imageSize : 'width:80px; height:35px; background-size: contain; background-repeat: no-repeat;'
},
{
name : 'profile',
label : '@@theme.universal.disabledProfile@@',
type : 'checkbox',
options : [{
value : 'true',
label : ''
}]
},
{
name : 'userImage',
label : '@@theme.universal.userImage@@',
type : 'selectbox',
value : '',
options : [{
value : 'no',
label : '@@theme.universal.userImage.no@@'
},{
value : '',
label : '@@theme.universal.userImage.gravatar@@'
},{
value : 'hashVariable',
label : '@@theme.universal.userImage.hashVariable@@'
}]
},
{
name : 'userImageUrlHash',
label : '@@theme.universal.userImageUrlHash@@',
type : 'textfield',
control_field: 'userImage',
control_value: 'hashVariable',
control_use_regex: 'false',
required : 'true'
},
{
name : 'inbox',
label : '@@theme.universal.inbox@@',
type : 'selectbox',
value : 'current',
options : [{
value : '',
label : '@@theme.universal.inbox.no@@'
},{
value : 'all',
label : '@@theme.universal.inbox.all@@'
},{
value : 'current',
label : '@@theme.universal.inbox.current@@'
}]
},
{
name : 'homeUrl',
label : '@@theme.universal.homeUrl@@',
type : 'textfield'
},
{
name : 'shortcutLinkLabel',
label : '@@theme.universal.shortcutLinkLabel@@',
value : '@@theme.universal.shortcut@@',
type : 'textfield'
},
{
name : 'shortcut',
label : '@@theme.universal.shortcut@@',
description : '@@theme.universal.shortcut.desc@@',
type : 'grid',
columns : [{
key : 'label',
label : '@@theme.universal.label@@'
},
{
key : 'href',
label : '@@theme.universal.href@@'
},
{
key : 'target',
label : '@@theme.universal.target@@',
options : [
{value: '', label: ''},
{value: '_blank', label: '@@theme.universal.target.newTab@@'},
]
},
{
key : 'isPublic',
label : '@@theme.universal.shortcut.public@@',
type : 'truefalse'
}]
},
{
name : 'userMenu',
label : '@@theme.universal.userMenu@@',
description : '@@theme.universal.userMenu.desc@@',
type : 'grid',
columns : [{
key : 'label',
label : '@@theme.universal.label@@'
},
{
key : 'href',
label : '@@theme.universal.href@@'
},
{
key : 'target',
label : '@@theme.universal.target@@',
options : [
{value: '', label: ''},
{value: '_blank', label: '@@theme.universal.target.newTab@@'},
]
}]
},
{
name : 'enableResponsiveSwitch',
label : '@@theme.universal.enableResponsiveSwitch@@',
type : 'checkbox',
value : 'true',
options : [{
value : 'true',
label : ''
}]
},
{
name : 'removeAssignmentTitle',
label : '@@theme.universal.removeAssignmentTitle@@',
type : 'checkbox',
options : [{
value : 'true',
label : ''
}]
},
{
name : 'homeAttractBanner',
label : '@@theme.universal.homeAttractBanner@@',
type : 'codeeditor',
mode : 'html'
},
{
name : 'css',
label : '@@theme.universal.customCss@@',
type : 'codeeditor',
mode : 'css'
},
{
name : 'js',
label : '@@theme.universal.customJavascript@@',
type : 'codeeditor',
mode : 'javascript'
},
{
name : 'subheader',
label : '@@theme.universal.subHeader@@',
type : 'codeeditor',
mode : 'html'
},
{
name : 'subfooter',
label : '@@theme.universal.subFooter@@',
type : 'codeeditor',
mode : 'html'
},
{
name: 'disableHelpGuide',
label: '@@theme.universal.disableHelpGuide@@',
type: 'checkbox',
value: 'false',
options: [{
value: 'true',
label: ''
}]
}]
},
{
title : '@@pwa.settings@@',
properties : [
{
name: 'disablePwa',
label: '@@pwa.disablePwa@@',
type: 'checkbox',
value: 'false',
options: [{
value: 'true',
label: ''
}]
},
{
name: 'disablePush',
label: '@@push.disablePush@@',
type: 'checkbox',
value: 'false',
options: [{
value: 'true',
label: ''
}]
},
{
name: 'urlsToCache',
label: '@@pwa.urlsToCache@@',
type:'textarea',
description: '@@pwa.urlsToCache.desc@@',
cols:'40',
rows:'10'
}],
buttons : [{
name : 'testpush',
label : '@@push.sendTestPush@@',
ajax_url : '[CONTEXT_PATH]/web/json/push/message',
ajax_method : 'POST',
addition_fields : [
{
name : 'username',
label : '@@push.username@@',
type : 'textfield',
required : 'True'
},
{
name : 'title',
label : '@@push.title@@',
type : 'textfield',
required : 'True'
},
{
name : 'text',
label : '@@push.text@@',
type : 'textfield',
required : 'True'
},
{
name : 'url',
label : '@@push.url@@',
type : 'textfield',
required : 'False'
},
{
name : 'icon',
label : '@@push.icon@@',
type : 'textfield',
required : 'False'
},
{
name : 'badge',
label : '@@push.badge@@',
type : 'textfield',
required : 'False'
}]
}]
}] |
c. Manage the dependency libraries of your plugin
| 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>
<!-- 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 "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 |
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(EvaTheme.class.getName(), new EvaTheme(), null));
} |
f. 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
...