E4/CSS/SWT Mapping
< E4 | CSS
Revision as of 11:30, 25 February 2014 by Pwebster.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.
Contents
Mapping of SWT method to CSS property
Widget: Control
| SWT Method | CSS Property Name | CSS Example |
|---|---|---|
| setBackground(Color) | background-color | Button { background-color: #FF0000 } |
| (vertical gradient) | background-color | Button { background-color: #FF0000 #00FF00 100% } |
| (horizontal gradient) | background-color | Button { background-color: #FF0000 #00FF00 100% false } |
| 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 | Label { font: italic 12 bold "Terminal"; } |
| font-style font-size |
Label { font-style: italic; font-size: 12; |
|
| setForeground(Color) | color | Button { color: #FF0000 } |
Widget: Button
| SWT Method | CSS Property Name | CSS Example |
|---|---|---|
| setAlignment(int) | swt-alignment | Label { swt-alignment: up; } /* if pushbutton mode */ |
Widget: Label
| SWT Method | CSS Property Name | CSS Example |
|---|---|---|
| setAlignment(int) | swt-alignment | Label { swt-alignment: center; } |
Widget: CTabFolder
| SWT Method | CSS Property Name | CSS Example |
|---|---|---|
| setBorderVisible(boolean) | border-visible | CTabFolder { border-visible: true } |
| setMaximized(boolean) | swt-maximized | CTabFolder { swt-maximized: true } |
| setMinimized(boolean) | swt-minimized | CTabFolder { swt-minimized: true } |
| setMaximizeVisible(boolean) | swt-maximize-visible | CTabFolder { swt-maximize-visible: true } |
| setMinimizeVisible(boolean) | swt-minimize-visible | CTabFolder {swt- minimize-visible: true } |
| setMRUVisible(boolean) | swt-mru-visible | CTabFolder { swt-mru-visible: true } |
| setSimple(boolean) | swt-simple | CTabFolder { swt-simple: true } |
| setSingle(boolean) | swt-single | CTabFolder { swt-single: true } |
| setUnselectedCloseVisible(boolean) | swt-unselected-close-visible | CTabFolder { swt-unselected-close-visible: true } |
| setUnselectedImageVisible(boolean) | swt-unselected-image-visible | CTabFolder { swt-unselected-image-visible: true } |
| setRenderer(CTabFolderRenderer) | swt-tab-renderer | CTabFolder { swt-tab-renderer: url('bundleclass://org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering'); } |
| setSelectionBackground(Color[],int[]) | swt-selected-tabs-background | CTabFolder { swt-selected-tabs-background: #FF0000 #FFFFFF 100%; } |
| setBackground(Color[],int[]) | swt-unselected-tabs-color | CTabFolder { swt-unselected-tabs-color: #FF0000 #FFFFFF 100%; } |
| setTabHeight(int) | swt-tab-height | CTabFolder { swt-tab-height: 10px; } |
Widget: CTabItem
| SWT Method | CSS Property Name | CSS Example |
|---|---|---|
| setShowClose(boolean) | swt-show-close | CTabItem { swt-show-close: true } |
Widget: CTabFolder with e4Renderer
Note: The following examples assume that you have first set the tab-renderer to use CTabRendering (see the tab-renderer CSS property in the CTabFolder table above)
| e4Renderer Method | CSS Property Name | CSS Example |
|---|---|---|
| setOuterKeyline(Color) | swt-outer-keyline-color | CTabFolder { swt-outer-keyline-color: #B6BCCC; } |
| setCornerRadius(int) | swt-corner-radius | CTabFolder { swt-corner-radius: 20; } |
| setShadowVisible(boolean) | swt-shadow-visible | CTabFolder { swt-shadow-visible: false; } |
| setShadowColor(Color) | swt-shadow-color | CTabFolder { swt-shadow-color: #F79402; } |
| setSelectedTabFill(Color) | swt-selected-tab-fill | CTabFolder { swt-selected-tab-fill: #F79402; } |
| setTabOutline(Color) | swt-tab-outline | CTabFolder { swt-tab-outline: #F79402; } |
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