Springboot+dorado+mybatis框架自定义dorado组件

其他 2018-08-09 05:20:02 阅读次数: 0

自定义dorado组件

本文使用的框架是Springboot+dorado+mybatis框架。本文自定义的组件在其他框架可能会因为框架目录组织结构会有所不同。

目录

  • **1.创建组件类
  • **2.编写相应js
  • **3.配置dorado-home配置文件
  • **4.更新配置规则
  • **5.创建dorado视图文件查看结果。

1.创建组件类

在工程下的src/main/java 的cn.idatatech.folivora.common.widget包（可以根据自己的包目录选择一个包)下创建一个类，UserComboBoxOfMine.java.代码如下：

package cn.idatatech.folivora.common.widget;


import com.bstek.dorado.annotation.ClientObject;
import com.bstek.dorado.annotation.ClientProperty;
//import com.bstek.dorado.annotation.XmlNode;
import com.bstek.dorado.view.annotation.Widget;
import com.bstek.dorado.view.widget.form.TextEditor;

@Widget(name = "UserComboBoxOfMine", category = "Form", dependsPackage = "user-combo-box-of-mine")
@ClientObject(prototype = "dorado.widget.UserComboBoxOfMine", shortTypeName = "UserComboBoxOfMine")
public class UserComboBoxOfMine extends TextEditor {
    private boolean showClearButton;
    private int panelHeight = 360;
    private boolean editable = false;

    @ClientProperty(
            escapeValue = "false"
    )
    public boolean isEditable() {
        return this.editable;
    }

    public void setEditable(boolean editable) {
        this.editable = editable;
    }

    @ClientProperty(escapeValue = "false")
    public boolean isShowClearButton() {
        return showClearButton;
    }

    public void setShowClearButton(boolean showClearButton) {
        this.showClearButton = showClearButton;
    }

    @ClientProperty(escapeValue = "360")
    public int getPanelHeight() {
        return panelHeight;
    }

    public void setPanelHeight(int panelHeight) {
        this.panelHeight = panelHeight;
    }
}

2.编写相应js

在项目的src/main/resource的/folivora/src/main/resources/dorado/widgets包（可自定义)下创建一个文件夹叫user-combo-box-of-mine,在该文件夹下创建一个名为user-combo-box-of-mine.js的文件，js代码如下：

(function () {
    var UserComboBoxOfMine = dorado.widget.UserComboBoxOfMine = $extend(
        dorado.widget.TextEditor,
        {
            $className: 'dorado.widget.UserComboBoxOfMine',
            ATTRIBUTES: {
                showClearButton: {
                    defaultValue: false,
                    skipRefresh: true,
                    writeBeforeReady: true
                },
                panelHeight: {
                    defaultValue: 360,
                    skipRefresh: true,
                    writeBeforeReady: true
                },
                value: {
                    getter: function () {
                        return this._value;
                    },
                    setter: function (val) {
                        this._value = val;
                    }
                }
            },
            createDom: function () {
                var self = this;

                var userTree = new dorado.widget.UserTree({
                    checkable: false,
                    onDataRowClick: function () {
                        var entity = userTree.get('currentEntity');
                        if (entity && entity.get('isUser')) {
                            dropDown.close();
                        }
                    },
                    height: this['_panelHeight'],
                    style: {border: 'none'}
                });
                userTree.render();

                var triggers = [];

                if (self['_showClearButton']) {
                    triggers.push(new dorado.widget.Trigger({
                        iconClass: 'd-trigger-icon-clear',
                        onExecute: function () {
                            self.doSetText('');
                            self._value = null;
                            self.post();
                        }
                    }));
                }

                var dropDown = new dorado.widget.CustomDropDown({
                    control: userTree,
                    onClose: function () {
                        var entity = userTree.get('currentEntity'),
                            display;
                        if (entity) {
                            if (!entity.get('isUser')) {
                                return false;
                            }
                            self._value = entity.get('id');
                            display = entity.get('username');
                        } else {
                            self._value = null;
                            display = '';
                        }
                        self.doSetText(display);
                        self.post();
                    }
                });
                triggers.push(dropDown);

                self._trigger = triggers;

                self.set('editable', false);

                return $invokeSuper.call(this, arguments);
            },
            refreshDom: function () {
                var property = this._property,
                    entity = this._entity;
                if (this['_dataSet']) {
                    entity = this.getBindingInfo().entity;
                }
                if (entity instanceof dorado.Entity) {
                    this._value = entity.get(property);
                } else if (entity && property) {
                    this._value = entity[property];
                }
                $invokeSuper.call(this, arguments);
                if (this._value == null || this._value === '') {
                    this.doSetText('');
                }
            },
            post: function (force) {
                if (!this._editorFocused && !force) {
                    return false;
                }
                try {
                    var eventArg = {processDefault: true};
                    this.fireEvent("beforePost", this, eventArg);
                    if (eventArg.processDefault === false) {
                        return false;
                    }
                    this.doPost && this.doPost();
                    this.fireEvent("onPost", this);
                    return true;
                }
                catch (e) {
                    dorado.Exception.processException(e);
                    return false;
                }
            },
            doPost: function () {
                var property = this['_property'],
                    entity = this['_entity'];
                if (!property || !entity) {
                    return false;
                }
                if (entity instanceof dorado.Entity) {
                    entity.set(property, this.get('value'));
                } else {
                    entity[property] = this.get('value');
                    this.setDirty && this.setDirty(true);
                }
                return true;
            },
            doRefreshData: function () {
                var property = this._property,
                    entity = this._entity;
                this.set('value', entity instanceof dorado.Entity ? entity.get(property) : entity[property]);
                this.setDirty(false);
            }
        }
    );

    dorado.Toolkits.registerPrototype('widget', 'UserComboBoxOfMine', UserComboBoxOfMine);
})();

3.配置dorado-home配置文件

在项目的src/main/webapp的/folivora/src/main/webapp/WEB-INF/dorado-home下的packages-config.xml和components-context.xml里面添加js和java代码路径配置信息：

3.1 配置packages-config.xml文件

忽略下面提到的完整代码，完整代码中的其他包是其他自定义组件使用的，我们只需要添加下面的一个包就行。
添加js的包：

<!-- 练习自定义组件 -->
<Package name="user-combo-box-of-mine" pattern="js" depends="user-tree,base-widget-desktop">
            classpath:/dorado/widgets/user-combo-box-of-mine/user-combo-box-of-mine
</Package>

