如何开发一个表情评分的表单字段

在本教程中，我们将遵循开发插件的指导方针来开发我们的表情评分的表单字段插件，有关更多详细信息步骤，请参阅第一个教程如何开发一个Bean Shell哈希变量插件。

1.什么问题？

我们希望有一个评级领域的一些笑脸图像，可以重用的其他形式。

2.如何解决问题？

我们将开发一个表单域元素插件来呈现我们的心情评价字段。

3.你的插件需要什么输入？

为了开发情绪分级表格字段插件，我们将需要为表格字段元素提供一些标准输入。

字段ID
字段标签
验证器
只读
工作流变量

4.你的插件的输出和预期结果是什么？

显示选择笑脸图像和单选按钮的表单域。

5.是否有任何资源/ API可以重复使用？

为了开发情绪分级表格字段插件，我们可以扩展核心产品中的无线电字段，然后替换它的模板和插件属性选项。

6.准备你的开发环境

我们需要始终准备好Joget Workflow Source Code，并按照这个指导方针建立起来。

下面的教程是用Macbook Pro编写的，Joget源代码是5.0.1版本。其他平台命令请参阅如何开发插件文章。

假设我们的文件夹目录如下所示。

- Home
  - joget
    - plugins
    - jw-community
      -5.0.1

“插件”目录是我们将创建和存储我们所有插件的文件夹，“jw-community”目录是Joget Workflow源代码的存储位置。

运行以下命令在“plugins”目录下创建一个maven项目。

cd joget/plugins/
~/joget/jw-community/5.0.1/wflow-plugin-archetype/create-plugin.sh org.joget mood_rating 5.0.1

然后，shell脚本会要求我们输入插件的版本号，并在生成maven项目之前要求我们确认。

Define value for property 'version':  1.0-SNAPSHOT: : 5.0.0
[INFO] Using property: package = org.joget
Confirm properties configuration:
groupId: org.joget
artifactId: mood_rating
version: 5.0.0
package: org.joget
Y: : y

我们应该在终端上显示“BUILD SUCCESS”消息，在“plugins”文件夹中创建一个“mood_rating”文件夹。

用你最喜欢的IDE打开maven项目。我将使用 NetBeans。

7. Just code it!

a. 扩展插件类型的抽象类

在“org.joget”包下创建一个“MoodRatingField”类。然后，使用org.joget.apps.form.lib.Radio 类扩展该类。该 org.joget.apps.form.lib.Radio 类是一个实现 org.joget.apps.form.model.Element 抽象类。请参阅表单域元素插件。

b. 实现所有的抽象方法

像往常一样，我们必须执行所有的抽象方法。我们将使用AppPluginUtil.getMessage方法来支持i18n，并使用常量变量MESSAGE_PATH作为消息资源包目录。

Implementation of all basic abstract methods

package org.joget;
 
import java.util.Map;
import org.joget.apps.app.service.AppPluginUtil;
import org.joget.apps.app.service.AppUtil;
import org.joget.apps.form.lib.Radio;
import org.joget.apps.form.model.FormBuilderPalette;
 
public class MoodRatingField extends Radio {
    
    private final static String MESSAGE_PATH = "message/form/MoodRatingField";
    
    @Override
    public String getName() {
        return "Mood Rating";
    }

    @Override
    public String getVersion() {
        return "5.0.0";
    }
    
    @Override
    public String getClassName() {
        return getClass().getName();
    }
    
    @Override
    public String getFormBuilderCategory() {
        return FormBuilderPalette.CATEGORY_CUSTOM;
    }
    
    @Override
    public String getLabel() {
        //support i18n
        return AppPluginUtil.getMessage("org.joget.MoodRatingField.pluginLabel", getClassName(), MESSAGE_PATH);
    }
 
    @Override
    public String getDescription() {
        //support i18n
        return AppPluginUtil.getMessage("org.joget.MoodRatingField.pluginDesc", getClassName(), MESSAGE_PATH);
    }
    
    @Override
    public String getPropertyOptions() {
        return AppUtil.readPluginResource(getClass().getName(), "/properties/form/moodRatingField.json", null, true, MESSAGE_PATH);
    }
    
    @Override
    public String getFormBuilderTemplate() {
        return "<label class='label'>"+getLabel()+"</label>";
    }
}

现在，我们必须为管理员用户创建一个UI，为我们的插件提供输入。在getPropertyOptions方法中，我们已经指定了我们的插件属性选项和配置定义文件位于“/properties/form/moodRatingField.json”。让我们在“mood_rating / src / main”目录下创建一个目录“resources / properties / form”。创建目录后，在“properties”文件夹中创建一个名为“moodRatingField.json”的文件。

在属性定义选项文件中，我们需要提供如下的选项。请注意，我们可以在我们的属性选项中使用“@@ message.key @@”语法来支持i18n。

[{
    title : '@@form.moodRating.config@@',
    properties : [{
        name : 'id',
        label : '@@form.radio.id@@',
        type : 'textfield',
        required : 'True',
        regex_validation : '^[a-zA-Z0-9_]+$',
        validation_message : '@@form.radio.invalidId@@'
    },
    {
        name : 'label',
        label : '@@form.radio.label@@',
        type : 'textfield',
        value : '@@org.joget.MoodRatingField.pluginLabel@@'
    }]
},
{
    title : '@@form.radio.advancedOptions@@',
    properties : [{
        label : '@@form.radio.data@@',
        type : 'header'
    },
    {
        name : 'validator',
        label : '@@form.radio.validator@@',
        type : 'elementselect',
        options_ajax : '[CONTEXT_PATH]/web/property/json/getElements?classname=org.joget.apps.form.model.FormValidator',
        url : '[CONTEXT_PATH]/web/property/json[APP_PATH]/getPropertyOptions'
    },
    {
        label : '@@form.radio.ui@@',
        type : 'header'
    },
    {
        name : 'readonly',
        label : '@@form.radio.readonly@@',
        type : 'checkbox',
        value : 'False',
        options : [{
            value : 'true',
            label : ''
        }]
    },
    {
        label : '@@form.radio.workflow@@',
        type : 'header'
    },
    {
        name : 'workflowVariable',
        label : '@@form.radio.workflowVariable@@',
        type : 'textfield'
    }]
}]

完成属性选项以收集输入后，我们可以处理插件的主要方法，这些方法是renderTemplate和formatData方法。由于我们扩展了Radio类，所以我们不需要实现formatData方法。

    @Override
    public String renderTemplate(FormData formData, Map dataModel) {
        String template = "moodRatingField.ftl";
        
        // set value
        String value = FormUtil.getElementPropertyValue(this, formData);
        dataModel.put("value", value);
        String html = FormUtil.generateElementHtml(this, formData, template, dataModel);
        return html;
    }

在renderTemplate中，我们将模板文件指定为“moodRatingField.ftl”。在“mood_rating / src / main / resources / templates”目录下创建这个文件。然后，使用 FreeMaker 语法来构建我们的模板，如下所示：

<div class="form-cell mood_rating" ${elementMetaData!}>
    <label class="label">${element.properties.label} <span class="form-cell-validator">${decoration}</span><#if error??> <span class="form-error-message">${error}</span></#if></label>
    <div class="form-cell-value" id="${elementParamName!}${element.properties.elementUniqueKey!}">
    <#if !(request.getAttribute("org.joget.MoodRatingField")??) >
        <style>
            .mood_rating .tdstyle {text-align:center;width:20%;border:0px none transparent !important;}
        </style>
    </#if>    
    <table style="width:150px">
        <tbody>
            <tr>
                <td class="tdstyle"><img height="25" width="25" src="${request.contextPath}/plugin/org.joget.MoodRatingField/images/smiley5.png"></td>
                <td class="tdstyle"><img height="25" width="25" src="${request.contextPath}/plugin/org.joget.MoodRatingField/images/smiley4.png"></td>
                <td class="tdstyle"><img height="25" width="25" src="${request.contextPath}/plugin/org.joget.MoodRatingField/images/smiley3.png"></td>
                <td class="tdstyle"><img height="25" width="25" src="${request.contextPath}/plugin/org.joget.MoodRatingField/images/smiley2.png"></td>
                <td class="tdstyle"><img height="25" width="25" src="${request.contextPath}/plugin/org.joget.MoodRatingField/images/smiley1.png"></td>
            </tr>
            <tr>
                <#list ['5', '4', '3', '2', '1'] as i>
                    <td class="tdstyle">
                        <input grouping="${elementParamName!}" id="${elementParamName!}" name="${elementParamName!}" type="radio" value="${i}" <#if error??>class="form-error-cell"</#if> <#if element.properties.readonly! == 'true'> disabled</#if> <#if value?? && value == i>checked</#if> />
                    </td>
                </#list>
            </tr>
        </tbody>
    </table>
    </div>
    <div style="clear:both;"></div>
</div>

有一些笑脸图像文件将被模板使用，让这些图像文件放在“mood_rating / src / main / resources / resources / image”目录下

c. 管理你的插件的依赖库

没有额外的库需要。

d. 让你的插件国际化（国际化）准备就绪

我们在getLabel和getDescription方法中使用i18n消息密钥。我们将在我们的属性选项定义中使用i18n消息密钥。然后，我们将需要为我们的插件创建一个消息资源包属性文件。

在“mood_rating / src / main”目录下创建一个目录“resources / message / form”。然后，在该文件夹中创建一个“MoodRatingField.properties”文件。在属性文件中，添加所有消息密钥及其标签，如下所示。

org.joget.MoodRatingField.pluginLabel=Mood Rating
org.joget.MoodRatingField.pluginDesc=Form Field for rating mood
form.moodRating.config=Edit Mood Rating

e. 注册你的插件到Felix框架

接下来，我们将需要在Activator类（在同一个类包中自动生成）中注册我们的插件类，以告诉Felix框架这是一个插件。

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