CN108228182A - 一种基于构件化的页面装配及运行方法 - Google Patents

一种基于构件化的页面装配及运行方法 Download PDF

Info

Publication number
CN108228182A
CN108228182A CN201810031256.7A CN201810031256A CN108228182A CN 108228182 A CN108228182 A CN 108228182A CN 201810031256 A CN201810031256 A CN 201810031256A CN 108228182 A CN108228182 A CN 108228182A
Authority
CN
China
Prior art keywords
component
page
assembling
operation method
based development
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
CN201810031256.7A
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.)
CHENGDU SONGXING TECHNOLOGY Co Ltd
Original Assignee
CHENGDU SONGXING 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 CHENGDU SONGXING TECHNOLOGY Co Ltd filed Critical CHENGDU SONGXING TECHNOLOGY Co Ltd
Priority to CN201810031256.7A priority Critical patent/CN108228182A/zh
Publication of CN108228182A publication Critical patent/CN108228182A/zh
Pending legal-status Critical Current

Links

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

本发明公开了一种基于构件化的页面装配及运行方法，装配方法包括以下步骤：将构件的代码封装成对应的构件；将所述构件映射成XML格式的标签；选择所需的标签进行装配，形成页面。页面运行方法，包括以下步骤：载入页面对应的XML配置文件；从所述配置文件的Root结点进行入栈；遍历子结点，将子结点入栈；遍历完成；将入栈的全部构件出栈，同时将构件转化成前台的HTML、JavaScript、CSS代码，输出到浏览器；页面显示完成。本发明大大缩小页面代码的行数，有利于开发成果的重复利用，同时提高了代码编写的自动化程度，提高软件开发效率。

Description

一种基于构件化的页面装配及运行方法
技术领域
本发明涉及软件开发领域，尤其涉及一种基于构件化的页面装配及运行方法。
背景技术
在基于B/S的企业级开发过程中，界面开发因为直接与客户关联，因而倍受关注，是企业级开发过程中非常重要和耗时的环节，而目前基于B/S的界面开发技术主要是围绕着前端技术进行开展，如HTML、JavaScript、CSS等，并且这些代码的编写往往由于企业的业务目标、方向和诉求不同，开发面临着代码多样、关系复杂、代码量大、开发效率低等问题。目前业界针对上述问题也做了一些工作，比如提供前台框架简化前端开发，也有些框架提供后台封装对数据进行保障。但是这些框架往往分散和独立，并不能很好的进行融合，造成前后端的代码混合情况比较严重，增加了开发和维护阶段的工作强度。
为了解决上述问题，本发明提出一种基于构件化的页面装配及运行方法，为企业级的项目提供一种方便的开发方法，可将代码进行提取并封装成构件，放到构件库形成软件资产，下次使用时可方便地进行获取并使用。并能够将构件进行继承和装配，形成新的构件。
发明内容
为了解决上述问题，本发明提出一种基于构件化的页面装配及运行方法。本方法将网页开发进行模板化和构件化，使得代码可以重用，随着构件资产的积累，新的界面将更容易开发，也可大大降低代码量。
具体的，一种基于构件化的页面装配及运行方法，包括以下步骤:
S1，将构件的代码封装成对应的构件；
S2，将所述构件映射成XML格式的标签；
S3，选择所需的标签进行装配，形成页面；
S4，运行所述页面。
作为优选的，S1包含以下子步骤：
S11，定义并创建整个构件体系的抽象类；
S12，将每个页面构件构建为一个对应的构件。
作为优选的，S12中所述的构建，其具体方法为对纵向继承或横向构建。
作为优选的，所述纵向继承的对象既能是S11中的抽象类，也能是S12中已经构建好的构件；在纵向继承中可以定义构件生命周期的事件，包括：构件加载前事件、构件加载事件、构件加载中事件、构件加载后事件；并可在继承时覆盖或扩展父类的该事件的实现方法。
作为优选的，所述的横向构建是使用两个或两个以上的构件构建成另一个新的构件；其主要通过容器及布局进行组装。
作为优选的，S2与S3之间还包括：将S2中所述构件进行分类，并装进构件库中进行管理和维护。
作为优选的，S3中所述装配包括并列装配与嵌套装配，所述并列装配是指同一层级构件的组合；所述嵌套装配是指父子层级构件的组合。
作为优选的实施方案，S4包括以下步骤：
1），载入页面对应的XML配置文件；
2），从所述配置文件的Root结点进行入栈；
3），遍历子结点，将子结点入栈；
4），遍历完成；
5），将入栈的全部构件出栈，同时将构件转化成前台的HTML、JavaScript、CSS代码，输出到浏览器；
6），页面显示完成。
本发明的有益效果在于：将传统的页面开发大篇幅前端界面代码转换成结构化的代码，通过标签的方式进行代码编写，大大缩小页面代码的行数。提出一种构件资产的管理手段，将原来开发一次丢掉一次的现状转换成，开发一次构件库增加一个构件的现状，已经开发好的构件以后可以直接使用。提出一种界面构件的存在形式，可以基于构件进行扩展性开发，对构件库里的构件进行继承和装配，形成新的构件补充构件库。提出一种构件标签化的方法及构件解析引擎，以XML的形式开发构件，通过解析引擎可将构件进行运行和解析。提高自动化程度，提高开发效率。
附图说明
图1是本发明的系统流程框图；
图2是抽象类ATag的定义代码；
图3是三个构件的横向装配定义代码；
图4是构件库的定义代码。
具体实施方式
为了对本发明的技术特征、目的和效果有更加清楚的理解，现对照附图说明本发明的具体实施方式。
具体的，一种基于构件化的页面装配及运行方法，包括以下步骤:
S1，将构件的代码封装成对应的构件；
S2，将所述构件映射成XML格式的标签；
S3，选择所需的标签进行装配，形成页面；
S4，运行所述页面。
作为优选的实施方案，S1包含以下子步骤：
S11，首先定义了整个构件体系的抽象类ATag，该抽象类包含一个名为run的抽象方法。以及一个私有的函数tagStack；代码如附图2所示。
S12，将每个页面构件构建为一个对应的构件。
作为优选的实施方案，S12中所述的构建，其具体方法为对纵向继承或横向构建。
作为优选的实施方案，所述纵向继承的对象既能是S11中的抽象类，比如可以直接继承ATag父类，如：文本输入框TextFieldTag继承ATag；也能是S12中已经构建好的构件，比如如DateFieldTag继承TextFieldTag。在纵向继承中可以定义构件生命周期的事件，包括：
1） beforeApply：构件加载前事件，开发人员在继承时可覆盖或扩展父类的该方法，主要用于在加载前进行环境和数据的初始化工作。
2） apply：构件加载事件，开发人员在继承时可覆盖或扩展父类的该方法，主要用于在构件加载时进行构件的运行及渲染。
3） doApply：构件加载中事件，开发人员在继承时可覆盖或扩展父类的该方法，主要用于在构件加载过程中动态调整构件的运行及渲染。
4） afterApply：构件加载后事件，开发人员在继承时可覆盖或扩展父类的该方法，主要用于在构件加载完成后进行数据操作。
作为优选的实施方案，所述的横向构建是使用两个或两个以上的构件构建成另一个新的构件；其主要通过容器及布局进行组装。如构件库中已经有弹出框、树和表格三种构件，要基于这三种构件做出左侧树、右侧表格的信息选择框，则可将选择框设置为左右布局，将树和表格标签作为选择框的子标签，树通过属性设置申明其放到left，表格同理放到right。即完成三个构件的横向装配。代码如附图3所示。
作为优选的实施方案，S2与S3之间还包括：将S2中所述构件进行分类，并装进构件库中进行管理和维护。构件管理容器也叫构件库，其代码如附图4所示。构件开发完成后，将构件按照类别不同进行分类装进构件库中进行管理和维护。用户开发时从构件库中提取相应构件并对构件进行装配，形成界面对应的XML配置文件。
作为优选的实施方案，S3中所述装配包括并列装配与嵌套装配，所述并列装配是指同一层级构件的组合；所述嵌套装配是指父子层级构件的组合。用户开发时从构件库中提取相应构件并对构件进行装配，形成界面对应的XML配置文件。
作为优选的实施方案，S4包括以下步骤：
1）载入页面对应的XML配置文件；
2）从所述配置文件的Root结点进行入栈；
3）遍历子结点，将子结点入栈；
4）遍历完成；
5）将入栈的全部构件出栈，同时将构件转化成前台的HTML、JavaScript、CSS代码，输出到浏览器；
6）页面显示完成。
在转换过程中，代码进行高度压缩，提高代码安全性及减少网络传输量提高页面响应速度。整个装配及运行框架主要包含界面模板化、复合构件、内置逻辑标签、表达式语言等部分。
需要说明的是，对于前述的各个方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某一些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和单元并不一定是本申请所必须的。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详细描述的部分，可以参见其他实施例的相关描述。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、ROM、RAM等。
以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。