完整的代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <Patterns>
        <Pattern name="js" contentType="text/javascript" charset="UTF-8"
                 mergeRequests='${configure["view.mergeJavaScript"]}' resourceSuffix=".js"
                 baseUri=">dorado/client/folivora"/>
        <Pattern name="css" contentType="text/css" charset="UTF-8"
                 mergeRequests='${configure["view.mergeStyleSheet"]}' resourceSuffix=".css"
                 baseUri=">dorado/client/folivora"/>
        <Pattern name="res-js" contentType="text/javascript" charset="UTF-8"
                 mergeRequests="false" resourceSuffix=".js"
                 baseUri=">dorado/client/resources"/>
        <Pattern name="res-css" contentType="text/css" charset="UTF-8"
                 mergeRequests="false" resourceSuffix=".css"
                 baseUri=">dorado/client/resources"/>
    </Patterns>

    <Packages>
        <!-- default load packages -->
        <Package name="common" pattern="js" depends="entypo-plus"/>

        <!-- icons -->
        <Package name="entypo-plus" pattern="res-css"
                 baseUri=">dorado/client/resources/icons/entypo-plus">
            classpath:/dorado/resources/icons/entypo-plus/entypo-plus
        </Package>

        <Package name="font-awesome-4.7.0" pattern="res-css"
                 baseUri=">dorado/client/resources/icons/font-awesome-4.7.0">
            classpath:/dorado/resources/icons/font-awesome-4.7.0/font-awesome
        </Package>

        <!-- folivora widgets -->
        <Package name="ckeditor-dependents" pattern="js">
            classpath:/dorado/widgets/ckeditor/dependents/ckeditor
        </Package>
        <Package name="ckeditor" pattern="js" depends="base-widget-desktop,ckeditor-dependents">
            classpath:/dorado/widgets/ckeditor/ckeditor
        </Package>

        <Package name="code-editor-dependents" pattern="res-js"
                 baseUri=">dorado/client/resources/ace">
            classpath:/dorado/resources/ace/ace,
            classpath:/dorado/resources/ace/ext-language_tools
        </Package>
        <Package name="code-editor" pattern="js" depends="base-widget-desktop,code-editor-dependents">
            classpath:/dorado/widgets/code-editor/code-editor
        </Package>

        <Package name="data-combo-box" pattern="js" depends="grid">
            classpath:/dorado/widgets/data-combo-box/data-combo-box
        </Package>

        <Package name="data-formatter" pattern="js" depends="base-widget-desktop">
            classpath:/dorado/widgets/data-formatter/data-formatter
        </Package>

        <Package name="data-html-formatter" pattern="js" depends="base-widget-desktop">
            classpath:/dorado/widgets/data-html-formatter/data-html-formatter
        </Package>

        <Package name="data-multi-combo-box" pattern="js" depends="grid">
            classpath:/dorado/widgets/data-multi-combo-box/data-multi-combo-box
        </Package>

        <Package name="data-progress-bar" pattern="js" depends="base-widget-desktop">
            classpath:/dorado/widgets/data-progress-bar/data-progress-bar
        </Package>

        <Package name="data-slider" pattern="js" depends="base-widget-desktop">
            classpath:/dorado/widgets/data-slider/data-slider
        </Package>

        <Package name="data-tree-combo-box" pattern="js" depends="tree">
            classpath:/dorado/widgets/data-tree-combo-box/data-tree-combo-box
        </Package>

        <Package name="echarts-dependents" pattern="js">
            classpath:/dorado/widgets/echarts/dependents/echarts.min
        </Package>
        <Package name="echarts" pattern="js" depends="base-widget-desktop,echarts-dependents">
            classpath:/dorado/widgets/echarts/echarts
        </Package>

        <Package name="file-box" pattern="js" depends="base-widget-desktop,upload-button">
            classpath:/dorado/widgets/file-box/file-box
        </Package>

        <Package name="image-manager" pattern="js" depends="tree,block-view,upload-button,page-bar">
            classpath:/dorado/widgets/image-manager/image-manager
        </Package>

        <Package name="images-select-box" pattern="js" depends="image-manager">
            classpath:/dorado/widgets/images-select-box/images-select-box
        </Package>

        <Package name="json-editor-dependents" pattern="res-js"
                 baseUri=">dorado/client/resources/jsoneditor">
            classpath:/dorado/resources/jsoneditor/jsoneditor
        </Package>
        <Package name="json-editor-dependents-css" pattern="res-css"
                 baseUri=">dorado/client/resources/jsoneditor">
            classpath:/dorado/resources/jsoneditor/jsoneditor
        </Package>
        <Package name="json-editor" pattern="js"
                 depends="json-editor-dependents,json-editor-dependents-css">
            classpath:/dorado/widgets/json-editor/json-editor
        </Package>

        <Package name="json-object-array-editor" pattern="js" depends="json-object-editor">
            classpath:/dorado/widgets/json-object-array-editor/json-object-array-editor
        </Package>

        <Package name="json-object-editor" pattern="js" depends="base-widget-desktop">
            classpath:/dorado/widgets/json-object-editor/json-object-editor
        </Package>

        <Package name="json-plain-array-editor" pattern="js" depends="grid">
            classpath:/dorado/widgets/json-plain-array-editor/json-plain-array-editor
        </Package>

        <Package name="nav-menu-tree" pattern="js" depends="tree">
            classpath:/dorado/widgets/nav-menu-tree/nav-menu-tree
        </Package>

        <Package name="office-combo-box" pattern="js" depends="data-tree-combo-box">
            classpath:/dorado/widgets/office-combo-box/office-combo-box
        </Package>

        <Package name="page-bar" pattern="js" depends="base-widget-desktop">
            classpath:/dorado/widgets/page-bar/page-bar
        </Package>

        <Package name="raphael-dependents" pattern="js">
            classpath:/dorado/widgets/raphael/dependents/raphael.min
        </Package>
        <Package name="raphael" pattern="js" depends="base-widget-desktop,raphael-dependents">
            classpath:/dorado/widgets/raphael/raphael
        </Package>

        <Package name="rating" pattern="js" depends="base-widget-desktop">
            classpath:/dorado/widgets/rating/rating
        </Package>

        <Package name="save-action" pattern="js" depends="base-widget-desktop">
            classpath:/dorado/widgets/save-action/save-action
        </Package>

        <Package name="simple-upload-image" pattern="js"
                 depends="base-widget-desktop,upload-button-dependents,upload-button-css">
            classpath:/dorado/widgets/simple-upload-image/simple-upload-image
        </Package>

        <Package name="syntax-highlighter-css" pattern="css">
            classpath:/dorado/widgets/syntax-highlighter/css/monokai-sublime
        </Package>
        <Package name="syntax-highlighter-dependents" pattern="js">
            classpath:/dorado/widgets/syntax-highlighter/dependents/highlight
        </Package>
        <Package name="syntax-highlighter" pattern="js"
                 depends="base-widget-desktop,syntax-highlighter-dependents,syntax-highlighter-css">
            classpath:/dorado/widgets/syntax-highlighter/syntax-highlighter
        </Package>

        <Package name="transparent-toolbar" pattern="js" depends="base-widget-desktop">
            classpath:/dorado/widgets/transparent-toolbar/transparent-toolbar
        </Package>

        <Package name="u-editor-css" pattern="css">
            classpath:/dorado/widgets/u-editor/u-editor
        </Package>
        <Package name="u-editor-dependents" pattern="res-js"
                 baseUri=">dorado/client/resources/ueditor">
            classpath:/dorado/resources/ueditor/ueditor.config,
            classpath:/dorado/resources/ueditor/ueditor.all.min
        </Package>
        <Package name="u-editor" pattern="js" depends="base-widget,u-editor-dependents,u-editor-css">
            classpath:/dorado/widgets/u-editor/u-editor
        </Package>

        <Package name="upload-button-css" pattern="css">
            classpath:/dorado/widgets/upload-button/css/webuploader
        </Package>
        <Package name="upload-button-dependents" pattern="js">
            classpath:/dorado/widgets/upload-button/dependents/webuploader
        </Package>
        <Package name="upload-button" pattern="js"
                 depends="base-widget-desktop,upload-button-dependents,upload-button-css">
            classpath:/dorado/widgets/upload-button/upload-button
        </Package>

        <Package name="upload-image" pattern="js" depends="image-manager,base-widget-desktop">
            classpath:/dorado/widgets/upload-image/upload-image
        </Package>

        <Package name="user-combo-box" pattern="js" depends="user-tree,base-widget-desktop">
            classpath:/dorado/widgets/user-combo-box/user-combo-box
        </Package>

        <!-- 练习自定义组件 -->
        <Package name="user-combo-box-of-mine" pattern="js" depends="user-tree,base-widget-desktop">
            classpath:/dorado/widgets/user-combo-box-of-mine/user-combo-box-of-mine
        </Package>

        <Package name="user-select-box" pattern="js" depends="user-selector,base-widget-desktop">
            classpath:/dorado/widgets/user-select-box/user-select-box
        </Package>

        <Package name="user-selector" pattern="js" depends="office-combo-box,grid,page-bar">
            classpath:/dorado/widgets/user-selector/user-selector
        </Package>

        <Package name="user-tree" pattern="js" depends="tree-grid">
            classpath:/dorado/widgets/user-tree/user-tree
        </Package>

        <Package name="video-player-css" pattern="css">
            classpath:/dorado/widgets/video-player/css/video-js.min
        </Package>
        <Package name="video-player-dependents" pattern="js">
            classpath:/dorado/widgets/video-player/dependents/video.min,
            classpath:/dorado/widgets/video-player/dependents/zh-CN
        </Package>
        <Package name="video-player" pattern="js" depends="video-player-dependents,video-player-css">
            classpath:/dorado/widgets/video-player/video-player
        </Package>

    </Packages>
