Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

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

< E4‎ | CSS
(New page: setBackground(Color) control background-color Button { background-color: #FF0000 } setBackgroundImage(Image) control ...)
 
 
(73 intermediate revisions by 7 users not shown)
Line 1: Line 1:
−
setBackground(Color)              control                background-color                        Button { background-color: #FF0000 }
+
{{Warning|This page has been migrated to to https://github.com/eclipse-platform/eclipse.platform.ui/blob/master/docs/CSS.md.}}
  
−
setBackgroundImage(Image)          control                background-image                        Button { background-image: ''some url'' }
 
  
−
                                  control                border-color                           Button { border-color: ##FF0000 }
+
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===
 +
<table cellpadding="5" border="1">
 +
<tr>
 +
<th>SWT Method</th>
 +
<th>CSS Property Name</th>
 +
<th>CSS Example</th>
 +
</tr>
 +
<tr>
 +
<td>setBackground(Color)</td>
 +
<td>background-color</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>
 +
<td>setBackgroundImage(Image)</td>
 +
<td>background-image</td>
 +
<td>Button { background-image: <i>some url</i> }</td>
 +
</tr>
 +
<tr>
 +
<td></td>
 +
<td>border-color</td>
 +
<td>Button { border-color: #FF0000; }</td>
 +
</tr>
 +
<tr>
 +
<td></td>
 +
<td>border-width</td>
 +
<td>Button { border-width: 3 }</td>
 +
</tr>
 +
<tr>
 +
<td></td>
 +
<td>border-style</td>
 +
<td>Button { border-style: dotted }</td>
 +
</tr>
 +
<tr>
 +
<td>setCursor(Cursor)</td>
 +
<td>cursor</td>
 +
<td>Shell { cursor:crosshair }</td>
 +
</tr>
 +
<tr>
 +
<td>setFont(Font)</td>
 +
<td>font</td>
 +
<td>Label { font: italic 12 bold "Terminal"; }</td>
 +
</tr>
 +
<tr>
 +
<td></td>
 +
<td>font-style<br>
 +
font-size<br>
 +
font-weight<br>
 +
font-family</td>
 +
<td>Label { font-style: italic;<br/>
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 12; <br/>
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: bold;<br/>
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: "Terminal"; }</td>
 +
</tr>
 +
<tr>
 +
<td>setForeground(Color)</td>
 +
<td>color</td>
 +
<td>Button { color: #FF0000 }</td>
 +
</tr>
 +
</table>
 +
<br>
  
−
                                  control                border-width                            Button { border-width: 3 }
+
===Widget: Button===
 +
<table cellpadding="5" border="1">
 +
<tr>
 +
<th>SWT Method</th>
 +
<th>CSS Property Name</th>
 +
<th>CSS Example</th>
 +
</tr>
 +
<tr>
 +
<td>setAlignment(int)</td>
 +
<td>swt-alignment</td>
 +
<td>Label { swt-alignment: up; } /* if pushbutton mode */</td>
 +
</tr>
 +
</table>
 +
<br>
  
−
                                  control                border-style                            Button { border-style: dotted }
+
===Widget: Label===
 +
<table cellpadding="5" border="1">
 +
<tr>
 +
<th>SWT Method</th>
 +
<th>CSS Property Name</th>
 +
<th>CSS Example</th>
 +
</tr>
 +
<tr>
 +
<td>setAlignment(int)</td>
 +
<td>swt-alignment</td>
 +
<td>Label { swt-alignment: center; }</td>
 +
</tr>
  
−
setCursor(Cursor)                  control                cursor                                  Shell { cursor:  }
+
</table>
 +
<br>
  
−
setFont(Font)                     control                font-style                              Label { font-style: italic;
+
===Widget: CTabFolder===
 +
<table cellpadding="5" border="1">
 +
<tr>
 +
<th>SWT Method</th>
 +
<th>CSS Property Name</th>
 +
<th>CSS Example</th>
 +
</tr>
 +
<tr>
 +
<td>setBorderVisible(boolean)</td>
 +
<td>border-visible</td>
 +
<td>CTabFolder { border-visible: true }</td>
 +
</tr>
 +
<tr>
 +
<td>setMaximized(boolean)</td>
 +
<td>swt-maximized</td>
 +
<td>CTabFolder { swt-maximized: true }</td>
 +
</tr>
 +
<tr>
 +
<td>setMinimized(boolean)</td>
 +
<td>swt-minimized</td>
 +
<td>CTabFolder { swt-minimized: true }</td>
 +
</tr>
 +
<tr>
 +
<td>setMaximizeVisible(boolean)</td>
 +
<td>swt-maximize-visible</td>
 +
<td>CTabFolder { swt-maximize-visible: true }</td>
 +
</tr>
 +
<tr>
 +
<td>setMinimizeVisible(boolean)</td>
 +
<td>swt-minimize-visible</td>
 +
<td>CTabFolder {swt- minimize-visible: true }</td>
 +
</tr>
 +
<tr>
 +
<td>setMRUVisible(boolean)</td>
 +
<td>swt-mru-visible</td>
 +
<td>CTabFolder { swt-mru-visible: true }</td>
 +
</tr>
 +
<tr>
 +
<td>setSimple(boolean)</td>
 +
<td>swt-simple</td>
 +
<td>CTabFolder { swt-simple: true }</td>
 +
</tr>
 +
<tr>
 +
<td>setSingle(boolean)</td>
 +
<td>swt-single</td>
 +
<td>CTabFolder { swt-single: true }</td>
 +
</tr>
 +
<tr>
 +
<td>setUnselectedCloseVisible(boolean)</td>
 +
<td>swt-unselected-close-visible</td>
 +
<td>CTabFolder { swt-unselected-close-visible: true }</td>
 +
</tr>
 +
<tr>
 +
<td>setUnselectedImageVisible(boolean)</td>
 +
<td>swt-unselected-image-visible</td>
 +
<td>CTabFolder { swt-unselected-image-visible: true }</td>
 +
</tr>
 +
<tr>
 +
<td>setRenderer(CTabFolderRenderer)</td>
 +
<td>swt-tab-renderer</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>
 +
<td>setSelectionBackground(Color[],int[])</td>
 +
<td>swt-selected-tabs-background</td>
 +
<td>CTabFolder {  swt-selected-tabs-background: #FF0000 #FFFFFF 100%;  }</td>
 +
</tr>
 +
<tr>
 +
<td>setBackground(Color[],int[])</td>
 +
<td>swt-unselected-tabs-color</td>
 +
<td>CTabFolder {   
 +
swt-unselected-tabs-color: #FF0000 #FFFFFF 100%; }</td>
 +
</tr>
 +
<tr>
 +
<td>setTabHeight(int)</td>
 +
<td>swt-tab-height</td>
 +
<td>CTabFolder {  swt-tab-height: 10px; }</td>
 +
</tr>
 +
</table>
 +
<br>
  
−
                                  control                font-size                                      font-size: 12
+
===Widget: CTabItem===
 +
<table cellpadding="5" border="1">
 +
<tr>
 +
<th>SWT Method</th>
 +
<th>CSS Property Name</th>
 +
<th>CSS Example</th>
 +
</tr>
  
−
                                  control                font-weight                                    font-weight: bold;
+
<tr>
 +
<td>setShowClose(boolean)</td>
 +
<td>swt-show-close</td>
 +
<td>CTabItem { swt-show-close: true }</td>
 +
</tr>
  
−
                                  control                font-family                                    font-family: "Terminal"; }
+
</table>
 +
<br>
  
−
setForegroundColor(Color)         control                color                                  Button { color: #FF0000 }
+
===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)
 +
<table cellpadding="5" border="1">
 +
<tr>
 +
<th>e4Renderer Method</th>
 +
<th>CSS Property Name</th>
 +
<th>CSS Example</th>
 +
</tr>
  
−
setBorderVisible(Boolean)         CTabFolder            borderVisible                          CTabFolder { borderVisible: true }
+
<tr>
 +
<td>setOuterKeyline(Color)</td>
 +
<td>swt-outer-keyline-color</td>
 +
<td>CTabFolder {    
 +
swt-outer-keyline-color: #B6BCCC; }</td>
 +
</tr>
  
−
setMaximized(Boolean)             CTabFolder            maximized                              CTabFolder { maximized: true }
+
<tr>
 +
<td>setCornerRadius(int)</td>
 +
<td>swt-corner-radius</td>
 +
<td>CTabFolder {  
 +
swt-corner-radius: 20; }</td>
 +
</tr>
  
−
setMinimized(Boolean)             CTabFolder            minimized                              CTabFolder { minimized: true }
+
<tr>
 +
<td>setShadowVisible(boolean)</td>
 +
<td>swt-shadow-visible</td>
 +
<td>CTabFolder {  
 +
swt-shadow-visible: false; }</td>
 +
</tr>
  
−
setMaxmizeVisible(Boolean)         CTabFolder            maxmimizeVisible                        CTabFolder { maximizeVisible: true }
+
<tr>
 +
<td>setShadowColor(Color)</td>
 +
<td>swt-shadow-color</td>
 +
<td>CTabFolder {  
 +
swt-shadow-color: #F79402; }</td>
 +
</tr>
  
−
setMinimizeVisible(Boolean)       CTabFolder            minimizeVisible                        CTabFolder { minimizeVisible: true }
+
<tr>
 +
<td>setSelectedTabFill(Color)</td>
 +
<td>swt-selected-tab-fill</td>
 +
<td>CTabFolder {  
 +
swt-selected-tab-fill: #F79402; }</td>
 +
</tr>
  
−
setMRUVisible(Boolean)             CTabFolder            mruVisible                              CTabFolder { mruVisible: true }
+
<tr>
 +
<td>setTabOutline(Color)</td>
 +
<td>swt-tab-outline</td>
 +
<td>CTabFolder {  
 +
swt-tab-outline: #F79402; }</td>
 +
</tr>
  
−
setShowClose(Boolean)              CTabFolder            showClose                              CTabFolder { showClose: true }
+
</table>
 +
<br>
  
−
setSimple(Boolean)                CTabFolder            simple                                  CTabFolder { simple: true }
+
==Pseudo classes which can be used in CSS to style SWT widgets==
−
 
+
<table cellpadding="5" border="1">
−
setSingle(Boolean)                CTabFolder            single                                  CTabFolder { single: true }
+
<tr>
−
 
+
<th>SWT Widgets</th>
−
setUnselectedCloseVisible(Boolean) CTabFolder            unselectedCloseVisible                  CTabFolder { unselectedCloseVisible: true }
+
<th>CSS Pseudo Selector</th>
−
 
+
<th>CSS Example</th>
−
setUnselectedImageVisible(Boolean) CTabFolder             unselectedImageVisible                  CTabFolder { unselectedImageVisible: true }
+
</tr>
 +
<tr>
 +
<td>Control</td>
 +
<td>:focus †</td>
 +
<td>CTabFolder:focus { background-color: #FF0000; }
 +
</tr>
 +
<tr>
 +
<td>Control</td>
 +
<td>:visible †</td>
 +
<td>Shell:visible { background-color: #FF0000; }
 +
</tr>
 +
<tr>
 +
<td>Control</td>
 +
<td>:enabled †</td>
 +
<td>Text:enabled { background-color: #FF0000; }
 +
</tr>
 +
<tr>
 +
<td>Control</td>
 +
<td>:disabled †</td>
 +
<td>Text:disabled { background-color: #FF0000; }
 +
</tr>
 +
<tr>
 +
<td>Shell</td>
 +
<td>:active</td>
 +
<td>Shell:active { background-color: #FF0000; }
 +
</tr>
 +
<tr>
 +
<td>Button</td>
 +
<td>:checked</td>
 +
<td>Button:checked { background-color: #FF0000; }
 +
</tr>
 +
<tr>
 +
<td>CTabFolder</td>
 +
<td>:selected</td>
 +
<td>CTabFolder:selected { background-color: #FF0000; }
 +
</tr>
 +
<tr>
 +
<td>CTabItem</td>
 +
<td>:selected</td>
 +
<td>CTabItem:selected { font-weight: bold; }
 +
</tr>
 +
</table>
 +
<br>
 +
† As of yet styles are only applied when SWT UI is initially loaded, if widget state is changed afterwards, changes will not take effect

Latest revision as of 09:41, 5 February 2024

Warning2.png


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) 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

Retrieved from "https://wiki.eclipse.org/index.php?title=E4/CSS/SWT_Mapping&oldid=448500"

This page was last modified 09:41, 5 February 2024 by Lars Vogel. Based on work by Paul Webster, Wayne Beaton and Brian de Alwis and others.

Back to the top