Page Operations
Browse Space
Introduction to SDL/Swing Styles
SDL/Swing has a rich styling framework similar to CSS. All style information is contained within three files. When the framework starts up it loads resources/styles/paints.sdl, resources/styles/style_parts.sdl and then resources/styles/styles.sdl. All of these are optional.
Paints
The paints file is used to describe paints of type
color, pattern, and gradient. These are read in using
the PaintBox class. All patterns should be placed in
resources/patterns. The order is important (colors
then patterns followed by gradients) because gradients
reference colors by name.
Gradients are defined by listed a start color / pattern,
an end color / pattern, a mid point from 0 to 1 (defaults
to .5), and a direction. Directions can be one of:
"horizontal", "vertical", "northwest_to_southeast", or "southwest_to_northeast"
The default is "horizontal"
Notes:
1. The colors "white" and "black" are implicitly available.
2. In the color variants "darkest", "very_dark", "dark",
"light", "very light", "lightest" and "transparent"
can be used in combination with names declared in the
colors block like so:
"slate.very_dark" "yellow.transparent"
Example:
colors {
# Name R G B A
light_yellow 250 242 175
yellow 254 199 0
green 31 151 20
orange 255 153 51
gray 200 200 200
}
patterns {
red_clay "red_clay_back.jpg"
brushed_metal "brushed_metal.png"
}
gradients {
yellow_fade "yellow" "yellow.transparent" midpoint=.625
shadow "gray.dark" "gray" orientation="vertical"
}
Style Parts
The style parts file contains fonts and borders. You can use paints
declared in the paints.sdl file by name.
Fonts
Fonts are use the format
identifier name size=(int) bold=(on|off) italic=(on|off)
Example
fonts {
title "Times New Roman" size=14 bold=on
sub_title "Verdana" size=12 italic=on
default "Verdana" size=11
default_bold "Verdana" size=11 bold=true
}
Borders
Borders use the format
name class="(empty|matte|line|bevel|thin_bevel|soft_bevel|etched|titled|compound|border)"
Each class has its own attributes. All attributes are optional except:
A) the "color" attribute of line and matte border
B) the "inner" and "outer" attributes of compound border (these can also be defined as
children of the compound border tag)
C) the "normal" and "pressed" attributes of button border (these can also be defined as
children of the button border tag along with an optional "rollover" border)
Attributes for each class
name class="empty" size=(int) top=(int) left=(int) bottom=(int) right=(int) name class="matte" color="(color_name)" size=(int) top=(int) left=(int) bottom=(int) right=(int) name class="line" color="(color_name)" size=(int) rounded_corners=(true|false) name class="bevel" type="(raised|lowered)" highlight_outer="(color_name)" highlight_inner="(color_name)" shadow_outer="(color_name)" shadow_inner="(color_name)" name class="thin_bevel" type="(raised|lowered)" highlight="(color_name)" shadow="(color_name)" name class="soft_bevel" type="(raised|lowered)" highlight_outer="(color_name)" highlight_inner="(color_name)" shadow_outer="(color_name)" shadow_inner="(color_name)" name class="etched" type="(raised|lowered)" highlight="(color_name)" shadow="(color_name)" name class="titled" text="title text" border="(border_name)" color="(color_name") font="(font_name)" title_justification="(leading|left|center|right|trailing|default)" title_position="(top|left|center|bottom|right|above_bottom| below_bottom|above_top|below_top|default)" name class="line_titled" color="(color_name") font="(font_name)" left=(int) bottom=(int) right=(int) name class="compound" outer="(border_name)" inner="(border_name)"
Empty borders and Matte borders also have shorthand versions. They can simply be expressed as a string like so:
spacer_border "2,5,2,5" padding_border "2,5" // 2 pix on top and bottom, 5 on left and right green_thin "1,green"
More Examples
borders {
warning class="matte" color="logo_red.dark" size=2
spacer class="empty" left=2 right=2
warning_with_spacer class="compound" outer="warning" inner="spacer"
blue_thick "3,blue" // uses shorthand border notation
toolbar_button_line class="button" margin="2" {
normal class="thin_bevel" type="raised" adjuster=.35
rollover class="thin_bevel" type="raised" adjuster=.5
pressed class="thin_bevel" type="lowered"
}
}
Styles
Styles can be applied to a component with the "styles" pseudo property
within an SDL/Swing component definition like so:
button "Hello" style="garish"
In the styles.sdl file the "garish" style is defined like so:
button { // all button styles go here
garish foreground="red" font="large" // Note: "red" must be defined in
// paints.sdl and "large" in style_parts.sdl
}
Multiple styles can be applied to a single component like so:
label "Warning!" style="garish,warning"
In addition to styles specific to particular component types, generic styles can be defined under the tag "any" like so:
any { // all button styles go here
garish foreground="red" font="large"
}
Example styles.sdl
button {
red background="red.dark" border="button_default"
green background="green" border="thin_dark_green"
}
label font="default" { // applies "default" to all labels
menu_label foreground="very_dark_gray" border="0,10,0,0" font="default_bold"
value_label halign="right" foreground="black"
}
any {
alarm foreground="150,0,0"
}