Block visualization

• US 7,996,780 B1
• Filed: 05/27/2005
• Issued: 08/09/2011
• Est. Priority Date: 05/27/2005
• Status: Active Grant

• Current Assignee: Adobe Inc.
• Original Assignee: Adobe Systems Incorporated (Adobe Inc.)
• Inventors: Mitnick, Victor
• Primary Examiner(s): Chow; Dennis-Doon
• Assistant Examiner(s): Pham; Linh K
• Application Number:
  US11/140,582
• Time in Patent Office: 2,265 Days
• Field of Search: 715/726, 715/517, 715/520, 715/521, 715/528, 715/529, 715/762, 715/769, 715760-761, 715/764
• US Class Current: 715/762
• CPC Class Codes: G06F 8/38 for implementing user interfaces

Abstract

Block layout features in an interface under design are visually enhanced for a designer. When viewing the interface in a graphical design view of a development environment (DE), the DE adds a fill color for certain layout blocks making up the interface. The color selected for the block is selected to contrast against the colors of any adjacent blocks. The DE may also add visual representations showing the box model parameters of the layout blocks making up the interface. The developer is, therefore, able to see the visual block layout of the interface and also the basic layout of any of the individual blocks.

Claims

1. A computer implemented method for designing a user interface (UI) in a graphical design view, said method comprising:

detecting, by a application development environment providing the graphical design view, one or more layout blocks defined on said UI;

checking the layout blocks against a list of pre-selected block types;

in response to detecting and checking, automatically painting a color over each one of said one or more layout blocks in said graphical design view if a block visualization feature is activated, the color of each block selected so that adjacent areas have different colors, and the colors are not displayed if the block visualization feature is not activated;

displaying, in the graphical design view, a plurality of graphical indicators representing a set of box model parameters associated with at least one of the layout blocks, the box model parameters comprising at least one of a padding or margin of the layout block; and

providing an option to toggle one or more of the plurality of graphical indicators on or off, wherein toggling the one or more of the plurality of graphical indicators off removes the toggled one or more graphical indicators from the graphical design view,

wherein the plurality of graphical indicators each comprise at least one of;

a colored region displayed on one or more areas of the layout block, the one or more areas corresponding to a location of the set of box model parameters and the colored region being a different color than the color of the layout block;

hatch marks rendered onto the one or more areas of the layout block;

or

a shaded region drawn onto the one or more areas of the layout block.

2. The computer implemented method of claim 1 further comprising:

outlining each of said one or more layout blocks.

3. The computer implemented method of claim 1, wherein said list of pre-selected layout block types is editable by a designer.

4. The computer implemented method of claim 1, wherein said plurality of graphical indicators are displayed on the layout block responsive to input selecting the block after the layout blocks have been painted.

5. A computer program product having a tangible computer readable medium with computer program logic recorded thereon for designing a user interface (UI) in a graphical design view, said computer program logic comprising:

code for detecting, by an application development environment providing the graphical design view, one or more layout blocks defined on said UI;

code for checking the layout blocks against a list of pre-selected block types;

code for automatically painting a color over each one of said one or more layout blocks in said graphical design view in response to detecting and checking, automatically painting occurring only if a block visualization feature is activated, a color used for each block so that adjacent blocks have different colors, and the colors are not displayed if the block visualization feature is not activated;

code for displaying, in the graphical design view, a plurality of graphical indicators representing a set of box model parameters associated with at least one of the layout blocks, the box model parameters comprising at least one of a padding or margin of the layout block; and

code for providing an option to toggle one or more of the plurality of graphical indicators on or off, wherein toggling the one or more of the graphical indicators off removes the one or more of the graphical indicators that have been toggled off from the graphical design view,

wherein the plurality of graphical indicators each comprise at least one of;

a colored region displayed on one or more areas of the layout block, the one or more areas corresponding to a location of the set of box model parameters and the colored region being a different color than the color of the layout block;

hatch marks rendered onto the one or more areas of the layout block;

or

a shaded region drawn onto the one or more areas of the layout block.

6. The computer program product set forth in claim 5, further comprising code for outlining each of said one or more layout blocks.

7. The computer program product set forth in claim 5, wherein said list of pre-selected layout block types is editable by a designer.

8. The computer program product set forth in claim 5, wherein the code for displaying the plurality of graphical indicators is configured to display the graphical indicators on the layout block responsive to input selecting the block after the layout blocks have been painted.

9. A computing system comprising a processor with access to a computer-readable medium tangibly embodying program components that configure the computing system to perform actions comprising:

providing an application development environment with a graphical design view, the graphical design view configured to allow design of a user interface;

detecting, by the application development environment, one or more layout blocks defined in the user interface;

checking the layout blocks against a list of pre-selected block types;

in response to detecting and checking, automatically painting a color over each one of said one or more layout blocks in said graphical design view, automatically painting occurring only if a block visualization feature is activated, a color used for each block so that adjacent blocks have different colors, and the colors are not displayed if the block visualization feature is not activated;

displaying, in the graphical design view, a plurality of graphical indicators representing a set of box model parameters associated with at least one of the layout blocks, the box model parameters comprising at least one of a padding or margin of the layout block; and

providing an option to toggle one or more of the plurality of graphical indicators on or off, wherein toggling the one or more of the plurality of graphical indicators off removes the one or more graphical indicators that have been toggled off from the graphical design view, wherein the plurality of graphical indicators each comprise at least one of;

a colored region displayed on one or more areas of the layout block, the one or more areas corresponding to a location of the set of box model parameters and the colored region being a different color than the color of the layout block;

hatch marks rendered onto the one or more areas of the layout block;

or

a shaded region drawn onto the one or more areas of the layout block.

10. The computing system set forth in claim 9, wherein the program components configure the computing system to perform actions further comprising:

outlining each of said one or more layout blocks.

11. The computing system set forth in claim 9, wherein the program components configure the computing system to perform actions further comprising:

receiving an edit to the list of pre-selected layout block types.

12. The computing system set forth in claim 9, wherein said plurality of graphical indicators are displayed on the layout block responsive to input selecting the block after the layout blocks have been painted.