Layout Management in a Rapid Application Development Tool

• US 20120290959A1
• Filed: 05/12/2011
• Published: 11/15/2012
• Est. Priority Date: 05/12/2011
• Status: Active Grant

• Current Assignee: Google LLC (Alphabet Inc.)
• Original Assignee: Google Inc. (Alphabet Inc.)
• Inventors: Quine, Daniel Nicholas
• Granted Patent: US 9,141,346 B2
• Time in Patent Office: Days
• US Class Current: 715/765
• CPC Class Codes: G06F 16/958 Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
• CPC Class Codes: G06F 3/048 Interaction techniques based on graphical user interfaces [GUI]
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G06F 3/04842 Selection of displayed objects or displayed text elements G06F3/0482 takes precedence
• CPC Class Codes: G06F 8/34 Graphical or visual programming
• CPC Class Codes: G06F 8/38 for implementing user interfaces
• CPC Class Codes: G06F 9/451 Execution arrangements for user interfaces

Abstract

The present application discloses systems, computer-readable media, and methods for aligning widgets and groups of widgets, and defining relationships between the widgets and groups of widgets. In a first case, a most significant sub-component border determination may be made for each widget. Then, a grouping relationship determined between each of a plurality of the widgets. Finally, for each widget in each determined group, the widgets may be aligned based on the determined most significant sub-component border of each widget in the group. In a second case, connections between widgets, groups of widgets, and/or edges of a page are determined, and an algorithm applied to infer whether a relationship exists, and if it does, to determine whether the relationship is one of a fixed-distance relationship and a proportional-distance relationship.

Claims

1. A computer implemented method of aligning widgets on a page, the method comprising:

providing, via a computing device, a graphical development environment, the graphical development environment depicting a representation of a page and a plurality of user-selectable data-capable widgets, each widget comprising one or more graphical display sub-components and a computer-executable functional characteristic;

determining for each widget, via the computing device, a respective most significant graphical display sub-component;

determining, for each widget, via the computing device, a respective most significant graphical display sub-component border of the respective determined most significant graphical display sub-component, the respective most significant graphical display sub-component border being selected from one of a top, left, right, bottom, and center of the respective determined most significant graphical display sub-component;

determining, via the computing device, a grouping relationship between each of the plurality of widgets; and

for each widget in each determined group, aligning, via the computing device, the widgets with the respective determined most significant sub-component border of each widget in the group based on an alignment selected from the group consisting of a horizontal alignment, a vertical alignment, and a centered alignment.

2. The method of claim 1, wherein at least one grouping relationship comprises a group of vertically-disposed text field widgets, each text field widget having a respective associated text label graphical display sub-component and a respective associated text field graphical display sub-component, wherein the respective determined most significant graphical display sub-component of each of the text field widgets is the text field graphical display sub-component, wherein the respective determined most significant graphical display sub-component border of the text field widgets is one of the right and left borders of the text field graphical display sub-component, and wherein aligning the text field widgets comprises horizontally aligning the text field widgets along the respective determined one of the right and left borders of the text field graphical display sub-components of each text field widget.

3. The method of claim 1, wherein at least one grouping relationship comprises a group of button widgets disposed in a substantially similar horizontal plane, each button widget having a respective associated visible border graphical display sub-component and a respective button text visual display sub-component, wherein the respective determined most significant graphical display sub-component of each of the button widgets is the visual border graphical display sub-component, wherein the respective determined most significant graphical display sub-component border of the button widgets is the center of the visible border graphical display sub-component, and wherein aligning comprises aligning the button widgets horizontally along the center of each respective visible border graphical display sub-component, and

the method further comprising, after aligning the button widgets within the group, right-aligning the group of button widgets to a right-most edge of a non-button widget adjacent the group of buttons.

4. The method of claim 1, wherein the grouping relationship comprises a vertically aligned plurality of widgets, and aligning comprises:

determining an upper-most border of the grouping of widgets;

determining a lower-most border of the grouping of widgets; and

evenly spacing the widgets in the vertical direction between the upper-most border of the grouping of widgets and the lower-most border of the grouping of widgets.

5. The method of claim 1, further comprising storing the grouping relationship in an application model datastore, along with alignment information setting forth an alignment relationship between the widgets in each determined group.

6. The method of claim 5, further comprising transmitting a representation of the group of widgets, including the alignment information, to a remote computing device.

7. The method of claim 5, further comprising transmitting an access control list to the remote computing device, the access control list including one or more identifiers associated with users authorized to access the group of widgets and the included alignment information.

8. The method of claim 1, wherein the plurality of the user-selectable data-capable widgets comprise at least two selected from the group consisting of a text field widget, a button widget, a media widget, a color widget, a font widget, a uniform resource identifier (URI) widget, a calendar widget, a menu widget, a list widget, and a selection box widget.

9. A computer implemented method comprising:

providing, via a computing device, a graphical development environment depicting a representation of a page, a plurality of user-selectable data-capable widgets, and one or more groups of user-selectable data-capable widgets, each widget comprising a graphical display characteristic and a computer-executable functional characteristic;

identifying for each widget, via the computing device, whether the widget belongs to a group of widgets;

identifying, via the computing device, a first set of connections comprising (i) each connection between each pair of widgets that do not belong to an identified group of widgets, (ii) each connection between each identified group of widgets and each widget that does not belong to an identified group of widgets, and (iii) each connection between identified groups of widgets;

assigning, via the computing device, an arbitrary default connection weight for each connection in the first set;

raising, via the computing device, the relative assigned weight of each connection in the first set that attaches to an identified group of widgets;

applying, via the computing device, a multiplier to each connection in the first set relative to a distance that the connection travels;

comparing, via the computing device, the weight of each connection in the first set to a first threshold value;

identifying, via the computing device, a second set of connections comprising those connections in the first set that one of meet the first threshold value and do not meet the first threshold value;

comparing, via the computing device, the weight of each connection in the second set to a second threshold value;

based on the relationship between the weight of each connection in the second set and the second threshold value, storing each connection in the second set as one of (i) a fixed-distance connection that does not vary based on a size of a screen or window on which the representation of the page is rendered and (ii) a proportional-distance connection that does vary based on a size of the screen or window on which the representation of the page is rendered.

10. The method of claim 9, further comprising:

determining, via the computing device, positions of at least first and second edges of the page;

identifying, via the computing device, the first set of connections to further include (iii) each connection between each edge and each widget that does not belong to an identified group of widgets and (iv) each connection between each identified group of widgets and each edge; and

raising, via the computing device, the relative assigned weight of the connection for each connection in the first set that attaches to one of the first and second edges.

11. The method of claim 10, wherein applying the multiplier comprises dividing a current weight of each connection by a square root of the distance that the connection travels.

12. The method of claim 9, wherein comparing and storing further comprises:

if the resultant weight is one of greater or less than the second threshold value, storing the connection as a fixed-distance connection that does not vary based on a size of the screen or window on which the representation of the page is rendered; and

if the resultant weight is the other of greater or less than the second threshold value, storing the connection as a proportional-distance connection that does vary based on a size of the screen or window on which the representation of the page is rendered.

13. The method of claim 9, further comprising:

displaying, in the graphical development environment via the computing device, a visual depiction of each connection in the second set as one of a fixed-distance connection and a proportional-distance connection; and

responsive to receiving an instruction, changing, via the computing device, the type of a particular connection selected from the second set from one of a fixed-type connection and a proportional-type connection to the other of a fixed-type connection and a proportional-type connection.

14. The method of claim 9, wherein applying the multiplier comprises dividing a current weight of each connection by a square root of the distance that the connection travels.

15. The method of claim 9, further comprising storing each widget, group of widgets, and connections in the second set at the computing device as an application representation.

16. The method of claim 15, further comprising transmitting the representation to a remote computing device.

17. A system, comprising:

a processor configured to;

provide a graphical development environment, the graphical development environment depicting a representation of a page and a plurality of user-selectable data-capable widgets, each widget comprising one or more graphical display sub-components and a computer-executable functional characteristic;

determine, for each widget, a respective most significant graphical display sub-component;

determine, for each widget, a respective most significant graphical display sub-component border of the respective determined most significant graphical display sub-component, the respective most significant graphical display sub-component border being selected from one of a top, left, right, bottom, and center of the respective determined most significant graphical display sub-component;

determine a grouping relationship between each of the plurality of widgets; and

for each widget in each determined group, align the widgets with the respective determined most significant sub-component border of each widget in the group based on an alignment selected from the group consisting of a horizontal alignment, a vertical alignment, and a centered alignment.

18. The system of claim 17, wherein at least one grouping relationship comprises a group of vertically-disposed text field widgets, each text field widget having a respective associated text label graphical display sub-component and a respective associated text field graphical display sub-component, wherein the respective determined most significant graphical display sub-component of each of the text field widgets is the text field graphical display sub-component, wherein the respective determined most significant graphical display sub-component border of the text field widgets is one of the right and left borders of the text field graphical display sub-component, and wherein the processor is configured to align the widgets by horizontally aligning the text field widgets along the respective determined one of the right and left borders of the text field graphical display sub-components of each text field widget.

19. The system of claim 17, wherein at least one grouping relationship comprises a group of button widgets disposed in a substantially similar horizontal plane, each button widget having a respective associated visible border graphical display sub-component and a respective button text visual display sub-component, wherein the respective determined most significant graphical display sub-component of each of the button widgets is the visual border graphical display sub-component, wherein the respective determined most significant graphical display sub-component border of the button widgets is the center of the visible border graphical display sub-component, and wherein the processor is configured to align the button widgets by horizontally aligning the button widgets along the center of each respective visible border graphical display sub-component, and

wherein the processor is further configured to, after aligning the button widgets within the group, right-align the group of button widgets to a right-most edge of a non-button widget adjacent the group of buttons.

20. The system of claim 17, wherein the grouping relationship comprises a vertically aligned plurality of widgets, and wherein the processor is configured to align the widgets by:

determining an upper-most border of the grouping of widgets;

determining a lower-most border of the grouping of widgets; and

evenly spacing the widgets in the vertical direction between the upper-most border and the lower-most border.

21. A system, comprising:

a processor configured to;

provide, via a computing device, a graphical development environment depicting a representation of a page, a plurality of user-selectable data-capable widgets, and one or more groups of user-selectable data-capable widgets, each widget comprising a graphical display characteristic and a computer-executable functional characteristic;

identify, for each widget, via the computing device, whether the widget belongs to a group of widgets;

identify a first set of connections comprising (i) each connection between each pair of widgets that do not belong to an identified group of widgets, (ii) each connection between each group of widgets and each widget that does not belong to an identified group of widgets, and (iii) each connection between identified groups of widgets;

assign, for each connection in the first set, an arbitrary default connection weight;

raise the relative assigned weight of each connection in the first set that attaches to an identified group of widgets;

apply a multiplier to each connection in the first set relative to a distance that the connection travels;

compare the weight of each connection in the first set to a first threshold value;

identify a second set of connections comprising those connections in the first set that one of meet the first threshold value and do not meet the first threshold value;

compare the weight of each connection in the second set to a second threshold value; and

based on the relationship between the weight of each connection in the second set and the second threshold value, store each connection in the second set as one of (i) a fixed-distance connection that does not vary based on a size of a screen or window on which the representation of the page is rendered and (ii) a proportional-distance connection that does vary based on a size of the screen or window on which the representation of the page is rendered.

22. The system of claim 21, wherein the processor is further configured to:

determine positions of at least first and second edges of the web page;

identify the first set of connections further to further include (iii) each connection between each edge and each widget that does not belong to an identified group of widgets and (iv) each connection between each identified group of widgets and each edge; and

for each connection in the first set that attaches to one of the first and second edges, raise the relative assigned weight of the connection.

23. The system of claim 21, wherein applying the multiplier comprises dividing a current weight of each connection by a square root of the distance that the connection travels.

24. The system of claim 21, wherein comparing and storing further comprises:

if the resultant weight is one of greater or less than the second threshold value, storing the connection as a fixed-distance connection that does not vary based on a size of the screen or window on which the representation of the page is rendered; and

if the resultant weight is the other of greater or less than the second threshold value, storing the connection as a proportional-distance connection that does vary based on a size of the screen or window on which the representation of the page is rendered.

25. An article of manufacture including a computer readable medium having instructions stored thereon that, in response to execution by a computing device, cause the computing device to perform operations comprising:

providing a graphical development environment, the graphical development environment depicting a representation of a page and a plurality of user-selectable data-capable widgets, each widget comprising one or more graphical display sub-components and a computer-executable functional characteristic;

determining, for each widget, a respective most significant graphical display sub-component;

determining, for each widget, a respective most significant graphical display sub-component border of the respective determined most significant graphical display sub-component, the respective most significant graphical display sub-component border being selected from one of a top, left, right, bottom, and center of the respective determined most significant graphical display sub-component;

determining a grouping relationship between each of the plurality of widgets; and

for each widget in each determined group, aligning the widgets based on the respective determined most significant sub-component border of each widget in the group based on one of a horizontal alignment, a vertical alignment, and a centered alignment.

26. An article of manufacture including a computer readable medium having instructions stored thereon that, in response to execution by a computing device, cause the computing device to perform operations comprising:

providing a graphical development environment depicting a representation of a page, a plurality of user-selectable data-capable widgets, and one or more groups of user-selectable data-capable widgets, each widget comprising a graphical display characteristic and a computer-executable functional characteristic;

identifying for each widget whether the widget belongs to a group of widgets;

identifying a first set of connections comprising (i) each connection between each pair of widgets that do not belong to an identified group of widgets, (ii) each connection between each identified group of widgets and each widget that does not belong to an identified group of widgets, and (iii) each connection between identified groups of widgets;

assigning an arbitrary default connection weight for each connection in the first set;

raising the relative assigned weight of each connection in the first set that attaches to an identified group of widgets;

applying a multiplier to each connection in the first set relative to a distance that the connection travels;

comparing the weight of each connection in the first set to a first threshold value;

identifying a second set of connections comprising those connections in the first set that one of meet the first threshold value and do not meet the first threshold value;

comparing the weight of each connection in the second set to a second threshold value;

based on the relationship between the weight of each connection in the second set and the second threshold value, storing each connection in the second set as one of (i) a fixed-distance connection that does not vary based on a size of a screen or window on which the representation of the page is rendered and (ii) a proportional-distance connection that does vary based on a size of the screen or window on which the representation of the page is rendered.