User Interface with Movable Mini-Tabs
20170351646 · 2017-12-07
Inventors
Cpc classification
G06F3/04897
PHYSICS
G06F3/04812
PHYSICS
International classification
G06F3/0481
PHYSICS
Abstract
An apparatus and method display, on a display screen, a graphical user interface (GUI) of a software application having multiple commands, according to at least two different layouts generated by a layout engine. A first layout includes, in a fixed area, a contextual ribbon including groups of controls that each pertain to a function of a particular command, while a second layout includes, in the fixed area, a non-contextual ribbon including groups of controls that each pertain to different commands. The apparatus and method switch between layouts for display in response to receiving a re-layout instruction from a user of the software application. The layout engine operates by processing a command framework, which may be hierarchical, to determine the controls for each layout, and their respective arrangement and sizes within the layout, according to a user experience guideline.
Claims
1. Apparatus for displaying a graphical user interface (GUI) of a software application having a plurality of commands, the apparatus comprising at least one computing processor that is communicatively coupled to a display screen, the at least one computing processor being configured to: cause display, on the display screen, of the GUI of the software application generated by a layout engine according to a first graphical layout that includes a fixed area having a contextual tab in which is contained a first plurality of grouped controls, each such control pertaining to a function of a selected command in the plurality of commands; and responsive to receiving a re-layout instruction from a user of the software application, cause display, on the display screen, of the GUI of the software application generated by the layout engine according to a second graphical layout that includes (1) a movable component in which is contained the first plurality of grouped controls, and (2) a fixed area having a non-contextual tab in which is contained a second plurality of grouped controls, each such control pertaining to a command in the plurality of commands; wherein the layout engine generates the GUI of the software application by: retrieving, from a command framework, a first collection including: a group of commands, or a group of functions that pertain to a single command, or a second collection, or any combination of these; when the first collection includes a group of commands or a group of functions, ordering the respective commands or functions according to a user experience guideline; and laying out each group of commands or functions according to whether the first graphical layout or the second graphical layout should be displayed.
2. The apparatus according to claim 1, wherein the layout engine further operates by: when the first graphical layout should be displayed, laying out each group of commands or functions by showing a textual label, or by showing icons each having a first size, or both; and when the second graphical layout should be displayed, laying out each group of commands or functions by not showing the textual label, and by showing icons each having a second size that is smaller than the first size.
3. The apparatus according to claim 1, wherein the layout engine further operates by: when the second graphical layout should be displayed, laying out a group of functions using a bounding box having a fixed width.
4. The apparatus according to claim 1, wherein the layout engine further operates by: when the first collection includes a second collection, recursively processing the second collection to form a nested layout.
5. The apparatus according to claim 1, wherein the at least one computing processor is further configured to: cause display, on the display screen, of the GUI of the software application according to the first graphical layout, in response to receiving another re-layout instruction from the user of the software application.
6. The apparatus according to claim 1, further comprising a memory, wherein the at least one computing processor is further configured to store, in the memory, a datum indicating whether the GUI should be displayed according to the first graphical layout or the second graphical layout.
7. A method of displaying, on a display screen, a graphical user interface (GUI) of a software application having a plurality of commands, the method comprising: causing display, on the display screen by a computing processor, of the GUI of the software application generated by a layout engine according to a first graphical layout that includes a fixed area having a contextual tab in which is contained a first plurality of grouped controls, each such control pertaining to a function of a selected command in the plurality of commands; and responsive to receiving a re-layout instruction from a user of the software application, causing display, on the display screen by the computing processor, of the GUI of the software application generated by the layout engine according to a second graphical layout that includes (1) a movable component in which is contained the first plurality of grouped controls, and (2) a fixed area having a non-contextual tab in which is contained a second plurality of grouped controls, each such control pertaining to a command in the plurality of commands; wherein the layout engine generates the GUI of the software application by: retrieving, from a command framework, a first collection including: a group of commands, or a group of functions that pertain to a single command, or a second collection, or any combination of these; when the first collection includes a group of commands or a group of functions, ordering the respective commands or functions according to a user experience guideline; and laying out each group of commands or functions according to whether the first graphical layout or the second graphical layout should be displayed.
8. The method according to claim 7, wherein the layout engine further operates by: when the first graphical layout should be displayed, laying out each group of commands or functions by showing a textual label, or by showing icons each having a first size, or both; and when the second graphical layout should be displayed, laying out each group of commands or functions by not showing the textual label, and by showing icons each having a second size that is smaller than the first size.
9. The method according to claim 7, wherein the layout engine further operates by: when the second graphical layout should be displayed, laying out a group of functions using a bounding box having a fixed width.
10. The method according to claim 7, wherein the layout engine further operates by: when the first collection includes a second collection, recursively processing the second collection to form a nested layout.
11. The method according to claim 7, further comprising: causing display, on the display screen, of the GUI of the software application according to the first graphical layout, in response to receiving another re-layout instruction from the user of the software application.
12. The method according to claim 7, further comprising storing, in a memory coupled to the computing processor, a datum indicating whether the GUI should be displayed according to the first graphical layout or the second graphical layout.
13. The method according to claim 7, further comprising displaying the fixed area in the shape of a ribbon.
14. A tangible, computer-readable storage medium in which is non-transitorily stored program code that, when executed by a computing processor, provides a method of displaying, on a display screen, a graphical user interface (GUI) of a software application having a plurality of commands, the method comprising: causing display, on the display screen by the computing processor, of the GUI of the software application generated by a layout engine according to a first graphical layout that includes a fixed area having a contextual tab in which is contained a first plurality of grouped controls, each such control pertaining to a function of a selected command in the plurality of commands; and responsive to receiving a re-layout instruction from a user of the software application, causing display, on the display screen by the computing processor, of the GUI of the software application generated by the layout engine according to a second graphical layout that includes (1) a movable component in which is contained the first plurality of grouped controls, and (2) a fixed area having a non-contextual tab in which is contained a second plurality of grouped controls, each such control pertaining to a command in the plurality of commands; wherein the layout engine generates the GUI of the software application by: retrieving, from a command framework, a first collection including: a group of commands, or a group of functions that pertain to a single command, or a second collection, or any combination of these; when the first collection includes a group of commands or a group of functions, ordering the respective commands or functions according to a user experience guideline; and laying out each group of commands or functions according to whether the first graphical layout or the second graphical layout should be displayed.
15. The storage medium according to claim 14, wherein the layout engine further operates by: when the first graphical layout should be displayed, laying out each group of commands or functions by showing a textual label, or by showing icons each having a first size, or both; and when the second graphical layout should be displayed, laying out each group of commands or functions by not showing the textual label, and by showing icons each having a second size that is smaller than the first size.
16. The storage medium according to claim 14, wherein the layout engine further operates by: when the second graphical layout should be displayed, laying out a group of functions using a bounding box having a fixed width.
17. The storage medium according to claim 14, wherein the layout engine further operates by: when the first collection includes a second collection, recursively processing the second collection to form a nested layout.
18. The storage medium according to claim 14, further comprising: causing display, on the display screen, of the GUI of the software application according to the first graphical layout, in response to receiving another re-layout instruction from the user of the software application.
19. The storage medium according to claim 14, further comprising storing, in a memory coupled to the computing processor, a datum indicating whether the GUI should be displayed according to the first graphical layout or the second graphical layout.
20. The storage medium according to claim 14, further comprising displaying the fixed area in the shape of a ribbon.
Description
BRIEF DESCRIPTION OF THE DRAWINGS
[0012] The foregoing features of embodiments will be more readily understood by reference to the following detailed description, taken with reference to the accompanying drawings, in which:
[0013]
[0014]
[0015]
[0016]
[0017]
[0018]
[0019]
[0020]
[0021]
[0022]
[0023]
[0024]
DETAILED DESCRIPTION OF SPECIFIC EMBODIMENTS
Definitions
[0025] As used in this description and the accompanying claims, the following terms shall have the meanings indicated, unless the context otherwise requires:
[0026] A “computing processor” is a manufacture capable of electronically executing a sequence of instructions that perform a computation.
[0027] A “memory” is a manufacture capable of electronically storing data and retrieving stored data.
[0028] A “display screen” or “display device” is a manufacture capable of visually presenting information to an observer.
[0029] A “computer process” is a process used by a computer or computer system, especially within a computing processor, to perform a computation.
[0030] An “executable program” (or “program”) is a sequence of instructions that perform a computation when executed by a computing processor as a computer process.
[0031] A “computer application” (or “application”, in context) is a combination, of one or more programs with any data related thereto, that performs one or more related computations.
[0032] A “graphical user interface” (GUI) is an arrangement of information, provided by an application for display on a display device, that allows a user to interact with the application, through the use of graphical icons and text. As used herein, the term GUI does not include a “command line interface” (CLI), as that phrase is understood in the art. As is known in the art, an application may execute on one electronic device (e.g. a server computer), while a GUI for the application is displayed on a different electronic device (e.g. the display screen of a client computer).
[0033] Specific embodiments of the invention allow a user to control the layout of groups of controls for commands, sub-commands, and contextual functions in the GUI of an application, while advantageously enabling more efficient development of the application, including by reducing programming errors and by providing a layer of abstraction between particular functions of the application (namely, the view and the view model). This is especially important in computer-aided design (CAD) applications, whose hierarchy of commands and functions tend to be complex and for which display screen space may be at a premium.
[0034] Several figures illustrate the capabilities of an embodiment of the invention.
[0035] When a tab selection area 16 is selected, the GUI 10 displays a multi-command tab having a fixed ribbon area containing a collection of icons and input areas, organized into command subgroups. Thus, in
[0036]
[0037] This layout of functions in the active command ribbon 21 presents the user with group and control labels that help the user understand what input is needed in the different controls. This layout is useful when the user is unfamiliar with a selected command. However, an experienced user of the command may not need the labels, and may want to have the controls closer to where she is working (including on another display screen).
[0038] To solve this problem, illustrative embodiments of the invention permit the functions displayed in the active command ribbon 21 of the contextual tab 20 to be re-laid out using less screen space, according to a user preference. Advantageously, the re-layout may be done using information already required to layout the functions of the command in the active command ribbon 21, as described below. Thus, as shown in
[0039] Upon selection of the menu 24 using the GUI, an embodiment of the invention re-lays out the contextual functions pertaining to the command as a display component 26, or “mini-tab,” that is movable within the GUI 10, as shown in
[0040] In accordance with the re-layout, all of the same functions in the active command ribbon 21 preferably are present in the display component 26. Advantageously, particularly for smaller display devices (e.g., handheld devices), the corresponding icons and input areas now use less screen area and are movable by dragging the gripper button 28. Moreover, the ribbon 14 now displays the multi-command ribbon 18, rather than the active command ribbon 21.
[0041] The display component 26 may be moved anywhere within the main work area 12, for example as shown in
[0042] To facilitate determining which layout should be shown, the software application may maintain a global datum that indicates whether to display each laid out group of controls in the fixed area of the ribbon 14, or as the display component 26, which, as noted, is movable within the main work area 12 of the GUI.
[0043]
[0044] A layout engine 40 populates the GUI 10 with visible items according to a user preference between contextual tab display and mini-tab display. Individual commands 32 do not communicate directly with the layout engine 40. Instead, a command framework 30 provides information from a command 32 to the layout engine 40. The command framework 30 also manages default communication between the group collections 34, group view models 36, and user interface control view models 38 as required. The command developer handles this communication within the command 32 and view models 36, 38 without having to directly connect and manage that default communication.
[0045] Groups may be active or inactive. A group collection 34 or individual control may be initially inactive or hidden, and become active or shown only when relevant based on the current state of the user interface. For example, within a group collection 34 that supports an active group, while a group is not active its controls may be hidden and not shown. If the user selects that group, then its controls will be shown.
[0046] The layout engine 40 is responsible for processing the group collections 34 and view models 36, 38 to populate the user interface. In accordance with an embodiment of the invention, when laying out the GUI 10, the layout engine 40 operates algorithmically as follows, with reference to
[0047] Next, in process 57 of
[0048] The algorithm for managing the specific rendering of the full (active component ribbon) layout 42 and compacted (mini-tab) layout 44 allows the layout engine 40 to defer some layout processing to the specifics of the layout type required. The algorithm for compacting (that is, for switching from the full layout 42 to the compacted layout 44) generally operates as follows. Default groups (such as “Okay/Apply/Cancel”) are displayed in the mini-tab layout 44 with minimal information required to be usable for the application user. Generally this includes smaller size and less or no textual information. Each individual top level group is limited in the mini-tab layout 44 to a fixed size height and width. Each individual control view model 38 is additionally processed for minimalistic display, such as removing labels in favor of icons, and using smaller, more standardized sizing of controls. Display of other attributes and properties display is limited, and an overflow mechanism is provided to keep these attributes and properties within the bounding box of the display component 26. Specific group view models 36 and user interface control view models 38 may provide additional information, such as compacted display sizing or other preferences, that can be used to further handle compacting the layout. The algorithm for converting from the compacted mini-tab layout 44 back to the full layout 42 generally operates in reverse, to expand the various displayed controls and add detail that was lost.
[0049] The above-described algorithms for the layout engine 40 provide several technical and other advantages. A primary advantage is that the ability to provide multiple layouts allows a user to tailor the experience of using the software application to his or her personal liking. Another advantage is that multiple layouts 42, 44 may be provided with no additional coding work on the part of the software developer. Thus, it will be appreciated that the layouts 42, 44 are described for purposes of illustration only, and that additional layouts advantageously may be automatically provided according to the needs of the particular software application. A third advantage is that these multiple layouts may be configured and reconfigured using tools well known in the art, including XML configuration files, without disturbing the underlying code. As is known in software development, the compiling process for converting source code into executable code may be time-consuming, so leaving the underlying source code intact shortens development time while providing the flexibility to try out different layouts. A fourth advantage is that grouping functions permits more efficient administration of the software development process. In particular, different function groups may be developed in parallel, or even under different administrative controls. Moreover, once a group of functions has been developed for a first command, it may be placed in a library of such groups and reused with another command. By grouping functions together, multiple cooperative functions may be reused wholesale as integrated components, reducing time-to-market and expense of the development process.
[0050]
[0051]
[0052] The at least one computing processor 61 is configured to cause display, on the display screen 64, of the GUI of the software application according to a first graphical layout (e.g. as shown in
[0053] It should be appreciated that each of these components is operatively connected by any conventional interconnect mechanism. For example, in
[0054] It should be reiterated that the representation of
[0055] Illustrative embodiments may be implemented on a variety of different systems. Among others, illustrative embodiments may be implemented on a plant design program for developing a large-scale project. For example,
[0056] The capital project 70 shown in
[0057] To that end, those skilled in the art have developed the prior noted plant design programs/products (“plant design programs”) to assist in planning/designing, developing, maintaining, and decommissioning capital projects 70, such as that shown in
[0058] Accordingly, designers, engineers, developers, managers and other relevant parties use these and other features of plant design programs, such as the SmartPlant® product, to design, build, update, manage, and decommission capital projects 70, such as the power plant shown in
[0059] Various embodiments of the invention may be implemented at least in part in any conventional computer programming language. For example, in addition to the computer programming languages noted above, some embodiments may be implemented in a procedural programming language (e.g., “C”), or in an object oriented programming language (e.g., “C++”). Other embodiments of the invention may be implemented as a pre-configured, stand-along hardware element and/or as preprogrammed hardware elements (e.g., application specific integrated circuits, FPGAs, and digital signal processors), or other related components.
[0060] In an alternative embodiment, the disclosed apparatus and methods (e.g., see the flow chart described above) may be implemented as a computer program product for use with a computer system. Such implementation may include a series of computer instructions fixed either on a tangible, non-transitory medium, such as a computer readable medium (e.g., a diskette, CD-ROM, ROM, or fixed disk). The series of computer instructions can embody all or part of the functionality previously described herein with respect to the system.
[0061] Those skilled in the art should appreciate that such computer instructions can be written in a number of programming languages for use with many computer architectures or operating systems. Furthermore, such instructions may be stored in any memory device, such as semiconductor, magnetic, optical or other memory devices, and may be transmitted using any communications technology, such as optical, infrared, microwave, or other transmission technologies.
[0062] Among other ways, such a computer program product may be distributed as a removable medium with accompanying printed or electronic documentation (e.g., shrink wrapped software), preloaded with a computer system (e.g., on system ROM or fixed disk), or distributed from a server or electronic bulletin board over the network (e.g., the Internet or World Wide Web). In fact, some embodiments may be implemented in a software-as-a-service model (“SAAS”) or cloud computing model. Of course, some embodiments of the invention may be implemented as a combination of both software (e.g., a computer program product) and hardware. Still other embodiments of the invention are implemented as entirely hardware, or entirely software.
[0063] The embodiments of the invention described above are intended to be merely exemplary; numerous variations and modifications will be apparent to those skilled in the art. All such variations and modifications are intended to be within the scope of the present invention as defined in any appended claims.