CSS & Eclipse 4 Application Platformmanumitting.com/resources/presentations/2012-EclipseCon-CSS.pdf · E4 exposes SWT widgets too: type#id.class type corresponds to the widget class

Copyright 2012 Manumitting Technologies

CSS & Eclipse 4 Application PlatformBrian de AlwisManumitting [email protected]

1

Tuesday, 27 March, 12

2



Eclipse 4 goal:make writing plugins easy

3




Allow better control over the look of Eclipse-based products

3




Allow better control over the look of Eclipse-based products

Let those who can, do

3


4


5


5


5

CSSTuesday, 27 March, 12

6

html

body

h1

div

p p

div

em

imgp

HTMLTuesday, 27 March, 12

6

html

body

h1

div

p p

div

em

imgp

HTML

Shell

Composite

Group

Composite

Text Combo

Composite

Table

TreeLabel

SWTTuesday, 27 March, 12

7


8


Jon Dearden’s winning entry for the EclipseCon e4 Rover Competition (2010)

9


CSS on SWT

10


CSS Rules

11

h1 { color: red; }

selector property value


CSS Rules

11

h1

Selectors


CSS Rules

11

h1

h1.class

Selectors


CSS Rules

11

h1

h1.class

h1#id

Selectors


CSS Rules

11

h1

h1.class

h1#id

instanceof

==

getClass() == h1

Selectors


CSS Selectors for SWT

12

Shell.MTrimmedWindow

CTabFolder.EditorStack

Group

CTabItem.Editor

Text Combo

CTabItem.Editor

Table#serverList

TableText

Composite#f1 Composite#f2

Composite.MArea



13

CompositeShell.MTrimmedWindow


Group

CTabItem.Editor

Text Combo

CTabItem.Editor

Table#serverList

TableText


Composite.MArea



14

Composite

Composite.MArea



Group

CTabItem.Editor

Text Combo

CTabItem.Editor

Table#serverList

TableText


Composite.MArea



15

Composite

Composite#f2



Group

CTabItem.Editor

Text Combo

CTabItem.Editor

Table#serverList

TableText


Composite.MArea

Composite.MArea


Compound Selectors

16



Group

CTabItem

Text Combo

CTabItem

Text

TreeLabel

Text


Child Selectors

17



Group

CTabItem

Text Combo

CTabItem

Text

TreeLabel

.MTrimmedWindow > Text

Text


Descendant Selectors

18

.MTrimmedWindow Text



Group

CTabItem

Text Combo

CTabItem

Text

TreeLabel

Text


Descendant Selectors

18

.MTrimmedWindow Text



Group

CTabItem

Text Combo

CTabItem

Text

TreeLabel

Text

Shell

Text


Attribute Selectors

19

Button[style~=‘SWT.CHECK’]

Widget.class Widget[class~=‘class’]~

=

~=

Exact value

Partial value


Pseudo-elements and -classes

20

Text:focus { background: parchment; }

Shell:parented { background: red; }

What are these properties?


Demo: CSS Spy& CSS Scratchpad

21


Exposing InformationLeveraging 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

25

import org.eclipse.e4.ui.css.swt.dom.WidgetElement;

WidgetElement.setCSSClass( widget, “class string”);

WidgetElement.setID(widget, “id”);

WidgetElement.getEngine(widget) .applyStyles(widget, true);

.error { border: 1px red; }

#cssSource { font: Courier; }


Widgets ⇔ DOM Elements

26

ElementAdapter

ControlElement

ItemElement CompositeElement

CTabItemElement ShellElement

Defines:

Local + package name

Provides:

Attributes

Pseudo elements


27

<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>


28

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>


29

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 ...; } }


Pitfalls

30


31SWT.INHERIT_NONE

Composite.getBackgroundMode()


32

Composite.getBackgroundMode()

SWT.INHERIT_DEFAULTTuesday, 27 March, 12

33

Using parent’s background


34

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



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

40

Text { color: ‘white’; background-color: ‘black’; }


Scoping

40


Affects Text instances everywhere.Including startup dialogs.


Scoping

40


.MTrimmedWindow Text,

.MWindow Text { color: ‘white’; background-color: ‘black’;}


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)

44

CSS Box model + floats — stop embedding layouts?

Text transforms

Inheritance on type field?



Resources

E4 docs: http://wiki.eclipse.org/Eclipse4/RCP

e4 forum and mailing list

45


http://wiki.eclipse.org/Eclipse4/RCP

http://wiki.eclipse.org/Eclipse4/RCP


Thank you!

Angelo Zerr — original implementation

Bogdan Georghe

46


Pre-emptive Questions

47


How does this work with the SWT Browser widget?

48

?Tuesday, 27 March, 12

CSS & Eclipse 4 Application Platformmanumitting.com/resources/presentations/2012-EclipseCon-CSS.pdf · E4 exposes SWT widgets too: type#id.class type corresponds to the widget class

Documents