CN110427187A - 一种基于html自定义属性解析的表单可视化布局方法 - Google Patents

一种基于html自定义属性解析的表单可视化布局方法 Download PDF

Info

Publication number
CN110427187A
CN110427187A CN201910698651.5A CN201910698651A CN110427187A CN 110427187 A CN110427187 A CN 110427187A CN 201910698651 A CN201910698651 A CN 201910698651A CN 110427187 A CN110427187 A CN 110427187A
Authority
CN
China
Prior art keywords
parsing
html
interface
custom attributes
visual layout
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201910698651.5A
Other languages
English (en)
Inventor
柏明昌
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shandong Inspur Genersoft Information Technology Co Ltd
Original Assignee
Shandong Inspur Genersoft Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shandong Inspur Genersoft Information Technology Co Ltd filed Critical Shandong Inspur Genersoft Information Technology Co Ltd
Priority to CN201910698651.5A priority Critical patent/CN110427187A/zh
Publication of CN110427187A publication Critical patent/CN110427187A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明特别涉及一种基于HTML自定义属性解析的表单可视化布局方法。该基于HTML自定义属性解析的表单可视化布局方法，支持拖拽的可视化表单布局界面，动态创建自定义标签属性；标签属性实时解析程序将标签解析成HTML文件，CSS文件和JavaScript文件，实现界面预览，并将解析的CSS文件和JavaScript文件保存；采用标准组件接口，支持组件扩充，便于与已有系统集成。该基于HTML自定义属性解析的表单可视化布局方法，实现了对前端技术的封装应用，通过拖拽的方式即可形成标准的界面原型，并且生成的代码符合编码规范，降低了对开发人员的技术要求，使后端开发人员在不具备丰富的前端开发技术的情况下也可以快速开发出界面。

Description

