FULL CSS STYLING FOR SWT AND ECLIPSE · full css styling for swt and eclipse aleksandar kurtakov...
Transcript of 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