TW201317884A - Method for generating webpage form on mobile device - Google Patents

Abstract

The present invention relates to a method for generating a webpage form on a mobile device, which comprises steps of: providing at least a composite control member, each of which is constituted by tagging a first sub-control member and at least one second sub-control member and applied to a webpage on a mobile device; setting all the first sub-controls of said composite control members to align along a single side; and arranging said second sub-control member to a next row according to a width of the webpage of the mobile device and widths of all the composite control members. With the composite control member, the present invention can avoid inconsistent appearance of webpage forms resulted from interpretation differences by mobile browsers. The present invention is suitable for different kinds of mobile browsers.

Description

Mobile device web form generation method

The invention relates to a method for generating a webpage form, in particular to a method for generating a webpage form of a mobile device.

With the enhancement of functions of mobile devices such as smart phones, lower entry barriers, and the popularity of wireless communication such as 3G and WiFi, the number of mobile Internet users has increased. It has become an important channel for mobile users to receive messages through mobile browsers. .

Mobile devices such as mobile phones, tablet PCs, or personal digital assistants (PDAs), etc. (hereinafter referred to as mobile browsers), and a variety of supported web technologies (eg, HTML, JavaScript, CSS, etc.) The standards vary, and the screen size of mobile devices is diverse, causing web pages to have different presentations in different mobile browsers.

Commercial data is stored in a database and is structured. For applications developed by commercial mobile users, such as customer inquiries, product inquiries, order inquiries/modifications, etc., in order to make it easy for users to read and modify materials, it is necessary to clearly display the column headings and field contents, and arrange them neatly, so usually Form presentation.

In order to improve usability, the presentation of the form is premised on the absence of a side-scroll. In the case where the number of the form bar is large, it is necessary to have a vertical reel, but if a reel is present at the same time, the user must be difficult to operate.

In order to achieve the best results of the form rendering, a table layout is usually used. If the tabular layout is not used, the position and size of the control components are set by the absolute addressing method. Because the characteristics of the mobile browser are different, the results presented are often inconsistent.

In tabular layout, use Table (such as HTML<table>tag) in web design, place the page control in the appropriate Cell in the table (ie HTML<tr><td>tag), and place the form during design The definition is complete. At present, some high-end mobile phones such as iPhone and Android Phone can support such a layout method to achieve the normal display of the form, but still have the following disadvantages:

1. Complete form layout during the design period, which requires more development man-hours.

2, because the horizontal reel must not appear during the implementation, during the design, each mobile device must be designed according to its screen size (especially the width).

For enterprise application software developers, if they can't effectively overcome the consistency of web forms presented in different mobile browsers, they must design different kinds of mobile browsers, which will definitely reduce the productivity of software development. .

In view of this, the search for a mobile device web page form generation method has become a goal of those skilled in the art.

It is an object of the present invention to provide a method for generating a web page form of a mobile device to overcome the shortcomings of the above-mentioned prior art and to meet the consistency requirements of web page forms presented in different mobile browsers. By the composite control component design of the invention, the problem that the webpage form is inconsistent due to the difference in the interpretation manner of the mobile browser can be avoided, and the mobile browser can be adapted to different mobile browsers.

In order to achieve the above object, a preferred embodiment of the present invention provides a mobile device webpage form generating method, including the steps of: providing at least one composite control component, each composite control component being a first sub-controller and at least a second sub-controller tag is applied, the composite control is applied to a mobile device webpage; the first sub-controls of all composite controls are set to be aligned on one side; The second sub-controller is re-arranged according to the width of the mobile device webpage and the width of all composite controls.

Furthermore, the composite control is displayed on the mobile device webpage.

The step of unilateral alignment includes: taking out the width of the first sub-controller of all the composite control members, calculating the maximum value thereof; and setting the width of the first sub-control member of all the composite control members to the maximum value And set to align on one side.

The step of replacing the second sub-control member includes: calculating a total width of the first sub-control member and the second sub-control member of each composite control member according to the maximum value; and when the total width exceeds the total width When the width of the mobile device webpage is changed, the second sub-controller is re-arranged, and at the same time, the number of cross-columns of the first sub-controller of the composite control component is increased.

The calculating the total width of each composite control member includes: summing the width of the first sub-control member and the width of the first second sub-control member to a first total width; and when the first total width When the width of the mobile device webpage is not exceeded, the first total width and the width of the second second sub-controller are added as the total width.

The unilateral alignment is aligned to the left.

The unilateral alignment is aligned to the right.

According to the method of the present invention, the total width of the first sub-control member and the second sub-control member of each composite control member is calculated based on the maximum value. Here, the detailed step of calculating the total width is to add the first sub The width of the control member and the width of a second sub-control member are the total width. When the calculated total width has not exceeded the width of the mobile device webpage, the existing total width and the width of the next second sub-controller are added to the total width. Until the total width exceeds the width of the mobile device webpage, the second sub-controller is displayed in a column according to the width of the mobile device webpage and the width of all the composite control members, and one of the first sub-controllers of the composite control component is added. The number of columns across. The composite control is then displayed on the mobile device web page.

Here, in the method proposed by the present invention, the unilateral alignment may be left-aligned or right-aligned.

In order to solve the problem that the form is consistent in different mobile browsers, the present invention provides a composite control component, which simplifies the design of the page by the composite control component, and can avoid the webpage form presentation caused by the difference of the translation manner of the mobile browser. Inconsistent issues can be adapted to different mobile browsers (eg iPhone iOS, Android, Symbian S60 5th, Windows Mobile/Phone).

The composite control component is composed of a first sub-controller and at least one second sub-controller marker, and can be combined with a designer (Designer) and a rendering (Rending) mode, and the designer only needs to perform the required composite control. The components are sequentially dragged to the design area, and the alignment of the first sub-controller in the composite control member is processed according to the screen width of the mobile browser, and then the arrangement and replacement of the second sub-controllers in all the composite control members are sequentially processed.

The present invention provides a composite control member, each composite control member being composed of a first sub-control member and at least one second sub-control member mark (for example, a Table of HTML).

The composite control can be combined with a designer, allowing the designer to use the designer to design the basic form of the web page during the design period, regardless of the layout of the page control, and without considering the type and version of the mobile browser. The designer only has to drag the required composite controls to the design in sequence. In the area, the page design can be completed by top-down arrangement without the need for typesetting. After the design is completed, it is stored as a page definition script (script), which can be deployed in XML format and deployed on the web server. The page design completed by the composite control component can be used to render the aforementioned page definition script into a webpage according to the user's request to move the browser according to the request made by the user, and at the same time complete the layout of the page control component. Finally presented in the client mobile browser.

Rendering mode Dynamic typesetting working principle: The alignment of the first sub-controllers in all composite control parts is processed by taking out the width of the first sub-controller of each composite control part and calculating the maximum value. The width of the first sub-controller of each composite control member is set to the maximum value and is set to be aligned on one side (right or left).

According to the screen width of the mobile browser, the arrangement and the column arrangement of the second sub-control members in all the composite control members are sequentially processed without generating the lateral reel, by calculating the first sub-control member and each of the first The total width of the two sub-controls determines whether the width of the mobile browser is exceeded. If so, the second sub-control member performs the re-arrangement and simultaneously increases a row span of the first sub-control member of the composite control member. If no, the second sub-controller is directly output.

The present invention adopts the above technical solution to make the mobile device webpage form generating method of the present invention propose a solution for the consistency requirement of the webpage form presented in different mobile browsers compared with the prior art. By designing the composite control component, the invention can avoid the problem that the webpage form is inconsistent due to the difference of the translation manner of the mobile browser, and can adapt to different mobile browsers. In the design period, there is no need to make layout settings for page controls, simplifying development work. During the execution period, the rendering engine renders the page definition script generated by the design period into a webpage according to the properties of the client mobile browser, and simultaneously completes the layout of the page control component, including the alignment of the first sub-controller in each composite control component. Processing, and row and column position adjustment of the second sub-controller.

The invention will now be described in detail in conjunction with the drawings and embodiments.

Referring to FIG. 1 to FIG. 7, the mobile device webpage form generating method of the present invention comprises the following steps: providing at least one composite control component, each composite control component being composed of a first sub-controller 10 and at least a second sub-controller The 20 tags are combined and the composite controls are applied to the mobile device web page.

