• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS Styling for Eclipse RCP 3.x and 4.x
 

CSS Styling for Eclipse RCP 3.x and 4.x

on

  • 8,575 views

Eclipse 3.x and 4.x CSS styling.

Eclipse 3.x and 4.x CSS styling.

Statistics

Views

Total Views
8,575
Views on SlideShare
8,275
Embed Views
300

Actions

Likes
0
Downloads
53
Comments
0

3 Embeds 300

http://lanyrd.com 292
http://toedter.com 7
url_unknown 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS Styling for Eclipse RCP 3.x and 4.x CSS Styling for Eclipse RCP 3.x and 4.x Presentation Transcript

    • Eclipse RCP 4.x and 3.xCSS Styling
      Kai Tödter
      Siemens Corporate Technology
      6/27/2011
      1
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
    • Who am I?
      Software Architect/Engineer at Siemens Corporate Technology
      Eclipse RCP expert
      Open Source advocate
      Committer at e4 and Platform UI
      E-mail: kai.toedter@siemens.com
      Twitter: twitter.com/kaitoedter
      Blog: toedter.com/blog
      6/27/2011
      2
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
    • UI Styling
      6/27/2011
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      3
      Picture from http://www.sxc.hu/photo/1089931
    • UI Styling
      In Eclipse 3.x, UI styling can be done using
      The Presentation API
      Custom Widgets
      These mechanisms are very limited
      It is not possible to implement a specific UI design, created by a designer
      One innovation brought by Eclipse 4.0 was the dynamic styling of the UI using CSS
      This new feature can now be used easily in the Eclipse 3.x world
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      4
      6/27/2011
    • 4.x Dark CSS Styling with radial Gradients
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      5
      6/27/2011
    • 4.x Gray CSS Styling with linear Gradients
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      6
      6/27/2011
    • 4.x Blue CSS Styling with linear Gradients
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      7
      6/27/2011
    • 3.x RCP Mail with no CSS Styling
      6/27/2011
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      8
    • 3.x RCP Mail with CSS Styling
      6/27/2011
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      9
    • 3.x RCP Mail CSS Color Demonstrator
      6/27/2011
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      10
    • 3.x RCP Mail with blue CSS Styling
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      11
      6/27/2011
    • How does the CSS look like?
      CTabItem, Label, Tree, Text {
      font-family: "Arial";
      }
      Shell {
      font-size: 12;
      }
      CTabItem, ToolBar, Button, CBanner, CoolBar {
      font-size: 9;
      background-color: white;
      }
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      12
      6/27/2011
    • Some Things you cannot style (yet)
      Menu bar background
      Table headers
      Partly implemented:
      Gradients
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      13
      6/27/2011
    • Gradient Examples
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      14
      6/27/2011
      linear orange black
      linear orange black 60%
      linear orange black orange 50% 100%
      radial orange black
      radial orange black 60%
      radial orange black orange 50% 100%
    • Dynamic Theme Switching
      It is possible to change the CSS based theme at runtime
      Good for accessibility
      Good for user preferences
      6/27/2011
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      15
      Picture from http://www.sxc.hu/photo/823108
    • Needed Bundles for 3.x Styling
      org.apache.batik.css
      org.apache.batik.util
      org.apache.batik.util.gui
      org.apache.batik.xml
      org.eclipse.e4.ui.css.core
      org.eclipse.e4.ui.css.jface
      org.eclipse.e4.ui.css.legacy
      org.eclipse.e4.ui.css.swt
      org.eclipse.e4.ui.css.swt.theme
      org.eclipse.e4.ui.examples.css.rcp
      org.eclipse.e4.ui.widgets
      org.w3c.css.sac
      org.w3c.dom.smil
      org.w3c.dom.svg
      6/27/2011
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      16
      The RCP Mail Demowith CSS Styling
    • How to get the bundles
      Checkout :pserver:anonymous@dev.eclipse.org:/cvsroot/eclipse/e4/releng
      Import Project Set /releng/org.eclipse.e4.ui.releng/e4.ui.css.psf
      Checkout e4/org.eclipse.e4.ui/bundles/org.eclipse.e4.ui.widgets
      Delete all projects that are not on the previous slide
      Cleanup org.eclipse.e4.ui.css.swt
      Organize Imports
      Delete dependencies to org.eclipse.e4.core.*
      Start the CSS RCP Mail demo
      6/27/2011
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      17
    • 3.x How to enable CSS Styling
      Provide a CSS theme
      Provide an extension to org.exlipse.e4.ui.css.swt.theme
      Enable theming support in the initialize method of ApplicationWorkbenchAdvisor
      6/27/2011
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      18
    • Extension Point for Themes
      6/27/2011
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      19
    • 3.x ApplicationWorkbenchAdvisor
      Bundle b = FrameworkUtil.getBundle(getClass());
      BundleContext context = b.getBundleContext();
      ServiceReference serviceRef = context
      .getServiceReference(IThemeManager.class.getName());
      IThemeManager themeManager =
      (IThemeManager) context.getService(serviceRef);
      final IThemeEngine engine =
      themeManager.getEngineForDisplay(Display.getCurrent());
      engine.setTheme("org.eclipse.e4.ui.examples.css.rcp", true);

      6/27/2011
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      20
    • How to use custom attributes?
      Java:
      widget.setData(CSSSWTConstants.CSS_ID_KEY,
      "navigation");
      CSS:
      #navigation {
      color: #595959;
      background-color: #f0f1f7;
      }
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      21
      6/27/2011
    • CSS Editors
      CSS has a well known syntax
      But which UI elements can be styled?
      Which CSS attributes does a specific element support?
      At Eclipse Summit Europe an Xtext-based editor, with content assist for both elements and attributes, was shown
      Tom Schindl is currently working on another Xtext-based editor
      Let’s see, what Eclipse 4.2 will bring
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      22
      6/27/2011
    • 3.x Dynamic Theme Switching
      BundleContext context = bundle.getBundleContext();
      ServiceReference ref = context.getServiceReference(IThemeManager.class.getName());
      IThemeManager manager = (IThemeManager) context.getService(ref);
      IThemeEngine engine =manager.getEngineForDisplay(PlatformUI.getWorkbench()
      .getActiveWorkbenchWindow() == null ? Display.getCurrent()
      : PlatformUI.getWorkbench().getActiveWorkbenchWindow()
      .getShell().getDisplay());
      engine.setTheme("org.eclipse.e4.ui.examples.css.rcp");
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      23
      6/27/2011
    • Discussion
      6/27/2011
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      24
      Picture from http://www.sxc.hu/photo/922004
    • License & Acknowledgements
      This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License
      See http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_US
      Many thanks to the authors of the pictures
      http://www.sxc.hu/photo/1089931
      http://www.sxc.hu/photo/823108
      http://www.sxc.hu/photo/922004
      6/27/2011
      © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
      25