Versions Compared

Key

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

Table of Contents


English
In this tutorial, we will be following the guideline for developing a plugin to develop a Userview Theme plugin.

1. What is the problem?

Thai

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

...

We can refer to the documentation of Userview Theme Plugin and look at its Overridable Methods.

6. Prepare your development environment

...

We need to always have our Joget Workflow Source Code ready and built by following this guideline

The following tutorial is prepared with a Macbook Pro and Joget Source Code version 7.0-SNAPSHOT. Please refer to the Guideline for developing Developing a pluginPlugin article for other platform commands. 

...

Thai

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

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

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

Code Block
- Home
  - joget
    - plugins
    - jw-community
      -7.0-SNAPSHOT

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 is stored.

...

Code Block
languagebash
cd joget/plugins/
~/joget/jw-community/7.0-SNAPSHOT/wflow-plugin-archetype/create-plugin.sh org.joget.tutorial eva-theme 78.0-SNAPSHOT

Then, the shell script will ask us to key in a version number for the plugin and request for confirmation before generating the maven project.

...

Code Block
languagebash
Define value for property 'version':  1.0-SNAPSHOT: : 78.0.0
[INFO] Using property: package = org.joget.tutorial
Confirm properties configuration:
groupId: org.joget.tutorial
artifactId: eva-theme
version: 7.0.0
package: org.joget.tutorial
Y: : y

We should get "BUILD SUCCESS" message shown in our terminal and a "jdbc_options_binder" folder created in the "plugins" folder.

Open the maven project with your favorite favourite IDE. I will be using using NetBeans.  

Thai

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

...

In this case, we are extending UniversalTheme rather than UserviewV5Theme so that we can customize our theme on the top of it.

b. Implement all the abstract methods

...

Then, we have to create a UI for admin user to provide inputs for our plugin. In getPropertyOptions method, we have already specified that our Plugin Properties Options definition file is located at "/properties/EvaTheme.json". Let us create a directory "resources/properties" under "eva-theme/src/main" directory. After creating the directory, create a file named "EvaTheme.json" in the "properties" folder.

...

Thai

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

...

Then, let us upload the plugin jar to Manage Plugins. After uploading the jar file, double check that the plugin is uploaded and activated correctly.

Image Added

Thai

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


Configure any of your app's userview to point to the newly built theme.

Image RemovedImage Added

Image RemovedImage Added

8. Take a step further, share it or sell it

...

Thai

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