Page History

...

In this tutorial, we will be following the guideline for developing a plugin to develop our JDBC Form Load Binder plugin. Please also refer to this tutorial, วิธีการพัฒนา Bean Shell Hash Variable and also a JDBC related plugin วิธีการพัฒนา JDBC Options Binder for more details steps.

1.

...

ปัญหาคืออะไร?

For integration purpose, we would like to load our form data from a different database table instead of Joget form data table.

2.

...

วิธีแก้ปัญหา?

Joget Workflow has provided a plugin type called Form Load Binder Plugin. We will refer to the former to develop a plugin to support JDBC connection and custom query to load form data.

3.

...

อินพุตที่จำเป็นสำหรับปลั๊กอินของเรา?

To develop a JDBC Load binder, we will need the JDBC connection setting and also the custom query to populate the form data based on primary key or foreign key (for Grid).

...

SELECT * from app_fd_sample where id = ?

4.

...

ผลลัพธ์และผลลัพธ์ที่คาดหวังจากปลั๊กอินของคุณคืออะไร?

All retrieved columns are auto mapped to the fields with column name equal to field id.

5.

...

มีทรัพยากร / API

...

ที่สามารถนำกลับมาใช้ใหม่ได้หรือไม่?

We can refer to the implementation of other available Form Load Binder plugins. Joget default datasource can be retrieve with AppUtil.getApplicationContext().getBean("setupDataSource").

6.

...

เตรียมสภาพแวดล้อมการพัฒนาของคุณ

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

The following tutorial is prepared with a Macbook Pro and Joget Source Code version 5.0.0. Please refer to แนวทางสำหรับการพัฒนาปลั๊กอิน for other platform command.

Let say our folder directory is as follows.

Code Block
- Home - joget - plugins - jw-community -5.0.0

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 stored.

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

Code Block

language	bash

cd joget/plugins/
~/joget/jw-community/5.0.0/wflow-plugin-archetype/create-plugin.sh org.joget.tutorial jdbc_load_binder 5.0.0

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

Code Block

language	bash

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

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

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

7.

...

เริ่มโค้ด!

a. Extending the abstract class of a plugin type

...

Code Block

language	java
title	Implementation of all basic abstract methods
collapse	true

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.FormBinder;
import org.joget.apps.form.model.FormData;
import org.joget.apps.form.model.FormLoadBinder;
import org.joget.apps.form.model.FormLoadElementBinder;
import org.joget.apps.form.model.FormLoadMultiRowElementBinder;
import org.joget.apps.form.model.FormRowSet;
 
public class JdbcLoadBinder extends FormBinder implements FormLoadBinder, FormLoadElementBinder, FormLoadMultiRowElementBinder {
    
    private final static String MESSAGE_PATH = "messages/JdbcLoadBinder";
    
    public String getName() {
        return "JDBC Load Binder";
    }
 
    public String getVersion() {
        return "5.0.0";
    }
    
    public String getClassName() {
        return getClass().getName();
    }
 
    public String getLabel() {
        //support i18n
        return AppPluginUtil.getMessage("org.joget.tutorial.JdbcLoadBinder.pluginLabel", getClassName(), MESSAGE_PATH);
    }
    
    public String getDescription() {
        //support i18n
        return AppPluginUtil.getMessage("org.joget.tutorial.JdbcLoadBinder.pluginDesc", getClassName(), MESSAGE_PATH);
    }
 
    public String getPropertyOptions() {
        return AppUtil.readPluginResource(getClassName(), "/properties/jdbcLoadBinder.json", null, true, MESSAGE_PATH);
    }
 
    public FormRowSet load(Element element, String primaryKey, FormData formData) {
        throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates.
    }
}

Then, we have to do a UI for admin user to provide inputs for our plugin. In getPropertyOptions method, we already specify our ตัวเลือกคุณสมบัติปลั๊กอิน definition file is locate at "/properties/jdbcLoadBinder.json". Let us create a directory "resources/properties" under "jdbc_load_binder/src/main" directory. After create the directory, create a file named "jdbcLoadBinder.json" in the "properties" folder.

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

Code Block

language	js

