技术领域technical field
本申请实施例涉及计算机技术领域，具体涉及计算机网络技术领域，尤其涉及一种生成前端交互界面的方法和装置。The embodiments of the present application relate to the field of computer technology, in particular to the field of computer network technology, and in particular to a method and device for generating a front-end interactive interface.
背景技术Background technique
在Web应用中，当最终用户通过非编程方式调整控件的一些配置项时，如何有效直观的向用户呈现该控件的属性并正确的接收用户输入，是一项繁琐而复杂的工作，尤其在控件数量庞大、配置项又不尽相同时。In web applications, when the end user adjusts some configuration items of the control in a non-programmatic way, how to effectively and intuitively present the properties of the control to the user and correctly receive user input is a cumbersome and complicated task, especially in the control When the quantity is huge and the configuration items are not the same.
现有的技术方案中，有代表性的调整控件的方法为对象表示法的表单模式(JSONschema-form)系列，可以基于传统的网页表单形式来组织交互界面，以及通过对象表示法(JSON)对象来描述属性类型及配置界面。In the existing technical solutions, the representative method of adjusting controls is the object representation form model (JSONschema-form) series, which can organize the interactive interface based on the traditional web form form, and through the object representation (JSON) object To describe the attribute type and configuration interface.
发明内容Contents of the invention
本申请实施例的目的在于提出一种生成前端交互界面的方法和装置。The purpose of the embodiments of the present application is to propose a method and device for generating a front-end interactive interface.
第一方面，本申请实施例提供了一种生成前端交互界面的方法，包括：响应于接收用户输入的配置界面生成指令，呈现控件的预编辑代码；接收用户输入的对于控件的预编辑代码中配置项界面参数的定义；基于对于控件的预编辑代码中的配置项界面参数的定义，生成前端交互界面。In the first aspect, the embodiment of the present application provides a method for generating a front-end interactive interface, including: presenting the pre-edited code of the control in response to receiving a configuration interface generation instruction input by the user; receiving the pre-edited code for the control input by the user Definition of configuration item interface parameters; based on the definition of configuration item interface parameters in the pre-edited code of the control, a front-end interactive interface is generated.
在一些实施例中，基于控件的预编辑代码中的配置项界面参数的定义，生成前端交互界面包括：基于对于控件的预编辑代码中的配置项界面参数的定义，呈现对于配置项界面参数中的配置项类型的预编辑代码；接收用户在配置项类型的预编辑代码中对于配置项类型的定义；基于控件的预编辑代码中的配置项界面参数的定义、对于配置项类型的定义，生成前端交互界面。In some embodiments, based on the definition of the configuration item interface parameters in the pre-edited code of the control, generating the front-end interactive interface includes: based on the definition of the configuration item interface parameters in the pre-edited code of the control, presenting the interface parameters for the configuration item The pre-edited code of the configuration item type; receive the user's definition of the configuration item type in the pre-edited code of the configuration item type; based on the definition of the configuration item interface parameters in the pre-edited code of the control, and the definition of the configuration item type, generate Front-end interface.
在一些实施例中，配置项类型支持设定校验参数。In some embodiments, the configuration item type supports setting verification parameters.
在一些实施例中，配置项类型所支持设定的校验参数包括以下一项或多项：配置项类型支持设定JavaScript原始数据类型：数值、布尔、字符串、数组，以及基于数组实现的枚举、列表；配置项类型支持设定指定列表类型的配置项的列表元素类型；配置项类型支持设定枚举类型的有效值集合；配置项类型支持设定字符类型的最大最小长度、正则验证；配置项类型支持设定数值类型的最大最小验证；配置项类型支持设定配置项的必需填写；配置项类型支持设定配置项的自定义的验证函数。In some embodiments, the verification parameters supported by the configuration item type include one or more of the following: the configuration item type supports the setting of JavaScript primitive data types: numeric value, Boolean, string, array, and array-based Enumeration, list; the configuration item type supports setting the list element type of the configuration item of the specified list type; the configuration item type supports setting the effective value set of the enumeration type; the configuration item type supports setting the maximum and minimum length of the character type, regular Validation; the configuration item type supports setting the maximum and minimum validation of the value type; the configuration item type supports setting the required filling of the configuration item; the configuration item type supports setting the custom validation function of the configuration item.
在一些实施例中，配置项界面参数的数据格式采用键值对格式，键值对的键标识配置项，键值对的值采用键值对格式标识配置项交互元素的参数。In some embodiments, the data format of the configuration item interface parameters adopts a key-value pair format, the key of the key-value pair identifies the configuration item, and the value of the key-value pair identifies the parameter of the interactive element of the configuration item in the key-value pair format.
在一些实施例中，交互元素的参数包括以下一项或多项：配置项交互元素类型；配置项在配置界面中的标题；配置项在配置界面中的布局定位；以及配置项交互元素类型的独有参数。In some embodiments, the parameters of the interactive element include one or more of the following: the type of the interactive element of the configuration item; the title of the configuration item in the configuration interface; the layout position of the configuration item in the configuration interface; and the type of the interactive element of the configuration item unique parameters.
第二方面，本申请实施例提供了一种生成前端交互界面的装置，包括：控件代码呈现单元，用于响应于接收用户输入的配置界面生成指令，呈现控件的预编辑代码；界面参数定义单元，用于接收用户输入的对于控件的预编辑代码中配置项界面参数的定义；交互界面生成单元，用于基于对于控件的预编辑代码中的配置项界面参数的定义，生成前端交互界面。In the second aspect, the embodiment of the present application provides a device for generating a front-end interactive interface, including: a control code presentation unit, configured to present the pre-edited code of the control in response to receiving a configuration interface generation instruction input by the user; an interface parameter definition unit , for receiving the definition of configuration item interface parameters in the pre-editing code for the control input by the user; the interactive interface generation unit is used for generating the front-end interactive interface based on the definition of the configuration item interface parameters in the pre-editing code for the control.
在一些实施例中，交互界面生成单元包括：呈现类型代码单元，用于基于对于控件的预编辑代码中的配置项界面参数的定义，呈现对于配置项界面参数中的配置项类型的预编辑代码；接收类型定义单元，用于接收用户在配置项类型的预编辑代码中对于配置项类型的定义；生成交互界面单元，用于基于控件的预编辑代码中的配置项界面参数的定义、对于配置项类型的定义，生成前端交互界面。In some embodiments, the interactive interface generating unit includes: a presenting type code unit, configured to present the pre-edited code for the configuration item type in the configuration item interface parameter based on the definition of the configuration item interface parameter in the pre-edited code for the control ;Receive the type definition unit, used to receive the user's definition of the configuration item type in the pre-edited code of the configuration item type; generate an interactive interface unit, used to define the configuration item interface parameters in the control-based pre-edited code, for the configuration The definition of the item type generates the front-end interactive interface.
在一些实施例中，交互界面生成单元中的配置项类型支持设定校验参数。In some embodiments, the configuration item type in the interactive interface generating unit supports setting verification parameters.
在一些实施例中，交互界面生成单元中的配置项类型所支持设定的校验参数包括以下一项或多项：配置项类型支持设定JavaScript原始数据类型：数值、布尔、字符串、数组，以及基于数组实现的枚举、列表；配置项类型支持设定指定列表类型的配置项的列表元素类型；配置项类型支持设定枚举类型的有效值集合；配置项类型支持设定字符类型的最大最小长度、正则验证；配置项类型支持设定数值类型的最大最小验证；配置项类型支持设定配置项的必需填写；配置项类型支持设定配置项的自定义的验证函数。In some embodiments, the verification parameters supported by the configuration item type in the interactive interface generation unit include one or more of the following: the configuration item type supports the setting of JavaScript primitive data types: numeric value, Boolean, string, array , and enumerations and lists implemented based on arrays; the configuration item type supports setting the list element type of the configuration item of the specified list type; the configuration item type supports setting the valid value set of the enumeration type; the configuration item type supports setting the character type The maximum and minimum length, regular validation; the configuration item type supports setting the maximum and minimum validation of the numeric type; the configuration item type supports setting the required filling of the configuration item; the configuration item type supports setting the custom validation function of the configuration item.
在一些实施例中，界面参数定义单元中的配置项界面参数的数据格式采用键值对格式，键值对的键标识配置项，键值对的值采用键值对格式标识配置项交互元素的参数。In some embodiments, the data format of the configuration item interface parameters in the interface parameter definition unit adopts the key-value pair format, the key of the key-value pair identifies the configuration item, and the value of the key-value pair adopts the key-value pair format to identify the interaction element of the configuration item parameter.
在一些实施例中，界面参数定义单元中的交互元素的参数包括以下一项或多项：配置项交互元素类型；配置项在配置界面中的标题；配置项在配置界面中的布局定位；以及配置项交互元素类型的独有参数。In some embodiments, the parameters of the interactive elements in the interface parameter definition unit include one or more of the following: the type of interactive element of the configuration item; the title of the configuration item in the configuration interface; the layout positioning of the configuration item in the configuration interface; and Parameters unique to configuration item interaction element types.
第三方面，本申请实施例提供了一种设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序；当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现如上任意一项生成前端交互界面的方法。In a third aspect, the embodiment of the present application provides a device, including: one or more processors; a storage device for storing one or more programs; when one or more programs are executed by one or more processors, Make one or more processors implement any of the above methods for generating a front-end interactive interface.
第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如上任意一项生成前端交互界面的方法。In a fourth aspect, the embodiment of the present application provides a computer-readable storage medium on which a computer program is stored, wherein when the program is executed by a processor, any one of the above methods for generating a front-end interactive interface is realized.
本申请实施例提供的一种生成前端交互界面的方法和装置，首先，响应于接收用户输入的配置界面生成指令，呈现控件的预编辑代码；之后，接收用户输入的对于控件的预编辑代码中配置项界面参数的定义；最后，基于对于控件的预编辑代码中的配置项界面参数的定义，生成前端交互界面。在这一过程中，控件的配置项界面参数采用JavaScript模块实现简单而直观的定义代码复用，并可包含函数(function)等JSON语法不能描述的类型，从而降低了配置界面开发的难度，使控件的设计者可以零编程实现控件的配置界面。In the method and device for generating a front-end interactive interface provided by the embodiments of the present application, firstly, in response to receiving a configuration interface generation instruction input by a user, the pre-edited code of the control is presented; after that, the pre-edited code for the control input by the user is received Definition of configuration item interface parameters; finally, based on the definition of configuration item interface parameters in the pre-edited code of the control, a front-end interactive interface is generated. In this process, the configuration item interface parameters of the control use JavaScript modules to realize simple and intuitive definition code reuse, and can include functions (function) and other types that cannot be described by JSON syntax, thereby reducing the difficulty of configuration interface development. The designer of the control can realize the configuration interface of the control with zero programming.
附图说明Description of drawings
通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请实施例的其它特征、目的和优点将会变得更明显：Other features, objects and advantages of the embodiments of the present application will become more apparent by reading the detailed description of non-limiting embodiments made with reference to the following drawings:
图1示出了可以应用本申请的生成前端交互界面的方法或生成前端交互界面的装置的实施例的示例性系统架构图；FIG. 1 shows an exemplary system architecture diagram of an embodiment in which the method for generating a front-end interaction interface or the device for generating a front-end interaction interface of the present application can be applied;
图2是根据本申请的生成前端交互界面的方法的一个实施例的示意性流程图；FIG. 2 is a schematic flowchart of an embodiment of a method for generating a front-end interactive interface according to the present application;
图3是根据本申请的生成前端交互界面的方法的又一个实施例的示意性流程图；FIG. 3 is a schematic flowchart of another embodiment of a method for generating a front-end interactive interface according to the present application;
图4是根据本申请的生成前端交互界面的方法的一个应用场景的示意性流程图；FIG. 4 is a schematic flowchart of an application scenario of a method for generating a front-end interactive interface according to the present application;
图5是根据本申请的生成前端交互界面的装置的一个实施例的示例性结构图；FIG. 5 is an exemplary structural diagram of an embodiment of a device for generating a front-end interactive interface according to the present application;
图6是适于用来实现本申请的终端设备或服务器的计算机系统的结构示意图。FIG. 6 is a schematic structural diagram of a computer system suitable for implementing a terminal device or a server of the present application.
具体实施方式Detailed ways
下面结合附图和实施例对本申请实施例作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与有关发明相关的部分。The embodiments of the present application will be further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described here are only used to explain related inventions, rather than to limit the invention. It should also be noted that, for the convenience of description, only the parts related to the related invention are shown in the drawings.
需要说明的是，在不冲突的情况下，本申请实施例中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请实施例。It should be noted that, in the case of no conflict, the embodiments in the embodiments of the present application and the features in the embodiments can be combined with each other. The embodiments of the present application will be described in detail below with reference to the drawings and in combination with the embodiments.
图1示出了可以应用本申请的生成前端交互界面的方法或生成前端交互界面的装置的实施例的示例性系统架构100。FIG. 1 shows an exemplary system architecture 100 to which embodiments of the method for generating a front-end interaction interface or the apparatus for generating a front-end interaction interface of the present application can be applied.
如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105、106。网络104用以在终端设备101、102、103和服务器105、106之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。As shown in FIG. 1 , the system architecture 100 may include terminal devices 101 , 102 , 103 , a network 104 and servers 105 , 106 . The network 104 serves as a medium for providing communication links between the terminal devices 101 , 102 , 103 and the servers 105 , 106 . Network 104 may include various connection types, such as wires, wireless communication links, or fiber optic cables, among others.
用户110可以使用终端设备101、102、103通过网络104与服务器105、106交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如搜索引擎类应用、购物类应用、即时通信工具、邮箱客户端、社交平台软件、音视频播放类应用等。The user 110 can use the terminal device 101 , 102 , 103 to interact with the server 105 , 106 through the network 104 to receive or send messages and the like. Various communication client applications can be installed on the terminal devices 101, 102, 103, such as search engine applications, shopping applications, instant messaging tools, email clients, social platform software, audio and video playback applications, and the like.
终端设备101、102、103可以是具有显示屏的各种电子设备，包括但不限于智能音箱、智能手机、可穿戴设备、平板电脑、电子书阅读器、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts GroupAudio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。Terminal devices 101, 102, 103 can be various electronic devices with display screens, including but not limited to smart speakers, smart phones, wearable devices, tablet computers, e-book readers, MP3 players (Moving Picture ExpertsGroup Audio Layer III , Moving Picture Experts Compression Standard Audio Layer 3), MP4 (Moving PictureExperts GroupAudio Layer IV, Moving Picture Experts Compression Standard Audio Layer 4) Players, Laptop Portable Computers and Desktop Computers, etc.
服务器105、106可以是提供各种服务的服务器，例如对终端设备101、102、103提供支持的后台服务器。后台服务器可以对终端的数据进行分析或计算等处理，并将分析或计算结果推送给终端设备。The servers 105 , 106 may be servers that provide various services, for example, background servers that provide support for the terminal devices 101 , 102 , 103 . The background server can analyze or calculate the terminal data, and push the analysis or calculation results to the terminal device.
需要说明的是，本申请中实施例所提供的生成前端交互界面的方法一般由服务器105、106或终端设备101、102、103执行，相应地，生成前端交互界面的装置一般设置于服务器105、106或终端设备101、102、103中。It should be noted that the methods for generating front-end interactive interfaces provided in the embodiments of this application are generally executed by servers 105, 106 or terminal devices 101, 102, and 103. 106 or terminal equipment 101, 102, 103.
应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。It should be understood that the numbers of terminal devices, networks and servers in Fig. 1 are only illustrative. According to the implementation needs, there can be any number of terminal devices, networks and servers.
继续参考图2，图2示出了根据本申请的生成前端交互界面的方法的一个实施例的示意性流程。Continuing to refer to FIG. 2 , FIG. 2 shows a schematic flow of an embodiment of a method for generating a front-end interactive interface according to the present application.
如图2所示，该生成前端交互界面的方法200包括：As shown in Figure 2, the method 200 for generating a front-end interactive interface includes:
在步骤210中，响应于接收用户输入的配置界面生成指令，呈现控件的预编辑代码。In step 210, in response to receiving a configuration interface generation instruction input by a user, the pre-edited code of the control is presented.
在本实施例中，运行一种生成前端交互界面的方法的电子设备(例如图1中所示的服务器或图1中所示的终端设备)可以经由终端设备的输入装置来接收用户输入的配置界面生成指令；之后，该电子设备响应于配置界面生成指令，可以向终端设备的显示装置呈现控件的预编辑代码。In this embodiment, an electronic device (for example, the server shown in FIG. 1 or the terminal device shown in FIG. 1 ) running a method for generating a front-end interactive interface can receive the configuration input by the user via the input device of the terminal device. An interface generation instruction; afterward, the electronic device may present the pre-edited code of the control to the display device of the terminal device in response to the configuration interface generation instruction.
这里的控件的预编辑代码，是指由控件(Widget)开发人员预先根据需要创建的控件所开发的代码。控件是指对数据和方法的封装得到的可编程显示元件。控件可以有自己的属性和方法，其中属性是控件数据的简单访问者，也即控件的配置项，方法则是控件的一些简单而可见的功能。在创建控件时，创建过程包括设计、开发、调试工作。The pre-edited code of the widget here refers to the code developed by the widget (Widget) developer to create the widget in advance according to the needs. A control is a programmable display element obtained by encapsulating data and methods. Controls can have their own properties and methods, where properties are simple accessors to control data, that is, configuration items of the control, and methods are some simple and visible functions of the control. When creating a control, the creation process includes design, development, and debugging.
在步骤220中，接收用户输入的对于控件的预编辑代码中配置项界面参数的定义。In step 220, the definition of the configuration item interface parameters in the pre-edited code of the control input by the user is received.
在本实施例中，控件的预编辑代码中包括配置项界面参数(Manifest)，也即配置项的配置界面定义。配置项界面参数的数据格式，可以采用键值对格式。其中，键值对的键可以标识配置项，键值对的值可以采用键值对格式来标识配置项交互元素的参数。In this embodiment, the pre-edited code of the control includes a configuration item interface parameter (Manifest), that is, a configuration interface definition of the configuration item. The data format of configuration item interface parameters can be in the format of key-value pairs. Wherein, the key of the key-value pair can identify the configuration item, and the value of the key-value pair can use the key-value pair format to identify the parameter of the interactive element of the configuration item.
这里的交互元素，是指用于输入、修改具体配置项的值的界面交互组件。在一个具体的示例中，如下表所示，交互元素的参数可以包括以下一项或多项：配置项交互元素类型；配置项在配置界面中的标题；配置项在配置界面中的布局定位；以及配置项交互元素类型的独有参数。The interaction element here refers to the interface interaction component used to input and modify the value of a specific configuration item. In a specific example, as shown in the following table, the parameters of the interactive element may include one or more of the following: the type of interactive element of the configuration item; the title of the configuration item in the configuration interface; the layout positioning of the configuration item in the configuration interface; And unique parameters of configuration item interaction element types.
其中，type是针对所用到的场景，实现了远多于基础类型的多种配置界面。因为即使是相同类型的配置项类型的属性，也可能会有不同的业务含义，例如同样是数值类型，可能是以像素为单位的整数数值的屏幕坐标，适合用带上下箭头的数字输入框(NumberInput)；也可能是表示透明度的浮点数百分比，适合用有最大最小边界的拖拉条(Slider)。Among them, type is based on the scene used, and realizes a variety of configuration interfaces far more than the basic type. Because even the attributes of the same type of configuration item may have different business meanings. For example, they are also numeric types, and may be screen coordinates of integer values in pixels. It is suitable to use the number input box with up and down arrows ( NumberInput); it may also be a floating-point percentage representing transparency, which is suitable for a slider with a maximum and minimum boundary.
title是交互元素的标签文字，由于anchor的存在，title内容无需过分明确而显得冗余。例如当正确配置anchor为["横轴"]时，『横轴标签字体』可简化为『标签字体』，如果横轴只有标签，可进一步简化为『字体』。The title is the label text of the interactive element. Due to the existence of the anchor, the content of the title does not need to be too clear and redundant. For example, when the anchor is correctly configured as ["horizontal axis"], "horizontal axis label font" can be simplified to "label font", and if the horizontal axis only has labels, it can be further simplified to "font".
anchor是交互元素的显示位置，配置界面通常不满足于简单的将交互元素水平或竖直排列在界面上，互相关联的一组配置项可以有层次的组织在一起，这样一方面利于定位希望调整的配置项，另一方面有助于最终用户对所要调整的配置项有更直观的理解。例如任何控件都会有的x坐标(xPos)、y坐标(yPos)、宽度(width)、高度(height)配置项，应当与每个控件独有的配置项(例如图表坐标轴上的一系列配置)在交互界面上明显分离。与此同时，相关的配置项例如xPos+yPos以及width+height应当在交互界面上组织在一起，可以采用anchor参数来描述配置界面布局上的相关性，每个交互元素的anchor参数为一个数组，其中第一个元素表示所属的标签页，第二个元素表示在标签页内所属的折叠栏。例如：Anchor is the display position of interactive elements. The configuration interface is usually not satisfied with simply arranging interactive elements horizontally or vertically on the interface. A group of related configuration items can be organized together hierarchically, which is convenient for positioning and adjustment. On the other hand, it helps end users have a more intuitive understanding of the configuration items to be adjusted. For example, any control will have x coordinates (xPos), y coordinates (yPos), width (width), height (height) configuration items, which should be unique to each control (such as a series of configurations on the axis of the chart ) are clearly separated on the interface. At the same time, related configuration items such as xPos+yPos and width+height should be organized together on the interactive interface. The anchor parameter can be used to describe the relevance of the layout of the configuration interface. The anchor parameter of each interactive element is an array. The first element indicates the tab page it belongs to, and the second element indicates the folding bar it belongs to in the tab page. E.g:
除了针对基础类型的配置项类型的属性实现了一系列交互元素之外，还为一些场景化的属性实现了针对性的交互元素。例如：颜色，基础类型为字符串(string)，但是其值有固定的格式，应严格符合rgba($red,$green,$blue,$alpha)的格式，为此可以提供type为"ColorPicker"的交互元素，用户无需手动输入上述格式的字符串，只需从交互元素的界面上选取或调整出所要的颜色即可，在方便使用的同时保证了配置项值的正确性。又例如：字体修饰，『是否粗体显示』这一配置项类型的基础类型字符串(string)，但是最终用户使用层面实际以开关按钮设置其值，针对此类属性，可以提供特定的按钮作为交互元素，表现方式为图标为粗体英文字母B的方形按钮，以便在保证配置项值正确性的同时更符合用户的使用习惯。In addition to implementing a series of interactive elements for the properties of basic types of configuration items, it also implements targeted interactive elements for some scene-based properties. For example: color, the basic type is string (string), but its value has a fixed format, which should strictly conform to the format of rgba($red,$green,$blue,$alpha), so you can provide type as "ColorPicker" For interactive elements, the user does not need to manually input the string in the above format, but only needs to select or adjust the desired color from the interface of the interactive element, which ensures the correctness of the configuration item value while being convenient to use. Another example: font modification, "bold display" is the basic type string (string) of the configuration item type, but the end user actually uses the switch button to set its value. For this type of attribute, a specific button can be provided as Interactive elements, expressed as a square button with a bold English letter B, so as to ensure the correctness of configuration item values and more in line with the user's usage habits.
实际应用中，会出现交互元素与配置项并非一对一关系的情况，例如字体修饰中的粗体、斜体、下划线通常以一组按钮的形式出现在配置界面中。这里的复合(compound)类型的交互元素，在配置界面定义的交互元素参数中可分别指定多个配置项属性，以实现提供一个type为"Font"的交互元素，包含了字体名、字号、颜色、粗体、斜体、下划线、strike-through(如果该属性值为True，则将字体设为删除线格式)配置项，接受一个名为"compound"的配置参数，其值为由配置项类型的属性名为key，使用方式为value的对象。In practical applications, there will be situations where the relationship between interactive elements and configuration items is not one-to-one. For example, bold, italic, and underlined fonts usually appear in the configuration interface in the form of a set of buttons. For the interactive element of compound type here, multiple configuration item attributes can be specified in the interactive element parameters defined in the configuration interface, so as to provide an interactive element of type "Font", including font name, font size, and color , bold, italic, underline, strike-through (if the attribute value is True, set the font to strikethrough format) configuration items, accept a configuration parameter named "compound", whose value is determined by the configuration item type An object whose attribute name is key and usage method is value.
例如：E.g:
上述例子中有意识的省略了指定斜体、下划线、strike-through对应的配置项属性，以达到禁止用户调整这些配置项的目的。In the above example, the configuration item attributes corresponding to the specified italics, underscore, and strike-through are intentionally omitted to prevent users from adjusting these configuration items.
此外，不同配置项的属性的值之间也可能会有相关性，例如标题位置(titlePosition)和标题对齐(titleAlignment)，当标题位置的值为『顶部』(top)或者『底部』(bottom)时，标题对齐的有效值为靠左(left)或者靠右(right)；当标题位置的值为左侧(left)或者右侧(right)时，标题对齐的有效值为靠顶(top)或者沉底(bottom)。针对这种情况，可以支持options参数的值为JavaScript函数，该函数在交互元素绘制时会被传入调用参数(当前配置项参数，当前所有配置项)，其返回值作为options参数的有效值。In addition, there may also be correlations between the values of the attributes of different configuration items, such as titlePosition and titleAlignment, when the value of the title position is "top" (top) or "bottom" (bottom) When , the valid value of title alignment is left (left) or right (right); when the value of title position is left (left) or right (right), the valid value of title alignment is top (top) Or sink to the bottom (bottom). In this case, it is possible to support the value of the options parameter as a JavaScript function. This function will be passed in the call parameters (current configuration item parameters, all current configuration items) when the interactive element is drawn, and its return value will be used as the effective value of the options parameter.
在步骤230中，基于对于控件的预编辑代码中的配置项界面参数的定义，生成前端交互界面。In step 230, a front-end interactive interface is generated based on the definition of configuration item interface parameters in the pre-edited code of the control.
在本实施例中，在得到对于控件的预编辑代码中的配置项界面参数的定义之后，可以生成前端交互界面，以供最终用户在前端交互界面基于该控件调整控件的配置项。In this embodiment, after obtaining the definition of the configuration item interface parameters in the pre-edited code of the control, a front-end interactive interface can be generated for the end user to adjust the configuration items of the control based on the control in the front-end interactive interface.
在本申请上述实施例的生成前端交互界面的方法中，控件的配置项界面参数的预编辑代码和定义可以采用JavaScript模块，可以实现简单而直观的定义代码复用，并可包含函数(function)等JSON语法不能描述的类型。另外，该生成前端交互界面的方法还可以基于所用到的场景，实现远多于基础类型的多种配置项界面参数，并且采用预编辑代码降低配置项界面参数的开发难度，使控件的设计者可以零编程实现控件的配置界面。In the method for generating the front-end interactive interface in the above-mentioned embodiments of the present application, the pre-edited code and definition of the configuration item interface parameters of the control can use JavaScript modules, which can realize simple and intuitive definition code reuse, and can include functions (function) Types that cannot be described by JSON syntax. In addition, the method for generating the front-end interactive interface can also realize a variety of configuration item interface parameters far more than the basic type based on the used scene, and use pre-edited codes to reduce the development difficulty of configuration item interface parameters, so that the designer of the control The configuration interface of the control can be realized with zero programming.
继续参考图3，图3示出了根据本申请的生成前端交互界面的方法的又一个实施例的示意性流程。Continuing to refer to FIG. 3 , FIG. 3 shows a schematic flow of another embodiment of the method for generating a front-end interactive interface according to the present application.
如图3所示，该生成前端交互界面的方法300包括：As shown in FIG. 3, the method 300 for generating a front-end interactive interface includes:
在步骤310中，响应于接收用户输入的配置界面生成指令，呈现控件的预编辑代码。In step 310, the pre-edited code of the control is presented in response to receiving a configuration interface generation instruction input by the user.
在本实施例中，运行一种生成前端交互界面的方法的电子设备(例如图1中所示的服务器或图1中所示的终端设备)可以经由终端设备的输入装置来接收用户输入的配置界面生成指令；之后，该电子设备响应于配置界面生成指令，可以向终端设备的显示装置呈现控件的预编辑代码。In this embodiment, an electronic device (for example, the server shown in FIG. 1 or the terminal device shown in FIG. 1 ) running a method for generating a front-end interactive interface can receive the configuration input by the user via the input device of the terminal device. An interface generation instruction; afterward, the electronic device may present the pre-edited code of the control to the display device of the terminal device in response to the configuration interface generation instruction.
这里的控件的预编辑代码，是指由控件(Widget)开发人员预先根据需要创建的控件所开发的代码。控件是指对数据和方法的封装得到的可编程显示元件。控件可以有自己的属性和方法，其中属性是控件数据的简单访问者，也即控件的配置项，方法则是控件的一些简单而可见的功能。在创建控件时，创建过程包括设计、开发、调试工作。The pre-edited code of the widget here refers to the code developed by the widget (Widget) developer to create the widget in advance according to the needs. A control is a programmable display element obtained by encapsulating data and methods. Controls can have their own properties and methods, where properties are simple accessors to control data, that is, configuration items of the control, and methods are some simple and visible functions of the control. When creating a control, the creation process includes design, development, and debugging.
在步骤320中，接收用户输入的对于控件的预编辑代码中配置项界面参数的定义。In step 320, the definition of the configuration item interface parameters in the pre-edited code of the control input by the user is received.
在本实施例中，控件的预编辑代码中包括配置项界面参数(Manifest)，也即配置项的配置界面定义。配置项界面参数的数据格式，可以采用键值对格式。其中，键值对的键可以标识配置项，键值对的值可以采用键值对格式来标识配置项交互元素的参数。In this embodiment, the pre-edited code of the control includes a configuration item interface parameter (Manifest), that is, a configuration interface definition of the configuration item. The data format of configuration item interface parameters can be in the format of key-value pairs. Wherein, the key of the key-value pair can identify the configuration item, and the value of the key-value pair can use the key-value pair format to identify the parameter of the interactive element of the configuration item.
这里的交互元素，是指用于输入、修改具体配置项的值的界面交互组件。在一个具体的示例中，如下表所示，交互元素的参数可以包括以下一项或多项：配置项交互元素类型；配置项在配置界面中的标题；配置项在配置界面中的布局定位；以及配置项交互元素类型的独有参数。The interaction element here refers to the interface interaction component used to input and modify the value of a specific configuration item. In a specific example, as shown in the following table, the parameters of the interactive element may include one or more of the following: the type of interactive element of the configuration item; the title of the configuration item in the configuration interface; the layout positioning of the configuration item in the configuration interface; And unique parameters of configuration item interaction element types.
其中，type是针对所用到的场景，实现了远多于基础类型的多种配置界面。因为即使是相同类型的配置项类型的属性，也可能会有不同的业务含义，例如同样是数值类型，可能是以像素为单位的整数数值的屏幕坐标，适合用带上下箭头的数字输入框(NumberInput)；也可能是表示透明度的浮点数百分比，适合用有最大最小边界的拖拉条(Slider)。Among them, type is based on the scene used, and realizes a variety of configuration interfaces far more than the basic type. Because even the attributes of the same type of configuration item may have different business meanings. For example, they are also numeric types, and may be screen coordinates of integer values in pixels. It is suitable to use the number input box with up and down arrows ( NumberInput); it may also be a floating-point percentage representing transparency, which is suitable for a slider with a maximum and minimum boundary.
title是交互元素的标签文字，由于anchor的存在，title内容无需过分明确而显得冗余。例如当正确配置anchor为["横轴"]时，『横轴标签字体』可简化为『标签字体』，如果横轴只有标签，可进一步简化为『字体』。The title is the label text of the interactive element. Due to the existence of the anchor, the content of the title does not need to be too clear and redundant. For example, when the anchor is correctly configured as ["horizontal axis"], "horizontal axis label font" can be simplified to "label font", and if the horizontal axis only has labels, it can be further simplified to "font".
anchor是交互元素的显示位置，配置界面通常不满足于简单的将交互元素水平或竖直排列在界面上，互相关联的一组配置项可以有层次的组织在一起，这样一方面利于定位希望调整的配置项，另一方面有助于最终用户对所要调整的配置项有更直观的理解。例如任何控件都会有的x坐标(xPos)、y坐标(yPos)、宽度(width)、高度(height)配置项，应当与每个控件独有的配置项(例如图表坐标轴上的一系列配置)在交互界面上明显分离。与此同时，相关的配置项例如xPos+yPos以及width+height应当在交互界面上组织在一起，可以采用anchor参数来描述配置界面布局上的相关性，每个交互元素的anchor参数为一个数组，其中第一个元素表示所属的标签页，第二个元素表示在标签页内所属的折叠栏。例如：Anchor is the display position of interactive elements. The configuration interface is usually not satisfied with simply arranging interactive elements horizontally or vertically on the interface. A group of related configuration items can be organized together hierarchically, which is convenient for positioning and adjustment. On the other hand, it helps end users have a more intuitive understanding of the configuration items to be adjusted. For example, any control will have x coordinates (xPos), y coordinates (yPos), width (width), height (height) configuration items, which should be unique to each control (such as a series of configurations on the axis of the chart ) are clearly separated on the interface. At the same time, related configuration items such as xPos+yPos and width+height should be organized together on the interactive interface. The anchor parameter can be used to describe the relevance of the layout of the configuration interface. The anchor parameter of each interactive element is an array. The first element indicates the tab page it belongs to, and the second element indicates the folding bar it belongs to in the tab page. E.g:
除了针对基础类型的配置项类型的属性实现了一系列交互元素之外，还为一些场景化的属性实现了针对性的交互元素。例如：颜色，基础类型为字符串(string)，但是其值有固定的格式，应严格符合rgba($red,$green,$blue,$alpha)的格式，为此可以提供type为"ColorPicker"的交互元素，用户无需手动输入上述格式的字符串，只需从交互元素的界面上选取或调整出所要的颜色即可，在方便使用的同时保证了配置项值的正确性。又例如：字体修饰，『是否粗体显示』这一配置项类型的基础类型字符串(string)，但是最终用户使用层面实际以开关按钮设置其值，针对此类属性，可以提供特定的按钮作为交互元素，表现方式为图标为粗体英文字母B的方形按钮，以便在保证配置项值正确性的同时更符合用户的使用习惯。In addition to implementing a series of interactive elements for the properties of basic types of configuration items, it also implements targeted interactive elements for some scene-based properties. For example: color, the basic type is string (string), but its value has a fixed format, which should strictly conform to the format of rgba($red,$green,$blue,$alpha), so you can provide type as "ColorPicker" For interactive elements, the user does not need to manually input the string in the above format, but only needs to select or adjust the desired color from the interface of the interactive element, which ensures the correctness of the configuration item value while being convenient to use. Another example: font modification, "bold display" is the basic type string (string) of the configuration item type, but the end user actually uses the switch button to set its value. For this type of attribute, a specific button can be provided as Interactive elements, expressed as a square button with a bold English letter B, so as to ensure the correctness of configuration item values and more in line with the user's usage habits.
实际应用中，会出现交互元素与配置项并非一对一关系的情况，例如字体修饰中的粗体、斜体、下划线通常以一组按钮的形式出现在配置界面中。这里的复合(compound)类型的交互元素，在配置界面定义的交互元素参数中可分别指定多个配置项属性，以实现提供一个type为"Font"的交互元素，包含了字体名、字号、颜色、粗体、斜体、下划线、strike-through(如果该属性值为True，则将字体设为删除线格式)配置项，接受一个名为"compound"的配置参数，其值为由配置项类型的属性名为key，使用方式为value的对象。In practical applications, there will be situations where the relationship between interactive elements and configuration items is not one-to-one. For example, bold, italic, and underlined fonts usually appear in the configuration interface in the form of a set of buttons. For the interactive element of compound type here, multiple configuration item attributes can be specified in the interactive element parameters defined in the configuration interface, so as to provide an interactive element of type "Font", including font name, font size, and color , bold, italic, underline, strike-through (if the attribute value is True, set the font to strikethrough format) configuration items, accept a configuration parameter named "compound", whose value is determined by the configuration item type An object whose attribute name is key and usage method is value.
例如：E.g:
上述例子中有意识的省略了指定斜体、下划线、strike-through对应的配置项属性，以达到禁止用户调整这些配置项的目的。In the above example, the configuration item attributes corresponding to the specified italics, underscore, and strike-through are intentionally omitted to prevent users from adjusting these configuration items.
此外，不同配置项的属性的值之间也可能会有相关性，例如标题位置(titlePosition)和标题对齐(titleAlignment)，当标题位置的值为『顶部』(top)或者『底部』(bottom)时，标题对齐的有效值为靠左(left)或者靠右(right)；当标题位置的值为左侧(left)或者右侧(right)时，标题对齐的有效值为靠顶(top)或者沉底(bottom)。针对这种情况，可以支持options参数的值为JavaScript函数，该函数在交互元素绘制时会被传入调用参数(当前配置项参数，当前所有配置项)，其返回值作为options参数的有效值。In addition, there may also be correlations between the values of the attributes of different configuration items, such as titlePosition and titleAlignment, when the value of the title position is "top" (top) or "bottom" (bottom) When , the valid value of title alignment is left (left) or right (right); when the value of title position is left (left) or right (right), the valid value of title alignment is top (top) Or sink to the bottom (bottom). In this case, it is possible to support the value of the options parameter as a JavaScript function. This function will be passed in the call parameters (current configuration item parameters, all current configuration items) when the interactive element is drawn, and its return value will be used as the effective value of the options parameter.
在步骤330中，基于对于控件的预编辑代码中的配置项界面参数的定义，呈现对于配置项界面参数中的配置项类型的预编辑代码。In step 330 , based on the definition of the configuration item interface parameter in the pre-edited code for the control, the pre-edited code for the configuration item type in the configuration item interface parameter is presented.
在本实施例中，控件(Widget)配置项类型(Schema)和对应的配置项界面参数(Manifest)分开定义，皆采用JAVA描述语言(JavaScript)模块，这种方式可以实现简单而直观的定义代码复用，并可包含函数(function)等JSON语法不能描述的类型。在这里，基于接收的用户输入的对于控件的预编辑代码中的配置项界面参数的定义，可以进一步呈现对于配置项界面参数中的配置项类型的预编辑代码，以便用户设定配置项类型的定义。In this embodiment, the control (Widget) configuration item type (Schema) and the corresponding configuration item interface parameter (Manifest) are defined separately, and both use the JAVA description language (JavaScript) module. This method can realize simple and intuitive definition code It can be reused, and can contain types such as functions that cannot be described by JSON syntax. Here, based on the definition of the configuration item interface parameters in the pre-edited code of the control received from the user, the pre-edited code for the configuration item type in the configuration item interface parameters can be further presented, so that the user can set the configuration item type. definition.
在步骤340中，接收用户在配置项类型的预编辑代码中对于配置项类型的定义。In step 340, the user's definition of the configuration item type in the pre-edited code of the configuration item type is received.
在本实施例中，运行一种生成前端交互界面的方法的电子设备(例如图1中所示的服务器或图1中所示的终端设备)可以经由终端设备的输入装置来接收用户在配置项类型的预编辑代码中对于配置项类型的定义。这里的配置项类型，用于定义配置项的数据类型，支持设定校验参数。这里的配置项类型的结构，可以为基于流行的JSON-schema的扁平化结构，以节省配置项类型的开发负担及运行开销。In this embodiment, an electronic device running a method for generating a front-end interaction interface (such as the server shown in FIG. 1 or the terminal device shown in FIG. 1 ) can receive the configuration item configured by the user via the input device of the terminal device. The definition of the configuration item type in the pre-edited code of the type. The configuration item type here is used to define the data type of the configuration item and supports setting verification parameters. The structure of the configuration item type here can be a flat structure based on the popular JSON-schema to save the development burden and running overhead of the configuration item type.
在一个具体的示例中，配置项类型支持设定校验参数可以包括以下一项或多项：配置项类型支持设定JavaScript原始数据类型和新的数据类型，其中，原始数据类型包括：数值、布尔、字符串、数组，以及新的数据类型包括：基于数组实现的枚举、列表；配置项类型支持设定指定列表类型的配置项的列表元素类型；配置项类型支持设定枚举类型的有效值集合；配置项类型支持设定字符类型的最大最小长度、正则验证；配置项类型支持设定数值类型的最大最小验证；配置项类型支持设定配置项的必需填写；配置项类型支持设定配置项的自定义的验证函数。In a specific example, the configuration item type supports setting verification parameters may include one or more of the following: the configuration item type supports setting JavaScript primitive data types and new data types, where the primitive data types include: numeric values, Boolean, string, array, and new data types include: enumerations and lists based on arrays; the configuration item type supports setting the list element type of the configuration item of the specified list type; the configuration item type supports setting the enumeration type A set of valid values; the configuration item type supports setting the maximum and minimum length of the character type, and regular verification; the configuration item type supports setting the maximum and minimum verification of the numeric type; the configuration item type supports setting the required filling of the configuration item; the configuration item type supports setting A custom validation function for a given configuration item.
在步骤350中，基于控件的预编辑代码中的配置项界面参数的定义、对于配置项类型的定义，生成前端交互界面。In step 350, based on the definition of configuration item interface parameters in the pre-edited code of the control and the definition of configuration item types, a front-end interactive interface is generated.
在本实施例中，基于控件的预编辑代码中的配置项界面参数的定义，可以明确配置项在配置界面的定义，进而基于配置项类型，可以明确配置项界面参数中配置项的数据类型的定义，从而可以快速的生成具有差异化的配置项的配置界面的场景。In this embodiment, based on the definition of the configuration item interface parameters in the pre-edited code of the control, the definition of the configuration item in the configuration interface can be clarified, and then based on the configuration item type, the data type of the configuration item in the configuration item interface parameters can be clarified Definition, so that the configuration interface scenarios with differentiated configuration items can be quickly generated.
本申请上述实施例中提供的生成前端交互界面的方法，控件的配置项类型和对应的配置项界面参数分开定义，皆采用JavaScript模块，这种方式可以实现简单而直观的定义代码复用，并可包含函数(function)等JSON语法不能描述的类型，从而可以在配置项类型定义跟配置项界面参数定义充分解耦的前提下，针对同一控件，定义出适用于多种场景的配置界面。此外，该生成前端交互界面的方法分离了控件的开发和配置项交互界面参数的开发，交互元素开发者和控件开发者以配置项类型的定义为约定(contract)，各自独立完成开发工作，从而降低了配置项界面开发的难度，使控件的设计者可以零编程实现控件的配置界面。In the method for generating the front-end interactive interface provided in the above-mentioned embodiments of the present application, the configuration item type of the control and the corresponding configuration item interface parameters are defined separately, and JavaScript modules are used. This method can realize simple and intuitive definition code reuse, and It can contain functions (function) and other types that cannot be described by JSON syntax, so that on the premise of fully decoupling the configuration item type definition from the configuration item interface parameter definition, a configuration interface suitable for multiple scenarios can be defined for the same control. In addition, the method for generating the front-end interactive interface separates the development of the control from the development of the parameters of the configuration item interaction interface. The developer of the interactive element and the developer of the control use the definition of the type of the configuration item as a contract, and complete the development work independently, thereby It reduces the difficulty of developing the configuration item interface, so that the designer of the control can realize the configuration interface of the control with zero programming.
应当理解，在上述实施例中，可以通过以下描述来帮助本领域技术人员来理解生成前端交互界面的方法中的控件(Widget)、控件的配置项(Props)、配置项类型定义(Schema)和配置项界面参数定义(Manifest)的含义：用户可以给他的报表添加各种数据展示控件(Widget)，例如线形图表。线形图表作为一个控件，用户会希望能够配置它的若干配置项属性(Props)，宽度，线的颜色等。每个配置项可以接受的值(用户输入)都应当符合一定数据类型定义(Schema)，例如颜色必须是16进制的红绿蓝值，而宽度必须是正数；此类定义统称『配置项类型定义』。用户用来输入某一配置项值的交互元素可以是多样的，例如针对宽度这个配置项，产品可以使用数字输入框作为『交互元素』让用户输入具体的数值；或者使用拖拉条(数值区间0-300)作为交互元素，让用户选择指定范围内任意值。针对”，配置项『宽度』使用『拖拉条』作为『交互元素』”，此类描述统称配置界面定义(Manifest)，拖拉条的取值范围(0-300)是配置界面定义中的参数。It should be understood that, in the foregoing embodiments, the following descriptions can be used to help those skilled in the art understand the control (Widget), configuration item (Props) of the control, configuration item type definition (Schema) and The meaning of the configuration item interface parameter definition (Manifest): the user can add various data display controls (Widget) to his report, such as a line chart. As a line chart is a control, users will want to be able to configure several of its configuration item properties (Props), width, line color, etc. The acceptable value (user input) of each configuration item should conform to a certain data type definition (Schema), for example, the color must be a hexadecimal red, green and blue value, and the width must be a positive number; such definitions are collectively referred to as "configuration item type definition". The interactive elements used by the user to input the value of a certain configuration item can be various. For example, for the configuration item width, the product can use the number input box as the "interactive element" to allow the user to input a specific value; or use the drag bar (value range 0 -300) as an interactive element, allowing the user to select any value within the specified range. For ", the configuration item "width" uses the "drag bar" as the "interactive element"", this type of description is collectively referred to as the configuration interface definition (Manifest), and the value range of the drag bar (0-300) is a parameter in the configuration interface definition.
以下结合图4，描述本申请的生成前端交互界面的方法的示例性应用场景。An exemplary application scenario of the method for generating a front-end interactive interface of the present application is described below with reference to FIG. 4 .
如图4所示，图4示出了根据本申请的生成前端交互界面的方法的一个应用场景的示意性流程图。As shown in FIG. 4 , FIG. 4 shows a schematic flowchart of an application scenario of the method for generating a front-end interactive interface according to the present application.
如图4所示，生成前端交互界面的方法400运行于智能音箱420中，可以包括：As shown in FIG. 4, the method 400 for generating a front-end interactive interface is run in a smart speaker 420, and may include:
首先，响应于接收用户输入的配置界面生成指令401，呈现控件的预编辑代码402；First, in response to receiving a configuration interface generation instruction 401 input by a user, a pre-edited code 402 of the control is presented;
之后，接收用户输入的对于控件的预编辑代码中配置项界面参数的定义403；Afterwards, receiving the definition 403 of the interface parameter of the configuration item in the pre-edited code of the control input by the user;
之后，基于对于控件的预编辑代码中的配置项界面参数的定义403，呈现对于配置项界面参数中的配置项类型的预编辑代码404；Afterwards, based on the definition 403 of the configuration item interface parameters in the pre-edited code for the control, present the pre-edited code 404 for the configuration item type in the configuration item interface parameter;
之后，接收用户在配置项类型的预编辑代码中对于配置项类型的定义405；Afterwards, receiving the user's definition 405 of the configuration item type in the pre-edited code of the configuration item type;
之后，基于控件的预编辑代码中的配置项界面参数的定义403、对于配置项类型的定义405，生成前端交互界面406。Afterwards, based on the definition 403 of configuration item interface parameters in the pre-edited code of the control and the definition 405 of configuration item types, a front-end interactive interface 406 is generated.
应当理解，上述图4中所示出的生成前端交互界面的方法，仅为生成前端交互界面的方法的示例性实施例，并不代表对本申请实施例的限定。例如，在配置项类型为预先确定的配置项类型时，也可以直接基于对于控件的预编辑代码中的配置项界面参数的定义，生成前端交互界面。It should be understood that the method for generating a front-end interactive interface shown in FIG. 4 above is only an exemplary embodiment of the method for generating a front-end interactive interface, and does not represent a limitation to the embodiment of the present application. For example, when the configuration item type is a predetermined configuration item type, the front-end interactive interface may also be generated directly based on the definition of the configuration item interface parameters in the pre-edited code of the control.
本申请实施例的上述应用场景中提供的一种生成前端交互界面的方法，控件的配置项类型和对应的配置项界面参数分开定义，皆采用JavaScript模块，这种方式可以实现简单而直观的定义代码复用，并可包含函数(function)等JSON语法不能描述的类型，从而可以在配置项类型定义跟配置项界面参数定义充分解耦的前提下，针对同一控件，定义出适用于多种场景的配置界面。此外，该生成前端交互界面的方法分离了控件的开发和配置项交互界面参数的开发，交互元素开发者和控件开发者以配置项类型的定义为约定(contract)，各自独立完成开发工作，从而降低了配置项界面开发的难度，使控件的设计者可以零编程实现控件的配置界面。A method for generating a front-end interactive interface provided in the above application scenario of the embodiment of the present application. The configuration item type of the control and the corresponding configuration item interface parameters are defined separately, and JavaScript modules are used. This method can realize simple and intuitive definition Code reuse, and can include functions (function) and other types that cannot be described by JSON syntax, so that on the premise of fully decoupling the configuration item type definition from the configuration item interface parameter definition, for the same control, define a variety of scenarios. configuration interface. In addition, the method for generating the front-end interactive interface separates the development of the control from the development of the parameters of the configuration item interaction interface. The developer of the interactive element and the developer of the control use the definition of the type of the configuration item as a contract, and complete the development work independently, thereby It reduces the difficulty of developing the configuration item interface, so that the designer of the control can realize the configuration interface of the control with zero programming.
进一步参考图5，作为对上述方法的实现，本申请提供了一种生成前端交互界面的装置的一个实施例，该生成前端交互界面的装置的实施例与图1至图4所示的一种生成前端交互界面的方法的实施例相对应，由此，上文针对图1至图4中一种生成前端交互界面的方法描述的操作和特征同样适用于一种生成前端交互界面的装置500及其中包含的单元，在此不再赘述。Further referring to FIG. 5 , as an implementation of the above method, the present application provides an embodiment of a device for generating a front-end interactive interface. The embodiment of the device for generating a front-end interactive interface is the same as that shown in FIGS. 1 to 4 The embodiment of the method for generating a front-end interactive interface corresponds, thus, the operations and features described above for a method for generating a front-end interactive interface in FIGS. 1 to 4 are also applicable to a device 500 for generating a front-end interactive interface and The units contained therein will not be described in detail here.
如图5所示，该生成前端交互界面的装置500包括：控件代码呈现单元510，用于响应于接收用户输入的配置界面生成指令，呈现控件的预编辑代码；界面参数定义单元520，用于接收用户输入的对于控件的预编辑代码中配置项界面参数的定义；交互界面生成单元530，用于基于对于控件的预编辑代码中的配置项界面参数的定义，生成前端交互界面。As shown in FIG. 5 , the device 500 for generating a front-end interactive interface includes: a control code presentation unit 510, configured to present a pre-edited code of a control in response to receiving a configuration interface generation instruction input by a user; an interface parameter definition unit 520, configured to The definition of configuration item interface parameters in the pre-edited code of the control input by the user is received; the interactive interface generation unit 530 is configured to generate a front-end interactive interface based on the definition of the configuration item interface parameters in the pre-edited code of the control.
在本实施例的一些可选实现方式中，交互界面生成单元530包括：呈现类型代码单元531，用于基于对于控件的预编辑代码中的配置项界面参数的定义，呈现对于配置项界面参数中的配置项类型的预编辑代码；接收类型定义单元532，用于接收用户在配置项类型的预编辑代码中对于配置项类型的定义；生成交互界面单元533，用于基于控件的预编辑代码中的配置项界面参数的定义、对于配置项类型的定义，生成前端交互界面。In some optional implementations of this embodiment, the interactive interface generation unit 530 includes: a presentation type code unit 531, configured to present the interface parameters for the configuration item based on the definition of the configuration item interface parameters in the pre-edited code for the control. The pre-edited code of the configuration item type; the receiving type definition unit 532 is used to receive the user's definition of the configuration item type in the pre-edited code of the configuration item type; the generation of an interactive interface unit 533 is used in the control-based pre-edited code The definition of the configuration item interface parameters and the definition of the configuration item type generate a front-end interactive interface.
在本实施例的一些可选实现方式中，交互界面生成单元530中的配置项类型支持设定校验参数。In some optional implementation manners of this embodiment, the configuration item type in the interactive interface generating unit 530 supports setting verification parameters.
在本实施例的一些可选实现方式中，交互界面生成单元530中的配置项类型所支持设定的校验参数包括以下一项或多项：配置项类型支持设定JavaScript原始数据类型：数值、布尔、字符串、数组，以及基于数组实现的枚举、列表；配置项类型支持设定指定列表类型的配置项的列表元素类型；配置项类型支持设定枚举类型的有效值集合；配置项类型支持设定字符类型的最大最小长度、正则验证；配置项类型支持设定数值类型的最大最小验证；配置项类型支持设定配置项的必需填写；配置项类型支持设定配置项的自定义的验证函数。In some optional implementations of this embodiment, the verification parameters supported by the configuration item type in the interactive interface generation unit 530 include one or more of the following: the configuration item type supports the setting of JavaScript primitive data type: value , Boolean, string, array, and enumerations and lists based on arrays; the configuration item type supports setting the list element type of the configuration item of the specified list type; the configuration item type supports setting the effective value set of the enumeration type; configuration The item type supports setting the maximum and minimum length of the character type, and regular verification; the configuration item type supports the setting of the maximum and minimum verification of the numeric type; the configuration item type supports setting the required filling of the configuration item; the configuration item type supports setting the self- The defined validation function.
在本实施例的一些可选实现方式中，界面参数定义单元520中的配置项界面参数的数据格式采用键值对格式，键值对的键标识配置项，键值对的值采用键值对格式标识配置项交互元素的参数。In some optional implementations of this embodiment, the data format of the configuration item interface parameters in the interface parameter definition unit 520 adopts the key-value pair format, the key of the key-value pair identifies the configuration item, and the value of the key-value pair adopts the key-value pair The format identifies the parameters of the configuration item interaction element.
在本实施例的一些可选实现方式中，界面参数定义单元520中的交互元素的参数包括以下一项或多项：配置项交互元素类型；配置项在配置界面中的标题；配置项在配置界面中的布局定位；以及配置项交互元素类型的独有参数。In some optional implementations of this embodiment, the parameters of the interactive elements in the interface parameter definition unit 520 include one or more of the following: the type of interactive element of the configuration item; the title of the configuration item in the configuration interface; Layout positioning in the interface; and unique parameters of the configuration item interaction element type.
本申请还提供了一种设备的实施例，包括：一个或多个处理器；存储装置，用于存储一个或多个程序；当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现如上任意一项所述的一种生成前端交互界面的方法。The present application also provides an embodiment of a device, including: one or more processors; a storage device for storing one or more programs; when one or more programs are executed by one or more processors, a or a plurality of processors to implement a method for generating a front-end interactive interface as described in any one of the above.
本申请还提供了一种计算机可读存储介质的实施例，其上存储有计算机程序，该程序被处理器执行时实现如上任意一项所述的一种生成前端交互界面的方法。The present application also provides an embodiment of a computer-readable storage medium, on which a computer program is stored, and when the program is executed by a processor, a method for generating a front-end interactive interface as described in any one of the above items is implemented.
下面参考图6，其示出了适于用来实现本申请实施例的终端设备或服务器的计算机系统600的结构示意图。图6示出的终端设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。Referring now to FIG. 6 , it shows a schematic structural diagram of a computer system 600 suitable for implementing a terminal device or a server according to an embodiment of the present application. The terminal device shown in FIG. 6 is only an example, and should not limit the functions and scope of use of this embodiment of the present application.
如图6所示，计算机系统600包括中央处理单元(CPU)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储部分608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中，还存储有系统600操作所需的各种程序和数据。CPU 601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。As shown in FIG. 6 , a computer system 600 includes a central processing unit (CPU) 601 that can be programmed according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage section 608 into a random-access memory (RAM) 603 Instead, various appropriate actions and processes are performed. In the RAM 603, various programs and data necessary for the operation of the system 600 are also stored. The CPU 601 , ROM 602 , and RAM 603 are connected to each other through a bus 604 . An input/output (I/O) interface 605 is also connected to the bus 604 .
以下部件连接至I/O接口605：包括键盘、鼠标等的输入部分606；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至I/O接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。The following components are connected to the I/O interface 605: an input section 606 including a keyboard, a mouse, etc.; an output section 607 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker; a storage section 608 including a hard disk, etc. and a communication section 609 including a network interface card such as a LAN card, a modem, or the like. The communication section 609 performs communication processing via a network such as the Internet. A drive 610 is also connected to the I/O interface 605 as needed. A removable medium 611 such as a magnetic disk, optical disk, magneto-optical disk, semiconductor memory, etc. is mounted on the drive 610 as necessary so that a computer program read therefrom is installed into the storage section 608 as necessary.
特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，所述计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可拆卸介质611被安装。在该计算机程序被中央处理单元(CPU)601执行时，执行本申请实施例的方法中限定的上述功能。In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, the embodiments of the present disclosure include a computer program product including a computer program carried on a computer-readable medium, the computer program including program codes for executing the methods shown in the flowcharts. In such an embodiment, the computer program may be downloaded and installed from a network via communication portion 609 and/or installed from removable media 611 . When the computer program is executed by the central processing unit (CPU) 601, the above-mentioned functions defined in the method of the embodiment of the present application are performed.
需要说明的是，本申请实施例所述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请实施例中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请实施例中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。It should be noted that the computer-readable medium described in the embodiments of the present application may be a computer-readable signal medium or a computer-readable storage medium, or any combination of the above two. A computer readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to, electrical connections with one or more wires, portable computer diskettes, hard disks, random access memory (RAM), read-only memory (ROM), erasable Programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination of the above. In the embodiments of the present application, a computer-readable storage medium may be any tangible medium containing or storing a program, and the program may be used by or in combination with an instruction execution system, device or device. However, in the embodiment of the present application, the computer-readable signal medium may include a data signal propagated in baseband or as a part of a carrier wave, in which computer-readable program codes are carried. Such propagated data signals may take many forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the foregoing. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device. . Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.
附图中的流程图和框图，图示了按照本申请实施例各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个单元、程序段、或代码的一部分，所述单元、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。The flow charts and block diagrams in the accompanying drawings illustrate the architecture, functions and operations of possible implementations of systems, methods and computer program products according to various embodiments of the embodiments of the present application. In this regard, each block in a flowchart or block diagram may represent a unit, program segment, or portion of code that contains one or more logic devices for implementing the specified Executable instructions for a function. It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or they may sometimes be executed in the reverse order, depending upon the functionality involved. It should also be noted that each block of the block diagrams and/or flowchart illustrations, and combinations of blocks in the block diagrams and/or flowchart illustrations, can be implemented by a dedicated hardware-based system that performs the specified functions or operations , or may be implemented by a combination of dedicated hardware and computer instructions.
描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括控件代码呈现单元、界面参数定义单元和交互界面生成单元，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，控件代码呈现单元还可以被描述为“响应于接收用户输入的配置界面生成指令，呈现控件的预编辑代码”。The units involved in the embodiments described in the present application may be implemented by means of software or by means of hardware. The described unit can also be set in the processor, for example, it can be described as: a processor includes a control code presentation unit, an interface parameter definition unit and an interactive interface generation unit, and the names of these units do not constitute a For the definition of the unit itself, for example, the control code presentation unit may also be described as "presenting the pre-edited code of the control in response to receiving a configuration interface generation instruction input by the user".
作为另一方面，本申请实施例还提供了一种非易失性计算机存储介质，该非易失性计算机存储介质可以是上述实施例中所述装置中所包含的非易失性计算机存储介质；也可以是单独存在，未装配入终端中的非易失性计算机存储介质。上述非易失性计算机存储介质存储有一个或者多个程序，当所述一个或者多个程序被一个设备执行时，使得所述设备：响应于接收用户输入的配置界面生成指令，呈现控件的预编辑代码；接收用户输入的对于控件的预编辑代码中配置项界面参数的定义；基于对于控件的预编辑代码中的配置项界面参数的定义，生成前端交互界面。As another aspect, the embodiment of the present application also provides a non-volatile computer storage medium, which may be the non-volatile computer storage medium contained in the device described in the above-mentioned embodiments ; It can also be a non-volatile computer storage medium that exists independently and is not assembled into the terminal. The above-mentioned non-volatile computer storage medium stores one or more programs, and when the one or more programs are executed by a device, the device: responds to receiving a configuration interface generation instruction input by a user, and presents a preset configuration of the control. Edit code; receive the definition of configuration item interface parameters in the pre-editing code of the control input by the user; generate a front-end interactive interface based on the definition of configuration item interface parameters in the pre-editing code of the control.
以上描述仅为本申请实施例的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请实施例中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请实施例中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。The above description is only a preferred embodiment of the embodiment of the present application and an illustration of the applied technical principle. Those skilled in the art should understand that the scope of the invention involved in the embodiments of the present application is not limited to the technical solution formed by the specific combination of the above-mentioned technical features, but should also cover the technical solutions made by the above-mentioned technical features without departing from the above-mentioned inventive concept. Other technical solutions formed by any combination of features or equivalent features. For example, a technical solution formed by replacing the above-mentioned features with technical features with similar functions disclosed in (but not limited to) the embodiments of the present application.
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711157648.XACN107797804A (en) | 2017-11-20 | 2017-11-20 | The method and apparatus for generating front end interactive interface |
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711157648.XACN107797804A (en) | 2017-11-20 | 2017-11-20 | The method and apparatus for generating front end interactive interface |
| Publication Number | Publication Date |
|---|---|
| CN107797804Atrue CN107797804A (en) | 2018-03-13 |
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711157648.XAPendingCN107797804A (en) | 2017-11-20 | 2017-11-20 | The method and apparatus for generating front end interactive interface |
| Country | Link |
|---|---|
| CN (1) | CN107797804A (en) |
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109101232A (en)* | 2018-06-08 | 2018-12-28 | 中国平安人寿保险股份有限公司 | A kind of method, apparatus of product development, computer equipment and storage medium |
| CN109189544A (en)* | 2018-10-17 | 2019-01-11 | 三星电子（中国）研发中心 | Method and apparatus for generating dial plate |
| CN109871205A (en)* | 2018-12-15 | 2019-06-11 | 中国平安人寿保险股份有限公司 | GUI code method of adjustment, device, computer installation and storage medium |
| CN110321183A (en)* | 2018-03-29 | 2019-10-11 | 优酷网络技术（北京）有限公司 | A kind of configuration system and method at the interface common component UI |
| CN112130723A (en)* | 2018-05-25 | 2020-12-25 | 第四范式（北京）技术有限公司 | Method and system for performing feature processing on data |
| CN112346724A (en)* | 2020-11-03 | 2021-02-09 | 广州朗国电子科技有限公司 | Method and storage medium for quickly generating application display interface |
| CN112527274A (en)* | 2020-12-18 | 2021-03-19 | 成都泛微网络科技有限公司 | Data processing method and related equipment |
| CN113064585A (en)* | 2021-04-30 | 2021-07-02 | 中国电子科技集团公司第二十九研究所 | JSON mode-based real-time message interface automatic generation method |
| CN114064001A (en)* | 2021-10-27 | 2022-02-18 | 远光软件股份有限公司 | Web page storage method, device, storage medium and server |
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101005681A (en)* | 2006-01-17 | 2007-07-25 | 大唐移动通信设备有限公司 | Interface automatic forming method and interface automatic forming system |
| CN101901148A (en)* | 2010-01-28 | 2010-12-01 | 浙江大学 | Method for generating ECU parameter configuration interface based on AUTOSAR standard |
| CN102122245A (en)* | 2011-02-21 | 2011-07-13 | 北京沃泰丰通信技术有限公司 | Method and system for generating configuration item setting interface |
| CN102207872A (en)* | 2011-06-04 | 2011-10-05 | 中国移动通信集团内蒙古有限公司 | Method and system for customizing Web UI (User Interface) control according to user requirements |
| CN104216701A (en)* | 2013-05-30 | 2014-12-17 | 西门子公司 | System and method for creating a graphical user interface within a manufacturing execution system |
| US20160162142A1 (en)* | 2014-12-09 | 2016-06-09 | Kalpana Karunamurthi | User Interface Configuration Tool |
| CN106293777A (en)* | 2016-10-31 | 2017-01-04 | 山东鲁能软件技术有限公司 | A kind of based on component-based development front-end interface control implementation method |
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101005681A (en)* | 2006-01-17 | 2007-07-25 | 大唐移动通信设备有限公司 | Interface automatic forming method and interface automatic forming system |
| CN101901148A (en)* | 2010-01-28 | 2010-12-01 | 浙江大学 | Method for generating ECU parameter configuration interface based on AUTOSAR standard |
| CN102122245A (en)* | 2011-02-21 | 2011-07-13 | 北京沃泰丰通信技术有限公司 | Method and system for generating configuration item setting interface |
| CN102207872A (en)* | 2011-06-04 | 2011-10-05 | 中国移动通信集团内蒙古有限公司 | Method and system for customizing Web UI (User Interface) control according to user requirements |
| CN104216701A (en)* | 2013-05-30 | 2014-12-17 | 西门子公司 | System and method for creating a graphical user interface within a manufacturing execution system |
| US20160162142A1 (en)* | 2014-12-09 | 2016-06-09 | Kalpana Karunamurthi | User Interface Configuration Tool |
| CN106293777A (en)* | 2016-10-31 | 2017-01-04 | 山东鲁能软件技术有限公司 | A kind of based on component-based development front-end interface control implementation method |
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110321183A (en)* | 2018-03-29 | 2019-10-11 | 优酷网络技术（北京）有限公司 | A kind of configuration system and method at the interface common component UI |
| CN110321183B (en)* | 2018-03-29 | 2023-05-05 | 阿里巴巴（中国）有限公司 | Configuration system and method for UI (user interface) of public component |
| CN112130723B (en)* | 2018-05-25 | 2023-04-18 | 第四范式（北京）技术有限公司 | Method and system for performing feature processing on data |
| CN112130723A (en)* | 2018-05-25 | 2020-12-25 | 第四范式（北京）技术有限公司 | Method and system for performing feature processing on data |
| CN109101232A (en)* | 2018-06-08 | 2018-12-28 | 中国平安人寿保险股份有限公司 | A kind of method, apparatus of product development, computer equipment and storage medium |
| CN109101232B (en)* | 2018-06-08 | 2024-03-12 | 中国平安人寿保险股份有限公司 | Method, device, computer equipment and storage medium for product development |
| CN109189544A (en)* | 2018-10-17 | 2019-01-11 | 三星电子（中国）研发中心 | Method and apparatus for generating dial plate |
| CN109871205A (en)* | 2018-12-15 | 2019-06-11 | 中国平安人寿保险股份有限公司 | GUI code method of adjustment, device, computer installation and storage medium |
| CN109871205B (en)* | 2018-12-15 | 2023-07-18 | 中国平安人寿保险股份有限公司 | Interface code adjustment method, device, computer device and storage medium |
| CN112346724A (en)* | 2020-11-03 | 2021-02-09 | 广州朗国电子科技有限公司 | Method and storage medium for quickly generating application display interface |
| CN112527274A (en)* | 2020-12-18 | 2021-03-19 | 成都泛微网络科技有限公司 | Data processing method and related equipment |
| CN113064585B (en)* | 2021-04-30 | 2023-04-11 | 中国电子科技集团公司第二十九研究所 | JSON mode-based real-time message interface automatic generation method |
| CN113064585A (en)* | 2021-04-30 | 2021-07-02 | 中国电子科技集团公司第二十九研究所 | JSON mode-based real-time message interface automatic generation method |
| CN114064001A (en)* | 2021-10-27 | 2022-02-18 | 远光软件股份有限公司 | Web page storage method, device, storage medium and server |
| Publication | Publication Date | Title |
|---|---|---|
| CN107797804A (en) | The method and apparatus for generating front end interactive interface | |
| KR102185864B1 (en) | Server-side rendering method and system of native content for presentation | |
| US10565293B2 (en) | Synchronizing DOM element references | |
| US11068643B2 (en) | Client-side customization and rendering of web content | |
| US10528589B2 (en) | Cross visualization interaction between data visualizations | |
| US11222171B2 (en) | Enhanced pivot table creation and interaction | |
| AU2012271774B2 (en) | Automated user interface object transformation and code generation | |
| US9524283B2 (en) | Techniques to remotely access form information and generate a form | |
| WO2017028611A1 (en) | Form implementation method and apparatus | |
| CN113031946A (en) | Method and device for rendering page component | |
| US20140082471A1 (en) | Displaying a Syntactic Entity | |
| CN111914528B (en) | Content editing method, method for generating editor, device, equipment and medium thereof | |
| KR20170062483A (en) | Interactive text preview | |
| CN112486482A (en) | Page display method and device | |
| CN116306492A (en) | Method, device, electronic equipment and storage medium for generating demonstration document | |
| CN113918194B (en) | A method, device, electronic device and storage medium for displaying page components | |
| CN106663242A (en) | Identify and visualize related reporting artifacts in documentation | |
| CN113779469A (en) | Website page modification method and device, electronic device and storage medium | |
| US11514240B2 (en) | Techniques for document marker tracking | |
| US20140108443A1 (en) | System and method to generate a data-rich template | |
| AU2016256364A1 (en) | Rendering graphical assets natively on multiple screens of electronic devices | |
| WO2023236795A1 (en) | Encyclopedia entry processing method and apparatus, and electronic device, medium and program product | |
| WO2016201813A1 (en) | Dynamic layout method and system based on android | |
| CN113760990B (en) | Content rights management method and device | |
| CN115114556A (en) | Method and device for creating page |
| 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:20180313 |