CSS & Eclipse 4 Application...
Transcript of CSS & Eclipse 4 Application...
![Page 1: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/1.jpg)
Copyright 2012 Manumitting Technologies
CSS & Eclipse 4 Application PlatformBrian de AlwisManumitting [email protected]
1
Tuesday, 27 March, 12
![Page 2: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/2.jpg)
2
Tuesday, 27 March, 12
![Page 3: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/3.jpg)
Copyright 2012 Manumitting Technologies
Eclipse 4 goal:make writing plugins easy
3
Tuesday, 27 March, 12
![Page 4: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/4.jpg)
Copyright 2012 Manumitting Technologies
Eclipse 4 goal:make writing plugins easy
Allow better control over the look of Eclipse-based products
3
Tuesday, 27 March, 12
![Page 5: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/5.jpg)
Copyright 2012 Manumitting Technologies
Eclipse 4 goal:make writing plugins easy
Allow better control over the look of Eclipse-based products
Let those who can, do
3
Tuesday, 27 March, 12
![Page 6: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/6.jpg)
4
Tuesday, 27 March, 12
![Page 7: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/7.jpg)
5
Tuesday, 27 March, 12
![Page 8: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/8.jpg)
5
Tuesday, 27 March, 12
![Page 9: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/9.jpg)
5
CSSTuesday, 27 March, 12
![Page 10: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/10.jpg)
6
html
body
h1
div
p p
div
em
imgp
HTMLTuesday, 27 March, 12
![Page 11: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/11.jpg)
6
html
body
h1
div
p p
div
em
imgp
HTML
Shell
Composite
Group
Composite
Text Combo
Composite
Table
TreeLabel
SWTTuesday, 27 March, 12
![Page 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/12.jpg)
7
Tuesday, 27 March, 12
![Page 13: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/13.jpg)
8
Tuesday, 27 March, 12
![Page 14: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/14.jpg)
Jon Dearden’s winning entry for the EclipseCon e4 Rover Competition (2010)
9
Tuesday, 27 March, 12
![Page 15: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/15.jpg)
CSS on SWT
10
Tuesday, 27 March, 12
![Page 16: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/16.jpg)
CSS Rules
11
h1 { color: red; }
selector property value
Tuesday, 27 March, 12
![Page 17: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/17.jpg)
CSS Rules
11
h1
Selectors
Tuesday, 27 March, 12
![Page 18: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/18.jpg)
CSS Rules
11
h1
h1.class
Selectors
Tuesday, 27 March, 12
![Page 19: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/19.jpg)
CSS Rules
11
h1
h1.class
h1#id
Selectors
Tuesday, 27 March, 12
![Page 20: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/20.jpg)
CSS Rules
11
h1
h1.class
h1#id
instanceof
==
getClass() == h1
Selectors
Tuesday, 27 March, 12
![Page 21: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/21.jpg)
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
Tuesday, 27 March, 12
![Page 22: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/22.jpg)
CSS Selectors for SWT
13
CompositeShell.MTrimmedWindow
CTabFolder.EditorStack
Group
CTabItem.Editor
Text Combo
CTabItem.Editor
Table#serverList
TableText
Composite#f1 Composite#f2
Composite.MArea
Tuesday, 27 March, 12
![Page 23: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/23.jpg)
CSS Selectors for SWT
14
Composite
Composite.MArea
Shell.MTrimmedWindow
CTabFolder.EditorStack
Group
CTabItem.Editor
Text Combo
CTabItem.Editor
Table#serverList
TableText
Composite#f1 Composite#f2
Composite.MArea
Tuesday, 27 March, 12
![Page 24: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/24.jpg)
CSS Selectors for SWT
15
Composite
Composite#f2
Shell.MTrimmedWindow
CTabFolder.EditorStack
Group
CTabItem.Editor
Text Combo
CTabItem.Editor
Table#serverList
TableText
Composite#f1 Composite#f2
Composite.MArea
Composite.MArea
Tuesday, 27 March, 12
![Page 25: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/25.jpg)
Compound Selectors
16
Shell.MTrimmedWindow
CTabFolder.EditorStack
Group
CTabItem
Text Combo
CTabItem
Text
TreeLabel
Text
Tuesday, 27 March, 12
![Page 26: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/26.jpg)
Child Selectors
17
Shell.MTrimmedWindow
CTabFolder.EditorStack
Group
CTabItem
Text Combo
CTabItem
Text
TreeLabel
.MTrimmedWindow > Text
Text
Tuesday, 27 March, 12
![Page 27: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/27.jpg)
Descendant Selectors
18
.MTrimmedWindow Text
Shell.MTrimmedWindow
CTabFolder.EditorStack
Group
CTabItem
Text Combo
CTabItem
Text
TreeLabel
Text
Tuesday, 27 March, 12
![Page 28: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/28.jpg)
Descendant Selectors
18
.MTrimmedWindow Text
Shell.MTrimmedWindow
CTabFolder.EditorStack
Group
CTabItem
Text Combo
CTabItem
Text
TreeLabel
Text
Shell
Text
Tuesday, 27 March, 12
![Page 29: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/29.jpg)
Attribute Selectors
19
Button[style~=‘SWT.CHECK’]
Widget.class Widget[class~=‘class’]~
=
~=
Exact value
Partial value
Tuesday, 27 March, 12
![Page 30: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/30.jpg)
Pseudo-elements and -classes
20
Text:focus { background: parchment; }
Shell:parented { background: red; }
What are these properties?
Tuesday, 27 March, 12
![Page 31: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/31.jpg)
Demo: CSS Spy& CSS Scratchpad
21
Tuesday, 27 March, 12
![Page 32: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/32.jpg)
Exposing InformationLeveraging the CSS for your own widgets
22
Tuesday, 27 March, 12
![Page 33: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/33.jpg)
Copyright 2012 Manumitting Technologies
Extend in 3 easy steps
Identify your widgets
Define matching DOM elements where necessary
Add custom properties
23
Tuesday, 27 March, 12
![Page 34: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/34.jpg)
Copyright 2012 Manumitting Technologies
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
Tuesday, 27 March, 12
![Page 35: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/35.jpg)
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; }
Tuesday, 27 March, 12
![Page 36: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/36.jpg)
Widgets ⇔ DOM Elements
26
ElementAdapter
ControlElement
ItemElement CompositeElement
CTabItemElement ShellElement
Defines:
Local + package name
Provides:
Attributes
Pseudo elements
Tuesday, 27 March, 12
![Page 37: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/37.jpg)
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>
Tuesday, 27 March, 12
![Page 38: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/38.jpg)
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>
Tuesday, 27 March, 12
![Page 39: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/39.jpg)
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 ...; } }
Tuesday, 27 March, 12
![Page 40: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/40.jpg)
Pitfalls
30
Tuesday, 27 March, 12
![Page 41: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/41.jpg)
31SWT.INHERIT_NONE
Composite.getBackgroundMode()
Tuesday, 27 March, 12
![Page 42: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/42.jpg)
32
Composite.getBackgroundMode()
SWT.INHERIT_DEFAULTTuesday, 27 March, 12
![Page 43: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/43.jpg)
33
Using parent’s background
Tuesday, 27 March, 12
![Page 44: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/44.jpg)
34
Text { color: grey; background-color: black; }Composite > Text { color: silver; }Text.error { color: red; }Text.warning { color: orange; }
Which rule wins?
Tuesday, 27 March, 12
![Page 45: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/45.jpg)
34
Text { color: grey; background-color: black; }Composite > Text { color: silver; }Text.error { color: red; }Text.warning { color: orange; }
Which rule wins?
Specificity Cascades
Tuesday, 27 March, 12
![Page 46: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/46.jpg)
Copyright 2012 Manumitting Technologies
CSS Differences: HTML vs SWT
SWT.BORDER vs “border” property
“border” is emulated
Gradients
Background mode vs gradients & images
35
Tuesday, 27 March, 12
![Page 47: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/47.jpg)
Copyright 2012 Manumitting Technologies
CSS & JFace
How to use CSS for setting fonts and colours for label providers?
36
Tuesday, 27 March, 12
![Page 48: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/48.jpg)
Building Your Own Engine
37
Tuesday, 27 March, 12
![Page 49: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/49.jpg)
Best Practices
38
Tuesday, 27 March, 12
![Page 50: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/50.jpg)
Copyright 2012 Manumitting Technologies
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
Tuesday, 27 March, 12
![Page 51: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/51.jpg)
Scoping
40
Text { color: ‘white’; background-color: ‘black’; }
Tuesday, 27 March, 12
![Page 52: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/52.jpg)
Scoping
40
Text { color: ‘white’; background-color: ‘black’; }
Affects Text instances everywhere.Including startup dialogs.
Tuesday, 27 March, 12
![Page 53: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/53.jpg)
Scoping
40
Text { color: ‘white’; background-color: ‘black’; }
.MTrimmedWindow Text,
.MWindow Text { color: ‘white’; background-color: ‘black’;}
Tuesday, 27 March, 12
![Page 54: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/54.jpg)
Use classes, not types
41
Tuesday, 27 March, 12
![Page 55: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/55.jpg)
Copyright 2012 Manumitting Technologies
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
Tuesday, 27 March, 12
![Page 56: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/56.jpg)
Copyright 2012 Manumitting Technologies
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
Tuesday, 27 March, 12
![Page 57: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/57.jpg)
Copyright 2012 Manumitting Technologies
Future work (M7 and beyond)
44
CSS Box model + floats — stop embedding layouts?
Text transforms
Inheritance on type field?
Tuesday, 27 March, 12
![Page 58: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/58.jpg)
Copyright 2012 Manumitting Technologies
Resources
E4 docs: http://wiki.eclipse.org/Eclipse4/RCP
e4 forum and mailing list
45
Tuesday, 27 March, 12
![Page 59: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/59.jpg)
Copyright 2012 Manumitting Technologies
Thank you!
Angelo Zerr — original implementation
Bogdan Georghe
46
Tuesday, 27 March, 12
![Page 60: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/60.jpg)
Pre-emptive Questions
47
Tuesday, 27 March, 12
![Page 61: 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](https://reader033.fdocuments.in/reader033/viewer/2022042109/5ed5ca5feb276748f73e8137/html5/thumbnails/61.jpg)
How does this work with the SWT Browser widget?
48
?Tuesday, 27 March, 12