Versions Compared

Key

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

第一步,注入组件接口

实现如下图所示效果

在插件中配置自定义控件的属性,代码如下:

Code Block
linenumberstrue
collapsetrue
public class FilterProvider extends AbstractCustomFilterWidgetProvider {
    /**
     * 配置自定义控件的名称
     */
    @Override
    public String getName() {
        try {
            Locale currentLocale = null;
            // 加载资源文件(使用 base name,不带语言后缀和 .properties)
            // LocaleFinder 已经配置了基础路径,这里只需要添加 base name
            String resourceBaseName = "ru/soundbi/filters/datesliderfilter/resource/locale/locale";
            try {
                InterProviderFactory.getProvider().addResource(resourceBaseName);
            } catch (Exception e) {
            };
            HttpServletRequest req = null;
            try {
                if (RequestContextHolder.getRequestAttributes() != null) {
                    req = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
                }
            } catch (Exception e) {
                // 忽略异常,继续尝试其他方式
            }
            if (req != null) {
                currentLocale = ProviderFactory.INSTANCE.getInternationalProvider().getClientLocale(req);
            }
            // 如果无法获取语言,返回键值
            if (currentLocale == null) {
                return "Plugin-Xml-I18n-Custom-Date-Slider-Plugin-Name";
            }
            
            // 使用 getLocText(String text, Locale locale) 方法获取国际化文本
            String key = "Plugin-Xml-I18n-Custom-Date-Slider-Plugin-Name";
            String localizedText = InterProviderFactory.getProvider().getLocText(key, currentLocale);
            return localizedText;
        } catch (Exception e) {
            // 如果无法加载国际化资源,返回键值作为后备
        }
        return "Plugin-Xml-I18n-Custom-Date-Slider-Plugin-Name";
    }

    /**
     * 配置该自定义控件的xType
     */
    @Override
    public String getType() {
        return "bi.custom.date.dateslider";
    }

    /**
     * 配置该自定义组件的展示图标
     */
    @Override
    public String getIcon() {
        return "http://webapi.amap.com/theme/v1.3/mapinfo_05.png";
    }

    /**
     * 配置该自定义控件的配置 (可以为空)
     */
    @Override
    public String getCustomTool() {
        return "";//"bi.plugin.testwidget";
    }

    /**
     * 配置该自定义控件的预览html (可以为空)
     */
    @Override
    public String getPreviewPageHTML(OperationContext context) {
        return "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://fanruan.design/fineui/2.0/fineui.min.css\" />" +
                "<script src=\"https://fanruan.design/fineui/2.0/fineui.min.js\"></script>" +
                "<div>context: </div>" + context.getSystemInfo() + context.getUserInfo() +
                "<div id=\"container\">这是预览</div>";
    }

    /**
     * 配置该自定义控件的编辑html (可以为空)
     */
    @Override
    public String getEditPageHTML(OperationContext context) {
        return "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://fanruan.design/fineui/2.0/fineui.min.css\" />" +
                "<script src=\"https://fanruan.design/fineui/2.0/fineui.min.js\"></script>" +
                "<div>context: </div>" + context.getSystemInfo().getServletURL() + context.getUserInfo().getDisplayName() +
                "<div id=\"container\">这是编辑</div>";
    }

    @Override
    public AssembleComponent previewClient(OperationContext context) {
        return FilterComponent.KEY;
    }

    /**
     * 配置该自定义控件的类型,默认支持创建字符类型的控件,日期类型的控件和数值类型的控件
     * For custom text filter widget, use BICommonConstants.COLUMN.STRING
     * For custom date range filter widget, use BICommonConstants.COLUMN.DATE
     * For custom number filter widget, use BICommonConstants.COLUMN.NUMBER
     */
    @Override
    public int getFilterFieldType() {
        return BICommonConstants.COLUMN.DATE;
    }
}

第二步 构造自定义过滤控件的处理逻辑

在插件中定义自定义过滤控件的逻辑代码,该自定义过滤控件可以去控制自定义控件编辑时的效果

...