Layout management in a rapid application development tool

• US 9,141,346 B2
• Filed: 05/12/2011
• Issued: 09/22/2015
• 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
• Primary Examiner(s): BHARGAVA, ANIL K
• Application Number:
  US13/106,170
• Publication Number:
  US 20120290959A1
• Time in Patent Office: 1,594 Days
• Field of Search: 715/762, 715/765
• US Class Current: 1/1
• 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 from among the graphical display sub-components included in the widget, said respective most significant graphical display sub-component being a reference for relative alignment of other widgets with respect to said each widget within the page;

determining, for each widget, via the computing device, a respective relative alignment border of the reference for relative alignment, the respective relative alignment border being selected from one of a top, left, right, bottom, and center of the respective for relative alignment;

determining, via the computing device, a grouping relationship between each of the plurality of widgets, wherein at least one widget in the determined group has a respective relative alignment border that is different from the respective relative alignment border of at least one other widget within the determined group; and

for each widget in each determined group, aligning, via the computing device, the widgets with the respective relative alignment 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 such that the selected alignment is applied to each of said respective relative alignment borders in order to align each widget with respect to the other widgets in the determined group within the page.

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 reference for relative alignment of each of the text field widgets is the text field graphical display sub-component, wherein the respective relative alignment border of the text field widgets is one of the right and left border 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 for relative alignment of each of the button widget is the visual border graphical display sub-component, wherein the respective relative alignment 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 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 from among the graphical display sub-component included in the widget, said respective most significant graphical sub-component being a reference for relative alignment of other widgets with respective to said each widget with the page;

determine, for each widget, a relative alignment border of the reference for relative alignment, the respective relative alignment border being selected from one of a top, left, right, bottom, and center of the respective determined;

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

wherein at least one widget in the determined group has a respective relative alignment border that is different from the respective relative alignment border of at least one other widget within the determined group; and

for each widget in each determined group, align the widget with the respective relative alignment border of each widget in the group based on an alignment selected from the group consisting of a borizontal alignment, a vertical alignment, and a centered alignment such that the selected alignment is applied to each of said respective relative alignment borders in order to align each widget with respect to the other widgets the determined group within the page.

10. The system of claim 9, 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 for relative alignment of each of the text field widgets is the text field graphical display sub-component, wherein the respective relative alignment 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 widgets by horizontally aligning the text held widgets along the respective determined one of the right and left borders of the text field graphical display sub-components of each tem field widget.

11. The system of claim 9, 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 reference for relative alignment of each of the button widgets is the visual border graphical display sub-component, wherein the respective relative alignment 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 non-button widget adjacent the group of buttons.

12. The system of claim 9, 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.

13. 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 of more graphical display sub-components and a computer-executable functional characteristic;

determining, for each widget, a. respective most significant graphical display sub-component from among the graphical display sub-components included in the widget, said respective most significant graphical display sub-component being a reference for relative alignment of other widgets with respect to said each widget within the page;

determining, for each widget a respective relative alignment border of the reference for relative alignment, the respective relative alignment 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 group relationship between each of the plurality of widgets, wherein at least one widget in the determined group has a respective relative alignment border that is different from the respective relative alignment border of at least one other widget within the determined group; and

for each widget in each determined group, aligning, via the computing device, the widgets with the respective relative alignment 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 such that the selected alignment is applied to each of said respective alignment borders in order to align each widget with respect to the other widgets in the determined group within the page.