AUTOMATED RESPONSIVE GRID-BASED LAYOUT DESIGN SYSTEM

• US 20170102927A1
• Filed: 04/08/2016
• Published: 04/13/2017
• Est. Priority Date: 10/09/2015
• Status: Active Grant

• Current Assignee: Oracle International Corporation (Oracle Corporation)
• Original Assignee: Oracle International Corporation (Oracle Corporation)
• Inventors: GUNTHER, Jr., Richard E., PIREK, Jan, PESKA, Jan, METELKA, Miloslav, BREJLA, Ondrej
• Granted Patent: US 11,048,484 B2
• Time in Patent Office: Days
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G06F 8/38 for implementing user interfaces

Abstract

A system provides user interface (“UI”) layout design functionality. The system provides a canvas on a display, where the canvas is controlled by a grid that defines a first number of equally wide logical columns. The system then receives first user input for placing one or more panels on the canvas, where each panel is configured to horizontally occupy one or more of the first number of equally wide logical columns. The system further receives second user input for placing one or more UI components in each of the one or more panels. The system then creates a UI layout based on the first user input and the second user input. In one embodiment, each logical row in the canvas is split into equally wide logical columns, and each panel is controlled by a panel grid that also includes equally wide logical columns.

Claims

1. A computer readable medium having instructions stored thereon that, when executed by a processor, cause the processor to provide user interface (UI) layout design functionality, the providing comprising:

providing a canvas on a display, wherein the canvas is controlled by a grid that defines a first number of equally wide logical columns;

receiving first user input for placing one or more panels on the canvas, wherein each panel is configured to horizontally occupy one or more of the first number of equally wide logical columns;

receiving second user input for placing one or more UI components in each of the one or more panels; and

creating a UI layout based on the first user input and the second user input.

2. The computer readable medium of claim 1, wherein each logical row in the canvas is split into the first number of equally wide logical columns.

3. The computer readable medium of claim 1, wherein each panel is controlled by a panel grid that includes a second number of equally wide logical panel columns.

4. The computer readable medium of claim 3, wherein the second number is equal to the first number.

5. The computer readable medium of claim 3, wherein, within each panel, each UI component is configured to horizontally occupy one or more of the second number of equally wide logical panel columns.

6. The computer readable medium of claim 3, wherein each UI component has a specified minimum width and a specified default width, both expressed in logical columns.

7. The computer readable medium of claim 3, wherein, when the UI layout is rendered in a UI, each UI component horizontally occupies a same number of the equally wide logical panel columns on viewports of different sizes.

8. The computer readable medium of claim 3, wherein, when the UI layout is rendered on a device and a viewport of the device is compressed, at least one UI component slides under another UI component.

9. The computer readable medium of claim 1, wherein, when the UI layout is rendered in a UI, each panel horizontally occupies a same number of the equally wide logical columns on viewports of different sizes.

10. The computer readable medium of claim 1, wherein, when the UI layout is rendered on a device and a viewport of the device is compressed, at least one panel slides under another panel.

11. The computer readable medium of claim 1, wherein, when a new panel is added in a logical row whose logical columns are occupied by one or more existing panels, the logical columns are evenly split among the new panel and the existing panels.

12. The computer readable medium of claim 1, wherein, when a new panel is dragged from a component palette onto the canvas that includes one or more existing panels, the UI layout design functionality allows for the new panel to be dropped in a drop target area configured relative to the one or more existing panels.

13. The computer readable medium of claim 12, wherein the drop target area is above, below, to the left, or to the right of one of the one or more existing panels.

14. The computer readable medium of claim 12, wherein the drop target area is above, below, to the left, or to the right of an entire area occupied by the one or more existing panels.

15. A method of providing user interface (UI) layout design functionality, the method comprising:

providing a canvas on a display, wherein the canvas is controlled by a grid that defines a first number of equally wide logical columns;

receiving first user input for placing one or more panels on the canvas, wherein each panel is configured to horizontally occupy one or more of the first number of equally wide logical columns;

receiving second user input for placing one or more UI components in each of the one or more panels; and

creating a UI layout based on the first user input and the second user input.

16. The method of claim 15, wherein each logical row in the canvas is split into the first number of equally wide logical columns.

17. The method of claim 15, wherein each panel is controlled by a panel grid that includes a second number of equally wide logical panel columns.

18. The method of claim 17, wherein the second number is equal to the first number.

19. The method of claim 17, wherein, within each panel, each UI component is configured to horizontally occupy one or more of the second number of equally wide logical panel columns.

20. A system for providing user interface (UI) layout design functionality, the system comprising:

a providing module that provides a canvas on a display, wherein the canvas is controlled by a grid that defines a first number of equally wide logical columns;

a receiving module that receives first user input for placing one or more panels on the canvas, wherein each panel is configured to horizontally occupy one or more of the first number of equally wide logical columns;

the receiving module further receiving second user input for placing one or more UI components in each of the one or more panels; and

a creating module that creates a UI layout based on the first user input and the second user input.