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.
Difference between revisions of "E4/CSS/SWT Mapping"
| Line 1: | Line 1: | ||
| − | <font size=" | + | <font size="5" face="Times"><i><b>How to style SWT widgets using CSS</b></i></font> |
| − | <br><br> | + | <br><br><br> |
| − | <font size=" | + | <font size="4" face="Times">Widget: Control</font> |
<table cellpadding="10" border="1"> | <table cellpadding="10" border="1"> | ||
<tr> | <tr> | ||
| Line 56: | Line 56: | ||
</table> | </table> | ||
<br><br> | <br><br> | ||
| − | <font size=" | + | <font size="4" face="Times">Widget: CTabFolder</font> |
<table cellpadding="10" border="1"> | <table cellpadding="10" border="1"> | ||
<tr> | <tr> | ||
| Line 64: | Line 64: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
| − | |||
<td>setBorderVisible(Boolean)</td> | <td>setBorderVisible(Boolean)</td> | ||
<td>border-visible</td> | <td>border-visible</td> | ||
| Line 70: | Line 69: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
| − | |||
<td>setMaximized(Boolean)</td> | <td>setMaximized(Boolean)</td> | ||
<td>maximized</td> | <td>maximized</td> | ||
| Line 76: | Line 74: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
| − | |||
<td>setMinimized(Boolean)</td> | <td>setMinimized(Boolean)</td> | ||
<td>minimized</td> | <td>minimized</td> | ||
| Line 82: | Line 79: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
| − | |||
<td>setMaximizeVisible(Boolean)</td> | <td>setMaximizeVisible(Boolean)</td> | ||
<td>maximize-visible</td> | <td>maximize-visible</td> | ||
| Line 88: | Line 84: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
| − | |||
<td>setMinimizeVisible(Boolean)</td> | <td>setMinimizeVisible(Boolean)</td> | ||
<td>minimize-visible</td> | <td>minimize-visible</td> | ||
| Line 94: | Line 89: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
| − | |||
<td>setMRUVisible(Boolean)</td> | <td>setMRUVisible(Boolean)</td> | ||
<td>mru-visible</td> | <td>mru-visible</td> | ||
| Line 100: | Line 94: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
| − | |||
<td>setShowClose(Boolean)</td> | <td>setShowClose(Boolean)</td> | ||
<td>show-close</td> | <td>show-close</td> | ||
| Line 106: | Line 99: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
| − | |||
<td>setSimple(Boolean)</td> | <td>setSimple(Boolean)</td> | ||
<td>simple</td> | <td>simple</td> | ||
| Line 112: | Line 104: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
| − | |||
<td>setSingle(Boolean)</td> | <td>setSingle(Boolean)</td> | ||
<td>single</td> | <td>single</td> | ||
| Line 118: | Line 109: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
| − | |||
<td>setUnselectedCloseVisible(Boolean)</td> | <td>setUnselectedCloseVisible(Boolean)</td> | ||
<td>unselected-close-visible</td> | <td>unselected-close-visible</td> | ||
| Line 124: | Line 114: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
| − | |||
<td>setUnselectedImageVisible(Boolean)</td> | <td>setUnselectedImageVisible(Boolean)</td> | ||
<td>unselected-image-visible</td> | <td>unselected-image-visible</td> | ||
| Line 138: | Line 127: | ||
<th>CSS Pseudo Selector</th> | <th>CSS Pseudo Selector</th> | ||
<th>CSS Example</th> | <th>CSS Example</th> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>Button</td> | ||
| + | <td>:checked</td> | ||
| + | <td>Button:checked { background-color: ##FF0000; } | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
| Line 153: | Line 147: | ||
<td>:focus</td> | <td>:focus</td> | ||
<td>CTabFolder:focus { background-color: ##FF0000; } | <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> | ||
</table> | </table> | ||
Revision as of 11:33, 6 March 2009
How to style SWT widgets using CSS
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 } | |
| setCurosr(Cursor) | cursor | Shell { cursor:crosshair } |
| setFont(Font) | font-style font-size |
Label { font-style: italic; font-size: 12; |
| setForeground(Color) | color | Button { color: #FF0000 } |
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 } |
Pseudo classes which can be used in CSS to style SWT widgets
| SWT Widgets | CSS Pseudo Selector | CSS Example |
|---|---|---|
| Button | :checked | Button:checked { background-color: ##FF0000; } |
| CTabFolder | :selected | CTabFolder:selected { background-color: ##FF0000; } |
| Shell | :active | Shell:active { background-color: ##FF0000; } |
| 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; } |