TWI227415B - User interface system using HTML - Google Patents

Abstract

A user interface system using HTML consists of three mutually-related frames, in which each frame is independently linked to a webpage, and each webpage has one or more hyperlinks. By selecting a hyperlink in the webpage of any of the frames, at least one linked webpage among the three frames can be changed.

Description

1227415 V. Description of the invention α) [Technical field to which the invention belongs] The present invention relates to a user interface system, in particular to a user interface system using HTML (HyperText Markup Language). [Prior art] The conventional user interface includes two types: a menu system and a tree system. The first diagram is a conventional menu system 100, which includes a menu bar 102, a content window 104, and a popup menu. menu) 112 and 114. The menu bar 10 has selection buttons such as file 106, edit 108, view 10, etc., and the content window 丨 04 shows files or information. The style menus 112 and 114 are not displayed, so they do not occupy the screen. They are displayed only when the user clicks. For example, when the user clicks the edit selection button 1 08, a pop-up menu 11 2 appears below it. The user chooses to cancel 11 6, ..., cut 1 i 8, copy i 2 〇, paste 1 2 2 and optionally paste 1 2 4 and so on. When the user moves the pointer away from the selection sister 108 and pop-up After menu 112, pop-up menu 112 will be hidden again. Some pop-up menus are multi-structured. For example, when the user moves the pointer to the function of the optional paste 124 in the pop-up menu 112, a second-level pop-up menu 114 will appear on the right side for use. Those who choose to paste text 126 and paste pictures 128 and other functions. In some systems, there may be multiple menu bars for users to select, or multiple content windows use the same menu bar, such as Apple Computer's Macintosh operating system (Apple MacOS).

Page 5 of 1227415 V. Description of the invention (2) ------ Sure, ', when the function of the program is more and more, in order to support these ^' make the menu system 丨 〇〇 has more and more layers of pop-up Once the menu is entered, it becomes difficult for the user to find a specific function, and the user must click multiple times to find the desired function. Furthermore, whenever the user uses the pop-up menu, the pop-up menu is removed. Hidden, so wide = use, when you have to use the same function repeatedly, you must repeatedly open the pop-up 'menu', which will cause user confusion. In addition, in HTML, pop-up menus compatible with most browsers cannot be easily used. 'Some do not support the < iframe > syntax, and there is no easy way to automatically remove the pop-up menu , The pop-up menu is usually implemented in an absolute position of the window in syntax. , * The second picture A is a conventional tree-like system 2000, which is composed of a tree-like menu, a window 202, and a content window 204. In the tree-like system 20 (), the functions are arranged from the tree-like structure in the tree-like menu window 202, as shown in the second picture A 1 'where the file 2 06 has the option of opening 2 0, storing 21 〇 and Off 2 only 2 and other functional options, edit 2 1 4 options include cancel 2 1 6, copy 22, paste 220 and select paste 222 and other functional options, and select paste options and paste text 224 And paste pictures 226 and other options. However, since the tree-like system 2000 lists all the function buttons, it requires a large door = time. Therefore, some tree-like systems will add a button to pack or show sweat options, which are generally symbolized, | + π and " a " are used to indicate clean-up and development respectively, as shown in the tree system 200 in FIG. 2b, as shown in the file 206 and the editor 214, and the _ 刖 add buttons 2 2 8 and 2 3 0, Among them, the symbol in the button 2 2 8 is, + 'means the function of opening 2 0, storing 21 0 and closing 212 under the slot case 2 06.

1227415 V. Description of the invention (3) The options are cleaned up, and the symbols in button 23 0 are " -n, which means that the functional options such as cancel 216, copy 218, paste 220, and selectively paste 222 under edit 21 4 are displayed. come out. As there are options such as Paste text 224 and Paste picture 226 under the option of selectively pasting 2 2 2, there are also display buttons 2 3 2 before the option of selectively pasting 222 to pack or show option 2 24 and 2 2 6. @ 样 地 'When the program has more and more functions, it will make the tree-like system 2 0 0 #The tree-like structure becomes more and more complicated, making it difficult for users to find the required power and moonlight. When the user interface system opens another document or file, it will overwrite the previous data. If the user wants to review the previous audit, he must select it again. Therefore, if the data needs to be compared, the user must Opening the data repeatedly, causing inconvenience. On the other hand, in a web system using Η TML, a menu interface similar to multi-frames is often used. The third diagram is a typical example, where the first file includes three areas 2 34, 23 6 and 2 3 8, There are one or more hyperlinks in a region. When the user clicks on any hyperlink, for example, the hyperlink 2 3 6 2 in the region, the document 2 will be opened to cover the document 1. The document 12 also has the region 2 34, 23 6 and 2 38. The contents displayed in areas 234 and 6 of file two are the same as those in file 234 and 2 3 6 of file 1. Only the contents displayed in area 238 are different between the two texts. When you click on any of the two links, for example, the hyperlink in area 2 38 will open document three to cover file two. Similarly, the areas 234, 236, and 238 that are not shown in document three and text-two Among them, only the contents displayed in the area 238 are different. Obviously, this way of replacing pages

1227415 V. Description of the invention (4) The virtual menu interface of the manufacturing-style manufacturing method. In each document, the same parts, namely areas 234 and 236, need to be written again and again, so the system is huge and complicated. Therefore, a user interface that is convenient for users to operate and find specific functions without repeatedly opening comparison data is desired. SUMMARY OF THE INVENTION An object of the present invention is to provide a user interface system using HTML. Another object of the present invention is to disclose a user interface system having three frames, the three frames being related to each other and displaying a webpage respectively. According to the present invention, a user interface system using HTML includes three frames that are related to each other. The first frame displays a first webpage with one or more hyperlinks. After linking, a second webpage is linked to the second frame, and the second webpage also has one or more hyperlinks. After clicking any of the hyperlinks on the second webpage, a third webpage is linked to the first webpage. Three frames. In addition, clicking on the hyperlink on the first webpage may also change the webpage linked to the third frame or the first frame, and clicking on the hyperlink on the second webpage may also change the link to the first frame or For the webpage of the second frame itself, if the third webpage also has a hyperlink, clicking the hyperlink of the third webpage can also change the webpage that links to the first frame, the second frame, or the third frame.

1227415 V. Description of the invention (5) [Embodiment] The fourth diagram is an example of the user interface system of the present invention. The system 300 includes three frames 302, 304, and 306, where the frame 302 is connected to a main menu web page and the frame. 3 0 4 links the menu web page once, frame 3 0 6 displays a web page that can be entered, and links to the main menu web page of frame 302 including hyperlinks such as file 3 08, edit 3 0, ..., click the main menu The hyperlink button clicked on the webpage can change the sub-menu page that is linked to frame 3.04. For example, when you click the file 3008 on the main menu page in frame 3202, you have the option to open a new file 3 ^ 2 and open the old one. File 314, save file 316, etc. The secondary menus of the hyperlink buttons are linked to the frame 304 for the user to select, and when the main menu web page in frame 302 is clicked 31, there is a cancel 318, cut The submenu web pages with 3 2 0 / copy 32 2, paste 324, and optionally paste 32 6 are linked to frame 3 04, as shown in the fifth figure. Since the present invention uses Η TML webpage mode to display data, any inner valley can be placed, but for specific forms of menus such as frame 3 002, it can be described in the form of metadata (metadata or meta-inf0), and then The system automatically generates web pages, such as using Jav-a Server Page's custom tags (CuSt0m Tags) to read the super data describing the content of the menu, and then generates the appropriate HTML web page. Because the user interface is designed by using HTML, the web page linked to each frame is changed, and the function of} l g 1 is changed. In these frames 3 0 2, 3 04, and 30 6 μ > π & It% π corresponds to an early single document, and it is not necessary to repeat the programming language section of each menu or option in all documents.

1227415 V. Description of the invention (6) The sixth diagram A is another example of the user interface system of the present invention. The user interface system 400 also includes three frames 402, 404, and 406. Including my system 40 8, financial accounting 410, ... and other hyperlink buttons. At this time, frames 404 and 406 are linked to the default web page or no web page is displayed. When the user clicks one of the hyperlink buttons in frame 4 02 At one time, for example, financial accounting 4 10, at this time, the sub-menu page of financial accounting 4 10 is linked to frame 404, as shown in the sixth figure A, where the sub-menu page linked to frame 404 is a tree system, In order to make it clear to the user that the menu currently displayed in frame 404 is the sub-menu of that option, the menu linked to frame 404 at this time can be displayed at the top of the frame 404, as shown in Figure 6A As shown, it is marked "Financial Accounting" at the top of the sub-menu webpage linked to frame 404 to indicate that the sub-menu displayed at frame 404 at this time is the sub-menu of option financial accounting 410 in frame 402. Sixth picture A The sub-menu page displayed in the middle frame 404 includes hyperlinks such as My Document 414, Subpoena Assignment 416, Financial Statement 418, ..., among which the hyperlinks such as My Document 414, Subpoena Assignment 416, and Financial Statement 418 are in front of each other. It has a display button 420, 422, and 424 to pack and display options. When the symbol displayed on the display button is +, the sub-options of the parent option are sorted out, as shown in My Document 414 and Frame 404 in Figure 6 The symbols displayed on the display buttons 42 0 and 424 in front of the financial statement 418 are +, so the sub-options are cleared up. When the symbol series displayed on the display button is 1, the sub-options indicating the parent options are expanded, as shown in the figure. The symbol displayed on the voucher operation 4 1 6 in front of the six diagram A is 42. The symbol displayed is 1, indicating that its sub-options are expanded. The sub-options of the voucher operation 416 include issuing a voucher 42 6. Printing

Page 10 1227415 V. Description of the invention (7) Tickets 42 8 and diary book 4 3 0. If you want to complete dynamic content in an HTML webpage, you can use Javascript to write related control code, such as the above “+” function, such as factory onclick = " this · style · display = n ". When the hyperlink button in frame 4 04 in the sixth picture A is clicked, the book page 43 0 is changed, as shown in the sixth picture b. At this time, the setting page of the diary book is changed. Link to frame 4 0 4 which includes settings such as chart format 43 2, date 434, account book 436, status 438, etc. Similarly, the parent option "diary book" of the page is displayed at the top of the page, and the setting is complete Then click the send button 440 at the bottom. At this time, a corresponding data page is linked to the frame 406 according to the data set in the page of the frame 404, as shown in the sixth figure C. At this time, the frame 404 and The content of 4 06 can be compared with each other. If you want to change the content of frame 40 6, you can directly change the settings in frame 404. 'It is not necessary to find the setting window of the diary book like the conventional user interface, so you can Increase convenience. In addition, the three frames of the user interface system of the present invention may affect each other to change. For example, 'clicking on the webpage ^ hyperlink button in the fifth figure A linked to the frame 402 may change the link to the frame 40 2. 404 or 406 webpages. Similarly, clicking on a hyperlink in frame 404 or 406 can also change the content of the other two frames or itself. The hyperlink buttons on the webpage can also be represented graphically. Similarly, ‘you do n’t have to repeat all menu or option programming language sections in all hyperlinked documents in this system. For applications that may modify menus or options, as long as the system modifies the corresponding files separately, it is not necessary to update all the files.

Page 1227415 V. Description of the invention (8) In the implementation of using HTML web pages, the target branch of <a> can be used to specify the frame that a link should open, for example, as shown in Figure 5B The target of the link button 408 should point to the frame 404, and the target of the hyperlink button 408 should point to the frame 406. If you want to change two or more frames at the same time, you can use Java description language, such as "setTimeout (" forms [’mine’] · submit &quot;) ". The above &lt; a &gt; is the syntax in HTML. Although the conventional web page also has a user interface whose surface form is similar to the three frames of the present invention, in fact, it is only divided into three areas on the same web page, as shown in the seventh figure, where the web page 1〇 There are three areas 12, 14 and 16 and there are multiple hyperlinks on the three areas. When the hyperlink button of area 14 is clicked, web page 20 replaces web page 10 and web pages 10 and 20 The content displayed in areas 12 and 14 is the same. Only the content in area 16 is different between the two. When you click the link button in area 16 on web page 20, web page 30 replaces the web page. 20, the content of areas 14 and 16 is the same in web pages 20 and 30, only the content of area 12 is changed. Therefore, when web pages 10, 20, and 30 are replaced continuously, three areas 12, 14 and 16 can be generated. Individually independent and interactive illusions. In fact, such systems must repeat the content in the area to be displayed on each web page. Although in the visual effect, the repeated area does not change, it actually comes from different web pages. This method of repeatedly writing in various web pages will cause the system to be large and complicated. Any update must modify all web pages, which is inconvenient and error-prone for the maintainer. In contrast, in the system of the present invention, each web page is independent but interacts with each other.

Page 12 1227415 V. Description of the invention (9) The system is simple and easy to update. The above description of the preferred embodiments of the present invention is for the purpose of clarification, and is not intended to limit the present invention to exactly the disclosed form. Modifications or changes are possible based on the above teachings or learning from the embodiments of the present invention. The embodiments are selected and described in order to explain the principle of the present invention and allow those skilled in the art to use the present invention in practical applications in various embodiments. The technical idea of the present invention is intended to be based on the scope of the following patent applications and their equivalents. Decide.

1227415 on page 13 is a simple illustration of the above description and its first, second, second, third, fourth, fifth, sixth, sixth, and sixth seventh: The clear manifestation is clearer, more sufficient and more accessible. It will be changed to the Ming Dynasty. The skill of the skill and the practice of this picture will be described by him. A single-selected knowledge-based interface user uses the system-like tree to inform the user to use the diagram of the system-like tree to perform operations. The diagrams are intended to be used as guides in the presentation of the Hip system. Three maps are shown in the AB diagrams. The user uses the intention! Another diagram of the system of operation is illustrated and illustrated. Page 3B of the drawing operation system of the operation system 3B page drawing network diagram label description 10 page 12 area 14 area 16 area 20 page 30 page 100 menu system 102 menu bar 104 content window

Page 14 1227415 Brief description of the drawings 106 File 108 Edit 110 View 112 Pop-up menu 114 Pop-up menu 116 Cancel 118 Cut 120 Copy 122 Paste 124 Selectively paste 126 Paste text 128 Paste picture 200 Tree system 20 (Γ Tree system 202 Tree menu window 204 Content window 206 File 208 Open 210 Save 212 Close 214 Edit 216 Cancel 218 Copy 220 Paste

Page 15 1227415

Schematic description on page 16 222 Selective paste 224 Paste text 226 Paste picture 228 Display button 230 Display button 232 Display button 234 Frame 236 Frame 2 3 6 2 Hyperlink 238 Frame 2 3 8 2 Hyperlink 300 Use User interface system 302 frame 304 frame 306 frame 308 file 310 edit 310 open new file 314 open old file '316 save file 318 cancel 320 cut 322 copy 324 paste 1227415

Schematic description 326 Selective Paste 400 User Interface System 402 Frame 404 Frame 406 Frame 408 My System 410 Financial Accounting 414 My Documents 416 Subpoena Jobs 418 Financial Statements 420 Display Button 422 Display Button 424 Display Button 426 428 Print Voucher 430 Book Book 432 Chart Format 434 Date Book 438 Book 438 Status 440 Submit

Claims (1)

1227415 VI. Scope of Patent Application1. A user interface system using HTML, comprising: a first frame in a window displaying a first webpage with one or more hyperlinks; a second frame in the Displaying, in a window, a second webpage having one or more hyperlinks according to the hyperlink on the first webpage; and a third frame, in the window, displaying a third according to the hyperlinks of the second webpage Web page. 2. The user interface system according to item 1 of the scope of patent application, further comprising changing the third web page displayed in the third frame according to the hyperlink on the first web page. 3. The user interface system according to item 1 of the scope of patent application, further comprising changing the first web page displayed in the first frame according to the hyperlink of the first web page. 4. If the user interface system of item 1 of the patent application scope further comprises changing the second web page displayed in the second frame according to the hyperlink of the second web page. 5. If the user interface system of item 1 of the patent application scope further comprises changing the first webpage displayed in the first frame according to the hyperlink of the second webpage. 6. If the user interface system of item 1 of the patent application scope, wherein the third webpage displayed in the third frame has one or more hyperlinks. 7 · If the user interface system of item 6 of the patent application scope further includes changing the displayed in the first frame according to the hyperlink on the third webpage Page 18 1227415 VI. Scope of Patent Application The first web page. 8. If the user interface system of item 6 of the patent application scope further includes changing the second web page displayed in the second frame according to the hyperlink of the third web page. 9. If the user interface system of item 6 of the patent application scope further comprises changing the third web page displayed in the third frame according to the hyperlink of the third web page. 10. If the user interface system of the scope of patent application item 1, wherein the first web page, the second page or the third page is written in a hyper-data manner 0 \ 11. If the user of the scope of patent application item 10 The interface system further includes using a Java server webpage to convert the hyperdata into the first webpage, the second webpage, or the third webpage. 1 2. The user interface system according to item 1 of the scope of patent application, wherein these hyperlinks are represented graphically. 1 3. The user interface system of item 1 in the scope of patent application, wherein the web pages corresponding to these frames are from different documents. Page 19