[{
    title : '@@form.jdbcLoadBinder.config@@',
    properties : [{
        name : 'jdbcDatasource',
        label : '@@form.jdbcLoadBinder.datasource@@',
        type : 'selectbox',
        options : [{
            value : 'custom',
            label : '@@form.jdbcLoadBinder.customDatasource@@'
        },{
            value : 'default',
            label : '@@form.jdbcLoadBinder.defaultDatasource@@'
        }],
        value : 'default'
    },{
        name : 'jdbcDriver',
        label : '@@form.jdbcLoadBinder.driver@@',
        description : '@@form.jdbcLoadBinder.driver.desc@@',
        type : 'textfield',
        value : 'com.mysql.jdbc.Driver',
        control_field: 'jdbcDatasource',
        control_value: 'custom',
        control_use_regex: 'false',
        required : 'true'
    },{
        name : 'jdbcUrl',
        label : '@@form.jdbcLoadBinder.url@@',
        type : 'textfield',
        value : 'jdbc:mysql://localhost/jwdb?characterEncoding=UTF8',
        control_field: 'jdbcDatasource',
        control_value: 'custom',
        control_use_regex: 'false',
        required : 'true'
    },{
        name : 'jdbcUser',
        label : '@@form.jdbcLoadBinder.username@@',
        type : 'textfield',
        control_field: 'jdbcDatasource',
        control_value: 'custom',
        control_use_regex: 'false',
        value : 'root',
        required : 'true'
    },{
        name : 'jdbcPassword',
        label : '@@form.jdbcLoadBinder.password@@',
        type : 'password',
        control_field: 'jdbcDatasource',
        control_value: 'custom',
        control_use_regex: 'false',
        value : ''
    },{
        name : 'sql',
        label : '@@form.jdbcLoadBinder.sql@@',
        description : '@@form.jdbcLoadBinder.sql.desc@@',
        type : 'codeeditor',
        mode : 'sql',
        required : 'true'
    }],
    buttons : [{
        name : 'testConnection',    
        label : '@@form.jdbcLoadBinder.testConnection@@',
        ajax_url : '[CONTEXT_PATH]/web/json/app[APP_PATH]/plugin/org.joget.tutorial.JdbcLoadBinder/service?action=testConnection',
        fields : ['jdbcDriver', 'jdbcUrl', 'jdbcUser', 'jdbcPassword'],
        control_field: 'jdbcDatasource',
        control_value: 'custom',
        control_use_regex: 'false'
    }]
}]

Same as เหมือนกับ JDBC Options Binder, we will need to add a test connection button for custom JDBC setting. Please refer to เราจะต้องเพิ่มปุ่มเพื่อทำการทดสอบการเชื่อมต่อกับ JDBC. โปรดอ้างอิงถึง วิธีการพัฒนา JDBC Options Binder on the บนการใช้งาน Web Service Plugin implementation.

Once we done 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 load method.

Code Block

