图形扩展

  • 编写Java类，实现ShapeExecutor
  1. @Component
  2. public class RedisExecutor implements ShapeExecutor{
  4.     @Override
  5.     public String supportShape() {
  6.         return "redis";
  7.     }
  9.     @Override
  10.     public Shape shape() {
  11.         Shape shape = new Shape();
  12.         //web界面上显示的图标
  13.         shape.setImage("data:image/png;base64,iVBORw0KG.......");
  14.         //拖放至容器里时默认的节点名称
  15.         shape.setLabel("Redis");
  16.         //模板文件名
  17.         shape.setName("redis");
  18.         //鼠标移动至图标上显示的名称
  19.         shape.setTitle("Redis");
  20.         return shape;
  21.     }
  23.     @Override
  24.     public void execute(SpiderNode node, SpiderContext context, Map<String, Object> variables) {
  25.         //该图形具体实现的逻辑
  26.     }
  28. }
  • 编写Html模板，放至src/main/resources/static/resources/templates/中，模板语法遵循layui的laytpl语法
  1. <div class="layui-tab layui-tab-fixed layui-tab-brief">
  2.   <ul class="layui-tab-title">
  3.     <li class="layui-this">基本配置</li>
  4.   </ul>
  5.   <div class="layui-tab-content editor-form-node">
  6.     <div class="layui-tab-item layui-show">
  7.         <form class="layui-form">
  8.             <div class="layui-form-item">
  9.                 <label class="layui-form-label">节点名称</label>
  10.                 <div class="layui-input-block">
  11.                     <input type="text" name="value" placeholder="请输入节点名称" value="{{=d.value}}" autocomplete="off" class="layui-input">
  12.                 </div>
  13.             </div>
  14.             <div class="layui-form-item">
  15.                 <label class="layui-form-label">host</label>
  16.                 <div class="layui-input-block">
  17.                     <input type="text" name="host" placeholder="请输入redis host" autocomplete="off" class="layui-input input-default" value="{{=d.data.object.host}}">
  18.                 </div>
  19.             </div>
  20.             <div class="layui-form-item">
  21.                 <div class="layui-input-block">
  22.                     <button class="layui-btn btn-redis-datasource-test" type="button">测试连接</button>
  23.                 </div>
  24.             </div>
  25.         </form>
  26.     </div>
  27.   </div>
  28. </div>
  29. <script>
  30.     //点击测试连接
  31.     $('.layui-form').on('click','.btn-redis-datasource-test',function(){
  32.         var $form = $('.layui-form');
  33.         var host = $form.find('input[name=host]').val();
  35.     });
  36. </script>
  • 插件功能测试