Patent Application
20200034410
The present disclosure relates generally to graphical user interfaces. More specifically, but not by way of limitation, this disclosure relates variable definitions and variable value assignment as used for presentation of on-line documents that follow known descriptors such as those that are contained in a cascading style sheet.
A cascading style sheet (CSS) is a file that includes descriptors that define hypertext markup language (HTML) properties to control the aesthetics of various elements such as buttons, backgrounds, and navigation controls for an HTML document. A CSS can include variable definitions and the variables can be given desired values by an author or designer to achieve a desired aesthetic. A global variable is used throughout the document. A scoped variable is used only within a component or components of the document and is thus limited in scope. A scoped variable can also be referred to as a component variable. Changes to global variables in a CSS can be made in order to change the appearance of the document as a whole. Component variables are defined at the component level.
It can be difficult for a developer to set and manage variables in an aesthetic descriptor file such as a CSS file to create a useful and attractive design, while maintaining consistency and the ability to make changes quickly when necessary. A typical on-line document includes multiple components. If too many variables are scoped to specific components, the design will lose consistency. If too many variables are global, the design will lose granularity. Relying on variables scoped to individual components can also result in a design that is time consuming and error prone to change, since such a scoped variable must be changed within each component that uses it.
Some examples of the present disclosure overcome one or more of the abovementioned issues by providing two tiers of variables that can all take on values that are globally assigned. A first tier of variables includes global variables. A second tier of variables includes scoped, or component variables, that is, variables that are specific to individual components of an on-line document. A component variable in this example has a value that is specified globally. For example, the component variable can have a value that is set to be the same value as a value assigned to a global variable. A component variable according to certain aspects of the disclosure is not designed to have its value set from within a component, but externally, although a default value can be set within the component for situations where a global value is not available.
As an example, a processing device in a system can receive, as input, a definition and an assigned value for at least one global variable specifying an aesthetic for an on-line document such as an HTML document, and receive, as input, a definition of at least one component variable associated with an aesthetic property of a component of the on-line document. The component variable can be defined so as to acquire a globally specified value that can also be specified by receiving input, and can be set to be the same value as one of the global variables defined in the system. The definition of the global variable and the definition of the component variable can be stored in an aesthetic descriptor file such as a cascading style sheet file configured to refer to the assigned value for the global variable and the globally specified value for the component variable when rendering the on-line document. There can be multiple variables in each tier of variables. When requested, the on-line document can be rendered by referring to the aesthetic descriptor file including the assigned value for the global variable and the globally specified value for the component variable.
Some examples of the present disclosure maintain consistency while also providing the ability to make changes quickly when necessary. In some examples, a processing device can receive a new globally specified value for a component variable, and from that point forward can render the on-line document so that all of the components with component variables that have the same globally specified value reflect the new globally specified value. When a component variable value is set to be the same as the value of one of the global variables defined in the system, the change to the global variable value is also a change to the globally specified value for the component variable.
In some examples, in addition to receiving global variable values or other values that can be imparted to component variables, the processor can receive a default value for the component variable. The default value is specified at the component level. This default value can be imparted to a component variable if a globally specified value is unavailable due to some coding error or for any other reason.
In some examples, the tiered arrangement according to certain aspects provides for consistency across components, and provides a common language that can be used between authors and developers. The arrangement concurrently provides granular control to authors and allows a document to be themed without having to overwrite style sheets, reducing the risk of introducing errors, resulting in a more easily maintainable system.
These illustrative examples are given to introduce the reader to the general subject matter discussed here and are not intended to limit the scope of the disclosed concepts. The following sections describe various additional features and examples with reference to the drawings in which like numerals indicate like elements but, like the illustrative examples, should not be used to limit the present disclosure.
In
Non-limiting examples of the memory device 106 include electrically erasable and programmable read-only memory (EEPROM), flash memory, or any other type of non-volatile memory. In some examples, at least some of the memory device can include a non-transitory computer-readable medium from which the processing device 104 can read program code instructions 103. A computer-readable medium can include electronic, optical, magnetic, or other storage devices capable of providing the processing device with computer-readable instructions or other files. Non-limiting examples of a computer-readable medium include magnetic disk(s), memory chip(s), ROM, random-access memory (RAM), an ASIC, a configured processor, optical storage, or any other medium from which a computer processor can read instructions.
Still referring to
Memory device 204 can include one memory device or multiple memory devices. The memory device 204 can be non-volatile and may include any type of memory device that retains stored information when powered off. In some examples, at least some of the memory device can include a non-transitory computer-readable medium from which the processing device 202 can read instructions 206. A computer-readable medium can include electronic, optical, magnetic, or other storage devices capable of providing the processing device with computer-readable instructions 206 or other program code.
The memory device 204 can also include one or more files. For example, memory device 204 can serve as a storage device for one or more global variables 207, including assigned values and definitions. Memory device 204 can also serve as a storage device for one or more component variables 208, including a definition, which may take on globally assigned value 209. One or more aesthetic descriptor files 210 can also be stored locally in memory device 204. An aesthetic descriptor file 210 is in some aspects a CSS files, a type of aesthetic descriptor file. Although
In some examples, a processing device (e.g., processing device 104 or processing device 202) can perform one or more of the operations shown in
In block 302 of
As another example, a computing device such as processing device 104 or 202 can perform the operations 400 of
Still referring to
As a specific example of the process above, variables as used in CSS files are separated into at least two types as illustrated in
Component variables according to some aspects exist in the other layer mainly to provide theme-able component properties, they follow the formula, “--block_element--modifier--state—‘PropertyCamelCase’.” Component variable also follow definitional rules where the “block_element—modifier” selector name is something like “alert actions” or “alert—primary,” a “state” is something like “hover” or “active,” and if block_element modifier class names are used “block_element—modifier” is replaced with a user-defined “classname.” In certain aspects, the value of a component or scoped variable is defined by a global variable and a component variable has a default value assigned as a fallback in case the component doesn't have access to values of global variables.
A system in which scoped variables are defined using global variables allows authors to theme and change the system as a whole. For example, if a user wishes to change the primary color across all components the user only needs to redefine the variable “--global--primary-color.” Alternatively, each component variable can be assigned a default value so that a component can stand on its own if necessary; the component does not depend on anything and authors can define variables in isolation when necessary. This arrangement provides for consistency across components, provides a common language to use between authors and developers since authors and developers can set the same global variables as bumpers. This arrangement concurrently provides granular control to allow authors to easily theme a design without having to overwrite CSS files, reducing the risk of introducing errors, resulting in a more easily maintainable system. The two-tier theming system generates modular and isolated components where authors have the ability to customize components at a global and at a component level.
Unless specifically stated otherwise, it is appreciated that throughout this specification that terms such as “operations,” “processing,” “computing,” and “determining” or the like refer to actions or processes of a computing device, such as one or more computers or a similar electronic computing device or devices, that manipulate or transform data represented as physical electronic or magnetic quantities within memories, or other information storage devices, transmission devices, or display devices of the computing platform. The order of the blocks presented in the examples above can be varied—for example, blocks can be re-ordered, combined, or broken into sub-blocks. Certain blocks or processes can be performed in parallel.
The foregoing description of certain examples, including illustrated examples, has been presented only for the purpose of illustration and description and is not intended to be exhaustive or to limit the disclosure to the precise forms disclosed. Numerous modifications, adaptations, and uses thereof will be apparent to those skilled in the art without departing from the scope of the disclosure.