Claims (8)

1.一种基于构件化的页面装配及运行方法，其特征在于，包括以下步骤:
S1，将构件的代码封装成对应的构件；
S2，将所述构件映射成XML格式的标签；
S3，选择所需的标签进行装配，形成页面；
S4，运行所述页面。
2.如权利要求1中所述一种基于构件化的页面装配及运行方法，其特征在于，S1包含以下子步骤：
S11，定义并创建整个构件体系的抽象类；
S12，将每个页面构件构建为一个对应的构件。
3.如权利要求2中所述一种基于构件化的页面装配及运行方法，其特征在于，S12中所述的构建，其具体方法为对纵向继承或横向构建。
4.如权利要求3中所述一种基于构件化的页面装配及运行方法，其特征在于，所述纵向继承的对象既能是S11中的抽象类，也能是S12中已经构建好的构件；在纵向继承中可以定义构件生命周期的事件，包括：构件加载前事件、构件加载事件、构件加载中事件、构件加载后事件；并可在继承时覆盖或扩展父类的该事件的实现方法。
5.如权利要求3中所述一种基于构件化的页面装配及运行方法，其特征在于，所述的横向构建是使用两个或两个以上的构件构建成另一个新的构件；其主要通过容器及布局进行组装。
6.如权利要求1中所述一种基于构件化的页面装配及运行方法，其特征在于，S2与S3之间还包括：将S2中所述构件进行分类，并装进构件库中进行管理和维护。
7.如权利要求1中所述一种基于构件化的页面装配及运行方法，其特征在于，S3中所述装配包括并列装配与嵌套装配，所述并列装配是指同一层级构件的组合；所述嵌套装配是指父子层级构件的组合。
8.如权利要求1中所述一种基于构件化的页面装配及运行方法，其特征在于，S4包括以下步骤：
S41，载入页面对应的XML配置文件；
S42，从所述配置文件的Root结点进行入栈；
S43，遍历子结点，将子结点入栈；
S44，遍历完成；
S45，将入栈的全部构件出栈，同时将构件转化成前台的HTML、JavaScript、CSS代码，输出到浏览器；
S46，页面显示完成。
CN201810031256.7A 2018-01-12 2018-01-12 一种基于构件化的页面装配及运行方法 Pending CN108228182A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810031256.7A CN108228182A (zh) 2018-01-12 2018-01-12 一种基于构件化的页面装配及运行方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810031256.7A CN108228182A (zh) 2018-01-12 2018-01-12 一种基于构件化的页面装配及运行方法

Publications (1)

Publication Number Publication Date
CN108228182A true CN108228182A (zh) 2018-06-29

Family

ID=62641052

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810031256.7A Pending CN108228182A (zh) 2018-01-12 2018-01-12 一种基于构件化的页面装配及运行方法

Country Status (1)

Country Link
CN (1) CN108228182A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113672213A (zh) * 2021-08-27 2021-11-19 优维科技(深圳)有限公司 一种基于构件的低代码编排方法及系统

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101617294A (zh) * 2007-02-13 2009-12-30 龙比亚大学 组件式开发的改进
CN103309665A (zh) * 2013-06-05 2013-09-18 昆明能讯科技有限责任公司 一种基于配置化的嵌入式gui的实现方法
CN104899037A (zh) * 2015-06-11 2015-09-09 上海大学 一种基于模型的侵入式灰盒组装验证方法
US20160170716A1 (en) * 2013-04-23 2016-06-16 Clearblade, Inc. System and Method for Creating a Development and Operational Platform for Mobile Applications

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101617294A (zh) * 2007-02-13 2009-12-30 龙比亚大学 组件式开发的改进
US20160170716A1 (en) * 2013-04-23 2016-06-16 Clearblade, Inc. System and Method for Creating a Development and Operational Platform for Mobile Applications
CN103309665A (zh) * 2013-06-05 2013-09-18 昆明能讯科技有限责任公司 一种基于配置化的嵌入式gui的实现方法
CN104899037A (zh) * 2015-06-11 2015-09-09 上海大学 一种基于模型的侵入式灰盒组装验证方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
刘元勇: "基于XML构件模型的组装技术研究", 《中国优秀硕士学位论文全文数据库信息科技辑》 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113672213A (zh) * 2021-08-27 2021-11-19 优维科技(深圳)有限公司 一种基于构件的低代码编排方法及系统

Similar Documents

Publication Publication Date Title
CN112416339A (zh) 页面开发方法、装置、计算机设备
CN102073502B (zh) 一种利用web原生布局进行页面渲染的方法及装置
US20160004516A1 (en) Code Generation Framework for Application Program Interface for Model
US20060200833A1 (en) Dynamic conversion of object-oriented programs to tag-based procedural code
US9335978B2 (en) Computer aided visualization of a business object model lifecycle
CN110989976A (zh) 基于J2EE的Web应用的组件化开发方法、存储介质和电子设备
US7529763B2 (en) System and method for providing dynamic client architecture in an application development environment
CN110020307A (zh) 一种客户端视图的绘制方法和装置
CN104714982A (zh) 一种网页的加载方法和系统
CN112199086A (zh) 自动编程控制系统、方法、装置、电子设备及存储介质
CN106991096A (zh) 动态页面渲染方法及装置
CN112214210A (zh) 后勤业务规则引擎及其配置方法、装置、设备和存储介质
US10776351B2 (en) Automatic core data service view generator
US20120124462A1 (en) Web Application Optimization
Durai et al. A novel approach with an extensive case study and experiment for automatic code generation from the XMI schema Of UML models
CN107146095A (zh) 一种邮件的展示信息处理方法、装置及邮件系统
US8935657B2 (en) Model-to-model transformation by kind
CN114647409A (zh) 大屏可视化应用创建平台、方法、计算设备和存储介质
Zhao et al. Pattern-based design evolution using graph transformation
JP2001325098A (ja) アプリケーションプログラムの作成方法、データベース操作方法、項目オブジェクト管理方法、モジュール動作制御方法ならびにデータベース操作方法、項目オブジェクト管理方法およびモジュール動作制御方法を実現するためのプログラムを記録したコンピュータ可読な記録媒体
CN108228182A (zh) 一种基于构件化的页面装配及运行方法
US20040064804A1 (en) Generation of partitioned enterprise application using a high-level specification
US10896161B2 (en) Integrated computing environment for managing and presenting design iterations
de Lange et al. Collaborative wireframing for model-driven web engineering
CN112417827B (zh) 在线文档编辑展示的方法、装置、电子设备及存储介质

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
RJ01 Rejection of invention patent application after publication

Application publication date: 20180629