Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
tutorial:styling_model [2020/06/05 16:01] – [Styling with classes] admintutorial:styling_model [2024/01/02 19:37] (current) – external edit 127.0.0.1
Line 1: Line 1:
-===== Tutorial: Styling Your Models =====+====== Tutorial: Styling Your Models ======
  
-Learning Objectives:+====Learning Objectives====
   * [[#What can be styled?]]   * [[#What can be styled?]]
   * [[#What are the styling options?]]   * [[#What are the styling options?]]
-  * [[#Styling nodes]] +  * [[#Styling Nodes]] 
-  * [[#Styling transitions]] +  * [[#Styling Transitions]] 
-  * [[#Styling swimlanes]] +  * [[#Styling Swimlanes]] 
-  * [[#Styling boxes]]+  * [[#Styling Boxes]]
  
----- +===== What can be styled? =====
-==== What can be styled? ====+
  
 Model consists of nodes (state, branch, etc.), transitions, boxes and swimlanes, and each of which has components like container area, lines, and labels.  All these can be styled to some degree, some supports more styling options while others less. Model consists of nodes (state, branch, etc.), transitions, boxes and swimlanes, and each of which has components like container area, lines, and labels.  All these can be styled to some degree, some supports more styling options while others less.
Line 16: Line 15:
 By styling, we are referring to the background, color, shape, position and other cosmetic look and feel, which do not affect the functioning of the model. By styling, we are referring to the background, color, shape, position and other cosmetic look and feel, which do not affect the functioning of the model.
  
----- + 
-==== What are the styling options? ====+===== What are the styling options? =====
  
 Styling options include: Styling options include:
Line 27: Line 26:
 In general the color can be set.  Many of the components also support styling by classes and css style which are referred to as //advanced styling//. In general the color can be set.  Many of the components also support styling by classes and css style which are referred to as //advanced styling//.
  
-==== Styling with classes ==== +===== Styling with classes ===== 
-This is the preferred option to style as it's more reliable and predictable, and it's a good way to maintain consistency.+This is the preferred option to style as it's more reliable / predictable, and it's a good way to maintain consistency.
  
 On the components that supports //advanced styling//, just enter the names of the css classes using space as the delimiter for multiple classes. On the components that supports //advanced styling//, just enter the names of the css classes using space as the delimiter for multiple classes.
  
-All class names must be named with the prefix //class_//.+All class names must be named with the prefix //class_//, for example "class_GREEN".
  
 The definition of these css classes are set in //config/ide.css//.  The download package comes with two classes: //class_GREEN and class_ORANGE//.  Use these as examples to define your own classes. The definition of these css classes are set in //config/ide.css//.  The download package comes with two classes: //class_GREEN and class_ORANGE//.  Use these as examples to define your own classes.
 +
 +===== Styling with css style =====
 +CSS style is the most flexible option to change the look and feel of the components. CSS style is just a set of key / value pairs. 
 +   { "background": "ORANGE", "border": "2px solid RED" }
 +
 +Notice the above css style uses double quotes to enclose both keys and values. This is very important. CSS style must be specified in valid json format.
 +   
 +To style the components that support css styling, just enter the css style json string.
 +
 +Be aware that, due to how css style are set, if you do change css style, you may need to explicitly unset (remove) settings. For example, if you decided not to set the background color in the above example:
 +   { "border": "2px solid RED" }
 +
 +By setting the above css style, you are leaving the background unchanged, which may not be desired.
 +
 +To remedy the above situation, you have two options below:
 +  * explicitly remove background: 
 +
 +   { "background": "", "border": "2px solid RED" }
 +
 +  * save and re-open the model, as when the model is re-opened, states are created without the background.
 +
 +
 +===== Styling Nodes =====
 +Nodes are states, branches, switches, synchbars and initial / final states.  The node container area and node label can be styled independently.
 +
 +==== States ====
 +States can be styled on:
 +  * container area
 +  * state label
 +
 +Both support advanced styling options.
 +
 +For Container area, you can change color, background color, state borders, opacity, etc.  Positions should not be changed as the state position coordinates are used to align the transitions.
 +  * background
 +  * border
 +  * border-radius
 +  * color
 +  * opacity
 +
 +For state label, you can change its color, font style, font weight, 
 +  * color
 +  * font-style, font-family, font-weight, font-size
 +  * text-decoration
 +  * left, right, top, bottom
 +
 +==== Branches ====
 +Branches can be styled:
 +  * container area
 +  * branch node label
 +
 +Only label supports advanced styling options.
 +
 +For Container area, you can change background color only.
 +
 +For branch node label, you can change its color, font style, font weight, 
 +  * color
 +  * font-style, font-family, font-weight, font-size
 +  * text-decoration
 +  * left, right, top, bottom
 +
 +==== Synchbars ====
 +Syncbars have two variations: horizontal and vertical, both can be styled:
 +  * container area
 +
 +For Container area, advanced styling is supported:
 +  * background
 +  * border
 +  * border-radius
 +  * color
 +  * opacity
 +
 +
 +
 +==== Initial and Final States ====
 +Initial and Final states can be styled:
 +  * container area
 +  * state label
 +
 +Both supports advanced styling options.
 +
 +For Container area, you can change color, background color, state borders, opacity, etc.  Positions should not be changed as the state position coordinates are used to align the transitions.
 +  * background
 +  * color
 +  * opacity
 +
 +For state label, you can change its color, font style, font weight, 
 +  * color
 +  * font-style, font-family, font-weight, font-size
 +  * text-decoration
 +  * left, right, top, bottom
 +
 +
 +
 +===== Styling Transitions =====
 +Transitions have line segments and a transition label. Both are styled independently.
 +
 +==== Transition line segments ====
 +Transition line segments and the arrow head can be styled with color name or //advanced styling//.
 +  * background
 +  * opacity
 +
 +==== Transition label ====
 +Transition labels support //advanced styling//, however their position should not be changed as they are positioned relative to the connection point at the source state.  The styling should only on the font.
 +  * color
 +  * font-style, font-family, font-weight, font-size
 +  * text-decoration
 +
 +
 +===== Styling Boxes =====
 +Boxes can be styled on the container area as well as their labels independently, both supports //advanced styling//.
 +
 +Box container area:
 +  * background
 +  * border
 +  * border-radius
 +  * color
 +  * opacity
 +
 +
 +Box label:
 +  * color
 +  * font-style, font-family, font-weight, font-size
 +  * text-decoration
 +  * left, right, top, bottom
 +
 +
 +===== Styling Swimlanes =====
 +Swimlane has two variations: horizontal and vertical.  They are styled in exactly the same way.
 +
 +Swimlane has multiple lanes, each of which can also be styled independently. 
 +
 +Swimlane has a header and label, and their color can be set/changed. 
 +
 +Each lane has a label and its background color can also be changed/set.
 +
 +//Advanced styling// is not supported.
 +
  
  
-----