2012 EclipseCon CSS PDF

CSS & Eclipse 4 Application
Platform
Brian de Alwis
Manumitting Technologies
bsd@mt.ca
Copyright 2012 Manumitting Technologies

Tuesday, 27 March, 12
2
Eclipse 4 goal:
make writing plugins easy

Eclipse 4 goal:
Allow better control over the look of
Eclipse-based products

Eclipse 4 goal:
Allow better control over the look of
Eclipse-based products
Let those who can, do

4
5
5
CSS
5
html
body
div
div
h1 p p img p
em
HTML
6
html
Shell
body
Composite
div
div
Composite
Composite
h1 p p img p
Group Text Label Tree Combo
em
Table
HTML
SWT
6
7
8
Jon Deardens winning entry for the

EclipseCon e4 Rover Competition (2010)
9
CSS on SWT
10
CSS Rules
h1
{ color: red; }
selector property value
11
CSS Rules Selectors

h1
11
CSS Rules Selectors

h1
h1.class
11
CSS Rules Selectors

h1
h1.class
h1#id
11
CSS Rules Selectors

h1
h1.class
h1#id
getClass() == h1
instanceof
==
11
CSS Selectors for SWT

Shell.MTrimmedWindow
Composite.MArea
CTabFolder.EditorStack
CTabItem.Editor CTabItem.Editor
Composite#f1
Group Text
Table#serverList
Composite#f2
Text Table Combo
12

Composite
Composite.MArea
Composite#f1
Group Text
Table#serverList
Composite#f2
Text Table Combo
13

Composite
Composite.MArea
Composite.MArea
Composite#f1
Group Text
Table#serverList
Composite#f2
Text Table Combo
14

Composite
Composite.MArea
Composite.MArea
Composite#f2
Composite#f1
Group Text
Table#serverList
Composite#f2
Text Table Combo
15
Compound Selectors
Text
CTabItem
CTabItem

Text
16
Child Selectors
.MTrimmedWindow > Text
Text
CTabItem
CTabItem

Text
17
Descendant Selectors
.MTrimmedWindow Text
Text
CTabItem
CTabItem

Text
18
Descendant Selectors
.MTrimmedWindow Text
Shell
Text
Text
CTabItem
CTabItem

Text
18
Attribute Selectors
Button[style~=SWT.CHECK]
Widget.class
Exact value
~=
Partial value
Widget[class~=class]
19
Pseudo-elements and classes

Text:focus { background: parchment; }
Shell:parented { background: red; }
What are these properties?

20
Demo: CSS Spy

& CSS Scratchpad
21
Exposing Information
Leveraging the CSS for your own widgets
22
Extend in 3 easy steps
Identify your widgets

Define matching DOM elements where necessary
Add custom properties

23
Identifying Widgets
E4 exposes SWT widgets too: type#id.class
type corresponds to the widget class
#id matches an object's elementId 'id' (with '.'
translated to '-')
.class matches against the modelled element type, any
tags on the modelled element, style bits, and widget
data key-value items

24
Aside: Assigning Class & Id

import org.eclipse.e4.ui.css.swt.dom.WidgetElement;
WidgetElement.setCSSClass(
widget, class string);
.error { border: 1px red; }

WidgetElement.setID(widget, id);
#cssSource { font: Courier; }

WidgetElement.getEngine(widget)
.applyStyles(widget, true);
25
Widgets
Defines:
Local + package
name
Provides:
Attributes
DOM Elements
ElementAdapter
ControlElement
ItemElement
CTabItemElement
CompositeElement
ShellElement
Pseudo elements
26
<extension point="org.eclipse.e4.ui.css.core.elementProvider">
<provider
class="org.eclipse.e4.ui.css.swt.dom.SWTElementProvider">
<widget class="org.eclipse.swt.widgets.Control" />
<widget class="org.eclipse.swt.widgets.Composite" />
<widget class="org.eclipse.swt.widgets.Button" />
</provider>
</extension>
27
Add custom properties

handlers
<extension
point="org.eclipse.e4.ui.css.property.handler">
<handler
adapter="org.eclipse.e4.ui.css.swt.dom.CTabFolderElement"
composite="false"
handler="o.e.e4.ui.css.swt.properties.custom.
CSSPropertyCornerRadiusSWTHandler">
<property-name name="swt-corner-radius"/>
<property-name name="corner-radius"
deprecated="renamed as swt-corner-radius"/>
</handler>
</extension>
28
public class XXXPropertyHandler implements

ICSSPropertyHandler {

public boolean applyCSSProperty(Object element,
String property, CSSValue value, String pseudo,
CSSEngine engine) throws Exception {
...
}

public String retrieveCSSProperty(Object widget,
String pseudo, CSSEngine engine) throws Exception {

return ...;

}
}
29
Pitfalls
30
Composite.getBackgroundMode()
SWT.INHERIT_NONE
31
Composite.getBackgroundMode()
SWT.INHERIT_DEFAULT
32
Using parents background
33
Text { color: grey; background-color: black; }

Composite > Text { color: silver; }
Text.error { color: red; }
Text.warning { color: orange; }
Which rule wins?
34
Text { color: grey; background-color: black; }

Composite > Text { color: silver; }
Text.error { color: red; }
Text.warning { color: orange; }
Which rule wins?
Specificity
Cascades
34
CSS Differences: HTML vs

SWT
SWT.BORDER vs border property
border is emulated
Gradients
Background mode vs gradients & images

35
CSS & JFace
How to use CSS for setting fonts and colours for label
providers?

36
Building Your Own Engine

37
Best Practices
38
Best practices
Identify rules for labeling/identifying structure
Scoping
SWT Quirks
background mode
background image & background colour
(Lack of) support for non-px dimensions

39
Scoping
Text {
color: white;
background-color: black;
}
40
Scoping
Text {
color: white;
}
Affects Text instances everywhere.
Including startup dialogs.
40
Scoping
.MTrimmedWindow Text,
.MWindow
Text { Text {
color:
color: white;
white;
background-color:
black;
}}
40
Use classes, not types
41
Use CSS Tools

SCSS/SASS (sass-lang.net)
CSS precompiler
CSS Lint (csslint.net)
Web Designers (e.g., OOCSS)
Learn from lessons of what to do and not to do

42
Be careful out there, kids
Many articles generated by non-developers promulgating

unsound techniques (e.g., classitis, avoiding
semantically-meaningful names!!!)
But these are the people who will be doing the styling

43
Future work (M7 and beyond)
CSS Box model + floats stop embedding layouts?

Text transforms
Inheritance on type field?

44
Resources
E4 docs: http://wiki.eclipse.org/Eclipse4/RCP
e4 forum and mailing list

45
Thank you!
Angelo Zerr original implementation

Bogdan Georghe

46
Pre-emptive Questions
47
How does this work with the

SWT Browser widget?
?
48

2012 EclipseCon CSS PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2012 EclipseCon CSS PDF

Uploaded by

Copyright:

Available Formats

CSS & Eclipse 4 Application

Copyright 2012 Manumitting Technologies

Copyright 2012 Manumitting Technologies

Copyright 2012 Manumitting Technologies

Copyright 2012 Manumitting Technologies

Group Text Label Tree Combo

Jon Deardens winning entry for the

selector property value

CSS Rules Selectors

CSS Rules Selectors

CSS Rules Selectors

CSS Rules Selectors

CSS Selectors for SWT

CSS Selectors for SWT

CSS Selectors for SWT

CSS Selectors for SWT

Group Text Label Tree Combo

Group Text Label Tree Combo

Group Text Label Tree Combo

Group Text Label Tree Combo

Pseudo-elements and classes

What are these properties?

Demo: CSS Spy

Extend in 3 easy steps

Identify your widgets

Copyright 2012 Manumitting Technologies

Copyright 2012 Manumitting Technologies

Aside: Assigning Class & Id

.error { border: 1px red; }

#cssSource { font: Courier; }

Add custom properties

public class XXXPropertyHandler implements

Using parents background

Text { color: grey; background-color: black; }

Which rule wins?

Text { color: grey; background-color: black; }

Which rule wins?

CSS Differences: HTML vs

Copyright 2012 Manumitting Technologies

CSS & JFace

Copyright 2012 Manumitting Technologies

Building Your Own Engine

Copyright 2012 Manumitting Technologies

Use classes, not types

Use CSS Tools

Copyright 2012 Manumitting Technologies

Be careful out there, kids

Many articles generated by non-developers promulgating

Copyright 2012 Manumitting Technologies

Future work (M7 and beyond)

CSS Box model + floats stop embedding layouts?

Copyright 2012 Manumitting Technologies

Copyright 2012 Manumitting Technologies

Angelo Zerr original implementation

Copyright 2012 Manumitting Technologies

How does this work with the

You might also like