language	java

    public FormRowSet load(Element element, String primaryKey, FormData formData) {
        FormRowSet rows = new FormRowSet();
        rows.setMultiRow(true);
        //Check the sql. If require primary key and primary key is null, return empty result.
        String sql = getPropertyString("sql");
        if ((primaryKey == null || primaryKey.isEmpty()) && sql.contains("?")) {
            return rows;
        }
        
        Connection con = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        
        try {
            DataSource ds = createDataSource();
            con = ds.getConnection();
            
            pstmt = con.prepareStatement(sql);
            
            //set query parameters
            if (sql.contains("?") && primaryKey != null && !primaryKey.isEmpty()) {
                pstmt.setObject(1, primaryKey);
            }
            
            rs = pstmt.executeQuery();
            ResultSetMetaData rsmd = rs.getMetaData();
            int columnsNumber = rsmd.getColumnCount();
            
            // Set retrieved result to Form Row Set
            while (rs.next()) {
                FormRow row = new FormRow();
                
                //get the name of each column as field id 
                for (int i = 1; i <= columnsNumber; i++) {
                    String name = rsmd.getColumnName(i);
                    String value = rs.getString(name);
                    
                    if (FormUtil.PROPERTY_ID.equals(name)) {
                        row.setId(value);
                    } else {
                        row.setProperty(name, (value != null)?value:"");
                    }
                }
                
                rows.add(row);
            }
        } catch (Exception e) {
            LogUtil.error(getClassName(), e, "");
        } finally {
            try {
                if (rs != null) {
                    rs.close();
                }
                if (pstmt != null) {
                    pstmt.close();
                }
                if (con != null) {
                    con.close();
                }
            } catch (Exception e) {
                LogUtil.error(getClassName(), e, "");
            }
        }
        
        return rows;
    }
    
    /**
     * To creates data source based on setting
     * @return
     * @throws Exception 
     */
    protected DataSource createDataSource() throws Exception {
        DataSource ds = null;
        String datasource = getPropertyString("jdbcDatasource");
        if ("default".equals(datasource)) {
            // use current datasource
             ds = (DataSource)AppUtil.getApplicationContext().getBean("setupDataSource");
        } else {
            // use custom datasource
            Properties dsProps = new Properties();
            dsProps.put("driverClassName", getPropertyString("jdbcDriver"));
            dsProps.put("url", getPropertyString("jdbcUrl"));
            dsProps.put("username", getPropertyString("jdbcUser"));
            dsProps.put("password", getPropertyString("jdbcPassword"));
            ds = BasicDataSourceFactory.createDataSource(dsProps);
        }
        return ds;
    }

c.

Manage the

สร้าง dependency libraries

of your plugin

ของปลั๊กอินของคุณ

ปลั๊กอินของเราใช้ Our plugin is using dbcp, javax.servlet.http.HttpServletRequest and javaxและคลาส javax.servlet.http.HttpServletResponse class, so we will need to add jsp. ดังนั้นเราต้องเพิ่ม jsp-api and และ commons-dbcp library to our ในไฟล์ POM file.ของเรา

Code Block

language	xml

<!-- 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

ของคุณให้พร้อม

We are using เราใช้ i18n message key in ในการ getLabel and และ getDescription method. We also used i18n และเรายังใช้ i18n message key in our ใน properties options definition as well. So, we will need to create a ของเราด้วยเหมือนกัน ดังนั้นเราต้องสร้างไฟล์ message resource bundle properties file for our plugin.สำหรับปลั๊กอินของเรา

สร้าง Create directory "resources/messages" under ภายใต้ "jdbc_load_binder/src/main" directory. Then, create a จากนั้นสร้างไฟล์ "JdbcLoadBinder.properties" file in the folder. In the properties file, let add all the message keys and its label as below.ในโฟลเดอร์. ในไฟล์คุณสมบัติเราต้องเพิ่ม message keys และ label ดังต่อไปนี้

Code Block

org.joget.tutorial.JdbcLoadBinder.pluginLabel=JDBC Binder
org.joget.tutorial.JdbcLoadBinder.pluginDesc=Used to load form data using JDBC
form.jdbcLoadBinder.config=Configure JDBC Binder
form.jdbcLoadBinder.datasource=Datasource
form.jdbcLoadBinder.customDatasource=Custom Datasource
form.jdbcLoadBinder.defaultDatasource=Default Datasource
form.jdbcLoadBinder.driver=Custom JDBC Driver
form.jdbcLoadBinder.driver.desc=Eg. com.mysql.jdbc.Driver (MySQL), oracle.jdbc.driver.OracleDriver (Oracle), com.microsoft.sqlserver.jdbc.SQLServerDriver (Microsoft SQL Server)
form.jdbcLoadBinder.url=Custom JDBC URL
form.jdbcLoadBinder.username=Custom JDBC Username
form.jdbcLoadBinder.password=Custom JDBC Password
form.jdbcLoadBinder.sql=SQL SELECT Query
form.jdbcLoadBinder.sql.desc=Use question mark (?) in your query to represent primary key or foreign key
form.jdbcLoadBinder.testConnection=Test Connection
form.jdbcLoadBinder.connectionOk=Database connected
form.jdbcLoadBinder.connectionFail=Not able to establish connection.

e.

Register your plugin to

