CN106250141B - 一种web ui插件的设计方法 - Google Patents

一种web ui插件的设计方法 Download PDF

Info

Publication number
CN106250141B
CN106250141B CN201610607081.0A CN201610607081A CN106250141B CN 106250141 B CN106250141 B CN 106250141B CN 201610607081 A CN201610607081 A CN 201610607081A CN 106250141 B CN106250141 B CN 106250141B
Authority
CN
China
Prior art keywords
plug
interface
function
data
fusion point
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.)
Active
Application number
CN201610607081.0A
Other languages
English (en)
Other versions
CN106250141A (zh
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.)
Sichuan Tianyi Comheart Telecom Co Ltd
Original Assignee
Sichuan Tianyi Comheart Telecom 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 Sichuan Tianyi Comheart Telecom Co Ltd filed Critical Sichuan Tianyi Comheart Telecom Co Ltd
Priority to CN201610607081.0A priority Critical patent/CN106250141B/zh
Publication of CN106250141A publication Critical patent/CN106250141A/zh
Application granted granted Critical
Publication of CN106250141B publication Critical patent/CN106250141B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • 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)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)

Abstract

本发明公开了一种WEB UI插件的设计方法，包括以下步骤：S1.设定UI界面的模拟数据，根据设定的模拟数据生成插件的UI界面，并确定插件的运行机制和属性；S2.插件从服务端提取真实数据，提供给插件的UI界面；S3.确定UI界面中的融合点，在融合点中将UI界面的模拟数据替换为真实数据，实现WEB UI插件的生成。本发明根据设定的模拟数据生成插件的UI界面，并确定插件的运行机制和属性；再提取真实数据，在融合点中将模拟数据替换为真实数据，实现真实数据和UI界面的融合；在生成UI界面时，不需要考虑数据的变化，使得UI界面的生成和真实数据的提取解析可以并行开发再进行融合。

Description

一种WEB UI插件的设计方法
技术领域
本发明涉及一种WEB UI插件的设计方法。
背景技术
最初的html页面仅仅是一个文本排版界面，用来传递文本信息；现今，html页面功能非常强大，已经转化为一种UI界面，可以实现非常复杂的UI操作；使用html、javascript和css技术,甚至可以做一个桌面 Web Browser Desktop，可以具有windows的功能；因此,利用html、javascript和css技术可以生成WEB UI插件。
但是，在WEB UI插件的生成或设计的效率较低，同时现有的WEB UI插件生成技术在不考虑实际数据变换的情况下，不易实现插件UI界面的设计，因此UI界面的生成和真实数据的提取不能并行开发。
发明内容
本发明的目的在于克服现有技术的不足，提供一种WEB UI插件的设计方法。
本发明的目的是通过以下技术方案来实现的：一种WEB UI插件的设计方法，包括以下步骤：
S1.设定UI界面的模拟数据，根据设定的模拟数据生成插件的UI界面，并确定插件的运行机制和属性；
S2.插件从服务端提取真实数据，提供给插件的UI界面；
S3.确定UI界面中的融合点，在融合点中将UI界面的模拟数据替换为真实数据，实现WEB UI插件的生成。
所述的步骤S1包括以下子步骤：
S11.设定UI界面的模拟数据，并根据设定的模拟数据生成插件的UI界面；
S12.设定插件的运行机制，所述的运行机制包括但不限于插件的封装、安装、启动；
S13.设定插件的属性。
所述的步骤S12包括以下子步骤：
将插件的html元素作为资源单独保存为插件js文件；
在UI界面中建立一个容器div，调用fileBrowser函数，将layout赋于容器div的html；
在html元素中加入所述的插件js文件；
步骤S13中设定的插件属性包括但不限于插件的模式属性Viewmode、插件的绝对路径absoulutepath和插件的缓存Cache。
所述的步骤S3包括以下子步骤：
S31.确定UI界面中的融合点；
S32.并将插件中相同的融合点指向同一库函数；
S33.在融合点中将UI界面的模拟数据替换为真实数据，实现WEB UI插件的生成。
所述的步骤S31包括事件查询子步骤、函数嵌套子步骤和接口函数设置子步骤；
所述的事件查询子步骤包括：组织插件中的javascript文件，使用冒泡方法在body元素中监控插件的click事件，根据事件处理函数参数的id号e.target.id区分事件源，根据body的click事件查找和确定插件算法程序与插件UI界面的融合点；
所述的函数嵌套子步骤包括：使用javascript函数嵌套函数的方法，将一个函数的功能细分为子功能，嵌套在父函数之中，根据嵌套函数确定插件算法程序与插件UI界面的融合点；
所述的接口函数设置子步骤包括：为UI界面的数据区提供一个接口函数updatedataview,将接口函数中确定为数据区的唯一融合点。
本发明的有益效果是：（1）本申请根据设定的模拟数据生成插件的UI界面，确定插件的运行机制和属性，再提取真实数据，在融合点中将模拟数据替换为真实数据，实现真实数据和UI界面的融合；进而在生成UI界面时，不需要考虑数据的变化。
（2）本申请中UI界面的生成和真实数据提取解析可以并行开发，再进行融合。
（3）本申请使得UI插件能够应用于各种WEB环境中。
（4）本申请融合过程中通过事件查询、函数嵌套或接口函数设置，能够使得融合点更易确定，提高可WEB UI插件的生成效率。
附图说明
图1为本发明的方法流程图。
图2为本发明实施例中插件UI界面的布局示意图。
具体实施方式
下面结合附图进一步详细描述本发明的技术方案，但本发明的保护范围不局限于以下所述。
如图1所示，一种WEB UI插件的设计方法，包括以下步骤：
S1.设定UI界面的模拟数据，根据设定的模拟数据生成插件的UI界面，并确定插件的运行机制和属性；
S2.插件从服务端提取真实数据，提供给插件的UI界面；
S3.确定UI界面中的融合点，在融合点中将UI界面的模拟数据替换为真实数据，实现WEB UI插件的生成。
所述的步骤S1包括以下子步骤：
S11.设定UI界面的模拟数据，并根据设定的模拟数据生成插件的UI界面；
S12.设定插件的运行机制，所述的运行机制包括但不限于插件的封装、安装、启动；
S13.设定插件的属性。
所述的步骤S12包括以下子步骤：
将插件的html元素作为资源单独保存为插件js文件(pluginhtml.js）；
在UI界面中建立一个容器div，调用fileBrowser函数，将layout赋于容器div的html；
在html元素中加入所述的插件js文件；
步骤S13中设定的插件属性包括但不限于插件的模式属性Viewmode、插件的绝对路径absoulutepath和插件的缓存Cache。
所述的步骤S3包括以下子步骤：
S31.确定UI界面中的融合点；
S32.将插件中相同的融合点指向同一库函数；
S32.在融合点中将UI界面的模拟数据替换为真实数据，实现WEB UI插件的生成。
所述的步骤S31包括事件查询子步骤、函数嵌套子步骤和接口函数设置子步骤；
所述的事件查询子步骤包括：组织插件中的javascript文件，使用冒泡方法在body元素中监控插件的click事件，根据事件处理函数参数的id号e.target.id区分事件源，根据body的click事件查找和确定插件算法程序与插件UI界面的融合点；
所述的函数嵌套子步骤包括：使用javascript函数嵌套函数的方法，将一个函数的功能细分为子功能，嵌套在父函数之中，根据嵌套函数确定插件算法程序与插件UI界面的融合点；
所述的接口函数设置子步骤包括：为UI界面的数据区提供一个接口函数updatedataview,将接口函数中确定为数据区的唯一融合点。
在本申请的实施例中，以文件浏览器插件为例，说明WEB UI插件的生成过程：
在一组模拟数据上，只考虑插件中UI之间的迁徙，不考虑算法；由于插件的UI界面结构复杂，故要为设定一个界面布局，如图2所示：
设定模拟数据，假设模拟数据仅仅包括两个文件夹，在每个文件夹里包含一个图片、音乐、视频、文本、无类型文件，即可根据这些模拟数据生成UI界面，
接着确定插件的运行机制，所述的运行机制包括但不限于插件的封装、安装、启动，具体地：
将插件的html元素作为资源单独保存一个文件；
在UI界面中建立一个容器div，调用fileBrowser函数，将layout赋于容器div的html元素；
在html元素中加入插件的js文件。
基于设定的目录编程，比如打开文件夹功能，由下面这些UI片段组成。
文件浏览器插件主界面，显示第一级目录的内容；插件有一个模式属性Viewmode，用于表示内容的显示方式，例如可通过大图标或者列表模式显示内容；对该模式属性Viewmode进行维护，根据模式属性，可决定以列表方式，还是图标方式显示内容。
点击垂直导航栏的时候，比如视频图标时候，显示shining.wav 和 sun.wav这两个文件，同时根据viewmode值决定显示风格；在数据区显示出文件名称、图标、大小、日期；在数据区双击subdirectory文件夹图标时候，显示出它里面的内容；更新水平导航栏内容。从右键的弹出菜单中，打开subdirectory目录；同时更新水平导航栏的路径。点击水平导航栏中根目录，数据区重新显示根目录的内容，更新absolutepath；与此相似，弹出右键菜单、删除文件夹、创建文件、重命名文件夹，上传文件、下载文件均分解成这一系列的UI片段，进而实现了UI界面的生成。
而实际情况下，插件中的UI界面需要与服务端的数据融合，这就需要从服务端读取真实数据，提供给UI界面，以替换文件浏览器插件中的模拟数据；
融合点是UI代码中的一个位置，插件通过融合点将模拟数据替换为真实数据，就能够实现WEB UI插件的生成，目前融合主要的问题是一个UI功能的融合点非常多；以上述两个文件夹的插件为例，在打开文件过程中，融合点的数量至少为2(大图标，列表) * 4(水平导航栏、垂直导航栏、数据区双击、弹出菜单打开选项) = 8，有些操作还要针对媒体类型(视频、音乐、文本、图片)，所以还要乘4，至少32项；在更加复杂的UI界面中（文件夹更多），融合点的数量甚至能够达到成百上千个。
这会带来非常大的不便，在本申请的实施例中，确定融合点的方式包括事件查询子步骤、函数嵌套子步骤和接口函数设置子步骤；
所述的事件查询子步骤包括：组织插件中的javascript文件，使用冒泡方法在body元素中监控插件的click事件，根据事件处理函数参数的id号e.target.id区分事件源，根据body的click事件查找和确定插件算法程序与插件UI界面的融合点；
所述的函数嵌套子步骤包括：使用javascript函数嵌套函数的方法，将一个函数的功能细分为子功能，嵌套在父函数之中，根据嵌套函数确定插件算法程序与插件UI界面的融合点；
比如，文件打开的函数，因为它要打开各种类型的文件，其实是比较大的一个函数；假设父函数为openMultimediaFile, 将它拆分成四个函数openmusic, openvideo,openphoto, opentext。同时这四个函数可能会调用通用的功能general(), 结构非常清晰，功能独立，便于以后的修改。这些函数都在openmultimeiaFile之内。现在代码编辑器都有函数折叠功能，openMultimediaFile虽然庞大，但只要按下减号，所有的代码行都折成了一行，不会影响我们阅读文件其它部分，也方便于融合点的确定。
所述的接口函数设置子步骤包括：为UI界面的数据区提供一个接口函数updatedataview,将接口函数中确定为数据区的唯一融合点；具体地，提供一个接口函数将数据转为<ul>形式。为了加快速度，算法还要缓存服务器端传过来的文件树；算法使用到的数据是通过ajax从服务端得到。
利用Datamapping函数，当向服务端发出获取文件夹内容的ajax请求后，服务端将返回xml字符串，其中列出了一个文件夹下第一级的所有的文件，首先将xml字符串，再解析成xml对象，然后再将它解析成html元素，根据viewmode模式显示为列表或者大图标即可，因此，这样处理后数据区中的融合点唯一；最后再根据确定的融合点将模拟数据替换为真实数据即可实现WEB UI插件的生成。

Claims (3)

1.一种WEB UI插件的设计方法，其特征在于：包括以下步骤：
S1.设定UI界面的模拟数据，根据设定的模拟数据生成插件的UI界面，并确定插件的运行机制和属性；
S2.插件从服务端提取真实数据，提供给插件的UI界面；
S3.确定UI界面中的融合点，在融合点中将UI界面的模拟数据替换为真实数据，实现WEB UI插件的生成；
所述的步骤S1包括以下子步骤：
S11.设定UI界面的模拟数据，并根据设定的模拟数据生成插件的UI界面；
S12.设定插件的运行机制，所述的运行机制包括插件的封装、安装和启动；
S13.设定插件的属性；
所述的步骤S3包括以下子步骤：
S31.通过融合算法确定UI界面中的融合点；
S32.将插件中相同的融合点指向同一库函数；
S33.在融合点中将UI界面的模拟数据替换为真实数据，实现WEB UI插件的生成；
所述的步骤S31包括事件查询子步骤、函数嵌套子步骤和接口函数设置子步骤；
所述的事件查询子步骤包括：组织插件中的javascript文件，使用冒泡方法在body元素中监控元素的click事件，根据事件处理函数参数的id号e.target.id区分事件源，根据body的click事件查找和确定插件算法程序与插件UI界面的融合点；
所述的函数嵌套子步骤包括：使用javascript函数嵌套函数的方法，将一个函数的功能细分为子功能，嵌套在父函数之中，根据嵌套函数确定插件算法程序与插件UI界面的融合点；
所述的接口函数设置子步骤包括：为UI界面的数据区提供一个接口函数updatedataview,将接口函数中确定为数据区的唯一融合点，利用Datamapping函数，当向服务端发出获取文件夹内容的ajax请求后，服务端将返回xml字符串，其中列出了一个文件夹下第一级的所有的文件，首先将xml字符串，再解析成xml对象，然后再将它解析成html元素，根据viewmode模式显示为列表或者大图标即可。
2.根据权利要求1所述的一种WEB UI插件的设计方法，其特征在于：所述的步骤S12包括以下子步骤：
将插件的html元素作为资源单独保存为插件js文件；
在UI界面中建立一个容器div，调用fileBrowser函数，将layout赋于容器div的html；
在html元素中加入所述的插件js文件。
3.根据权利要求1所述的一种WEB UI插件的设计方法，其特征在于：步骤S13中设定的插件属性包括插件的模式属性Viewmode、插件的绝对路径absoulutepath和插件的缓存Cache。
CN201610607081.0A 2016-07-29 2016-07-29 一种web ui插件的设计方法 Active CN106250141B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610607081.0A CN106250141B (zh) 2016-07-29 2016-07-29 一种web ui插件的设计方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610607081.0A CN106250141B (zh) 2016-07-29 2016-07-29 一种web ui插件的设计方法

Publications (2)

Publication Number Publication Date
CN106250141A CN106250141A (zh) 2016-12-21
CN106250141B true CN106250141B (zh) 2021-12-10

Family

ID=57603901

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610607081.0A Active CN106250141B (zh) 2016-07-29 2016-07-29 一种web ui插件的设计方法

Country Status (1)

Country Link
CN (1) CN106250141B (zh)

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101593207A (zh) * 2009-07-06 2009-12-02 孟智平 一种构造和生成网页的方法及系统
CN102693238A (zh) * 2011-03-23 2012-09-26 青岛海信电器股份有限公司 Widget应用方法、系统及多媒体终端
CN103838575A (zh) * 2014-02-20 2014-06-04 浪潮集团山东通用软件有限公司 一种基于extjs框架的插件式页面定制实现方法
CN104102485A (zh) * 2014-06-26 2014-10-15 湖北安标信息技术有限公司 一种基于Html的模块封装加载方法
CN104714989A (zh) * 2013-12-12 2015-06-17 南宁市磁汇科技有限公司 在浏览器中动态存取和可视化编辑web页面的方法
CN105068815A (zh) * 2015-08-24 2015-11-18 用友网络科技股份有限公司 页面编辑器交互装置和方法
CN105138448A (zh) * 2014-06-05 2015-12-09 北京畅游天下网络技术有限公司 一种在前端测试页面的方法和装置

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101593207A (zh) * 2009-07-06 2009-12-02 孟智平 一种构造和生成网页的方法及系统
CN102693238A (zh) * 2011-03-23 2012-09-26 青岛海信电器股份有限公司 Widget应用方法、系统及多媒体终端
CN104714989A (zh) * 2013-12-12 2015-06-17 南宁市磁汇科技有限公司 在浏览器中动态存取和可视化编辑web页面的方法
CN103838575A (zh) * 2014-02-20 2014-06-04 浪潮集团山东通用软件有限公司 一种基于extjs框架的插件式页面定制实现方法
CN105138448A (zh) * 2014-06-05 2015-12-09 北京畅游天下网络技术有限公司 一种在前端测试页面的方法和装置
CN104102485A (zh) * 2014-06-26 2014-10-15 湖北安标信息技术有限公司 一种基于Html的模块封装加载方法
CN105068815A (zh) * 2015-08-24 2015-11-18 用友网络科技股份有限公司 页面编辑器交互装置和方法

Also Published As

Publication number Publication date
CN106250141A (zh) 2016-12-21

Similar Documents

Publication Publication Date Title
US11675485B2 (en) Systems and methods for providing a tagging interface for external content
US8194075B2 (en) Method and system for generating and displaying an interactive dynamic list view of multiply connected objects
KR101120301B1 (ko) 지속 저장 포탈
US9740369B2 (en) Systems and methods for providing a tagging interface for external content
US8762834B2 (en) User interface for defining a text file transformation
KR101557296B1 (ko) 사용자-정의가능 속성을 갖는 프레젠테이션의 섹션
US8510647B2 (en) Computer programming and markup language source code visualization tool
US6924827B1 (en) Method and system for allowing a user to perform electronic data gathering using foldable windows
US20210149842A1 (en) System and method for display of document comparisons on a remote device
US20130262968A1 (en) Apparatus and method for efficiently reviewing patent documents
CN103034517A (zh) 浏览器控制工具加载方法和装置
KR101951719B1 (ko) 그래픽 인터페이스 기반으로 이벤트 동작을 프로그래밍 하는 웹 레포팅 디자인 시스템
US10002117B1 (en) Translating annotation tags into suggested markup
US11334643B2 (en) Contextual editing in a page rendering system
US11314757B2 (en) Search results modulator
CN115309298B (zh) 基于富文本编辑器的文本结构化方法及装置、介质及设备
US20110023014A1 (en) Method and apparatus for modifying an executable application using in-memory object representation
CN103955475A (zh) 一种网页标签信息的显示方法、装置和浏览器
US11829575B1 (en) Workflow assembly tool and workflow model
CN114003843A (zh) 一种页面生成方法、装置、设备及存储介质
US20190250999A1 (en) Method and device for storing and restoring a navigation context
CN106250141B (zh) 一种web ui插件的设计方法
CN113220381A (zh) 一种点击数据展示方法和装置
US9342530B2 (en) Method for skipping empty folders when navigating a file system
US20100138735A1 (en) Document processing device

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant