Scout/Tutorial/3.8/Rayo Look and Feel

Scout

Wiki Home

Website

Download • Git

Community

Forums • Blog • Twitter • G+

Bugzilla

Bugzilla

Introduction

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).

Requirements

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

 http://download.eclipse.org/scout/nightly/update/. 

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 Hello World tutorial.

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

A new dialog will pop up, showing the the changes that will be applied to the "Hello World" project in order to provide the Rayo Look and Feel. These changes will be explained in the following sections.

Changes applied to the Scout project

Click on OK and then on Restart Eclipse to apply the changes.

Run the server and client product as explained in Run the Empty Scout Application in the Scout SDK. The application starts automatically with the Rayo Look and Feel.

Scout application with Rayo Look and Feel

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
 scout.laf=com.bsiag.scout.rt.ui.swing.laf.rayo.Rayo
 swing.defaultlaf=com.sun.java.swing.plaf.nimbus.NimbusLookAndFeel
 #swing.defaultlaf=com.sun.java.swing.plaf.windows.WindowsLookAndFeel

Modify SwingApplication class

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

 @Override
 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 {
   @Override
   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;
   }
   @Override
   public void start(BundleContext context) throws Exception {
     super.start(context);
     plugin = this;
   }
   @Override
   public void stop(BundleContext context) throws Exception {
     super.stop(context);
     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:

 @Override
 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();
 }

Manual installation of Rayo

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. In this section the necessary steps are explained for setting up a Scout application with Rayo. All these single steps are done automatically when using Scout SDK.

Download Rayo

To download Rayo use the dialog "Eclipse Marketplace" in Eclipse under "Help -> Eclipse Marketplace..." and search for "Rayo" or alternatively click on "Help -> Install New Software" and add the URL https://tools.bsiag.com/marketplace/rayo as shown in the pictures.

Rayo URL via Update Site

Installation of Rayo via Update Site

Check at least the feature "Rayo Look and Feel Feature for Eclipse Scout" and proceed the installation by clicking on the Next button.