Page History

ในบทช่วยสอนนี้เราจะทำตามแนวทางในการพัฒนาปลั๊กอินเพื่อพัฒนาปลั๊กอิน JDBC Options Binder ของเรา โปรดอ้างอิงถึง How to develop a Bean Shell Hash Variable สำหรับขั้นตอนรายละเอียดเพิ่มเติม

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

บางครั้งเราอาจต้องเขียนแบบสอบถามที่กำหนดเองเพื่อเติมข้อมูลตัวเลือกสำหรับฟิลด์ตัวเลือกหลายตัวของเรา

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

Joget Workflow ได้จัดเตรียมประเภทปลั๊กอินที่เรียกว่า Form Options Binder Plugin เราจะพัฒนาหนึ่งเพื่อรองรับการเชื่อมต่อ JDBC และแบบสอบถามที่กำหนดเอง

การป้อนข้อมูลที่จำเป็นสำหรับปลั๊กอินของคุณคืออะไร?

ในการพัฒนา Binder ตัวเลือก JDBC เราจะต้องมีการตั้งค่าการเชื่อมต่อ JDBC และแบบสอบถามแบบกำหนดเองเพื่อเติมข้อมูลตัวเลือก

แบบสอบถามควรสนับสนุนไวยากรณ์เพื่อฉีดค่าอ้างอิงเมื่อใช้ AJAX

ตัวอย่าง:

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

คอลัมน์แรกของผลลัพธ์ JDBC ที่ส่งคืนจะเป็นค่าของตัวเลือกและคอลัมน์ที่สองคือป้ายกำกับของตัวเลือก จะมีอีกคอลัมน์ที่สามที่เป็นทางเลือกสำหรับการจัดกลุ่มเมื่อไม่ได้ใช้ AJAX สำหรับรายการดรอปดาวน์แบบเรียงซ้อน

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

เราสามารถอ้างถึงการใช้งาน Form Options Binder plugins แหล่งข้อมูลเริ่มต้นของ Joget สามารถเรียกดูได้ด้วย AppUtil.getApplicationContext (). getBean ("setupDataSource")

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

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

บทช่วยสอนต่อไปนี้จัดทำขึ้นด้วย Macbook Pro และ Joget Source Code เวอร์ชั่น 5.0.0 โปรดอ้างอิง Guideline for developing a plugin สำหรับคำสั่งแพลตฟอร์มอื่น ๆ

สมมติว่าไดเรกทอรีโฟลเดอร์ของเรามีดังนี้

- Home
  - joget
    - plugins
    - jw-community
      -5.0.0

ไดเรกทอรี "ปลั๊กอิน" คือโฟลเดอร์ที่เราจะสร้างและจัดเก็บปลั๊กอินทั้งหมดของเราและไดเรกทอรี "jw-community" เป็นที่เก็บ Joget Workflow Source code เรียกใช้คำสั่งต่อไปนี้เพื่อสร้างโครงการ maven ในไดเรกทอรี "ปลั๊กอิน"

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

จากนั้นเชลล์สคริปต์จะขอให้เราใส่หมายเลขเวอร์ชันสำหรับปลั๊กอินและขอการยืนยันก่อนที่จะสร้างโครงการ Maven

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_options_binder
version: 5.0.0
package: org.joget.tutorial
Y: : y

เราควรได้รับข้อความ "BUILD SUCCESS" ที่ปรากฏในเครื่องของเราและโฟลเดอร์ "jdbc_options_binder" ที่สร้างในโฟลเดอร์ "plugins" เปิดโครงการ maven ด้วย IDE ที่คุณโปรดปราน ฉันจะใช้ NetBeans

เพียงแค่รหัส!

การขยายคลาสนามธรรมของประเภทปลั๊กอิน

สร้างคลาส "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 เช่นกัน โปรดอ้างอิงถึงปลั๊กอินตัวเลือกแบบฟอร์ม

ใช้วิธีนามธรรมทั้งหมด

ตามปกติเราต้องใช้วิธีนามธรรมทั้งหมด เราจะใช้วิธี AppPluginUtil.getMessage เพื่อสนับสนุน i18n และการใช้ตัวแปร MESSAGE_PATH คงที่สำหรับไดเรกทอรีทรัพยากรข้อความมัด

package org.joget.tutorial;
 
import org.joget.apps.app.service.AppPluginUtil;
import org.joget.apps.app.service.AppUtil;
import org.joget.apps.form.model.Element;
import org.joget.apps.form.model.FormAjaxOptionsBinder;
import org.joget.apps.form.model.FormBinder;
import org.joget.apps.form.model.FormData;
import org.joget.apps.form.model.FormLoadOptionsBinder;
import org.joget.apps.form.model.FormRowSet;
 
public class JdbcOptionsBinder extends FormBinder implements FormLoadOptionsBinder, FormAjaxOptionsBinder {
    
    private final static String MESSAGE_PATH = "messages/JdbcOptionsBinder";
    
    public String getName() {
        return "JDBC Option 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.JdbcOptionsBinder.pluginLabel", getClassName(), MESSAGE_PATH);
    }
    
    public String getDescription() {
        //support i18n
        return AppPluginUtil.getMessage("org.joget.tutorial.JdbcOptionsBinder.pluginDesc", getClassName(), MESSAGE_PATH);
    }
 
    public String getPropertyOptions() {
        return AppUtil.readPluginResource(getClassName(), "/properties/jdbcOptionsBinder.json", null, true, MESSAGE_PATH);
    }

    public FormRowSet load(Element element, String primaryKey, FormData formData) {
        return loadAjaxOptions(null); // reuse loadAjaxOptions method
    }
 
    public boolean useAjax() {
        return "true".equalsIgnoreCase(getPropertyString("useAjax")); // let user to decide whether or not to use ajax for dependency field
    }
 
    public FormRowSet loadAjaxOptions(String[] dependencyValues) {
        throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates.
    }
}

จากนั้นเราต้องสร้าง UI สำหรับผู้ใช้ผู้ดูแลระบบเพื่อให้อินพุตสำหรับปลั๊กอินของเรา ในวิธีการ getPropertyOptions เราได้ระบุไว้แล้วว่าไฟล์ข้อกำหนด Plugin Properties Options ของเราตั้งอยู่ที่ "/properties/jdbcOptionsBinder.json" ให้เราสร้างไดเรกทอรี "resources / properties" ภายใต้ไดเร็กทอรี "jdbc_options_binder / src / main" หลังจากสร้างไดเร็กทอรีให้สร้างไฟล์ชื่อ "jdbcOptionsBinder.json" ในโฟลเดอร์ "properties" ในไฟล์ตัวเลือกคำจำกัดความของคุณสมบัติเราจะต้องระบุตัวเลือกดังต่อไปนี้ โปรดทราบว่าเราจะใช้ไวยากรณ์ "@@ message.key @@" เพื่อรองรับ i18n ในตัวเลือกคุณสมบัติของเรา

[{
    title : '@@form.jdbcOptionsBinder.config@@',
    properties : [{
        name : 'jdbcDatasource',
        label : '@@form.jdbcOptionsBinder.datasource@@',
        type : 'selectbox',
        options : [{
            value : 'custom',
            label : '@@form.jdbcOptionsBinder.customDatasource@@'
        },{
            value : 'default',
            label : '@@form.jdbcOptionsBinder.defaultDatasource@@'
        }],
        value : 'default'
    },{
        name : 'jdbcDriver',
        label : '@@form.jdbcOptionsBinder.driver@@',
        description : '@@form.jdbcOptionsBinder.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.jdbcOptionsBinder.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.jdbcOptionsBinder.username@@',
        type : 'textfield',
        control_field: 'jdbcDatasource',
        control_value: 'custom',
        control_use_regex: 'false',
        value : 'root',
        required : 'true'
    },{
        name : 'jdbcPassword',
        label : '@@form.jdbcOptionsBinder.password@@',
        type : 'password',
        control_field: 'jdbcDatasource',
        control_value: 'custom',
        control_use_regex: 'false',
        value : ''
    },{
        name : 'useAjax',
        label : '@@form.jdbcOptionsBinder.useAjax@@',
        type : 'checkbox',
        options : [{
            value : 'true',
            label : ''
        }]
    },{
        name : 'addEmpty',
        label : '@@form.jdbcOptionsBinder.addEmpty@@',
        type : 'checkbox',
        options : [{
            value : 'true',
            label : ''
        }]
    },{
        name : 'emptyLabel',
        label : '@@form.jdbcOptionsBinder.emptyLabel@@',
        type : 'textfield',
        control_field: 'addEmpty',
        control_value: 'true',
        control_use_regex: 'false',
        value : ''
    },{
        name : 'sql',
        label : '@@form.jdbcOptionsBinder.sql@@',
        description : '@@form.jdbcOptionsBinder.sql.desc@@',
        type : 'codeeditor',
        mode : 'sql',
        required : 'true'
    }],
    buttons : [{
        name : 'testConnection',    
        label : '@@form.jdbcOptionsBinder.testConnection@@',
        ajax_url : '[CONTEXT_PATH]/web/json/app[APP_PATH]/plugin/org.joget.tutorial.JdbcOptionsBinder/service?action=testConnection',
        fields : ['jdbcDriver', 'jdbcUrl', 'jdbcUser', 'jdbcPassword'],
        control_field: 'jdbcDatasource',
        control_value: 'custom',
        control_use_regex: 'false'
    }]
}]

