CN111597489B - Realization method and device for draggable custom form component based on mobile terminal - Google Patents
Realization method and device for draggable custom form component based on mobile terminal Download PDFInfo
- Publication number
- CN111597489B CN111597489B CN202010398397.XA CN202010398397A CN111597489B CN 111597489 B CN111597489 B CN 111597489B CN 202010398397 A CN202010398397 A CN 202010398397A CN 111597489 B CN111597489 B CN 111597489B
- Authority
- CN
- China
- Prior art keywords
- component
- mobile terminal
- dragging
- information
- server
- 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.)
- Active
Links
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
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)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application provides a mobile terminal-based realization method and device for a draggable custom form component. Comprising the following steps: acquiring screen information of a current mobile terminal, and performing self-defined form component page adaptation on a screen of the mobile terminal according to the screen information of the mobile terminal through safe view and action Navigation; 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 component which is subjected to dragging, and sending a self-defined form construction request to a server; waiting for feedback of the server, completing the construction of the self-defined form according to the feedback of the server, and naming the form. The application realizes the mobile terminal draggable self-defined form component, and simultaneously enhances the safety of the self-defined form component in the realization process, thereby facilitating the use of network lessons and students and improving the office learning efficiency.
Description
Technical Field
The application relates to the technical field of computer software, in particular to a mobile terminal-based draggable custom form component realization method and device.
Background
The custom forms are widely used, and are involved in custom investigation in the custom workflow of OA and CMS function extension. However, most of the custom form systems in the market are designed based on the PC end, and the custom form system is limited to be operated only by using a desktop or notebook computer.
For the mobile terminal, the form is also applied, but the form of the mobile terminal is in a preset format and cannot be easily changed, and the situation that the form is not customized is further realized, so that great inconvenience is caused, and therefore, a method for realizing the form customization of the mobile terminal is needed.
The foregoing is provided merely for the purpose of facilitating understanding of the technical solutions of the present application and is not intended to represent an admission that the foregoing is prior art.
Disclosure of Invention
In view of the above, the application provides a method and a device for realizing a form component capable of being dragged based on a mobile terminal, which aims to solve the technical problem that the prior art cannot realize the form component customization by dragging the form component by the mobile terminal.
The technical scheme of the application is realized as follows:
in one aspect, the application provides a mobile terminal-based implementation method for a draggable self-defined form component, which comprises the following steps:
s1, acquiring screen information of a current mobile terminal, and performing self-defined form assembly page adaptation on a screen of the mobile terminal according to the screen information of the mobile terminal through safe view and action 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 component which is dragged, and sending a user-defined form construction request to a server;
and S3, waiting for feedback of the server, completing the construction of the self-defined form according to the feedback of the server, and naming the form.
On the basis of the above technical solution, preferably, in step S1, the method further includes the step of acquiring current mobile terminal operating system information before the screen of the mobile terminal is adapted to a user-defined form component page according to the screen information of the mobile terminal through safejeview and reaction Navigation, 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 current mobile terminal operating system information.
Based on the above technical solution, preferably, in step S1, screen information of the current mobile terminal is obtained, and user-defined form component page adaptation is performed on the screen of the mobile terminal according to the screen information of the mobile terminal through safeview and exact Navigation.
On the basis of the above technical solution, preferably, in step S2, a component dragging instruction is obtained, a corresponding component is dragged to a designated position according to the component dragging instruction, and data binding and data caching are performed on each component after the dragging, and before a user-defined form assembly request is sent to a server, the method further includes the steps of performing interface typesetting layout on a screen for which user-defined form component page adaptation is completed, using an upper part of an entire interface as a title bar of the interface, using a left part of the interface except for the title bar as a component menu bar, using the rest interface part as a component dragging and component editing area, wherein the component menu bar is used for storing form component elements, and the form component elements include: single line, single selection box, check box, multiple lines, multiple selection boxes, date, audio, video, uploaded pictures, geographic location information, mailboxes, and locales.
On the basis of the above technical solution, preferably, 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 after dragging is performed on each component, a user-defined form construction request is sent to a server side, the method further includes the steps of obtaining the component dragging instruction, dragging the corresponding component to the 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 completed dragging instruction when the time is greater than the waiting time, distributing a form ID for the component, obtaining the form IDs of the components corresponding to all the dragging instructions, generating a form ID lookup table according to the form IDs, performing data binding and data caching on each component after dragging, and sending the user-defined form construction request to the server side.
On the basis of the technical scheme, the method comprises the steps of preferably binding and caching data of all the components which are dragged, setting caching time, recording storage time of all the component data which are dragged in real time, deleting all the component data which are dragged when the storage time is longer 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 construction request is sent to the server, the method further comprises the following steps that when the user-defined form construction request is received by the server, name information of each component is extracted from the user-defined form construction request, names of each component are converted into pinyin spelling, the converted pinyin spelling is checked, when the existence of the rename pinyin is found, the names of the components corresponding to the rename pinyin are converted into English, after the checking is completed, the converted names of each component are restored into the user-defined form construction request, and feedback is carried out to the system.
Still further preferably, the implementation device based on the mobile terminal draggable custom form component includes:
the screen adaptation module is used for acquiring screen information of the current mobile terminal, and carrying out self-defined form assembly page adaptation on the screen of the mobile terminal according to the screen information of the mobile terminal through safe view and action Navigation;
the self-defined form building module is used for acquiring a component dragging instruction, dragging a corresponding component to a designated position according to the component dragging instruction, carrying out data binding and data caching on each component which is dragged, and sending a self-defined form building request to a server;
and the response module is used for waiting for the feedback of the server, completing the construction of the custom form according to the feedback of the server, and naming the custom form.
In a second aspect, the implementation method based on the mobile terminal draggable custom form component further includes a device, where the device includes: the system comprises a memory, a processor and a mobile terminal draggable custom form component-based implementation method program stored on the memory and capable of running on the processor, wherein the mobile terminal draggable custom form component-based implementation method program is configured to implement the steps of the mobile terminal draggable custom form component-based implementation method as described above.
In a third aspect, the implementation method based on the mobile terminal draggable self-defined form component further includes a medium, where the medium is a computer medium, and an implementation method program based on the mobile terminal draggable self-defined form component is stored on the computer medium, where the implementation method program based on the mobile terminal draggable self-defined form component implements the steps of the implementation method based on the mobile terminal draggable self-defined form component described above when executed by a processor.
Compared with the prior art, the realization method of the draggable custom form assembly based on the mobile terminal has the following beneficial effects:
(1) The compatibility of the whole system is improved through the real Native framework, so that the system can be more suitable for the automatic screen adaptation of double platforms (Andriod and IOS), the stability and high reusability of the whole dragging self-defining process are ensured, and the user experience is improved.
(2) The data storage is carried out on the components dragged by the user in real time, so that the loss of data can be greatly avoided, and the safety and stability of the whole self-defined form component in the construction process are ensured.
Drawings
In order to more clearly illustrate the embodiments of the application 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 application, 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 schematic diagram of a device of a hardware operating environment according to an embodiment of the present application;
FIG. 2 is a flowchart of a first embodiment of a method for implementing a mobile terminal-based draggable custom form assembly according to the present application;
fig. 3 is a schematic functional module diagram of a first embodiment of a mobile terminal-based implementation method of the draggable custom form assembly according to the present application.
Detailed Description
The following description of the embodiments of the present application will clearly and fully describe the technical aspects of the embodiments of the present application, and it is apparent that the described embodiments are only some embodiments of the present application, not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the present application without making any inventive effort, are intended to fall within the scope of the present application.
As shown in fig. 1, the apparatus may include: a processor 1001, such as a central processing unit (Central Processing Unit, CPU), a communication bus 1002, a user interface 1003, a network interface 1004, a memory 1005. Wherein the communication bus 1002 is used to enable connected communication between these components. The user interface 1003 may include a Display, an input unit such as a Keyboard (Keyboard), and the optional user interface 1003 may further 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 high-speed random access Memory (Random Access Memory, RAM) Memory or a stable nonvolatile Memory (NVM), such as a disk Memory. The memory 1005 may also optionally be a storage device separate from the processor 1001 described above.
It will be appreciated by those skilled in the art that the structure shown in fig. 1 does not constitute a limitation of the apparatus, and in actual practice the apparatus may include more or less components than those illustrated, or certain components may be combined, or different arrangements of components.
As shown in fig. 1, the memory 1005 as a medium may include an operating system, a network communication module, a user interface module, and an implementation method program based on a mobile terminal draggable custom form component.
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 a system of an implementation method based on a 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 in the implementation method equipment based on the mobile terminal draggable self-defined form component can be arranged in the implementation method equipment based on the mobile terminal draggable self-defined form component, and the implementation method equipment based on the mobile terminal draggable self-defined form component calls the implementation method program based on the mobile terminal draggable self-defined form component stored in the memory 1005 through the processor 1001, and executes the implementation method based on the mobile terminal draggable self-defined form component.
Referring to fig. 2, fig. 2 is a flow chart of a first embodiment of the implementation method of the mobile terminal-based draggable custom form assembly according to the present application.
In this embodiment, the implementation method based on the mobile terminal draggable custom form component includes the following steps:
s10: acquiring screen information of a current mobile terminal, and performing self-defined form component page adaptation on the screen of the mobile terminal according to the screen information of the mobile terminal through safe view and action Navigation.
It should be appreciated that currently mainstream mobile end operating systems are primarily Android and IOS, as is well known. Two operating systems develop software on respective systems by using Java and Object-C respectively, so that cross-platform development is mainly solved by using a real Native framework, reasonable interface layout is performed by using the real Native framework, and pixel density of equipment is scaled according to width (height) by using safe area view and real Navigation according to the size of different mobile phone terminal screens so as to achieve automatic adaptation.
It should be understood that the dual-platform (Android and IOS) mobile phone screen is automatically adapted, and the fact that the real Native uses Flexbox in terms of layout, so that in order to ensure that the code has higher reusability and compatibility, the styles of the Android and IOS need to be kept as consistent as possible. In order to improve the compatibility of codes, it is required to determine whether the platform of the current system is Android or IOS.
It should be understood that the following applies specifically to adaptations of different special cases:
shadow Propsapi needs to be used when the view is adapted to set shadows, the api supports the IOS platform, and Shadow needs to be used when the Shadow is set under the Android platform.
Default background of text. The background of the Chinese character is gray in IOS, the background of the Android Chinese character is transparent in default, and the background color is '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 in IOS side and is vertically centered, and the underlined is set transparent in Android and is vertically centered.
A bottom navigation bar. The method is realized by using a navigator IOS component in IOS, but the Android is realized by using a real-native-tab-navigator component of a third party without the component, and the step navigation of the Android terminal is realized by using the components comprising: downloading the reaction-active-tab-navigator and introducing the reaction-active-tab-navigator component into a file to be used of the project.
In order to enable the icons to be adapted to devices of different resolutions. Three sizes of 1x, 2x, 3x are required to be provided for each icon, and then pictures of different sizes are dynamically selected to be displayed by real Native according to the resolution of the screen.
And controlling the styles under different platforms by using a set of style sheet files, defining the attributes in the style sheets by using underlines by using the styles which need to be processed by the two platform styles, wherein the writing method of 'height: 100' represents that the unified height of IOS and Android is 100, and the writing method of 'height: 100' represents that the styles are independently set for the Android platform and only take effect on the Android platform. And the three-eye operator is used for judging where the adaptation is needed.
It should be appreciated that the resolution of the IOS11 front screen is 375 x 667, while the height of the iPhoneX screen becomes 812, with the top 145 higher. The problem of adaptation is basically solved around the UI, and the core idea of adaptation is: avoid the safe area, make the layout self-adaptive
While the height of the IOS11 front navigation bar is 64, where the height of the status bar is 20. The status bar (status bar) height of iPhoneX becomes 44 (sensor area height), which in the case of custom TopBar, requires a corresponding adaptation.
The virtual Home area is added at the bottom of the iPhoneX, the default height of TabBar is changed from 49 to 83 due to the safety area, 34 (the height of the Home area) is increased, and the self-defined bottom TabBar changes the adaptation scheme. The specific implementation method is as follows:
1. the PaddingTop and Paddingbottom are modified by adding height to the top and bottom navigational layouts of each interface. And meanwhile, in order to be applicable to the iOS11 before, the system can select different Styles according to the version. The first step is to determine whether the current handset device is an iPhoneX. And judging through the screen height.
2. And according to the device environment version, touching the area, acquiring a corresponding Padding style, and assigning a value to the safe area style.
3. The style is passed to the top level layout View, making the layout adaptive.
S20: 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 component which is subjected to dragging, and sending a self-defined form construction request to a server.
It should be understood that, in this embodiment, the layout is performed on the page before the dragging, and the whole interface is composed of an upper part, a left part and a right part, where the upper part is the title bar of the current interface, the left side is the component menu bar, and the right side is the component dragging and editing area.
It should be appreciated that the left menu bar is a set of all custom form component elements, including: single line, single selection box, check box, multiple line, multiple selection box, date, audio, video, upload picture, geographic location information, mailbox and area components, and can view the obscured components by sliding up and down by finger through scroll bars. In order to save bandwidth and improve the uploading speed, the uploaded video file needs to be compressed, and the compression is realized by using the action-active-video-processing, so that the action-active-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 default to three-level linkage, which is implemented in this embodiment using reach-native-picker.
It should be understood that, the user selects the required components to the right component editing area through the left form component menu according to the service requirement by sliding a finger (at most 20 components can be dragged from the left component menu in the right component editing area, and 20 components are the default number, but can be set through the background so that the maximum upper limit value is 50, and the general service requirement is enough for 20 components), and the current multiple form components form a model.
For example, statistics on the daily attendance of students needs to acquire the following information: number, name, gender, location, and uploading 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 service requirements, setting the name of the component as a serial number after dragging a single-row component, setting the name of the component after dragging a second single-row component, setting the name of the component as gender by dragging a radio button component, and setting the name of each radio button for the radio button component independently. The geographical information position component is dragged to set the component name as a location point, the uploading picture component is selected to set the component name as an uploading picture, and after all the components are dragged, the components can be arranged in a sliding mode in sequence. The operation is convenient and simple, the user can be proficient in operation by simply demonstrating once, and the operation is also performed at the mobile phone terminal, so that the operation is not limited by a computer, or the network (only a mobile network with a mobile phone is needed), thereby greatly improving the use efficiency, saving the time cost for the user, and reducing the communication and training cost for business software companies.
It should be appreciated that the custom component may be edited by selecting the component to the right component editing area, the component name may be set, and the corresponding rule may be selected from the rule check library and appended to the component. The check rule base stores common check rules including check of non-null, length, mailbox, digital format, letter format, phone and mobile phone format, identity card, special character, chinese, date format and uploaded file suffix name. The user can also use the custom check rule, after selecting the custom check rule, the rule name of the custom check rule and the regular expression of the check component need to be input, the system can check the rule name (check rule with a duplicate name is not allowed), then the correctness of the grammar and the format of the regular expression input by the user can be checked, and after the check, the custom check rule is stored in the check rule library. As a new verification rule, the user may select the verification rule when editing other components. Components that do not require or drag errors may also delete the corresponding components by clicking the delete button.
It should be understood that, according to the dragged information in the above embodiment, the system monitors the finger sliding through the real-time-active-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, judging the sliding of the scrollview after the touch event of the view; and finally, allowing the scrollview to slide after the touch event is ended.
It should be understood that, in order to prevent the user from misoperation or power-off of the mobile phone or abnormal exit of the program, the data of the form component edited after the user has dragged is lost, the form data in the current editing area needs to be locally stored after the user drags to the component editing area each time and the edited form is customized each time, and the specific operations are as follows:
the real-time and connected application programs and services are realized by using the combination of the NoSQL based server and the client component of the real-time platform through a rapid and efficient synchronous protocol connection, and the application programs and the services respond rapidly, and the performance is not influenced by the network state. The domain platform has two main components: a domain Database (Realm Database) and a domain object server (Realm Object Server). The two components work cooperatively to automatically synchronize data, thereby realizing a large number of use cases, and the first application program, the field service and the data collection application program, the data availability and the user responsiveness which are offline are key mobile services.
When a form is dragged into an editing area, judging whether the dragging is completed or not in a dragging event, and if so, acquiring information of each component, 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 of setting a unique ID for each component to ensure the uniqueness of the component, ensuring that a mobile terminal and a service terminal have unified standard constraint when developing a custom component, using a type value to represent the type of each component, ensuring that the service terminal also needs to accurately grasp the function of each component, storing verification information of the component to the local, and storing all latest component information in a component editing area to the local when a user newly adds a new component or modifies component information or deletes the component, wherein original component information is deleted in the local, and the component information retrieved in the local through a form ID formed by the components in the whole editing area when deleting the original component information.
Meanwhile, the system can set an expiration date for the data stored locally, if the expiration time is not set, the capacity of the local data in the mobile phone is limited, if the data has no expiration date, the new data cannot be stored along with the continuous increase of the data quantity, when the threshold value of the local data storage is reached, the local storage can automatically clear the expired data when the expiration time is reached, 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 is also required to be deleted, and the user enters the original edited page again, is the form component information of the whole current interface stored from the server terminal.
S30: waiting for feedback of the server, completing the construction of the custom form according to the feedback of the server, and naming the custom form.
It should be understood that after the mobile terminal constructs a form (a set of components according to service requirements in an interface) according to service requirements, the mobile terminal needs to submit the data to the server, the server analyzes the data, and finally stores the data in a database according to service rules, so that other users can access the issued service form interface through the mobile terminal, and submit information to be collected on the form interface.
It should be understood that after the server receives the form information submitted by the mobile terminal, the server analyzes the JSON data transmitted by the mobile terminal, the analyzed data needs to sequentially obtain the name of each component, the components submitted by the mobile terminal are Chinese, the Chinese needs to be converted into pinyin, then the name of the pinyin is subjected to duplicate name judgment, and if duplicate name pinyin appears, the name of the mobile terminal 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, and because the user submits how many components in one request according to the service requirement, the names of the components are not known in advance, and therefore, the data in the form components cannot be solidified by using a fixed table, the implementation needs to be performed as follows:
each form request server dynamically creates a data table corresponding to the data table, and a 32-bit random character string generated by UUID is used as a table name to prevent the table name from being repeatedly used.
According to the embodiment, the acquired component names are analyzed and the Chinese names are converted into pinyin.
It should be noted that the foregoing is merely illustrative, and does not limit the technical solution of the present application in any way.
It is easy to find from the above description that, in this embodiment, by acquiring screen information of a current mobile terminal, the user-defined form component page is adapted to the screen of the mobile terminal according to the screen information of the mobile terminal through safe area view and action Navigation; 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 component which is subjected to dragging, and sending a self-defined form construction request to a server; waiting for feedback of the server, completing the construction of the self-defined form according to the feedback of the server, and naming the form. The application realizes the mobile terminal draggable self-defined form component, and simultaneously enhances the safety of the self-defined form component in the realization process, thereby facilitating the use of network lessons and students and improving the office learning efficiency.
In addition, the embodiment of the application also provides a device for realizing the dragging self-defined form component based on the mobile terminal. As shown in fig. 3, the implementation device based on the mobile terminal draggable custom form component includes: the system comprises a screen adaptation module 10, a custom form construction module 20 and a response module 30.
The screen adaptation module 10 is used for acquiring screen information of the current mobile terminal, and performing self-defined form assembly page adaptation on the screen of the mobile terminal according to the screen information of the mobile terminal through safe view and action Navigation;
the self-defined form construction module 20 is configured to obtain a component dragging instruction, drag a corresponding component to a designated position according to the component dragging instruction, perform data binding and data caching on each component after dragging, and send a self-defined form construction request to a server;
the response module 30 is configured to wait for feedback from the server, complete the building of the custom form according to the feedback from the server, and name the custom form.
In addition, it should be noted that the above embodiment of the apparatus is merely illustrative, and does not limit the scope of the present application, and in practical application, a person skilled in the art may select some or all modules according to actual needs to achieve the purpose of the embodiment, which is not limited herein.
In addition, technical details which are not described in detail in the present embodiment can refer to the implementation method based on the mobile terminal draggable custom form component provided in any embodiment of the present application, and are not described herein again.
In addition, the embodiment of the application also provides a medium, which is a computer medium, wherein the computer medium stores an implementation method program based on the mobile terminal draggable self-defined form component, and when the implementation method program based on the mobile terminal draggable self-defined form component is executed by a processor, the following operations are implemented:
s1, acquiring screen information of a current mobile terminal, and performing self-defined form assembly page adaptation on a screen of the mobile terminal according to the screen information of the mobile terminal through safe view and action 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 component which is dragged, and sending a user-defined form construction request to a server;
and S3, waiting for feedback of the server, completing the construction of the custom form according to the feedback of the server, and naming the custom form.
Further, the implementation method program based on the mobile terminal draggable custom form component further realizes the following operations when executed by the processor:
acquiring current mobile terminal operating system information, wherein the operating system information comprises: and the Android system and the IOS system improve the compatibility of the system through a real Native framework according to the current mobile terminal operating system information.
Further, the implementation method program based on the mobile terminal draggable custom form component further realizes the following operations when executed by the processor:
acquiring screen information of a current mobile terminal, wherein the screen information is proportion data between the height and the width of the screen, and carrying out self-defined form assembly page adaptation on the screen of the mobile terminal through safe view and action Navigation according to the proportion data.
Further, the implementation method program based on the mobile terminal draggable custom form component further realizes the following operations when executed by the processor:
performing interface typesetting layout on a screen with self-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 except the title bar as a component menu bar, dragging the rest interface part as a component and a component editing area, wherein the component menu bar is used for storing form component elements, and the form component elements comprise: single line, single selection box, check box, multiple lines, multiple selection boxes, date, audio, video, uploaded pictures, geographic location information, mailboxes, and locales.
Further, the implementation method program based on the mobile terminal draggable custom form component further realizes the following operations when executed by the processor:
acquiring a component dragging instruction, dragging a 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 finished dragging instruction when the time is longer than the waiting time, distributing a form ID for the component, acquiring the form IDs of the components corresponding to all the dragging instructions, generating a form ID lookup table according to the form IDs, carrying out data binding and data caching on the components of which the dragging is finished, and sending a self-defined form construction request to a server.
Further, the implementation method program based on the mobile terminal draggable custom form component further realizes the following operations when executed by the processor:
and carrying out data binding and data caching on each component which is completed to be dragged, setting caching time, recording storage time of each component data which is completed to be dragged in real time, deleting each component data which is completed to be dragged when the storage time is greater than the caching time, and sending a corresponding report to a user.
Further, the implementation method program based on the mobile terminal draggable custom form component further realizes the following operations when executed by the processor:
when the server receives the self-defined form construction request, the name information of each component is extracted from the self-defined form construction request, the names of each component are converted into pinyin spellings, the converted pinyin spellings are checked, when the existence of the duplicate pinyin is found, the component names corresponding to the duplicate pinyin are converted into English, after the checking is completed, the converted component names are restored into the self-defined form construction request, and the system is fed back.
The foregoing description of the preferred embodiments of the application is not intended to be limiting, but rather is intended to cover all modifications, equivalents, alternatives, and improvements that fall within the spirit and scope of the application.
Claims (5)
1. A realization method of a draggable custom form component based on a mobile terminal is characterized by comprising the following steps: comprises the following steps of;
acquiring current mobile terminal operating system information, wherein the operating system information comprises: the Android system and the IOS system improve the compatibility of the system through a real Native framework according to the current mobile terminal operating system information;
s1, acquiring screen information of a current mobile terminal, and performing self-defined form assembly page adaptation on a screen of the mobile terminal according to the screen information of the mobile terminal through safe view and action Navigation;
acquiring screen information of a current mobile terminal, wherein the screen information is proportion data between the height and the width of the screen, and carrying out self-defined form assembly page adaptation on the screen of the mobile terminal through safe view and action Navigation according to the proportion data;
performing interface typesetting layout on a screen with self-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 except the title bar as a component menu bar, dragging the rest interface part as a component and a component editing area, wherein the component menu bar is used for storing form component elements, and the form component elements comprise: single line, single selection box, check box, multiple lines, multiple selection boxes, date, audio, video, uploaded pictures, geographic location information, mailbox, and region;
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 component which is dragged, and sending a user-defined form construction request to a server;
acquiring a component dragging instruction, dragging a 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 finished dragging instruction when the time is longer than the waiting time, distributing a form ID for the component, acquiring the form IDs of the components corresponding to all the dragging instructions, generating a form ID lookup table according to the form IDs, carrying out data binding and data caching on the components of which the dragging is finished, and sending a self-defined form construction request to a server;
binding and caching data of each component which is completed with the dragging, setting caching time, recording storage time of data of each component which is completed with the dragging in real time, deleting the data of each component which is completed with the dragging when the storage time is greater than the caching time, and sending a corresponding report to a user;
compressing the uploaded video file by using a reaction-active-video-processing unit, and checking the shielded component by sliding up and down through a finger through a scroll bar;
the finger sliding is monitored through the real-active-swing third party frame, and the position information of the dragging assembly is monitored in real time, and the method specifically comprises the following operations: firstly intercepting a touch event, and judging whether a scrollview sliding event or a view touch event; then, judging the sliding of the scrollview after the touch event of the view; finally, allowing the scrollview to slide after the touch event is ended;
the method comprises the steps that a real platform is used for connecting an application program and a service in real time based on a combination of NoSQL (network object structured query language) server and client side components through a synchronous protocol, when a form is dragged into an editing area, whether dragging is completed or not is judged in a dragging event, if so, information of each component is obtained, the information of each component comprises a form ID formed by the components in the whole editing area, the form ID is used for positioning each different component form, component name and component ID, a unique ID is set for each component, a mobile terminal and a service terminal are unified and standardized and restrained when a user-defined component is developed, the type of each component is represented by a type value, the service terminal is enabled to master the action and verification information of each component and store the verification information locally, when a new component is added by a user, or component information is modified, or all latest component information in the component editing area is restored locally, and the original component information is deleted locally;
and S3, waiting for feedback of the server, completing the construction of the custom form according to the feedback of the server, and naming the custom form.
2. The method for implementing the mobile terminal-based draggable custom form component as claimed in claim 1, wherein the method comprises the steps of: after sending the user-defined form building request to the server, the method further comprises the following steps that when the server receives the user-defined form building request, name information of each component is extracted from the user-defined form building request, names of each component are converted into pinyin spellings, the converted pinyin spellings are checked, when the existence of the duplicate pinyin is found, the component names corresponding to the duplicate pinyin are converted into English, after the checking is completed, the converted component names are restored to the user-defined form building request, and feedback is given to the system.
3. The implementation device based on the mobile terminal draggable self-defined form component is characterized by comprising:
acquiring current mobile terminal operating system information, wherein the operating system information comprises: the Android system and the IOS system improve the compatibility of the system through a real Native framework according to the current mobile terminal operating system information;
the screen adaptation module is used for acquiring screen information of the current mobile terminal, and carrying out self-defined form assembly page adaptation on the screen of the mobile terminal according to the screen information of the mobile terminal through safe view and action Navigation;
acquiring screen information of a current mobile terminal, wherein the screen information is proportion data between the height and the width of the screen, and carrying out self-defined form assembly page adaptation on the screen of the mobile terminal through safe view and action Navigation according to the proportion data;
performing interface typesetting layout on a screen with self-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 except the title bar as a component menu bar, dragging the rest interface part as a component and a component editing area, wherein the component menu bar is used for storing form component elements, and the form component elements comprise: single line, single selection box, check box, multiple lines, multiple selection boxes, date, audio, video, uploaded pictures, geographic location information, mailbox, and region;
the self-defined form building module is used for acquiring a component dragging instruction, dragging a corresponding component to a designated position according to the component dragging instruction, carrying out data binding and data caching on each component which is dragged, and sending a self-defined form building request to a server;
acquiring a component dragging instruction, dragging a 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 finished dragging instruction when the time is longer than the waiting time, distributing a form ID for the component, acquiring the form IDs of the components corresponding to all the dragging instructions, generating a form ID lookup table according to the form IDs, carrying out data binding and data caching on the components of which the dragging is finished, and sending a self-defined form construction request to a server;
binding and caching data of each component which is completed with the dragging, setting caching time, recording storage time of data of each component which is completed with the dragging in real time, deleting the data of each component which is completed with the dragging when the storage time is greater than the caching time, and sending a corresponding report to a user;
compressing the uploaded video file by using a reaction-active-video-processing unit, and checking the shielded component by sliding up and down through a finger through a scroll bar;
the finger sliding is monitored through the real-active-swing third party frame, and the position information of the dragging assembly is monitored in real time, and the method specifically comprises the following operations: firstly intercepting a touch event, and judging whether a scrollview sliding event or a view touch event; then, judging the sliding of the scrollview after the touch event of the view; finally, allowing the scrollview to slide after the touch event is ended;
the method comprises the steps that a real platform is used for connecting an application program and a service in real time based on a combination of NoSQL (network object structured query language) server and client side components through a synchronous protocol, when a form is dragged into an editing area, whether dragging is completed or not is judged in a dragging event, if so, information of each component is obtained, the information of each component comprises a form ID formed by the components in the whole editing area, the form ID is used for positioning each different component form, component name and component ID, a unique ID is set for each component, a mobile terminal and a service terminal are unified and standardized and restrained when a user-defined component is developed, the type of each component is represented by a type value, the service terminal is enabled to master the action and verification information of each component and store the verification information locally, when a new component is added by a user, or component information is modified, or all latest component information in the component editing area is restored locally, and the original component information is deleted locally;
and the response module is used for waiting for the feedback of the server, completing the construction of the custom form according to the feedback of the server, and naming the custom form.
4. An apparatus, the apparatus comprising: memory, a processor and a mobile terminal draggable custom form component based implementation method program stored on the memory and executable on the processor, the mobile terminal draggable custom form component based implementation method program configured to implement the steps of the mobile terminal draggable custom form component based implementation method according to any of claims 1 to 2.
5. A medium, characterized in that the medium is a computer medium, and the computer medium stores an implementation method program based on a mobile terminal draggable custom form component, and when the implementation method program based on the mobile terminal draggable custom form component is executed by a processor, the steps of the implementation method based on the mobile terminal draggable custom form component according to any one of claims 1 to 2 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 CN111597489A (en) | 2020-08-28 |
| CN111597489B true 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) |
Families Citing this family (6)
| 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 |
| CN113282518B (en) * | 2021-07-22 | 2021-12-10 | 广州市玄武无线科技股份有限公司 | Method and device for tracking and displaying form behaviors of mobile terminal in real time |
| CN113900644A (en) * | 2021-09-02 | 2022-01-07 | 锐捷网络股份有限公司 | Method and device for customizing mobile phone application in cross-platform mode, electronic equipment and storage medium |
| CN113961558B (en) * | 2021-10-08 | 2022-06-14 | 上海信宝博通电子商务有限公司 | Front-end data storage method, device and storage medium |
| CN114266233A (en) * | 2021-11-29 | 2022-04-01 | 中国联合网络通信集团有限公司 | Form generation method, device, equipment and medium |
| CN118350356B (en) * | 2024-06-12 | 2024-09-10 | 北京冠群信息技术股份有限公司 | Form page dynamic rendering method, system, memory and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| 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 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8645852B2 (en) * | 2006-06-23 | 2014-02-04 | International Business Machines Corporation | Drag and drop quoting mechanism for use with discussion forums |
-
2020
- 2020-05-12 CN CN202010398397.XA patent/CN111597489B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| 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.React Native适配IPhoneX系列设备之SafeAreaView.《https://www.cnblogs.com/xjf125/p/11008824.html》.2019,第1-4页. * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111597489A (en) | 2020-08-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111597489B (en) | Realization method and device for draggable custom form component based on mobile terminal | |
| CN112866785B (en) | Picture generation method, device, equipment and storage medium | |
| TW535081B (en) | Method and system of fulfilling requests for information from a network client | |
| CN109725901A (en) | Development approach, device, equipment and the computer storage medium of front-end code | |
| CN110297636B (en) | Page automatic generation and parameter management method, system and device based on page configuration file | |
| US20130339459A1 (en) | Information sharing apparatus, information sharing system, and method of processing information | |
| CN107391134B (en) | Method and device for automatically generating and dynamically transforming universal mobile application interactive interface | |
| US10614156B1 (en) | System and method for using a dynamic webpage editor | |
| CN105824517B (en) | A kind of implementation method and device of desktop | |
| US10776570B2 (en) | Supporting digital ink in markup language documents | |
| EP4198773A1 (en) | Image processing method and apparatus, and computer readable storage medium | |
| US10901582B2 (en) | Information processing apparatus, communication system, and image processing method | |
| CN106919406A (en) | A kind of desktop application component issue, update method and device | |
| KR20210040611A (en) | Method and apparatus for generating web page | |
| CN105915615A (en) | Method for displaying application information in mobile equipment and device thereof | |
| CN113220381A (en) | Click data display method and device | |
| CN113342450B (en) | Page processing method, device, electronic equipment and computer readable medium | |
| CN109634610B (en) | Interface marking data generation method and device | |
| US20150149586A1 (en) | Information processing apparatus, information processing method, and information processing system | |
| CN112214202B (en) | Mobile phone program development system without writing codes | |
| CN112001157B (en) | Online design method and device for webpage data form | |
| CN113220297A (en) | Webpage style dynamic generation method and device, storage medium and electronic equipment | |
| CN114093208A (en) | Information display method and device, computer equipment and storage medium | |
| CN113590564A (en) | Data storage method and device, electronic equipment and storage medium | |
| JP2005107635A (en) | Electronic form input system, method and program, and medium |
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 | ||
| 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. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |