US20150082208A1

US20150082208A1 - Multi-level user interface theming

Info

Publication number: US20150082208A1
Application number: US14/027,831
Authority: US
Inventors: Uwe D. Klinger; Andreas Roessler
Original assignee: Individual
Current assignee: SAP SE
Priority date: 2013-09-16
Filing date: 2013-09-16
Publication date: 2015-03-19
Also published as: US20150082214A1; US9158438B2

Abstract

The present disclosure describes methods, systems, and computer program products for providing multi-level user interface theming. One computer-implemented method includes receiving a request to modify an existing theme, receiving a change to a quick theming classified parameter, receiving a change to a base theming classified parameter, receiving a change to an expert theming classified parameter, and publishing the modified theme.

Description

CROSS-REFERENCE TO RELATED APPLICATIONS

This application is related to co-pending application U.S. Ser. No. ______ filed on Sep. 16, 2013, entitled “Multi-Level User Interface Theming Engine,” the entire contents of which are hereby incorporated by reference.

BACKGROUND

Branding, or theming, is the ability to adapt an application to a desired visual look and/or operation. For example, a company's web application style guide may require that all internal/external webpages associated with company web-based applications use a particular color and menu style. This ensures, among other things, recognition and familiarly among users of the web-based applications. However, web-based applications are generally designed to be offered to and for use by multiple customers and are not generally designed with future style-guide-required theming changes as a consideration. As a result, later-required theming changes require time consuming and expensive software development/modification and/or testing of software artifacts at multiple architectural levels to ensure consistency and proper functionality. The necessary software development/testing increases a total cost of ownership for web-based applications and can result in the abandonment a re-theming effort and/or the use of a different web-application.

SUMMARY

The present disclosure relates to computer-implemented methods, computer-readable media, and computer systems for providing multi-level user interface theming. One computer-implemented method includes receiving a request to modify an existing theme, receiving a change to a quick theming classified parameter, receiving a change to a base theming classified parameter, receiving a change to an expert theming classified parameter, and publishing the modified theme.
Other implementations of this aspect include corresponding computer systems, apparatuses, and computer programs recorded on one or more computer storage devices, each configured to perform the actions of the methods. A system of one or more computers can be configured to perform particular operations or actions by virtue of having software, firmware, hardware, or a combination of software, firmware, or hardware installed on the system that in operation causes or causes the system to perform the actions. One or more computer programs can be configured to perform particular operations or actions by virtue of including instructions that, when executed by data processing apparatus, cause the apparatus to perform the actions.
The foregoing and other implementations can each optionally include one or more of the following features, alone or in combination:
A first aspect, combinable with the general implementation, wherein the base theming classified parameter has a global scope and is bound to the quick theming classified parameter.
A second aspect, combinable with any of the previous aspects, wherein the expert theming classified parameter has a local scope and is bound to the base theming classified parameter.
A third aspect, combinable with any of the previous aspects, further comprising generating custom theming source code using received edits to theming source code to reflect a desired change to a parameter not exposed by at least one of the quick theming classified parameter, the base theming classified parameter, or the expert theming classified parameter.
A fourth aspect, combinable with any of the previous aspects, further comprising ensuring a lack of conflicts between the theming source code associated with the existing theme and the custom theming source code.
A fifth aspect, combinable with any of the previous aspects, wherein publishing the modified theme further comprises saving only deltas between the existing theme and changes to the quick theming classified parameter, the base theming classified parameter, the expert theming classified parameter, and the theming source code associated with the existing theme.
A sixth aspect, combinable with any of the previous aspects, further comprising generating runtime user interface code by: concatenating applicable theming source code, wherein applicable theming source code includes theming source code associated with the existing theme, parameter values from the quick theming classified parameter, the base theming classified parameter, the expert theming classified parameter, and custom theming source code, for each parameter, searching for the last occurrence and calculating the parameter, if applicable, according an associated formula; and replacing all occurrences of the parameter with the calculated value.
The subject matter described in this specification can be implemented in particular implementations so as to realize one or more of the following advantages. First, a theming infrastructure allows modifications to be made to UI components and/or controls to provide multiple levels of user interface (UI) theming control. The theming levels can be easily understood by users and require less training to work with. For example, upper theming levels provide simple, high-coverage settings affecting many UI components and/or controls, while lower theming levels provide sophisticated settings that affect specific UI components and/or controls. Users with more advanced training can work with lower levels, while other users can stay within the confines of upper levels. Second, the theming infrastructure is flexible and allows efficient theming changes based only on a user's needs. For example, user needs may vary from changing an overall color of a web-based standard application background to specific changes to a particular web-based standard application component. Third, the theming infrastructure allows simple as well as sophisticated changes to be made easily and inexpensively without the need for extensive software development and/or testing. Fourth, the theming infrastructure is portable and designed to work with different UI technologies, components, and/or controls. Fifth, the theming infrastructure is extendable and allows the addition of existing and future UI technologies, components, and/or controls. Seventh, the theming infrastructure provides an each-to-use and feature-rich application programming interface (API). Other advantages will be apparent to those skilled in the art.
The details of one or more implementations of the subject matter of this specification are set forth in the accompanying drawings and the description below. Other features, aspects, and advantages of the subject matter will become apparent from the description, the drawings, and the claims.

DESCRIPTION OF DRAWINGS

FIG. 1 is a block diagram illustrating example user interface theming levels according to an implementation.

FIG. 2 is a block diagram illustrating an example distributed computing system for providing multi-level user interface theming according to an implementation.

FIG. 3 is a flow chart illustrating a method for providing multi-level user interface theming according to an implementation.

FIG. 4A is an example screenshot of a tool UI according to an implementation.

FIG. 4B is an example screenshot of a tool UI following a change to a parameter according to an implementation.

FIG. 4C is an example screenshot 400 c of a tool UI displaying an example list of ET parameters according to an implementation.

Like reference numbers and designations in the various drawings indicate like elements.

DETAILED DESCRIPTION

This disclosure generally describes computer-implemented methods, computer-program products, and systems for providing multi-level user interface theming. The following description is presented to enable any person skilled in the art to make and use the invention, and is provided in the context of one or more particular implementations. Various modifications to the disclosed implementations will be readily apparent to those skilled in the art, and the general principles defined herein may be applied to other implementations and applications without departing from scope of the disclosure. Thus, the present disclosure is not intended to be limited to the described and/or illustrated implementations, but is to be accorded the widest scope consistent with the principles and features disclosed herein.
For purposes of this disclosure, a “user interface (UI) component” is a building block to assemble UIs. UI components can be specific to a use case or re-usable. Examples for re-usable UI components are UI controls such as buttons or input field. For purposes of this disclosure, a “theming artifact” is data supplied to a UI component interface to describe a desired look for the UI component. Examples of theming artifacts include images used for background, color values or more general CSS files. For purposes of this disclosure, a “theme” is a collection of theming artifacts (e.g., stored in source and/or runtime files) following a similar “look.” For example there is an example “XYZ” theme can use different shades of grey and the color blue for UI component highlights. Every supporting control supports a “XYZ” theme “look.” For purposes of this disclosure, a “theming parameter” steers the visualization of one or multiple UI components, such as a button. A theming parameter can be for example the background color of the button. For purposes of this disclosure, “theming source code” is machine readable code used to define the visualization of UI components. It can be interpreted directly by a UI component or may require a processing step, such as compilation, interpretation, etc. For example, a cascading style sheet (CSS) format can be directly interpreted by web browsers for HTML UI components. A UI component consisting of HTML code can be themed in this manner. In another example, the LESS dynamic style sheet language format needs a compilation step to generate CSS code.
Branding, or theming, is the ability to adapt an application to a desired visual look and/or operation. For example, a company's web application style guide may require that all internal/external webpages associated with company web-based applications use a particular color and menu style. This ensures, among other things, recognition and familiarly among users of the web-based applications. However, web-based applications are generally designed to be offered to and for use by multiple customers and are not generally designed with future style-guide-required theming changes as a consideration. As a result, later-required theming changes require time consuming and expensive software development/modification and/or testing of software artifacts at multiple architectural levels to ensure consistency and proper functionality. The necessary software development/testing increases a total cost of ownership for web-based applications and can result in the abandonment a re-theming effort and/or the use of a different web-application.
Customers are increasingly requiring easy and consistent methods to perform multiple levels of branding across applications. While some customers only want to perform basic changes, such as updating the color of an application background or putting a company logo on a web page, other customers want to apply a sophisticated style guide to an application that requires the change of many details associated with a UI. Customers also want the ability to possible to patch or upgrade application without the need to perform/repeat a full theming process.
Further, web-based applications typically use standard control sets that can be changed by applying updates or bug fixes. The changes may then have effect on current theming and a method to reduce the effect of the changes is desirable.
The theming infrastructure described below supports both requirements with low total cost of ownership (TCO) for the customer by providing multiple levels of theming functionality in a single infrastructure. Upper theming levels provide simple, high-coverage settings affecting many UI components and/or controls, while lower theming levels provide sophisticated settings that affect specific UI components and/or controls.
FIG. 1 is a block diagram 100 illustrating example user interface theming levels 102 according to an implementation. The described multi-level theming infrastructure consists at least of two or more theming levels. The described four-theme-level approach appears to provide an optimal level of flexibility, efficiency and reduced complexity. As will be appreciated by those of skill in the art, more or less theming levels are also applicable to the described subject matter and within the scope of the disclosure.
Theming Levels
Four theming levels are illustrated in FIG. 1: Level 1: Quick Theming 104 a, Level 2: Base Theming 104 b, Level 3: Expert Theming 104 c, and Level 4: Source Editing 104 d. As can be seen, changing a parameter 103 a for a UI component at Level 1, results in the similar change being reflected down to parameters for UI components at Level 2 and Level 3 bound to parameter 103 a. In other words, the finer-grained parameters (e.g., at Level 2) take values from less fine-grained parameters (e.g., at Level 1). Similarly, changes a parameter at Level 2 at 103 b affect associated parameters for UI components at Level 3 bound to parameter 103 b. Note that changes flow from course to fine-grain parameters and changes made to Level 2 or Level 3 are not reflected upwards to the level above the level changes are made in.
Level 1: Quick Theming
Quick Theming (QT) 104 a provides the maximum effect on UIs with a minimal effort for a user. A parameter is user-accessible, exposed property (e.g., font, color, etc.) associated with a UI application. QT parameters are basic/technology-agnostic parameters, such as a base font size or a logo image and can be specific to a theme and are changed to reach basic UI component settings. Example QT parameters from an example “XYZ” theme can include:

- 1. “Highlight color” for highlighted elements
  - button hover color, select color, focus outline, etc.
  - Color of monochrome icons
- 2. “Branding color” for branding elements
- 3. “Font”—The main font for all applications
- 4. “Font size”—The base font size for normal text
- 5. “Background color”—The page background color
- 6. “Background image”—The page background image
- 7. “Logo image”—The company logo for display in the page header

For example, the “XYZ” theme can have a reduced coloring theme where most elements are greyish in nature. In this theme, all other colors parameters are variations of a “Highlight color” parameter. By providing the “Highlight color” using the theming infrastructure, all the usage instances of “Highlight color” color (and associated variations) can be modified. Because of the technology-agnostic character of parameters such as “Highlight color,” the parameter can be applied to all UI libraries and their components that the theming infrastructure affects. QT parameters/values have global scope and should be accessible by any UI component.
A new theme can be provided by changing the QT parameters that are provided by an existing theme. All UI technologies that provide theming for this existing theme and that use the QT parameters will have their look adjusted accordingly. Additional parameters can be added in the future and adapted to evolving UI technologies.
Level 2: Basic Theming
Basic Theming (BT) 104 b consists of parameters specific to groups of controls. They have a more clearly defined semantic meaning for a UI, are still technology independent, and provide functionality for more detailed changes to a target UI component than possible with QT parameters. However, BT parameters may not be relevant for all technologies. Example BT parameters from the example “XYZ” theme can include:

- 1. Button background
- 2. Button border
- 3. Group background
- 4. Input background
- 5. Disabled background

In some implementations, by default, the value of a BT parameter can be derived from one or more QT parameters. This ensures that changing a QT parameter will affect a BT parameter as well. Deriving of a BT parameter value can be either direct (e.g., same value as a QT parameter) or using a formula to calculate the BT parameter value. In some implementations, BT parameters can also have a fixed value. In these implementations, the fixed-value BT parameter is not affected by changes to QT parameters. In some implementations, there are more BT parameters than QT parameters. Similar to QT parameters, BT parameters/values have global scope and should be accessible by any UI component.
Level 3: Expert Theming
Expert Theming (ET) 104 c consists of parameters that are individual settings for a particular UI technology or for a particular UI component/control aspect that cannot be changed using QT and/or BT parameters. For example, ET encompasses parameters to control individual cascading style sheet (CSS)-style properties of controls and their applicable different states. In some implementations, different control states can require different visualizations. For example, for an emphasized button on a UI, the background of the button should be different then of a standard state button in order to express emphasis of the emphasized button. Example ET parameters from the example “XYZ” theme can include:

- 1. Standard button background
- 2. Standard button border
- 3. Emphasized button background
- 4. Emphasized button border
- 5. “Next” icon
- 6. “Save” icon

In some implementations, the list of ET parameters is larger than either the QT and/or BT parameters. A reasonably defined set of QT and BT parameters can reduce the need to modify ET parameters to those cases where QT and/or BT parameters are not sufficient for a theming effort.
As with BT parameters, ET parameters can be derived from other parameters or set to a fixed value. For example, in some implementations, ET parameters can be derived only from other ET parameters to ensure a consistent method of expert level theming. For example, QT or BT can be used to shift the color of images on a UI (e.g. “Next” or “Save” icon), while at the expert level, ET can be used to replace the image. ET parameters/value have only a local scope.
Note that FIG. 1 illustrates that from Levels 1-3, a resulting set of parameters is generated; here, “@buttonBackground=blue; . . . . ” Theming source code is also shown that uses the example parameter @buttonBackground; here “.button {background-color: @buttonBackground;}.”
Level 4: Source Editing
Although parameters used with QT, BT, and/or ET should cover most theming scenarios, some parameters may not be handled/available through QT, BT, and/or ET parameters. For example the “XYZ” theme can provide ET parameters to set background colors for all variants of a button but not to set a UI drop shadow with respect to the button. In this instance, a user needs to be able to perform source code editing (SE) 104 d to edit the theming source code of the theming artifacts, in this example the CSS files, directly. As illustrated, the Source described above following Level 3: Expert Theming, needs to be modified to include a “drop-shadow: grey 2px;” parameter. Theming artifact 106 shows the modification made to the theming source code following SE at Level 4 104 d. Note that edits of theming source code at level 4 have only a local scope. The modified theming artifact can be consumed by UI components.
It is also necessary to ensure that there are no conflicts between the predefined theming source code (i.e., the source of the “XYZ” theme) and custom theming source code of a customized theme as a conflict might result in data loss from the customized theme. To address this issue, in some implementations, the theming source code of the customized theme is separated into at least three parts, although more or less source code parts are envisioned to be covered by the disclosure:

- 1. Source of standard theme
- 2. Parameter values from QT, BT and ET
- 3. Custom source code from SE

A preprocessor then generates the final UI code by concatenating the various theming source code and processing it as follows to generate appropriate theming artifacts 106:

- 1. For each parameter, search for the last occurrence and calculate it according to its formula
- 2. Replace all occurrences of the parameter with the calculated value

Scope of Parameters
As QT and BT parameters/value have a global scope, they should be accessible to any UI component. As ET parameters/values have a local scope, they need only to be accessible to appropriate specific UI components and/or UI libraries using the ET parameters/values. Similarly, SE code has only local scope, and only needs to be accessible to appropriate specific UI components and/or UI libraries using the SE code.
QT/BT parameters can be defined to cover a complete or a reduced set of UI parameters/values of a particular theme depending upon the theming infrastructure implementation and/or UI implementation. For example, some themes may only have QT or BT parameters active while other themes may allow ET/SE modifications as well. In some implementations, modified themes are saved as customized themes while one or more source themes are protected from modification. In some implementations, parameters can be transferred in source code. Source code can be directly consumed by UI components/controls or require a compilation step prior to use.
Transparency of Levels
The multi-level theming approach allows use of all theming levels at the same time and simultaneously in a single theme. Any of the parameters available at each different level can be changed or kept at a default value. Generally, usage of upper theming levels will provide an easier and/or less-costly theming modification to a UI. Use of the upper theming levels will also reduce the risk that a theme is broken with ET and/or SE modifications, particularly if additional UI components/controls are added to a UI implementation and/or UI implementation details change.
The following described computer-implemented methods, computer-readable media, and computer systems provide, among other things, multi-level user interface theming as described above. An overall theming framework includes, among other things: A memory containing theming data, an API to create/modify theming data according to the different described theming levels, and applications using the theming data to display the specified theme.
FIG. 2 is a block diagram illustrating an example distributed computing system (EDCS) 200 for providing multi-level user interface theming according to an implementation. The illustrated EDCS 200 includes or is communicably coupled with a server 202 and a client 240 that communicate across a network 230. In some implementations, one or more components of the EDCS 200 may be configured to operate within a cloud-computing-based environment.
At a high level, the server 202 is an electronic computing device operable to receive, transmit, process, store, or manage data and information associated with the EDCS 200. According to some implementations, the server 202 may also include or be communicably coupled with an application server, e-mail server, web server, caching server, streaming data server, business intelligence (BI) server, and/or other server.
In general, the server 202 is a server that can provide at least a data storage/persistency for theming data 220 and a server application, such as an application server. Note that in some implementations, the server 202 is not necessarily the same server hosting an application using the theming data (or vice versa). The server 202 is responsible for receiving, among other things, requests over network 230 from a client application 246 and/or theming engine 247 a/b associated with the client 240 of the EDCS 200 and responding to the received requests by processing the said requests in an appropriate application (whether illustrated or not). In addition to requests received from the client 240, requests may also be sent to the server 202 from internal users, external or third-parties, other automated applications, as well as any other appropriate entities, individuals, systems, or computers. In some implementations, various requests can be sent directly to server 202 from a user accessing server 202 directly (e.g., from a server command console or by other appropriate access method).
Each of the components of the server 202 can communicate using a system bus 203. In some implementations, any and/or all the components of the server 202, both hardware and/or software, may interface with each other and/or the interface 204 over the system bus 203 using an application programming interface (API) 212 and/or a service layer 213. The API 212 may include specifications for routines, data structures, and object classes. The API 212 may be either computer-language independent or dependent and refer to a complete interface, a single function, or even a set of APIs. The service layer 213 provides software services to the EDCS 200. The functionality of the server 202 may be accessible for all service consumers using this service layer. Software services, such as those provided by the service layer 213, provide reusable, defined business functionalities through a defined interface. For example, the interface may be software written in JAVA, C++, or other suitable language providing data in extensible markup language (XML) format or other suitable format.
While illustrated as an integrated component of the server 202 in the EDCS 200, alternative implementations may illustrate the API 212 and/or the service layer 213 as stand-alone components in relation to other components of the EDCS 200. Moreover, any or all parts of the API 212 and/or the service layer 213 may be implemented as child or sub-modules of another software module, enterprise application, or hardware module without departing from the scope of this disclosure.
The server 202 includes an interface 204. Although illustrated as a single interface 204 in FIG. 2, two or more interfaces 204 may be used according to particular needs, desires, or particular implementations of the EDCS 200. The interface 204 is used by the server 202 for communicating with other systems in a distributed environment—including within the EDCS 200—connected to the network 230; for example, the client 240 as well as other systems communicably coupled to the network 230 (whether illustrated or not). Generally, the interface 204 comprises logic encoded in software and/or hardware in a suitable combination and operable to communicate with the network 230. More specifically, the interface 204 may comprise software supporting one or more communication protocols associated with communications such that the network 230 or interface's hardware is operable to communicate physical signals within and outside of the illustrated EDCS 200.
The server 202 includes a processor 205. Although illustrated as a single processor 205 in FIG. 2, two or more processors may be used according to particular needs, desires, or particular implementations of the EDCS 200. Generally, the processor 205 executes instructions and manipulates data to perform the operations of the server 202. Specifically, the processor 205 executes the functionality required to provide multi-level user interface theming and/or associated functionality related to the theming functionality.
The server 202 also includes a memory 206 that holds data for the server 202, client 240, and/or other components of the EDCS 200. Although illustrated as a single memory 206 in FIG. 2, two or more memories may be used according to particular needs, desires, or particular implementations of the EDCS 200. While memory 206 is illustrated as an integral component of the server 202, in alternative implementations, memory 206 can be external to the server 202 and/or the EDCS 200. In some implementations, memory 206 can be configured to store one or more instances of theming data 220.
The theming data 220 includes, among other things, theming files (e.g., theming source code, runtime files, etc.) that define a particular theme. Although illustrated as integral to the server 202, in some implementations, the theming data 220 can be wholly or partially stored remotely from the server 202 (e.g., on another server 202 or other component of the EDCS 200) as long as the theming data 220 is accessible by the server application 207, client application 246, and/or theming engine 247 a. In some implementations, access to the theming data 220 can be restricted by security policies and/or procedures (e.g., based on a user role, location, password login, etc.).
The theming data 220 (e.g., images, fonts, CSS, LESS files, etc.) can be represented by any type of suitable data structure in any suitable format. For example, the theming data 220 could be a/in a text file, spreadsheet, database, flat file, binary file, multi-part file, linked list, and/or the like. The theming data 220 can be generated, stored, and/or converted from/into any suitable format or form. In some implementations, the theming data 220 can act as a reference to an internal and/or external storage location, and/or provide functionality to interface with and/or retrieve theming data 220.
The server application 207 is an algorithmic software engine providing functionality associated with server 207. For example, server application 207 can be a particular application server and/or application. In some implementations, the server application 207 can provide server and/or client functionality for multi-level user interface theming, for example, calculations, determinations, analysis, and/or functions consistent with the scope of this disclosure. Further, although illustrated as a single server application 207, the server application 207 may be implemented as multiple server applications 207 on the server 202. In addition, although illustrated as integral to the server 202, in alternative implementations, the server application 207 can be external to the database server 202 and/or the EDCS 200 (e.g., wholly or partially executing on the client 240, other server 202 (not illustrated), etc.).
Once a particular server application 207 is launched, the particular server application 207 can be used, for example by a client 240 or other component of the EDCS 200 to interactively process a task, event, or other information/content associated with the server 202. In some implementations, the server application 207 may be a network-based, web-based, and/or other suitable application consistent with this disclosure.
In some implementations, a particular server application 207 may operate in response to and in connection with at least one request received from other server applications 207, other components (e.g., software and/or hardware modules) associated with another server 202, and/or other components of the EDCS 200 (whether illustrated or not). In some implementations, the server application 207 can be accessed and executed in a cloud-based computing environment using the network 230. In some implementations, a portion of a particular server application 207 may be a web service associated with the server application 207 that is remotely called, while another portion of the server application 207 may be an interface object or agent bundled for processing at a remote client 240. Moreover, any or all of a particular server application 207 may be a child or sub-module of another software module or application (not illustrated) without departing from the scope of this disclosure. Still further, portions of the particular server application 207 may be executed or accessed by a user working directly at the server 202, as well as remotely at a corresponding client 240. In some implementations, the server 202 or any suitable component of server 202 or the EDCS 200 can execute the server application 207.
The client 240 (example configurations illustrated as 240 a-240 c) may be any computing device operable to connect to or communicate with at least the server 202 and provides functionality for multi-level user interface theming. In general, the client 240 comprises an electronic computing device operable to receive, transmit, process, and store any appropriate data associated with the EDCS 200. More particularly, among other things, the client 240 can provide functionality for loading, editing, and saving themes (locally and/or on server 202). The client typically includes a processor 244, a client application 246, a theming engine/API 247 a/b, a memory 248, and/or an interface 249 interfacing over a system bus 241.
The client application 246 is any type of application that allows the client 240 to navigate to/from, request, view, create, edit, delete, administer, and/or manipulate content associated with the server 202. For example, the client application 246 can present GUI displays to a user loaded from server 202 and/or generated by the server application 207 and/or the theming engine 247 a/b. In some implementations, the client application 246 can be and/or include a web browser. In some implementations, the client application 246 can use parameters, metadata, and other information received at launch to access a particular set of data from the server 202, client 240, and/or other components of the EDCS 200. Once a particular client application 246 is launched, a user may interactively process a task, event, or other information associated with the server 202, client 240, and/or other components of the EDCS 200. For example, the client application 246 can generate a tool UI loaded from server 202 to provide loading, editing, and saving functionality related to theming. For example, a tool UI may include such things as a theme designer UI, development tools UI, application UI (e.g., generated by an application executing on the HTTP server 202) and/or other suitable UI consistent with this disclosure. In some implementations, the generated tool UI can load and instantiate the theming engine/API 247 a/b. Further, although illustrated as a single client application 246, the client application 246 may be implemented as multiple client applications in the client 240. For example, the client application 246 can represent one or more of a theme designer, build process, development tools, a legacy conversion process/converter, a file abstraction, and other suitable application/tool consistent with this disclosure.
The theming engine 247 a is a software engine that handles all aspects of theme lifecycles. The theming engine 247 a provides a public API 247 b to load, edit, and save design time/runtime theming data and/or appropriate related data from a local persistency (e.g., memory 248) and/or a persistency associated with server 202 (e.g., memory 206). In some implementations, other persistencies (not illustrated) can be accessed by the API 247 b in order to read and/or write theming data and appropriate related data. The API 247 b is independent from particular UI/theming technologies and hides different UI theming, UI technologies, and UI components from users. The API 247 b can also provide functionality to create a theme from a base theme, select theming data (e.g., source and/or runtime files) for editing, get parameters from theming data for editing, set new parameter values, generate theming artifacts, save theme source files, and to build all theming data (e.g., runtime files) from various theming source code (as described above).
In some implementations, the theming engine 247 a provides, among other things, functionality to manage theming artifacts (e.g., source and/or runtime files), access local and/or other persistencies, import/export theming data, build a theming domain object model (DOM) from design time theming data, and to produce runtime theming data (e.g., runtime files) from the theming DOM. In some implementations, the API 247 b implementation associated with the theming engine 247 a can be provided by an extension mechanism to the theming engine 247 a. In some implementations, additional/alternate software engines to process theming data into theming artifacts and to provide functionality similar to the API 247 b can be registered in the theming engine 247 a. In some implementations, more than one API 247 b (or additional/alternate software engines) can be associated with a theming engine 247 a.
The interface 249 is used by the client 240 for communicating with other computing systems in a distributed computing system environment, including within the EDCS 200, using network 230. For example, the client 240 uses the interface to communicate with a server 202 as well as other systems (not illustrated) that can be communicably coupled to the network 230. The interface 249 may be consistent with the above-described interface 204 of the server 202. The processor 244 may be consistent with the above-described processor 205 of the server 202. Specifically, the processor 244 executes instructions and manipulates data to perform the operations of the client 240, including the functionality required to send requests to the server 202 and to receive and process responses from the server 202.
The memory 248 typically stores objects and/or data associated with the purposes of the client 240 but may also be consistent with the above-described memory 206 of the server 202 or other memories within the EDCS 200 and be used to store data similar to that stored in the other memories of the EDCS 200 for purposes such as backup, caching, and the like. In some implementations, memory 240 can store theming data 250. Theming data 250 can be local copies of theming data 220 as described above or theming data unique to client 240 and not yet written to server 202. For example, once local changes to a theme are complete, a user can store appropriate theming data 250 on local memory 248 and/or write the changes back to server 202.
Further, the illustrated client 240 includes a GUI 242 (illustrated as associated with client 240 a) that interfaces with at least a portion of the EDCS 200 for any suitable purpose. For example, the GUI 242 may be used to view data associated with the client 240, the server 202, or any other component of the EDCS 200. In particular, in some implementations, the client application 246 may act as a tool UI to interact with the theming engine/API 247 a/b, server application 207, and/or other components of server 202. For example, the GUI 242 can be used, in some implementations, to load, edit, and/or save theming data associated with a theme.
There may be any number of clients 240 associated with, or external to, the EDCS 200. For example, while the illustrated EDCS 200 includes one client 240 communicably coupled to the server 202 using network 230, alternative implementations of the EDCS 200 may include any number of clients 240 suitable to the purposes of the EDCS 200. Additionally, there may also be one or more additional clients 240 external to the illustrated portion of the EDCS 200 that are capable of interacting with the EDCS 200 using the network 230. Further, the term “client” and “user” may be used interchangeably as appropriate without departing from the scope of this disclosure. Moreover, while the client 240 is described in terms of being used by a single user, this disclosure contemplates that many users may use one computer, or that one user may use multiple computers.
The illustrated client 240 is intended to encompass any computing device such as a desktop computer, laptop/notebook computer, wireless data port, smart phone, personal data assistant (PDA), tablet computing device, one or more processors within these devices, or any other suitable processing device. For example, the client 240 may comprise a computer that includes an input device, such as a keypad, touch screen, or other device that can accept user information, and an output device that conveys information associated with the operation of the server 202 or the client 240 itself, including digital data, visual and/or audio information, or a GUI 242, as illustrated specifically with respect to the client 240 a.
FIG. 3 is a flow chart illustrating a method for providing multi-level user interface theming according to an implementation. For clarity of presentation, the description that follows generally describes method 300 in the context of FIGS. 1 and 2. However, it will be understood that method 300 may be performed, for example, by any other suitable system, environment, software, and hardware, or a combination of systems, environments, software, and hardware as appropriate. In some implementations, various steps of method 300 can be run in parallel, in combination, in loops, or in any order.
At 302, a request is received to modify an existing theme. Note that if a new theme is desired to be created, the new theme is necessarily based upon an existing theme. Following selection of the theme, the theme is loaded and presented to the user in a client application (e.g., a tool UI). From 302, method 300 proceeds to 304.
At 304, a change to a Level 1: Quick Theming (QT) parameter is received. Turning to FIG. 4A, FIG. 4A is an example screenshot 400 a of a tool UI according to an implementation. The tool UI is shown displaying an “xyz goldreflection” theme. The tool UI displays a preview of an “Index Page” web page 402 and QT 404 a parameters associated with the web page 402. For example, “Background Color,” “Base Color,” and “Company Logo” are available QT parameters associated with the web page 402. Note that the displayed highlight color 406 a matches the color 406 b selected for “Highlight Color.” Turning now to FIG. 4B, FIG. 4B is an example screenshot 400 b of a tool UI following a change to a parameter according to an implementation. FIG. 4B shows an example parameter change box 408 according to an implementation. Note that the highlight color 406 a has changed following a change to the Highlight Color parameter 406 b using the parameter change box 408. From 304, method 300 proceeds to 306.
At 306, a change to a Level 2: Base Theming (BT) parameter is received. IN some implementations, the change is received in a manner consistent with that of 304 (e.g., using the tool UI and/or associated UI). In some implementations, the BT parameter can be bound to the QT parameter modified in 304, while in other implementations, the BT parameter can be unbound from the QT parameter modified in 304. Note that the example screenshots 400 a-400 b do not illustrate a BT option for selection. This is because the example illustrated screenshots do not offer a BT option 306 with the selected theme. From 306, method 300 proceeds to 308.
At 308, a change to a Level 3: Expert Theming (ET) parameter 410 is received. In some implementations, the change is received in a manner consistent with that of 304 and 306 (e.g., using the tool UI and/or associated UI). In some implementations, the ET parameter can be bound to the BT parameter modified in 304, while in other implementations; the ET parameter can be unbound from the BT parameter modified in 304. Turning now to FIG. 4C, FIG. 4C is an example screenshot 400 c of a tool UI displaying an example list of ET parameters according to an implementation. Note that the ET parameters 410 are finer grained than the QT parameters displayed in FIG. 4A. From 308, method 300 proceeds to 310.
At 310, theming source code is edited at Level 4: Source Editing. Edits to theming source code reflecting a desired change to a parameter not exposed by the quick, base, and/or expert theming classified parameters is received. In some implementations, the theming source code can be edited in a manner consistent with that of 304, 306, and/or 308 (e.g., using the tool UI and/or associated UI). In other implementations, the theming source code can be edited using an external tool, UI, etc. or in any appropriate manner. From 310, method 300 proceeds to 312.
At 312, a name for the modified theme is received. In some implementations, some themes are considered base themes and cannot be modified. Any changes made must be saved as a different name/instance of the theme. From 312, method 300 proceeds to 314.
At 314, the modified theme is published. In some implementations, the theme is published to a backend (persistent) repository. In some implementations, the theme is published to a persistent repository local to the tool UI/theming engine. In some implementations, only delta changes in relation to the base theme are saved for the new theme. The saving of deltas changes has the effect of saving repository resources. In addition, the saving of delta changes allows specific changes made to a base theme (e.g., by patches or upgrades) to also be applied to a custom theme. This is because if all values of a base theme were duplicated to a custom theme at the time of creation (a separate copy), subsequent changes made to the source base theme values, would not be effective in the custom theme. Using delta changes against the source base theme, however, changes made to the source base theme are “global” in nature to all custom themes based on the source base theme. In this way, the updated source base theme and custom theme can be reconstructed by applying the delta changes to the source base theme. After 314, method 300 stops.
Implementations of the subject matter and the functional operations described in this specification can be implemented in digital electronic circuitry, in tangibly-embodied computer software or firmware, in computer hardware, including the structures disclosed in this specification and their structural equivalents, or in combinations of one or more of them. Implementations of the subject matter described in this specification can be implemented as one or more computer programs, i.e., one or more modules of computer program instructions encoded on a tangible, non-transitory computer-storage medium for execution by, or to control the operation of, data processing apparatus. Alternatively or in addition, the program instructions can be encoded on an artificially-generated propagated signal, e.g., a machine-generated electrical, optical, or electromagnetic signal that is generated to encode information for transmission to suitable receiver apparatus for execution by a data processing apparatus. The computer-storage medium can be a machine-readable storage device, a machine-readable storage substrate, a random or serial access memory device, or a combination of one or more of them.
The term “data processing apparatus” refers to data processing hardware and encompasses all kinds of apparatus, devices, and machines for processing data, including by way of example, a programmable processor, a computer, or multiple processors or computers. The apparatus can also be or further include special purpose logic circuitry, e.g., a central processing unit (CPU), a FPGA (field programmable gate array), or an ASIC (application-specific integrated circuit). In some implementations, the data processing apparatus and/or special purpose logic circuitry may be hardware-based and/or software-based. The apparatus can optionally include code that creates an execution environment for computer programs, e.g., code that constitutes processor firmware, a protocol stack, a database management system, an operating system, or a combination of one or more of them. The present disclosure contemplates the use of data processing apparatuses with or without conventional operating systems, for example LINUX, UNIX, WINDOWS, MAC OS, ANDROID, IOS or any other suitable conventional operating system.
A computer program, which may also be referred to or described as a program, software, a software application, a module, a software module, a script, or code, can be written in any form of programming language, including compiled or interpreted languages, or declarative or procedural languages, and it can be deployed in any form, including as a stand-alone program or as a module, component, subroutine, or other unit suitable for use in a computing environment. A computer program may, but need not, correspond to a file in a file system. A program can be stored in a portion of a file that holds other programs or data, e.g., one or more scripts stored in a markup language document, in a single file dedicated to the program in question, or in multiple coordinated files, e.g., files that store one or more modules, sub-programs, or portions of code. A computer program can be deployed to be executed on one computer or on multiple computers that are located at one site or distributed across multiple sites and interconnected by a communication network. While portions of the programs illustrated in the various figures are shown as individual modules that implement the various features and functionality through various objects, methods, or other processes, the programs may instead include a number of sub-modules, third-party services, components, libraries, and such, as appropriate. Conversely, the features and functionality of various components can be combined into single components as appropriate.
The processes and logic flows described in this specification can be performed by one or more programmable computers executing one or more computer programs to perform functions by operating on input data and generating output. The processes and logic flows can also be performed by, and apparatus can also be implemented as, special purpose logic circuitry, e.g., a CPU, a FPGA, or an ASIC.
Computers suitable for the execution of a computer program can be based on general or special purpose microprocessors, both, or any other kind of CPU. Generally, a CPU will receive instructions and data from a read-only memory (ROM) or a random access memory (RAM) or both. The essential elements of a computer are a CPU for performing or executing instructions and one or more memory devices for storing instructions and data. Generally, a computer will also include, or be operatively coupled to, receive data from or transfer data to, or both, one or more mass storage devices for storing data, e.g., magnetic, magneto-optical disks, or optical disks. However, a computer need not have such devices. Moreover, a computer can be embedded in another device, e.g., a mobile telephone, a personal digital assistant (PDA), a mobile audio or video player, a game console, a global positioning system (GPS) receiver, or a portable storage device, e.g., a universal serial bus (USB) flash drive, to name just a few.
Computer-readable media (transitory or non-transitory, as appropriate) suitable for storing computer program instructions and data include all forms of non-volatile memory, media and memory devices, including by way of example semiconductor memory devices, e.g., erasable programmable read-only memory (EPROM), electrically-erasable programmable read-only memory (EEPROM), and flash memory devices; magnetic disks, e.g., internal hard disks or removable disks; magneto-optical disks; and CD-ROM, DVD+/−R, DVD-RAM, and DVD-ROM disks. The memory may store various objects or data, including caches, classes, frameworks, applications, backup data, jobs, web pages, web page templates, database tables, repositories storing business and/or dynamic information, and any other appropriate information including any parameters, variables, algorithms, instructions, rules, constraints, or references thereto. Additionally, the memory may include any other appropriate data, such as logs, policies, security or access data, reporting files, as well as others. The processor and the memory can be supplemented by, or incorporated in, special purpose logic circuitry.
To provide for interaction with a user, implementations of the subject matter described in this specification can be implemented on a computer having a display device, e.g., a CRT (cathode ray tube), LCD (liquid crystal display), LED (Light Emitting Diode), or plasma monitor, for displaying information to the user and a keyboard and a pointing device, e.g., a mouse, trackball, or trackpad by which the user can provide input to the computer. Input may also be provided to the computer using a touchscreen, such as a tablet computer surface with pressure sensitivity, a multi-touch screen using capacitive or electric sensing, or other type of touchscreen. Other kinds of devices can be used to provide for interaction with a user as well; for example, feedback provided to the user can be any form of sensory feedback, e.g., visual feedback, auditory feedback, or tactile feedback; and input from the user can be received in any form, including acoustic, speech, or tactile input. In addition, a computer can interact with a user by sending documents to and receiving documents from a device that is used by the user; for example, by sending web pages to a web browser on a user's client device in response to requests received from the web browser.
The term “graphical user interface,” or GUI, may be used in the singular or the plural to describe one or more graphical user interfaces and each of the displays of a particular graphical user interface. Therefore, a GUI may represent any graphical user interface, including but not limited to, a web browser, a touch screen, or a command line interface (CLI) that processes information and efficiently presents the information results to the user. In general, a GUI may include a plurality of user interface (UI) elements, some or all associated with a web browser, such as interactive fields, pull-down lists, and buttons operable by the business suite user. These and other UI elements may be related to or represent the functions of the web browser.
Implementations of the subject matter described in this specification can be implemented in a computing system that includes a back-end component, e.g., as a data server, or that includes a middleware component, e.g., an application server, or that includes a front-end component, e.g., a client computer having a graphical user interface or a Web browser through which a user can interact with an implementation of the subject matter described in this specification, or any combination of one or more such back-end, middleware, or front-end components. The components of the system can be interconnected by any form or medium of wireline and/or wireless digital data communication, e.g., a communication network. Examples of communication networks include a local area network (LAN), a radio access network (RAN), a metropolitan area network (MAN), a wide area network (WAN), Worldwide Interoperability for Microwave Access (WIMAX), a wireless local area network (WLAN) using, for example, 802.11 a/b/g/n and/or 802.20, all or a portion of the Internet, and/or any other communication system or systems at one or more locations. The network may communicate with, for example, Internet Protocol (IP) packets, Frame Relay frames, Asynchronous Transfer Mode (ATM) cells, voice, video, data, and/or other suitable information between network addresses.
The computing system can include clients and servers. A client and server are generally remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other.
In some implementations, any or all of the components of the computing system, both hardware and/or software, may interface with each other and/or the interface using an application programming interface (API) and/or a service layer. The API may include specifications for routines, data structures, and object classes. The API may be either computer language independent or dependent and refer to a complete interface, a single function, or even a set of APIs. The service layer provides software services to the computing system. The functionality of the various components of the computing system may be accessible for all service consumers via this service layer. Software services provide reusable, defined business functionalities through a defined interface. For example, the interface may be software written in JAVA, C++, or other suitable language providing data in extensible markup language (XML) format or other suitable format. The API and/or service layer may be an integral and/or a stand-alone component in relation to other components of the computing system. Moreover, any or all parts of the service layer may be implemented as child or sub-modules of another software module, enterprise application, or hardware module without departing from the scope of this disclosure.
While this specification contains many specific implementation details, these should not be construed as limitations on the scope of any invention or on the scope of what may be claimed, but rather as descriptions of features that may be specific to particular implementations of particular inventions. Certain features that are described in this specification in the context of separate implementations can also be implemented in combination in a single implementation. Conversely, various features that are described in the context of a single implementation can also be implemented in multiple implementations separately or in any suitable sub-combination. Moreover, although features may be described above as acting in certain combinations and even initially claimed as such, one or more features from a claimed combination can in some cases be excised from the combination, and the claimed combination may be directed to a sub-combination or variation of a sub-combination.
Similarly, while operations are depicted in the drawings in a particular order, this should not be understood as requiring that such operations be performed in the particular order shown or in sequential order, or that all illustrated operations be performed, to achieve desirable results. In certain circumstances, multitasking and parallel processing may be advantageous. Moreover, the separation and/or integration of various system modules and components in the implementations described above should not be understood as requiring such separation and/or integration in all implementations, and it should be understood that the described program components and systems can generally be integrated together in a single software product or packaged into multiple software products.
Particular implementations of the subject matter have been described. Other implementations, alterations, and permutations of the described implementations are within the scope of the following claims as will be apparent to those skilled in the art. For example, the actions recited in the claims can be performed in a different order and still achieve desirable results.
Accordingly, the above description of example implementations does not define or constrain this disclosure. Other changes, substitutions, and alterations are also possible without departing from the spirit and scope of this disclosure.

Claims

What is claimed is:

1. A computer-implemented method comprising:

receiving a request to modify an existing theme;

receiving a change to a quick theming classified parameter;

receiving a change to a base theming classified parameter;

receiving a change to an expert theming classified parameter; and

publishing, with a computer, the modified theme.

2. The method of claim 1, wherein the base theming classified parameter has a global scope and is bound to the quick theming classified parameter.

3. The method of claim 1, wherein the expert theming classified parameter has a local scope and is bound to the base theming classified parameter.

4. The method of claim 1, further comprising generating custom theming source code using received edits to theming source code to reflect a desired change to a parameter not exposed by at least one of the quick theming classified parameter, the base theming classified parameter, or the expert theming classified parameter.

5. The method of claim 4, further comprising ensuring a lack of conflicts between the theming source code associated with the existing theme and the custom theming source code.

6. The method of claim 4, wherein publishing the modified theme further comprises saving only deltas between the existing theme and changes to the quick theming classified parameter, the base theming classified parameter, the expert theming classified parameter, and the theming source code associated with the existing theme.

7. The method of claim 1, further comprising generating runtime user interface code by:

concatenating applicable theming source code, wherein applicable theming source code includes theming source code associated with the existing theme, parameter values from the quick theming classified parameter, the base theming classified parameter, the expert theming classified parameter, and custom theming source code;

for each parameter, searching for the last occurrence and calculating the parameter, if applicable, according an associated formula; and

replacing all occurrences of the parameter with the calculated value.

8. A non-transitory, computer-readable medium storing computer-readable instructions executable by a computer and operable to:

receive a request to modify an existing theme;

receive a change to a quick theming classified parameter;

receive a change to a base theming classified parameter;

receive a change to an expert theming classified parameter; and

publish the modified theme.

9. The medium of claim 8, wherein the base theming classified parameter has a global scope and is bound to the quick theming classified parameter.

10. The medium of claim 8, wherein the expert theming classified parameter has a local scope and is bound to the base theming classified parameter.

11. The medium of claim 8, further comprising instructions to generate custom theming source code using received edits to theming source code to reflect a desired change to a parameter not exposed by at least one of the quick theming classified parameter, the base theming classified parameter, or the expert theming classified parameter.

12. The medium of claim 11, further comprising instructions to ensure a lack of conflicts between the theming source code associated with the existing theme and the custom theming source code.

13. The medium of claim 11, wherein publishing the modified theme is further operable to save only deltas between the existing theme and changes to the quick theming classified parameter, the base theming classified parameter, the expert theming classified parameter, and the theming source code associated with the existing theme.

14. The medium of claim 8, further comprising instructions to generate runtime user interface code by:

replacing all occurrences of the parameter with the calculated value.

15. A system, comprising:

a memory configured to store theming data;

at least one computer interoperably coupled with the memory and configured to:

receive a request to modify an existing theme;

receive a change to a quick theming classified parameter;

receive a change to a base theming classified parameter;

receive a change to an expert theming classified parameter; and

publish the modified theme, wherein publishing the modified theme is further operable to save only deltas between the existing theme and changes to the quick theming classified parameter, the base theming classified parameter, the expert theming classified parameter, and the theming source code associated with the existing theme.

16. The system of claim 15, wherein the base theming classified parameter has a global scope and is bound to the quick theming classified parameter.

17. The system of claim 15, wherein the expert theming classified parameter has a local scope and is bound to the base theming classified parameter.

18. The system of claim 15, further configured to generate custom theming source code using received edits to theming source code to reflect a desired change to a parameter not exposed by at least one of the quick theming classified parameter, the base theming classified parameter, or the expert theming classified parameter.

19. The system of claim 18, further configured to ensure a lack of conflicts between the theming source code associated with the existing theme and the custom theming source code.

20. The system of claim 15, further configured to generate runtime user interface code by:

replacing all occurrences of the parameter with the calculated value.