Expanded container view for graphical editing environment

• US 8,677,255 B1
• Filed: 08/27/2004
• Issued: 03/18/2014
• Est. Priority Date: 08/27/2004
• Status: Active Grant

• Current Assignee: Adobe Inc.
• Original Assignee: Adobe Systems Incorporated (Adobe Inc.)
• Inventors: Mitnick, Victor, Dumesny, Alain M., Reid, Dexter, Chua, Gabriel
• Primary Examiner(s): Bashore, William
• Assistant Examiner(s): ORR, HENRY W
• Application Number:
  US10/927,963
• Time in Patent Office: 3,490 Days
• Field of Search: 715/508, 715/524, 715/527, 715/731, 715/865, 715/763
• US Class Current: 715/763
• CPC Class Codes: G06F 8/34 Graphical or visual programming

Abstract

A Web development environment includes a design view mode that provides an expanded view of container constructs within Web page being edited. When operating in a design view of the development environment, the user is provided an option to view all container constructs in an expanded view. The expanded view will temporarily increase the visual attributes of the container constructs allowing the user to more easily access the editing regions within the cells or content locations of the container. Increasing the visual attributes also allows the developer to see the structure of the edited Web page more clearly. When the developer is finished working with the container, he or she may then return to a standard or other view offered by the graphical development environment. The resulting containers will be re-rendered according to the originally-coded size, without the additional space added for viewing in the expanded mode.

Claims

1. A computer-implemented method comprising:

displaying an output presentation of a Web page in a design view of a Web development environment displayed on a computer display device, wherein said Web page comprises one or more container constructs comprising at least a first container with no actual container spacing;

presenting a graphical expansion selector on an interface of said Web development environment; and

responsive to receiving a user selection of said graphical expansion selector;

adding space to actual container spacing of said one or more container constructs in said output presentation to make said actual container spacing at least equal in size to a predefined minimum container spacing, wherein the actual container spacing of the first container increases from none to at least the predefined minimum container spacing; and

applying a predefined border style to said one or more container constructs.

2. The method of claim 1 further comprising:

comparing said actual container spacing with said predefined minimum container spacing, wherein said adding space step is responsive to said predefined minimum container spacing exceeding said actual container spacing; and

said applying said predefined border comprising one or more of;

setting a pre-defined border color; and

adding width to an actual border width of said Web page to make said actual border width at least equal to a minimum border width of said predefined border style.

3. The method of claim 1 further comprising:

presenting to said user a graphical return selector; and

responsive to said user selecting said graphical return selector, rendering said Web page within said Web development environment using said actual content spacing and said actual border style.

4. The method of claim 1:

wherein said actual border style comprise;

a border width coded into source code of said Web page; and

a border color coded into said source code; and

wherein said predefined border style comprises one or more of;

a minimum border width; and

a pre-defined border color.

5. The method of claim 1:

wherein said actual container spacing comprises one or more of;

actual content padding;

actual cell spacing; and

actual margin size; and

wherein said predefined minimum container spacing comprises one or more of;

minimum content padding;

minimum cell spacing; and

minimum margin size.

6. The method of claim 1 wherein said one or more container constructs comprise one or more of:

a form;

a form item;

a panel;

a tile;

a grid;

a grid row;

a grid item;

a title window;

a control bar;

a HDividedBox;

a VDividedBox;

an application;

a HBox;

a VBox;

a table construct; and

a division construct.

7. A computer-implemented method comprising:

receiving, at a Web development environment displayed on a computer display device, a selection from a user to view a Web page in an expanded mode; and

responsive to said selection, expanding a set of visual attributes for each of a plurality of instances of a container construct within said Web page, wherein said set of visual attributes are expanded by at least a predefined minimum value, wherein at least one of the visual attributes of at least one container construct is increased from none to at least the predefined minimum value.

8. The method of claim 7 wherein said set of visual attributes comprises one or more of:

cell spacing;

content padding;

margin size; and

a border style.

9. The method of claim 7 wherein said expanding comprises:

comparing said set of visual attributes for said each instance with a set of predefined minimum visual attributes; and

responsive to ones of said set of predefined minimum visual attributes exceeding corresponding ones of said set of visual attributes, modifying said ones of said set of visual attributes to equal said corresponding ones of said set of predefined minimum visual attributes.

10. The method of claim 9:

wherein said container construct is a table; and

wherein said modifying comprises;

inserting content padding to equal content padding of said set of predefined minimum visual attributes;

applying a predetermined border style of said set of predefined minimum visual attributes; and

inserting cell spacing to equal cells spacing of said set of predefined minimum visual attributes.

11. The method of claim 9:

wherein said container construct is a division; and

wherein said modifying comprises;

inserting content padding to equal content padding of said set of predefined minimum visual attributes;

applying a predetermined border style of said set of predefined minimum visual attributes; and

inserting margin spacing to equal a margin size of said set of predefined minimum visual attributes.

12. The method of claim 7 wherein said expanding comprises:

applying a predefined border style;

adding a predefined content padding value to a content padding of said set of visual attributes;

adding a predefined cell spacing value to a cell spacing of said set of visual attributes when said container construct is a table; and

adding a predefined margin value to a margin size of said set of visual attributes when said container construct is a division.

13. The method of claim 7 wherein said container construct comprises one or more of:

a table; and

a division.

14. The method of claim 7 further comprising:

receiving a signal from said user to view said Web page in a non-expanded mode; and

responsive to said signal, rendering said Web page using said set of visual attributes for each instance of said container construct.

15. A computer program product tangibly embodied on a computer readable data storage medium with computer program logic recorded thereon, the computer program product comprising:

code for displaying to a user of a Web development environment an option to expand a Web page under edit in said Web development environment;

code, executable responsive to said user selecting said option to expand said Web page, for adding space to existing container spacing a container construct being presented in a design view of a Web development environment for a Web page to make said existing container spacing at least equal in size to a predefined minimum container spacing, wherein the existing container spacing is increased from none to at least the predefined minimum container spacing; and

code, additionally executable responsive to said user selecting said option to expand said Web page, for rendering, in the design view, a minimum border to said container construct.

16. The computer program product of claim 15 further comprising:

code for comparing said existing container spacing with said predefined minimum container spacing, wherein said code for adding is executed responsive to said predefined minimum container spacing exceeding said existing container spacing; and

code for comparing an existing border of said container construct with said minimum border, wherein said code for rendering is executed responsive to said minimum border exceeding a visibility of said actual border.

17. The computer program product of claim 15 further comprising:

code for displaying to a user of said Web development environment an option to undo expansion; and

code for re-rendering said Web page within said Web development environment using said existing container spacing and said existing border in response to user selection of said option to undo expansion.

18. The computer program product of claim 15 wherein said container construct comprises at least one or more of:

a table construct; and

a division construct.

19. The computer program product of claim 18 wherein said computer program logic for expanding is executed for each instance of said container construct within said Web page.

20. A computer-implemented Web development system comprising;

a central processing unit (CPU);

a storage device coupled to said CPU;

a display device coupled to said CPU;

a Web development application stored in said storage device and executable by said CPU, wherein execution of said Web development application creates a Web development environment comprising;

a design view configured to display an output presentation of a Web page being edited within said Web development environment, said design view further configured to expand a container construct within said design view;

wherein, when expanding said container construct, said design view is further configured to insert space in an actual container spacing to increase said actual container spacing from none to at least equal in size to a predefined minimum container spacing and render a preset border style on said container construct; and

a visual expansion selector displayed on said design view, wherein said visual expansion selector executes said expansion when selected by said user.

21. The computer-implemented system of claim 20 wherein said design view is further configured to evaluate:

a difference between said actual container spacing of a Web page and said predefined minimum container spacing, wherein said design view inserts said space responsive to said predefined minimum container spacing exceeding said actual container spacing and to evaluate a difference between an actual border style of said container construct and said preset border style, wherein said design view renders said preset border style responsive to said preset border style exceeding said actual border style.

22. The computer-implemented system of claim 20 further comprising:

a return selector displayed on said design view, wherein, responsive to said users selecting said return selector, said design view is further configured to render said Web page using said actual container spacing and said actual border style.

23. The computer-implemented system of claim 20:

wherein said actual border style comprise;

an actual border width and an actual border color; and

wherein said preset border style comprise;

a preset border width and a preset border color.

24. The computer-implemented system of claim 20:

wherein said actual container spacing comprises one or more of;

actual content padding;

actual cell spacing; and

actual margin size; and

wherein said predefined minimum container spacing comprises one or more of;

minimum content padding;

minimum cell spacing; and

minimum margin size.

25. The computer-implemented system of claim 20 wherein said expansion is performed for each instance of said container construct within said Web page.

26. A computer program product tangibly embodied on a computer readable data storage medium with computer program logic recorded thereon, the computer program product comprising:

code for receiving a selection from a user to view a Web page in an expanded mode of a Web development environment; and

code, executable responsive to said selection, for expanding a set of visual attributes for each instance of a container construct within said Web page, wherein said set of visual attributes are expanded by at least a predefined minimum value, wherein at least one of the visual attributes of at least one instance of the container construct is increased from none to at least the predefined minimum value.

27. The computer program product of claim 26 wherein said code for expanding comprises:

code for comparing said set of visual attributes for said each instance with a set of predefined minimum visual attributes; and

code, executable responsive to ones of said set of predefined minimum visual attributes exceeding corresponding ones of said set of visual attributes, for modifying said ones of said set of visual attributes to equal said corresponding ones of said set of predefined minimum visual attributes.

28. The computer program product of claim 27:

wherein said container construct is a table; and

wherein said code for modifying comprises;

code for inserting content padding to equal content padding of said set of predefined minimum visual attributes;

code for applying a predetermined border style of said set of predefined minimum visual attributes; and

code for inserting cell spacing to equal cells pacing of said set of predefined minimum visual attributes.

29. The computer program product of claim 27:

wherein said container construct is a division; and

wherein said code for modifying comprises;

code for inserting content padding to equal content padding of said set of predefined minimum visual attributes;

code for applying a predetermined border style of said set of predefined minimum visual attributes; and

code for inserting margin spacing to equal a margin size of said set of predefined minimum visual attributes.

30. The computer program product of claim 29 wherein said code for applying said predetermined border style comprises:

code for adding width to an actual border width of said container construct to make said actual border at least equal to a minimum border width of said predetermined border style; and

code for setting a predetermined border color to said container construct.

31. The computer program product of claim 26 wherein said code for expanding comprises:

code for applying a predefined border style;

code for adding a predefined content padding value to a content padding of said set of visual attributes;

code for adding a predefined cell spacing value to a cell spacing of said set of visual attributes when said container construct is a table; and

code for adding a predefined margin value to a margin size of said set of visual attributes when said container construct is a division.

32. The computer program product of claim 31 wherein said code for applying said predetermined border style comprises:

code for adding width to an actual border width of said container construct to make said actual border at least equal to a minimum border width of said predetermined border style; and

code for setting a predetermined border color to said container construct.

33. The computer program product of claim 26 further comprising:

code for receiving a signal from said user to view said Web page in a non-expanded mode; and

code, executable responsive to said signal, for rendering said Web page using said set of visual attributes for each instance of said container construct.

34. A computer implemented method comprising:

presenting, by a software development environment displayed on a computer display device, a design view that shows an output presentation of a software application under edit in said software development environment;

presenting to a user of said software development environment a graphical expansion selector; and

responsive to said user selecting said graphical expansion selector;

adding space to actual container spacing of the output presentation shown in the design view to make said actual container spacing at least equal in size to a predefined minimum container spacing, wherein the actual container spacing of a first container increases from none to at least the predefined minimum container spacing; and

applying a predefined border style to said container construct.

35. The method of claim 34 further comprising:

comparing said actual container spacing with said predefined minimum container spacing, wherein said adding space step is responsive to said predefined minimum container spacing exceeding said actual container spacing; and

comparing said actual border style of said container construct with said predefined border style, wherein said applying said predefined border style is responsive to said predefined border style exceeding said actual border style, said applying said predefined border comprising one or more of;

setting a pre-defined border color; and

adding width to an actual border width of said interface page to make said actual border width at least equal to a minimum border width of said predefined border style.

36. The method of claim 34 further comprising:

presenting to a user of said development environment a graphical return selector; and

responsive to said user selecting said graphical return selector, rendering said interface page within said development environment using said actual content spacing and said actual border style.

37. The method of claim 34:

wherein said actual border style comprise;

a border width coded into source code of said interface page; and

a border color coded into said source code; and

wherein said minimum border style comprises one or more of;

a minimum border width; and

a pre-defined border color.

38. The method of claim 34 wherein said container construct comprises one or more of:

a form;

a form item;

a panel;

a tile;

a grid;

a grid row;

a grid item;

a title window;

a control bar;

a HDividedBox;

a VDividedBox;

an application;

an HBox;

a VBox;

a table construct; and

a division construct.

39. The method of claim 34 wherein said expanding is performed for each instance of said container construct within said interface page.

40. A computer implemented method comprising:

receiving a selection from a user of a development environment displayed on a computer display device, wherein said selection selects to view an interface page in an expanded mode;

responsive to said selection, expanding a set of visual attributes for each instance of a container construct within said interface page, wherein said set of visual attributes are expanded by at least a predefined minimum value, wherein at least one of the visual attributes of at least one container construct is increased from none to at least the predefined minimum value.

41. The method of claim 40 wherein said set of visual attributes comprises one or more of:

cell spacing;

content padding;

margin size; and

a border style.

42. The method of claim 40 wherein said expanding comprises:

comparing said set of visual attributes for said each instance with a set of predefined minimum visual attributes; and

responsive to ones of said set of predefined minimum visual attributes exceeding corresponding ones of said set of visual attributes, modifying said ones of said set of visual attributes by at least said predefined minimum value.

43. The method of claim 40 wherein said container construct comprises one or more of:

a form;

a form item;

a panel;

a tile;

a grid;

a grid row;

a grid item;

a title window;

a control bar;

a HDividedBox;

a VDividedBox;

an application;

an HBox;

a VBox;

a table construct; and

a division construct.

44. The method of claim 40 further comprising:

receiving a signal from said user to view said interface page in a non-expanded mode; and

responsive to said signal, rendering said interface page using said set of visual attributes for each instance of said container construct.