一种基于HTML自定义属性解析的表单可视化布局方法
技术领域
本发明涉及web界面可视化布局技术领域，特别涉及一种基于HTML自定义属性解析的表单可视化布局方法。
背景技术
在业务系统开发过程中不通过业务功能需要不同的展示界面，实现前端界面开发需要专业的前端开发人员，前端开发人员需要专业的前段技术能力。
当前，web界面布局方法，包括以下几种：
1、frameset(框架)布局；
2、table布局；
3、div布局。
上述几种web界面布局方法的特点如下：
1：frameset布局：一般用于后台管理系统布局，适用于固定结构类布局，h5不推荐frameset布局。
2：table布局：旧的布局方式，table更适合做数据演示，它有三个缺点：
(1)只有把table里面的所有内容都加载完了，才能显示出效果，加载缓慢；
(2)它属于表格形式，不利于SEO(搜索引擎)优化；
(3)对于页面来说，从语义上看是不正确的。
3：div布局：是一种去语义化的布局工具，即div布局不会标明其中包含的内容元素类别，也就无法为浏览器和搜索引擎提供进一步的指导，但相对于frameset(框架)布局和table布局来说，div布局比较灵活，更具有优越性。
基于上述情况，本发明提出了一种基于HTML自定义属性解析的表单可视化布局方法。
发明内容
本发明为了弥补现有技术的缺陷，提供了一种简单高效的基于HTML自定义属性解析的表单可视化布局方法。
本发明是通过如下技术方案实现的：
一种基于HTML自定义属性解析的表单可视化布局方法，其特征在于，包括以下部分：
第一，支持拖拽的可视化表单布局界面，动态创建自定义标签属性；
第二，标签属性实时解析程序将标签解析成HTML文件，CSS文件和JavaScript文件，实现界面预览，并将解析的CSS文件和JavaScript文件保存；
第三，采用标准组件接口，支持组件扩充，便于与已有系统集成。
所述第一部分中，通过对Jquery中Draggable库进一步封装，实现界面控件的可视化拖拽。
所述第一部分中，移动监听组件利用mousedown函数和Drag函数监听鼠标移动位置和鼠标所处的界面元素信息，实现对推拽控件位置、大小和父元素信息的实时监听。
所述第一部分中，利用HTML标签创建程序，对控件生成自定义标签，实现控件位置的记录。
所述第一部分中，拖拽组件到面板上，并监听鼠标拖动的位置，将相对上边界与左边界距离信息，所属父级别容器信息，设置的组件大小信息和组件类型信息动态生成HTML属性标签。
所述第二部分中，包括以下步骤：
(4)提供属性标签全局对象，并支持标签属性的自定义扩充；
(5)结合移动监听组件对拖拽控制函数的扩展，在控件拖动过程中实时获取拖动控件属性，并给拖动控件属性赋值；
(6)通过解析标签属性内容与属性值，将标签属性解析为对应的HTML函数，CSS函数和JavaScript函数。
所述第二部分中，通过开发的HTML标签创建引擎，实现CSS标签与JavaScript代码标签自动生成通过HTML标签解析程序实时解析创建的标签，实现界面控件的动态布局；布局完成后，通过源码解析与导出功能，根据标签自动解析成CSS文件与JavaScript文件，实现web界面代码的自动生成。
所述第三步中，按标准组件接口规范实现自定义控件开发，通过开发组件扩充装置功能实现对传统表单和图表控件多种表单的支持；同时，通过扩展拖动监听函数和属性库，实现自定义属性的生成与解析。
本发明的有益效果是：该基于HTML自定义属性解析的表单可视化布局方法，实现了对前端技术的封装应用，通过拖拽的方式即可形成标准的界面原型，并且生成的代码符合编码规范，降低了对开发人员的技术要求，使后端开发人员在不具备丰富的前端开发技术的情况下也可以快速开发出界面。
附图说明
附图1为本发明基于HTML自定义属性解析的表单可视化布局方法示意图。
具体实施方式
为了使本技术领域的人员更好的理解本发明中的技术方案，下面将结合本发明实施例，对本发明实施例中的技术方案进行清楚，完整的描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。
该基于HTML自定义属性解析的表单可视化布局方法，包括以下部分：
第一，支持拖拽的可视化表单布局界面，动态创建自定义标签属性；
第二，标签属性实时解析程序将标签解析成HTML文件，CSS文件和JavaScript文件，实现界面预览，并将解析的CSS文件和JavaScript文件保存；
第三，采用标准组件接口，支持组件扩充，便于与已有系统集成。
所述第一部分中，通过对Jquery中Draggable库进一步封装，实现界面控件的可视化拖拽。
所述第一部分中，移动监听组件利用mousedown函数和Drag函数监听鼠标移动位置和鼠标所处的界面元素信息，实现对推拽控件位置、大小和父元素信息的实时监听。
所述第一部分中，利用HTML标签创建程序，对控件生成自定义标签，实现控件位置的记录。
例如，通过动态添加w、h、x、y属性标签，实现对控件大小、位置信息的记录。
所述第一部分中，拖拽组件到面板上，并监听鼠标拖动的位置，将相对上边界与左边界距离信息，所属父级别容器信息，设置的组件大小信息和组件类型信息动态生成HTML属性标签。
所述第二部分中，包括以下步骤：
(7)提供属性标签全局对象，并支持标签属性的自定义扩充；
(8)结合移动监听组件对拖拽控制函数的扩展，在控件拖动过程中实时获取拖动控件属性，并给拖动控件属性赋值；
(9)通过解析标签属性内容与属性值，将标签属性解析为对应的HTML函数，CSS函数和JavaScript函数。
所述第二部分中，通过开发的HTML标签创建引擎，实现CSS标签与JavaScript代码标签自动生成通过HTML标签解析程序实时解析创建的标签，实现界面控件的动态布局；布局完成后，通过源码解析与导出功能，根据标签自动解析成CSS文件与JavaScript文件，实现web界面代码的自动生成。
所述第三步中，按标准组件接口规范实现自定义控件开发，通过开发组件扩充装置功能实现对传统表单和图表控件多种表单的支持；同时，通过扩展拖动监听函数和属性库，实现自定义属性的生成与解析。
实施例
1、控件移动、大小监听函数
2、标签解析与生成文件函数
与现有技术相比，该基于HTML自定义属性解析的表单可视化布局方法，具有以下特点：
1、实现了对前端技术的封装应用，通过拖拽的方式即可形成标准的界面原型；
2、生成的代码符合编码规范，降低了对开发人员的技术要求，使后端开发人员在不具备丰富的前端开发技术的情况下也可以快速开发出界面。
3、所生成的代码符合前端布局规范要求，不破换原始代码结构，支持代码的二次修改。
4、该方法为前端实现，可应用于各种WEB应用程序，实现界面快速布局；同时采用标准组件接口，可方便的与已有信息系统集成。
以上对本发明实例中的一种基于HTML自定义属性解析的表单可视化布局方法进行了详细的介绍。本部分采用具体实例对发明的原理及实施方式进行了阐述，以上实例仅用于帮助理解本发明的核心思想，在不脱离本发明原理的情况下，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

Claims (8)

