Method and system for generating button and tab user interface control components within the context of a hypertext markup language (HTML) based web page

A method and system for web based control components. Specifically, the present invention describes a method of rendering user interface button and tab control components within a hypertext markup language (HTML) web page. The present invention generates an HTML table that comprises a plurality of cells. For a button component a two row by three column table is generated. For a tab component a five column table is generated. The present invention places a plurality of graphical corner images in the plurality of cells to produce corner outlines of the button or tab control component. Multiple button or tab components can be coupled together in a single table by repeatedly adding more of the plurality of cells associated with button or tab components, respectively. In addition, the control component has the ability to accommodate word wrapping of the text contained within the control component.

BACKGROUND OF THE INVENTION

1. Field of the Invention

Embodiments of the present invention relate to the field of web based control components. More particularly, embodiments of the present invention relate to button and tab control components for display within the context of a hypertext markup language based web page.

2. Related Art

Network environments allow a worldwide collection of networks (e.g., the Internet) and users on those networks to communicate with each other. Users accessing the Internet through a web browser can access and interact with content from web sites that are located on the Internet. Web sites located on the Internet comprise a group of related documents, associated files, script routines, and databases. A server manages and controls the websites that are associated with the server to present content within the websites to the accessing users.

The standardized Hypertext Markup Language (HTML) can be used for creating documents that are supported by various platforms (operating system and web browser) on the Internet. The HTML uses tags to mark elements (e.g., text and graphics) in a document to indicate how a web browser should display those elements. As such, a web page coded in HTML will generally be presented to a user similarly across various platforms.

In addition, HTML tags indicate how components within the web page should respond to actions by a user (e.g., mouse clicks). User interactions with components in a web page across the various platforms will generally have the same effect. Within the context of an HTML web page, user interface control components can be implemented for interaction between the web page and content within the web page. The control components are also known as widgets in some circles. Standard button and tab control components based in HTML can be implemented within the HTML web page for user interaction. For example, button control components can contain text for requesting an action, such as, “OK,” “CANCEL,” “SAVE,” etc. Tab control components can contain text that when selected requests an associated page or window to be displayed. The text contained within the button or tab control component may be comprised of multiple words, e.g., “Save All Changes.”

It can be desired that web pages be designed to have a particular style and format. A web page that is designed to have the same alignment and display presentation can be especially powerful for marketing purposes. For example, by preserving the presentation and format of its company web page across the various platforms that access and support the Internet, name brand recognition can be reinforced as users are presented with web pages that are consistent in presentation across whatever platform the user implements to access the Internet.

Unfortunately, within the context of HTML, button and tab components are affected by localization into foreign languages and user preferences. Localization of a web page involves altering the web page so that it is appropriate for use within a different country. In one case, this involves translating action text associated with a button or tab component. Depending on which language is used, the button or tab component may grow or shrink in size throwing off the alignment of graphics, text, and components within a web page. An action text translated from English may be increased to contain more words. As such, an HTML button or tab would increase in the horizontal direction to accommodate the increase in the number of words. As a result, horizontal scroll bars may be presented since the web page may be extended further in the horizontal direction.

Similarly, an HTML button or tab component may occupy more space in the vertical direction if the action text is translated to a language using characters or symbols for words (e.g., Chinese characters). Buttons or tabs that are in a line across a web page may come out of alignment, as some of the component may require translation and others not. In that case, components that are translated to characters may be taller vertically, and components that are not translated would not become taller, thereby throwing off vertical alignment.

Furthermore, user preferences for text size also will affect alignment and size of components within a web page. Button and tab components will extend in the horizontal and vertical directions to accommodate for increased size of text within a button or tab component. While web pages written in HTML will alter and flow the content to accommodate for increased size, page resizing is not generally performed. A component with text that has increased font size will increase in the vertical direction to accommodate for the increased size. This may be the case even though the web page may have empty space in the vertical direction. In that case, horizontal and vertical scroll bars would be presented prematurely to accommodate for the increased size of the component.

Similarly, it may be desired to have a web page that interacts with users in a similar fashion across the various platforms that support the Internet. In this way, users that are familiar with how to interact with components within a web page can interact with the same components in a consistent manner across the various platforms. There is no need to relearn what each component is supposed to do just because it is presented differently. As such, interactive consistency can help a web page distinguish its services from other web pages.

One approach in the prior art describes a display button for a web page integrating both a graphic pictorial image with character based textual information (with link) into a single iconic button in U.S. Pat. No. 5,986,654, “System and Method for Rendering On-Screen Iconic Buttons with Dynamic Textual Link,” to Alexander. The display button is preferably represented in a table structure within HTML. The table structure contains two end cells which display graphic images therein. In between the end cells is inserted a display region displaying character based text. Also, thin horizontal row cells are colored to match the end cells and to create an outer boundary or edge image to help render a three-dimensional push button. Multiple upper display regions form the top of the push button and multiple lower display regions form the bottom push button. The text display region is surrounded by the end cells and the upper and lower display regions.

A problem with the Alexander patent is illustrated in Prior ArtFIGS. 11A and 11B. While the upper and lower display regions and the text display region automatically expand or contract to accommodate the size of the textual link placed within the text region, the graphical images in the end cells are unable to accommodate for the stretching and contraction. Prior ArtFIG. 11Ais a diagram of a push button1100with one line of text1110within the text display region1115. The graphical images within the two end cells form the curved right1130and left1120sides of the push button1100.

Unfortunately, when the push button1100of Prior ArtFIG. 11Aexpands, the graphical images that form the right1130and left1120curves within the two end cells are unable to accommodate for the expansion. Prior ArtFIG. 11Billustrates the problem associated with displaying the graphical images within the end cells when the text display region has expanded. The push button1100has expanded to include two lines of text1140and1150. However, the rounded half circles1120and1130representing the ends of the button remain the same size as in Prior ArtFIG. 11A. The rounded half circles1120and1130as graphical images are unable to expand to accommodate for the expansion of the display region, the horizontal upper region, and the lower display region, without adding new graphical images. As such, the two ends are no longer completely rounded. The left side includes lines1125A and1125B to accommodate for the expansion within the display and horizontal upper and lower display regions. Also, the right side includes lines1135A and1135B to accommodate for the expansion.

Moreover, within the context of HTML, standard button components are not presented consistently across the various platforms that support access to the Internet. The operating system and web browser that is used to access the Internet will determine how a button or tab component will be presented. For example, the shape of the particular component will vary across the various platforms. A button presented on an Apple Macintosh platform will not look the same as a button presented on a Microsoft Windows platform. Similarly, the colors of a particular component will be determined by the platform being used to access the Internet.

SUMMARY OF THE INVENTION

Embodiments of the present invention disclose a method and system for web based control components that are uniform across various user operating system and browser platforms. Embodiments of the present invention provide for web based control components that maintain page alignment in the vertical and horizontal directions through localization processes. In addition, embodiments of the present invention provide for page resizing when accommodating for increased sizes of button and tab component due to word wrapping and increased font sizing.

Specifically, one embodiment of the present invention describes a button control component that is implemented within a hypertext markup language (HTML) web page, in one embodiment. The button control component substitutes for an HTML button control component. The button control component is comprised of a two row by three column table including four corner cells and a middle 2-row-spanning cell. Four corner graphical images are placed in the four corner cells to effect a rounded corner appearance in the button component.

Another embodiment of the present invention also describes a tab control component that is implemented within an HTML web page, in one embodiment. The tab control component substitutes an HTML tab control component. The tab control component is comprised of a five column table that includes a left tail cell, a left corner cell to the right of the left tail cell, a middle cell to the right of the left corner cell, a right corner cell to the right of the middle cell, and a right tail cell to the right of the right corner cell. Two corner graphical images are placed in the left and right corner cells to effect a rounded top corner appearance in the tab component. Two tail graphical images are placed in the two tail cells to effect a tailed bottom corner appearance in the tab component.

In both the button and tab control components, the middle cell contains text that when selected invokes a hyperlink, in one embodiment. The middle cell allows word wrapping the text, and the associated cells accompanying the middle cell align themselves to accommodate any word wrapping of text. As such, under these conditions, the control components can maintain the placement and alignment of graphics and thus maintain proper visual effect.

In another embodiment, the present invention describes a method of rendering user interface button and tab control components within a hypertext markup language (HTML) web page. The present invention generates an HTML table that comprises a plurality of cells. For a button component a two row by three column table is generated. For a tab component a one row by five column table is generated. The present invention places a plurality of graphical corner images in the plurality of cells to produce corner outlines of the button or tab control component. Multiple button or tab components can be coupled together in a single table by repeating the cell configurations for each of the individual buttons or tabs, respectively. In addition, the control component can word wrap text contained within the button or tab control component.

DETAILED DESCRIPTION OF THE INVENTION

Notation and Nomenclature

It should be borne in mind, however, that all of these and similar terms are to be associated with the appropriate physical quantities and are merely convenient labels applied to these quantities. Unless specifically stated otherwise as apparent from the following discussions, it is appreciated that throughout the present invention, discussions utilizing terms such as “displaying,” “generating,” “placing,” “aligning,” “invoking,” or the like, refer to the action and processes of a computer system, or similar electronic computing device, including an embedded system, that manipulates and transforms data represented as physical (electronic) quantities within the computer system's registers and memories into other data similarly represented as physical quantities within the computer system memories or registers or other such information storage, transmission or display devices.

Referring toFIG. 1, embodiments of the present invention are comprised of computer-readable and computer-executable instructions which reside, for example, in computer-readable media of a computer system, such as those accessible by a user for accessing the Internet through a web browser.FIG. 1is a block diagram of exemplary embedded components of an electronic system, such as, computer system100, upon which embodiments of the present invention may be implemented.

Exemplary computer system100includes an internal address/data bus120for communicating information, a central processor101coupled with the bus120for processing information and instructions, a volatile memory102(e.g., random access memory (RAM), static RAM dynamic RAM, etc.) coupled with the bus120for storing information and instructions for the central processor101, and a non-volatile memory103(e.g., read only memory (ROM), programmable ROM, flash memory, EPROM, EEPROM, etc.) coupled to the bus120for storing static information and instructions for the processor101.

Exemplary computer system100also includes an optional data storage device104(e.g., memory card, hard drive, etc.) coupled with the bus120for storing information and instructions. Data storage device104can be removable. As described above, exemplary computer system100also contains an electronic display device105coupled to the bus120for displaying information to the computer user.

System100also includes an optional cursor control or directing device107coupled to the bus120for communicating user input information and command selections to the central processor101.

With reference still toFIG. 1, an optional signal Input/Output (I/O) device108, that is a network interface, is shown. The I/O device108is coupled to bus120for providing a communication link between the computer system100and other electronic devices. As such, signal I/O device108enables the central processor unit101to communicate with or monitor other electronic systems that are coupled to the computer system100, possibly through a network (e.g., the Internet).

Rendering Graphical User Interface Control Components

This disclosure describes a method and system for rendering a user interface (UI) control component in a web page environment. Embodiments of the present invention provide for web based control components that are uniform across various user operating system and browser platforms. Embodiments of the present invention provide for web based control components that maintain page alignment in the vertical and horizontal directions through localization processes. In addition, embodiments of the present invention provide for page resizing when accommodating for increased sizes of button and tab components due to word wrapping and increased font sizing.

The present invention is discussed within the context of control components, otherwise known as widgets to some well versed in the art. A control component is a portion of a user interface screen that is used, by a user, to perform some action on a screen, such as, a web page. A control component is unique from content, which is typically text and graphics. Content generally can only be read or viewed and not manipulated. Control components, on the other hand, can be read and manipulated (e.g., “Delete”). A control component can be built and presented in a standard fashion and can appear many times on a web page. The control components look and behave similarly, except for unique aspects of each control component, such as, its label or list of choices.

FIG. 2depicts an exemplary communication system200capable of implementing UI control components within a hypertext markup language (HTML) web based environment, in accordance with one embodiment of the present invention. In system200a content provider210(e.g., a server computer) provides information, such as an HTML document, for viewing or distribution over a network220(e.g., Internet). A client computer100with a web browser accesses the network220for requesting the information from the content provider210.

In one embodiment, a web page230is requested by the client computer100from the content provider210. The web page supplied by the content provider210contains UI control components in the form of buttons and tabs. The button and tab control components respond to user input240, such as, clicks, etc.

FIG. 3is a flow chart300illustrating steps in a computer implemented method of rendering UI button control components within a web based environment, in accordance with one embodiment of the present invention. The present embodiment begins by displaying an HTML based web page on a computer display. The web page can be the web page230that is requested by a user of the client computer100. The web page contains at least one button component comprised of a table and graphic images as described in embodiments of the present invention. In one embodiment, the table is an HTML table.

In step320, a two row by three column table is generated.FIG. 4is a diagram illustrating a button component400comprising the two rows (450and455) by three column (420,430, and440) table410. The table410comprises five cells: four corner cells and a middle cell that spans two rows. From left to right, a first column420includes an upper left corner cell422and a lower left corner cell425. The second column430contains a middle spanning cell435. A third column440includes an upper right corner cell442and a lower right corner cell445.

The table410contains two rows. A first row450includes the upper left corner cell422, the middle spanning cell435and the upper right corner cell442. A second row455includes the lower left corner cell425and the lower right corner cell445. The middle spanning cell spans both the first450and second455rows.

Referring back to flow chart300inFIG. 3, in step330a plurality of graphical corner images are placed in the corner cells to effect a rounded corner appearance in the button component400. The plurality of graphical corner images are illustrated inFIG. 4as corner images423,426,444, and446. The graphical corner image423is placed within and aligned to the top of the upper left corner cell422. The graphical corner image444is placed within and aligned to the top of the upper right corner cell442. The graphical corner image426is placed within and aligned to the bottom of the lower left corner cell425. The graphical corner image446is placed within and aligned to the bottom of the lower right corner cell445.

Each of the graphical corner images423,426,444and446is comprised of a rectangle that includes a curve whose middle portion is rounded outward, away from the center of the button component. The curve separates a first part that is perceived as included within the interior of the button component and a second part that is perceived as outside of the interior of the button component. The interior is defined by an outline of the button component that is created by the cells within the table410and the graphical corner images423,426,444, and446. For example, the interior includes the entire middle spanning cell435.

For example, graphical image423includes a curve460that defines a first part462and a second part464. The middle portion of curve460is rounded outward, away from the perceived interior (e.g., the middle spanning cell435) of the button component400. The first part462is designed to display the color of the button component400, as described in step340. In one embodiment, each of the cells in the table410displays, as a background, the color of the button component400. As such, the first part462can be designed to be transparent, in order to let the color of the button component400in the upper left corner cell422of the table410to show through. For purposes of explanation,FIG. 4shows the background color of the button component400to be white; however, background colors of the button component can be selected to be any color. The second part464is designed to display the color of the HTML web page background, as described in step350.

Continuing through each of the corner cells in the table410, the upper right corner cell442is comprised of a graphical corner image444. The corner image444is comprised of a first part441that is perceived as included within the interior of the button component400, and a second part443that is perceived as outside of the interior of the button component400. Similarly, the lower right corner cell445is comprised of a graphical corner image446. The corner image446is comprised of a first part447that is perceived as included within the interior of the button component400, and a second part448that is perceived as outside of the interior of the button component400. Lastly, the lower left corner cell425is comprised of a graphical corner image426. The corner image426is comprised of a first part427that is perceived as included within the interior of the button component400, and a second part428that is perceived as outside of the interior of the button component400.

For display, each of the first parts462,441,447, and427are designed to display the color of the button component400, as described in step340. As discussed earlier, the first parts462,441,447, and427can be transparent to let the color of each of the cells in the table400show through. Correspondingly, each of the second parts464,443,448, and428are designed to display the color of the HTML web page background, as described in step350of flow chart300.

Moreover, the graphical images effecting the corners of the button component400can be of any varying shape. For example,FIGS. 12A and 12Bgive two of many examples of a two row by three column button component with varying corner shapes.FIG. 12Aillustrates a button component1200A with sharp corner edges.FIG. 12Billustrates a button component1200B with inversely rounded corners. These graphical images effecting the corners in button components1200A and1200B can be implemented within step330ofFIG. 3.

