Skip to main content
Jump to: navigation, search

Difference between revisions of "Scout/Tutorial/3.8/Rayo Look and Feel"

< Scout‎ | Tutorial‎ | 3.8
(Getting started with Rayo)
(Getting started with Rayo)
Line 22: Line 22:
Switch to the Scout Explorer view and mark the previous created "Hello World" application. In the Scout Object Properties view check the box "Rayo Swing Look and Feel for Eclipse Scout" under Technologies.
Switch to the Scout Explorer view and mark the previous created "Hello World" application. In the Scout Object Properties view check the box "Rayo Swing Look and Feel for Eclipse Scout" under Technologies.
[[Image:install_rayo_using_scout_sdk|thumb|center|200px|Install Rayo Look and Feel using Scout SDK]]
[[Image:install_rayo_using_scout_sdk.png|thumb|center|200px|Install Rayo Look and Feel using Scout SDK]]
== Using Rayo ==
== Using Rayo ==

Revision as of 06:44, 25 April 2012

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

First we create a new Scout "Hello World" application as described in Scout/Tutorial/3.8/HelloWorld.

Switch to the Scout Explorer view and mark the previous created "Hello World" application. In the Scout Object Properties view check the box "Rayo Swing Look and Feel for Eclipse Scout" under Technologies.

Install Rayo Look and Feel using Scout SDK

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();

Alternative download

Instead of using the Scout SDK to download and install Rayo Look and Feel, Rayo can also be downloaded at the Eclipse Marketplace as an alternative. 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

Keep in mind that the steps explained in the previous chapter have to be done manually.

Back to the top