CSS Styling
Tips for an RCP app
Created by Bogdan Gheorge / IBM Canada Created by Paul Webster / IBM Canada / @paulweb515
Introduction, who am I, etc.
Talk about Styling Engine.
Hack a little code. Creat a completely different look for eclipse.
What is the Styling Engine?
#org-eclipse-ui-editorss {
swt-tab-renderer : url('org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering' ) swt-unselected-tabs-color : #D6DDE5 #D6DDE5 #D6DDE5 100 % 100 % swt-outer-keyline-color : #D6DDE5 swt-inner-keyline-color : #D6DDE5 swt-tab-outline : #D6DDE5 color : #D6DDE5 swt-tab-height : 8 px padding : 0 px 5 px 7 px }
Styling engine is the cornerstone.
Allows users to control the look of the UI based on selectors and prop values.
Selectors specify which widgets to apply to
prop values what you want styled in the widgets
We want a simpler mechanism to control the look and feel of an eclipse application.
Make it easy to switch around the look of the app without writing a lot of code.
Also mention: Although our implementation targets SWT widgets, the core
engine is headless and could be adapted.
Anatomy of a Styling Engine
- Engine is created
- it's handed a stylesheet to parse
- engine creates the CSSParse, ours is apache batik, and parses the style sheet
- follows any import refs
- it hands back a bunch of CSSRules (CSSStyleRules) to the CSS Egnine
- each rule reps one style block.
- each rule can have one or more selectors, and one or more properties
- the CSS engine then gets all of the shells from the display
- it applyeStyles(Shell) on each one, that's where the work is done
- example: All composites have 10px and background: red
- once the style decoration is calculated with all of the properties,
the property handlers are called.
- property handlers know which SWT methods to call
Styling Selectors
SWT widget type {Shell, Button, Table}
Class name {.topShell, .leftTrim, .active}
ID name {#PerspectiveSwitcher}
Model name {.MPartStack, .MTrimBar}
- CSS allows you to select elements by type, class, or ID.
- For type, the CSS Engine figures out the rules based on the SWT Type.
- - you can style all instances of Shell
- You can set one or more class names on a widget.
- You can also set an ID, which must be unique.
- in addition, in the Eclipse4 world the SWT part renderer sets the model type
and any tags as class names on the SWT widget
- You can use the classnames in your style sheet to target groups of SWT Widgets
- but why use class names instead of a type to style widgets?
CSS Cascade
- Because of the CSS cascade
- The concept of the cascade is important to the way styles are determined in CSS
- Styles are allowed to cascade down to an element from multiple sources.
including xternal style sheets, inline style blocks, and element style declarations
- the cascade applies to the CSS Engine as well but it's a bit simplified since
all styles are specified in Style sheet the CSS engine itself has the capability
to apply inline styles but that API is not exposeed in the styling engine since
we were able to achieve our styling goals by just using style sheets.
- If you are writing style sheets for many different platforms you can take advantage
of the cascade to group all of the common properties in one file, group all of the
platform specific properties in another file, and include the common file in the platform
specific file.
- This is what we do in the platform, with our e4_base CSS stylesheet that's then included
in most of the other CSS style sheets.
- The CSS engine follows the CSS concept of specificity, which is used to determine
which selector will get chosen in the case of multiple selectors that apply to one element.
Specificity
Every element has a value of 1
Every class has a value of 10
Every id has a value of 100
Add them up for the specificity value
In case of a clash, higher specificty value wins
- Specificity determines which CSS rules are applied by the styling engine
- each selector has a place in the specificity hierarchy
- if 2 selectors are applied to the same element, the one with the higher specificity wins
- Note: all properties that are only in one rule will get applied. Specificity is a way
to deal with properties that clash between the 2 rules.
Property Handlers: Control
SWT Method
CSS Property Name
CSS Example
setBackground(Color)
background-color
Button { background-color: #FF0000 }
(vertical gradient)
background-color
Button { background-color: #FF0000 #00FF00 100% }
(horizontal gradient)
background-color
Button { background-color: #FF0000 #00FF00 100% false }
setBackgroundImage(Image)
background-image
Button { background-image: some url }
- Once you have the widget you want to style you need to be able to do something with it
- That's where property handlers come in
- Property handlers are a piece of code when it's time to map the CSS property to
the actual SWT call that will set the property on the widget
- Examples of CSS properties to SWT calls is available on our wiki
- Here are some examples for a Control
- These can be called on any instanceof Control.
Property Handlers: CTabFolder
SWT Method
CSS Property Name
CSS Example
setMaximized(boolean)
swt-maximized
CTabFolder { swt-maximized: true }
setMinimized(boolean)
swt-minimized
CTabFolder { swt-minimized: true }
setMaximizeVisible(boolean)
swt-maximize-visible
CTabFolder { swt-maximize-visible: true }
setMinimizeVisible(boolean)
swt-minimize-visible
CTabFolder { swt-minimize-visible: true }
setMRUVisible(boolean)
swt-mru-visible
CTabFolder { swt-mru-visible: true }
setSimple(boolean)
swt-simple
CTabFolder { swt-simple: true }
setSingle(boolean)
swt-single
CTabFolder { swt-single: true }
- CTabFolder has the most property handlers, to support SWT specific styling properties.
Where is the Code?
- If you want to take a look at the CSS Engine code, our CSS support comes from these 3 plugins.
Themes for your Application
Eclipse default themes are in org.eclipse.ui.themes plugin.
Themes are the way to organize style sheets for your application.
Themes are added using org.eclipse.e4.ui.css.swt.theme extension point.
<theme
basestylesheeturi ="css/e4_classic_winxp.css"
id ="org.eclipse.e4.ui.css.theme.e4_classic"
label ="%theme.classic" />
Theme properties have to be added to the product definition:
<property
name ="cssTheme"
value ="org.eclipse.e4.ui.css.theme.e4_default" />
<property
name ="applicationCSSResources"
value ="platform:/plugin/org.eclipse.ui.themes/images/" />
- This lists the default theme
- applicationCSSResources tells the engine where to go look for resource files, like images references in the style sheet
- when defining the theme itself, you need to define the label, ID, and base style URI
- there are 3 optionals properties.
- there's also OS, OS version, and WS (windowing system)
- if these extra properties are not there, then the engine assumes the theme is valid for the current platform
- you can have the same ID for multiple themes as long as they are differentiated by these 3 properties
- we use this to provide an OS specific default theme to the platform product we ship
- you can only provide one base URI in a theme, but that doesn't mean you can't use multiple style sheets in your theme
- import them at the beginning of your base style sheet
Create a Theme - Step 1
Create a new Eclipse Plugin Project
Generate an Activator
No to 3.x rich client application
- I'd like to emphasise how easy it is to create your own custom theme in 3 steps
- create a new eclipse plugin project
Create a Theme - Step 2
Create a folder
Write a stylesheet
.infoHeader {
background-color : #E2E2E2 ;
}
#org -eclipse -e4 -examples -css -rcp -mail -view Composite {
background-color : #FAEBD7 ;
}
#org -eclipse -e4 -examples -css -rcp -mail -navigationView Tree {
background-color : '#org-eclipse-e4-examples-css-rcp-mail-honeyDew' ;
}
- your theme can be as simple or involved as you wish
Create a Theme - Step 3
Configure the plugin project
Fill out the extension point
<extension
point ="org.eclipse.e4.ui.css.swt.theme" >
<theme
basestylesheeturi ="css/rcp_mail.css"
id ="org.eclipse.e4.examples.css.rcp.mail"
label ="RCP Mail CSS" />
</extension >
Fill out product properties
<property
name ="cssTheme"
value ="org.eclipse.e4.examples.css.rcp.mail" />
<property
name ="applicationCSSResources"
value ="platform:/plugin/org.eclipse.ui.themes/images/" />
- This makes it available in the prefs page
- note the quickest reset is to open a new window and close the old, but this only
works well if you don't care about your perspectives or have saved custom perspectives
that you can easily re-open.
Some things that can be themed
Workbench elements through the CSS
.MTrimmedWindow, .MTrimBar, .MPartStack, .MPart {
}
.MPartStack.active, .MPart.highlighted, .MPart.busy {
}
.MTrimBar#org -eclipse -ui -main -toolbar ,
#org -eclipse -e4 -examples -css -rcp -mail -navigationView {
}Specific widgets
control.setData (CSSSWTConstants.CSS _CLASS_NAME_KEY, "infoHeader" )
- a small sampling of structures in the workbench that can be themed.
Native OS Colors
Can be found as constants in the org.eclipse.swt.SWT class.
SWT Color Constant
Description
COLOR-WIDGET-DARK-SHADOW System color used to paint dark shadow areas (value is 17). COLOR-WIDGET-NORMAL-SHADOW System color used to paint normal shadow areas (value is 18). COLOR-WIDGET-LIGHT-SHADOW System color used to paint light shadow areas (value is 19). COLOR-WIDGET-HIGHLIGHT-SHADOW System color used to paint highlight shadow areas (value is 20). COLOR-WIDGET-FOREGROUND System color used to paint foreground areas (value is 21). COLOR-WIDGET-BACKGROUND System color used to paint background areas (value is 22). COLOR-WIDGET-BORDER System color used to paint border areas (value is 23). COLOR-LIST-FOREGROUND System color used to paint list foreground areas (value is 24).
- SWT provides access to some native system colors
- these are colors that often change when the OS theme changes
- if you base your CSS on these constants, you can be in sync with the OS
- you refer to these constants by name as IDs
CSS vs 3.x Themes
- 3.x themes are complimentary.
- allow you to style editor contents, decorators, foregrounds and backgrounds in a number of things
content assist, and all of the 3.x swished tab coloring
- Also the java editor, text editor, and other editor coloring options
- some can also be styled in the CSS engine, but things like the java editor can't be styled by CSS
Roger's Themes
http://eclipsecolorthemes.org/
- He has lots of 3.x color themes, available for download
- When Juno came out he created a dark theme, called Dark Juno.
- potentially get a hold of the theme and show a pic
- it's possible to combine this theme with some of the other themes on the eclipsecolorthemes site
- show pick with open java editor.
Roger's Themes
- Roger Dudler is well known in the eclipse community.
- He has lots of 3.x color themes
CSS with 3.x Themes
https://wiki.eclipse.org/Eclipse4/CSS/Bridge
.MPartStack .active .noFocus {
swt-selected-tab-fill : '#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_START'
'#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_END' 100 % 100 % font-family : '#org-eclipse-ui-workbench-TAB_TEXT_FONT' }
CSS Tools
E4 CSS Spy (Incubation)
Specificity Calculator
E4 Orion CSS Preference editor (Incubation)
- Some tools that can help working on eclipse in the SDK
- The Inspector or CSS Spy, contributed by Brian de Alwis, is very handy
- We're working on a feature where the Orion editor is used for CSS editing.
CSS Spy
Use ALT+SHIFT+F5 to activate it.
- CSS spy is a dialog with 3 panels, one that shows the widget hierarchy, one that shows
the CSS properties, and one that shows the CSS status of the widget (all of the rules applied)
CSS Spy
- CSS spy is a dialog with 3 panels, one that shows the widget hierarchy, one that shows
the CSS properties, and one that shows the CSS status of the widget (all of the rules applied)
CSS Scratchpad
Use ALT+SHIFT+F6 to activate it.
- Included with CSS Spy.
- Can be used to test out new CSS live
- open and click OK with no entries to put things back the way they were.
CSS Scratchpad
Specificity Calculator
http://specificity.keegan.st/
- There are online specificity calculators for hard core web developers
- They will tell you the exact order of different selectors based on their specificity
- A good one is at the address above.
CSS File Editor
Orion based editor
