Jump to: navigation, search

Difference between revisions of "E4/CSS/SWT Mapping"

< E4‎ | CSS
(Widget: CTabFolder with e4Renderer)
(Widget: CTabFolder)
(5 intermediate revisions by 4 users not shown)
Line 12: Line 12:
 
<td>background-color</td>
 
<td>background-color</td>
 
<td>Button { background-color: #FF0000 }</td>
 
<td>Button { background-color: #FF0000 }</td>
 +
</tr>
 +
<tr>
 +
<td>(vertical gradient)</td>
 +
<td>background-color</td>
 +
<td>Button { background-color: #FF0000 #00FF00 100% }</td>
 +
</tr>
 +
<tr>
 +
<td>(horizontal gradient)</td>
 +
<td>background-color</td>
 +
<td>Button { background-color: #FF0000 #00FF00 100% false }</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
Line 152: Line 162:
 
<tr>
 
<tr>
 
<td>setRenderer(CTabFolderRenderer)</td>
 
<td>setRenderer(CTabFolderRenderer)</td>
<td>tab-renderer</td>
+
<td>swt-tab-renderer</td>
<td>CTabFolder {  tab-renderer: url('platform:/plugin/org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering'); }</td>
+
<td>CTabFolder {  swt-tab-renderer: url('bundleclass://org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering'); }</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
Line 169: Line 179:
 
<td>setTabHeight(int)</td>
 
<td>setTabHeight(int)</td>
 
<td>tab-height</td>
 
<td>tab-height</td>
<td>CTabFolder {  tab-height: 10;  }</td>
+
<td>CTabFolder {  tab-height: 10px;  }</td>
 
</tr>
 
</tr>
 
</table>
 
</table>
Line 202: Line 212:
 
<tr>
 
<tr>
 
<td>setOuterKeyline(Color)</td>
 
<td>setOuterKeyline(Color)</td>
<td>outer-keyline-color</td>
+
<td>swt-outer-keyline-color</td>
 
<td>CTabFolder {     
 
<td>CTabFolder {     
outer-keyline-color: #B6BCCC; }</td>
+
swt-outer-keyline-color: #B6BCCC; }</td>
 
</tr>
 
</tr>
  
 
<tr>
 
<tr>
 
<td>setCornerRadius(int)</td>
 
<td>setCornerRadius(int)</td>
<td>corner-radius</td>
+
<td>swt-corner-radius</td>
 
<td>CTabFolder {     
 
<td>CTabFolder {     
corner-radius: 20; }</td>
+
swt-corner-radius: 20; }</td>
 
</tr>
 
</tr>
  
Line 219: Line 229:
 
<td>CTabFolder {     
 
<td>CTabFolder {     
 
shadow-visible: false; }</td>
 
shadow-visible: false; }</td>
 +
</tr>
 +
 +
<tr>
 +
<td>setShadowColor(Color)</td>
 +
<td>shadow-color</td>
 +
<td>CTabFolder {   
 +
shadow-color: #F79402; }</td>
 
</tr>
 
</tr>
  
Line 225: Line 242:
 
<td>selected-tab-fill</td>
 
<td>selected-tab-fill</td>
 
<td>CTabFolder {     
 
<td>CTabFolder {     
selected-tab-fill: #FFFFFF; }</td>
+
selected-tab-fill: #F79402; }</td>
 
</tr>
 
</tr>
  
Line 232: Line 249:
 
<td>tab-outline</td>
 
<td>tab-outline</td>
 
<td>CTabFolder {     
 
<td>CTabFolder {     
tab-outline: #FFFFFF; }</td>
+
tab-outline: #F79402; }</td>
 
</tr>
 
</tr>
  
Line 247: Line 264:
 
<tr>
 
<tr>
 
<td>Control</td>
 
<td>Control</td>
<td>:focus</td>
+
<td>:focus </td>
 
<td>CTabFolder:focus { background-color: #FF0000; }
 
<td>CTabFolder:focus { background-color: #FF0000; }
 
</tr>
 
</tr>

Revision as of 01:44, 2 October 2012

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 }
(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
font-weight

font-family
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 }
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) 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[]) selected-tabs-background CTabFolder { selected-tabs-background: #FF0000 #FFFFFF 100%; }
setBackground(Color[],int[]) unselected-tabs-color CTabFolder { unselected-tabs-color: #FF0000 #FFFFFF 100%; }
setTabHeight(int) tab-height CTabFolder { tab-height: 10px; }


Widget: CTabItem

SWT Method CSS Property Name CSS Example
setShowClose(boolean) show-close CTabItem { 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) shadow-visible CTabFolder { shadow-visible: false; }
setShadowColor(Color) shadow-color CTabFolder { shadow-color: #F79402; }
setSelectedTabFill(Color) selected-tab-fill CTabFolder { selected-tab-fill: #F79402; }
setTabOutline(Color) tab-outline CTabFolder { 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