Versions Compared

Old Version 7

changes.mady.by.user Nitchakan Maneelam

Saved on

compared with

New Version Current

changes.mady.by.user Nitchakan Maneelam

Saved on

Key

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

...

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

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

ตัวอย่างที่ 3: To develop Bean  เพื่อพัฒนาปลั๊กอิน Bean Shell Hash Variable plugin, we can refer to the เราสามารถอ้างถึง source code of all the  ของปลั๊กอิน Hash Variable plugin and Bean Shell plugin. Especially, we can refer to Environment Variable Hash Variable plugin on how to retrieve environment variable using a variable key. We can also refer to และปลั๊กอิน Bean Shell ทั้งหมด โดยเฉพาะอย่างยิ่งเราสามารถอ้างถึงปลั๊กอินสภาพแวดล้อมตัวแปรแฮชตัวแปรวิธีการดึงข้อมูลตัวแปรสภาพแวดล้อมโดยใช้คีย์ตัวแปร นอกจากนี้เรายังสามารถอ้างถึง Bean Shell Tool or หรือ Bean Shell Form Binder plugin on what to execute the script with Bean Shell interpreter.ว่าจะรันสคริปต์ด้วย Bean Shell interpreter ได้อย่างไร

6.

...

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

a. You will need to have the  คุณจะต้องมี Joget Workflow Open Source ready and built. We will use the  ให้พร้อมและสร้าง เราจะใช้โมดูล "wflow-plugin-archetype" module to generate a maven project for our plugin.เพื่อสร้างโครงการ maven สำหรับปลั๊กอินของเรา

b. Generate a  สร้างโครงการ maven project.

ไฟล์โครงการที่สร้างจะถูกวางไว้ที่ไดเรกทอรีที่ระบุในพรอมต์คำสั่งเช่น: เรียกใช้คำสั่งใน The project file generated will be placed at the directory specified in the command prompt, eg: running the command in "C:\" will place the project file in the root of C drive. จะวางไฟล์โครงการไว้ภายในไดรฟ์ C

ในการรับ jogetDependencyVersion ที่ถูกต้อง ต้องสร้างไฟล์โปรเจ็กต์ที่เหมาะสมโดยมีการพึ่งพาที่ถูกต้องให้ตรวจสอบชื่อไฟล์ที่ระบุใน To get the correct jogetDependencyVersion in order to build a proper project file with correct dependencies, check the file name specified in the ".m2" folder under directory of, eg:ภายใต้โฟลเดอร์ เช่น

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

...

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

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

c. Open/Import the maven project with your favorite IDE. Joget team recommends  เปิด / นำเข้าโครงการ Maven ด้วย IDE ที่คุณชื่นชอบ ทีม Joget แนะนำ NetBeans IDE.  

7.

...

เริ่มโค้ด!

a.

...

 การขยาย abstract class

...

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

อ้างถึงเอกสารประเภทปลั๊กอินที่ระบุไว้ใน Refer to the document of the plugin type listed in Plugin Types.  Find the ค้นหา abstract class and interface that need to be extended and implemented by your plugin.และ interface ที่ต้องการขยายและดำเนินการโดยปลั๊กอินของคุณ

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

b.

...

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

...

ทั้งหมด

ปลั๊กอินจะต้องใช้วิธีการแบบ A plugin will have to implements the abstract method of ของ Plugin Base Abstract Class and Interface and also the abstract method of the และ abstract method ของ individual abstract class and interface for the plugin type. และอินเตอร์เฟซสำหรับประเภทปลั๊กอิน

ตัวอย่าง: เพื่อพัฒนา Userview Menu plugin ต้องใช้วิธีการต่อไปนี้โดยปลั๊กอิน โปรดดูเอกสารปลั๊กอินสำหรับรายละเอียดของแต่ละวิธีExample: To develop a Userview Menu plugin, the following methods have to be implemented by the plugin. Please refer to the plugin documents for the details of each methods.

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

c.

...

จัดการ dependency libraries

...

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

โฟลเดอร์ปลั๊กอินที่สร้างโดย The generated plugin folder by "wflow-plugin-archetype" module is a maven project. So, we will using the Dependency Mechanism provided by  โมดูลเป็นโครงการ Maven ดังนั้นเราจะใช้ Dependency Mechanism ให้บริการโดย Maven.

d.

...

เตรียมปลั๊กอิน internationalization (i18n)

...

ให้พร้อม

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

  • สร้างไฟล์คุณสมบัติโดยใช้ชื่อคลาสปลั๊กอินใน 

To make the plugin i18n ready, we need to create a message resource bundle property file for the plugin.

  • Create a property file with the plugin class name in "[Plugin project directory]/src/main/resources/message" directory. 

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

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

    Code Block
    languagejava
    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
  • Use ใช้เมธอด getMessage(String key, String pluginName, String translationPath) of ของ PluginManager or  หรือ AppPluginUtil to retrieve  เพื่อดึง i18n label.

    Exampleตัวอย่าง: Use the  ใช้เมธอด getMessage method in ใน getLabel and และเมธอด getDescription methods to return เพื่อส่งคืน i18n label and description.และคำอธิบาย

    Code Block
    languagejava
    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 ตัวเลือกคุณสมบัติปลั๊กอิน.

    Example: For property options of a GanttChartMenu plugin, the following shows the sample code implementation of getPropertyOptions method and the ตัวอย่าง: สำหรับตัวเลือกคุณสมบัติของปลั๊กอิน GanttChartMenu ข้อมูลต่อไปนี้แสดงการใช้งานโค้ดตัวอย่างของวิธีการ getPropertyOptions และไฟล์ GanttChartMenu.json file

    Code Block
    languagejava
    public String getPropertyOptions() { 
    return AppUtil.readPluginResource(getClassName(), "/properties/GanttChartMenu.json", null, true, "message/GanttChartMenu"); 
}
    Code Block
    languagejs
    [{ 
    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.

    Example: For getRenderPage method of a GanttChartMenu plugin, the following show the sample code implementation of getRenderPage method and the ตัวอย่าง: สำหรับเมธอด getRenderPage ของปลั๊กอิน GanttChartMenu ต่อไปนี้จะแสดงการใช้งานโค้ดตัวอย่างของเมธอด getRenderPage และเท็มเพลต "GanttChartMenu.ftl" FreeMarker template. 

    Code Block
    languagejava
        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; 
    }
    Code Block
    languagexml
    <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. 

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

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

You will find that a class named คุณจะพบว่าคลาสที่ชื่อว่า "Activator.java" is auto generated in a package of your plugin maven project. The class is used to register your plugin class to the Felix Framework. You do not need to do this if your plugin is not an นั้นสร้างขึ้นโดยอัตโนมัติในแพ็คเกจของโปรเจ็กต์ maven ของคุณ คลาสนี้ใช้เพื่อลงทะเบียนคลาสปลั๊กอินของคุณกับ Felix Framework. คุณไม่จำเป็นต้องทำเช่นนี้หากปลั๊กอินของคุณไม่ใช่ OSGI Plugin.

In the start method of the activator class, add your plugin class to the "registrationList" variable.ในวิธีเริ่มต้นของคลาส activator ให้เพิ่มคลาสปลั๊กอินของคุณลงในตัวแปร "registerList"

Code Block
languagejava
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 คุณยังสามารถเรียกใช้คำสั่ง Once you are done with all the steps above, you can build your project with your IDE using Maven. You can also run "mvn clean install" command in your project directory to build it. After building your project, a jar file is created under "target" folder in your plugin project folder. Upload the plugin jar to Manage Plugins to test your plugin.ในไดเรกทอรีโครงการของคุณเพื่อสร้าง หลังจากสร้างโครงการของคุณไฟล์ jar จะถูกสร้างขึ้นภายใต้โฟลเดอร์ "target" ในโฟลเดอร์โครงการปลั๊กอินของคุณ อัปโหลดปลั๊กอินไปที่ Manage Plugins เพื่อทดสอบปลั๊กอินของคุณ

ตัวอย่าง: ใน NetBeans, คลิ๊กขวาที่โปรเจคเนมและเลือก Example: In NetBeans, right-click on the project name, then select  "Clean and Build".

8.

...

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

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

You have completed a very useful plugin. Don't just keep it to yourself, share or sell your plugin in the Joget Marketplace or even better, you can write a tutorial in our Knowledge Base to share your effort with others. To share or sell your plugin, please send an email to info@joget.org.