CN117290628A - Unified definition method of form controls and electronic equipment - Google Patents

Unified definition method of form controls and electronic equipment Download PDF

Info

Publication number
CN117290628A
CN117290628A CN202311032867.0A CN202311032867A CN117290628A CN 117290628 A CN117290628 A CN 117290628A CN 202311032867 A CN202311032867 A CN 202311032867A CN 117290628 A CN117290628 A CN 117290628A
Authority
CN
China
Prior art keywords
control
controls
form control
data
definition
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
CN202311032867.0A
Other languages
Chinese (zh)
Inventor
张燕聪
陈绍文
林锐标
梁彬
黄涛
杨汝佳
黄章腾
卢俊伟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Guangzhou Shengyuancheng Technology Co ltd
Original Assignee
Guangzhou Shengyuancheng 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 Guangzhou Shengyuancheng Technology Co ltd filed Critical Guangzhou Shengyuancheng Technology Co ltd
Priority to CN202311032867.0A priority Critical patent/CN117290628A/en
Publication of CN117290628A publication Critical patent/CN117290628A/en
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/166Editing, e.g. inserting or deleting
    • G06F40/177Editing, e.g. inserting or deleting of tables; using ruled lines
    • G06F40/18Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Stored Programmes (AREA)

Abstract

The invention relates to the technical field of software development, in particular to a unified definition method of form controls and electronic equipment, which comprises the following steps: acquiring a form control of a browser standard, and analyzing the commonality and the characteristics of the form control; defining a general form control data structure according to the commonality and the characteristics of the form controls; based on the rendering engine parsing the DSL, encapsulating an independent rendering component; and rendering the corresponding form control according to the attribute for external calling, so as to realize unified rendering of the form control. The invention has more flexible display modes, the same control can be displayed into a plurality of different modes, the control has a uniform data structure, the control type can be flexibly converted, the invention has high expandability, the control supports sub-controls, the plurality of controls can be integrated into higher-level controls, and the invention has completely consistent interaction and display effects in different browsers.

Description