</config>
3.2 配置component-context.xml配置文件

配置java代码包路径，如下：
同上，这里的完整代码中的其他包路径是其他组件使用的。
引入包路径配置：

<bean id="cn.idatatech.folivora.common.widget.UserComboBoxOfMine" parent="dorado.defaultComponentTypeRegister"/>

完整代码：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:d="http://www.bstek.com/dorado/schema"
       xsi:schemaLocation="
           http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd
           http://www.bstek.com/dorado/schema
           http://www.bstek.com/dorado/schema/spring-dorado-7.0.xsd"
>
    <bean id="cn.idatatech.folivora.common.widget.CKEditor" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.CodeEditor" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.DataComboBox" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.DataFormatter" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.DataHtmlFormatter" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.DataMultiComboBox" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.DataProgressBar" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.DataSlider" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.DataTreeComboBox" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.ECharts" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.FileBox" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.ImageManager" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.ImagesSelectBox" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.JSONEditor" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.JSONObjectArrayEditor" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.JSONObjectEditor" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.JSONPlainArrayEditor" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.NavMenuTree" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.OfficeComboBox" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.PageBar" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.Raphael" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.Rating" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.SaveAction" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.SimpleUploadImage" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.SyntaxHighlighter" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.TransparentToolbar" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.UEditor" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.UploadButton" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.UploadImage" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.UserComboBox" parent="dorado.defaultComponentTypeRegister"/>
    <!-- 自定义组件 -->
    <bean id="cn.idatatech.folivora.common.widget.UserComboBoxOfMine" parent="dorado.defaultComponentTypeRegister"/>

    <bean id="cn.idatatech.folivora.common.widget.UserSelectBox" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.UserSelector" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.UserTree" parent="dorado.defaultComponentTypeRegister"/>
    <bean id="cn.idatatech.folivora.common.widget.VideoPlayer" parent="dorado.defaultComponentTypeRegister"/>
</beans>

注意：[^footnote].我们这里创建的组件还依赖于另外两个组件，即在引入js文件时还定义了依赖另外两个组件的js

<!-- 练习自定义组件 -->
        <Package name="user-combo-box-of-mine" pattern="js" depends="user-tree,base-widget-desktop">
            classpath:/dorado/widgets/user-combo-box-of-mine/user-combo-box-of-mine
        </Package>

这里的depends=”user-tree,base-widget-desktop就是依赖的另瓦两个组件的js。

4.更新配置规则

鼠标右键项目->更新dorado配置规则。

5.创建dorado视图文件查看结果

在项目的src/mian/webapp下的WEB-INF下的views下（这个路径是根据自己项目的配置文件来确定的，就是存放你的前端显示用的视图模型，如jsp，html，view.xml等）新建一个dorado视图模型，打开dorado视图，选中view，左边搜索刚刚创建好的组件UserComboBoxOfMine就会找到。

猜你喜欢

转载自blog.csdn.net/qq_23967965/article/details/81507539
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022