The first sub-controller 10 of all composite controls is set to be aligned on one side. Here, the detailed step of unilateral alignment is to take out the width of the first sub-controller of all the composite control members, calculate the maximum value thereof, and set the width of the first sub-controller 10 of all the composite control members to be calculated. The maximum value is set to unilaterally aligned.

Next, based on the maximum value, the total width of the first sub-controller 10 and the second sub-controller 20 of each composite control member is calculated. Here, the detailed step of calculating the total width is to add up the width of the first sub-control member 10 and the width of one second sub-control member 20 to the total width. When the calculated total width has not exceeded the width of the mobile device web page, the existing total width and the width of the next second sub-controller 20 are added to the total width. Until the total width exceeds the width of the mobile device webpage, the second sub-controller 20 is displayed in a column according to the width of the mobile device webpage and the width of all the composite control members, and the first sub-controller 10 of the composite control member is added. A cross-column number. The composite control is then displayed on the mobile device web page.

Here, in the method proposed by the present invention, the unilateral alignment may be left-aligned or right-aligned.

As shown in FIG. 1 to FIG. 2, the present invention provides a mobile device webpage form generating method, which comprises at least one composite control component, which is composed of a first sub-controller 10 and One less second sub-controller 20 is combined.

Referring to FIG. 1, the mobile device webpage form generation method of the present invention comprises the following steps:

(1) processing the alignment of the first sub-controller 10 in all the composite control members, taking out the width of the first sub-controller 10 of each composite control member, and calculating the maximum value thereof; and the first sub-controller of each composite control member The width of 10 is set to this maximum value and is set to be aligned on one side (left or right).

(S11) selecting at least one composite control member; (S12) capturing the screen width of the mobile device; (S13) determining whether there are more than two composite control members, and if so, executing step S14; if not, executing step S16; (S14) Calculating the width of the first sub-controller 10 of each composite control member and obtaining a maximum value; (S15) adjusting the width of the first sub-control member 10 of each composite control member according to the maximum value, and aligning with one side; S16) calculating whether the width of the composite control member is greater than the width of the mobile browser, if yes, executing step S17; if not, executing step S18; (S17) the composite control member performs column display; and (S18) displaying composite control Pieces.

Please refer to FIG. 2, (2) according to the screen width of the mobile browser, sequentially processing the arrangement and replacement of the second sub-controller 20 in all the composite control components without generating the lateral reel, and calculating the first The total width of the sub-controller 10 and each of the second sub-controllers 20 determines whether the width of the mobile browser is exceeded; if so, the second sub-controller 20 performs the re-arrangement and simultaneously increases the first sub-controller a cross-column number of the control member 10; if not, the second sub-control is directly output Item 20.

(S21) calculating a total width of the first sub-controller and a second sub-controller 20; (S22) confirming whether the total width of the first sub-controller 10 and the second sub-controller 20 exceeds the mobile browsing If the total width of the device is YES, step S23 is performed; if not, step S24 is performed; (S23) the number of cross-columns of the first sub-controller 10 is incremented by one, and the second sub-controller 20 is replaced; (S24) It is confirmed whether there is a next second sub-controller 20, and if so, step S22 is performed; if not, step S25 is performed; and (S25) is ended.

Please refer to Figures 4 to 7 for a detailed description of the following examples.

As shown in Figure 4, assume that the device screen resolution is 320 × 480 (width × height). Two composite controls are selected. One composite control is composed of sub-controllers Cell 11, Cell 12, Cell 13, Cell 14 and Cell 15, and the other composite control is controlled by sub-controllers Cell 21, Cell 22, Cell 23, Cell 24 and The cell 25 is composed, wherein the sub-controller Cell 11 in one of the composite control members is the first sub-controller 10, and the remaining sub-controllers Cell 12, Cell 13, Cell 14, and Cell 15 are respectively the second sub-controller 20; The sub-controller Cell 21 in the composite control member is the first sub-controller 10, and the remaining sub-controllers Cell 22, Cell 23, Cell 24, and Cell 25 are the second sub-controller 20, respectively.

As shown in Fig. 5, the width of the first sub-controller 10 of each composite control member, such as the sub-controller Cell 11, Cell 21 width, is calculated and the maximum value is obtained for alignment according to the maximum value. As can be seen in Figure 5, Cell 11 has an original width of 100 and will be aligned with a maximum of 120 edges after processing.

As shown in Fig. 6, it is calculated whether the first sub-controller 10 and the second sub-controller 20 exceed the screen width. When Cell 11 (width 120) and Cell 12 (width 90) are added less than the screen width 320, the total width is set to 120 + 90 = 210, then the total width and the next second sub-controller Cell 13 (width 40) Adding until the total width is greater than the screen width 320. As can be seen in Figure 6, when Cell 11 (width 120) and Cell 12 (width 90), Cell 13 (width 40), and Cell 14 (width 120) are added, the total width becomes 120+90+40+ 120=370, where the total width is greater than the screen width 320.

As shown in FIG. 7, the first sub-controller 10 and the second sub-controllers 20 are over the screen, and the second sub-controllers 20 are replaced, such as sub-controller Cell 14.

The mobile device of the present invention may be a mobile phone, a personal digital assistant, or a palmtop computer or a tablet computer.

In summary, the mobile device webpage form generation method of the present invention proposes a solution for the consistency requirement of the webpage form presented in different mobile browsers, and the composite control component is designed to avoid interpretation by the mobile browser. The difference in the way causes the webpage form to be inconsistent, which can be adapted to different mobile browsers. In the design period, the layout control of the page control is not required to simplify the development work; during the execution period, the rendering engine is based on the client's mobile browser. The attribute is to render the page definition script generated by the design period into a webpage, and at the same time complete the layout of the page control component, including alignment processing of the first sub-controller in each composite control component, and alignment of the second sub-controller.

Of course, it should be understood by those skilled in the art that the above-described embodiments are merely illustrative of the invention and are not intended to limit the invention, as long as the changes of the above embodiments are within the spirit of the invention. Modifications, etc. will fall within the scope of the patent application of the present invention.

10‧‧‧First child control

20‧‧‧Second sub-controller

S11~S18‧‧‧Steps

S21~S25‧‧‧Steps

FIG. 1 is a flow chart of the first step of the method for generating a webpage form of a mobile device according to the present invention.

FIG. 2 is a flow chart of step 2 of the method for generating a webpage form of a mobile device according to the present invention.

Figure 3 is a schematic view of the first sub-controller and the second sub-controller of the present invention.

4 to 7 are schematic diagrams showing the steps of the method for generating a web page form of a mobile device in actual use.

S11~S18‧‧‧Steps

Claims (7)

A mobile device webpage form generating method includes: providing at least one composite control component, each composite control component being composed of a first sub-controller and at least a second sub-controller mark, wherein the composite control is applied to a mobile device webpage; setting a first sub-controller of all composite controls to be aligned on one side; and arranging the second sub-controller according to a width of the mobile device webpage and a width of all composite controls . The method for generating a mobile device webpage form according to claim 1, further comprising the step of displaying the composite control component on the mobile device webpage. The mobile device webpage form generating method according to claim 1, wherein the step of unilaterally aligning comprises: taking out a width of the first sub-controller of all the composite control members, calculating a maximum value thereof; and all the composites The width of the first sub-control member of the control member is set to the maximum value and is set to be aligned on one side. The mobile device webpage form generating method according to claim 3, wherein the step of subdividing the second sub-controller comprises: calculating a first sub-controller of each composite control component according to the maximum value; And a total width of the second sub-controller; and when the total width exceeds a width of the mobile device webpage, exchanging the second sub-controller and simultaneously increasing the first sub-control of the composite control A cross-column number of pieces. The method for generating a mobile device webpage form according to item 4 of the patent application scope, wherein The step of calculating the total width of each composite control member includes: summing the width of the first sub-control member and the width of the first second sub-control member to a first total width; and when the first total width does not exceed the When the width of the mobile device webpage is increased, the first total width and the width of the second second sub-controller are added as the total width. The method for generating a mobile device webpage form according to claim 1, wherein the one-sided alignment is left-aligned. The method for generating a mobile device webpage form according to claim 1, wherein the one-sided alignment is aligned to the right.