| Table of Contents |
|---|
| English |
|---|
| In this tutorial, we will following the guideline of developing a plugin to develop our Gantt Chart Userview Menu plugin. Please also refer to the very first tutorial How to develop a Bean Shell Hash Variable for more details steps. |
| Thai |
|---|
ในบทช่วยสอนนี้เราจะทำตามคำแนะนำ guideline of developing a plugin เพื่อพัฒนาปลั๊กอินเมนู Userview เมนู Gantt Chart โปรดอ้างอิงถึง How to develop a Bean Shell Hash Variable สำหรับขั้นตอนรายละเอียดเพิ่มเติม |
...
| Thai |
|---|
ด้วยการอ้างอิงถึง library demo เราสามารถออกหน้า HTML แบบคงที่ได้อย่างรวดเร็วเช่นภาพด้านล่าง เนื่องจากนี่คือการสอนปลั๊กอิน Joget เราจะไม่เข้าไปดูรายละเอียดเกี่ยวกับการเขียนโค้ดหน้า HTML แบบคงที่ คุณสามารถอ้างถึง static.zip เราคาดว่าหน้า userview ของเราสามารถแสดงข้อมูลที่รวบรวมได้เป็นหน้า HTML คงที่ |
5. Is there any resources/API that can be reuse?
...
The following of this tutorial is prepared with a Macbook Pro and Joget Source Code version 5.0.0. Please refer to Guideline for developing Developing a pluginPlugin for other platform command.
...
| Thai |
|---|
เราจำเป็นต้องให้ซอร์สโค้ด Joget Workflow ของเราพร้อมและสร้างโดยปฏิบัติตาม this guideline บทช่วยสอนต่อไปนี้จัดทำขึ้นด้วย Macbook Pro และ Joget Source Code เวอร์ชั่น 5.0.0 โปรดอ้างอิง Guideline for developing Developing a pluginPlugin สำหรับคำสั่งแพลตฟอร์มอื่น ๆ ให้กล่าวว่าไดเรกทอรีโฟลเดอร์ของเราดังต่อไปนี้ |
...
Then, let us create a template file locate at "/templates/ganttChart.ftl". Let us create us create a directory "resources/templates" under "gantt_chart_menu/src/main" directory. After create the directory, create a file named "ganttChartMenuganttChart.jsonftl" in the "templates" folder.
...
| Thai |
|---|
ใส่ HTML แบบคงที่ที่เราสร้างไว้ก่อนหน้านี้ลงในไฟล์เทมเพลตดังต่อไปนี้ อย่าลืมใส่ javascript library และ images ทั้งหมดไว้ใน "gantt_chart_menu / src / main / resources / resources" และเปลี่ยน URL ตามด้านล่าง ไดเรกทอรีโครงการของคุณควรดูเหมือนภาพด้านล่างนี้ |
| Code Block | ||
|---|---|---|
| ||
<link href="${request.contextPath}/plugin/org.joget.tutorial.GanttChartMenu/lib/jquery/gantt/css/style.css" rel="stylesheet" type="text/css" />
<script src="${request.contextPath}/plugin/org.joget.tutorial.GanttChartMenu/lib/jquery/gantt/js/jquery.fn.gantt.min.js"></script>
<div class="gantt_chart_menu_body">
<h3>Plugin Development</h3>
<div class="gantt"></div>
<script>
$(function() {
"use strict";
$(".gantt").gantt({
source: [{
name: "Sprint 0",
desc: "Analysis",
values: [{
from: "/Date(1320192000000)/",
to: "/Date(1322401600000)/",
label: "Requirement Gathering",
customClass: "ganttRed"
}]
},{
name: " ",
desc: "Scoping",
values: [{
from: "/Date(1322611200000)/",
to: "/Date(1323302400000)/",
label: "Scoping",
customClass: "ganttRed"
}]
},{
name: "Sprint 1",
desc: "Development",
values: [{
from: "/Date(1323802400000)/",
to: "/Date(1325685200000)/",
label: "Development",
customClass: "ganttGreen"
}]
},{
name: " ",
desc: "Showcasing",
values: [{
from: "/Date(1325685200000)/",
to: "/Date(1325695200000)/",
label: "Showcasing",
customClass: "ganttBlue"
}]
},{
name: "Sprint 2",
desc: "Development",
values: [{
from: "/Date(1326785200000)/",
to: "/Date(1325785200000)/",
label: "Development",
customClass: "ganttGreen"
}]
},{
name: " ",
desc: "Showcasing",
values: [{
from: "/Date(1328785200000)/",
to: "/Date(1328905200000)/",
label: "Showcasing",
customClass: "ganttBlue"
}]
},{
name: "Release Stage",
desc: "Training",
values: [{
from: "/Date(1330011200000)/",
to: "/Date(1336611200000)/",
label: "Training",
customClass: "ganttOrange"
}]
},{
name: " ",
desc: "Deployment",
values: [{
from: "/Date(1336611200000)/",
to: "/Date(1338711200000)/",
label: "Deployment",
customClass: "ganttOrange"
}]
},{
name: " ",
desc: "Warranty Period",
values: [{
from: "/Date(1336611200000)/",
to: "/Date(1349711200000)/",
label: "Warranty Period",
customClass: "ganttOrange"
}]
}],
navigate: "scroll",
maxScale: "hours",
itemsPerPage: 10
});
});
</script>
</div> |
...
| Thai |
|---|
ตอนนี้เพื่อการทดสอบเราสามารถข้ามไปที่ c. Manage the dependency libraries of your plugin, d. Make your plugin internationalization (i18n) ready, e. Register your plugin to Felix Framework และ f. Build it and testing จากนั้นทำต่อไปด้านล่างหลังจากทดสอบ คุณจะได้รับสิ่งที่คล้ายกับด้านล่างในมุมมองของเรา |
After verify the static HTML is working in our plugin, we can further enhance it by adding data to the view. Now, modify your getRenderPage method and ganttChart.ftl template as below.
...
| Thai |
|---|
จากนั้นให้อัปโหลด jar ปลั๊กอินไปที่ Manage Plugins หลังจากอัปโหลดไฟล์ jar ตรวจสอบอีกครั้งว่าปลั๊กอินถูกอัปโหลดและเปิดใช้งานอย่างถูกต้อง |
Open a userview, you will see the new plugin is added under "Marketplace". Drag it to one of your Userview Category.
| Thai |
|---|
เปิด userview คุณจะเห็นปลั๊กอินใหม่ถูกเพิ่มภายใต้ "Marketplace" ลากไปยังหมวดหมู่ Userview ของคุณ |
Edit the properties of the Gantt Chart Menu.
| Thai |
|---|
แก้ไขคุณสมบัติของเมนูแผนภูมิแกนต์ |
I selected "Form Data Binder" as "Data Binder" for testing. Fill all the mappings to corresponding Field Id/Column Id.
| Thai |
|---|
ฉันเลือก "Form Data Binder" เป็น "Data Binder" สำหรับการทดสอบ กรอกข้อมูลการแมปทั้งหมดให้สอดคล้องกับฟิลด์รหัส / หมายเลขคอลัมน์ |
Configure binder.
| Thai |
|---|
กำหนดค่า binder |
Advanced setting to configure the gantt chart.
| Thai |
|---|
การตั้งค่าขั้นสูงเพื่อกำหนดค่าแผนภูมิแกนต์ |
Writing some css styling in "Custom Footer (HTML)" option to give different colors for different status.
| Thai |
|---|
การเขียนสไตล์ CSS ในตัวเลือก "Custom Footer (HTML)" เพื่อให้สีแตกต่างกันสำหรับสถานะที่แตกต่างกัน |
Populate some data to the form for testing.
| Thai |
|---|
เติมข้อมูลลงในแบบฟอร์มสำหรับการทดสอบ |
The end result.
...