full css styling for swt and eclipse · full css styling for swt and eclipse aleksandar kurtakov...

FULL CSS STYLING FOR SWT ANDECLIPSE

ALEKSANDAR KURTAKOV

EclipseCon Europe 2016

WHO AM I

Linux distro guy, who happens to work full day on improving Eclipse IDESWT, Platform UI, CDT, Linux Tools, DLTK, CBI committerRed Hat's Desktop Eclipse IDE team Tech Lead

PLAN

Problem introductionStyling options in pure SWTStyling options with E4 Theming engine enabledHow styling used to workHow styling works nowHidden styling options (GTK)API GoalDemos

Application wide stylingPer widget styling

WHAT IS STYLING

Colors - background, foreground...Fonts - size, bold, italic, striketrough, underline....SizesPadding, margins....States - hover, active...Animations, transitions...Every other visual aspect

PURE SWT STYLING

Colors - Control.setForeground/Background(Color)Fonts - Control.setFont(Font), TextStyle.underline/strikeoutSizes - Control.setSizePadding, margins.... - GridLayout (for margins), various alignment setters tomimic padding but not the sameStates - *Listener - Mouse, MouseMove, Focus, PaintAnimations, transitions...- ^^^Every other visual aspect

E4 THEMING STYLING

Colors - (*-)color: #..Fonts - font-style|weight|familySizes - swt-*-height|widthPadding, margins.... - padding-*; margin-*;States - *Listener - Mouse, MouseMove, Focus, PaintAnimations, transitions...- ^^^Every other visual aspect

HOW IT USED TO WORK

Control.setBackground(Color)

gtk_widget_override_color(...)

* ON GTK BUT SIMILAR ON OTHER WS

HOW IT WORKS NOWTheme engine CSS instructions

Control.setBackground(Color)

* ON GTK BUT SIMILAR ON OTHER WS

SWT generates GTK CSS

gtk_css_provider_load_from_css

HOW IT WORKS NOWTheme engine CSS instructions

Control.setBackground(Color)

* ON GTK BUT SIMILAR ON OTHER WS

SWT generates GTK CSS

gtk_css_provider_load_from_css

HIDDEN STYLING (GTK)FULL APP STYLING

JVM Arg: -Dorg.eclipse.swt.internal.gtk.cssFile=/home/akurtakov/gtk.css

button:hover { box-shadow: inset 0 0 0 5px #0000ff;}button:focus { border: 2px solid; border-color: #ff0000; border-radius: 50%;}label { text-decoration: underline;}

HIDDEN STYLING (GTK)PER WIDGET STYLING

Button.setData("org.eclipse.swt.internal.gtk.css", "button:hover { box-shadow: inset 0 0 0 5px #0000ff; }");

Label.setData("org.eclipse.swt.internal.gtk.css", "label { text-decoration: underline; }");

API GOALWIDGET STYLING

Widget(Control?).setStyle(String cssStyle);Display.[add|remove]StyleClass(String cssClass);Widget.[add|remove]StyleClass(String cssClassName);

DEMOS

Q & A

twitter.com/RedHatNews

youtube.com/redhat

facebook.com/redhatinc

THANK YOU!

plus.google.com/+RedHat

linkedin.com/company/red-hat