มีคำถามและขั้นตอนต่อไปนี้เพื่อช่วยคุณวางแผนและพัฒนาปลั๊กอินเพื่อตอบสนองความต้องการที่กำหนดเอง

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

คุณมีข้อกำหนดที่กำหนดเองและคุณพบว่าไม่มีปลั๊กอินใดใน Joget Workflow หรือปลั๊กอินที่มีอยู่ใน Marketplace สามารถตอบสนองความต้องการของคุณได้ 

ตัวอย่างที่ 1: ดาวน์โหลดแบบฟอร์ม PDF เมื่อคลิกที่ปุ่มในรายการ

ตัวอย่างที่ 2: ระบุมุมมองแผนภูมิ Gantt ของข้อมูลฟอร์มที่คุณรวบรวม

ตัวอย่างที่ 3: ตัวแปร Hash variable สามารถใช้งานได้สะดวก แต่ไม่สามารถตรวจสอบได้

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

อ้างอิงถึง Plugin Types ที่สนับสนุนโดย Joget Workflow ค้นหาประเภทปลั๊กอินที่เหมาะสมที่สุดที่สามารถช่วยให้คุณปฏิบัติตามข้อกำหนดที่กำหนดเองได้

ตัวอย่างที่ 1: พัฒนาปลั๊กอินการกระทำดาต้าลิสต์เพื่อแสดงปุ่มสำหรับสร้างแบบฟอร์ม PDF

ตัวอย่างที่ 2: พัฒนาปลั๊กอินเมนู Userview ที่สามารถใช้เพื่อแสดงข้อมูลฟอร์มเป็นแผนภูมิ Gantt

ตัวอย่างที่ 3: พัฒนาปลั๊กอิน Hash Variable ที่สามารถเขียนสคริปต์ Bean Shell ได้

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

ค้นหาข้อมูลที่ปลั๊กอินของคุณต้องการเพื่อใช้งาน / ทำงาน ดูจากมุมมองของผู้ใช้ คุณจะใช้ปลั๊กอินอย่างไร จากนั้นดูจากมุมมองของนักพัฒนา เพื่อทำให้ปลั๊กอินสามารถใช้ซ้ำได้ในกรณีใช้งานมากขึ้น

คุณสามารถอ้างอิงถึง ตัวเลือกคุณสมบัติปลั๊กอิน ในประเภทของฟิลด์อินพุตที่คุณสามารถให้กับผู้ใช้ปลั๊กอินของคุณ

ตัวอย่างที่ 1: ในการพัฒนาปลั๊กอินการดาวน์โหลดดาต้าลิสต์แอ็คชั่น PDF เราสามารถพิจารณานำเสนอสิ่งต่อไปนี้เป็นอินพุต

    1. รหัสแบบฟอร์ม: แบบฟอร์มที่จะใช้ในการสร้างไฟล์ PDF
    2. ID เรคคอร์ด: ใช้ id ของแถวดาต้าลิสต์หรือค่าคอลัมน์เพื่อโหลดเรคคอร์ด
    3. ชื่อไฟล์: ชื่อไฟล์ของไฟล์ PDF ที่สร้างขึ้น
    4. ตัวเลือกการจัดรูปแบบ: ตัวเลือกในการจัดรูปแบบและปรับแต่งเอาต์พุต PDF 

ตัวอย่างที่ 2: ในการพัฒนาปลั๊กอินเมนู Gantt Chat Userview เราสามารถพิจารณาให้สิ่งต่อไปนี้เป็นอินพุต

    1. เครื่องผูกดาต้าลิสต์: เราสามารถใช้เครื่องผูกดาต้าลิสต์ในปลั๊กอินของเราเพื่อดึงข้อมูลที่ต้องการโดยแผนภูมิแกนต์
    2. การแมป: ฟิลด์เพื่อแมปคอลัมน์ที่จะส่งคืนจากตัวยึดข้อมูลไปยังข้อมูลที่ต้องการโดยแผนภูมิแกนต์
    3. จัดแต่งทรงผม: ตัวเลือกเพื่อจัดสไตล์แผนภูมิแกนต์

ตัวอย่างที่  3 : ปลั๊กอิน Hash Variable ไม่มีส่วนต่อประสานสำหรับผู้ใช้ในการกำหนดค่า แต่เพื่อพัฒนาปลั๊กอิน Bean Shell Hash Variable เราต้องการที่อื่นเพื่อใส่สคริปต์ Bean Shell ของเรา เราสามารถนำตัวแปรสภาพแวดล้อมมาใช้ใหม่เพื่อจัดเก็บสคริปต์ของเรา ดังนั้นไวยากรณ์ Hash Variable จะเป็นคำนำหน้าด้วยคีย์ตัวแปรสภาพแวดล้อม

เช่น # beanshell.EnvironmentVariableKey #

แต่นี่อาจไม่เพียงพอ เราอาจต้องการวิธีอื่นในการส่งผ่านตัวแปรบางตัวเช่นกัน เราสามารถพิจารณาการใช้ไวยากรณ์พารามิเตอร์การสืบค้น URL เพื่อส่งผ่านตัวแปรของเราเพราะง่ายต่อการแยกวิเคราะห์ในภายหลัง

เช่น # beanshell.EnvironmentVariableKey [name=Joget&email=info@joget.org&message= {form.sample.message? url}] #

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

อย่างไรและผู้ใช้ปกติ (ไม่ใช่ผู้ใช้ผู้ดูแลระบบที่ใช้ปลั๊กอินเพื่อให้การทำงาน) จะใช้และดูผลลัพธ์ปลั๊กอินของคุณ

ตัวอย่างที่  1 : เมื่อใช้ PDF Download การกระทำดาต้าลิสต์เป็นการกระทำของแถวดาต้าลิสต์หรือการกระทำคอลัมน์ผู้ใช้ปกติจะเห็นลิงค์เพื่อดาวน์โหลดไฟล์ PDF ในทุก ๆ แถวของดาต้าลิสต์ เมื่อคลิกที่ลิงค์จะมีการแจ้งให้ดาวน์โหลดไฟล์ PDF

เมื่อมีการใช้ปลั๊กอินเป็นการกระทำของดาต้าลิสต์ทั้งหมดไฟล์ซิปที่มีไฟล์ PDF ที่สร้างขึ้นทั้งหมดของทุกแถวที่เลือกจะได้รับแจ้งให้ดาวน์โหลด

ตัวอย่างที่  2 : ผู้ใช้ทั่วไปสามารถเห็นแผนภูมิ Gantt เมื่อมีการคลิกเมนูโดยใช้ปลั๊กอินเมนู Userview เมนู Gantt แผนภูมิ ผู้ใช้สามารถนำทางหรือโต้ตอบกับแผนภูมิแกนต์ 

ตัวอย่างที่  3 : ปลั๊กอิน Bean Shell Hash สำหรับผู้ดูแลระบบ เมื่อมีการใช้งาน Hash Variable จะถูกแทนที่ด้วยเอาต์พุตส่งคืนจากล่าม Bean Shell

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

โปรดอ้างอิงปลั๊กอินและบทช่วยสอนที่มีอยู่เสมอเพื่อค้นหา  ประเภทปลั๊กอิน / ปลั๊กอินที่คล้ายกันที่คุณสามารถอ้างถึงเมื่อใดก็ตามที่เป็นไปได้ ทีม Joget จะพยายามอย่างดีที่สุดเพื่อเพิ่มเนื้อหาในส่วนบทช่วยสอน

คุณอาจต้องตรวจสอบเอกสารของ  Utility & Service Method ,  JSON API ,  Javascript APIและ  คู่มือการเขียนโปรแกรม Bean Shellด้วย เอกสารเหล่านี้อาจมีวิธีการ / ตัวอย่างที่อาจช่วยคุณในการพัฒนา

ตัวอย่างที่  1 : เพื่อพัฒนาปลั๊กอินการดาวน์โหลดดาต้าลิสต์แอ็คชัน PDF เราสามารถนำวิธีการใน FormPdfUtil มาใช้ใหม่ เพื่อสร้างฟอร์มเป็น PDF นอกจากนี้เรายังสามารถอ้างถึงซอร์สโค้ดของปลั๊กอินการกระทำการลบแบบฟอร์มข้อมูลดาต้าลิสต์ได้เช่นกัน นอกเหนือจากนั้นเราสามารถอ้างถึงเครื่องมือส่งออกอีเมลฟอร์ม  ในตัวเลือกคุณสมบัติปลั๊กอินที่เราสามารถให้ในปลั๊กอินเนื่องจากเครื่องมือส่งออกฟอร์มอีเมลใช้วิธีการใน FormPdfUtil เช่นกัน

ตัวอย่างที่  2 : ในการพัฒนาปลั๊กอินเมนู Userview เมนู Gantt เราสามารถอ้างถึงซอร์สโค้ดของปลั๊กอินเมนู Userview ทั้งหมด จากตรงนั้นเราสามารถทำความเข้าใจเกี่ยวกับวิธีสร้างเทมเพลตสำหรับปลั๊กอินโดยใช้  ไวยากรณ์ FreeMakerได้ดีขึ้น 

ตัวอย่างที่ 3: เพื่อพัฒนาปลั๊กอิน Bean Shell Hash Variable เราสามารถอ้างถึง source code ของปลั๊กอิน Hash Variable และปลั๊กอิน Bean Shell ทั้งหมด โดยเฉพาะอย่างยิ่งเราสามารถอ้างถึงปลั๊กอินสภาพแวดล้อมตัวแปรแฮชตัวแปรวิธีการดึงข้อมูลตัวแปรสภาพแวดล้อมโดยใช้คีย์ตัวแปร นอกจากนี้เรายังสามารถอ้างถึง Bean Shell Tool หรือ Bean Shell Form Binder plugin ว่าจะรันสคริปต์ด้วย Bean Shell interpreter ได้อย่างไร

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

a. คุณจะต้องมี Joget Workflow Open Source ให้พร้อมและสร้าง เราจะใช้โมดูล "wflow-plugin-archetype" เพื่อสร้างโครงการ maven สำหรับปลั๊กอินของเรา

b. สร้างโครงการ maven

ไฟล์โครงการที่สร้างจะถูกวางไว้ที่ไดเรกทอรีที่ระบุในพรอมต์คำสั่งเช่น: เรียกใช้คำสั่งใน "C:\" จะวางไฟล์โครงการไว้ภายในไดรฟ์ C

ในการรับ jogetDependencyVersion ที่ถูกต้อง ต้องสร้างไฟล์โปรเจ็กต์ที่เหมาะสมโดยมีการพึ่งพาที่ถูกต้องให้ตรวจสอบชื่อไฟล์ที่ระบุใน ".m2" ภายใต้โฟลเดอร์ เช่น

C:\Users\(your computer name)\.m2\repository\org\joget\wflow-core\"5.0.11"

- Run the following for Window 

"C:\Joget Source Code\wflow-plugin-archetype\create-plugin.bat" packageName pluginFolderName jogetDependencyVersion

- Run the following for Linux or Mac

/joget_src/wflow-plugin-archetype/create-plugin.sh packageName pluginFolderName jogetDependencyVersion

- ภาพตัวอย่างหน้าจอใน Mac:                                                                                                                                        
 

c. เปิด / นำเข้าโครงการ Maven ด้วย IDE ที่คุณชื่นชอบ ทีม Joget แนะนำ NetBeans IDE.  

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

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

อ้างถึงเอกสารประเภทปลั๊กอินที่ระบุไว้ใน Plugin Types. ค้นหา abstract class และ interface ที่ต้องการขยายและดำเนินการโดยปลั๊กอินของคุณ

ตัวอย่าง: เพื่อพัฒนา Userview Menu plugin, the plugin class need to extends the org.joget.apps.userview.model.UserviewMenu abstract class.

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

ปลั๊กอินจะต้องใช้วิธีการแบบ abstract method ของ Plugin Base Abstract Class and Interface และ abstract method ของ individual abstract class และอินเตอร์เฟซสำหรับประเภทปลั๊กอิน

ตัวอย่าง: เพื่อพัฒนา Userview Menu plugin ต้องใช้วิธีการต่อไปนี้โดยปลั๊กอิน โปรดดูเอกสารปลั๊กอินสำหรับรายละเอียดของแต่ละวิธี

  • getCategory
  • getClassName
  • getDecoratedMenu
  • getDescription
  • getIcon
  • getLabel
  • getName
  • getPropertyOptions
  • getRenderPage
  • getVersion
  • isHomePageSupported

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

โฟลเดอร์ปลั๊กอินที่สร้างโดย "wflow-plugin-archetype" โมดูลเป็นโครงการ Maven ดังนั้นเราจะใช้ Dependency Mechanism ให้บริการโดย Maven.

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

ในการทำปลั๊กอิน i18n ให้พร้อมใช้งาน เราจำเป็นต้องสร้างไฟล์คุณสมบัติ bundle ข้อความสำหรับปลั๊กอิน

  • สร้างไฟล์คุณสมบัติโดยใช้ชื่อคลาสปลั๊กอินใน "[Plugin project directory]/src/main/resources/message"

    ตัวอย่าง: สำหรับปลั๊กอินชื่อ "GanttChartMenu" เราต้องสร้างไฟล์ "GanttChartMenu.properties" file under "[Plugin project directory]/src/main/resources/message"

    เนื้อหาตัวอย่างสำหรับไฟล์ GanttChartMenu.properties

    org.joget.sample.GanttChartMenu.pluginLabel=Gantt Chart 
org.joget.sample.GanttChartMenu.pluginDesc=To display form data in Gantt Chart layout 
userview.ganttChart.label.title=Title 
userview.ganttChart.label.week=Week
  • ใช้เมธอด getMessage(String key, String pluginName, String translationPath) ของ PluginManager หรือ AppPluginUtil เพื่อดึง i18n label.

    ตัวอย่าง: ใช้เมธอด getMessage ใน getLabel และเมธอด getDescription เพื่อส่งคืน i18n label และคำอธิบาย

    public String getLabel() { 
    return AppPluginUtil.getMessage("org.joget.sample.GanttChartMenu.pluginLabel", getClassName(), "message/GanttChartMenu"); 
} 
public String getDescription() { 
    return AppPluginUtil.getMessage("org.joget.sample.GanttChartMenu.pluginDesc", getClassName(), "message/GanttChartMenu"); 
}
  • Pass a translation file path to readPluginResource(String pluginName, String resourceUrl, Object[] arguments, boolean removeNewLines, String translationFileName) method of AppUtil to provide the plugin properties option with i18n label.  We can use "@@message.key@@" in the JSON of ตัวเลือกคุณสมบัติปลั๊กอิน.

    ตัวอย่าง: สำหรับตัวเลือกคุณสมบัติของปลั๊กอิน GanttChartMenu ข้อมูลต่อไปนี้แสดงการใช้งานโค้ดตัวอย่างของวิธีการ getPropertyOptions และไฟล์ GanttChartMenu.json

    public String getPropertyOptions() { 
    return AppUtil.readPluginResource(getClassName(), "/properties/GanttChartMenu.json", null, true, "message/GanttChartMenu"); 
}
    [{ 
    title : '@@userview.ganttChart.edit@@', 
    properties : [{ 
        name : 'id', 
        label : 'Id', 
        type : 'hidden' 
    }, 
    { 
        name : 'customId', 
        label : '@@userview.ganttChart.customId@@', 
        type : 'textfield', 
        regex_validation : '^[a-zA-Z0-9_]+$', 
        validation_message : '@@userview.ganttChart.invalidId@@' 
    }, 
    { 
        name : 'label', 
        label : '@@userview.ganttChart.label@@', 
        type : 'textfield', 
        required : 'True', 
        value : '@@userview.ganttChart.label.value@@' 
    }] 
}]
  • Pass a translation file path to getPluginFreeMarkerTemplate(Map data, final String pluginName, final String templatePath, String translationPath) method of PluginManager whenever retrieving a HTML template. Once we passed a translation file path, we can use "@@message.key@@" in the freemarker template to retrieve i18n label.

    ตัวอย่าง: สำหรับเมธอด getRenderPage ของปลั๊กอิน GanttChartMenu ต่อไปนี้จะแสดงการใช้งานโค้ดตัวอย่างของเมธอด getRenderPage และเท็มเพลต "GanttChartMenu.ftl" FreeMarker

        public String getRenderPage() { 
        Map model = new HashMap(); 
        model.put("request", getRequestParameters()); 
        model.put("element", this); 
         
        PluginManager pluginManager = (PluginManager)AppUtil.getApplicationContext().getBean("pluginManager"); 
        String content = pluginManager.getPluginFreeMarkerTemplate(model, getClasstName(), "/templates/GanttChartMenu.ftl", "message/GanttChartMenu"); 
        return content; 
    }
    <div> 
    <h1>@@userview.ganttChart.label.title@@ : ${element.properties.title!}</h1> 
</div>
  • Postfix the plugin class name with an underscore and language code to create a message resource bundle property file for other language. 

ตัวอย่าง: GanttChartMenu_zh_CN.properties

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

คุณจะพบว่าคลาสที่ชื่อว่า "Activator.java" นั้นสร้างขึ้นโดยอัตโนมัติในแพ็คเกจของโปรเจ็กต์ maven ของคุณ คลาสนี้ใช้เพื่อลงทะเบียนคลาสปลั๊กอินของคุณกับ Felix Framework. คุณไม่จำเป็นต้องทำเช่นนี้หากปลั๊กอินของคุณไม่ใช่ OSGI Plugin.

ในวิธีเริ่มต้นของคลาส activator ให้เพิ่มคลาสปลั๊กอินของคุณลงในตัวแปร "registerList"

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

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

เมื่อคุณทำตามขั้นตอนทั้งหมดข้างต้นแล้วคุณสามารถสร้างโครงการของคุณด้วย IDE โดยใช้ Maven คุณยังสามารถเรียกใช้คำสั่ง "mvn clean install" ในไดเรกทอรีโครงการของคุณเพื่อสร้าง หลังจากสร้างโครงการของคุณไฟล์ jar จะถูกสร้างขึ้นภายใต้โฟลเดอร์ "target" ในโฟลเดอร์โครงการปลั๊กอินของคุณ อัปโหลดปลั๊กอินไปที่ Manage Plugins เพื่อทดสอบปลั๊กอินของคุณ

ตัวอย่าง: ใน NetBeans, คลิ๊กขวาที่โปรเจคเนมและเลือก "Clean and Build".

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

คุณทำปลั๊กอินที่มีประโยชน์มากเสร็จสมบูรณ์แล้ว อย่าเพียงเก็บไว้เป็นของตัวเองแบ่งปันหรือขายปลั๊กอินของคุณใน Joget Marketplace หรือดีกว่านั้นคุณสามารถเขียนบทช่วยสอนในฐานความรู้ของเราเพื่อแบ่งปันความพยายามของคุณกับผู้อื่น หากต้องการแชร์หรือขายปลั๊กอินของคุณโปรดส่งอีเมลไปที่ info@joget.org

 

 

 

  • No labels