Versions Compared

Key

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

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 คงที่


Image Modified

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 ตามด้านล่าง ไดเรกทอรีโครงการของคุณควรดูเหมือนภาพด้านล่างนี้


Image RemovedImage Added

Code Block
languagexml
<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) readye. Register your plugin to Felix Framework และ f. Build it and testing จากนั้นทำต่อไปด้านล่างหลังจากทดสอบ คุณจะได้รับสิ่งที่คล้ายกับด้านล่างในมุมมองของเรา


Image Modified

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 ตรวจสอบอีกครั้งว่าปลั๊กอินถูกอัปโหลดและเปิดใช้งานอย่างถูกต้อง


Image Modified

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 ของคุณ


Image RemovedImage Added

Edit the properties of the Gantt Chart Menu.

Thai

แก้ไขคุณสมบัติของเมนูแผนภูมิแกนต์


Image Modified

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" สำหรับการทดสอบ กรอกข้อมูลการแมปทั้งหมดให้สอดคล้องกับฟิลด์รหัส / หมายเลขคอลัมน์


Image Modified

Configure binder.

Thai

กำหนดค่า binder


Image Modified

Advanced setting to configure the gantt chart.

Thai

การตั้งค่าขั้นสูงเพื่อกำหนดค่าแผนภูมิแกนต์


Image Modified

Writing some css styling in "Custom Footer (HTML)" option to give different colors for different status.

Thai

การเขียนสไตล์ CSS ในตัวเลือก "Custom Footer (HTML)" เพื่อให้สีแตกต่างกันสำหรับสถานะที่แตกต่างกัน


Image Modified

Populate some data to the form for testing.

Thai

เติมข้อมูลลงในแบบฟอร์มสำหรับการทดสอบ


Image Modified

The end result.

...