ในตัวเลือกคุณสมบัติเราเพิ่มปุ่มสำหรับทดสอบการเชื่อมต่อเมื่อใช้แหล่งข้อมูลที่กำหนดเอง ปุ่มนี้จะเรียก JSON API เพื่อทำการทดสอบ ดังนั้นปลั๊กอินของเราจะต้องใช้ส่วนติดต่อ org.joget.plugin.base.PluginWebSupport เพื่อทำให้เป็นปลั๊กอินบริการบนเว็บเช่นกัน ลองใช้วิธี Web Service Plugin ดังนี้เพื่อทดสอบการเชื่อมต่อ JDBC

    /**
     * JSON API for test connection button
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException 
     */
    public void webService(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //Limit the API for admin usage only
        boolean isAdmin = WorkflowUtil.isCurrentUserInRole(WorkflowUserManager.ROLE_ADMIN);
        if (!isAdmin) {
            response.sendError(HttpServletResponse.SC_UNAUTHORIZED);
            return;
        }
        
        String action = request.getParameter("action");
        if ("testConnection".equals(action)) {
            String message = "";
            Connection conn = null;
            try {
                AppDefinition appDef = AppUtil.getCurrentAppDefinition();
                
                String jdbcDriver = AppUtil.processHashVariable(request.getParameter("jdbcDriver"), null, null, null, appDef);
                String jdbcUrl = AppUtil.processHashVariable(request.getParameter("jdbcUrl"), null, null, null, appDef);
                String jdbcUser = AppUtil.processHashVariable(request.getParameter("jdbcUser"), null, null, null, appDef);
                String jdbcPassword = AppUtil.processHashVariable(SecurityUtil.decrypt(request.getParameter("jdbcPassword")), null, null, null, appDef);
                
                Properties dsProps = new Properties();
                dsProps.put("driverClassName", jdbcDriver);
                dsProps.put("url", jdbcUrl);
                dsProps.put("username", jdbcUser);
                dsProps.put("password", jdbcPassword);
                DataSource ds = BasicDataSourceFactory.createDataSource(dsProps);
                
                conn = ds.getConnection();
                
                message = AppPluginUtil.getMessage("form.jdbcOptionsBinder.connectionOk", getClassName(), MESSAGE_PATH);
            } catch (Exception e) {
                LogUtil.error(getClassName(), e, "Test Connection error");
                message = AppPluginUtil.getMessage("form.jdbcOptionsBinder.connectionFail", getClassName(), MESSAGE_PATH) + "\n"  + e.getMessage();
            } finally {
                try {
                    if (conn != null && !conn.isClosed()) {
                        conn.close();
                    }
                } catch (Exception e) {
                    LogUtil.error(DynamicDataSourceManager.class.getName(), e, "");
                }
            }
            try {
                JSONObject jsonObject = new JSONObject();
                jsonObject.accumulate("message", message);
                jsonObject.write(response.getWriter());
            } catch (Exception e) {
                //ignore
            }
        } else {
            response.setStatus(HttpServletResponse.SC_NO_CONTENT);
        }
    }

เมื่อเราเสร็จสิ้นด้วยตัวเลือกคุณสมบัติเพื่อรวบรวมอินพุตและบริการเว็บเพื่อทดสอบการเชื่อมต่อเราสามารถทำงานกับวิธีหลักของปลั๊กอินซึ่งเป็นวิธีการ loadAjaxOptions

    public FormRowSet loadAjaxOptions(String[] dependencyValues) {
        FormRowSet rows = new FormRowSet();
        rows.setMultiRow(true);
        
        //add empty option based on setting
        if ("true".equals(getPropertyString("addEmpty"))) {
            FormRow empty = new FormRow();
            empty.setProperty(FormUtil.PROPERTY_LABEL, getPropertyString("emptyLabel"));
            empty.setProperty(FormUtil.PROPERTY_VALUE, "");
            rows.add(empty);
        }
        
        //Check the sql. If require dependency value and dependency value is not exist, return empty result.
        String sql = getPropertyString("sql");
        if ((dependencyValues == null || dependencyValues.length == 0) && sql.contains("?")) {
            return rows;
        }
        
        Connection con = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        
        try {
            DataSource ds = createDataSource();
            con = ds.getConnection();
            
            //support for multiple dependency values
            if (sql.contains("?") && dependencyValues != null && dependencyValues.length > 1) {
                String mark = "?";
                for (int i = 1; i < dependencyValues.length; i++) {
                    mark += ", ?";
                }
                sql = sql.replace("?", mark);
            }
            
            pstmt = con.prepareStatement(sql);
            
            //set query parameters
            if (sql.contains("?") && dependencyValues != null && dependencyValues.length > 0) {
                for (int i = 0; i < dependencyValues.length; i++) {
                    pstmt.setObject(i + 1, dependencyValues[i]);
                }
            }
            
            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();
                
                String value = rs.getString(1);
                String label = rs.getString(2);
                
                row.setProperty(FormUtil.PROPERTY_VALUE, (value != null)?value:"");
                row.setProperty(FormUtil.PROPERTY_LABEL, (label != null)?label:"");
                
                if (columnsNumber > 2) {
                    String grouping = rs.getString(3);
                    row.setProperty(FormUtil.PROPERTY_GROUPING, grouping);
                }
                
                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;
    }

จัดการไลบรารีปลั๊กอินของคุณ

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

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

เตรียมปลั๊กอินสากลให้พร้อม (i18n)

สร้างไดเรกทอรี "ทรัพยากร / ข้อความ" ภายใต้ไดเรกทอรี "jdbc_options_binder / src / main" จากนั้นสร้างไฟล์ "JdbcOptionsBinder.properties" ในโฟลเดอร์ ในไฟล์คุณสมบัติให้เราเพิ่มคีย์ข้อความและป้ายกำกับทั้งหมดดังต่อไปนี้

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.

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

เราจะต้องลงทะเบียนคลาสปลั๊กอินของเราในคลาส Activator (สร้างอัตโนมัติในแพ็คเกจคลาสเดียวกัน) เพื่อบอก Felix Framework ว่านี่เป็นปลั๊กอิน

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

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

ให้สร้างปลั๊กอินของเรา เมื่อกระบวนการสร้างเสร็จสิ้นเราจะพบว่าไฟล์ "jdbc_options_binder-5.0.0.jar" ถูกสร้างขึ้นภายใต้ไดเรกทอรี "jdbc_options_binder / target" จากนั้นให้เราอัปโหลด jar ปลั๊กอินไปที่ Manage Plugins หลังจากอัปโหลดไฟล์ jar ให้ตรวจสอบอีกครั้งว่ามีการอัปโหลดและเปิดใช้งานปลั๊กอินอย่างถูกต้อง

จากนั้นให้เราสร้าง AJAX Cascading Drop-Down List ในแบบฟอร์มเพื่อทดสอบ มาสร้างแบบทดสอบของเรากันดังนี้

จากนั้นกำหนดค่ากล่องเลือกของเราและ JDBC binder

ในแบบสอบถามเราจะใช้แบบสอบถามต่อไปนี้เพื่อรับรายชื่อผู้ใช้ตามรหัสกลุ่ม

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;

กำหนดค่าการพึ่งพา "กลุ่ม" จากนั้นทดสอบผลลัพธ์

ตัวเลือกกล่องที่ผู้ใช้เลือกเปลี่ยนไปตามค่าที่เลือกของกล่องเลือกกลุ่ม ทีนี้เรามาเปลี่ยนเคียวรีต่อไปนี้เพื่อทดสอบรายการดร็อปดาวน์แบบเรียงซ้อนโดยไม่ต้องใช้ AJAX

select distinct username, firstName, groupId from dir_user u 
join dir_user_group g on u.username=g.userId 
group by username;

อย่าลืมยกเลิกการเลือก "ใช้ AJAX สำหรับตัวเลือกการเรียงซ้อน?" ตัวเลือกเพื่อให้ไม่ใช้ AJAX

ใช่มันทำงานได้ดี จากนั้นเราสามารถทดสอบการกำหนดค่าที่กำหนดเองและปุ่มทดสอบการเชื่อมต่อ

ก้าวไปอีกขั้นแบ่งปันหรือขายมัน

คุณสามารถดาวน์โหลดซอร์สโค้ดจาก jdbc_options_binder_src.zip

หากต้องการดาวน์โหลด jar ปลั๊กอินที่พร้อมใช้งานโปรดค้นหาได้ที่ http://marketplace.joget.org/