Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

 

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 วิธีการพัฒนา 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.เพื่อวัตถุประสงค์ในการรวมเราต้องการโหลดข้อมูลฟอร์มของเราจากตารางฐานข้อมูลอื่นแทนที่จะเป็นตารางข้อมูล Joget

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. เราสามารถอ้างอิงถึงการเชื่อมต่อเพื่อสนับสนุนในการพัฒนาปลั๊กอิน JDBC และ กำหนดค่า query เพื่อโหลดข้อมูลในแบบฟอร์ม

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  เราจะต้องมีการตั้งค่าการเชื่อมต่อ JDBC และ query ที่กำหนดเองเพื่อเติมข้อมูลแบบฟอร์มตาม primary key หรือ foreign key (for เพื่อ Grid).

  1. Datasource: Using custom datasource or Joget default datasource การใช้แหล่งข้อมูลที่กำหนดเองหรือแหล่งข้อมูลเริ่มต้นของ Joget
  2. Custom JDBC Driver: The JDBC driver for custom datasource ไดรเวอร์ JDBC สำหรับแหล่งข้อมูลที่กำหนดเอง
  3. Custom JDBC URL: The JDBC connection URL for custom datasourceURL การเชื่อมต่อ JDBC สำหรับแหล่งข้อมูลที่กำหนดเอง
  4. Custom JDBC Username: The username for custom datasourceชื่อผู้ใช้สำหรับแหล่งข้อมูลที่กำหนดเอง
  5. Custom JDBC Password: The password for custom datasourceรหัสผ่านสำหรับแหล่งข้อมูลที่กำหนดเอง
  6. SQL Query: The query to populate form data.  query เพื่อเติมข้อมูลแบบฟอร์ม

query ควรจะสนับสนุน syntax เพื่อการอ้างอิงถึง The query should also support a syntax to inject the primary key (For เพื่อ Form/Section) or หรือ foreign key (For เพื่อ Grid element)

Exampleตัวอย่าง:

  1. SELECT * from app_fd_sample where id = ?

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

All retrieved columns are auto mapped to the fields with column name equal to field id. คอลัมน์ที่ดึงข้อมูลทั้งหมดจะถูกแมปอัตโนมัติกับฟิลด์ที่มีชื่อคอลัมน์เท่ากับฟิลด์ ID

5. มีทรัพยากร / API ที่สามารถนำกลับมาใช้ใหม่ได้หรือไม่?

We can refer to the implementation of other available เราสามารถอ้างถึงการดำเนินการของอื่น ๆ ที่มีอยู่ Form Load Binder plugins. Joget default datasource can be retrieve with AppUtil แหล่งข้อมูลเริ่มต้นของ Joget สามารถเรียกดูได้ AppUtil.getApplicationContext().getBean("setupDataSource").

6.

...

 เตรียม environment ของคุณเพื่อการพัฒนา

 

เราจำเป็นต้องให้ซอร์สโค้ด Joget Workflow ของเราพร้อมและสร้างโดยทำตาม 

...

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 บทช่วยสอนต่อไปนี้จัดทำขึ้นด้วย Macbook Pro และ 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.

เรียกใช้คำสั่งต่อไปนี้เพื่อสร้างโครงการ maven ในไดเรกทอรี "ปลั๊กอิน"Run the following command to create a maven project in "plugins" directory.

Code Block
languagebash
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.จากนั้น the shell script จะขอให้เราป้อนปลั๊กอินสำหรับรุ่นของคุณและขอให้เรายืนยันก่อนสร้างโครงการ maven

Code Block
languagebash
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 เปิดโครงการ maven ด้วย IDE ที่คุณโปรดปราน เราแนะนำให้ใช้ NetBeans.  

7. เริ่มโค้ด!

a.

...

 การขยาย abstract class

...

ของประเภทปลั๊กอิน

สร้างคลาส Create a "JdbcLoadBinder" class under ภายใต้ "org.joget.tutorial" package. Then, จากนั้น extend the class with ด้วย org.joget.apps.form.model.FormBinder abstract class.

To make it work as a เพื่อให้มันทำงานเป็น Form Load Binder, we will need to implement เราจำเป็นจะต้องใช้อินเตอร์เฟซ org.joget.apps.form.model.FormLoadBinder interface. Then, we need to implement . จากนั้นต้องใช้อินเตอร์เฟซ org.joget.apps.form.model.FormLoadElementBinder interface to make this plugin show as a selection in load binder select box and implement   เพื่อให้ปลั๊กอินนี้แสดงเป็นตัวเลือกในกล่องเลือกโหลด binder และใช้ org.joget.apps.form.model.FormLoadMultiRowElementBinder interface to list it under the load binder select box of . อินเตอร์เฟสเพื่อแสดงรายการภายใต้  select box ของ grid element. 

 Please refer to โปรดอ้างอิงถึง Form Load Binder Plugin.

