United States Patent
`Beer
`
`119
`
`{11} Patent Number:
`
`[45] Date of Patent:
`
`5,793,368
`Aug. 11, 1998
`
`US005793368A_
`
`[54] METHOD FOR DYNAMICALLY SWITCHING
`BETWEENVISUAL STYLES
`
`[57]
`
`ABSTRACT
`
`[75]
`
`Inventor:
`
`John C. Beer. Oceanside. Calif.
`
`[73] Assignee: TriTeal Corporation, Carlsbad, Calif.
`
`[21] Appl. No.: 747,792
`
`[22] Filed:
`
`Novy. 14, 1996
`
`Tint, Ce oececccsscseesceccnnsnssesscessesnessenees G06F 3/00
`PSDP
`[52] U.S. Ch 345/334; 345/335; 345/343
`
`[58] Field of Searchy o.ccscccssccssssssssssasessees 345/326-358.
`345/977; 704/8; 395/200.3-200.83. 680,
`682. 685
`
`[56]
`
`References Cited
`
`U.S. PATENT DOCUMENTS
`
`.....ccesssessccssessssseavere 345/333
`7/1994 Fults et al.
`5,327,529
`5/1995 Malcolm ........escesssenseeeneees 345/333 X
`5,416,903
`3/1996 Silver et al.
`.......ssccessecenseee 345/333 X
`5,499,335
`4/1996 Leong et al.
`.....scssscesesessesseee 345/333
`5,513,342
`1/1997 Stucka et al.
`......cccecereessseeeseee 345/340
`5,596,702
`2/1997 Swanson etal.
`wore 345/333
`5,600,778
`9/1997 Brown et al.
`.....sscsessecesseresers 345/335
`5,673,403
`5,696,914 12/1997 Nahabooet al... ssn 345/333
`
`
`
`
`A method and system for allowing a userto retrieve a user
`interface and a visual style from a local or remote storage
`unit, rapidly display the visual stylized user interface, and
`dynamically switch between visual styles. without compris-
`ing security over a network system. Once displayed, the user
`can customize or configure the visual style of the user
`interface. The invention includes a programmable graphics
`user interface (PGUI). The PGUT is initialized to a default
`visual style or to a user’s preferred style when the user logs
`onto a network system. In the preferred embodiment, after
`proper login, a user interface, stored on a server as a
`description in a text-based User Interface Language (UIL).
`is transferred to user’s client system. The PGUI parses the
`UIL description and creates the user interface controls
`defined in the description. The PGUI then uses the currently
`selected visual style to display the user interface, and then
`reads any content (e.g.. text. images, or other content) for the
`interface. The PGUI displays the content within the user
`interface, such as in a scrollable area or any other area
`described by the UIL. Once the user interface is displayed.
`the user can change the user interface. save the user
`interface, change the contents, save the contents. or switch
`visual styles. Compound or complex user interfaces can be
`easily created by combining simple user interface compo-
`nents.
`
`Primary Examiner—John E. Breene
`Attorney, Agent, or Firm—Fish & Richardson P.C.
`
`12 Claims, 3 Drawing Sheets
`
`SAMSUNG 1007
`
`
`
`ChangeStyle
`
`Styles
`© Windows95
`
` 1
`
`20
`
`21
`
`IPR2024-00145
`Apple EX1007 Page 1
`
`

`

`U.S. Patent
`
`Aug. 11, 1998
`
`Sheet 1 of 3
`
`5,793,368
`
`Jas-)|| SeZIG
`waoils|pPfNG
`/hd$$...}-Db
`
`
`
`(UO}}e}UaSalq)BJAJSSOepa}U]JOSH
`
`
`
`SIENSIAOGSMOPUIAAESN
`
`G6SMOPUI\\
`
`
`
`sjensiA4QDasn
`
`|ainbi4
`
`sHOW
`
`doiq-u-6beig
`
`sabew]
`
`}xOL
`
`7 (
`
`
`
`
`
`jUa}Uu0D)Byegqsoepalu
`
`IPR2024-00145
`Apple EX1007 Page 2
`
`

`

`U.S. Patent
`
`Aug. 11, 1998
`
`Sheet 2 of 3
`
`5,793,368
`
`\.Vv
`
`
`
`
`
`Zainbil4
`
`sjensiA3QDesn
`
`G6SMOPUIAA
`
`SOW
`
`dojq-u-Beigq
`
`sebew|
`
`xo]
`
`
`PmESS
`
`
`
`(uoje}Uasald)ajAjgsoepayy]Jase)
`
`
`
`(juajuoD)eVeqsoepajulJesp
`
`IPR2024-00145
`Apple EX1007 Page 3
`
`

`

`U.S. Patent
`
`Aug.11, 1998
`
`Sheet 3 of 3
`
`5,793,368
`
`
`
`Change Style
`Styles
`© Windows95
`
`
`
` 20
`
`21
`
`Figure 3
`
`
`
`
`
`
`
`Change Style
`Styles
`© Windows95
`
`
`
`Figure 4
`
`IPR2024-00145
`Apple EX1007 Page 4
`
`

`

`5,793,368
`
`1
`METHOD FOR DYNAMICALLY SWITCHING
`BETWEEN VISUAL STYLES
`
`This invention is related to the inventions entitled “Sys-
`tem and Method for Distributing Objects and User
`Interfaces”, and “URL Login”. U.S. patent application Ser.
`No. 08/748.664.filed on the same date as the presentpatent
`invention.
`
`BACKGROUND OF THE INVENTION
`
`1. Field of the Invention
`This invention relates to computer graphical user
`interfaces, and moreparticularly to a graphical user interface
`having dynamically switchable, user-definable visual styles.
`2. Description of Related Art
`Present computer systems, such as personal computers
`and workstations. generally have a graphical user interface
`(GUD. A GUI allows a user to interact with a computer
`system by using an input device (e.g.. a pointing device such
`as a mouse or touchpad, a keyboard. or voice control) and
`icon or graphics-based commands and controls. Presently,
`different brands of computer systems often use different
`GUIs. For example, the Windows95 system from Microsoft
`Corporation differs in “look and feel” from the Macintosh
`System 7 operating system from Apple Corporation, both of
`which differ from the Motif GUI often used on UNIX
`systems. Further. applications that are nominally the same
`may differ in appearance and interaction depending on
`platform. Thus, a word processing application on one type of
`GUl-based system generally looks different from, and
`requires different user interaction than,
`the same word
`processor application designed for a different GUI-based
`system. For example, Microsoft Word has a different user
`interface on the Macintosh System 7 operating system than
`it does under the Windows95 operating system. Such dif-
`ferences present a problem for employers who may have
`widely disparate types of computer systems. due to the cost
`of training employees on how to use different user inter-
`faces.
`Another problem with current computer systems occurs
`with networked computer systems. Such systems generally
`have centrally maintained applications stored on a server
`computer that are accessed by multiple client computers by
`meansof a networkedfile system. This type of configuration
`requires that an entire application be transferred from the
`server over the network to a client in order for the user to
`interact with the application. Today’s applications are typi-
`cally 1-2 megabytes in size. and can be significantly larger.
`Loading such large applications on a server and providing
`access to multiple users decreases the overall performance
`of a network. For example, the start-up time alone for such
`applications can take 60 seconds or more. resulting in a
`decrease of overall productivity of employees.
`Loading applications from servers also presents a security
`problem. The machine code of an application can bealtered
`in transit or on a server's local storage unit, which could lead
`to corruption or deletion of a company’s sensitive or vital
`data upon execution of that code.
`The design of applications themselves pose some prob-
`lems for users. A user typically buys an application because
`it provides some kind of functionality that enables the user
`to perform a particular task. One of the problems that arises
`when acquiring prepackaged. or “shrink wrapped”, applica-
`tions is that such applications often provide some of the
`functionality a user needs but not all of it, or provide more
`functionality than a user needs, thereby increasing the dif-
`
`2
`ficulty of learning applications. Another problem of such
`applications is that a user generally cannot modify the user
`interface to make the applications easier to use.
`Nosolution is known to exist to simultaneously deal with
`all the problems discussed above. Accordingly. there is a
`need for a method and system to overcome these problems.
`The present invention provides such a method and system.
`SUMMARYOF THE INVENTION
`The invention comprises a method and system for allow-
`ing a userto retrieve a user interface and a visual style from
`a local or remote storage unit, rapidly display the visual
`stylized user interface, and dynamically switch between
`visual styles. without comprising security over a network
`system. Oncedisplayed. the user can customize or configure
`the visual style of the user interface.
`The invention includes a programmable graphics user
`interface (PGUI) that provides visual
`information about
`resources and objects throughout a network and on user
`systems. Objects are presented as icons which a user can
`manipulate by means of an input device. such as a pointing
`device, keyboard, touch screen, etc. An object can be opened
`by selecting the object with an input device (for example, by
`moving a display cursor over the object icon and double-
`clicking a mouse button), thereby invoking an associated
`application for viewing and/or manipulating the object.
`The PGUI is initialized to a default visual style or to a
`user’s preferred style when the user logs onto a network
`system. In the preferred embodiment, after proper login. a
`user interface, stored on a server as a description in a
`text-based User Interface Language (UIL),is transferred to
`user’s client system. The PGUI parses the UIL description
`andcreates the user interface controls defined in the descrip-
`tion. The PGUI then uses the currently selected visual style
`to display the user interface, and then reads any content(e.g..
`text, images, or other content) for the interface. The PGUI
`displays the content within the user interface, such as in a
`scrollable area or any other area described by the UIL. Once
`the user interface is displayed. the user can change the user
`interface, save the user interface, change the contents, save
`the contents, or switch visual styles. Compound or complex
`user interfaces can be easily created by combining simple
`user interface components.
`The invention provides a method to present a user inter-
`face with multiple selectable visual styles, and defined in a
`simple markup-text form that can be quickly retrieved from
`a server to define a user interface on a client. The invention
`also reduces security risks inherent when loading applica-
`tions from servers by avoiding use of machine code in
`defining a user interface, The invention further provides a
`method to separate the functionality of user interface con-
`trols from the display of the user interface controls, and a
`method to separate the functionality of an application from
`the display of the user interface. The invention provides a
`simple method for adding new functionality and new con-
`trols to a user interface. Finally, the invention provides a
`method for using a plurality of UIL’s with the capability of
`specifying each UIL in a user’s native natural language.
`The details of the preferred embodiment of the present
`invention are set forth in the accompanying drawings and
`the description below. Once the details of the invention are
`known, numerous additional innovations and changes will
`become obvious to one skilled in the art.
`
`10
`
`15
`
`20
`
`25
`
`30
`
`35
`
`45
`
`50
`
`55
`
`65
`
`BRIEF DESCRIPTION OF THE DRAWINGS
`FIG. 1 is a screen shot showing an exemplary represen-
`tation of a word processor having a Windows95 visual style
`created using the invention.
`5
`
`IPR2024-00145
`Apple EX1007 Page 5
`
`

`

`5,793,368
`
`3
`FIG. 2 is a screen shot showing an exemplary represen-
`tation of the word processor of FIG. 1. but having a Motif
`visual style created using the invention.
`FIG. 3 is a screen shot showing details of a Windows95
`visual style for a radiobutton widget.
`FIG. 4 is a screen shot showing details of a Motif visual
`style for a radiobutton widget.
`Like reference numbers and designations in the various
`drawings indicate like elements.
`DETAILED DESCRIPTION OF THE
`INVENTION
`
`Throughout this description. the preferred embodiment
`and examples shown should be considered as exemplars,
`rather than as limitations on the present invention.
`Overview
`The preferred embodimentof the invention is targeted for
`use on a system comprising, for example, a processor, a
`display device, at least one input devices such as a pointing
`device or keyboard, and other input and output devices
`connected together via a network to other systems, personal
`computers, workstations, servers, printers, and other com-
`puting and peripheral equipment. Use of the invention
`allows a user to select from a variety of different visual
`styles for a user interface. For example, a user could
`configure a word processing application to appear like either
`of the examples in FIG. 1 or FIG. 2. regardless of the actual
`underlying operating system. Thus, a user can have a Win-
`dows95 style for applications running under the UNIX
`operating system, or a Motif style for applications running
`under the Macintosh System 7 operating system. Further, the
`user can add to or change the functionality of an application
`by defining additional controls for an application.
`The preferred embodiment of the invention includes an
`icon server, an image cache, a UIL server, a UIL user
`interface description, a UIL parser, user interface controls or
`“widgets”, widget geometry manager objects, an event
`object, event handlers, a Widget Registry, an Event Handler
`Registry, an Event Name Registry, a visual style object. and
`a user interface within which a user can switch visual styles.
`The UIL provides the syntax and grammar rules for
`describing a user interface. The UIL user interface descrip-
`tion is preferably a text file. in a format similar to various
`text-markup languages, such as HTML (Hyper Text Markup
`Language). Since the UIL userinterface description is a text
`file that is parsed during interpretation, corruptionofthefile
`can be readily detected and handled in error routines.
`However, the UIL description may also be compiled to a
`binary format and/or compressed to reduce size.
`In the preferred embodiment,
`the PGUI resident in a
`user’s computer system initially loads a UIL user interface
`description from a UIL server via a protocol such as the NFS
`protocol, the World Wide Web (WWW) HTTP protocol, or
`other network protocols. Alternatively, the UIL user inter-
`face description can be loaded from a local storage unit. The
`UIL user interface description describes the controls or
`widgets that comprise the user interface. In the preferred
`embodiment, the UIL user interface description allows a
`user to set widget attributes. Examples of such attributes
`include: name,icon, width, height. uil_ID. parentID, layout
`manager, widget EventHandler, and other attributes. The
`PGUI allowsthe user to add or delete widgets via dragging
`and dropping the widgets with a pointing device,
`thus
`changing the description of the user interface. Once
`changed, the PGUI can save a copy of the description on a
`UIL server, a local storage unit, or other storage means, for
`later retrieval.
`
`10
`
`15
`
`20
`
`25
`
`30
`
`35
`
`45
`
`30
`
`35
`
`65
`
`User Interface
`
`4
`
`A user interface comprises one or more interface widgets.
`FIGS. 1 and 2 show some of the user interface widgets
`currently being used by those skilled in the art of user
`interface design: a window 1, separator 2, toolbar buttons3,
`menu bar 4, radiobutton 5, sliders 6, status bar 7, content
`area 8, dropdown listboxes 9, window control buttons 10,
`window icon 11, and title bar 12. However, conventional
`applications define such an interface as essentially a mono-
`lithic entity. An important aspect of the invention is that it
`defines a user interface in terms of parts. separating widgets.
`widget functionality, and widget attributes so as to permit
`extremely fine control of a user interface in each UIL user
`interface description. Listing 1 below illustrates an example
`UIL user interface description in accordance with the inven-
`tion that describes the user interface illustrated in FIGS. 1
`and 2.
`
`
`
`Lising 1 - textEditor.uil
`
`</widget><widget WindowFrameWidget>
`<attribute width=400>
`<attribute height=300>
`<attribute nilID=“mainWindow">
`<widget>
`<widget TitleBarWidget>
`<attribute uilID=“titleBarPanel”>
`<attribute name=“untitled’’>
`<attribute parentID=“mainWindow">
`<attribute geometryManager=“TitleBarLayout”>
`<attribute icon—“http//www.triteal.com/icons/data.gif’>
`</widget>
`<request>
`<attribute eventID=“LOAD’>
`<attribute eventArg=“menuBar.uil’>
`<attribute parentID=“mainWindow">
`</request>
`<widget SeparatorWidget>
`<attribute shadowWidth=“1">
`<atiribute parentID=“mainWindow">
`</widget>
`<widget ToolbarWidget>
`<attribute geometryManager=“HorizontalLayout">
`<attribute parentID=“mainWindow’>
`<attribute uilID=“toolBar">
`<widget>
`<widget RadioButtonWidger>
`<attribute parentID=“toolBar">
`<attribute isSet=“true”>
`<attribute name=“Auto Save">
`<twidget>
`<widget DropDownListBoxWidget>
`<attribute parentID=“toolBar">
`<attribute label=“Font:">
`<attribute uilID=“font”>
`<attribute value=“Times”>
`</widget>
`<widget DropDownListBoxWidget>
`<attribute parentID=“toolBar’>
`<attribute name=“Size:">
`<attribute uillD=“size”>
`<attribute value=“10pt">
`</widget>
`<widget ToolbarButtonWidget>
`<attribute parentID=“toolBar">
`<attribute icon=“leftjustified.gif’>
`<attribute uselconServer=“true”>
`<Jwidget>
`<widget ToolbarButtonWidget>
`<attribute parentID=“toolBar’>
`<attribute icon=“centered.gif">
`<attribute uselconServer=“true”>
`<widget>
`<widget ToolbarButtonWidget>
`<attribute parentID=“toolBar">
`<attribute icon=“rightjustified.gif’>
`
`6
`
`IPR2024-00145
`Apple EX1007 Page 6
`
`

`

`5.793.368
`
`5
`~continued
`
`Lising 1 - textEditor.uil
`<attribute useIconServer=“true”>
`<widget>
`<widget ToolbarButtonWidget>
`<attribute parent/D=“toolBar”>
`<attribute icon=“fulljustifiedgif’>
`<attribute uselconServer=“true">
`<fwidget>
`<widget ScrollableAreaWidget>
`<attribute parentID=“mainWindow">
`<attribute uilID=“workArea”>
`<twidget>
`<widget StatusBarWidget>
`<attribute name=" ">
`<attribute parentID=“mainWindow">
`</widget>
`<request>
`<attribute parentID—“workArea”>
`<attribute event(ID=“URL__OPEN’>
`<attribute eventArg=“http://www.triteal.com/UlPatentixt’>
`</request>
`
`Not all widgets have ail attributes, but each widget
`succinctly describes the characteristics of each part of the
`user interface for an example text editor application. Thus,
`for example,the first widget, WindowFrameWidget, defines
`a window 1 (see FIG. 1) having an initial width of 400
`screen units and a height of 300 screen units, with a handle
`or uilID of “‘mainWindow”. The SeparatorWidget defines a
`separation bar 2 having a shadow width attribute of “1”, and
`a parentID attribute of “mainWindow”. Thus. the Separa-
`torWidget inherits the attributes of the WindowFrameWid-
`et.
`, As another example,
`there are several
`toolbar button
`widgets 3. one of which has an icon attribute of
`“fulljustified.gif”, which references a graphical image in a
`conventional GIF file format to be shown on the button 3. As
`yet another example, a menu bar user interface 4 is defined
`by reference. using a request function described below.
`The UIL description in Listing 1 defines each part of the
`application interface withoutinitially dictating a visual style.
`Simple changes to the UIL description permit changes to the
`parts of the application interface, by adding, subtracting, or
`changing widgets. Because the parts of an application can be
`defined so succinctly, retrieving a UIL user interface
`description over a network link is rapid—much more so than
`retrieving several megabytes of an application.
`In building a user interface. the PGUI retrieves icons(e.g..
`graphics, pictures, bitmaps, etc.) that represent objects from
`an icon servervia similar network protocols used by the UIL
`server. Alternatively, the icons could also be retrieved from
`a local storage device. The icon server may be the same as
`the UIL server. In the preferred embodiment. the PGUI
`places the retrieved icons in an image cache. The advantage
`of caching icons is that when other widgets reference the
`same icon, the PGUI accessesthe cacheinsteadofretrieving
`the icon from the icon server again. For example, an
`application that shows a directory’s files may use icons to
`represent the files in the directory. Such a directory may
`contain hundredsoffiles. The application mayalso allow the
`user to traverse the directory hierarchy. The act of traversing
`a file system could quickly create thousands of accesses to
`icons in just a few minutes. Retrieving the same icons from
`cache for each needed instance is faster than file system
`retrieval. Thus, an image cache enhancesthe performance of
`the overall PGUL
`As the PGUI is retrieving a user interface description
`from the UIL server, it uses a UIL parser in parallel to create
`each part defined in that description. The UIL userinterface
`
`10
`
`15
`
`20
`
`25
`
`30
`
`35
`
`45
`
`350
`
`55
`
`65
`
`6
`description includes information that allows the PGUI to
`create a “widget registry” based on the uilID attribute. In the
`preferred embodiment, the PGUI uses the parentID attribute
`to create a hierarchy or registry of widgets. where each
`“parent” widget is the widget whose uilID equals the paren-
`uD of a “child” widget. The PGUI mayalso load in other
`UIL files, which allows it to create compound or complex
`user interfaces. For example, the PGUI. in parsing Listing 1.
`retrieves the menu bar user interface 4 described in Listing
`2 below via a request feature of the UIL. A request includes
`the concept of an environment: the environment contains the
`parentID attribute which allows the PGUI to create a correct
`hierarchical relationship. The principle advantage of
`describing userinterfaces with requests allows the sharing of
`common user interface components.
`
`Lising 2 - menuBar.uil
`<widget MenuBarWidget>
`<attribute widgetEventHandler=“PopupMenuHandler”>
`<attribute geometryManager=“HorizontalLayout">
`<attribute uil[D=“menuBar’>
`</widge>
`<widget MenuButtonWidget>
`<attribute parentID="“menuBar’>
`<attribute mnemonic=“F’>
`<attribute PopupMenu=“FileMenu”>
`<attribute widgetventHandler=“PopupMenuHandler”>
`<attribute name=“File”>
`<widget>
`<widget MenuButtonWidget>
`<attribute parentID=“menuBar’>
`<attribute mnemonic=“E”>
`<attribute PopupMenu=“EditMenu”>
`<attribute subMenuld=“BditMenu">
`<attribute name=“Edit”>
`</widget>
`<widget MenuButtonWidger>
`<attribute parentID=“menuBar’>
`<attribute PopupMenu=“HelpMenu”>
`<attribute subMenuld=“HelpMenu”>
`<attribute mnemonic=“H”">
`<attribute name=“Help”>
`
`The widget registry also serves as a widget cache. Thus,
`the PGUI has the same performance benefits when accessing
`widgets as those described above for the image cache.
`Referencing Listing 1 and Listing 2 again.
`the UIL
`geometryManager atiribute provides the widget programmer
`a way to separate geometry management(i.e.. widget posi-
`tioning and sizing) from widget functionality. For example,
`both the MenuBarWidget and the ToolBarWidget controls
`use the HorizontalLayout geometry managerto position and
`size children widgets. Thus, children widgets do not need to
`position or size themselves, but only need to provide button
`widget functionality, such as responding to input events
`from pointing devices, a keyboard, or other input devices.
`Another advantage is that a widget programmer can reuse
`the geometry managerin different widgets or use different
`geometry managers in the same widget.
`Events
`In the preferred embodiment, the invention uses an event
`object to invoke actions, such as loading a UIL user interface
`description file and any other actions knowntothose skilled
`in the art. Event handlers provide the functionality for each
`user interface control. The event handlers respond to events
`input device events (e.g., keyboard input. mouse input.
`touch screen input, etc.), system events, user defined events,
`and other events known to those skilled in the art. In the
`7
`
`IPR2024-00145
`Apple EX1007 Page 7
`
`

`

`5,793,368
`
`7
`preferred embodiment. if an event handler can service or
`handle an event, it returns true, otherwise it returns false and
`the event propagates to the parent widget. An example of a
`radio button event handler is shown below:
`
`
`
`public class RadioButtonEventHandler extends EventHandler
`{
`
`Widget currentRadioButton;
`public boolean handleEvent(Event event, Widget widget)
`
`if (event.id equals EventMOUSE_UP)
`{
`
`Event evt = new Event(Event-CHANGE_STATE);
`currentRadioButton.state = unselected;
`currentRadioButton.postEvent(evt);
`currentRadioButton = widget;
`widget.state = selected,
`widget.postEvent(evt),
`retum true;
`
`return false;
`
`
`
`In this example. the event handler responds to an input
`device event. in particular. a MOUSE_UP event(i.e., detec-
`tion of the release of a mouse button). The event handler
`changesthestate of the current radiobutton and then creates
`a new system event, CHANGE_STATE,and sends the new
`event
`to the current selected radiobutton by calling the
`postEvent function. An event handler can also have state
`information. The current radiobutton selected is the event
`handler’s state. After setting its state, the event handler sets
`the new current radiobutton’s state to selected and then
`sends the CHANGE_STATE event
`to the radiobutton.
`Finally. the event handler returns true. If the event was
`anything other than a MOUSE_UP event, the handler does
`nothing and returns false; the PGUI then propagates the
`event to the parent widget. An advantage of using event
`handlers is that a widget programmer can reuse event
`handlers in different widgets or use different event handlers
`in the same widget.
`The invention provides a method for the user to add
`functionality to the PGUI through the UIL user interface
`description. The user can use the request feature to register
`new events in an event handler registry and the event name
`registry. An example of such use is set forth in Listing 3:
`
`
`Listing 3 - changeStyle.uil
`<request>
`<attribute eventID=“REGISTER_EVENT’>
`<attribute eventName=“SwitchStyle">
`<attribute eventHandler—“SwitchStyleEventHandler’>
`<request>
`<widget WindowFrameWidget>
`<attribute width=220>
`<attribute height=155>
`<attribute widgetEventHandler—“PropertySheetEventHandler”>
`<attribute type=“dialog”>
`<attribute geometryManager=“MainWindowLayout”>
`<attribute uillD=“mainWindow">
`</widget>
`<widget TitleBarWidget>
`<attribute wilID=“titlebarPanel"’>
`<attribute parentID=“mainWindow”">
`<attribute name=“Change Style”>
`</widget>
`<widget PropertyWidget>
`<attribute parentID=“mainWindow”>
`<attribute applyEventID=“SwitchStyle">
`
`8
`-continued
`
`Listing 3 - changeStyle.uil
`
`<attribute uilID=“lookFeelPropertySheet”>
`<Jwidget>
`<widget GroupBoxWidget>
`<attribute name=“Styles”>
`<attribute parentID=“lookFeePropertySheet”>
`<attribute geometryManager=“VerticalLayout’>
`<attribute parentID=“styleRangeGroup”>
`<attribute uillD=“styleRange”’>
`<attribute widgetEventHandler=“RadioButtonEventHandler’>
`</widget>
`<widget RadioButtonWidget>
`<attribute parentID=“styleRange”>
`<attribute isSet=“true”>
`<attribute name=“Windows95”>
`<attribute styleClass=“Win95Style”>
`widget
`<widget RadioButtonWidget>
`<attribute parentID=“styleRange”>
`<attribute name=“Motif’>
`<attribute styleClass=“MotifStyle”>
`<widget>
`<widget ButtonWidget>
`<attribute name=“OK”>
`<attribute parentID=“mainWindow">
`<attribute uilID=“OK”>
`</widget>
`<widget ButtonWidget>
`<attribute name=“Cancel”>
`<attribute eventID=“WINDOW_CLOSE”>
`<attribute parent{D=“mainWindow">
`<attribute uillID=“Cancel”>
`<widget>
`
`In this example. the PGUI responds to the system event
`called REGISTER_EVENT byassigning an eventID to the
`eventNameattribute’s value and storing the ID and event
`name in an event name registry. The PGUI then loads the
`eventhandler attribute’s value and stores the ID and event
`handler in an event handler registry. In this example, the
`PGUI registers the SwitchStyle name in the event name
`registry and the SwitchStyleEventHandler in the event han-
`dler registry. The SwitchStyle event is now available for use.
`The PropertyWidget control’s applyEventID attribute’s
`value makes reference to the SwitchStyle event. When the
`property widget receives an Apply event(i.e., a command to
`apply a style), the property widget can retrieve the Switch-
`Style event ID from the event name registry and then use
`that event ID to retrieve the SwitchStyleEventHandler from
`the event handler registry.
`Visual Styles
`An importantaspect of the invention is that it provides a
`visual style object as a means for switching visual styles for
`the widgets defined in a basic UIL user interface description.
`Suchvisual style objects can be defined in the same UIL user
`interface description file, or be stored in a separate file.
`FIGS. 1 and 2 show in detail two different visual styles.
`Thevisual styles use different colors (shown as shades in
`the figures), border widths, widget spacing. widget widths,
`text alignment, and shadowing or bordering techniques. The
`style objects also draw different widgets differently, such as
`the WindowControlsWidget control 10. Some controls are
`not drawn in various styles. For example, the Title barWid-
`get control 12 depicted in FIG. 2 (the Motif style) lacks a
`WindowCloseButton widget, but the TitlebarWidgetcontrol
`12 depicted in FIG. 1 (the Windows95 style) has one.
`However, regardless of visual style, any displayed widget
`performs the same function.
`The following object definition shows an example visual
`style object in accordance with the present invention:
`8
`
`15
`
`20
`
`25
`
`30
`
`35
`
`45
`
`50
`
`55
`
`65
`
`IPR2024-00145
`Apple EX1007 Page 8
`
`

`

`5,793,368
`
`10
`color, font, alignment, visibility, and other attributes of the
`visual style of widgets. In the preferred embodiment. the
`attribute functions require at least one parameter, a user
`interface indicator, such as MenuBar or ScrollableArea that
`identifies the widget type to the style object. Someattribute
`functions require a second parameter which contains the
`state of the widget, such as selected, visible. active. pressed,
`iconified, and other user interface states. The two following
`visual style object definitions provide examples of how the
`PGUI can display the same user interface in multiple visual
`styles. Hach definition extends the basic definition set forth
`above. Thefirst definition defines a Motif-type visual style,
`while the second definition defines a Windows95-type visual
`style.
`
`
`10
`
`15
`
`
`
`class Style
`{
`
`private static Style currentStyle = null;
`yoid setCurrentStyle(Style style)
`
`currentStyle = style;
`
`tyle getCurrentStyle 0
`
`}S
`
`if (currentStyle = null)
`currentStyle = load(“MotifStyle”);
`tTeturn currentStyle;
`
`}i
`
`nt getAlignment(int ui_type)
`{
`
`return LEFT,
`
`oolean showControl(int ui_type)
`
`Tetum true;
`
`class MotifStyle extends Style
`{
`
`class MotifColor(Color bg, Color fg)
`
`}b
`
`{
`
`}v
`
`{}y
`
`Color background = bg;
`Color foreground = fg;
`
`}M
`
`inactiveWinMgrColor=new MotifColor (dimGray,
`
`Color color = normalColors.background;
`if (uiType is TitleBar)
`
`if (state is selected)
`color = activeWinMgrColors.background,
`
`else
`
`color = inactiveWinMgrColors.background,
`
`return color;
`
`}
`
`lass Win9S5Style extends Style
`
`int WindowForeground = 0,
`int WindowBackground = 1;
`int TitleSelectedBackground = 2;
`int Titleackground = 3;
`Color colors[] = new Color{4];
`colors[WindowForeground] = black;
`colors[WindowBackground] = white;
`colors[TitleBackground] = mediumGray;
`colors[TitleSelectedground] = darkBlue,
`Color getBackground(int uiType, int state)
`{
`
`int color = WindowBackground;
`if (uiType is TitleBar)
`{
`
`if (state is selected)
`color = TitleSelctedBackground;
`else
`
`color = TitleBackground,
`
`}r
`
`eturn colors [color];
`
`20
`
`25
`
`}c
`
`{
`
`30
`
`35
`
`45
`
`50
`
`oid drawRadio(Graphics graphics,
`int x,int y,
`int width, int height,
`int shadowType,
`int state, int ui_type)
`
`{}y
`
`{}v
`
`oid drawCheckBox (Graphics graphics,
`int x, int y,
`int width, int height,
`int shadowType,
`int state, int ui_type)
`
`oid drawBorder (Graphics graphics,
`int x, int y,
`int width, int height,
`int shadowType,
`int uiType, int state)
`
`{ F
`
`ont getFont(int ui_type, int state)
`
`return helvetica;
`botor getBackground(int ui_type, int state)
`‘
`return lightGray;
`botor getPoreground(int ui__type, int state)
`return black;
`&or getSelectColor(int ui_type, int state)
`retum white;
`
`oid drawArrow(Graphics graphics,
`int x, int y,
`int width, int height,
`normalColors=new MotifColor(ItGray, black);
`otifColor
`int shadowType,
`
`MotifColor activeWinMgrColor=new=MotifColor(ItGreen,
`int state, int ui_type)
`white)
`MotifColor
`black);
`Color getBackground(int uiType, int state)
`{
`
`
`
`35
`
`
`
`This basic style is used as a template for the visual
`characteristics of various widgets or widget elements, such
`as position, width, height, shadow type, state, etc. The PGUI
`can determine the current style by calling a getCurrentStyle
`function. Likewise, the PGUI can set the current style by
`calling a setCurrentStyle function. If the user does not set a
`visual style, the visual style object loads a default style. In
`the above example, the visual style object loads the Motif
`style using the getCurrentStyle function.
`The visual style object, by means of calling functions,
`abstracts the methods by which the PGUI determines the
`
`65
`
`Referring to the above examples, the preferred embodi-
`mentof the invention provides a method by which a visual
`style’s attributes can be determined regardless ofthe style.
`The examples show that the state, the user interface type,
`andthe currentvisual style setting determine the background
`and other visual style attributes. Referring to the above
`Motif-type visual style object. the definition indicates to one
`skilled in the art that the Title