Returning toFIG. 4, the middle spanning cell435contains text436that is a label for the button component400. As shown inFIG. 4, the text436contains three words: text 1, text 2, and text 3. The table410can force the text contained within the middle spanning cell435to word wrap to accommodate layout constraints on the page; this behavior facilitates easier localization, accessibility, and adaptability to various screen sizes, in accordance with one embodiment. For example, when translating the text436into a foreign language, if the translated text is longer, the text436may adapt to fit by word wrapping the words within the text436within the button component400, rather than extend the translated text436in the horizontal direction, as in HTML based button components. This adaptation is a natural and automatic part of web page layout, and as such, this invention takes advantage of this adaptation.

One benefit to using a table410to build the button component400is the ability for the table to align the cells within the table410to accommodate for increasing or decreasing sizes of the cells, in accordance with one embodiment. For example, when the text436begins to word wrap, causing the middle spanning cell435to increase in size, the accompanying corner cells422,442,445, and425will also increase in size to maintain the alignment of the cells within the table410. As such, when the middle spanning cell increases in height, the entire button component400also correspondingly increases in height. When the middle spanning cell decreases in height, the entire button component400also correspondingly decreases in height.

In another embodiment, a hyperlink is invoked whenever the text436is selected, e.g., by clicking. For example, the hyperlink loads another web page or executes a script routine. As such, actions can be taken when the button component400is selected (e.g., “Delete File,” etc.).

In still another embodiment, the cells within the table410are presented without borders, without spacing between the cells, and no cell padding. This is to aid in defining and enclosing the button component400.

FIG. 5is a diagram illustrating a table500containing multiple button components, in this example, three. Table500can contain N button components, where N=3. Each of the button components comprises three columns of the table. Table500is comprised of two rows by [(3×N)+(N−1)]=11 columns to accommodate for the three columns in each of the N components, and for a spacing element between each of the N button components.FIG. 5illustrates N=3 button components in a table500: the first button component510, the second button component520, and the third button component530. Spacer cells or elements540and550are placed between each of the button components for visible separation of the button components510,520, and530. The spacer cells can be designed to display the color of the web page background, in one embodiment.

As described earlier, one of the benefits of using a single table for displaying multiple button components is the alignment of cells within the table500when one of the cells expands or contracts, in accordance with one embodiment. For example, when the text in one button component begins to word wrap within the middle spanning cell to increase in size, the accompanying corner cells will also increase in size to maintain the alignment of the cells within the table500. Also, the accompanying cells for the remaining button components in the table500will also increase in size to accommodate for the increase in size of the middle spanning cell due to word wrapping. As such, when a middle spanning cell of one of the button components in a table500increases, the entire table500(e.g., all the button components) also correspondingly increases.

FIG. 6Ais a diagram illustrating the use of button components comprised of HTML tables and graphical images to define the corners. The button components inFIG. 6Aare presented both over a white background and a gray background on a display to show that various color schemes are possible for use with embodiments of the present invention. The white and gray backgrounds can be examples of background colors for a web page600that incorporates button and tab components of the present invention. For example, button components612A and612B are presented over a white background. Similar button components622A and622B in window620are presented over a gray background.

FIG. 6Aillustrates the alignment of button components to the right and left sides of the viewing window displaying the web page600. For example, button components612A and612B are aligned to the left of the viewing window displaying web page600, and button components630A–D are aligned to the right side of viewing window displaying web page600. At this time the size of the window showing web page600is of sufficient size to accommodate all of the buttons within the example of web page600.

Text within the button components ofFIG. 6Aare of a particular font and size. For example, the text within the button component610, “Delete All Records,” is of the same font and size of font as the text within the button components612A, “Open,” and612B, “Search for Life.” The button components612A and612B are included within a single table for horizontal and vertical alignment.

As discussed earlier, the cells within a button component and/or corresponding table will align themselves, both horizontally and height-wise, with each other. InFIG. 6A, the button components612A and612B are larger than the button component610even though the font and size of font are identical. The button components612A and612B are larger to accommodate for the larger graphical image (binoculars) included in the label of button component612B. As such, all of the cells within the table incorporating612A and612B will increase their size in the vertical direction to match the cell containing the graphical image in button component612B. In one embodiment, the graphical image (binoculars) is included within another column of the table.

FIG. 6Billustrates the same web page600, where, through user preference, the font size of the text within the button components in the web page600has been increased from the font size illustrated inFIG. 6A.

