CN106020794A - 一种复杂页面门户页面布局方法 - Google Patents
一种复杂页面门户页面布局方法 Download PDFInfo
- Publication number
- CN106020794A CN106020794A CN201610304461.7A CN201610304461A CN106020794A CN 106020794 A CN106020794 A CN 106020794A CN 201610304461 A CN201610304461 A CN 201610304461A CN 106020794 A CN106020794 A CN 106020794A
- Authority
- CN
- China
- Prior art keywords
- page
- widget
- layout
- information
- portal
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 31
- 238000013461 design Methods 0.000 claims abstract description 25
- 238000009877 rendering Methods 0.000 claims abstract description 16
- 238000007792 addition Methods 0.000 claims description 3
- 238000012217 deletion Methods 0.000 claims description 3
- 230000037430 deletion Effects 0.000 claims description 3
- 238000012938 design process Methods 0.000 claims description 3
- 238000005194 fractionation Methods 0.000 claims description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000010276 construction Methods 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 238000004891 communication Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000008520 organization Effects 0.000 description 1
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/34—Graphical or visual programming
-
- 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/33—Intelligent editors
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种复杂页面门户页面布局方法，其实现过程为：通过拖拽的方式设计表格布局，并对表格进行合并行、合并列的操作，从而实现复杂页面布局的页面设计。该一种复杂页面门户页面布局方法与现有技术相比，很好的解决了传统列式布局无法完成复杂页面布局的需求；通过使用JSON数组格式的数据，存储门户页面的布局信息，使得保存门户页面布局时，极大地减少了关系数据库的存储记录条数，一定程度上压缩了存储空间；采用分层渲染的方式加快了页面的渲染速度，提高了资源的利用效率，实用性强，适用范围广泛，易于推广。
Description
技术领域
本发明涉及web应用技术领域，具体地说是一种实用性强、复杂页面门户页面布局方法。
背景技术
无论是企业还是政府部门在做信息化建设时，缺乏统一规划、统一IT架构和技术架构、标准化，再加上采用分阶段逐步建设的过程，导致建设的应用系统彼此孤立，标准不一，资源难以共享，不能互联互通，在资源重复建设等问题，这种“烟囱”式的管理模式使建设的多应用系统不能够有机的整合，形成“信息孤岛”，造成流程、信息的交换隔阂。
门户作为一个整合资源的应用框架，在企业信息化建设中日益受到重视，它将各种应用系统、数据资源和互联网资源集中到一个信息管理平台之上，并以统一的用户界面提供给用户，是企业快速的建立企业对客户、企业对内部员工和企业对企业的信息通道，使企业能够释放存储在企业内部和外部的各种信息。
随着Web 2.0技术的深入普及，以及基于Portlet规范的“重量级”门户日显得力不从心，基于Widget规范的“轻量级”门户观念深入人心，带来了一种全新的用户体验。随着互联网、移动互联网等前端新技术的快速发展，云计算、大数据等云技术的深入应用，以及项目需求的不断变化，简单列式布局已经越来越不能满足项目要求。
基于上述技术，现提供一种复杂页面门户页面布局方法，利用该方法可以实现跨行跨列的复杂页面布局。
发明内容
本发明的技术任务是针对以上不足之处，提供一种实用性强、复杂页面门户页面布局方法。
一种复杂页面门户页面布局方法，其实现过程为：通过拖拽的方式设计表格布局，并对表格进行合并行、合并列的操作，从而实现复杂页面布局的页面设计。
所述表格布局方式通过Widget拖拽实现，具体为：
步骤一、首先提供Widget注册页面给门户设计人员；
步骤二、门户设计人员将Widget拖拽到内容区并开始设计，通过对表格行列的合并、拆分、增删操作，实现页面上跨行、跨列的布局，进而设计出符合项目需求的复杂页面；
步骤三、设计结束后，为该页面设置应用范围，即页面查看权限，将相应页面布局信息保存在数据库中，同时输出只包含布局表格的html文件到应用服务器指定目录下，便于运行时访问；
步骤四、用户访问相关门户，相关数据信息从数据库中推送到前台并展示，完成设计过程。
当门户设计人员设计，使用已经注册的Widget，将Widget拖拽到内容区时，只显示Widget布局占位信息及元数据信息，并通过预览的方式查看最终渲染的页面及Widget。
所述布局占位信息是指高度及宽度信息，元数据信息是指Widget名称、作者及描述信息。
设计结束后，使用二维JSON数组存储页面布局信息，使用Jsoup解析布局页面大字段字符串，提取HTML元素，计算组装出包含Widget行列信息的二维JSON数组，并保存到数据库中。
二维JSON数组中第一维代表整个门户页面，第二维代表Widget，数组中包含三个元素：分别表示Widget的行号、列号、ID。
当用户访问门户时，通过运行门户引擎查询，该门户引擎展示以下信息：该用户有权限看到的页面信息；该页面下包含的Widget信息。
当包含门户引擎将上述展示信息推送到前台后，具体为：通过页面信息请求应用服务器上的页面布局文件，通过页面Widget信息确定页面上每个Widget的位置，并加载相应的Widget模版，通过Widget信息请求每个Widget文件，从而使用分层渲染的方式展现页面。
使用分层渲染的方式展现页面，首先根据页面的ID请求已经保存在本地的html文件，该文件中只有表格没有Widget，再通过后台接口获取表格中Widget的位置信息，在对应的位置上渲染Widget模板，最后根据Widget的ID请求具体数据，渲染到页面上，最终渲染出用户看到的门户页面。
本发明的一种复杂页面门户页面布局方法，具有以下优点：
该发明的一种复杂页面门户页面布局方法通过拖拽的方式设计表格布局，并对表格进行合并行、合并列等操作，从而实现复杂页面布局页面设计，很好的解决了传统列式布局无法完成复杂页面布局的需求；通过使用JSON数组格式的数据，存储门户页面的布局信息，使得保存门户页面布局时，极大地减少了关系数据库的存储记录条数，一定程度上压缩了存储空间；采用分层渲染的方式加快了页面的渲染速度，提高了资源的利用效率，实用性强，适用范围广泛，易于推广。
具体实施方式
下面结合具体实施例对本发明作进一步说明。
本发明提供一种复杂页面门户页面布局方法，该方法的实现过程为：通过拖拽的方式设计表格布局，并对表格进行合并行、合并列的操作，从而实现复杂页面布局的页面设计。
所述表格布局方式通过Widget拖拽实现，具体为：
步骤一、首先提供Widget注册页面给门户设计人员；
步骤二、门户设计人员将Widget拖拽到内容区并开始设计，通过对表格行列的合并、拆分、增删操作，实现页面上跨行、跨列的布局，进而设计出符合项目需求的复杂页面；
步骤三、门户设计人员设计完毕，需要为该页面设置应用范围，即页面查看权限，可以是BSP的角色、组织机构、用户等；可以保存设计的完整布局页到数据库并使用JSON数组格式保存页面布局信息，同时输出只包含布局表格的html文件到应用服务器指定目录下，便于运行时访问；
步骤四、用户访问相关门户，相关数据信息从数据库中推送到前台并展示，完成设计过程。
当门户设计人员设计，使用已经注册的Widget，将Widget拖拽到内容区时，只显示Widget布局占位信息及元数据信息，并通过预览的方式查看最终渲染的页面及Widget。
所述布局占位信息是指高度及宽度信息，元数据信息是指Widget名称、作者及描述信息。
设计结束后，使用二维JSON数组存储页面布局信息，使用Jsoup解析布局页面大字段字符串，提取HTML元素，计算组装出包含Widget行列信息的二维JSON数组，并保存到数据库中。
二维JSON数组中第一维代表整个门户页面，第二维代表Widget，数组中包含三个元素：分别表示Widget的行号、列号、ID。
当用户访问门户时，通过运行门户引擎查询，该门户引擎展示以下信息：该用户有权限看到的页面信息；该页面下包含的Widget信息。
当包含门户引擎将上述展示信息推送到前台后，具体为：通过页面信息请求应用服务器上的页面布局文件，通过页面Widget信息确定页面上每个Widget的位置，并加载相应的Widget模版，通过Widget信息请求每个Widget文件，从而使用分层渲染的方式展现页面。
使用分层渲染的方式展现页面，首先根据页面的ID请求已经保存在本地的html文件，该文件中只有表格没有Widget，再通过后台接口获取表格中Widget的位置信息，在对应的位置上渲染Widget模板，最后根据Widget的ID请求具体数据，渲染到页面上，最终渲染出用户看到的门户页面。
上述具体实施方式仅是本发明的具体个案，本发明的专利保护范围包括但不限于上述具体实施方式，任何符合本发明的一种复杂页面门户页面布局方法的权利要求书的且任何所属技术领域的普通技术人员对其所做的适当变化或替换，皆应落入本发明的专利保护范围。
Claims (9)
1.一种复杂页面门户页面布局方法，其特征在于，其实现过程为：通过拖拽的方式设计表格布局，并对表格进行合并行、合并列的操作，从而实现复杂页面布局的页面设计。
2.根据权利要求1所述的一种复杂页面门户页面布局方法，其特征在于，所述表格布局方式通过Widget拖拽实现，具体为：
步骤一、首先提供Widget注册页面给门户设计人员；
步骤二、门户设计人员将Widget拖拽到内容区并开始设计，通过对表格行列的合并、拆分、增删操作，实现页面上跨行、跨列的布局，进而设计出符合项目需求的复杂页面；
步骤三、设计结束后，为该页面设置应用范围，即页面查看权限，将相应页面布局信息保存在数据库中，同时输出只包含布局表格的html文件到应用服务器指定目录下，便于运行时访问；
步骤四、用户访问相关门户，相关数据信息从数据库中推送到前台并展示，完成设计过程。
3.根据权利要求2所述的一种复杂页面门户页面布局方法，其特征在于，当门户设计人员设计，使用已经注册的Widget，将Widget拖拽到内容区时，只显示Widget布局占位信息及元数据信息，并通过预览的方式查看最终渲染的页面及Widget。
4.根据权利要求3所述的一种复杂页面门户页面布局方法，其特征在于，所述布局占位信息是指高度及宽度信息，元数据信息是指Widget名称、作者及描述信息。
5.根据权利要求2所述的一种复杂页面门户页面布局方法，其特征在于，设计结束后，使用二维JSON数组存储页面布局信息，使用Jsoup解析布局页面大字段字符串，提取HTML元素，计算组装出包含Widget行列信息的二维JSON数组，并保存到数据库中。
6.根据权利要求5所述的一种复杂页面门户页面布局方法，其特征在于，二维JSON数组中第一维代表整个门户页面，第二维代表Widget，数组中包含三个元素：分别表示Widget的行号、列号、ID。
7.根据权利要求2所述的一种复杂页面门户页面布局方法，其特征在于，当用户访问门户时，通过运行门户引擎查询，该门户引擎展示以下信息：该用户有权限看到的页面信息；该页面下包含的Widget信息。
8.根据权利要求7所述的一种复杂页面门户页面布局方法，其特征在于，当包含门户引擎将上述展示信息推送到前台后，具体为：通过页面信息请求应用服务器上的页面布局文件，通过页面Widget信息确定页面上每个Widget的位置，并加载相应的Widget模版，通过Widget信息请求每个Widget文件，从而使用分层渲染的方式展现页面。
9.根据权利要求8所述的一种复杂页面门户页面布局方法，其特征在于，使用分层渲染的方式展现页面，首先根据页面的ID请求已经保存在本地的html文件，该文件中只有表格没有Widget，再通过后台接口获取表格中Widget的位置信息，在对应的位置上渲染Widget模板，最后根据Widget的ID请求具体数据，渲染到页面上，最终渲染出用户看到的门户页面。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610304461.7A CN106020794A (zh) | 2016-05-10 | 2016-05-10 | 一种复杂页面门户页面布局方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610304461.7A CN106020794A (zh) | 2016-05-10 | 2016-05-10 | 一种复杂页面门户页面布局方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN106020794A true CN106020794A (zh) | 2016-10-12 |
Family
ID=57100149
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610304461.7A Pending CN106020794A (zh) | 2016-05-10 | 2016-05-10 | 一种复杂页面门户页面布局方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106020794A (zh) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106528104A (zh) * | 2016-10-31 | 2017-03-22 | 用友网络科技股份有限公司 | 一种门户布局渲染方法 |
| CN109343848A (zh) * | 2018-09-18 | 2019-02-15 | 西安葡萄城信息技术有限公司 | 一种网页设计方法及系统 |
| CN109408764A (zh) * | 2018-11-28 | 2019-03-01 | 南京赛克蓝德网络科技有限公司 | 页面区域划分方法、装置、计算设备和介质 |
| CN110020325A (zh) * | 2018-08-17 | 2019-07-16 | 深圳壹账通智能科技有限公司 | 页面加载方法、装置、设备及可读存储介质 |
| CN110378683A (zh) * | 2019-07-26 | 2019-10-25 | 山东健康医疗大数据有限公司 | 一种互联网架构下的电商平台提现方法 |
| CN110321504B (zh) * | 2019-06-18 | 2023-09-22 | 平安医疗健康管理股份有限公司 | 一种页面处理方法及装置 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1869980A (zh) * | 2005-10-14 | 2006-11-29 | 华为技术有限公司 | 实现页面灵活布局的装置和方法 |
| US20120144327A1 (en) * | 2010-12-01 | 2012-06-07 | Bizideo Llc | Website file and data structure, website management platform and method of manufacturing customized, managed websites |
| CN102681848A (zh) * | 2012-05-03 | 2012-09-19 | 中兴通讯股份有限公司 | 以微技方式开发及访问网页的方法、装置、终端和系统 |
| CN103605733A (zh) * | 2013-11-20 | 2014-02-26 | 山东浪潮齐鲁软件产业股份有限公司 | 基于json数组的页面布局存储方法 |
| CN103809975A (zh) * | 2014-02-19 | 2014-05-21 | 浪潮软件股份有限公司 | 智能云表单的实现方法 |
| CN104346172A (zh) * | 2014-10-31 | 2015-02-11 | 亚信科技（南京）有限公司 | 一种不规则div动态布局方法 |
| CN105094848A (zh) * | 2015-08-24 | 2015-11-25 | 浪潮软件股份有限公司 | 一种基于模板的轻量级动态门户计算方法 |
-
2016
- 2016-05-10 CN CN201610304461.7A patent/CN106020794A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1869980A (zh) * | 2005-10-14 | 2006-11-29 | 华为技术有限公司 | 实现页面灵活布局的装置和方法 |
| US20120144327A1 (en) * | 2010-12-01 | 2012-06-07 | Bizideo Llc | Website file and data structure, website management platform and method of manufacturing customized, managed websites |
| CN102681848A (zh) * | 2012-05-03 | 2012-09-19 | 中兴通讯股份有限公司 | 以微技方式开发及访问网页的方法、装置、终端和系统 |
| CN103605733A (zh) * | 2013-11-20 | 2014-02-26 | 山东浪潮齐鲁软件产业股份有限公司 | 基于json数组的页面布局存储方法 |
| CN103809975A (zh) * | 2014-02-19 | 2014-05-21 | 浪潮软件股份有限公司 | 智能云表单的实现方法 |
| CN104346172A (zh) * | 2014-10-31 | 2015-02-11 | 亚信科技（南京）有限公司 | 一种不规则div动态布局方法 |
| CN105094848A (zh) * | 2015-08-24 | 2015-11-25 | 浪潮软件股份有限公司 | 一种基于模板的轻量级动态门户计算方法 |
Non-Patent Citations (1)
| Title |
|---|
| YYOSSOM1: "自定义表单拖拽布局功能模块需求书-20130709", 《百度文库》 * |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106528104A (zh) * | 2016-10-31 | 2017-03-22 | 用友网络科技股份有限公司 | 一种门户布局渲染方法 |
| CN110020325A (zh) * | 2018-08-17 | 2019-07-16 | 深圳壹账通智能科技有限公司 | 页面加载方法、装置、设备及可读存储介质 |
| CN110020325B (zh) * | 2018-08-17 | 2023-04-11 | 深圳壹账通智能科技有限公司 | 页面加载方法、装置、设备及可读存储介质 |
| CN109343848A (zh) * | 2018-09-18 | 2019-02-15 | 西安葡萄城信息技术有限公司 | 一种网页设计方法及系统 |
| CN109408764A (zh) * | 2018-11-28 | 2019-03-01 | 南京赛克蓝德网络科技有限公司 | 页面区域划分方法、装置、计算设备和介质 |
| CN109408764B (zh) * | 2018-11-28 | 2021-03-02 | 南京赛克蓝德网络科技有限公司 | 页面区域划分方法、装置、计算设备和介质 |
| CN110321504B (zh) * | 2019-06-18 | 2023-09-22 | 平安医疗健康管理股份有限公司 | 一种页面处理方法及装置 |
| CN110378683A (zh) * | 2019-07-26 | 2019-10-25 | 山东健康医疗大数据有限公司 | 一种互联网架构下的电商平台提现方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106020794A (zh) | 一种复杂页面门户页面布局方法 | |
| CN108647330B (zh) | 一种基于bim模型文件的3d轻量化转换方法 | |
| US9715536B2 (en) | Virtualization method for large-scale distributed heterogeneous data | |
| CN103201997B (zh) | 一种基于Web的文档服务方法和系统 | |
| CN104915450A (zh) | 一种基于HBase的大数据存储与检索方法及系统 | |
| McNelly | Neostructuralism and its class character in the political economy of Bolivia under Evo Morales | |
| Chome | ‘Devolution is only for development’? Decentralization and elite vulnerability on the Kenyan coast | |
| CN101430714A (zh) | 一种基于样式的内容结构化加工方法及系统 | |
| Miao et al. | The trials of China’s technoburbia: the case of the Future Sci-tech City Corridor in Hangzhou | |
| CN103455335A (zh) | 一种多级分类的Web实现方法 | |
| CN102298740A (zh) | 一种业务流程管理支持方法 | |
| CN102193958A (zh) | 基于互联网的空间决策支持系统的实现方法 | |
| CN103605733A (zh) | 基于json数组的页面布局存储方法 | |
| Pannell et al. | Structural change and regional disparities in Xinjiang, China | |
| CN103198143A (zh) | 一种用于虚拟试验的仿真资源数据处理控制系统 | |
| Chen et al. | Research on the intelligent generation of the spatial form of the island city historic district Based on parameterization: Taking Macau Taipa Village as an example | |
| Sungau et al. | On IT enabling of business process reengineering in organizations | |
| Chakravorty | Urban development in the global periphery: The consequences of economic and ideological globalization | |
| Vincent et al. | OpenDig: In-field data recording for archaeology and cultural heritage | |
| CN103226614A (zh) | 一种县市级科技经济管理部门门户网站快速生成方法 | |
| CN115510072A (zh) | 一种基于多租户SaaS应用平台的主数据引擎 | |
| CN106326374A (zh) | 一种从HBase中增量抽取数据的方法及系统 | |
| Warner et al. | Demystifying Chinese management: introduction | |
| CN109033447B (zh) | 一种人脸识别数据可视化系统 | |
| Xiaojun et al. | Is the Chinese ‘entrepreneurial welfare state’an industrial policy in disguise? |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20161012 |