CN107066244B - Method and device for generating application interface of mobile terminal - Google Patents
Method and device for generating application interface of mobile terminal Download PDFInfo
- Publication number
- CN107066244B CN107066244B CN201611139006.2A CN201611139006A CN107066244B CN 107066244 B CN107066244 B CN 107066244B CN 201611139006 A CN201611139006 A CN 201611139006A CN 107066244 B CN107066244 B CN 107066244B
- Authority
- CN
- China
- Prior art keywords
- control
- displayed
- data
- display area
- display
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
- G06F9/452—Remote windowing, e.g. X-Window System, desktop virtualisation
Abstract
The invention provides a method and a device for generating an application interface of a mobile terminal. The generation method comprises the following steps: dividing each cell view to be displayed on a client into a plurality of display areas, wherein each display area has a unique ID number; when receiving an interface display request sent by a client, a server reads a plurality of data needing to be displayed on each cell view from a database, reorganizes the plurality of data in a preset format and then sends the data to the client; the client receives and analyzes the data with the preset format sent from the server, generates a corresponding control according to the recorded control type, and displays the generated control on a corresponding display area according to the ID number.
Description
Technical Field
The invention relates to the technical field of information processing, in particular to a method and a device for generating an application interface of a mobile terminal.
Background
In recent years, with the rapid development of mobile internet technology, various intelligent mobile terminals have been widely used. More and more people browse network resources through the intelligent mobile terminal to carry out communication, social activities, shopping and the like, which brings great convenience to the work and life of people. However, mobile terminal devices are very different from conventional Personal Computers (PCs) in terms of processing power, standby time, screen size, etc., and application environment (operating system, network conditions, etc.), and although there are already a huge amount of network resources, most of these resources are designed specifically for use of PCs. If the mobile terminal equipment is directly used for access, the effect is not ideal. Therefore, in order to meet the characteristics of the mobile terminal device and improve the user experience, developers need to develop different platforms, and the development of the native interface is the most important loop.
At present, in the development of mainstream intelligent mobile terminal platforms (iOS and Android), developers use basic controls provided by the platforms to construct mobile terminal application interfaces, and use data formats agreed in advance with a server side to transmit data for a client side to use. However, since the design details of the application interface are very different, the basic control of the system can only provide specific basic functions, and therefore, a developer needs to write interface codes for specific interface designs. In practice, however, most interface designs (appearance layout, operation mode, etc.) in applications have a considerable degree of similarity for the continuity and consistency of the user experience, which results in a large amount of substantially repetitive code in software development.
FIGS. 1a-d are example screenshots of a prior art APP application interface. Fig. 1a is an example of screenshot of APP application interface providing take-out, fig. 1b is an example of screenshot of APP application interface providing KTV information, fig. 1c is an example of screenshot of APP application interface providing movie theater information, fig. 1d is an example of screenshot of APP application interface providing accommodation information, and it can be seen from these 4 screenshots that these 4 application interfaces are designed with similarities but differences, so that developers are required to write interface codes for these 4 application interfaces respectively, which results in a large amount of substantially repetitive codes. For an APP product capable of providing a variety of consumption information, for example, an APP product capable of providing a variety of information such as food, movie, hotel, take-out, entertainment, KTV, vacation, air ticket/train ticket, scenic spot, sports fitness, learning and training, there are differences in the design of application interfaces providing different information, and interface codes need to be written for the different application interfaces respectively.
In addition, if there are differences in display formats for a plurality of pieces of information displayed on one application interface, it is necessary to write display code separately for the information of the different display formats, although this is rarely the case in practice because the amount of repetitive code that needs to be written is very large.
When an APP product is developed, particularly an APP for online shopping is provided, interface codes are written for different application interfaces respectively, and a large amount of substantially repeated codes are generated, which will cause a series of negative effects on the development of the application, such as reduced development efficiency, increased code volume, difficulty in debugging and maintenance, and the like.
Disclosure of Invention
The invention aims to provide a method and a device for generating a cell view on an application interface and a method and a device for generating a mobile terminal application interface obtained by the method and the device, so as to improve the problems.
The embodiment of the invention provides a method for generating a cell view on an application interface, which is characterized by comprising the following steps:
dividing each cell view to be displayed on a client into a plurality of display areas, wherein each display area has a unique ID number;
when receiving an interface display request sent by a client, a server reads a plurality of data needing to be displayed on each cell view from a database, reorganizes the plurality of data in a preset format and then sends the plurality of data to the client, wherein each data corresponds to a display area, and the preset format at least comprises the following steps: an ID field, a type field and a value field, wherein the ID field is used for storing an ID number, the type field is used for storing the type of the control, and the value field is used for storing the data content required to be displayed;
the client receives and analyzes the data with the preset format sent from the server, generates a corresponding control according to the recorded control type, and displays the generated control on a corresponding display area according to the ID number.
Preferably, in the step of dividing each cell view to be displayed on the client into a plurality of display areas, the plurality of display areas are divided according to design requirements to be displayed on the cell view, and each display area has relative position information.
Preferably, in the step of reorganizing the plurality of data in the predetermined format, the plurality of data to be displayed on each cell view are reorganized into an array form, wherein the number of data objects in an array is equal to or less than the number of display areas dividing one cell view.
Preferably, the predetermined format further includes: and the name field is used for describing the name of the divided display area and realizing the verification of the ID number, and/or the action field is used for describing the action of the control.
Preferably, the control types include, but are not limited to: an image control, a text control, and a button control.
Preferably, when the number of data objects in an array is smaller than the number of display areas formed by dividing a cell view, the positions of the controls displayed on the display areas can be adaptively changed according to a preset design rule.
Preferably, the adaptively varying pre-design rule includes: the displayed control positions are adaptively changed according to a rule of giving priority to left-up or giving priority to right-up.
Preferably, the adaptively varying pre-design rule further includes: alignment rules for the displayed control positions.
Preferably, the adaptively varying pre-design rule further includes: rules for placing controls of a specified type at a specified position.
The embodiment of the invention also provides a method for generating the application interface of the mobile terminal, which comprises the following steps: 1 or more cell views are generated using the method described above.
The embodiment of the invention also provides a device for generating the cell view on the application interface, which is characterized by comprising the following steps:
the system comprises a dividing unit, a display unit and a display unit, wherein the dividing unit is used for dividing each cell view required to be displayed on a client into a plurality of display areas, and each display area has a unique ID number;
the control generating and displaying unit is used for receiving and analyzing data with a preset format sent from the server, generating a corresponding control according to the recorded control type, and displaying the generated control on a corresponding display area according to the ID number, wherein each data corresponds to one display area, and the preset format at least comprises the following steps: the display control device comprises an ID field, a type field and a value field, wherein the ID field is used for storing an ID number, the type field is used for storing the type of the control, and the value field is used for storing data content needing to be displayed.
Preferably, when the server receives an interface display request sent by the client, the server reads out a plurality of data required to be displayed on each cell view from the database, reorganizes the plurality of data in a preset format and then sends the plurality of data to the client. The client will transmit these data to the control generation and display unit.
Preferably, the dividing unit is configured to divide a plurality of display regions according to design requirements to be displayed on the cell view, and each display region has relative position information.
Preferably, the plurality of data to be displayed on each cell view are reorganized into an array form, wherein the number of data objects in an array is equal to or less than the number of display areas formed by dividing one cell view.
Preferably, the predetermined format further includes: and the name field is used for describing the name of the divided display area and realizing the verification of the ID number, and/or the action field is used for describing the action of the control.
Preferably, the control types include, but are not limited to: an image control, a text control, and a button control.
Preferably, when the number of data objects in an array is smaller than the number of display areas formed by dividing a cell view, the positions of the controls displayed on the display areas can be adaptively changed according to a preset design rule.
Preferably, the adaptively varying pre-design rule includes: the displayed control positions are adaptively changed according to a rule of giving priority to left-up or giving priority to right-up.
Preferably, the adaptively varying pre-design rule further includes: alignment rules for the displayed control positions.
Preferably, the adaptively varying pre-design rule further includes: rules for placing controls of a specified type at a specified position.
The embodiment of the invention also provides a device for generating the application interface of the mobile terminal, which comprises the following components: the above-described cell view generation device.
The embodiment of the invention also provides a system for generating the application interface of the mobile terminal, which comprises the following steps: a client and a server, wherein the server is connected with the client,
the client comprises the generating device of the application interface of the mobile terminal;
the server is used for responding to an interface display request sent by the client, reading a plurality of data needing to be displayed on each cell view from the database, reorganizing the plurality of data in a preset format and then sending the plurality of data to the client.
Preferably, the server is further configured to, when the plurality of data are reorganized in a predetermined format, assign an ID number to the corresponding data according to the pre-design rule and store the ID number in the ID field to ensure that the content of the data displayed on the display area meets the design requirements.
According to the method and the device for generating the cell view on the application interface and the method, the device and the system for generating the application interface of the mobile terminal, which are disclosed by the invention, one cell view can be formed by dynamically generating a plurality of controls to display, so that the positions of the controls of different types can be actively exchanged without rewriting interface codes to realize the cell views displayed in different layouts, the interface codes can be fully reused, the code quantity for constructing the application interface is greatly reduced, the development efficiency is improved, and the development and maintenance costs are reduced.
Drawings
FIGS. 1a-d are example screenshots of an APP application interface implemented in accordance with the prior art;
fig. 2 is a schematic screenshot example of the present invention dividing one cell view into a plurality of display areas.
FIG. 3 is another exemplary screenshot of the present invention dividing a cell view into display regions;
FIG. 4 is a flow chart of a method of generating a view of a cell on an application interface of the present invention;
fig. 5 is a schematic block diagram of a cell view generation apparatus on an application interface of the present invention.
Fig. 6 is a schematic block diagram of a mobile terminal application interface generation system of 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 the accompanying drawings, 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. The components of embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations. Thus, the following detailed description of the embodiments of the present invention, presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments of the present invention without making any creative effort, shall fall within the protection scope of the present invention.
Before describing the technical solution of the present invention, some knowledge in the development of an application interface and terms used herein will be briefly introduced.
Currently, the operating systems of the mainstream intelligent mobile terminals in the market are an Android (Android) system and an IOS (internet of things) system, and various interfaces displayed on the mobile terminals are generated by using controls under corresponding systems. The ListView control is one of the common controls for developing various interfaces displayed on the mobile terminal under the android system, and the UITableView control is one of the common controls for developing various interfaces displayed on the mobile terminal by the IOS system. The following takes the IOS system as an example to briefly explain application interface development.
The UITableView is used to display data in tabular form. In the UITableView, data only has a row concept and no column concept, and due to the problem of the screen size of the mobile terminal, especially the small screen of the smart phone, displaying multiple columns on the small-size screen is not beneficial to operation. The UITableView is used to display the visible portion of the table and the UITableViewCell is used to display a row of the table, all UITableView implementations have effectively only one column, but it can be made to appear to have several columns by adding a child view to the UITableViewCell.
Each row of data in the UITableView is a UITableView cell, in the aspect of information display, such as the example of a screenshot of the APP application interface providing take-out shown in fig. 1a, a piece of displayed business information may contain a plurality of data contents, such as pictures, store names, star levels, sales volumes, distances, prices, discount offers and the like, and a piece of commercial information containing the plurality of data contents is a line of data in the UITableView, namely programming a piece of business information containing a plurality of data contents to be displayed on a screen is done through the control UITableViewCell, in order to display more information in this control, the IOS has built in a number of child controls inside it for the developer to use, for example, one UIView control (contentView, which is a parent control of other elements), two uilabel controls (textLabel, detailTextLabel), and one UIImage control (imageView) for the container, the display content, the details, and the picture, respectively.
In addition, from the examples shown in fig. 1a to 1d, it can also be seen that the information is displayed in units of lines, i.e. one piece of information is displayed in one line, for example, the example of fig. 1a shows 4 pieces of business information providing takeaway, the example of fig. 1b shows 4 pieces of business information providing KTV, the example of fig. 1c shows 5 pieces of business information providing movie theaters, and the example of fig. 1d shows 4 pieces of business information providing accommodation.
In the field of interface display development, each line unit displaying data in a list form is generally referred to as a Cell or a Cell by those skilled in the art. The display of information in units of rows on the screen of the mobile terminal may be referred to as a cell view. As mentioned above, in APP products that provide consumer information, for example, business information displayed in units of rows may contain a plurality of data contents, and the arrangement of the plurality of data contents is combined to form a form-rich cell view. For example, all information about, for example, "fresh fruit time (west outer shop)" shown in fig. 1a is one cell view, all information about, for example, "city of wealth ktv" shown in fig. 1b is one cell view, all information about, for example, "city of the baolith international movie (apple orchard shop)" shown in fig. 1c is one cell view, and all information about, for example, "ten thousand new run hotel" shown in fig. 1d is one cell view.
The technical solution taught herein below will relate to the terms cell and cell view described above.
The technical solution of the present invention will be clearly and completely described below with reference to the accompanying drawings and the specific embodiments of the present invention.
As described above, it can be seen from the screenshots shown in fig. 1a to 1d that the 4 application interfaces are similar in design but different in design, according to the prior art, a developer needs to write interface codes for the 4 application interfaces respectively, which results in a large amount of substantially repeated codes, so that the development efficiency is reduced, and the code volume is increased.
The invention provides a new design idea for the purpose. Fig. 2 is a schematic screenshot example of the present invention dividing one cell view into a plurality of display areas. As shown in fig. 2, a plurality of data (for example, pictures, texts, icons, rich texts, etc.) that one cell view needs to display on an application interface are divided into a plurality of display areas, each display area is assigned with a unique ID number, when a server receives an interface display request sent by a client, the plurality of data that need to be displayed on each cell view are read from a database, and the plurality of data are reorganized in a predetermined format preset by both the client and the server and then sent to the client, where the predetermined format at least includes: the client receives and analyzes the data with the preset format sent from the server, generates the corresponding control according to the recorded control type, and displays the generated control on the corresponding display area according to the ID number, so that a cell view is formed, and a plurality of cell views and toolbars form a complete application interface. The novel method has the advantages that various types of controls can be dynamically generated and can be found on any display area according to the preset design, so that the positions of the controls of different types can be actively exchanged without rewriting codes, and a set of interface codes can be fully reused to display cell views of different layouts, thereby improving the development efficiency and reducing the development and maintenance costs.
FIG. 4 is a flow chart of a method for generating a view of a cell on an application interface of the present invention. As shown in fig. 4, the method for generating a cell view on an application interface according to the present invention includes the following steps:
s1: and dividing each cell view required to be displayed on the client into a plurality of display areas, wherein each display area has a unique ID number.
In particular, although it is theoretically possible to display only one item of content, i.e. only one display area, in the cell view that we usually see on the mobile terminal, in practice this is very rare, i.e. only a part of news websites, such as newcastle, that provide for displaying scrolling news are provided, and one cell view can also be seen to display a scrolling message. In many news websites, each news item (a cell view) displays a brief content (text), and also displays the time of displaying a small character below the text (i.e., the time when the news item is published on the website) and the number of comments on the news item (i.e., a cell view) to display a plurality of items of information.
To attract the attention of the user, the interface design of APP is very important, and providing a concise and more informative interface layout on one cell view requires the designer to spend much mind on designing. As shown in the screenshots shown in fig. 1a-d, the entire application interface providing different information and the interface of a subdivided one cell view are different. In addition, although not shown here, it is known that APP products designed by different companies even providing the same service have different application interfaces, such as a travel network client providing a travel service and a home network client.
In addition, as shown in FIGS. 1a-d, a cell view includes multiple displays. Taking the store name "fresh fruit time" shown in the interface screenshot shown in fig. 1a as an example, the cell view displays: picture, store name: "fresh fruit time (west outer shop)", star rating: ", it, the sales volume: "month-stamp 562 pen", time: "30 minutes", distance: "436 m", pick-up price: "20 start sending", freight: "delivery of 0", other information, etc. There are some differences from the information displayed by the other 3 stores, for example, the cell view with store name "texas" also displays "invoice" information and discount information, while the cell view with store name "hamburger king" also displays "must on time" and "hummingbird special delivery" information.
The above description shows that before a programmer develops an application interface, even a cell view interface, the programmer needs to design different interface layouts according to market demands. Therefore, in a preferred embodiment, in the step of dividing each cell view to be displayed on the client into a plurality of display areas, the plurality of display areas are divided according to design requirements to be displayed on the cell view, and each display area has relative position information. Namely, the design requirement of the cell view to be displayed is to design different information display layouts according to market demands.
As can be seen from the example shown in fig. 2, each cell view to be displayed on the client is divided into a plurality of display areas, and each display area has a unique ID number. In addition, the layout of the plurality of display areas may involve mutual orientation information, so each display area also has relative position information.
S2: when receiving an interface display request sent by a client, a server reads a plurality of data needing to be displayed on each cell view from a database, reorganizes the plurality of data in a preset format and then sends the plurality of data to the client, wherein each data corresponds to a display area, and the preset format at least comprises the following steps: the display control device comprises an ID field, a type field and a value field, wherein the ID field is used for storing an ID number, the type field is used for storing the type of the control, and the value field is used for storing data content needing to be displayed.
The information displayed on various current APP application interfaces can be changed in real time, and generally a client and a server are required. The client is installed on a mobile terminal owned by a user, and the server is generally managed by a service provider providing APP products, waits for a request from the client, processes the request and returns a result, so that information displayed on an interface of the APP client is stored on the server and is sent to the client in real time through a network.
In order to enable the solution of the invention to be implemented, it is necessary to record data objects using a new data format. Therefore, each time the server receives an interface display request sent by the client, the server reads a plurality of data to be displayed on each cell view from the database, reorganizes the plurality of data in a predetermined format, and sends the plurality of data to the client, wherein each data needs to correspond to one display area, and the predetermined format at least comprises: the display control device comprises an ID field, a type field and a value field, wherein the ID field is used for storing an ID number, the type field is used for storing the type of the control, and the value field is used for storing data content needing to be displayed. The control types include, but are not limited to: an image control, a text control, and a button control. Various control types displayed on currently known application interfaces may be recorded in the type field. In addition, to achieve more functionality, the predetermined format may also include, but is not limited to: and the name field is used for describing the name of the divided display area and realizing the verification of the ID number, and/or the action field is used for describing the action of the control. Those skilled in the art will appreciate that, for the data format, it is quite possible to supplement other control fields according to actual needs to implement the corresponding requirements, and this is not listed here.
To be able to distinguish which data is to be displayed on the first cell view, which data is to be displayed on the second cell view, … …, etc., a preferred way is: the plurality of data to be displayed on each cell view are reorganized into an array form. Furthermore, as mentioned above, a cell view is divided into a plurality of display areas according to design requirements, and in practice, not every divided display area necessarily displays content, as exemplified above: the cell view with the store name of ' texas ' also displays invoice ' information and discount information, while the cell view with the store name of ' fresh fruit time ' is not displayed, but in the interface layout design, as many display areas as possible need to be designed for different merchants to display personalized services which can be provided by the different merchants, so that the number of data objects in one array for one cell view display can be equal to or less than the number of display areas divided by one cell view. Usually, the number of data objects is smaller than the number of display areas, because the number of divided display areas is designed by adopting a redundancy concept. Fig. 3 is another example of a schematic screenshot of the present invention dividing a cell view into multiple display regions. As can be seen from the example shown in FIG. 3, the number of displayed data objects is smaller than the number of divided display areas, and the display area with ID number 1009 and 1011 divided in the layout design is hidden because of no data display and is represented by a dashed box.
In short, in a preferred embodiment, the plurality of data to be displayed on each cell view is reorganized into an array form, wherein the number of data objects in an array is equal to or less than the number of display areas formed by dividing a cell view.
The currently common data formats are: JSON, XML, and HTML. Both XML and JSON formats use structured methods to describe data, and are suitable for use in the present invention. Taking a data object adopting a JSON structure as an example, a data object example for a display area is provided.
An example of a data object for a display area is as follows:
as can be seen from this data object example, a button control is generated at the position of a display area with ID number 1001, and the name of the display area with ID number 1001 is: tel (telephone), the action of the button control is to provide the dialing of the telephone number: 010-88888888.
If a cell view usually includes multiple display areas, multiple data objects in the written code are stored and transmitted in an array form, which is easy to be implemented by those skilled in the art and will not be illustrated.
S3: the client receives and analyzes the data with the preset format sent from the server, generates a corresponding control according to the recorded control type, and displays the generated control on a corresponding display area according to the ID number.
When a user triggers a demand, the client sends a request to the server, and the server processes the request and sends related data to the client. The user trigger requirement is determined by the specific logic of the client. For example, the APP may be opened, a certain module may be opened, or a certain condition may be triggered.
When the client receives the data with the preset format sent from the server, the data is analyzed, corresponding data is read according to the appointed field, and the data is stored locally in a structured form (array, key value pair or custom structure).
Take the domain _ list structure as an example. During parsing, the JSON array is stored in an array (NSArray), and each domain data object in the array is stored in a dictionary (NSDictionary) form.
Then, a cell view is generated according to the parsed data, that is, the array (NSArray) is traversed, a corresponding control is generated according to the control type recorded in the type field of each domain data object, the generated control is displayed on a corresponding display area according to the ID number recorded in the ID field, and the display content of the control is the data to be displayed recorded in the value field.
In order to make the layout of the generated cell view beautiful and neat, in a preferred embodiment, when the number of data objects in an array is less than the number of display areas formed by dividing one cell view, the positions of the controls displayed on the display areas can be adaptively changed according to the pre-designed rules. Specifically, as discussed above, because the number of the divided display areas is designed by using a redundancy concept, and the information displayed on the cell view by the merchants providing different services is not identical, from the information issued by the merchant shown in fig. 1a and one of fig. 1b-d, the information layout of the cell view shown in each screenshot is not identical, if the interface code of fig. 1a can be multiplexed onto the interfaces of fig. 1b-d, the position of the control displayed on the display area for displaying information cannot be fixed, and the position of the control displayed on the display area needs to be capable of adaptively changing according to a pre-designed rule, that is, the dynamically generated control can adaptively change its own position according to the pre-designed movement rule.
In a preferred embodiment, the adaptively varying pre-design rule includes: the displayed control positions are adaptively changed according to a rule of giving priority to left-up or giving priority to right-up. The rule will be briefly described below by taking as an example that the displayed position of the control changes preferentially to the rule upward from left. That is, when the generated control finds that the display area on the left side of the generated control does not display the control, the generated control automatically moves leftwards to fill the corresponding display area position, and when the generated control finds that the display area on the upper side of the generated control does not display the control, the generated control automatically moves upwards to fill the corresponding display area position. According to design rules, the first shift to the left and then the second shift to the left, or the first shift to the up and then the second shift to the left may be performed. The method for adaptively changing the position of the displayed control according to the rule of giving priority to the right direction is the same, and is not described in detail herein.
In another preferred embodiment, the adaptively varying pre-design rule further comprises: alignment rules for the displayed control positions. The alignment rule may be left-aligned, right-aligned, or both-end aligned, and may also specify that one or more columns having multiple rows of display areas are left-aligned, right-aligned, or both-end aligned. For example, the text message shown in FIG. 1a shows the right side aligned to the right and the left side aligned to the left next to the picture.
In another preferred embodiment, the adaptively varying pre-design rule further comprises: rules for placing controls of a specified type at a specified position. For example, according to the habit of browsing by the consumer, the left display area of the cell view may be designated to fixedly display a picture, and the merchant name may be fixedly displayed in the middle of the top end, as shown in fig. 1a, 1c and 1 d. And the button control can be fixedly displayed at the bottom position according to browsing habits.
The three preferred embodiments of the adaptive-change pre-designed rules described above can be combined together arbitrarily, i.e., the displayed control positions are changed adaptively with a rule that gives preference to left-up or right-up, the alignment rules of the displayed control positions, and the rule for placing a control of a specified type at a specified orientation can be combined together arbitrarily.
The attribute values of the generated control may be set in advance. For example, the size of the control is subject to the design requirement, such as the size of the picture, the font size of the text, the interval between each row, and the interval between the controls are calibrated according to the design requirement. For example, if the font size marked by a text control is 20pt, the height of the control is 20pt, and the length of the control is determined by the length of the text (if the text is displayed in a way of exceeding the boundary), so that the accuracy of the typesetting layout can be ensured.
In addition, in another preferred embodiment, in order to ensure that the data location displayed by the cell view is desired by the merchant, taking the store name "fresh fruit time" as shown in the interface screenshot shown in fig. 1a as an example, the left side of the cell view displays a picture, the text 1 "fresh fruit time (west outer store)" is at the top, the text 2 "is star" is below the text 1, the text 3 "month sell 562 pen" is in line with the text 2, the text 4 "30 minutes" is below the text 2, the text 5 "436 meters" is in line with the text 4, the text 6 "rah 20 starts" is in line and right-end aligned with the text 1, and the text 7 "rah 0 sends" is in line and right-end aligned with the text 2, except that the control location displayed on the display area on the client can be adaptively changed according to the pre-designed rules, the server side reorganizes a plurality of data that need to be displayed on each cell view read in a predetermined format, it is also desirable to assign appropriate ID numbers to the corresponding data according to the pre-design rules and store them in the ID fields to ensure that the data content displayed on the display area meets the design requirements, particularly when the pre-design rules include rules for placing a control of a specified type at a specified orientation, taking the store name "fresh fruit time" shown in the interface screenshot shown in fig. 1a as an example, the picture is assigned an ID number that coincides with the ID number of the left display area, the text 1 "fresh fruit time (west outer store)" is assigned an ID number that coincides with the ID number of the topmost display area, the text 6 "20 start" is assigned an ID number that coincides with the ID number of the display area located topmost and to the right of the ID number of the text 1 … … and so on, to avoid the occurrence of errors such as the text 2 being four-star it is displayed above the text 1 fresh fruit time (west outer shop).
The embodiment of the invention also provides a method for generating the application interface of the mobile terminal, which comprises the following steps: the generation method of the cell view as described above is employed to generate 1 or more cell views. As can be seen from the screenshots shown in fig. 1a to 1d, one application interface of the mobile terminal includes a status bar, a navigation bar, a main menu bar, a plurality of cell views in a content area, and the like, while the status bar, the navigation bar, and the main menu bar are substantially the same and fixed, and the plurality of cell views in the content area are designed to display different interface layouts due to different types of displayed information. In one embodiment, in the method for generating the application interface of the mobile terminal, the status bar, the navigation bar, the main menu bar and the like may be generated by using an existing method, and the method for generating the cell view is used to generate 1 or more cell views. In another embodiment, in the method for generating the application interface of the mobile terminal, the status bar, the navigation bar, the main menu bar, the plurality of cell views in the content area, and the like all adopt the method for generating the cell views as described above to generate 1 or more cell views.
According to the method for generating the cell view on the application interface and the method for generating the application interface of the mobile terminal, which are disclosed by the invention, one cell view can be formed by dynamically generating a plurality of controls to display, so that the positions of the controls of different types can be actively exchanged without rewriting interface codes to realize the cell views displayed in different layouts, the interface codes can be fully reused, the code quantity for constructing the application interface is greatly reduced, the development efficiency is improved, and the development and maintenance costs are reduced.
Fig. 5 is a schematic block diagram of a cell view generation apparatus on an application interface of the present invention. As shown in fig. 5, the apparatus for generating a cell view on an application interface according to the present invention includes:
the system comprises a dividing unit, a display unit and a display unit, wherein the dividing unit is used for dividing each cell view required to be displayed on a client into a plurality of display areas, and each display area has a unique ID number;
the control generating and displaying unit is used for receiving and analyzing data with a preset format sent from the server, generating a corresponding control according to the recorded control type, and displaying the generated control on a corresponding display area according to the ID number, wherein each data corresponds to one display area, and the preset format at least comprises the following steps: the display control device comprises an ID field, a type field and a value field, wherein the ID field is used for storing an ID number, the type field is used for storing the type of the control, and the value field is used for storing data content needing to be displayed.
When the server receives an interface display request sent by the client, reading a plurality of data needing to be displayed on each cell view from the database, reorganizing the plurality of data in a preset format and then sending the plurality of data to the client. The client will transmit these data to the control generation and display unit.
The dividing unit is used for dividing a plurality of display areas according to design requirements needing to be displayed on the cell view, and each display area has relative position information.
The data needed to be displayed on each cell view are reorganized into an array form, wherein the number of data objects in one array is equal to or less than the number of display areas formed by dividing one cell view.
Wherein the predetermined format further comprises: and the name field is used for describing the name of the divided display area and realizing the verification of the ID number, and/or the action field is used for describing the action of the control.
Wherein the control types include, but are not limited to: an image control, a text control, and a button control.
When the number of the data objects in one array is smaller than the number of the display areas formed by dividing one cell view, the positions of the controls displayed on the display areas can be changed in a self-adaptive mode according to the preset design rule.
Wherein the adaptively varying pre-design rule comprises: the displayed control positions are adaptively changed according to a rule of giving priority to left-up or giving priority to right-up.
Wherein the adaptively varying pre-design rule further comprises: alignment rules for the displayed control positions.
Wherein the adaptively varying pre-design rule further comprises: rules for placing controls of a specified type at a specified position.
The displayed control position can be adaptively changed according to a rule of preferentially moving left or right, the alignment rule of the displayed control position, and the rule of placing the control of the specified type at the specified position can be combined together at will.
The embodiment of the invention also provides a device for generating the application interface of the mobile terminal, which comprises the following components: the above-described cell view generation device.
Fig. 6 is a schematic block diagram of a mobile terminal application interface generation system of the present invention. As shown in fig. 6, the system for generating an application interface of a mobile terminal according to the present invention includes: a client and a server, wherein the server is connected with the client,
the client comprises the generating device of the application interface of the mobile terminal;
the server is used for responding to an interface display request sent by the client, reading a plurality of data needing to be displayed on each cell view from the database, reorganizing the plurality of data in a preset format and then sending the plurality of data to the client.
In a preferred embodiment, the server is further configured to, when the plurality of data are reorganized in a predetermined format, assign an ID number to the corresponding data according to the pre-design rule and store the ID number in the ID field to ensure that the data content displayed on the display area meets the design requirements.
It is clear to those skilled in the art that, for convenience and brevity of description, the specific working process of the apparatus described above may refer to the corresponding process in the foregoing method embodiment, and is not described herein again.
According to the device for generating the cell view on the application interface, the device and the system for generating the application interface of the mobile terminal, which are disclosed by the invention, one cell view can be formed by dynamically generating a plurality of controls to display, so that the positions of the controls of different types can be actively exchanged without rewriting interface codes to realize the cell views displayed in different layouts, the interface codes can be fully reused, the code quantity for constructing the application interface is greatly reduced, the development efficiency is improved, and the development and maintenance costs are reduced.
In addition, when data is transmitted between the client and the server, an HTTP transmission protocol, an FTP transmission protocol, an HTTPs transmission protocol, and the like can be used; the data may be encoded in ASCII format, Base64 format, and the like. These are well known in the art and will not be described in great detail.
The computer program product of the method for generating an application interface of a mobile terminal according to the embodiment of the present invention includes a computer-readable storage medium storing a program code, where instructions included in the program code may be used to execute the method described in the foregoing method embodiment, and specific implementation may refer to the method embodiment, and will not be described herein again.
The functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: various media capable of storing program codes, such as a U disk, a removable hard disk, a Read Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.
The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and all the changes or substitutions should be covered within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the appended claims.
Claims (23)
1. A method for generating a cell view on an application interface is characterized by comprising the following steps:
dividing each cell view required to be displayed on a client into a plurality of display areas, wherein each display area has a unique ID number, each line unit of the data displayed in a list form is called a cell, and information display performed in line units on a client screen is called a cell view;
when receiving an interface display request sent by a client, a server reads a plurality of data needing to be displayed on each cell view from a database, reorganizes the plurality of data in a preset format and then sends the plurality of data to the client, wherein each data corresponds to a display area, and the preset format at least comprises the following steps: an ID field, a type field and a value field, wherein the ID field is used for storing an ID number, the type field is used for storing the type of the control, and the value field is used for storing the data content required to be displayed;
the client receives and analyzes the data with the preset format sent from the server, generates a corresponding control according to the recorded control type, and displays the generated control on a corresponding display area according to the ID number.
2. The generating method according to claim 1, wherein in the step of dividing each cell view to be displayed on the client into a plurality of display areas, the plurality of display areas are divided according to design requirements to be displayed on the cell view, and each display area has relative position information.
3. The generating method as claimed in claim 1, wherein in the step of reorganizing the plurality of data in the predetermined format, the plurality of data to be displayed on each cell view are reorganized into an array form, wherein the number of data objects in an array is equal to or less than the number of display areas dividing one cell view.
4. The generation method according to claim 1, wherein the predetermined format further includes: and the name field is used for describing the name of the divided display area and realizing the verification of the ID number, and/or the action field is used for describing the action of the control.
5. The generation method of claim 1, wherein the control types include, but are not limited to: an image control, a text control, and a button control.
6. The generating method according to claim 3, wherein when the number of data objects in an array is smaller than the number of display areas formed by dividing a cell view, the positions of the controls displayed on the display areas can be adaptively changed according to the pre-designed rule.
7. The method of generating as claimed in claim 6, wherein said adaptively varying pre-designed rule comprises: the displayed control position is adaptively changed according to a rule of preferentially changing leftwards upwards or leftwards upwards, wherein the displayed control position is adaptively changed according to the rule of preferentially changing leftwards and upwards, namely, the control is automatically moved leftwards to fill the corresponding display area position when the generated control finds that the display area on the left side of the generated control does not display the control, and the control is automatically moved upwards to fill the corresponding display area position when the generated control finds that the display area on the upper side of the generated control does not display the control; the displayed control position is changed in a rule self-adaptive mode with priority of right-down, namely, when the generated control finds that the display area on the right side of the generated control does not display the control, the control automatically moves to the right to fill the position of the corresponding display area, and when the generated control finds that the display area below the generated control does not display the control, the control automatically moves to the down to fill the position of the corresponding display area.
8. The method of generating as claimed in claim 7, wherein said adaptively varying pre-design rule further comprises: alignment rules for the displayed control positions.
9. The generation method according to one of claims 6 to 8, characterized in that the adaptively varying pre-design rule further comprises: rules for placing controls of a specified type at a specified position.
10. A method for generating an application interface of a mobile terminal comprises the following steps: generating 1 or more cell views using the method of any of claims 1-9.
11. An apparatus for generating a view of a cell on an application interface, comprising:
the system comprises a dividing unit, a display unit and a display unit, wherein the dividing unit is used for dividing each cell view required to be displayed on a client into a plurality of display areas, each display area has a unique ID number, each line unit of display data in a list form is called a cell, and information display performed on a client screen in line units is called a cell view;
the control generating and displaying unit is used for receiving and analyzing data with a preset format sent from the server, generating a corresponding control according to the recorded control type, and displaying the generated control on a corresponding display area according to the ID number, wherein each data corresponds to one display area, and the preset format at least comprises the following steps: the display control device comprises an ID field, a type field and a value field, wherein the ID field is used for storing an ID number, the type field is used for storing the type of the control, and the value field is used for storing data content needing to be displayed.
12. The generation apparatus according to claim 11, wherein when the server receives the interface display request sent by the client, the server reads out a plurality of data to be displayed on each cell view from the database, reorganizes the plurality of data in a predetermined format, and then sends the plurality of data to the client.
13. The generation apparatus according to claim 11, wherein the division unit is configured to divide the plurality of display areas according to a design requirement to be displayed on the cell view, and each display area has the relative position information.
14. The generating apparatus as claimed in claim 11, wherein the plurality of data to be displayed on each cell view are reorganized into an array form, and the number of data objects in an array is equal to or less than the number of display areas dividing a cell view.
15. The generation apparatus according to claim 11, wherein the predetermined format further comprises: and the name field is used for describing the name of the divided display area and realizing the verification of the ID number, and/or the action field is used for describing the action of the control.
16. The generation apparatus according to claim 11, wherein the control types include but are not limited to: an image control, a text control, and a button control.
17. The generating apparatus as claimed in claim 14, wherein when the number of data objects in an array is smaller than the number of display areas dividing a cell view, the positions of the controls displayed on the display areas can be adaptively changed according to the pre-designed rule.
18. The generation apparatus of claim 17, wherein the adaptively varying pre-design rule comprises: the displayed control position is adaptively changed according to a rule of preferentially changing leftwards upwards or leftwards upwards, wherein the displayed control position is adaptively changed according to the rule of preferentially changing leftwards and upwards, namely, the control is automatically moved leftwards to fill the corresponding display area position when the generated control finds that the display area on the left side of the generated control does not display the control, and the control is automatically moved upwards to fill the corresponding display area position when the generated control finds that the display area on the upper side of the generated control does not display the control; the displayed control position is changed in a rule self-adaptive mode with priority of right-down, namely, when the generated control finds that the display area on the right side of the generated control does not display the control, the control automatically moves to the right to fill the position of the corresponding display area, and when the generated control finds that the display area below the generated control does not display the control, the control automatically moves to the down to fill the position of the corresponding display area.
19. The generation apparatus of claim 17, wherein the adaptively varied pre-design rule further comprises: alignment rules for the displayed control positions.
20. The generation apparatus according to one of claims 17 to 19, wherein the adaptively varying pre-design rule further comprises: rules for placing controls of a specified type at a specified position.
21. An apparatus for generating an application interface of a mobile terminal, comprising: the cell view generation apparatus of one of claims 11-20.
22. A system for generating an application interface for a mobile terminal, comprising: a client and a server, wherein the server is connected with the client,
the client comprises means for generating an application interface of a mobile terminal according to claim 21;
the server is used for responding to an interface display request sent by the client, reading a plurality of data needing to be displayed on each cell view from the database, reorganizing the plurality of data in a preset format and then sending the plurality of data to the client.
23. The generation system of claim 22, wherein the server is further configured to, when the plurality of data are reorganized in a predetermined format, in order to enable the position of the control displayed on the display area to adaptively change according to the pre-design rule, assign an appropriate ID number to the corresponding data and store the ID number in the ID field to ensure that the data content displayed on the display area meets the design requirement.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611139006.2A CN107066244B (en) | 2016-12-12 | 2016-12-12 | Method and device for generating application interface of mobile terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611139006.2A CN107066244B (en) | 2016-12-12 | 2016-12-12 | Method and device for generating application interface of mobile terminal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107066244A CN107066244A (en) | 2017-08-18 |
| CN107066244B true CN107066244B (en) | 2020-12-18 |
Family
ID=59619585
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201611139006.2A Active CN107066244B (en) | 2016-12-12 | 2016-12-12 | Method and device for generating application interface of mobile terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107066244B (en) |
Families Citing this family (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107479960B (en) * | 2017-08-25 | 2021-02-19 | 阿里巴巴（中国）有限公司 | Method and device for displaying unit view |
| CN108269120A (en) * | 2017-11-29 | 2018-07-10 | 广东神马搜索科技有限公司 | Advertisement pattern metadata configurations method and device |
| CN109446199B (en) * | 2018-10-19 | 2020-11-13 | 天津字节跳动科技有限公司 | Cell data processing method and device |
| CN111124208A (en) * | 2019-12-24 | 2020-05-08 | 三一重工股份有限公司 | Text sending method and system based on sending button |
| CN112988928A (en) * | 2021-02-08 | 2021-06-18 | 北京金和网络股份有限公司 | Catering store map display method and device |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6744451B1 (en) * | 2001-01-25 | 2004-06-01 | Handspring, Inc. | Method and apparatus for aliased item selection from a list of items |
| CN101551743A (en) * | 2008-03-31 | 2009-10-07 | 上海宝信软件股份有限公司 | Popup hidden-type data selecting container type control and realizing method thereof |
| CN105446710A (en) * | 2014-08-06 | 2016-03-30 | 阿里巴巴集团控股有限公司 | Interface providing system and interface providing method |
-
2016
- 2016-12-12 CN CN201611139006.2A patent/CN107066244B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6744451B1 (en) * | 2001-01-25 | 2004-06-01 | Handspring, Inc. | Method and apparatus for aliased item selection from a list of items |
| CN101551743A (en) * | 2008-03-31 | 2009-10-07 | 上海宝信软件股份有限公司 | Popup hidden-type data selecting container type control and realizing method thereof |
| CN105446710A (en) * | 2014-08-06 | 2016-03-30 | 阿里巴巴集团控股有限公司 | Interface providing system and interface providing method |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107066244A (en) | 2017-08-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107066244B (en) | Method and device for generating application interface of mobile terminal | |
| CN105373567B (en) | Page generation method and client | |
| US20100199195A1 (en) | Adaptive Rendering Of A Webpage On An Electronic Display Device | |
| CN103631865B (en) | Webpage generating method and equipment | |
| US10977264B2 (en) | Selecting supplemental content for inclusion in a network page | |
| US20160132216A1 (en) | Business-to-business solution for picture-, animation- and video-based customer experience rating, voting and providing feedback or opinion based on mobile application or web browser | |
| CN102105862A (en) | Automatic user interface generation for entity interaction | |
| CN112561640A (en) | Commodity page template generation method and device, computer equipment and storage medium | |
| CN111523289A (en) | Text format generation method, device, equipment and readable medium | |
| CN111367514B (en) | Page card development method and device, computing device and storage medium | |
| Hinderman | Building responsive data visualization for the web | |
| CN110543307A (en) | application construction method and device | |
| CN105786881A (en) | Self-adaptive electronic book and magazine file structure and corresponding methods and devices | |
| CN109634610B (en) | Interface marking data generation method and device | |
| Wade | Advanced Analytics in Power BI with R and Python | |
| CN111158647B (en) | Creative material self-adaptive generation method and device based on structural theory | |
| CN116975254A (en) | Visual data presentation method, visual data presentation device and storage medium | |
| Warner et al. | Mobile web design for dummies | |
| Spritzer et al. | Towards a smooth design process for static communicative node‐link diagrams | |
| CN102882877B (en) | Method for simulating cellphone operation on Web | |
| Bryant et al. | Pro HTML5 Performance | |
| Reidsma | Responsive web design for libraries | |
| CN114089995A (en) | Page generation method, device, equipment and storage medium | |
| CN113190509A (en) | Animation processing method and device, electronic equipment and computer readable storage medium | |
| Libby et al. | Responsive Web Design with HTML5 and CSS3 Essentials |
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 | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20200526 Address after: 310051 room 508, floor 5, building 4, No. 699, Wangshang Road, Changhe street, Binjiang District, Hangzhou City, Zhejiang Province Applicant after: Alibaba (China) Co.,Ltd. Address before: 510627 Guangdong city of Guangzhou province Whampoa Tianhe District Road No. 163 Xiping Yun Lu Yun Ping square B radio tower 12 layer self unit 01 Applicant before: GUANGZHOU SHENMA MOBILE INFORMATION TECHNOLOGY Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |