Time for action – integrating the spy into a product

Sometimes it is useful or necessary to be able to debug what an application looks like from the inside. Although the CSS Spy works in the Eclipse instance, it doesn't have any effect on the launched Eclipse 4 application. In order to use the spy in a runtime application, a number of bundles need to be added.

  1. Open the .product file and switch to the Contents tab, which lists the plug-ins required by the product.
  2. Click on Add... and select both the org.eclipse.e4.tools.css.spy plug-in to the product.
  3. Click on the run button at the top of the product to launch with the new bundles.

    Tip

    If the product doesn't launch successfully, manually add the required plug-ins to the launch configuration, or delete the launch configuration and then re-launch the product so that the correct plug-ins are installed.

  4. Press Alt + Shift + F5 to open the CSS Spy, and select the danger label in the application:
    Time for action – integrating the spy into a product
  5. The bottom of the CSS Spy shows the current CSS properties and rules. The Show CSS fragment button can be used to open a window with CSS source that can be used to paste into a CSS file. In addition, the properties on the bottom left not only show what the current values of the properties are, but can also be used to change the existing values to experiment with the style of the application. Double-click on the value of the background-color property and enter a different value, such as orange or #ff00ff.

What just happened?

By adding the CSS Spy and the E4 Spies package to the application, the keyboard shortcuts and handlers to open the window were automatically added to the application. Now when the application is run, the developer can introspect the style of the application and observe effects to verify that the CSS styles are being applied correctly, such as the DireWarningMessage CSS class used here.

The CSS Spy can also be used to translate the current style of the user interface into a stylesheet, which can be used to update or fix rules elsewhere, and interactively changing values through the CSS properties can provide a way to debug content dynamically.

Note

It is expected that end-user applications will not ship with the E4 Spies bundled with the application. If they are added for testing purposes, they should be removed from the application that is published to reduce the size of the application and to limit the likelihood of accidentally opening the spies window.

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

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