1.一种基于HTML自定义属性解析的表单可视化布局方法，其特征在于，包括以下部分：
第一，支持拖拽的可视化表单布局界面，动态创建自定义标签属性；
第二，标签属性实时解析程序将标签解析成HTML文件，CSS文件和JavaScript文件，实现界面预览，并将解析的CSS文件和JavaScript文件保存；
第三，采用标准组件接口，支持组件扩充，便于与已有系统集成。
2.根据权利要求1所述的基于HTML自定义属性解析的表单可视化布局方法，其特征在于：所述第一部分中，通过对Jquery中Draggable库进一步封装，实现界面控件的可视化拖拽。
3.根据权利要求1所述的基于HTML自定义属性解析的表单可视化布局方法，其特征在于：所述第一部分中，移动监听组件利用mousedown函数和Drag函数监听鼠标移动位置和鼠标所处的界面元素信息，实现对推拽控件位置、大小和父元素信息的实时监听。
4.根据权利要求1所述的基于HTML自定义属性解析的表单可视化布局方法，其特征在于：所述第一部分中，利用HTML标签创建程序，对控件生成自定义标签，实现控件位置的记录。
5.根据权利要求2、3或4所述的基于HTML自定义属性解析的表单可视化布局方法，其特征在于：所述第一部分中，拖拽组件到面板上，并监听鼠标拖动的位置，将相对上边界与左边界距离信息，所属父级别容器信息，设置的组件大小信息和组件类型信息动态生成HTML属性标签。
6.根据权利要求5所述的基于HTML自定义属性解析的表单可视化布局方法，其特征在于：所述第二部分中，包括以下步骤：
(1)提供属性标签全局对象，并支持标签属性的自定义扩充；
(2)结合移动监听组件对拖拽控制函数的扩展，在控件拖动过程中实时获取拖动控件属性，并给拖动控件属性赋值；
(3)通过解析标签属性内容与属性值，将标签属性解析为对应的HTML函数，CSS函数和JavaScript函数。
7.根据权利要求6所述的基于HTML自定义属性解析的表单可视化布局方法，其特征在于：所述第二部分中，通过开发的HTML标签创建引擎，实现CSS标签与JavaScript代码标签自动生成通过HTML标签解析程序实时解析创建的标签，实现界面控件的动态布局；布局完成后，通过源码解析与导出功能，根据标签自动解析成CSS文件与JavaScript文件，实现web界面代码的自动生成。
8.根据权利要求1所述的基于HTML自定义属性解析的表单可视化布局方法，其特征在于：所述第三步中，按标准组件接口规范实现自定义控件开发，通过开发组件扩充装置功能实现对传统表单和图表控件多种表单的支持；同时，通过扩展拖动监听函数和属性库，实现自定义属性的生成与解析。
CN201910698651.5A 2019-07-31 2019-07-31 一种基于html自定义属性解析的表单可视化布局方法 Pending CN110427187A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910698651.5A CN110427187A (zh) 2019-07-31 2019-07-31 一种基于html自定义属性解析的表单可视化布局方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910698651.5A CN110427187A (zh) 2019-07-31 2019-07-31 一种基于html自定义属性解析的表单可视化布局方法

Publications (1)

Publication Number Publication Date
CN110427187A true CN110427187A (zh) 2019-11-08

Family

ID=68411575

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910698651.5A Pending CN110427187A (zh) 2019-07-31 2019-07-31 一种基于html自定义属性解析的表单可视化布局方法

Country Status (1)

