Jump to: navigation, search

E4/CSS/SWT Mapping

< E4‎ | CSS
Revision as of 14:22, 4 November 2010 by Gheorghe.ca.ibm.com (Talk | contribs) (Widget: CTabFolder with e4Renderer)

Many SWT property setting methods can be accessed via CSS. These tables show the equivalent mapping from SWT method to CSS property. They also show pseudo selectors which can be used to choose styling based on widget state.

Mapping of SWT method to CSS property

Widget: Control

SWT Method CSS Property Name CSS Example
setBackground(Color) background-color Button { background-color: #FF0000 }
setBackgroundImage(Image) background-image Button { background-image: some url }
border-color Button { border-color: #FF0000; }
border-width Button { border-width: 3 }
border-style Button { border-style: dotted }
setCursor(Cursor) cursor Shell { cursor:crosshair }
setFont(Font) font-style


Label { font-style: italic;

          font-size: 12;
          font-weight: bold;

          font-family: "Terminal"; }
setForeground(Color) color Button { color: #FF0000 }

Widget: Button

SWT Method CSS Property Name CSS Example
setAlignment(int) alignment Label { alignment: up; } /* if pushbutton mode */

Widget: Label

SWT Method CSS Property Name CSS Example
setAlignment(int) alignment Label { alignment: center; }

Widget: CTabFolder

SWT Method CSS Property Name CSS Example
setBorderVisible(boolean) border-visible CTabFolder { border-visible: true }
setMaximized(boolean) maximized CTabFolder { maximized: true }
setMinimized(boolean) minimized CTabFolder { minimized: true }
setMaximizeVisible(boolean) maximize-visible CTabFolder { maximize-visible: true }
setMinimizeVisible(boolean) minimize-visible CTabFolder { minimize-visible: true }
setMRUVisible(boolean) mru-visible CTabFolder { mru-visible: true }
setShowClose(boolean) show-close CTabFolder { show-close: true }
setSimple(boolean) simple CTabFolder { simple: true }
setSingle(boolean) single CTabFolder { single: true }
setUnselectedCloseVisible(boolean) unselected-close-visible CTabFolder { unselected-close-visible: true }
setUnselectedImageVisible(boolean) unselected-image-visible CTabFolder { unselected-image-visible: true }
setRenderer(CTabFolderRenderer) tab-renderer CTabFolder { tab-renderer: url('platform:/plugin/org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering'); }

Widget: CTabItem

SWT Method CSS Property Name CSS Example
setShowClose(boolean) show-close CTabItem { show-close: true }

Widget: CTabFolder with e4Renderer

e4Renderer Method CSS Property Name CSS Example
setOuterKeyline(Color) outer-keyline-color CTabFolder {
tab-renderer: url('platform:/plugin/org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering');
outer-keyline-color: #B6BCCC; }
setCornerRadius(int) corner-radius CTabFolder {
tab-renderer: url('platform:/plugin/org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering');
corner-radius: 20; }

Pseudo classes which can be used in CSS to style SWT widgets

SWT Widgets CSS Pseudo Selector CSS Example
Control :focus CTabFolder:focus { background-color: #FF0000; }
Control :visible † Shell:visible { background-color: #FF0000; }
Control :enabled † Text:enabled { background-color: #FF0000; }
Control :disabled † Text:disabled { background-color: #FF0000; }
Shell :active Shell:active { background-color: #FF0000; }
Button :checked Button:checked { background-color: #FF0000; }
CTabFolder :selected CTabFolder:selected { background-color: #FF0000; }
CTabItem :selected CTabItem:selected { font-weight: bold; }

† As of yet styles are only applied when SWT UI is initially loaded, if widget state is changed afterwards, changes will not take effect