ลงทะเบียนปลั๊กอินของคุณที่ Felix Framework

We will have to register our plugin class in Activator class (Auto generated in the same class package) to tell Felix Framework that this is a plugin.เราจะต้องลงทะเบียนคลาสปลั๊กอินของเราในคลาส Activator (สร้างอัตโนมัติในแพ็คเกจคลาสเดียวกัน) เพื่อบอก Felix Framework ว่านี่คือปลั๊กอิน

Code Block

language	java

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

f.

Build it and testing

สร้างและทดสอบ

สร้างปลั๊กอินของเรา เมื่อสร้างสำเร็จเราจะพบว่าไฟล์ "jdbcLet build our plugin. Once the building process is done, we will found a "jdbc_load_binder-5.0.0.jar" file is created under อยู่ภายใต้ "jdbc_load_binder/target" directory.

Then, let upload the plugin jar to จากนั้นให้เราอัพโหลดปลั๊กอิน Manage Plugins. After upload the jar file, double check the plugin is uploaded and activated correctly.หลังจากอัพโหลดไฟล์ jar ให้ตรวจสอบอีกครั้งว่าปลั๊กอินอัพโหลดถูกต้อง

Let create a form to load firstName, lastName and email from dir_user table based on username to test the load binder.

Image Removed

ให้สร้างแบบฟอร์มเพื่อโหลด "firstName", "lastName" และ "email" จากตาราง dir_user ตามชื่อผู้ใช้เพื่อทดสอบการโหลด

Image Added

จากนั้นกำหนดค่า load binder ของฟอร์มเพื่อใช้ JDBC Binder และ query ต่อไปนี้Then, configure the load binder of the form to use JDBC Binder with the following query.

Code Block

language	sql

 select * from dir_user where username = ?

Let create an userview and drag a Form Menu element to display our form. Then, publish it and test our form with an "id" parameter.

Image Removed

ให้สร้าง userview และลากองค์ประกอบเมนูแบบฟอร์มเพื่อแสดงแบบฟอร์มของเรา จากนั้นเผยแพร่และทดสอบแบบฟอร์มของเราด้วยพารามิเตอร์ "id"Image Added

จากนั้นให้เพิ่มองค์ประกอบตารางและ query เพื่อทดสอบดังต่อไปนี้Next, let add a grid element and test with the following query.

Code Block

language	sql

select * from dir_group g 
join dir_user_group ug on ug.groupId = g.id
where ug.userId = ?

Let check our result again.ตรวจสอบผลลัพธ์ของเราอีกครั้ง

It works! Please remember test the other features of the plugin as well. มันได้ผล! โปรดอย่าลืมทดสอบคุณสมบัติอื่น ๆ ของปลั๊กอินด้วย

8.

...

ขั้นต่อไป แชร์หรือขาย

คูรสามารถดาวน์โหลหด source code จาก You can download the source code from jdbc_load_binder_src.zip.

To download the ready-to-use plugin jar, please find it in หากต้องการดาวน์โหลด jar ปลั๊กอินที่พร้อมใช้งานโปรดค้นหาได้ที่ http://marketplace.joget.org/.

...

Page tree

Versions Compared

Old Version 2

New Version 3

Key

1.

ปัญหาคืออะไร?

2.

วิธีแก้ปัญหา?

3.

อินพุตที่จำเป็นสำหรับปลั๊กอินของเรา?

4.

ผลลัพธ์และผลลัพธ์ที่คาดหวังจากปลั๊กอินของคุณคืออะไร?

5.

มีทรัพยากร / API

ที่สามารถนำกลับมาใช้ใหม่ได้หรือไม่?

6.

เตรียมสภาพแวดล้อมการพัฒนาของคุณ

7.

เริ่มโค้ด!

a. Extending the abstract class of a plugin type

c.

สร้าง dependency libraries

ของปลั๊กอินของคุณ

d.

สร้างปลั๊กอิน internationalization (i18n)

ของคุณให้พร้อม

e.

ลงทะเบียนปลั๊กอินของคุณที่ Felix Framework

f.

สร้างและทดสอบ

8.

ขั้นต่อไป แชร์หรือขาย