b.

...

 การดำเนินการของ abstract methods

...

ทั้งหมด

เช่นเคยเราต้องใช้ As usual, we have to implement all the abstract methods ทั้งหมด. We will using เราจะใช้ AppPluginUtil.getMessage method to support i18n and using constant variable เพื่อสนับสนุน i18n และใช้ตัวแปรคงที่ MESSAGE_PATH for เพื่อ message resource bundle directory.

 

Code Block
languagejava
titleImplementation of all basic abstract methods
collapsetrue
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 จากนั้นเราต้องทำ UI สำหรับผู้ใช้ผู้ดูแลระบบเพื่อให้อินพุตสำหรับปลั๊กอินของเรา. ใน getPropertyOptions method, เราได้ระบุ ตัวเลือกคุณสมบัติปลั๊กอิน ของเราไว้ที่ "/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.

ในไฟล์ตัวเลือกคุณสมบัติ เราจะต้องเลือกดังต่อไปนี้ โปรดทราบว่าเราสามารถใช้ syntax 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.  ในการสนับสนุน i18n ตัวเลือกคุรสมบัติของเราได้

Code Block
languagejs
[{
    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'
    }]
}]

เหมือนกับ JDBC Options Binder, เราจะต้องเพิ่มปุ่มเพื่อทำการทดสอบการเชื่อมต่อกับ JDBC. โปรดอ้างอิงถึง วิธีการพัฒนา JDBC Options Binder บนการใช้งาน Web Service Plugin 

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
languagejava
    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. สร้าง dependency libraries ของปลั๊กอินของคุณ

ปลั๊กอินของเราใช้ dbcp, javax.servlet.http.HttpServletRequest และคลาส javax.servlet.http.HttpServletResponse. ดังนั้นเราต้องเพิ่ม jsp-api และ commons-dbcp library ในไฟล์ POM ของเรา

Code Block
languagexml
<!-- 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. สร้างปลั๊กอิน internationalization (i18n) ของคุณให้พร้อม

เราใช้ i18n message key ในการ getLabel และ getDescription method. และเรายังใช้ i18n message key ใน properties options definition ของเราด้วยเหมือนกัน ดังนั้นเราต้องสร้างไฟล์ message resource bundle properties สำหรับปลั๊กอินของเรา

สร้าง directory "resources/messages" ภายใต้ "jdbc_load_binder/src/main" directory. จากนั้นสร้างไฟล์ "JdbcLoadBinder.properties" ในโฟลเดอร์. ในไฟล์คุณสมบัติเราต้องเพิ่ม 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. ลงทะเบียนปลั๊กอินของคุณที่ Felix Framework

เราจะต้องลงทะเบียนคลาสปลั๊กอินของเราในคลาส Activator (สร้างอัตโนมัติในแพ็คเกจคลาสเดียวกัน) เพื่อบอก Felix Framework ว่านี่คือปลั๊กอิน
Code Block
languagejava
    public void start(BundleContext context) {
        registrationList = new ArrayList<ServiceRegistration>();
        //Register plugin here
        registrationList.add(context.registerService(JdbcLoadBinder.class.getName(), new JdbcLoadBinder(), null));
    } 

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

สร้างปลั๊กอินของเรา เมื่อสร้างสำเร็จเราจะพบว่าไฟล์ "jdbc_load_binder-5.0.0.jar" อยู่ภายใต้ "jdbc_load_binder/target" directory.

จากนั้นให้เราอัพโหลดปลั๊กอิน Manage Plugins. หลังจากอัพโหลดไฟล์ jar ให้ตรวจสอบอีกครั้งว่าปลั๊กอินอัพโหลดถูกต้อง

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

จากนั้นกำหนดค่า load binder ของฟอร์มเพื่อใช้ JDBC Binder และ query ต่อไปนี้

Code Block
languagesql
 select * from dir_user where username = ?

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

จากนั้นให้เพิ่มองค์ประกอบตารางและ  query เพื่อทดสอบดังต่อไปนี้

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

ตรวจสอบผลลัพธ์ของเราอีกครั้ง

...