精华内容
下载资源
问答
  • 背景现在越来越多的业务要求运营可以自由定制化页面,此过程最大的好处就是前端研发不用介入就能完成页面的定制化,大大提升了产品的灵活性,减轻前端工程师的工作量还有一些场景:用户可以自由定制图表工具,通过...

    背景

    现在越来越多的业务要求运营可以自由定制化页面,此过程最大的好处就是前端研发不用介入就能完成页面的定制化,大大提升了产品的灵活性,减轻前端工程师的工作量

    还有一些场景:用户可以自由定制图表工具,通过配置数据源,x y轴即可达到图表定制化的目的

    软件

    今天给大家推荐一款前端可视化的布局器

    一睹软件外观 在线地址magicalcoder.com用电脑访问

    外观

    此布局器的最大特点如下

    1 支持多种ui(vue jquery react...) element layui antdesign bootstrap miniui vant

    2 支持echarts可视化图表

    3 布局器的使用就不细说了 拖拽式开发

    4 可视化编写脚本js(vue的ui新特性)

    5 支持自由拖拽定位+拖拽插入混合模式

    6 可嵌入 jquery vue react angular框架的ui

    7 快捷键操作

    8 自定义皮肤和换肤

    9 对齐线 辅助线 网格

    10 导航树

    11 右键菜单

    12 支持样式 脚本 HTML同时编写

    13 拖拽改变宽高 旋转

    14 自定义组件和属性 只要配置json便可完成

    15 支持 二次定制化开发 支持嵌入到您的web系统种 支持扩展基于jquery 或者vue的各种前端开源ui

    16 成果物,就是当前ui的代码,自适应移动端,直接面向业务,减轻前端工程师的介入和工作量

    17 视频教程+开发文档齐全

    ... bootstrap 等等都支持

    此类布局器 大家最关注的莫过于:

    如何自定义组件和属性:MagicalCoder布局器相当简单,大家只要按照文档来配置json即可达到自定义组件和属性

    简单看下部分功能吧:

    根面板选择是否开启自由定位

    网格 对齐线 修改大小

    右键功能自定义

    双击修改文本

    左侧丰富的控件 滚动进度条

    各种统计图表

    自由定位+拖拽插入混合模式

    事件编辑器+可视化写点js

    在线帮助文档

    其他 快捷键说明

    ctrl+方向键微调自由面板的控件位置或普通模板移动节点顺序

    ctrl+c复制

    ctrl+x剪切

    ctrl+v粘贴

    ctrl+z撤销修改

    ctrl+y重做

    ctrl+d向下复制

    ctrl+i增加条目

    alt+h缩放

    delete删除

    方向键切换聚焦元素

    单击聚焦

    双击可以直接改文本

    ctrl +点击:修改大小 旋转

    展开全文
  • web开发的朋友,经常会遇到,一段时间没写页面了,突然又写,经常会连常用js或者一些struts、jstl标签等都忘记了,这个插件工具就是为了这个烦恼而开发的,还是和以前一样拖拽下,就能生成对应js或者标签demo。...

    先说下,这些插件有什么用途?

    做web开发的朋友,经常会遇到,一段时间没写页面了,突然又写,经常会连常用js或者一些struts、jstl标签等都忘记了,这个插件工具就是为了这个烦恼而开发的,还是和以前一样拖拽下,就能生成对应js或者标签demo。

    还有,公司内部经常会有些公用的java代码 api,如果让一个新手调用,估计都是先看文档,然后摸索这去调用这些api,文档大部分都是javadoc或其他文件,看的容易,到调用的时候感觉有点力不从心吧。插件的另外一个功能帮你扫描这些api形成可视化的公共api库,只需要拖拽一下就能生成调用的代码。

     

     

    差不多2年前写过一个工具,web开发助手(http://www.iteye.com/topic/1118666),还算好用,不少朋友下载,但由于工作原因就停止了对那个产品的维护,实在对不起大家,今天再重新发布一个升级版本。另外,也开发一个可以扫描java类文件,提取公用库的工具,一起打包为“mytool”发布。

    希望对大家有点用处。

     

     先看视频:

    脚本库视频   

    方法库视频

     

    下载安装:mytool

    安装方式:直接解压到eclipse的目录下即可,安装包里面含有links目录,选择覆盖即可。

     

     

    在运行mytool时,第一步是要建立一个公共方法/脚本库工程,在工具栏上面有快捷按钮


     

    建立公共库工程如下:



     
     

    该工程下面有两个文件夹,分别是放置公用方法库和脚本库

     

    一、先介绍脚本库:

    脚本库用途,当然就是把标签啊,脚本啊,,集中在一起管理,从上面拖拽一下到jsp编辑器或者其他文本式的编辑器即能生成一段相关的字符串,试试就知道,不多说。

     

    点击 工具栏上面的打开脚本库按钮(

     )即可, 先来一个截图:



      

    上图为公用脚本库(以前叫做 web开发助手)

     

     设置要显示的标签集,包含定义的

    上图为设置界面

     

    如果定义自定义脚本库,则在公共库工程下面有一个 SCRIPTS 的文件夹,双击即可打开编辑

     

     

     

     二、公用方法库介绍:

    先说下应用场景:

    A、公司有自己的框架和一些常用的方法类,对于新人,要入手开发项目,要使用公司现有的方法库,一般都是看javadoc,或者其他形式的文档,以及例子。到调用里面的方法等的时候感觉力不从心,现在可以使用mytool公用库,扫一下方法库源码(扫下你框架也可以反正都是抽取可以对外用的),自动的把里面可调用的方法或属性抽取出来,形成树形的方法库,在方法库视图中,把鼠标放到相关的类,方法或者属性即可显示相关的注释。怎样用?只需要拖拽一下即可。如果你问,老大没给源码啊,只给了文档,也没问题,你让他帮你扫,扫完后,发方法库文件给你,你放到METHODS目录下,然后在设置面板里面设置要加载这个方法库文件即可。

     

    B、很多公司都有自己的框架和方法库,估计不少公司都是停留在 jar+文档 的形式或者连文档都没有,就一个jar包,这样的弱方式来管理,是不是感觉不大友好呢?通过mytool方法库可以有效帮你管理你公司的公用代码资源。

     

    先看截图:
     打开方法库视图



     

    出现这样的方法库视图:


     上面方法库视图 显示public 和 protected 的变量或者方法,不管是静态或是非静态。

    图标和eclipse本身的图标表示一样,,例如 绿色实心的绿点表示公用的非静态的方法,加s则表示是公用的静态的方法等。

    方法库放置的只是对外可通过类的方式进行调用的类或变量(public或protected  方法或属性,会过滤接口和抽象类,具体往下看有说明)。

     

     功能也是拖拽一下生成 调用该变量或者方法的代码(含注释)

     

    方法信息如何录入?

    不用手工录入,通过扫描功能即可(注意扫描的是某个文件夹下的java源文件,而非class),点击右上角的“设置按钮”,弹出这样的设置界面:

     

     

     扫描导入方法库,会自动加入到公用工程里面的METHODS目录下。

    如果扫描导入方法库或者 动态加载时,发现出现中文乱码的情况时,请注意检查java文件编码格式是否正确。

     

     被扫描的java文件如果想让java方法注释和属性注释都被扫描的话,要遵照标准的java注释,

    也就是使用

    /**

     *

     */

     

    这样的方式来标注,例如,如下这样注释(方法、属性、类):

     

    Java代码  收藏代码
    1. package com.langsotech.methods.string;  
    2. /** 
    3.  *  
    4.  * @author 广州朗数信息技术有限公司 
    5.  * @copyright 广州朗数信息技术有限公司 
    6.  * 2013-2-14 下午03:21:48 
    7.  * version v1.0 
    8.  * TODO 字符串操作类 
    9.  */  
    10. public class StringDo {  
    11.   
    12.     public static int id;  
    13.       
    14.     /** 
    15.      * 用户年龄 
    16.      */  
    17.     protected int age;  
    18.       
    19.     /** 
    20.      * 用户姓名 
    21.      */  
    22.     public String name;  
    23.       
    24.     /** 
    25.      * 组合1、2 两个字符串 
    26.      * @param str1  字符串1 
    27.      * @param str2  字符串2 
    28.      * @return 组合字符串 
    29.      */  
    30.     public static String join(String str1, String str2){  
    31.         return str1 + str2;  
    32.     }  
    33.       
    34.     /** 
    35.      * 组合 A 和 B 两个字符串 
    36.      * @param strA  字符串A 
    37.      * @param strB  字符串B 
    38.      * @return  组合字符串 
    39.      */  
    40.     public String join2(String strA, String strB){  
    41.         return strA + strB;  
    42.     }  
    43.       
    44.     /** 
    45.      * 根据姓名获取其年龄 
    46.      * @param name  姓名 
    47.      * @return  年龄 
    48.      */  
    49.     protected int getAge(String name){  
    50.         return 1;  
    51.     }  
    52.       
    53. }  

     

     

    拖拽被生成这样的代码:

     

    Java代码  收藏代码
    1. //字符串A  
    2. String strA = ...;  
    3. //字符串B  
    4. String strB = ...;  
    5. //组合 A 和 B 两个字符串  
    6. String object = stringDo.join2(strA, strB);  

     如果是静态方法或属性,类名是本有的大写类名,如 StringDo,,,

     

     

    关于方法库扫描的继承显示:

    在被扫描的目录内,如果A 类有方法a1(public或protected)、b1(public或protected),A类继承 B类,B类有方法a2(public或protected)、b2(public或protected)

    那么A类将会被扫描出这样的结果,A类有方法,,a1、a2、b1、b2。。

    类的属性也是以此类推!

     

    扫描会过滤掉接口、或者私有类型的变量或方法等。。

    另外,如果一个类继承什么spirng的框架类,,而该类的java文件却不在扫描的目录内,则不会被扫描出来。

     

    扫描也会过滤抽象类,而该抽象类中含有的非抽象方法则被加入到继承者身上。

     

     

    三、eclipse版本支持测试:

    eclipse测试支持:

     

    helios(3.6)

    ok

    indigo(3.7)

    ok

    juno(4.2)

    ok

    galileo(3.5)

    ok

    ganymede(3.4)

    ok

     

     

    居于以上版本的myeclipse应该也是支持的。

     

     

     如果有发现有不能用的,请告诉我,谢谢。

    展开全文
  • yarn add @brickd/react @brickd/react-web @brickd/render 要么 npm install @brickd/react @brickd/react-web @brickd/render 用法 import { createElement } from ' react ' ; import { BrickDesign , BrickTree...
  • JNPF是一款优秀的软件平台产品,可视化开发环境,...表单设计是配置大量可复用控件,通过拖拽的控件自动生成可视化应用 列表设计是配置页面显示列、查询条件、列表分页、 按钮配置等设置 对WEB设计进行删除、..

    JNPF是一款优秀的软件平台产品,可视化开发环境,新增的零代码开发,操作相当简单,流程化的表单开发让业务人员也能参与其中,做到所见即所得,大大提高开发效率,能帮助公司大幅节省人力成本和时间成本,同时又不失灵活性。适用于搭建 OA、ERP、CRM、HR、HIS等所有的企业信息管理系统(且适用于集团公司部署)。

    创建web表单

    表单设计是配置大量可复用控件,通过拖拽的控件自动生成可视化应用

     

    列表设计是配置页面显示列、查询条件、列表分页、 按钮配置等设置

     

    对WEB设计进行删除、编辑、查询、复制、刷新和状态控制等功能操作

    在菜单管理里面添加这个web表单功能菜单,然后就可以直接看到自己设计的表单页面

    展开全文
  • LowCode 是高效、高性能的...在我们之前实现的 h5-dooring 搭建平台中, 我们采用了网格布局的方式来实现拖拽生成H5页面或者Web app, 其好处就是灵活简单, 用户基本没有任何使用成本, 在前端层也能做一定的横向扩展...

    2e8d93d1f2c1a207f5b41c53338b88dc.png

    LowCode 是高效、高性能的拖拽式低代码开发平台. 也是笔者最近一直在研究的方向, 对于可视化搭建平台的实现方案笔者之前写过很多文章, 这里带大家探索一个新方向——基于自然流布局的可视化搭建平台.

    在我们之前实现的 h5-dooring 搭建平台中, 我们采用了网格布局的方式来实现拖拽生成H5页面或者Web app, 其好处就是灵活简单, 用户基本没有任何使用成本, 在前端层也能做一定的横向扩展, 但是存在几个缺陷:

    • 实现嵌套组件比较复杂
    • 没有层的概念

    虽然通过改造可以实现层和嵌套的问题, 最近也在努力往这个方向实现(虽然和设计初衷相驳, dooring的初衷是抹去层和嵌套的概念, 让搭建扁平化和智能化, 所以没有采用自由布局的方案)

    7c29d27df30e8f6b38145b3b37f4d458.png

    但是如果一定要实现嵌套和层的功能, 有没有另一种更简单的方案呢? 笔者目前想到了两种解决方案:

    • 将智能布局改为自由布局, 即可以采用类似 react-resizable 的这种方案
    • 基于自然流来实现, 也就是抹去定位的概念, 完全基于元素在文档的顺序, 层级和定位的选择权交给用户

    因为第一种方案笔者在dooring的早期已经实现过一版, 最后弃用采用了网格布局, 所以说我们来探讨一下第二种方案的实现.

    基于自然流布局实现拖拽生成页面

    自然流布局的好处就是我们不用通过定位的方式来限定元素的位置等信息, 而是以html文档流的方式来布局元素, 并且用户可以灵活的设置元素的层级(layer)和偏移(transform), 接下来我们来看看简单的实现效果.

    1. demo效果

    18c1520f988a7566ccbaa8ddad70d827.png
    H5建站, 页面制作

    85ac63bc2386aa4c0a941d861d92f0f1.png
    H5制作, H5编辑器

    由上图的demo我们可以发现组件在画布中的布局完全是默认的文档流的方式, 所以我们有更灵活的布局实现.

    2. 实现思路

    具体实现思路主要分以下几个部分:

    • 组件区拖拽至画布
    • 画布区拖拽
    • 组件编辑器和更新机制

    第一点和第三点我们在 H5-dooring中已经实现了, 感兴趣的可以看我之前的文章, 我们这里重点来实现画布区拖拽, 也是比较核心的环节.

    2.1 H5拖放api基本介绍

    拖放(Dragdrop)是 HTML5 标准的组成部分, 早已被大多数浏览器支持. 我们目前使用的拖放插件基本上基于 H5 拖放 API 来实现的, 其实实现第一点组件区拖拽至画布我们完全可以用原生来实现, 这里笔者简单来介绍以下.

    首先我们来看看一个完整的拖放过程:

    1. 首先要设置一个元素可拖放(比如<img draggable="true" />)
    2. 设计拖动的时候会发生什么(需要用到ondragstart事件 和 setData(你要传递的数据))
    3. 放到何处,也就是目标容器(通常在目标容器上绑定ondragoverondrop事件)

    有了以上3个步骤, 我们就能实现第一点的需求, 笔者写个简单demo来给大家参考一下:

    <script type="text/javascript">
      function allowDrop(ev) {
        ev.preventDefault();
      }
    
      function drag(ev){
        ev.dataTransfer.setData("Text",ev.target.id);
      }
    
      function drop(ev){
        ev.preventDefault();
        let data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
    
    <div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img id="drag" src="dooring.png" draggable="true" ondragstart="drag(event)" width="336" height="69" />

    也就是对应的我们的组件拖放区域, 如下图所示:

    b3d943f53a57099a50f0139adeb0806e.png

    2.2 画布区拖拽布局实现

    因为之前的版本我们采用了网格布局来实现智能拖拽, 由于内部定位机制采用的是绝对定位(absolute), 所以是实现层级和固定组件比较困难, 如果组件的呈现完全脱离了定位的束缚, 我们就可以实现以上的困境了. 所以这里我们调研了一种方案——拖拽排序机制.

    自然流布局的规律就是默认情况下html页面是基于dom出现的顺序来排列的, 也就是我们说的堆叠.

    021c64de644c16a9dac4898284d9f55a.png
    H5制作

    我们可以遵循这样的设计, 通过排序的方式改变组件的位置从而实现自然流布局的页面搭建.

    那么我们再回到上面说的布局问题, 比如说要想实现栅格化布局, 我们只需要定义一个flex容器, 将组件拖拽到容器里就好了, 这样也就解决了嵌套的问题. 同时我们还可以设计嵌套容器的栅格数, 这样就可以实现类似如下的效果:

    e48fc9a08832aa8b2982a04e9829fc98.png
    H5编辑器

    拖拽排序的库我们可以使用: sortable Vue.Draggable * react-dnd

    还有很多优秀的库, 这里就不一一举例了.

    3. 如何实现层级和嵌套

    其实在上面的实现思路中我们已经解决了嵌套的问题了, 即提供拖放的容器组件, 利用笔者在上文中介绍的拖放api即可实现. 对于组件层级来说, 因为我们采用的是自然流布局, 所以我们可以轻松的设置元素的定位属性, 比如我们提供一个定位的设置:

    5467cd0908791e219b196e21d3faa0aa.png
    拖拽搭建HTML5

    关于如何设计一个动态的属性编辑器, 笔者之前文章中也就详细的介绍, 大家可以参考:

    • 表单编辑器实现(FormEditor)

    以上就是自然流布局的基本实现方式, 后续笔者也会在github上同步我们最新的成果.

    H5-Dooring编辑器wiki: https://github.com/MrXujiang/h5-Dooring/wiki

    最后

    觉得有用 ?喜欢就收藏,顺便点个吧,你的支持是我最大的鼓励!微信搜 “趣谈前端”,发现更多有趣的H5游戏, webpack,node,gulp,css3,javascript,nodeJS,canvas数据可视化等前端知识和实战.
    展开全文
  • 点击button,按ctrl,然后拖拽到controller里面即可生成对应的点击事件在controller里面,之后做一系列编程,和winform这样的拖拽型的ui项目是一样,然后添加webview,在里面配置网址写web页面。 转载于:...
  • 这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好...兼容 React-Native 的 web 组件可以让它生成 android 和 ios 原生页面 拥有 Gae...
  • 如果这个 web 版的报表工具指的是现在的自助报表,也就是 BI、多维分析,那它是有意义的, 而且各厂商们都已经做的挺好,可以让业务人员通过简单的拖拽进行各种数据分析,生成自己想要的报表。我们拿一个页面部分...
  • WYSIWYG Web Builder是一款所见即所得的网页生成工具,你可以创建自己的网页,适合新手,无需掌握Html知识即可设计,支持页面组件的拖拽功能,支持HTML4, HTML5, XHTML, CSS3, PHP等网页格式
  • webProject 这个项目是我在学校学习的时候写的一些小demo,很多还有更好的写法,这里就当仅提供一些思路,抛砖引玉吧,欢迎您提出更好的建议共同讨论,谢谢! 图片特效系列 1、模仿网易去音乐实现3D效果图片轮播 2...
  • 活字格是一款企业 Web 应用生成器,使用了类 Excel 的设计界面,只要你会 Excel,通过简单的拖拽操作,就能快速制作出一个 Web 信息管理系统。无需专业软件知识,没有任何技术门槛,轻松实现各行业的数据信息管理,...
  • 如果这个 web 版的报表工具指的是现在的自助报表,也就是 BI、多维分析,那它是有意义的, 而且各厂商们都已经做的挺好,可以让业务人员通过简单的拖拽进行各种数据分析,生成自己想要的报表。 我们拿一个页面部分...
  • JW页面工厂 v1.7.0

    2020-10-19 21:25:46
    JW页面工厂是一个适用于joomla的自由拖拽式建站工具,受到国内众多Joomla用户的信任。JW页面生成器功能性和随时可用性强,无论你是初学者还是专业人士,它都能让你独立建立一个网站! JW页面工厂功能特性 1、充分...
  • 1. 当你的自定义控件实现WebControl或者Control类时候,如果你在重写 CreateChildControls方法来创建控件,那么你在重写Render方法来实现拖拽页面控件自动生成,那么你必须在Render方法中在调用每个控件的...
  • Codiqa,https://codiqa.com 简单试用了一下,强大,太强大了,百度APP...你可以通过简单的拖拽来实现页面的布局,点击TEST查看效果,点击Inspect Code来生成代码。之后简单修改一下,一个移动WEB APP就诞生了。 ...
  • https://hackernoon.com/drafts/ro2832a9.png前言XRN 平台是云音乐音乐内容组产出的一个可视化的搭建页面平台,通过拖拽组件与设置组件,XRN 可以快速生成同时能在 React Native 与 Web 端渲染的页面。不管是 React ...
  • 当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。 如何插入一段漂亮的代码片 去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片. // An highlighted block var foo = 'bar'; ...

空空如也

空空如也

1 2 3 4 5 6
收藏数 106
精华内容 42
关键字:

web页面拖拽生成