Alignment of the button components in the horizontal direction can be maintained by virtue of using HTML table based button components. For example, the table containing the button components630A–D has maintained its alignment to the right side of the viewing window displaying the web page600. All of the button components630A–D are still visible. As such, the horizontal scroll bars remain unnecessary as the alignment of the button components has shifted to accommodate the change in viewing window sizing.

Alignment in the vertical direction is also generally maintained. However, because of the increase in font size, not all of the button components can be viewed within the viewing window ofFIG. 6B. As such, vertical scroll bars are necessary to scroll up and down in the vertical direction.

The increase in font size of the text of the button components is also accommodated by embodiments of the present invention. As illustrated inFIG. 6B, the text within the button components of web page600can be user defined to a larger size. Button components will increase in size to accommodate the larger font size of the text within the button component. Additionally, button component610is now of the same vertical size as the button components612A–B. The text within the button component612B has increased and matched its size to the graphical image (binoculars) in612B.

FIG. 6Cillustrates the same web page600in an even smaller viewing window that has been further reduced in the horizontal direction from the illustration ofFIG. 6B. The font size of the text within the button components in the web page600has remained the same as illustrated inFIG. 6B.

Alignment of the button components in the horizontal and vertical directions occurs to accommodate for the change in page size. In the horizontal direction, the button components continue to be aligned to the right and left sides of the viewing window displaying the web page600. For example, the button components630A–D are aligned to the right side of the viewing window displaying the web page600, and is pushed all the way to the left side of the viewing window. Not all of the button components in the table containing button components630A–D are visible, thereby necessitating the use of the horizontal scroll bars to scroll to the left and right of the web page600. However, with the use of the HTML table based components having alignment capabilities, the use of the horizontal scroll bars is delayed until the button components could not be pushed any further to the left side of the viewing window displaying the web page600.

Furthermore, the button components can align themselves in the vertical direction by performing word wrapping of text within the button components, in accordance with one embodiment of the present invention. For example, in an effort to show most of the button components within the viewing window displaying the web page600, the text will be word wrapped within corresponding button components. The text in the button component610has been word wrapped in order to display all of the button component610in the viewing window. The middle spacing cells435containing the text that has been word wrapped will also increase its size in the vertical direction to accommodate for the word wrapping. Additionally, associated cells in the button component and the table containing the button component that is word wrapped will also align themselves in the vertical direction to accommodate for the word wrapping.

In addition, the text within button component612B has also been word wrapped to display all of the button component612B. The corresponding button component612A, contained within the same table including button components612A–B, will also increase in size in the vertical direction to align itself with the vertical increase in button component612B due to word wrapping. Similarly, the text within the button component630C is word wrapped to display all of the button component630C. As such, the corresponding button components630A,630B, and630D will also increase their vertical size to align themselves with the increase in size of the button component630C, since they are all contained within the same table.

FIG. 7is a flow chart700illustrating steps in a computer implemented method for rendering user interface (UI) tab control components within a web based environment, in accordance with one embodiment of the present invention. The present embodiment begins by displaying an HTML based web page on a computer display. The web page can be the web page230that is requested by a user of the client computer100. The web page contains at least one tab component comprised of an HTML based table and graphical images for defining the corners of the tab component, as described in embodiments of the present invention.

In step720, a one row by five column table805is generated.FIG. 8is a diagram illustrating a tab component800comprising the one row by five column (810,820,830,840, and850) table. The table805comprises five cells, one cell per column, as follows: a left tail cell815in column810; a left corner cell825, in column820, to the right of the left tail cell815; a middle cell835, in column830, to the right of the left corner cell825; a right corner cell845, in column840, to the right of the middle cell835, and a right tail cell855, in column850, to the right of the right corner cell845.

In step730, a plurality of graphical corner images are placed in the corner cells825and845to effect a rounded top corner appearance in the tab component800. The plurality of graphical corner images are illustrated inFIG. 8as corner images822and842. The graphical corner image822is placed within and aligned to the top of the left corner cell825. The graphical corner image842is placed within and aligned to the top of the right corner cell845. Alignment of the graphical corner images822and842to the tops of the left and right corner cells825and845, respectively, is performed in step740.

Each of the graphical corner images822and842is comprised of a rectangle that includes a curve whose middle portion is rounded outward, away from the center of the tab component. The curve separates a first part that is included within the perceived interior of the tab component and a second part that is perceived as outside of the tab component. The perceived interior is defined by an outline of the tab component that is created by the cells within the table805, the graphical corner images822and842, as well as graphical tail images812and852. For example, the perceived interior includes the entire middle cell835.

For example, graphical image822includes a curve829that defines a first part821and a second part827. The curve829is connected to two opposing corners of the rectangle defining the border of the graphical image822. The first part821is designed to display the color of the tab component800. In one embodiment, each of the cells in the table805displays, as a background, the color of the tab component800. As such, the first part821can be designed to be transparent, in order to let the color of the tab component800in the left corner cell825of the table805to show through. For purposes of explanation,FIG. 8shows the background color of the tab component800to be white; however, background colors of the tab component can be selected to be any color. The second part827is designed to display the color of the HTML web page background.

Similarly, the right corner cell845in the table805is comprised of a graphical corner image842. The corner image842is comprised of a first part841that is included within the perceived interior of the tab component800, and a second part847that is outside of the perceived interior of the tab component800. As discussed previously, the first part841is designed to display the color of the tab component800, and can be transparent, in order to let the background color of the right corner cell845(the tab component background color) to show through. The second part847is designed to display the color of the HTML web page background.

Returning back to flow chart700, in step750, a plurality of graphical tail images are placed in the tail cells815and855to effect a tailed bottom corner appearance in the tab component800. The plurality of graphical tail images are illustrated inFIG. 8as tail images812and852. The graphical tail image812is placed within and aligned to the bottom of the left tail cell815. The graphical tail image852is placed within and aligned to the bottom of the right tail cell855. Alignment of the graphical tail images812and852to bottoms of the left and right tail cells815and855, respectively, is performed in step760.

Each of the graphical tail images812and852is comprised of a rectangle that includes a curve that separates a tail shaped part included within the perceived interior of the tab component800and a second part that is outside of the perceived interior. The perceived interior is defined by an outline of the tab component that is created by the cells835,825, and845within the table805, the graphical corner images822and842, as well as graphical tail images812and852. For example, the perceived interior includes the entire middle cell835.

For example, graphical image812includes a curve that defines a tail part811and a second part817. The curve814is connected to two opposing corners of the rectangle defining the border of the graphical image812. The tail shaped part811includes a side that touches the perceived interior of the tab component. The tail shaped part811tails away from the perceived interior to the corner of the component.

The tail shaped part811is designed to display the color of the tab component800. In one embodiment, the cell815displays, as a background, the color of the HTML web page background. As such, the non-tail shaped part817can be designed to be transparent, in order to let the color of the page to show through.

In another embodiment, the cell815does not specify a background color, and so is effectively transparent, in order to let the color of the page show through.

Similarly, the cell855includes a graphical tail image852that is comprised of a tail shaped part851that is perceived as included within the interior of the tab component800, and a second part857that is outside of the interior. As discussed previously, the tail shaped part851is designed to display the color of the tab component800, and the second part857is designed to be transparent to display the color of the HTML web page background. In one embodiment, the cell855displays, as a background the color of the HTML web page background.

In another embodiment, the cell855does not specify a background color, and so is effectively transparent, in order to let the color of the page show through.

Moreover, the graphical images effecting the corners and tails of the tab component800can be of any varying shape. For example,FIGS. 13A and 13Bgive two of many examples of a one row by five column tab component with varying corner and tail shapes.FIG. 13Aillustrates a tab component1300A with sharp corner and tail edges.FIG. 13Billustrates a tab component1300B with curlyque corners and tails. These graphical images effecting the corners and tails in tab components1300A and1300B can be implemented within steps730and750, respectively, ofFIG. 7.

Returning toFIG. 8, the middle cell835contains text836that is a label for the tab component800. As shown inFIG. 8, the text836contains three words: text A, text B, and text C. The table805can force the text contained within the middle cell to word wrap to accommodate layout constraints on the page; this behavior facilitates easier localization, accessibility, and adaptability to various screen sizes, in accordance with one embodiment. For example, when translating the text836into a foreign language, the text836will adapt, by word wrapping, to fit within the web page, as described previously for button components.

A benefit to using a table805to build the tab component800is the ability for the table805to align all its cells to accommodate for increasing or decreasing sizes due to word wrapping, localization to foreign languages, etc. For example, when the text836begins to word wrap within the middle cell835to increase its vertical size, the accompanying corner and tail cells815,825,845, and855will also increase in size to maintain the alignment of the cells within the table805. As such, when the middle cell increases, the entire tab component800also correspondingly increases. Similarly, when the middle cell835decreases, the entire tab component800also decreases. Previous discussions as to vertical and horizontal alignment for button components are equally applicable to tab components.

In one embodiment, a hyperlink is invoked whenever the text836is selected, e.g., by clicking. For example, the hyperlink loads another web page or executes a script routine. As such, actions can be taken when the tab component800is selected, such as bringing to the forefront the window associated with the tab component that is selected.

In still another embodiment, the cells within the table805are presented without borders, without spacing between the cells, and no cell padding. This is to aid in defining and enclosing the tab component800.

FIG. 9is a diagram illustrating a table900containing multiple tab components, in this example, three. Table900can contain N tab components. Each of the tab components comprises five columns of the table900. Table900is comprised of 5×N=15 columns to accommodate for the five cells in each of the N tab components.FIG. 9illustrates N=3 tab components in a table900: the first tab component910, the second tab component920, and the third tab component930.

As described earlier, a benefit to using a single table for displaying multiple tab components is the alignment of cells within the table900when one of the cells expands or contracts, in accordance with one embodiment. For example, when the text in one button component begins to word wrap within the middle cell to increase in size, the accompanying tail and corner cells will also increase in size to maintain the alignment of the cells within the table900.

Also, the accompanying cells for the remaining tab components in the table900will also increase in size to accommodate for the increase in size of the middle cell that has increased due to word wrapping. As such, when one tab component increases in size, all the tab components will also increase in size.

FIG. 10Ais a diagram illustrating the use of tab components comprised of HTML tables and graphical images to define the outline of the tab component. The tab components inFIG. 10Aare presented over a white background on a display showing a window1000that has multiple tab components. As discussed previously, various color backgrounds are envisioned to be supported with embodiments of the present invention.

A single table (e.g., table900) is comprised of three tab components1010,1020, and1030. Tab component1010contains text that is a label, “Tab Label One;” tab component1020contains text that is a label, “Tab Label Two;” and tab component1030contains text that is a label, “Tab Label Three.” The text within the tab components have a particular font and size of font that is consistent. The tab components1010,1020, and1030are presented in a single table for horizontal and vertical alignment.

FIG. 10Billustrates the same window1000that has increased its font size through user preferences. As shown inFIG. 10B, alignment of the labels with other content within the window1000has been maintained. In addition, the tab components have increased in size to accommodate for the increased font sizing of the text within the tab component. As such, each of the tab components have been increased in both the horizontal and vertical directions. Moreover, alignment between all the tab components1010,1020, and1030is also maintained, by virtue of using HTML table based tab components.

FIG. 10Cillustrates the same window1000in a viewing window that has been reduced in the horizontal direction. In addition, the font size of the text within the tab components in the window1000has been increased from the font sizes previously selected inFIGS. 10Aand B. Tab components will increase in size to accommodate the larger font size of the text within the tab components.

Furthermore, the tab components1010,1020, and1030will be aligned vertically to accommodate for the reduction in size of the window1000. As such, the text within the tab components1010,1020, and1030will word wrap within their respective tab components. As such, the table containing the tab components1010,1020, and1030will adapt to fit within the window1000that has been reduced in the horizontal direction.

While the methods of embodiments illustrated in flow charts300and700show specific sequences and quantity of steps, the present invention is suitable to alternative embodiments. For example, additional steps can be added to the steps presented in the present embodiment. Likewise, the sequences of steps can be modified depending upon the application. Likewise, the sequence can be varied, and the symbols and encodings of the various parts of a name can be varied.

Embodiments of the present invention, a method and system for a user interface control component comprised of an HTML table and graphical images for defining the corner outlines of button and tab components, is thus described. While the present invention has been described in particular embodiments, it should be appreciated that the present invention should not be construed as limited by such embodiments, but rather construed according to the below claims.