Page History

ในตัวเลือกคุณสมบัติปลั๊กอินคุณอาจสังเกตเห็นว่าเรากำลังใช้ "[default_userviewId]" ในคุณสมบัติ "userviewId" เราจะใช้ "[formName]" และ "[formId]" ในคุณสมบัติบางอย่างเช่นกัน ดังนั้นเราจะต้องแก้ไขเมธอด getPropertyOptions เพื่อรองรับค่านี้

    public String getPropertyOptions() {
        String options = AppUtil.readPluginResource(getClassName(), "/properties/formSubmissionStatisticsGenerator.json", null, true, MESSAGE_PATH);
        
        //populate value like [formName] and [formId]
        options = GeneratorUtil.populateFormMeta(options, getFormId(), getAppDefinition());
        
        //populate value of [default_userviewId]
        options = options.replace("[default_userviewId]", GeneratorUtil.getFirstAvailableUserviewId(getAppDefinition()));
        
        return options;
    }

เมื่อเราทำตัวเลือกคุณสมบัติเพื่อรวบรวมอินพุตเราสามารถทำงานกับวิธีหลักของปลั๊กอินซึ่งเป็นวิธีการจัดรูปแบบ

    @Override
    public GeneratorResult generate() {
        GeneratorResult result = new GeneratorResult();
        AppDefinition appDef = getAppDefinition();
 
        try {
            //get userview
            UserviewDefinitionDao userviewDefinitionDao = (UserviewDefinitionDao) AppUtil.getApplicationContext().getBean("userviewDefinitionDao");
            UserviewDefinition userviewDef = null;
            String json = null;
            String userviewId = getPropertyString("userviewId");
            String userviewName;
            String userviewDesc;
            if (userviewId != null && !userviewId.isEmpty()) {         
                userviewDef = userviewDefinitionDao.loadById(userviewId, appDef);
            }
            if (userviewDef != null) {
                userviewName = userviewDef.getName();
                userviewDesc = userviewDef.getDescription();
                json = userviewDef.getJson();
            } else {
                userviewId = getPropertyString("userviewNewId");
                int count = 0;
                while (isExist(userviewId, userviewDefinitionDao)) {
                    count++;
                    userviewId = userviewId + count;
                }
                userviewName = getPropertyString("userviewName");
                userviewDesc = getPropertyString("userviewDesc");
            }
            if (json == null || json.isEmpty()) {
                //create a new userview json
                json = GeneratorUtil.createNewUserviewJson(userviewId, userviewName, userviewDesc);
            }
            
            //add the category json to userview json
            json = GeneratorUtil.addCategoryJsonToUserviewJson(getCategoryJson(appDef), json);
            
            //Store the userview json
            if (userviewDef != null) { 
                userviewDef.setJson(json);
                userviewDefinitionDao.update(userviewDef);
            }else {
                userviewDef = new UserviewDefinition();
                userviewDef.setJson(json);
                userviewDef.setId(userviewId);
                userviewDef.setName(userviewName);
                userviewDef.setAppDefinition(appDef);
                userviewDefinitionDao.add(userviewDef);
                
                //Set current published version
                final AppDefinition currentAppDef = appDef;
                TransactionTemplate transactionTemplate = (TransactionTemplate)AppUtil.getApplicationContext().getBean("transactionTemplate");
                transactionTemplate.execute(new TransactionCallback<Object>() {
                    public Object doInTransaction(TransactionStatus ts) {
                        AppService appService = (AppService)AppUtil.getApplicationContext().getBean("appService");
                        appService.publishApp(currentAppDef.getId(), currentAppDef.getVersion().toString());
                        return null;
                    }
                });
            }
            
            //show message to continue edit
            String editLink = WorkflowUtil.getHttpServletRequest().getContextPath() + "/web/console/app/"+appDef.getAppId()+"/"+appDef.getVersion()+"/userview/builder/"+userviewId;
            String msg = AppPluginUtil.getMessage("generator.formSubmissionStatistics.msg.success", getClassName(), MESSAGE_PATH);
            msg = msg.replace("[url]", editLink);
            
            result.setMessage(msg);
        } catch (Exception e) {
            result.setError(true);
            result.setMessage(AppPluginUtil.getMessage("generator.formSubmissionStatistics.msg.error", getClassName(), MESSAGE_PATH));
            LogUtil.error(getClassName(), e, "Not able to generate the menus");
        }
        
        return result;
    }
    
    /**
     * Retrieves the category JSON definition 
     * @param appDef
     * @return 
     */
    protected String getCategoryJson(AppDefinition appDef) {
        Collection<String> args = new ArrayList<String>();
        
        AppService appService = (AppService)AppUtil.getApplicationContext().getBean("appService");
        String tabelName = appService.getFormTableName(appDef, getFormId());
        
        args.add(UuidGenerator.getInstance().getUuid()); //category id
        args.add(StringUtil.escapeString(getPropertyString("categoryLabel"), StringUtil.TYPE_JSON, null)); //category label
        args.add(UuidGenerator.getInstance().getUuid()); //monthly menu uuid
        args.add(StringUtil.escapeString(getPropertyString("monthlyMenuId"), StringUtil.TYPE_JSON, null)); //monthly menu custom id
        args.add(StringUtil.escapeString(getPropertyString("monthlyMenuLabel"), StringUtil.TYPE_JSON, null)); //monthly menu label
        args.add(StringUtil.escapeString(getPropertyString("monthlyChartTitle"), StringUtil.TYPE_JSON, null)); //monthly chart title
        args.add(StringUtil.escapeString(getPropertyString("monthlyXAxisLabel"), StringUtil.TYPE_JSON, null)); //monthly x-axis label
        args.add(StringUtil.escapeString(getPropertyString("yAxisLabel"), StringUtil.TYPE_JSON, null)); //monthly y-axis label
        args.add(StringUtil.escapeString(tabelName, StringUtil.TYPE_JSON, null)); //monthly form table name
        args.add(StringUtil.escapeString(getPropertyString("yearLabel"), StringUtil.TYPE_JSON, null)); //monthly year label
        args.add(StringUtil.escapeString(getPropertyString("showLabel"), StringUtil.TYPE_JSON, null)); //monthly show button label
        args.add(UuidGenerator.getInstance().getUuid()); //daily menu uuid
        args.add(StringUtil.escapeString(getPropertyString("dailyMenuId"), StringUtil.TYPE_JSON, null)); //daily menu custom id
        args.add(StringUtil.escapeString(getPropertyString("dailyMenuLabel"), StringUtil.TYPE_JSON, null)); //daily menu label
        args.add(StringUtil.escapeString(getPropertyString("dailyChartTitle"), StringUtil.TYPE_JSON, null)); //daily chart title
        args.add(StringUtil.escapeString(getPropertyString("dailyXAxisLabel"), StringUtil.TYPE_JSON, null)); //daily x-axis label
        args.add(StringUtil.escapeString(getPropertyString("yAxisLabel"), StringUtil.TYPE_JSON, null)); //daily y-axis label
        args.add(StringUtil.escapeString(tabelName, StringUtil.TYPE_JSON, null)); //daily form table name
        args.add(StringUtil.escapeString(getPropertyString("yearLabel"), StringUtil.TYPE_JSON, null)); //daily year label
        args.add(StringUtil.escapeString(getPropertyString("monthLabel"), StringUtil.TYPE_JSON, null)); //daily month label
        args.add(StringUtil.escapeString(getPropertyString("showLabel"), StringUtil.TYPE_JSON, null)); //daily show button label
        
        String json = AppUtil.readPluginResource(getClass().getName(), "/resources/category.json", args.toArray(), true, null);
        
        return json;
    }
    
    /**
     * Checks for a userview is already exist
     * @param id
     * @param userviewDefinitionDao
     * @return 
     */
    protected boolean isExist(String id, UserviewDefinitionDao userviewDefinitionDao) {
        Long count = userviewDefinitionDao.count("AND id = ?", new String[]{id}, getAppDefinition());
        return count > 0;
    }

ในเมธอด getCategoryJson เราจะดึงข้อมูลไฟล์ "/resources/category.json" หมวดหมู่คำนิยาม JSON ให้เราสร้างไดเรกทอรี "resources / resources" ภายใต้ไดเรกทอรี "form_submission_statistics_generator / src / main" หลังจากสร้างไดเรกทอรีให้สร้างไฟล์ชื่อ "category.json" ในโฟลเดอร์ "resources" จากนั้นคัดลอกคำนิยามหมวดหมู่ JSON ที่เราสร้างไว้ก่อนหน้านี้และวางไว้ในไฟล์นี้ เราจะต้องแทนที่ค่าฮาร์ดโค้ดบางส่วนเป็นตัวแปรและอย่าลืมหลีกเลี่ยง "%" เป็น "%%" ที่มีอยู่เหล่านั้นเป็น AppUtil.readPluginResource โดยใช้ String.format เพื่อเอาค่าลงในไฟล์

{
    "className": "org.joget.apps.userview.model.UserviewCategory",
    "properties": {
        "id": "category-%s",
        "label": "%s"
    },
    "menus": [{
        "className": "org.joget.plugin.enterprise.SqlChartMenu",
        "properties": {
            "id": "%s",
            "customId": "%s",
            "label": "%s",
            "chartType": "bar",
            "title": "%s",
            "categoryAxisLabel": "%s",
            "xAxisDisplayAS": "",
            "valueAxisLabel": "%s",
            "yaxisPrefix": "",
            "showLegend": "",
            "showValueLabel": "true",
            "stack": "",
            "horizontal": "",
            "chartWidth": "100%%",
            "chartHeight": "80%%",
            "colors": "",
            "query": "SELECT DATE_FORMAT(STR_TO_DATE(m.monthYear, '%%c-%%Y'),'%%b %%y') as monthYear, COUNT(fd.dateCreated) AS 'Number'\nFROM \n(\n    SELECT my.month, CONCAT(my.month, '-', IF(('#requestParam.year?sql#' REGEXP '^[0-9]{4}$'), '#requestParam.year?sql#' , '#date.yyyy?sql#')) AS monthYear FROM (\n        SELECT 1 AS month UNION SELECT 2 UNION SELECT 3 UNION SELECT 4 UNION SELECT 5 UNION SELECT 6 UNION SELECT 7 UNION SELECT 8 UNION SELECT 9 UNION SELECT 10 UNION SELECT 11 UNION SELECT 12\n    ) my\n) m\nLEFT JOIN \n(\n\t  select dateCreated FROM app_fd_%s\n) fd\nON m.monthYear=DATE_FORMAT(fd.dateCreated,'%%c-%%Y')\nGROUP BY monthYear\nORDER BY m.month",
            "customHeader": "<div class=\"filter\">\n    <form action=\"?\" method=\"GET\">\n        <label>%s: <\/label><input name=\"year\" value=\"#requestParam.year?html#\"\/>\n        <input type=\"submit\" value=\"%s\"\/>\n    <\/form>\n<\/div>\n<script>\n    $(function(){\n        if ($(\"[name='year']\").val() === \"\") {\n            $(\"[name='year']\").val(\"#date.yyyy#\");\n        }\n    });\n<\/script>\n<br\/>\n<br\/>",
            "customFooter": "",
            "datasource": "default",
            "keyName": ""
        }
    }, {
        "className": "org.joget.plugin.enterprise.SqlChartMenu",
        "properties": {
            "id": "%s",
            "customId": "%s",
            "label": "%s",
            "chartType": "bar",
            "title": "%s",
            "categoryAxisLabel": "%s",
            "xAxisDisplayAS": "",
            "valueAxisLabel": "%s",
            "yaxisPrefix": "",
            "showLegend": "",
            "showValueLabel": "true",
            "stack": "",
            "horizontal": "true",
            "chartWidth": "100%%",
            "chartHeight": "80%%",
            "colors": "",
            "query": "SELECT d.date_field, COUNT(fd.dateCreated) AS 'Number'\nFROM\n(\n    SELECT\n        MAKEDATE(IF(('#requestParam.year?sql#' REGEXP '^[0-9]{4}$'), '#requestParam.year?sql#' , '#date.yyyy?sql#'),1) +\n        INTERVAL (IF(('#requestParam.month?sql#' REGEXP '^[0-9]{2}$'), '#requestParam.month?sql#' , '#date.MM?sql#') -1) MONTH +\n        INTERVAL daynum DAY date_field\n    FROM\n    (\n        SELECT t*10+u daynum\n        FROM\n            (SELECT 0 t UNION SELECT 1 UNION SELECT 2 UNION SELECT 3) A,\n            (SELECT 0 u UNION SELECT 1 UNION SELECT 2 UNION SELECT 3\n            UNION SELECT 4 UNION SELECT 5 UNION SELECT 6 UNION SELECT 7\n            UNION SELECT 8 UNION SELECT 9) B\n        ORDER BY daynum\n    ) AA\n) d\nLEFT JOIN \n(\n\t  select dateCreated FROM app_fd_%s\n) fd\nON d.date_field=DATE_FORMAT(fd.dateCreated,'%%Y-%%m-%%d')\nWHERE DATE_FORMAT(d.date_field,'%%m') = IF(('#requestParam.month?sql#' REGEXP '^[0-9]{2}$'), '#requestParam.month?sql#' , '#date.MM?sql#')\nGROUP BY d.date_field\nORDER BY d.date_field desc",
            "customHeader": "<div class=\"filter\">\n    <form action=\"?\" method=\"GET\">\n        <label>%s: <\/label><input name=\"year\" value=\"#requestParam.year?html#\"\/>&nbsp;&nbsp;&nbsp;\n        <label>%s: <\/label><select name=\"month\"\/>\n            <option value=\"01\">Jan<\/option>\n            <option value=\"02\">Feb<\/option>\n            <option value=\"03\">Mar<\/option>\n            <option value=\"04\">Apr<\/option>\n            <option value=\"05\">May<\/option>\n            <option value=\"06\">Jun<\/option>\n            <option value=\"07\">Jul<\/option>\n            <option value=\"08\">Aug<\/option>\n            <option value=\"09\">Sep<\/option>\n            <option value=\"10\">Oct<\/option>\n            <option value=\"11\">Nov<\/option>\n            <option value=\"12\">Dec<\/option>\n        <\/select>\n        <input type=\"submit\" value=\"%s\"\/>\n    <\/form>\n<\/div>\n<script>\n    $(function(){\n        if ($(\"[name='year']\").val() === \"\") {\n            $(\"[name='year']\").val(\"#date.yyyy#\");\n        }\n        if ($(\"[name='month']\").val() !== \"#requestParam.month?javascript#\" \n            && '#requestParam.month?javascript#' !== \"\"\n            && $(\"[name='month'] option[value='#requestParam.month?javascript#']\").length > 0 ) {\n            $(\"[name='month']\").val('#requestParam.month?javascript#');\n        } else {\n            $(\"[name='month']\").val(\"#date.MM#\");\n        }\n    });\n<\/script>\n<br\/>\n<br\/>",
            "customFooter": "",
            "datasource": "default",
            "keyName": ""
        }
    }]
}

จัดการไลบรารีปลั๊กอินของคุณ

ปลั๊กอินของเราใช้ javax.servlet.http.HttpServletRequest และ javax.servlet.http.HttpServletResponse คลาสดังนั้นเราจะต้องเพิ่มไลบรารี jsp-api ลงในไฟล์ POM ของเรา

<!-- Change plugin specific dependencies here -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jsp-api</artifactId>
    <version>2.0</version>
</dependency>
<!-- End change plugin specific dependencies here -->

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

เรากำลังใช้คีย์ข้อความ i18n ในวิธี getLabel และ getDescription นอกจากนี้เรายังใช้คีย์ข้อความ i18n ในการกำหนดตัวเลือกคุณสมบัติของเราเช่นกัน ดังนั้นเราจะต้องสร้างไฟล์คุณสมบัติสำหรับปลั๊กอินของเรา

สร้างไดเรกทอรี "ทรัพยากร / ข้อความ" ภายใต้ไดเรกทอรี "form_submission_statistics_generator / src / main" จากนั้นสร้างไฟล์ "FormSubmissionStatisticsGenerator.properties" ในโฟลเดอร์ ในไฟล์คุณสมบัติให้เพิ่มคีย์ข้อความทั้งหมดและป้ายกำกับของมันดังต่อไปนี้

org.joget.tutorial.FormSubmissionStatisticsGenerator.pluginLabel=Generate Form Submission Statistics
org.joget.tutorial.FormSubmissionStatisticsGenerator.pluginDesc=Generate 2 SQL Chart Menus for form submission statistics
generator.formSubmissionStatistics.explanation=Create 2 SQL Chart Menus based on the current form for submission statistics. Note: This is dependent for MySQL database.
generator.formSubmissionStatistics.config=Options
generator.formSubmissionStatistics.userview=Userview
generator.formSubmissionStatistics.advanced=Advanced
generator.formSubmissionStatistics.label.options=Label Options
generator.formSubmissionStatistics.categoryLabel=Category Label
generator.formSubmissionStatistics.categoryLabel.value=[formName] Statistics
generator.formSubmissionStatistics.menuId.invalidId=Only alpha-numeric and underscore characters allowed
generator.formSubmissionStatistics.monthlyMenuId=Monthly Menu id
generator.formSubmissionStatistics.monthlyMenuLabel=Montly Menu Label
generator.formSubmissionStatistics.monthlyMenuLabel.value=Monthly Submission Chart
generator.formSubmissionStatistics.monthlyChartTitle=Montly Chart Title
generator.formSubmissionStatistics.monthlyChartTitle.value=[formName] Monthly Submission Chart
generator.formSubmissionStatistics.monthlyXAxisLabel=Montly X-axis Label
generator.formSubmissionStatistics.monthlyXAxisLabel.value=Month
generator.formSubmissionStatistics.dailyMenuId=Daily Menu Id
generator.formSubmissionStatistics.dailyMenuLabel=Daily Menu Label
generator.formSubmissionStatistics.dailyMenuLabel.value=Daily Submission Chart
generator.formSubmissionStatistics.dailyChartTitle=Daily Chart Title
generator.formSubmissionStatistics.dailyChartTitle.value=[formName] Daily Submission Chart
generator.formSubmissionStatistics.dailyXAxisLabel=Daily X-axis Label
generator.formSubmissionStatistics.dailyXAxisLabel.value=Date
generator.formSubmissionStatistics.yAxisLabel=Y-axis Label
generator.formSubmissionStatistics.yAxisLabel.value=Number
generator.formSubmissionStatistics.yearLabel=Year Label
generator.formSubmissionStatistics.yearLabel.value=Year
generator.formSubmissionStatistics.monthLabel=Month Label
generator.formSubmissionStatistics.monthLabel.value=Month
generator.formSubmissionStatistics.showLabel=Show Label
generator.formSubmissionStatistics.showLabel.value=Show
generator.formSubmissionStatistics.useriewMenu.options=Userview Label Options
generator.formSubmissionStatistics.createUserviewOptions=Create New Userview Options
generator.formSubmissionStatistics.userview.id=Userview ID
generator.formSubmissionStatistics.userview.id.value=v
generator.formSubmissionStatistics.userview.id.invalidId=Only alpha-numeric and underscore characters allowed
generator.formSubmissionStatistics.userview.name=Userview Name
generator.formSubmissionStatistics.userview.name.value=[appName]
generator.formSubmissionStatistics.userview.description=Userview Description
generator.formSubmissionStatistics.msg.success=Menus generated. Click <a href="[url]" target="_blank">here</a> to continue edit in Userview Builder.
generator.formSubmissionStatistics.msg.error=Error during generating Form Submission Statistics Menus!

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

เราจะต้องลงทะเบียนคลาสปลั๊กอินของเราในคลาส Activator (สร้างอัตโนมัติในแพ็คเกจคลาสเดียวกัน) เพื่อบอก Felix Framework ว่านี่คือปลั๊กอิน

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

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

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

ตอนนี้เราสามารถเปิดหนึ่งแบบฟอร์มของเราใน Form Builder สำหรับการทดสอบ คลิกที่ปุ่ม "สร้างแอป" ที่ด้านบนขวาของตัวสร้างแบบฟอร์ม โปรดอ้างอิงถึง Generate App

ให้เราตรวจสอบหน้าคุณสมบัติสำหรับ "Advanced Generator"

หลังจากกระบวนการสร้างเสร็จสิ้น

หมวดหมู่ใหม่จะถูกเพิ่มเข้าไปในมุมมองของเรา

เมนูแผนภูมิ SQL จะแสดงดังต่อไปนี้

ก้าวไปอีกขั้นแบ่งปันหรือขายมัน

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

หากต้องการดาวน์โหลด jar ปลั๊กอินที่พร้อมใช้งานโปรดค้นหาได้ที่ http://marketplace.joget.org/