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

Revision as of 08:48, 12 April 2012

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

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 https://tools.bsiag.com/marketplace/rayo 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
 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();
 }