Time for action – styling the UI with CSS

The user interface for Eclipse 4 is styled with CSS. Although this is loosely based on the CSS syntax used in browsers, the content that can be used is interpreted by the Eclipse 4 runtime. CSS stylesheets are composed of selectors and style rules. A selector can be one of a widget name (for example, Button), a model class name (for example, .MPartStack) or an identifier (for example, #PerspectiveSwitcher).

  1. The default Eclipse 4 application generated by the wizard with sample content will have an empty CSS file called css/default.css. Open this file, and add the following rule:
    Shell {
  background-color: blue;
}
  2. Run the application, and the background of the window (Shell) will be shown in blue.
  3. Basic CSS color names are supported, but hex values can also be used. Modify the default.css file as follows:
    Shell {
  background-color: #00FF00;
}
  4. Run the application, and the background color will be shown in green.
  5. It's possible to support vertical gradients in colors by specifying more than one color in the list. Modify the default.css as follows:
    Shell {
  background-color: yellow blue;
}
  6. Run the application, and the background will be a gradient from yellow to blue.
  7. The colors split at the 50 percent mark by default, but it is possible to specify where the break occurs as a percentage. Using 25 percent makes the switch to blue happen at the top quarter of the screen—conversely, using 75 percent makes the switch to blue happen at the bottom quarter of the screen. Modify the default.css as follows:
    Shell {
  background-color: yellow blue 25%;
}
  8. Run the application, and the background will be a gradient from yellow to blue but with the split nearer the top.
  9. If more than two colors are specified, then multiple gradient points are specified. This creates a rainbow-style effect. Modify the default.css as follows:
    Shell {
  background-color: red orange yellow green blue indigo violet 
                      15%    30%    45%   60%  75%    90%;
}
  10. Run the application, and the background will be rainbow style:
    Time for action – styling the UI with CSS
  11. In addition to using Java class names as selectors, IDs and CSS classes can also be used. For example, to target the Hello part, its ID can be used. The default one will be com.packtpub.e4.application.part.0 if it is not explicitly specified at creation.

    Go to the Part in the application viewer to see the ID. To translate it to CSS, use the # selector and replace . with – in the name. To place the rainbow only on that specific part, use this rule instead:

    #com-packtpub-e4-application-part-0 {
  background-color: red orange yellow green blue indigo violet 
                      15%    30%    45%   60%  75%    90%;
}

    Note

    The Eclipse 4.2 tools may show this as an error in the CSS file, but this is a bug in the CSS editor and not in the CSS rule itself running the application, and the rainbow part should now be targeted to just the Hello part.

  12. Another way of coloring each part is to use the pseudo class .MPart, which allows a rule to be targeted to all parts in the UI:
    .MPart {
  background-color: red orange yellow green blue indigo violet 
                      15%    30%    45%   60%  75%    90%;
}
    Time for action – styling the UI with CSS

What just happened?

The default.css file, created with the application wizard, was modified to explore how to style properties declaratively. Although loosely based on the CSS specification, some differences are apparent. Style selectors can be:

  • Widget (SWT) class names, like Button, Label, and Shell
  • CSS class names like .MPart, .MPartStack, and .MTrimmedWindow
  • CSS IDs like #IDEWindow, #org-eclipse-jdt-ui-MembersViewMStack, and #left

There is also a "pseudo selector" which can be used. These apply to certain subsets of the classes:

  • Shell:active used for applying styles to the active Shell
  • Button:checked used if a Button is checked
  • :selected used if a tab folder/item is selected

In addition, CSS selectors can be combined. For example, to have the same rules applied to .MPart and an .MPartStack, use .MPart, .MPartStack as a selector. The comma represents "either".

Dependencies can be combined; .MPart Label will apply to Label elements which are contained (anywhere) inside an .MPart.

To restrict it to direct descendants, use Shell > Label. This will apply only to those Label elements which are immediately inside a Shell, but not those Label elements which exist in Container instances in the Shell.

In addition to background-color, other CSS properties can be used, such as:

  • alignment: Used for Buttons (for example, up) or Label (for example left/right/center)
  • border-visible: Is true if the border should be shown for CTabFolder
  • background-image: An image referenced as a URL url('platform:/plugin/com.packtpub.e4.application/icons/icon.gif')
  • color: As with background-color; names or hex values
  • font: Used to specify font name (for example, Courier New) and size (for example, 128px)
  • font-family: The font name (for example, Courier New)
  • font-size: The font size (for example, 128px)
  • font-adjust: The font size adjustment, not supported in 4.2 (CSS3 name is font-size-adjust, so this may change)
  • font-stretch: The font stretch size, not supported in 4.2
  • font-style: Can be italic, or bold
  • font-variant: The font variant, not supported in 4.2 (normal, small-caps, and inherit)
  • font-weight: The font weight, not supported in 4.2 (normal, bold, bolder, lighter, and inherit)—use font-style instead
  • margin: The space (in pixels) around the content (-top, -bottom, -left, and -right)
  • maximized: If the widget is maximized or not
  • minimized: If the widget is minimized or not
  • padding: The space (in pixels) between elements (-top, -bottom, -left, and -right)
  • text–align: Can be left, right, or center
  • text-transform: Can be capitalize, uppercase, or lowercase

There are also some Eclipse-specific properties as well:

  • eclipse-perspective-keyline-color: The color of perspective lines.
  • swt-background-mode: The background of the composite to be none, default, or force, corresponding to the Java call Composite.setBackgroundMode(INHERIT_NONE/DEFAULT/FORCE). This ensures the background of the children either override or inherit their parent's background.
  • swt-corner-radius: The size (in pixels) of the corner radius.
  • swt-inner-keyline-color: The color of the inside line of the tabs, drawn by the CTabRenderer (see swt-tab-renderer).
  • swt-keyline-color: The keyline color.
  • swt-maximize-visible: Is true or false if the maximize icon is shown.
  • swt-maximized: Is true or false if the view is maximized (used as a selector)
  • swt-minimize-visible: Is true or false if the minimize icon is shown.
  • swt-minimized: Is true or false if the view is minimized (used as a selector).
  • swt-mru-visible: Is true (for "Indigo-like" tab behavior) or false (default).
  • swt-outer-keyline-color: The color of the outside line of the tabs, drawn by the CTabRenderer (see swt-tab-renderer)
  • swt-selected-tabs-background: The background color of selected tabs.
  • swt-selected-tab-fill: The fill color of the selected tab.
  • swt-show-close: Is true or false if the close icon is shown.
  • swt-shadow-visible: Is true or false if the shadow is visible.
  • swt-shadow-color: The color of shadows, if visible.
  • swt-simple: Is true (for "new style" tabs) or false (for "old style" tabs, default).
  • swt-tab-outline: Is true or false if the tab should have an outline.
  • swt-tab-renderer: Is null for classic style, or a class URL like url('bundleclass://org.eclipse.e4.ui.workbench.renderers.swt/ org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering').
  • swt-tab-height: Height, in pixels, of the tabs.
  • swt-text-align: Can be left, right, up, down, center, lead, or trail.
  • swt-unselected-close-visible: Is true or false if the close icon is shown on unselected tabs.
  • swt-unselected-tabs-color: The color of the unselected tabs.
  • swt-unselected-image-visible: Is true or false if the image is shown on unselected tabs.

The reference to the default.css file is specified in the plugin.xml; the product property applicationCSS points to the top-level CSS file. It can also be overridden with command line arguments -applicationCSS and -applicationCSSResources, both of which use a URL for identifying the location of the main CSS file and its associated resources.

Have a go hero – using the theme manager

Eclipse 4 ships with a "theme manager" which can be used to swap between themes (in essence, separate CSS files). The theme manager is available for inclusion in E4 based applications by adding the org.eclipse.e4.ui.css.swt plug-in as a dependency to the application, and by adding one or more org.eclipse.e4.ui.css.swt.theme extension points.

To switch between different themes, create a handler that has an org.eclipse.e4.ui.css.swt.theme.IThemeEngine injected, and invoke engine.setTheme(id,persist), where id is the reference to the theme defined in the extension point, and persist is a boolean denoting whether the theme switch should be saved and used by default in the next launch.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset