Skip to main content
Jump to: navigation, search

Scout/Tutorial/3.8/Rayo Look and Feel

Wiki Home


Rayo is a modern Look and Feel that is based on Synth Look and Feel. In Synth all painting is delegated to components without requiring any code to be written. Rayo is a skinnable Look and Feel that can be configured in an XML property file.

In this tutorial a simple Scout application will be customized with the Rayo Look and Feel. Depending on the configured Look and Feel property in the config.ini file, the application is started with Rayo or with the default Swing Look and Feel (Nimbus or Windows).


Rayo requires Scout Runtime Release 3.8 to be installed. The latest nightly build of Scout Runtime 3.8 can be downloaded from: 

More details on how to do this can be found in the following How-To

Getting started with Rayo

Rayo Look and Feel can be found at the Eclipse Marketplace. To download Rayo use the Eclipse Marketplace dialog (Help -> Eclipse Marketplace...) and search for "Rayo" or alternatively click on "Help -> Install New Software" in Eclipse and add the URL as shown in the pictures.

Rayo URL via Update Site
Installation of Rayo via Update Site

Using Rayo

After installation of Rayo the plugin com.bsiag.scout.rt.ui.swing.rayo and the fragment com.bsiag.scout.rt.ui.swing.laf.rayo.fragment are available and will be added to our Scout application later.

Create an Eclipse Scout Project

  • As described in this tutorial we create a simple Scout application "tutorial.rayo" with an outline tree and a table form.

Create tutorial.rayo Scout application
  • Next create a "StandardOutline" in the Scout Explorer similar as shown in this tutorial. Add a CompanyTablePage with some columns in the table to the StandardOutline as described here.
Add an outline and a tablepage to the application

Add required Rayo Plugin

Open the plugin.xml in tutorial.rayo.ui.swing and add "com.bsiag.scout.rt.ui.swing.rayo" under required plugins in the Dependencies tab.

Add Rayo to required plugins

Add Rayo Plugins to the Client Product

Open the rayo-swing-client-dev.product file under tutorial.rayo.ui.swing/products/development/. Switch to the Dependencies tab and click on the button "Add Required Plug-ins". The following plugin and fragment should be added automatically:

  • com.bsiag.scout.rt.ui.swing.rayo
  • com.bsiag.scout.rt.ui.swing.laf.rayo.fragment
Add required plugins

Add Rayo Look and Feel to config.ini file

Add the following line to the config.ini file that is used by the client product.

 ### Swing Look And Feel

Modify SwingApplication class

In class SwingApplication (in package tutorial.rayo.ui.swing) change method createSwingEnvironment as follows

 protected ISwingEnvironment createSwingEnvironment() {
   return new RayoSwingEnvironment();

Start Client and Server

Use the rayo-server and rayo-swing-client product files to launch the server and the client. The Scout application will be launched in Rayo Look and Feel mode.

Rayo Look and Feel

Create class RayoSwingEnvironmentEx

In tutorial.rayo.ui.swing create the class RayoSwingEnvironmentEx in the package tutorial.rayo.ui.swing that subclasses RayoSwingEnvironment.

 package tutorial.rayo.ui.swing;
 import javax.swing.JComponent;
 import org.eclipse.scout.rt.client.ui.form.fields.IFormField;
 import org.eclipse.scout.rt.client.ui.form.fields.groupbox.AbstractGroupBox;
 import org.eclipse.scout.rt.client.ui.form.fields.groupbox.IGroupBox;
 import org.eclipse.scout.rt.ui.swing.form.fields.ISwingScoutFormField;
 import org.eclipse.scout.rt.ui.swing.form.fields.groupbox.SwingScoutGroupBox;
 import com.bsiag.scout.rt.ui.swing.rayo.RayoSwingEnvironment;
 public class RayoSwingEnvironmentEx extends RayoSwingEnvironment {
   public ISwingScoutFormField createFormField(JComponent parent, IFormField field) {
     if (field instanceof AbstractGroupBox) {
       SwingScoutGroupBox ui = new SwingScoutGroupBox();
       ui.createField((IGroupBox) field, this);
       decorate(field, ui);
       return ui;
     return super.createFormField(parent, field);

Modify Activator class

In tutorial.rayo.ui.swing modify the class Activator in the package tutorial.rayo.ui.swing so that it inherits from Plugin. Make sure that the super() and stop() methods of the super class are called.

 package tutorial.rayo.ui.swing;
 import org.eclipse.core.runtime.Plugin;
 import org.osgi.framework.BundleContext;
 public class Activator extends Plugin {
   public static String PLUGIN_ID = "tutorial.rayo.ui.swing";
   private static Activator plugin;
   public static Activator getDefault() {
     return plugin;
   public void start(BundleContext context) throws Exception {
     plugin = this;
   public void stop(BundleContext context) throws Exception {
     plugin = null;

Modify SwingApplication class

Add the following line of code to the createSwingEnvironment() method of the class SwingApplication in the package tutorial.rayo.ui.swing:

 protected ISwingEnvironment createSwingEnvironment() {
   if ("com.bsiag.scout.rt.ui.swing.laf.rayo.Rayo".equals(Activator.getDefault().getBundle().getBundleContext().getProperty("scout.laf"))) {
     return new RayoSwingEnvironmentEx();
   return new SwingEnvironment();

Copyright © Eclipse Foundation, Inc. All Rights Reserved.