CN111597489A - Realization method and device based on mobile terminal draggable user-defined form component - Google Patents
Realization method and device based on mobile terminal draggable user-defined form component Download PDFInfo
- Publication number
- CN111597489A CN111597489A CN202010398397.XA CN202010398397A CN111597489A CN 111597489 A CN111597489 A CN 111597489A CN 202010398397 A CN202010398397 A CN 202010398397A CN 111597489 A CN111597489 A CN 111597489A
- Authority
- CN
- China
- Prior art keywords
- component
- mobile terminal
- user
- defined form
- dragging
- 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.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/174—Form filling; Merging
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Abstract
The invention provides a method and a device for realizing a draggable user-defined form component based on a mobile terminal. The method comprises the following steps: acquiring screen information of a current mobile terminal, and carrying out adaptation of a self-defined form component page on a screen of the mobile terminal according to the screen information of the mobile terminal through SafeaEAView and read Navigation; acquiring a component dragging instruction, dragging a corresponding component to a specified position according to the component dragging instruction, performing data binding and data caching on each dragged component, and sending a user-defined form building request to a server; and waiting for the feedback of the server, finishing the self-defined form set according to the feedback of the server, and naming the form. The invention realizes that the mobile terminal can drag the user-defined form component, enhances the safety of the user-defined form component in the realization process, facilitates the use of teachers and students on the network course, and improves the office and study efficiency.
Description
Technical Field
The invention relates to the technical field of computer software, in particular to a method and a device for realizing a draggable user-defined form component based on a mobile terminal.
Background
The user-defined form has a wide range of applications, and is involved in user-defined research in the OA user-defined workflow and CMS function extension. However, most of the custom form systems in the market are designed based on a PC, and the custom form systems are greatly limited and can only be operated by using a desktop computer or a notebook computer.
For the mobile terminal, there is also a form application, but the form of the mobile terminal is in a preset format, and cannot be easily changed, and the form can not be customized, which causes great inconvenience, so a method is urgently needed to realize form customization of the mobile terminal.
The above is only for the purpose of assisting understanding of the technical aspects of the present invention, and does not represent an admission that the above is prior art.
Disclosure of Invention
In view of this, the invention provides a method and a device for realizing a form component which can be dragged and customized based on a mobile terminal, and aims to solve the technical problem that the form component customization cannot be realized by dragging the form component by the mobile terminal in the prior art.
The technical scheme of the invention is realized as follows:
on one hand, the invention provides a method for realizing a draggable user-defined form component based on a mobile terminal, which comprises the following steps:
s1, acquiring screen information of the current mobile terminal, and carrying out adaptation of a self-defined form component page on the screen of the mobile terminal according to the screen information of the mobile terminal through SafeaEAView and read Navigation;
s2, acquiring a component dragging instruction, dragging a corresponding component to a designated position according to the component dragging instruction, performing data binding and data caching on each dragged component, and sending a user-defined form building request to a server;
and S3, waiting for the feedback of the server, completing the self-defined form construction according to the feedback of the server, and naming the form.
On the basis of the above technical solution, preferably, in step S1, before obtaining the screen information of the current mobile terminal, and performing adaptation of the user-defined form component page on the screen of the mobile terminal according to the screen information of the mobile terminal through the SafeAreaView and the read Navigation, the method further includes the following steps of obtaining operating system information of the current mobile terminal, where the operating system information includes: and the Android system and the IOS system improve the compatibility of the system through a Reactnative framework according to the information of the current mobile terminal operating system.
On the basis of the above technical solution, preferably, in step S1, the screen information of the current mobile terminal is obtained, and the self-defined form component page is adapted to the screen of the mobile terminal according to the screen information of the mobile terminal through the SafeAreaView and the read Navigation, and the method further includes the following steps of obtaining the screen information of the current mobile terminal, where the screen information is ratio data between the height and the width of the screen, and the self-defined form component page is adapted to the screen of the mobile terminal through the SafeAreaView and the read Navigation according to the ratio data.
On the basis of the above technical solution, preferably, in step S2, obtaining a component dragging instruction, dragging a corresponding component to a specified position according to the component dragging instruction, performing data binding and data caching on each component that is dragged, and before sending a custom form building request to a server, further including the steps of performing interface typesetting layout on a screen that is matched with a custom form component page, taking an upper part of the whole interface as a title bar of the interface, taking a left part of the interface excluding the title bar as a component menu bar, dragging the remaining interface part as a component and editing the component, where the component menu bar is used to store form component elements, where the single component elements include: single line, radio box, check box, multiple line, multiple check box, date, audio, video, upload picture, geographical location information, mailbox, and region.
On the basis of the above technical solution, preferably, in step S2, a component drag instruction is obtained, dragging the corresponding component to a designated position according to the component dragging instruction, performing data binding and data caching on each dragged component, and sending a user-defined form building request to a server side, and the method further comprises the following steps of obtaining the component dragging instruction, dragging the corresponding component to a designated position according to the component dragging instruction, setting waiting time, recording the time for receiving the next dragging instruction in real time, recording the information of the component corresponding to the dragging instruction when the time is more than the waiting time, and a form ID is allocated to the component, the form IDs of the components corresponding to all dragging instructions are obtained, and generating a form ID query table according to the form IDs, performing data binding and data caching on each dragged component, and sending a user-defined form building request to a server.
On the basis of the technical scheme, preferably, data binding and data caching are carried out on each dragged component, and the method further comprises the following steps of carrying out data binding and data caching on each dragged component, setting caching time, recording storage time of each dragged component data in real time, deleting each dragged component data when the storage time is larger than the caching time, and sending a corresponding report to a user.
On the basis of the technical scheme, preferably, after the user-defined form building request is sent to the server, the method further comprises the following steps that when the server receives the user-defined form building request, the name information of each component is extracted from the user-defined form building request, the name of each component is converted into pinyin spelling, the converted pinyin spelling is checked, when the duplicate pinyin is found, the component name corresponding to the duplicate pinyin is converted into English, and after the check is completed, the converted component name is stored in the user-defined form building request again and fed back to the system.
Still further preferably, the apparatus for implementing dragging a custom form component based on a mobile terminal includes:
the screen adaptation module is used for acquiring the screen information of the current mobile terminal and adapting the self-defined form component page of the screen of the mobile terminal according to the screen information of the mobile terminal through SafeaEAView and ReactNavigation;
the user-defined form building module is used for acquiring a component dragging instruction, dragging a corresponding component to a specified position according to the component dragging instruction, performing data binding and data caching on each dragged component, and sending a user-defined form building request to a server;
and the response module is used for waiting for the feedback of the server, completing the self-defined form construction according to the feedback of the server and naming the form.
In a second aspect, the method for implementing a draggable user-defined form component based on a mobile terminal further includes a device, where the device includes: the method comprises the steps of storing a program for implementing the method based on the mobile terminal draggable user-defined form component, storing the program for implementing the method based on the mobile terminal draggable user-defined form component in the memory, and running the program for implementing the method based on the mobile terminal draggable user-defined form component in the processor.
In a third aspect, the method for implementing a draggable user-defined form component based on a mobile terminal further includes a medium, where the medium is a computer medium, where an implementation method program for implementing a draggable user-defined form component based on a mobile terminal is stored on the computer medium, and when executed by a processor, the implementation method program for implementing a draggable user-defined form component based on a mobile terminal implements the steps of the implementation method for implementing a draggable user-defined form component based on a mobile terminal as described above.
Compared with the prior art, the method for realizing the draggable user-defined form component based on the mobile terminal has the following beneficial effects:
(1) the compatibility of the whole system is improved through the React Native framework, so that the system can be more suitable for automatic screen adaptation of double platforms (Andriod and IOS), the stability and high reusability of the whole dragging custom process are ensured, and the user experience is improved.
(2) Data storage is carried out on the assemblies dragged by the user in real time, data loss can be greatly avoided, and the safety and stability of the whole user-defined form assembly in the building process are guaranteed.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
FIG. 1 is a schematic diagram of an apparatus in a hardware operating environment according to an embodiment of the present invention;
FIG. 2 is a schematic flow chart of a first embodiment of a method for implementing a draggable user-defined form component based on a mobile terminal according to the present invention;
fig. 3 is a functional module diagram of a first embodiment of a method for implementing a draggable user-defined form component based on a mobile terminal according to the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be obtained by a person skilled in the art without any inventive step based on the embodiments of the present invention, are within the scope of the present invention.
As shown in fig. 1, the apparatus may include: a processor 1001, such as a Central Processing Unit (CPU), a communication bus 1002, a user interface 1003, a network interface 1004, and a memory 1005. Wherein a communication bus 1002 is used to enable connective communication between these components. The user interface 1003 may include a Display screen (Display), an input unit such as a Keyboard (Keyboard), and the optional user interface 1003 may also include a standard wired interface, a wireless interface. The network interface 1004 may optionally include a standard wired interface, a WIreless interface (e.g., a WIreless-FIdelity (WI-FI) interface). The Memory 1005 may be a Random Access Memory (RAM) Memory, or may be a Non-Volatile Memory (NVM), such as a disk Memory. The memory 1005 may alternatively be a storage device separate from the processor 1001.
Those skilled in the art will appreciate that the configuration shown in fig. 1 does not constitute a limitation of the device, and that in actual implementations the device may include more or less components than those shown, or some components may be combined, or a different arrangement of components.
As shown in fig. 1, a storage 1005 as a medium may include an operating system, a network communication module, a user interface module, and a program for implementing a method of dragging a custom form component based on a mobile terminal.
In the device shown in fig. 1, the network interface 1004 is mainly used for establishing a communication connection between the device and a server storing all data required in the system based on the implementation method of the mobile terminal draggable custom form component; the user interface 1003 is mainly used for data interaction with a user; the processor 1001 and the memory 1005 of the implementation method device based on the draggable user-defined form component at the mobile terminal can be arranged in the implementation method device based on the draggable user-defined form component at the mobile terminal, and the implementation method device based on the draggable user-defined form component at the mobile terminal calls the implementation method program based on the draggable user-defined form component at the mobile terminal, which is stored in the memory 1005, through the processor 1001, and executes the implementation method provided by the implementation method based on the draggable user-defined form component at the mobile terminal.
With reference to fig. 2, fig. 2 is a flowchart illustrating a first embodiment of a method for implementing a draggable user-defined form component based on a mobile terminal according to the present invention.
In this embodiment, the method for implementing a draggable user-defined form component based on a mobile terminal includes the following steps:
s10: and acquiring the screen information of the current mobile terminal, and carrying out adaptation of a user-defined form component page on the screen of the mobile terminal according to the screen information of the mobile terminal through SafeaEAView and read Navigation.
It should be understood that the currently mainstream mobile operating systems are mainly Android and IOS, which are well known. The two operating systems respectively use Java and Object-C to develop software on respective systems, so that a real Native framework is used for solving cross-platform development, the real Native framework is used for reasonable interface layout, and SafeaAreaView and real Navigation are used according to the sizes of different mobile phone terminal screens and the pixel density of equipment is scaled according to the width (height) degree (px) and the width (height) degree so as to achieve automatic adaptation.
It should be understood that the screen of the dual-platform (Android and IOS) mobile phone is automatically adapted, the read Native adopts Flexbox in terms of layout, and in order to ensure that the code has higher reusability and compatibility, the Android and IOS styles need to be kept as consistent as possible. In order to improve code compatibility, it is necessary to determine whether the platform of the current system is Android or IOS.
It should be understood that the following special handling of the adaptation for different special cases:
when the adaptive view sets the Shadow, Shadow Propsapi is needed, the api supports an IOS platform, and when the Shadow is set under an Android platform, elevation is needed.
Default background for text. The default background of the characters in the IOS is gray, the default background of the characters in the Android is transparent, and the background color is set to be 'transparent' in the layout style of the IOS end, so that the styles of the two versions are consistent.
The text is vertically centered. The word is not underlined by default and is vertically centered in the IOS end, and the underline is set transparent and is vertically centered in Android.
A bottom navigation bar. The method is realized by using a Navigator IOS component in IOS, but the component is not available in Android, and the step navigation of an Android end is realized by a real-native-tab-navigator component of a third party, wherein the component is realized by using the following steps: downloading the real-native-tab-navigator and introducing the real-native-tab-navigator component into the file of the project that needs to be used.
In order to enable the icons to be adapted to devices of different resolutions. Three sizes of 1x, 2x and 3x are required to be provided for each icon, and then pictures of different sizes are dynamically selected and displayed according to the resolution of the screen through the fact Native.
The method comprises the steps that a set of style sheet files are used for controlling styles under different platforms, styles needing to be processed by the styles of the two platforms are defined by underlining attributes in the style sheets, the writing method of 'height: 100' represents that IOS and Android have the unified height of 100, and the writing method of 'height: 100' represents that the styles are set for the Android platform independently and only take effect on the Android platform. And uses the trinocular operator to make a decision where adaptation is needed.
It should be appreciated that the resolution of the screen before IOS11 is 375 x 667, while the height of the iPhoneX screen becomes 812, with a top 145 higher. The problem of adaptation is basically solved around the UI, and the core idea of adaptation is: [ avoidance of safety regions, making layout adaptive ]
And the height of the navigation bar before IOS11 is 64, where the height of the status bar (statubar) is 20. The status bar (statubar) height of iPhoneX becomes 44 (sensor area height), which part needs to be adapted accordingly if it is custom TopBar.
The bottom of the iPhoneX is added with a virtual Home area, the height of the TabBar is changed from 49 to 83 due to the safety area, the height is increased by 34(Home area height), and the custom bottom TabBar changes the adaptation scheme. The specific implementation method comprises the following steps:
1. the top layout and the bottom navigated layout of each interface were heightened, and the PaddingTop and PaddingBottom were modified. Also, for the same application as before for iOS11, it is sufficient to let the system choose a different Style depending on the version. The first step is to judge whether the current mobile phone device is iPhoneX. And judging through the height of the screen.
2. And according to the device environment version and the touch area, acquiring a corresponding Padding style, and assigning to safeAreaStyle.
3. The style is passed to the top-level layout View, making the layout adaptive.
S20: and acquiring a component dragging instruction, dragging the corresponding component to a specified position according to the component dragging instruction, performing data binding and data caching on each dragged component, and sending a user-defined form building request to a server.
It should be understood that, in this embodiment, the page is typeset and laid out before the dragging is performed, the interface is entirely composed of three parts, namely, an upper part, a left part and a right part, the upper part is a title bar of the current interface, the left side is a component menu bar, and the right side is a component dragging and editing area.
It should be understood that the left menu bar is the set of all custom form component elements, including: single line, radio box, check box, multiple line, multiple check box, date, audio, video, upload picture, geographical location information, mailbox and zone components, and can view the blocked components by sliding up and down the scroll bar with a finger. In order to save bandwidth and improve uploading speed, the uploaded video file needs to be compressed, and the real-native-video-processing is used for realizing compression, so that the real-native-video-processing can ensure that the original file is compressed to one tenth of the original video size on the premise of not changing definition. The regional components are defaulted to three-level linkage, and are realized by using a reach-native-picker in the embodiment.
It should be understood that, a user selects a required component to the component editing area on the right side through the form component menu on the left side by finger sliding according to business requirements (in the component editing area on the right side, at most 20 components can be dragged from the component menu on the left side, 20 components are in a default number, but can be set through the background, but the maximum upper limit value is 50, and 20 components are enough for general business requirements), and a plurality of form components form a model currently.
For example, statistics on daily attendance of students requires the following information to be collected: school number, name, gender, location, and upload pictures. The specific operation is as follows: and entering a user-defined form dragging interface, dragging the user-defined component to a component editing area according to business requirements, setting the component name as a sequence number after dragging a single-row component, setting the component name as a name after dragging a second single-row component, setting the name as a gender after dragging a radio button component, and not setting the name of each radio button independently. And dragging the geographic information position assembly to set the name of the assembly as a place, selecting the uploaded image assembly to set the name of the assembly as an uploaded image, and after dragging all the assemblies, arranging the assemblies in a sliding mode according to the sequence. The operation is convenient and simple, the user can be skillfully operated by simply demonstrating once, and the operation is also carried out at a mobile phone terminal without being limited by a computer or a network (only a mobile network with a mobile phone is needed), so that the working efficiency of use is greatly improved, the time cost is saved for the user, and the recording and communication and training costs are reduced for a business software company.
It should be understood that the custom component is selected to the right component editing area, the component can be edited, the component name can be set, and the corresponding rule can be selected in the rule check base and attached to the component. The check rule base is a common check rule, and comprises check of non-empty, length, mailbox, number format, letter format, telephone and mobile phone format, identity card, special characters, Chinese, date format and uploaded file suffix name. The user can also use the self-defined check rule, after selecting the self-defined rule, the user needs to input the rule name of the check rule and the regular expression of the check component, the system can check the rule name (the check rule with duplicate name is not allowed), then the user can check the correctness of the grammar and the format of the regular expression input by the user, and after the check is passed, the self-defined check rule is stored in the check rule base. As a new verification rule, the user may select the verification rule when editing other components. The corresponding component can also be deleted by clicking a delete button without needing or dragging the wrong component.
It should be understood that, according to the information dragged in the above embodiments, the system may monitor the finger sliding through the real-native-swipeout third-party framework, so as to monitor the position information of the dragged component in real time. The method comprises the following operations: firstly, intercepting a touch event, and judging whether a scrollview sliding event or a view touch event; then, prohibiting the slippage of the scrollview after judging the touch event of the view; allowing the scrollview to slide after the last touch event is over.
It should be understood that, in order to prevent the loss of the form component data edited by the user after the user has dragged the form component data due to the misoperation of the user or the power failure of the mobile phone or the abnormal exit of the program, the form data in the current editing area needs to be locally stored after the user drags the form component editing area each time and edits the form for one time, and the specific operations are as follows:
the combination of a server and a client component based on NoSQL of a Realm platform is used, real-time and connected application programs and services are realized through quick and efficient synchronous protocol connection, the application programs and the services have quick response, and the performance is not influenced by the network state. The domain platform has two main components: a domain Database (real Database) and a domain Object Server (real Object Server). The two components work together to automatically synchronize data, thereby realizing a large number of use cases, and the first application off-line, the field service and the data collection application, the data availability and the user responsiveness are key mobile services.
When the form is dragged into the editing area, whether dragging is finished or not is judged in the dragging event, if dragging is finished, information of each component is obtained, wherein the information comprises a form ID formed by the components in the whole editing area, and the ID is used for ensuring that each different component form can be conveniently positioned. The method comprises the steps that component names and component IDs are set for each component to ensure the uniqueness of the components, a mobile terminal and a server terminal have unified specification constraints when a user-defined component is developed, the type of each component is expressed by using a value of a type, the server terminal is required to accurately master the function of each component, check information of the components is stored locally, when a user adds a new component again or modifies component information or deletes the component, all latest component information in a component editing area is stored locally again, original component information is deleted locally, and when the original component information is deleted, the component information is retrieved locally through a form ID formed by the components in the whole editing area.
Meanwhile, the system also sets an expiration date for the data stored in the local, and the step is very reused, if the expiration date is not set, the capacity of the local data in the mobile phone is limited, if the data has no expiration date, along with the continuous increase of the data volume, when the threshold value of the local data storage is reached, the new data cannot be stored, when the data reaches the expiration date, the expired data is stored locally or automatically cleared, in addition, when the mobile terminal submits the interface request to the server terminal, if the server terminal returns success, the data stored in the local also needs to be deleted, and when a user enters the originally edited page once, the form component information of the whole current interface is stored from the server terminal.
S30: and waiting for the feedback of the server, finishing the self-defined form set according to the feedback of the server, and naming the form.
It should be understood that, after the mobile terminal constructs a form (a component set in an interface according to the service requirement) according to the service requirement, the data needs to be submitted to the server, and the server analyzes and processes the data, and finally stores the data in a database according to the service rule, so that other users can access the service form interface which is not good and submit the information which needs to be collected by the form interface through the mobile phone terminal.
It should be understood that, after receiving the form information submitted by the mobile terminal, the server terminal analyzes the JSON data transmitted by the server terminal, the name of each component needs to be removed after the analyzed data is once, the components submitted by the mobile terminal are all Chinese, the Chinese needs to be converted into pinyin, then the duplicate name is judged, and if the duplicate pinyin is generated, the pinyin is converted into english.
It should be understood that the data of each request submitted by the mobile terminal will need to be saved in the database for persistence, since how many components are submitted in one request according to the service requirement by the user, what the names of the components are, and the system cannot know in advance, the data in the form components cannot be solidified by using a fixed table, and this needs to be implemented as follows:
each form request server dynamically creates a data table corresponding to the form request server, and 32-bit random character strings generated by UUIDs are used as indications for preventing table names from being reused.
According to the embodiment, the acquired component name is analyzed, and the Chinese name is converted into pinyin.
The above description is only for illustrative purposes and does not limit the technical solutions of the present application in any way.
Through the above description, it is easy to find that the embodiment performs adaptation of a self-defined form component page on the screen of the mobile terminal according to the screen information of the mobile terminal by acquiring the screen information of the current mobile terminal and by means of SafeaAreaView and read Navigation; acquiring a component dragging instruction, dragging a corresponding component to a specified position according to the component dragging instruction, performing data binding and data caching on each dragged component, and sending a user-defined form building request to a server; and waiting for the feedback of the server, finishing the self-defined form set according to the feedback of the server, and naming the form. The invention realizes that the mobile terminal can drag the user-defined form component, enhances the safety of the user-defined form component in the realization process, facilitates the use of teachers and students on the network course, and improves the office and study efficiency.
In addition, the embodiment of the invention also provides an implementation device based on the mobile terminal and capable of dragging the user-defined form component. As shown in fig. 3, the apparatus for implementing dragging a custom form component based on a mobile terminal includes: a screen adapting module 10, a self-defined form building module 20 and a response module 30.
The screen adapting module 10 is used for acquiring the screen information of the current mobile terminal, and adapting the self-defined form component page of the screen of the mobile terminal according to the screen information of the mobile terminal through SafeaEAView and ReactNavigation;
the user-defined form building module 20 is configured to obtain a component dragging instruction, drag a corresponding component to a specified position according to the component dragging instruction, perform data binding and data caching on each component subjected to dragging, and send a user-defined form building request to a server;
and the response module 30 is used for waiting for the feedback of the server, completing the set of the user-defined form according to the feedback of the server, and naming the form.
In addition, it should be noted that the above-described embodiments of the apparatus are merely illustrative, and do not limit the scope of the present invention, and in practical applications, a person skilled in the art may select some or all of the modules to implement the purpose of the embodiments according to actual needs, and the present invention is not limited herein.
In addition, the technical details that are not described in detail in this embodiment can be referred to a method for implementing a user-defined form component that can be dragged based on a mobile terminal according to any embodiment of the present invention, and are not described herein again.
In addition, an embodiment of the present invention further provides a medium, where the medium is a computer medium, where an implementation method program capable of dragging a user-defined form component based on a mobile terminal is stored on the computer medium, and when executed by a processor, the implementation method program capable of dragging a user-defined form component based on a mobile terminal implements the following operations:
s1, acquiring screen information of the current mobile terminal, and carrying out adaptation of a self-defined form component page on the screen of the mobile terminal according to the screen information of the mobile terminal through SafeaEAView and read Navigation;
s2, acquiring a component dragging instruction, dragging a corresponding component to a designated position according to the component dragging instruction, performing data binding and data caching on each dragged component, and sending a user-defined form building request to a server;
and S3, waiting for the feedback of the server, completing the self-defined form construction according to the feedback of the server, and naming the form.
Further, when executed by a processor, the implementation method program for dragging the user-defined form component based on the mobile terminal further implements the following operations:
acquiring information of an operating system of a current mobile terminal, wherein the information of the operating system comprises: and the Android system and the IOS system improve the compatibility of the system through a real Native framework according to the information of the current mobile terminal operating system.
Further, when executed by a processor, the implementation method program for dragging the user-defined form component based on the mobile terminal further implements the following operations:
acquiring screen information of a current mobile terminal, wherein the screen information is proportional data between the height and the width of a screen, and carrying out self-defined form component page adaptation on the screen of the mobile terminal through SafeaAreaView and read Navigation according to the proportional data.
Further, when executed by a processor, the implementation method program for dragging the user-defined form component based on the mobile terminal further implements the following operations:
the method comprises the following steps of carrying out interface typesetting layout on a screen which is matched with a user-defined form component page, taking the upper part of the whole interface as a title bar of the interface, taking the left part of the interface except the title bar as a component menu bar, taking the rest interface parts as components to be dragged and a component editing area, wherein the component menu bar is used for storing form component elements, and the single component elements comprise: single line, radio box, check box, multiple line, multiple check box, date, audio, video, upload picture, geographical location information, mailbox, and region.
Further, when executed by a processor, the implementation method program for dragging the user-defined form component based on the mobile terminal further implements the following operations:
the method comprises the steps of obtaining a component dragging instruction, dragging a corresponding component to a designated position according to the component dragging instruction, setting waiting time, recording time for receiving the next dragging instruction in real time, recording information of the component corresponding to the dragging instruction after the time is longer than the waiting time, distributing a form ID for the component, obtaining form IDs of the components corresponding to all the dragging instructions, generating a form ID query table according to the form IDs, carrying out data binding and data caching on the components after dragging, and sending a custom form building request to a server.
Further, when executed by a processor, the implementation method program for dragging the user-defined form component based on the mobile terminal further implements the following operations:
and carrying out data binding and data caching on each dragged component, setting caching time, recording the storage time of each dragged component data in real time, deleting each dragged component data when the storage time is greater than the caching time, and sending a corresponding report to a user.
Further, when executed by a processor, the implementation method program for dragging the user-defined form component based on the mobile terminal further implements the following operations:
when the server receives the user-defined form building request, the name information of each component is extracted from the user-defined form building request, the name of each component is converted into pinyin spelling, the converted pinyin spelling is checked, when the existence of duplicate pinyin is found, the component name corresponding to the duplicate pinyin is converted into English, and after the checking is finished, the converted component name is stored in the user-defined form building request again and fed back to the system.
The above description is only for the purpose of illustrating the preferred embodiments of the present invention and is not to be construed as limiting the invention, and any modifications, equivalents, improvements and the like that fall within the spirit and principle of the present invention are intended to be included therein.
Claims (10)
1. A realization method based on a mobile terminal draggable user-defined form component is characterized in that: comprises the following steps;
s1, acquiring screen information of the current mobile terminal, and carrying out adaptation of a self-defined form component page on the screen of the mobile terminal according to the screen information of the mobile terminal through SafeaEAView and read Navigation;
s2, acquiring a component dragging instruction, dragging a corresponding component to a designated position according to the component dragging instruction, performing data binding and data caching on each dragged component, and sending a user-defined form building request to a server;
and S3, waiting for the feedback of the server, completing the self-defined form construction according to the feedback of the server, and naming the form.
2. The method for implementing a draggable user-defined form component based on a mobile terminal as claimed in claim 1, wherein: in step S1, before acquiring screen information of a current mobile terminal and performing adaptation of a user-defined form component page to a screen of the mobile terminal according to the screen information of the mobile terminal through SafeAreaView and read Navigation, the method further includes the following steps of acquiring operating system information of the current mobile terminal, where the operating system information includes: and the Android system and the IOS system improve the compatibility of the system through a real Native framework according to the information of the current mobile terminal operating system.
3. The method for implementing a draggable user-defined form component based on a mobile terminal as claimed in claim 2, wherein: in step S1, acquiring screen information of the current mobile terminal, and performing adaptation of a user-defined form component page on the screen of the mobile terminal according to the screen information of the mobile terminal through SafeAreaView and read Navigation, and further including the following steps of acquiring screen information of the current mobile terminal, where the screen information is proportional data between the height and width of the screen, and performing adaptation of the user-defined form component page on the screen of the mobile terminal through SafeAreaView and read Navigation according to the proportional data.
4. The method for implementing a draggable user-defined form component based on a mobile terminal as claimed in claim 3, wherein: in step S2, obtaining a component dragging instruction, dragging a corresponding component to a designated position according to the component dragging instruction, performing data binding and data caching on each component that finishes dragging, and before sending a user-defined form building request to a server, the method further includes the following steps of performing interface typesetting layout on a screen that finishes user-defined form component page adaptation, taking the upper part of the whole interface as a title bar of the interface, taking the left part of the interface excluding the title bar as a component menu bar, taking the remaining interface part as a component dragging and component editing area, where the component menu bar is used to store form component elements, where the single component elements include: single line, radio box, check box, multiple line, multiple check box, date, audio, video, upload picture, geographical location information, mailbox, and region.
5. The method for implementing a draggable user-defined form component based on a mobile terminal as claimed in claim 4, wherein: in step S2, a component dragging instruction is obtained, a corresponding component is dragged to a designated position according to the component dragging instruction, data binding and data caching are performed on each component that is dragged, and a user-defined form building request is sent to a server.
6. The method for implementing a draggable user-defined form component based on a mobile terminal as claimed in claim 5, wherein: and performing data binding and data caching on each dragged component, setting caching time, recording the storage time of each dragged component data in real time, deleting each dragged component data when the storage time is greater than the caching time, and sending a corresponding report to a user.
7. The method for implementing a draggable user-defined form component based on a mobile terminal as claimed in claim 5, wherein: after sending a user-defined form building request to a server, the method also comprises the following steps that when the server receives the user-defined form building request, the name information of each component is extracted from the user-defined form building request, the name of each component is converted into pinyin spelling, the converted pinyin spelling is checked, when the duplicate pinyin is found, the component name corresponding to the duplicate pinyin is converted into English, and after the checking is finished, the converted component name is stored in the user-defined form building request again and fed back to a system.
8. The utility model provides an apparatus for realizing based on can dragging custom form subassembly of removal end, its characterized in that, the apparatus for realizing based on can dragging custom form subassembly of removal end includes:
the screen adaptation module is used for acquiring the screen information of the current mobile terminal and adapting the self-defined form component page of the screen of the mobile terminal according to the screen information of the mobile terminal through SafeaEAView and ReactNavigation;
the user-defined form building module is used for acquiring a component dragging instruction, dragging a corresponding component to a specified position according to the component dragging instruction, performing data binding and data caching on each dragged component, and sending a user-defined form building request to a server;
and the response module is used for waiting for the feedback of the server, completing the self-defined form construction according to the feedback of the server and naming the form.
9. An apparatus, characterized in that the apparatus comprises: a memory, a processor and a program for implementing a method based on a mobile-end draggable user-defined form component stored in the memory and running on the processor, wherein the program for implementing a method based on a mobile-end draggable user-defined form component is configured to implement the steps of the method for implementing a method based on a mobile-end draggable user-defined form component according to any one of claims 1 to 7.
10. A medium, which is a computer medium, and in which a program for implementing a method for implementing a draggable user-defined form component based on a mobile terminal is stored, and when the program for implementing a draggable user-defined form component based on a mobile terminal is executed by a processor, the steps of the method for implementing a draggable user-defined form component based on a mobile terminal according to any one of claims 1 to 7 are implemented.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010398397.XA CN111597489B (en) | 2020-05-12 | 2020-05-12 | Realization method and device for draggable custom form component based on mobile terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010398397.XA CN111597489B (en) | 2020-05-12 | 2020-05-12 | Realization method and device for draggable custom form component based on mobile terminal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111597489A true CN111597489A (en) | 2020-08-28 |
| CN111597489B CN111597489B (en) | 2023-09-29 |
Family
ID=72187078
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010398397.XA Active CN111597489B (en) | 2020-05-12 | 2020-05-12 | Realization method and device for draggable custom form component based on mobile terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111597489B (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112800751A (en) * | 2021-02-19 | 2021-05-14 | 上海中通吉网络技术有限公司 | Method, device, equipment and storage medium for configuring and checking mobile terminal webpage form |
| CN113282518A (en) * | 2021-07-22 | 2021-08-20 | 广州市玄武无线科技股份有限公司 | Method and device for tracking and displaying form behaviors of mobile terminal in real time |
| CN113961558A (en) * | 2021-10-08 | 2022-01-21 | 上海信宝博通电子商务有限公司 | Front-end data storage method and device and storage medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20070300159A1 (en) * | 2006-06-23 | 2007-12-27 | International Business Machines Corporation | Drag and Drop Quoting Mechanism for Use with Discussion Forums |
| CN105653644A (en) * | 2015-12-28 | 2016-06-08 | 北京中电普华信息技术有限公司 | Page constructor and page construction method |
| CN106021333A (en) * | 2016-05-06 | 2016-10-12 | 北京致远协创软件有限公司 | An intelligent mobile terminal webpage form generating method and device |
| CN108628812A (en) * | 2017-03-16 | 2018-10-09 | 北京京东尚科信息技术有限公司 | Method, apparatus, electronic equipment and the readable storage medium storing program for executing of self-defined face single mode plate |
| CN110362307A (en) * | 2019-06-13 | 2019-10-22 | 深圳壹账通智能科技有限公司 | Forms pages configuration method and server |
-
2020
- 2020-05-12 CN CN202010398397.XA patent/CN111597489B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20070300159A1 (en) * | 2006-06-23 | 2007-12-27 | International Business Machines Corporation | Drag and Drop Quoting Mechanism for Use with Discussion Forums |
| CN105653644A (en) * | 2015-12-28 | 2016-06-08 | 北京中电普华信息技术有限公司 | Page constructor and page construction method |
| CN106021333A (en) * | 2016-05-06 | 2016-10-12 | 北京致远协创软件有限公司 | An intelligent mobile terminal webpage form generating method and device |
| CN108628812A (en) * | 2017-03-16 | 2018-10-09 | 北京京东尚科信息技术有限公司 | Method, apparatus, electronic equipment and the readable storage medium storing program for executing of self-defined face single mode plate |
| CN110362307A (en) * | 2019-06-13 | 2019-10-22 | 深圳壹账通智能科技有限公司 | Forms pages configuration method and server |
Non-Patent Citations (1)
| Title |
|---|
| MR•XU * |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112800751A (en) * | 2021-02-19 | 2021-05-14 | 上海中通吉网络技术有限公司 | Method, device, equipment and storage medium for configuring and checking mobile terminal webpage form |
| CN113282518A (en) * | 2021-07-22 | 2021-08-20 | 广州市玄武无线科技股份有限公司 | Method and device for tracking and displaying form behaviors of mobile terminal in real time |
| CN113282518B (en) * | 2021-07-22 | 2021-12-10 | 广州市玄武无线科技股份有限公司 | Method and device for tracking and displaying form behaviors of mobile terminal in real time |
| CN113961558A (en) * | 2021-10-08 | 2022-01-21 | 上海信宝博通电子商务有限公司 | Front-end data storage method and device and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111597489B (en) | 2023-09-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111597489B (en) | Realization method and device for draggable custom form component based on mobile terminal | |
| CN107391134B (en) | Method and device for automatically generating and dynamically transforming universal mobile application interactive interface | |
| US20070130518A1 (en) | Method and apparatus for a personalized web page | |
| US20130339459A1 (en) | Information sharing apparatus, information sharing system, and method of processing information | |
| CN107861982A (en) | It is dynamically determined method, terminal, server and the system of application program page layout | |
| US10776570B2 (en) | Supporting digital ink in markup language documents | |
| CN105824517B (en) | A kind of implementation method and device of desktop | |
| US10372512B2 (en) | Method and apparatus for automatic processing of service requests on an electronic device | |
| CN108647348A (en) | Textual presentation method, apparatus, equipment and storage medium | |
| CN108958731B (en) | Application program interface generation method, device, equipment and storage medium | |
| US20090083284A1 (en) | Delivery server for delivering documents to be browsed to mobile terminal, mobile terminal, and delivery system for delivering documents to be browsed to mobile terminal | |
| CN112925520A (en) | Method and device for building visual page and computer equipment | |
| JP2012064207A (en) | Host device and content display method of the same | |
| CN115510347A (en) | Presentation file conversion method and device, electronic equipment and storage medium | |
| US10901582B2 (en) | Information processing apparatus, communication system, and image processing method | |
| US20120089895A1 (en) | Mobile terminal device and recording medium | |
| US20150149586A1 (en) | Information processing apparatus, information processing method, and information processing system | |
| CN113158619A (en) | Document processing method and device, computer readable storage medium and computer equipment | |
| US8683608B2 (en) | Communication method, display apparatus, moderator terminal apparatus, user terminal apparatus, and multi-user communication system including the same | |
| CN114093208A (en) | Information display method and device, computer equipment and storage medium | |
| CN113220297A (en) | Webpage style dynamic generation method and device, storage medium and electronic equipment | |
| CN113687809A (en) | Information display method and device, electronic equipment and readable storage medium | |
| CN101676905A (en) | Layout for modifying resource contents based on customized rules | |
| CN111787127A (en) | Classroom information transmission method and classroom information transmission system | |
| KR20140134075A (en) | Learning Management Server and method |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Address after: No.01-6, 1st floor, building 6, international enterprise center, special 1, Guanggu Avenue, Donghu New Technology Development Zone, Wuhan City, Hubei Province, 430000 Applicant after: Wuhan Meihe Yisi Digital Technology Co.,Ltd. Address before: No.01-6, 1st floor, building 6, international enterprise center, special 1, Guanggu Avenue, Donghu New Technology Development Zone, Wuhan City, Hubei Province, 430000 Applicant before: HUBEI MEIHE YISI EDUCATION TECHNOLOGY Co.,Ltd. |
|
| CB02 | Change of applicant information | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |