ในบทช่วยสอนนี้ เราจะทำตาม guideline for developing a plugin เพื่อพัฒนาปลั๊กอิน Mood Rating Form Field ของเรา โปรดอ้างอิงถึงบทช่วยสอนแรกสุด วิธีการพัฒนา Bean Shell Hash Variable เพื่อลายระเอียดสำหรับขั้นตอนต่อไป

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

เราต้องการให้มีฟิลด์การจัดเรตพร้อมอีโมจิซึ่งสามารถนำไปใช้กับรูปแบบอื่นได้

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

เราจะพัฒนา Form Field Element Plugin เพื่อแสดงฟิลด์อีโมจิ

3. อินพุตที่จำเป็นสำหรับปลั๊กอินของคุณคืออะไร?

ในการพัฒนาปลั๊กอิน Mood Rating Form Field เราจะต้องให้อินพุตมาตรฐานบางอย่างสำหรับ Form Field element.

  1. Field Id (รหัสฟิลด์)
  2. Field Label (ป้ายฟิลด์)
  3. Validator (เครื่องมือตรวจสอบ)
  4. Readonly (อ่านอย่างเดียว)
  5. Workflow Variable (ตัวแปรเวิร์กโฟลว์)

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

ฟิลด์ฟอร์มแสดงการเลือกอีโมจิและปุ่มตัวเลือก

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

เพื่อการพัฒนาปลั๊กอิน Mood Rating Form Field lugin,เราสามารถขยายฟิลด์ Radio หลักจากนั้นแทนที่ตัวเลือกคุณสมบัติแม่แบบและปลั๊กอิน

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

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

บทช่วยสอนต่อไปนี้จัดทำขึ้นด้วย Macbook Pro และ the Joget Source Code is version 5.0.1. โปรดอ้างอิงถึง แนวทางสำหรับการพัฒนาปลั๊กอิน สำหรับคำสั่งแพลตฟอร์มอื่น ๆ

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

- Home
  - joget
    - plugins
    - jw-community
      -5.0.1

ไดเรกทอรี "ปลั๊กอิน" คือโฟลเดอร์ที่เราจะสร้างและจัดเก็บปลั๊กอินของเราทั้งหมดและไดเรกทอรี "jw-community" เป็นที่เก็บซอร์สโค้ด Joget Workflow

เรียกใช้คำสั่งต่อไปนี้เพื่อสร้างโครงการ maven ในไดเรกทอรี "ปลั๊กอิน"

cd joget/plugins/
~/joget/jw-community/5.0.1/wflow-plugin-archetype/create-plugin.sh org.joget mood_rating 5.0.1

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

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

เราควรได้รับข้อความ "BUILD SUCCESS" ที่ปรากฏในเครื่องของเราและโฟลเดอร์ "mood_rating" ที่สร้างขึ้นในโฟลเดอร์ "ปลั๊กอิน"

เปิดโครงการ maven ด้วย IDE ที่คุณชื่นชอบ เราแนะนำให้ใช้ NetBeans.  

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

a. การขยาย abstract class ของประเภทปลั๊กอิน

สร้างคลาส "MoodRatingField" ภายใต้ "org.joget" package. จากนั้นขยายคลาสด้วย org.joget.apps.form.lib.Radio. คลาส org.joget.apps.form.lib.Radio เป็นการดำเนินการของคลาส org.joget.apps.form.model.Element abstract class. โปรดอ้างอิงถึง Form Field Element Plugin.

b. การดำเนินการของ abstract methods ทั้งหมด

เช่นเคยเราจะต้องใช้ abstract methods ทั้งหมด เราจะใช้ AppPluginUtil.getMessage method เพื่อสนับสนุน i18n และใช้ตัวแปรคงที่ MESSAGE_PATH สำหรับ message resource bundle directory.

Implementation of all basic abstract methods 
package org.joget;
 
import java.util.Map;
import org.joget.apps.app.service.AppPluginUtil;
import org.joget.apps.app.service.AppUtil;
import org.joget.apps.form.lib.Radio;
import org.joget.apps.form.model.FormBuilderPalette;
 
public class MoodRatingField extends Radio {
    
    private final static String MESSAGE_PATH = "message/form/MoodRatingField";
    
    @Override
    public String getName() {
        return "Mood Rating";
    }

    @Override
    public String getVersion() {
        return "5.0.0";
    }
    
    @Override
    public String getClassName() {
        return getClass().getName();
    }
    
    @Override
    public String getFormBuilderCategory() {
        return FormBuilderPalette.CATEGORY_CUSTOM;
    }
    
    @Override
    public String getLabel() {
        //support i18n
        return AppPluginUtil.getMessage("org.joget.MoodRatingField.pluginLabel", getClassName(), MESSAGE_PATH);
    }
 
    @Override
    public String getDescription() {
        //support i18n
        return AppPluginUtil.getMessage("org.joget.MoodRatingField.pluginDesc", getClassName(), MESSAGE_PATH);
    }
    
    @Override
    public String getPropertyOptions() {
        return AppUtil.readPluginResource(getClass().getName(), "/properties/form/moodRatingField.json", null, true, MESSAGE_PATH);
    }
    
    @Override
    public String getFormBuilderTemplate() {
        return "<label class='label'>"+getLabel()+"</label>";
    }
}

ตอนนี้เราต้องสร้าง UI สำหรับผู้ใช้ผู้ดูแลระบบเพื่อให้อินพุตสำหรับปลั๊กอินของเรา ใน getPropertyOptions method, เราได้ระบุไฟล์ ตัวเลือกคุณสมบัติปลั๊กอิน ของเราไว้ที่ "/properties/form/moodRatingField.json". ให้เราสร้าง directory "resources/properties/form" ภายใต้ "mood_rating/src/main" directory. หลังจากสร้าง directory, ให้เราสร้างไฟล์ชื่อ "moodRatingField.json" ในโฟลเดอร์ "properties"

ในไฟล์ตัวเลือกคุณสมบัติ เราจะต้องตั่งค่าตัวเลือกดังต่อไปนี้ โปรดทราบว่าเราสามารถใช้ "@@message.key@@" syntax เพื่อสนับสนุน i18n ในตัวเลือกคุณวมบัติของเรา

[{
    title : '@@form.moodRating.config@@',
    properties : [{
        name : 'id',
        label : '@@form.radio.id@@',
        type : 'textfield',
        required : 'True',
        regex_validation : '^[a-zA-Z0-9_]+$',
        validation_message : '@@form.radio.invalidId@@'
    },
    {
        name : 'label',
        label : '@@form.radio.label@@',
        type : 'textfield',
        value : '@@org.joget.MoodRatingField.pluginLabel@@'
    }]
},
{
    title : '@@form.radio.advancedOptions@@',
    properties : [{
        label : '@@form.radio.data@@',
        type : 'header'
    },
    {
        name : 'validator',
        label : '@@form.radio.validator@@',
        type : 'elementselect',
        options_ajax : '[CONTEXT_PATH]/web/property/json/getElements?classname=org.joget.apps.form.model.FormValidator',
        url : '[CONTEXT_PATH]/web/property/json[APP_PATH]/getPropertyOptions'
    },
    {
        label : '@@form.radio.ui@@',
        type : 'header'
    },
    {
        name : 'readonly',
        label : '@@form.radio.readonly@@',
        type : 'checkbox',
        value : 'False',
        options : [{
            value : 'true',
            label : ''
        }]
    },
    {
        label : '@@form.radio.workflow@@',
        type : 'header'
    },
    {
        name : 'workflowVariable',
        label : '@@form.radio.workflowVariable@@',
        type : 'textfield'
    }]
}]

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

    @Override
    public String renderTemplate(FormData formData, Map dataModel) {
        String template = "moodRatingField.ftl";
        
        // set value
        String value = FormUtil.getElementPropertyValue(this, formData);
        dataModel.put("value", value);
        String html = FormUtil.generateElementHtml(this, formData, template, dataModel);
        return html;
    }

ใน renderTemplate เราระบุไฟล์เทมเพลตเป็น "moodRatingField.ftl" ให้สร้างไฟล์นี้ภายใต้ไดเรกทอรี "mood_rating / src / main / resources / templates" จากนั้นใช้ไวยากรณ์ FreeMaker เพื่อสร้างเทมเพลตของเราดังต่อไปนี้:

<div class="form-cell mood_rating" ${elementMetaData!}>
    <label class="label">${element.properties.label} <span class="form-cell-validator">${decoration}</span><#if error??> <span class="form-error-message">${error}</span></#if></label>
    <div class="form-cell-value" id="${elementParamName!}${element.properties.elementUniqueKey!}">
    <#if !(request.getAttribute("org.joget.MoodRatingField")??) >
        <style>
            .mood_rating .tdstyle {text-align:center;width:20%;border:0px none transparent !important;}
        </style>
    </#if>    
    <table style="width:150px">
        <tbody>
            <tr>
                <td class="tdstyle"><img height="25" width="25" src="${request.contextPath}/plugin/org.joget.MoodRatingField/images/smiley5.png"></td>
                <td class="tdstyle"><img height="25" width="25" src="${request.contextPath}/plugin/org.joget.MoodRatingField/images/smiley4.png"></td>
                <td class="tdstyle"><img height="25" width="25" src="${request.contextPath}/plugin/org.joget.MoodRatingField/images/smiley3.png"></td>
                <td class="tdstyle"><img height="25" width="25" src="${request.contextPath}/plugin/org.joget.MoodRatingField/images/smiley2.png"></td>
                <td class="tdstyle"><img height="25" width="25" src="${request.contextPath}/plugin/org.joget.MoodRatingField/images/smiley1.png"></td>
            </tr>
            <tr>
                <#list ['5', '4', '3', '2', '1'] as i>
                    <td class="tdstyle">
                        <input grouping="${elementParamName!}" id="${elementParamName!}" name="${elementParamName!}" type="radio" value="${i}" <#if error??>class="form-error-cell"</#if> <#if element.properties.readonly! == 'true'> disabled</#if> <#if value?? && value == i>checked</#if> />
                    </td>
                </#list>
            </tr>
        </tbody>
    </table>
    </div>
    <div style="clear:both;"></div>
</div>

มีเทมเพลตไฟล์อีโมจิบางไฟล์ที่จะใช้โดยให้วางไฟล์รูปภาพเหล่านั้นไว้ในไดเรกทอรี "mood_rating / src / main / resources / resources / image"

c. จัดการ dependency libraries ของปลั๊กอินของคุณ

ไม่จำเป็นต้องมี library เพิ่มเติม

d. เตรียมปลั๊กอิน internationalization (i18n) ของคุณให้พร้อม

เรากำลังใช้ i18n message key ใน getLabel และ getDescription method. เราจะใช้ i18n message key ในไฟล์ตัวเลือกคุณสมบัติของเราเช่นกัน จากนั้นเราจะต้องสร้าง message resource bundle ในไฟล์คุณสมบัติสำหรับปลั๊กอินของเรา

สร้าง directory, "resources/message/form", ภายใต้ "mood_rating/src/main" directory. จากนั้นสร้างไฟล์ "MoodRatingField.properties" ในโฟลเดอร์. ในไฟล์คุณสมบัติให้เพิ่ม message keys และ label ทั้งหมดดังต่อไปนี้

org.joget.MoodRatingField.pluginLabel=Mood Rating
org.joget.MoodRatingField.pluginDesc=Form Field for rating mood
form.moodRating.config=Edit Mood Rating

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

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

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

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

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

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

จากนั้นให้ตรวจสอบฟิลด์แสดงอารมณ์ข้อมูลใน ตัวสร้างฟอร์ม.

ลากไปที่ตัวสร้างฟอร์มและตั้งค่าคุณสมบัติ

 

บันทึกคุณสมบัติและตรวจสอบว่าฟิลด์แสดงผลเป็น canvas ดังต่อไปนี้

ตรวจสอบและทดสอบในรูปแบบ

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

คุณสามารถดาวน์โหลด source code จาก mood_rating_src.zip.

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

  • No labels