Country Link
CN (1) CN110427187A (zh)

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109857388A (zh) * 2019-01-10 2019-06-07 北京城市网邻信息技术有限公司 代码生成方法、装置、服务器及计算机可读介质
CN111221523A (zh) * 2019-12-24 2020-06-02 方正株式(武汉)科技开发有限公司 Web页面联动控件的优化制作方法及系统、服务器及介质
CN112130943A (zh) * 2020-09-09 2020-12-25 中盈优创资讯科技有限公司 一种自定义可视化布局设计的方法
CN113094042A (zh) * 2021-04-29 2021-07-09 国电南瑞科技股份有限公司 一种基于浏览器的电力自动化系统自定义组件的实现与解析方法
CN113268412A (zh) * 2021-04-30 2021-08-17 摩尔元数（厦门）科技有限公司 Web系统测试用例录制的控件解析方法、装置、设备和介质
CN113297825A (zh) * 2021-07-23 2021-08-24 苏州恒力智能科技有限公司 动态可视化的表单应用设计系统和计算机可读存储介质
CN114020247A (zh) * 2021-11-15 2022-02-08 四川长虹电器股份有限公司 一种video标签自定义UI样式的方法

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101727327A (zh) * 2010-02-01 2010-06-09 山东浪潮齐鲁软件产业股份有限公司 一种基于gef技术可视化jsp界面的开发方法
CN102707945A (zh) * 2012-04-11 2012-10-03 佳都新太科技股份有限公司 一种Eclipse基于布局模版的表单设计器的实现方法
CN105302545A (zh) * 2015-09-02 2016-02-03 湖南三一智能控制设备有限公司 一种组态软件的自定义控件开发方法及装置
CN108549533A (zh) * 2018-04-11 2018-09-18 上海百事灵多媒体科技有限公司 一种epg页面可视化开发中添加自定义控件的方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101727327A (zh) * 2010-02-01 2010-06-09 山东浪潮齐鲁软件产业股份有限公司 一种基于gef技术可视化jsp界面的开发方法
CN102707945A (zh) * 2012-04-11 2012-10-03 佳都新太科技股份有限公司 一种Eclipse基于布局模版的表单设计器的实现方法
CN105302545A (zh) * 2015-09-02 2016-02-03 湖南三一智能控制设备有限公司 一种组态软件的自定义控件开发方法及装置
CN108549533A (zh) * 2018-04-11 2018-09-18 上海百事灵多媒体科技有限公司 一种epg页面可视化开发中添加自定义控件的方法

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109857388A (zh) * 2019-01-10 2019-06-07 北京城市网邻信息技术有限公司 代码生成方法、装置、服务器及计算机可读介质
CN111221523A (zh) * 2019-12-24 2020-06-02 方正株式(武汉)科技开发有限公司 Web页面联动控件的优化制作方法及系统、服务器及介质
CN112130943A (zh) * 2020-09-09 2020-12-25 中盈优创资讯科技有限公司 一种自定义可视化布局设计的方法
CN113094042A (zh) * 2021-04-29 2021-07-09 国电南瑞科技股份有限公司 一种基于浏览器的电力自动化系统自定义组件的实现与解析方法
CN113094042B (zh) * 2021-04-29 2022-09-13 国电南瑞科技股份有限公司 一种基于浏览器的电力自动化系统自定义组件的实现与解析方法
CN113268412A (zh) * 2021-04-30 2021-08-17 摩尔元数（厦门）科技有限公司 Web系统测试用例录制的控件解析方法、装置、设备和介质
CN113268412B (zh) * 2021-04-30 2022-08-30 摩尔元数(福建)科技有限公司 Web系统测试用例录制的控件解析方法、装置、设备和介质
CN113297825A (zh) * 2021-07-23 2021-08-24 苏州恒力智能科技有限公司 动态可视化的表单应用设计系统和计算机可读存储介质
CN114020247A (zh) * 2021-11-15 2022-02-08 四川长虹电器股份有限公司 一种video标签自定义UI样式的方法

Similar Documents

Publication Publication Date Title
CN110427187A (zh) 一种基于html自定义属性解析的表单可视化布局方法
CN101706821B (zh) 基于标签的移动互联网页面设计系统及方法
US9081769B2 (en) Providing translation assistance in application localization
CN102043626B (zh) extjs组件的封装方法及装置、用户界面的生成方法及系统
CN101937427B (zh) 一种基于浏览器的内容编辑及发布的系统及方法
CN103970750B (zh) 一种生成html网页的方法和装置
CN104239284A (zh) 一种图文自动排版的方法和装置
CN105068815A (zh) 页面编辑器交互装置和方法
US20070256062A1 (en) Computer programming and markup language source code visualization tool
CN115309298B (zh) 基于富文本编辑器的文本结构化方法及装置、介质及设备
US20100162095A1 (en) Data processing apparatus and data processing method
US20100100807A1 (en) Data processing device, and data processing method
JP2005004726A (ja) 電子化サービスマニュアル生成方法、付加データ生成方法、電子化サービスマニュアル生成用プログラム、並びに付加データ生成用プログラム
US20100218083A1 (en) Document processing apparatus and document processing method
KR101709186B1 (ko) 인터랙티브 멀티미디어 전자책 저작 장치 및 방법
US20080256437A1 (en) Document Processing Apparatus and Document Processing Method
WO2006051974A1 (ja) 文書処理装置および文書処理方法
JPWO2007052680A1 (ja) 文書処理装置及び文書処理方法
US20080282143A1 (en) Document Processing Device and Document Processing Method
CN104111823B (zh) 一种在线交互块式编辑方法及编辑器
CN103970763A (zh) 三维图像展示系统及方法
CN115309476A (zh) 一种基于浏览器的ofd文件显示和编辑方法
CN108984608A (zh) 基于文件底版的信息排版和交互系统及方法
CN114997119A (zh) 一种调整阅读效果的富文本编辑方法
KR20140137630A (ko) 위젯 저작 시스템 및 방법

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20191108

RJ01 Rejection of invention patent application after publication