Unified definition method of form controls and electronic equipment
Technical Field
The invention relates to the technical field of software development, in particular to a unified definition method of form controls and electronic equipment.
Background
The software development team develops the software system to meet the customer demand, needs to provide a large number of complex pages and forms, has various complex styles and interaction modes, has low development efficiency by using the control of the browser standard, and is difficult to meet the complete consistency of the display effect among different browsers;
(1) Please exemplify complex pages, forms, styles and interactions.
Complex page example:
the commodity detail page of the electronic commerce platform comprises a plurality of blocks of commodity information, evaluation, commodity recommendation, related commodity and the like;
the top page of the news portal comprises a plurality of classified article lists, advertisements, recommendations and other modules.
Complex form example:
a registration form comprising a plurality of fields such as a user name, a password, a mailbox and the like;
a questionnaire comprising a plurality of question and answer options.
Complex pattern example:
the home page of the enterprise official network uses various fonts, colors, backgrounds and other elements to build brand images;
the user interface of the social media application uses rich icons, animations and interactive effects to enhance the user experience.
Examples of complex interaction means:
the interface of the video conference application comprises a plurality of interaction modes such as voice, video, screen sharing and the like;
the game application interface includes virtual world, role playing, multiplayer game and other interactive modes.
The prior art is usually developed by using a browser standard control, and the browser standard control has the advantages of cross-platform, cross-browser, easy use, wide support and the like, and has good compatibility and accessibility. In addition, the browser standard control can be personalized customized and enhanced through CSS, javaScript and other technologies, so that a developer can flexibly conduct style and interactive design according to requirements.
However, the efficiency of development with browser standard controls may be somewhat limited, mainly for the following reasons:
a) The default style and layout of the browser standard controls are relatively limited, requiring customization through CSS or like techniques, which requires a certain amount of time and skill.
b) The default behavior of the standard browser control may not meet certain requirements, and user-defined processing needs to be performed through JavaScript and other technologies. This again requires some time and skill and may be limited by browser compatibility.
c) Some scenarios may require the use of non-standard controls or UI components, which require the developer to use a third party library or self-develop, which may incur additional development and maintenance costs.
When developing with browser-standard controls, although basic style and interaction effect consistency can be achieved between different browsers, perfect consistency is often difficult to guarantee. The following are some reasons that may lead to inconsistent browser presentation effects:
a) Different browsers may implement different CSS attributes, such as slightly different ways of handling the attributes of frames, background, floating, positioning, etc.
b) Different browsers may have differences in default styles for certain HTML elements, such as styles for elements of forms, lists, etc., that may be displayed differently in different browsers.
c) Different browsers may support different CSS3 attributes and features, such as CSS3 animation, gradual changes, shadows, etc., which may not be normally exhibited in some browsers.
d) The JavaScript is supported by different browsers and the processing modes are different, for example, some APIs may not exist or have incompatibility problems in some browsers.
Disclosure of Invention
Aiming at the defects of the prior art, the invention discloses a unified definition method and an electronic device for a form control, which are used for realizing unified definition and rendering by abstracting and packaging the form control of a browser standard into a universal data structure to represent.
The invention is realized by the following technical scheme:
in a first aspect, the present invention provides a method for uniformly defining form controls, the method comprising the steps of:
acquiring a form control of a browser standard, and analyzing the commonality and the characteristics of the form control;
defining a general form control data structure according to the commonality and the characteristics of the form controls;
based on the rendering engine parsing the DSL, encapsulating an independent rendering component;
and rendering the corresponding form control according to the attribute for external calling, so as to realize unified rendering of the form control.
Still further, in the method, the form control includes
Text box: for entering text or numbers;
password frame: for entering passwords or other sensitive information;
a multi-line text box: allowing multiple lines of text to be entered;
single selection box: allowing a user to select an option from a plurality of options;
check box: allowing a user to select a plurality of options from a plurality of options;
drop down list box: allowing the user to select an option from a drop down list;
list box: allowing the user to select one or more options from a list;
sliding bar: for selecting a value from a range;
date selection box: allowing the user to select a date;
file upload frame: allowing a user to upload a file;
a form component: for displaying data;
chart component: a visual chart for displaying data;
a pop-up box assembly: for pop-up prompts, dialog boxes;
map component: for displaying map and location information.
Further, in the method, when the form control data structure is defined, attribute definition, slot definition, variable definition, method definition and event definition are sequentially performed.
Further, in the method, the form control data structure comprises a control type, a name, an identifier, a style, a position, a size, a default value and a verification rule attribute.
Further, in the method, when defining the attribute, the attribute is firstly declared in the component, and then the attribute is added in the definition metadata.
Furthermore, in the method, variable definition is performed to realize the data input and output functions of the form control, including the data source, binding mode, data format and data verification attribute of the control.
Furthermore, in the method, the event definition comprises the interaction mode of the control, the response event and the dynamic update attribute, so that the high customization and interaction functions of the form control are realized.
Further, in the method, the general form control component includes the following attributes:
type: form control types;
name: the name of the form control is used for submitting form data;
value: the value of the form control is used for setting and acquiring form data;
label: the label of the form control is used for describing the application of the form control;
required: whether the form controls have to be filled.
Further, in the method, the general form control component comprises the following steps:
render(s): rendering the form control according to the attribute;
validate: verifying whether the data of the form control is legal or not;
getValue: acquiring a value of a form control;
setValue: the value of the form control is set.
In a second aspect, the present invention provides an electronic device, including a processor, a memory, and a computer program stored in the memory and configured to be executed by the processor, where the memory is coupled to the processor, and where the processor executes the computer program to implement the method for uniformly defining form controls according to the first aspect.
The beneficial effects of the invention are as follows:
the invention has more flexible display modes, the same control can be displayed into a plurality of different modes, the control has a uniform data structure, the control type can be flexibly converted, the invention has high expandability, the control supports sub-controls, the plurality of controls can be integrated into higher-level controls, and the invention has completely consistent interaction and display effects in different browsers.
Drawings
In order to more clearly illustrate the embodiments of the invention or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described, it being obvious that the drawings in the following description are only some embodiments of the invention, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
FIG. 1 is a block diagram of the principle steps of a method for uniformly defining form controls.
Detailed Description
For the purpose of making the objects, technical solutions and advantages of the embodiments of the present invention more apparent, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention, and it is apparent that the described embodiments are some embodiments of the present invention, but not all embodiments of the present invention. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
Example 1
Referring to fig. 1, the present embodiment provides a method for uniformly defining form controls, including the following steps:
acquiring a form control of a browser standard, and analyzing the commonality and the characteristics of the form control;
defining a general form control data structure according to the commonality and the characteristics of the form controls;
based on the rendering engine parsing the DSL, encapsulating an independent rendering component;
and rendering the corresponding form control according to the attribute for external calling, so as to realize unified rendering of the form control.
The embodiment increases the efficiency and consistency of form development: in the traditional form development process, a developer needs to create and set form controls one by one, so that the problems of inconsistent control properties, disordered layout and the like are easy to occur, and the difficulty of development and maintenance is increased. By adopting the unified control definition method and the data structure, repeated work can be reduced, development efficiency is improved, and consistency and standardization of the form controls can be ensured.
The present embodiment simplifies the process and manner of form design: traditional form design methods require developers to have certain front-end technology and design capabilities, and are difficult for non-professionals to master. By adopting a unified control definition method and a data structure, the process and the mode of form design can be simplified through graphical interfaces and drag type operation, the technical threshold is reduced, and the efficiency and the quality of form design are improved.
The embodiment supports flexibility and expansibility of forms: forms are an important component of business processes of enterprises, and need to meet different business requirements and changes, so that certain flexibility and expansibility are required. By adopting the unified control definition method and the data structure, the form requirements of different types and different fields can be supported, and the controls can be conveniently expanded and customized to meet specific business requirements.
The embodiment improves maintainability and upgradeability of the form: in the traditional form development mode, once the form design or service requirement changes, the code needs to be rewritten and modified, and great maintenance and upgrading cost is brought. By adopting the unified control definition method and the data structure, the definition and the realization of the control can be separated, the form design and the form service logic are separated, the maintainability and the upgradeability of the form are improved, and the maintenance and upgrade cost is reduced.
Example 2
Based on embodiment 1, this embodiment enumerates some common form controls, and different application scenarios need to select different controls to meet the requirement Text Box (Text Box): for entering text or numbers.
Password Box (Password Box): for entering passwords or other sensitive information, the content may be hidden.
Multi-line text box (Multiline Text Box): allowing multiple lines of text to be entered.
Radio Button): the user is allowed to select an option from a plurality of options.
Check Box (Check Box): the user is allowed to select a plurality of options from a plurality of options.
Drop-down List Box: allowing the user to select an option from a drop down list.
List Box (List Box): allowing the user to select one or more options from a list.
Slide bar (slide): for selecting a value from a range.
Date selection box (Date Picker): allowing the user to select a date.
File Upload Box (File Upload Box): allowing the user to upload the file.
A form component: the method is used for displaying data and supporting functions of sorting, filtering, paging and the like.
Chart component: visual charts for displaying data, such as bar charts, line charts, pie charts, and the like.
A pop-up box assembly: for pop-up prompts, dialog boxes, etc., including warning boxes, confirmation boxes, prompt boxes, etc.
Map component: for displaying map and location information.
According to the commonality and the characteristics of the form controls, the embodiment defines a set of general form control data structures, including the type, the name, the identifier, the style, the position, the size, the default value, the check rule and other attributes of the controls. By the mode, unified definition and management of the form control can be realized, and cost and difficulty of form development and maintenance are reduced.
Example 3
On the basis of embodiment 2, the specific implementation operation of this embodiment is as follows:
/>
in this embodiment, attribute definition is performed, an attribute is declared in a component, a panel. Jsx file is opened, a component attribute is defined, an attribute is added in definition metadata, a panel. Defineta. Js file is opened, an attribute is added in tips, and after instantiation, each tips value is a default value of the attribute and is provided to the component after instantiation.
The present embodiment performs slot definition:
adding the child configuration, slot data currently supports two modes of generation:
factor: the slot data generating method needs to return to the standard DSL structure, and can be free of ID and empty array;
from code: generating through the component identifier, wherein the first layer of the slot is wrapped through the component;
the slot declaration structure of this embodiment is as follows:
the present embodiment performs variable definition:
in order to realize the data input and output functions of the form control, a set of general form control attributes and a data binding mechanism are required to be realized, wherein the general form control attributes and the general form control attributes comprise attributes such as a data source, a binding mode, a data format, data verification and the like of the control. By the mode, data input and output of the form control can be more flexible and customizable, and applicability and maintainability of the form are improved.
Adding variables configuration, describing variables, variable structure
/>
The method definition is carried out in the embodiment:
the present embodiment performs event definition:
in order to realize the interactive function of the form control, a set of general form control events and behaviors need to be defined, including the properties of the control, such as interactive modes, response events, dynamic update and the like. By the mode, the high-degree customization and interaction functions of the form control can be realized, and the flexibility and expansibility of the form are improved. For use by a binding event setter
In the embodiment, a Json rendering method is adopted, DSL is analyzed based on a rendering engine, independent rendering components are packaged, and all typesetting, style and events are completely dynamic. Each component has its own attributes and methods, and can render and interact according to the incoming attributes.
Specifically, a generic form control component can be defined that contains the following attributes and methods:
a) Attributes of
type: form control types, such as text boxes, drop down list boxes, check boxes, and the like.
name: the name of the form control is used for submitting the form data.
value: and the value of the form control is used for setting and acquiring the form data.
label: the label of the form control is used for describing the purpose of the form control.
required: whether the form controls have to be filled.
Other attributes: other attributes may be added depending on the form control type, such as a list of options in a drop-down list box.
b) Method of
render(s): and rendering the form control according to the attribute.
validate: and verifying whether the data of the form control is legal or not.
getValue: and acquiring the value of the form control.
setValue: the value of the form control is set.
When using form controls, different attributes may be imported according to different types, such as:
< form. Control type= "text" label= "user name" name= "username" required= { true }/>
< form. Control type= "select" label= "gender" name= "gener" options= { [ { value: 'Male', label: 'Men' }, { value: 'female', label: 'women' } ] }/>
And rendering the corresponding form control according to the attribute in the form control component, and providing a method for external calling so as to realize a unified rendering method of the form control.
Example 4
The embodiment provides an electronic device, which comprises a processor, a memory and a computer program stored in the memory and configured to be executed by the processor, wherein the memory is coupled with the processor, and the unified definition method of the form control in the first aspect is realized when the processor executes the computer program.
In conclusion, the method has more flexible display modes, the same control can be displayed into a plurality of different modes, and after the data structure and the definition method of the form control are unified, the mode definition can be more flexibly and rapidly carried out, and only the corresponding attribute configuration is required to be added.
The control of the invention has a unified data structure, can more flexibly convert the control types, has high expandability, and can more easily convert the control types when the form control has the unified data structure, for example, the same data type and data format are used for representing the values of different form controls. This is because the same data structure can use the same logic and code to process and validate different types of form control values. In this way, when form controls need to be added or modified, only the type of control need be changed, and no validation logic or data processing code need be modified.
This design is highly scalable because when a new form control type needs to be added, only processing logic for a new control type needs to be added, without modifying any existing code. In this way, new form control types can be quickly added while maintaining the cleanliness and maintainability of the code.
In addition, the unified data structure can also improve interoperability among form controls. Different types of form controls may share the same data formats and types, thereby making them easier to interact and collaborate. For example, multiple form controls may use the same data structure to represent date and time, allowing for data to be converted and shared between them.
The invention has completely consistent interaction and display effects in different browsers, and when form controls have uniform definitions and uniform data structures, the browser can render and process the controls by using the same codes without being affected by compatibility.
The above embodiments are only for illustrating the technical solution of the present invention, and are not limiting; although the invention has been described in detail with reference to the foregoing embodiments, it will be understood by those of ordinary skill in the art that: the technical scheme described in the foregoing embodiments can be modified or some technical features thereof can be replaced by equivalents; such modifications and substitutions do not depart from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims (10)

1. A method for uniformly defining form controls, the method comprising the steps of:
acquiring a form control of a browser standard, and analyzing the commonality and the characteristics of the form control;
defining a general form control data structure according to the commonality and the characteristics of the form controls;
based on the rendering engine parsing the DSL, encapsulating an independent rendering component;
and rendering the corresponding form control according to the attribute for external calling, so as to realize unified rendering of the form control.
2. The method for uniformly defining form controls according to claim 1, wherein in the method, the form controls include
Text box: for entering text or numbers;
password frame: for entering passwords or other sensitive information;
a multi-line text box: allowing multiple lines of text to be entered;
single selection box: allowing a user to select an option from a plurality of options;
check box: allowing a user to select a plurality of options from a plurality of options;
drop down list box: allowing the user to select an option from a drop down list;
list box: allowing the user to select one or more options from a list;
sliding bar: for selecting a value from a range;
date selection box: allowing the user to select a date;
file upload frame: allowing a user to upload a file;
a form component: for displaying data;
chart component: a visual chart for displaying data;
a pop-up box assembly: for pop-up prompts, dialog boxes;
map component: for displaying map and location information.
3. The method for uniformly defining form controls according to claim 1, wherein in the method, when the form control data structure is defined, attribute definition, slot definition, variable definition, method definition and event definition are sequentially performed.
4. The method of claim 3, wherein the form control data structure includes a type, name, identifier, style, location, size, default value, and check rule attribute of the control.
5. A method for uniformly defining form controls according to claim 3, wherein in the method, when defining attributes, attributes are firstly declared in components, and then the attributes are added in definition metadata.
6. The method for uniformly defining the form controls according to claim 3, wherein in the method, variable definition is performed to realize data input and output functions of the form controls, including data sources, binding modes, data formats and data verification attributes of the controls.
7. The method for uniformly defining form controls according to claim 3, wherein in the method, event definition comprises interaction mode of the controls, response event and dynamic update attribute, so as to realize high customization and interaction functions of the form controls.
8. The method of claim 1, wherein the universal form control component comprises the following attributes:
type: form control types;
name: the name of the form control is used for submitting form data;
value: the value of the form control is used for setting and acquiring form data;
label: the label of the form control is used for describing the application of the form control;
required: whether the form controls have to be filled.
9. The method for uniformly defining form controls according to claim 1, wherein the method comprises the following steps of:
render(s): rendering the form control according to the attribute;
validate: verifying whether the data of the form control is legal or not;
getValue: acquiring a value of a form control;
setValue: the value of the form control is set.
10. An electronic device comprising a processor, a memory and a computer program stored in the memory and configured to be executed by the processor, the memory being coupled to the processor, and the processor implementing the method of uniformly defining form controls according to any one of claims 1 to 9 when the computer program is executed by the processor.
CN202311032867.0A 2023-08-15 2023-08-15 Unified definition method of form controls and electronic equipment Pending CN117290628A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311032867.0A CN117290628A (en) 2023-08-15 2023-08-15 Unified definition method of form controls and electronic equipment

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311032867.0A CN117290628A (en) 2023-08-15 2023-08-15 Unified definition method of form controls and electronic equipment

Publications (1)

Publication Number Publication Date
CN117290628A true CN117290628A (en) 2023-12-26

Family

ID=89247058

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311032867.0A Pending CN117290628A (en) 2023-08-15 2023-08-15 Unified definition method of form controls and electronic equipment

Country Status (1)

Country Link
CN (1) CN117290628A (en)

Similar Documents

Publication Publication Date Title
US10038653B2 (en) Visual editor for electronic mail
CN107391134B (en) Method and device for automatically generating and dynamically transforming universal mobile application interactive interface
US10664556B2 (en) Adaptable user interface layout
CN102902545B (en) Markup language element is decomposed for animation
CN113411664B (en) Video processing method and device based on sub-application and computer equipment
WO2014008591A1 (en) Method of encapsulating diverse user interface components while consistently enforcing external constraints
Brown Silverlight 5 in action
CN106919406A (en) A kind of desktop application component issue, update method and device
CN111367514A (en) Page card development method and device, computing device and storage medium
EP3819760A1 (en) Methods and apparatus for generating a platform-agnostic mobile application configuration data structure with a dynamic quiz
US10409575B2 (en) System and method for developing software applications of wearable devices
CN115994517A (en) Information processing method, apparatus, storage medium, device, and program product
Lee et al. Beginning Windows Phone App Development
CN117290628A (en) Unified definition method of form controls and electronic equipment
Chang et al. A study on the development of one source multi use cross-platform based on zero coding
CN113190509A (en) Animation processing method and device, electronic equipment and computer readable storage medium
Fain et al. Enterprise web development: Building HTML5 applications: from desktop to mobile
CN114489619A (en) Interface view display method, terminal equipment and computer readable storage medium
Morris Hands-On Android UI Development: Design and develop attractive user interfaces for Android applications
Brockschmidt Programming Windows 8 Apps with HTML, CSS and Javascript
Giametta Pro Flex on Spring
KR20180047200A (en) Apparatus for producting sprite graphic and method for using the same
CN117369815A (en) Floor page generation method, information processing method and page display method
CN117055792A (en) Interface presentation method, apparatus, device, medium, and program product
CN115469870A (en) File online processing method and device, electronic equipment and medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication