Style Class Basics

A Style Class is a group of style settings that are saved together. Style Classes can be applied to multiple components to provide consistency in design. A Style Class allows you to define style elements in one place, and then quickly apply that style to different components. Style Classes are stored in the Styles folder in the Project Browser.




Within the Styles folder, Style Classes can be placed into folders in order to keep them organized. In the following example, we created separate folders for banner styles and logo styles in the Designer. As projects grow and increase in complexity, use folders to more easily manage your style classes.

Creating a Style Class

  1. To create a Style Class, right-click on the Styles folder and select New Style. 



  2. Enter a name for the new Style Class. Style Class names must be unique to the project. You will see a green check icon if the name you enter is acceptable. 



  3. Click Create Style Class.

  4. On the Edit Style screen, use the style editor to set the text, background, border, and so forth, for that style.  



  5. Click OK to save the Style Class.

  6. Once a Style Class has been created, it can then be applied to a component. In the component's Style property, there will be a classes property with a dropdown list of all available Style Classes that can be applied to the component.










The following is an example screen where the label components were created then all given the same Style Class, which has settings for text weight, font family, background color, and border.


Delete a Style Class

To delete a Style Class, right-click on the style class name in the Project Browser, then select Delete. When a Style Class is deleted,  it is no longer applied to any components it was previously applied to. The component returns to the default style settings with the exception of any inline styles. Inline styles will remain applied to the component. 

Rename a Style Class

To rename a Style Class, right-click on the Style Class name in the Project Browser, then select Rename. Once a Style Class is renamed, it will no longer be applied to any components it was previously applied to.

Protect a Style Class

You can lock a Style Class from inside Designer by opening the Project Browser, right-clicking on the Style Class, and selecting the Protect option to protect it. Once it's protected, it cannot be changed except by someone that has the permission to unprotect it and modify it. For more information on protecting project resources see Project Security in Designer.



Multiple Style Classes

Perspective allows you to select more than one Style Class for a component. Multiple Style Classes are applied in alphabetical order. Style classes further along in the alphabet will override earlier style classes.  The overrides occur only for properties that are set in multiple classes.  

In the example below, Bravo style class is blue, bold, italic, and 13px text with some borders. Charlie style class is red, bold, and 16px text.

When both styles are applied together, the color and text size in Charlie style class override Bravo.  However, the italics and borders from Bravo remain because Charlie does not have those properties set.


You can also apply inline styles to components that have a style class. The inline style properties override any properties in the style class. For example, if the style class has a properties of 22pt bold text with a color of blue, but there is an inline style property of 18 pt bold text with a color of orange, the component will receive the inline style properties. In this example, we applied the Alpha style to a label and the applied inline styles of a bottom and right border.




Animated Style Classes

An animated Style Class transitions through two or more style configurations over some period of time. For example, using an animated Style Class can be powerful way to visually show data changes (such as an alarm state) on a component over time. When the Animated option is set to true on the Edit Style screen, several settings appear for customizing the animation.









Animated Settings

The following properties appear when the Animated checkbox is set to True. 

NameDescription
DurationNumber of seconds for each animation stop.
DirectionOptions are normal, reverse, alternate, and alternate reverse.
IterationsNumber of times you want the animation to run. Enter an integer, or check the infinite box to have the animation run continually.
TimingOptions are linear, ease, easeIn, easeOut, stepStart, stepEnd, and exaggerate.
DelayDelay, in number of seconds.
FillMode

Options are none, forwards, backwards, or both.

0% to 100%Animation stops. All of the animation and style settings can be set for each stop. Additional stops can be added by right-clicking on the bar in between 0% and 100%.
Style Settings

Sets the styles for an animation stop. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. 

Applied Styles




Displays the style names and settings as you add them to a component. 

Animated Style Class Example

  1. In the Project Browser, right-click Styles and select New Style.



  2. Enter a Style Class name, for this example we used "InAlarm", and click Create Style Class.
  3. On the Edit Style screen, check the Animated option in the upper right corner.  For this example, we'll leave the default settings in the fields. 
  4. Next click on 0% to set the style for the beginning of the animation.
  5. Click on the Expand  icon next to Background to see the Background settings.

  6. In the Background color field, enter a color code or click on the color wheel to select a background color for the first animation stop. We chose  #FF8A8A, a light red.



  7. Next click on 100% to set the style for the end of the animation.
  8. Click on the Expand  icon next to Background to see the Background settings.
  9. In the Background color field, enter a color code or click on the color wheel to select a background color for the first animation stop. We chose #FFFF47, a bright yellow.



  10. Click OK to save the Style Class.
  11. Next drag a Label component onto a view. Select the component.
  12. In the Perspective Property Editor, click the Expand  icon under style classes. Select the InAlarm class.



  13. The Label component will immediately display the animated style class, transitioning between the light red and yellow colors we selected.


Bindings on Style Classes

In Perspective, you can dynamically change the style class on a component. Styles and Style Classes can have binding options. For example, a component could use a style class when a Tag has one value, and not use the class when the Tag has a different value.






Dynamic Style Class Example

In this example, we use the InAlarm style class and Label component we set up in the previous example. 

  1. Click on the New Tag  icon and select New Standard Tag and Memory Tag.



  2. Give the Tag a name.
  3. Set the data type to boolean, and click OK to save the Tag.



  4. On the view, select the Label component. 
  5. In the Property Editor, click on the Binding  icon next to classes.
  6. Select the Tag Binding type.
  7. On the Edit Binding screen, click the Browse Tags  icon and select the AlarmBit tag. 
  8. Next, click on Add Transform.



  9. On the Select Transform screen, choose Map and click Add Transform.



  10. Click the Add  icon twice to add two mappings.
  11. Click on the Output Type dropdown and choose Style Class.



  12. For the first mapping enter false as the input type and leave the output type blank.  This will cause the Label component to have no style class when the value on the Tag is false.
  13. For the second mapping enter true as the input type and use the dropdown to select "InAlarm" as the output type. This will cause the Label component to the InAlarm style class when the value on the Tag is true.
  14. For the Fallback, leave the output type blank. 



  15. Click OK to save the binding. 
  16. To test the binding, write to the Tag. The component will change depending the Tag's value.


Element States on Style Classes

Element States are used on Style Classes to change the style configuration on a component based on the state of the component. It is an additional styling configuration you can make on a style class. For example, you could have the border on a component change when it is disabled. Or you could have the background change when the user hovers the mouse over the component. See the table below for element states that are available. These states are based in CSS pseudo classes.





NameDescription
Element State

State of the component. Options are as follows:

StateDescription
activeThe component is being activated by the user. For example, clicking on it with a mouse.
checkedThe component is checked or toggled to an "on" state. Applies to checkboxes, radio buttons, etc.
disabledComponent is disabled that is it cannot be selected, clicked on, typed into, or accept focus.
emptyRepresents any element that has no children. Children can be either element nodes or text (including whitespace).
enabledComponent is enabled and can be selected, clicked on, typed into, or accept focus.
first-childChanges the style for the first element among a group of sibling elements.
fullscreenAutomatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations.
focus

The component receives focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's "tab" key.

hoverUser hovers mouse over the component.
in-range

Element whose current value is within the range limits specified by the  min and max attributes.

read-onlyComponent is read-only.
read-writeComponent is available for read and write.
visited Component links that the user has already visited.


Per dev, some of these element states will not work yet in Perspective. There's a ticket. Some may end up being dropped/deleted and some may be implemented in the future.

default-choice, invalid, last child, link, only-child, out-of-range, required, valid


Animated

If checked, the Element State can be animated. The animate options are as follows:

NameDescription
DurationNumber of seconds for each animation stop.
DirectionOptions are normal, reverse, alternate, and alternate reverse.
IterationsNumber of times you want the animation to run. Enter an integer, or check the infinite box to have the animation run continually.
TimingOptions are linear, ease, easeIn, easeOut, stepStart, stepEnd, and exaggerate,
DelayDelay, in number of seconds.
FillMode

Options are none, forwards, backwards, or both.

Style Settings

Sets a style animation stop. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. 


Element States Example

In this example, we have a Style Class called HoverLabel. The base style for this class has some text settings and border settings. We applied the class to two Label components on view. Let's set up an element state that will change the background color of the component if a user hovers over the component with a mouse.

  1. To modify the Style Class, double click on it in the Project Browser.
  2. Under Style Rules, click on the Add  icon and select Element State.



  3. On the Element State dropdown, scroll down and select hover. 
  4. Click on the Expand  icon next to Background to see the Background settings.
  5. In the Background color field, enter a color code or click on the color wheel to select a background color for the first animation stop. We chose #8AFFFF, a light blue.



  6. Click OK. Now the background color will change on the Label component that the user hovers over.



Media Query on Style Classes

A Media Query can be applied to a Style Class in order to change the style of your Perspective components based on the device your session is running on. That is, you can change the style of your Perspective components based on the device your session is running on.

Media queries don't change anything about your layout, rather they react to those changes in the device and then choose from the various style rules you defined.

For example, you could make changes to your styles based on the width of the session. Media queries in style classes are a direct import of CSS rules. Depending on the particular media query, the selector will apply at less than or equal to, or vice versa.






Media Query Settings

NameDescription
min-widthSets the minimum width in pixels. If the viewport is larger than the specified width (in pixels), this rule will be applied. If the viewport is smaller than the minimum width, this rule has no effect. For example, a setting of min-width 361 means this rule is active if the screen is at least 361 pixels wide.
max-widthSets the maximum width in pixels. If the viewport is smaller than the maximum width, it will automatically change the height of the element. If the viewport is larger than the maximum width, rule has no effect. For example, a setting of max-width 360 means this rule is active if the screen is at most 360 pixels wide or smaller.
orientationThis rule will apply based on whether the browser window is in landscape mode (that is, its width is greater than its height) or portrait mode (its height is greater than its width). Options are portrait or landscape.
min-aspect-ratioSets a minimum width-to-height aspect ratio. Enter value as a ratio or width-to-height, for example 8/5.
max-aspect-ratioSets a maximum width-to-height aspect ratio. Enter value as a ratio or width-to-height, for example 8/5..
hover

Applies the style settings when the device supports hovering. Options are hover or none.

Style Settings

The style settings to apply during the media query. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. 

Media Query Example

For the following example, we placed a Label component with no style class on a view. 

  1. To create a Style Class, right-click on the Styles folder and select New Style. 



  2. Give the new Style Class a name. We chose MediaQuery.
  3. Click Create Style Class.
  4. Under Style Rules, click on the Add  icon and select Media Query. 

     

  5. Next we updated a few of the settings. Change Media Query to max-width and the pixel value to 500px. We also set the Text Font size to 24px. 
  6. Click OK to save the Style Class.



  7. Back in the Designer, select the Label component.  
  8. In the Property Editor, click on the Expand  icon next to classes.
  9. Select the MediaQuery Style Class.

      

  10. Save the project. 
  11. Launch a Perspective Session. Now you should be able to see the font size on the label change as you adjust the size of your session window.