Jump to: navigation, search

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

< Scout‎ | Tutorial‎ | 3.8
(Download Rayo)
 
(33 intermediate revisions by 3 users not shown)
Line 3: Line 3:
 
== Introduction ==
 
== Introduction ==
  
Rayo is a modern Look and Feel that is based on Synth Look and Feel. In [http://en.wikipedia.org/wiki/Synth_Look_and_Feel Synth] all painting is delegated to components without requiring any code to be written.
+
{{ScoutLink|Concepts|Rayo}} is a modern Look and Feel that is based on [http://en.wikipedia.org/wiki/Synth_Look_and_Feel Synth Look and Feel]. All the painting is delegated to components without requiring any code to be written in Rayo: It is a skinnable Look and Feel that is configured in an XML property file.
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).
 
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 ==
+
== Preparation ==
  
Rayo requires Scout Runtime Release 3.8 to be installed. The latest nightly build of Scout Runtime 3.8 can be downloaded from:
+
First we create a new Scout "Hello World" application as described in [[{{BASEPAGENAME}}/HelloWorld|Hello World tutorial]].
  
  http://download.eclipse.org/scout/nightly/update/.
+
== Installation of Rayo using Scout SDK ==
 
+
More details on how to do this can be found in the following {{ScoutLink|HowTo|Install Scout SDK|name=How-To}}
+
 
+
== Getting started with Rayo ==
+
 
+
First we create a new Scout "Hello World" application as described in [[Scout/Tutorial/3.8/HelloWorld|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.
 
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.
Line 24: Line 17:
 
[[Image:install_rayo_using_scout_sdk.png|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]]
  
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.
+
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 section [[{{BASEPAGENAME}}/Rayo_Look_and_Feel#Manual installation of Rayo|Manual installation of Rayo]]
  
 
[[Image:install_rayo_using_scout_sdk2.png|thumb|center|200px|Changes applied to the Scout project]]
 
[[Image:install_rayo_using_scout_sdk2.png|thumb|center|200px|Changes applied to the Scout project]]
  
Click on OK and then on Restart Eclipse to apply the changes.
+
Click on OK.
  
Run the server and client product as explained in [[Scout/Tutorial/3.8/HelloWorld#Run the Empty Scout Application in the Scout SDK|Run the Empty Scout Application in the Scout SDK]]. The application starts automatically with the Rayo Look and Feel.
+
If this is your first time using Rayo, it is downloaded first (this may take a while) and installed into your Eclipse instance afterwards. In that case you must accept the license after pressing OK [http://wiki.eclipse.org/Image:Scout.rayo.license.accep.png].
  
 +
When the download has been completed, confirm the 'Security Warning' [http://wiki.eclipse.org/Image:Scout.rayo.unsigned.warning.png] dialog with OK to install the Rayo feature. When the installation is finished you are prompten to restart Eclipse. Confirm with 'Yes' to complete the installation.
  
[[Image:scout_application_with_rayo_look_and_feel.png|thumb|center|200px|Scout application with Rayo Look and Feel]]
+
== Manual installation of Rayo ==
  
== Using Rayo ==
+
Instead of using the Scout SDK to download and install Rayo Look and Feel (section above), Rayo can also be downloaded at the [http://marketplace.eclipse.org 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 (section above).
  
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.
+
=== Download Rayo ===
  
=== Create an Eclipse Scout Project ===
+
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 http://tools.bsiag.com/marketplace/rayo as shown in the pictures.
  
* As described in this {{ScoutLink|Tutorial|Minicrm/New_Eclipse_Scout_Project|name=tutorial}} we create a simple Scout application "tutorial.rayo" with an outline tree and a table form.
+
[[Image:1_install_url.png|thumb|center|200px|Rayo URL via Update Site]]
  
 +
[[Image:2_install_rayo.png|thumb|center|200px|Installation of Rayo via Update Site]]
  
[[Image:create_scout_application.png|thumb|center|200px|Create tutorial.rayo Scout application]]
+
Check at least the feature "Rayo Look and Feel Feature for Eclipse Scout" and proceed the installation by clicking on the Next button.
  
* Next create a "StandardOutline" in the Scout Explorer similar as shown in this {{ScoutLink|Tutorial|Minicrm/Write_the_first_page#Add_an_Outline_first|name=tutorial}}. Add a CompanyTablePage with some columns in the table to the StandardOutline as described {{ScoutLink|Tutorial|Minicrm/Write_the_first_page#Add_a_Page_to_the_Outline|name=here}}.
+
=== Add Rayo Plugins to the Swing Product ===
  
[[Image:add_outline_and_tablepage.png|thumb|center|200px|Add an outline and a tablepage to the application]]
+
Switch to Scout SDK. Select your Scout project in the Scout Explorer. In the Scout Object Properties view under Product launchers open your Swing client product by clicking on the link. Add the plugin com.bsiag.scout.rt.ui.swing.rayo and the fragment com.bsiag.scout.rt.ui.swing.laf.rayo.fragment as shown in the picture. You may need to do the same change for other products as well.
  
=== Add required Rayo Plugin ===
+
[[Image:add_rayo_plugin_to_swing_client_product.png|thumb|center|200px|Add Rayo Plugin and Fragment to Swing client Product]]
  
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 Plugin to the Swing Manifest ===
 +
 
 +
Open the plugin.xml in the ui.swing plugin and add "com.bsiag.scout.rt.ui.swing.rayo" under required plugins in the Dependencies tab.
  
 
[[Image:add_rayo_plugin.png|thumb|center|200px|Add Rayo to required plugins]]
 
[[Image:add_rayo_plugin.png|thumb|center|200px|Add Rayo to required plugins]]
  
=== Add Rayo Plugins to the Client Product ===
+
=== Change SwingEnvironment ===
  
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:
+
Open the class SwingEnvironment and inherit from com.bsiag.scout.rt.ui.swing.rayo.RayoSwingEnvironment by adding the following line:
  
* com.bsiag.scout.rt.ui.swing.rayo
+
   public class SwingEnvironment extends com.bsiag.scout.rt.ui.swing.rayo.RayoSwingEnvironment {
* com.bsiag.scout.rt.ui.swing.laf.rayo.fragment
+
 
+
[[Image:add_required_plugins.png|thumb|center|200px|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  ===
+
[[Image:inherit_from_rayo_swing_environment.png|thumb|center|200px|Inherit from Rayo Swing Environment]]
  
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.
 
  
[[Image:Rayo_Look_and_Feel.png|thumb|center|200px|Rayo Look and Feel]]
+
== Launch the application ==
  
=== Create class RayoSwingEnvironmentEx ===
+
Run the server and client product as explained in [[{{BASEPAGENAME}}/HelloWorld#Run the Empty Scout Application in the Scout SDK|Run the Empty Scout Application in the Scout SDK]]. The application starts automatically with the Rayo Look and Feel.
  
In tutorial.rayo.ui.swing create the class RayoSwingEnvironmentEx in the package tutorial.rayo.ui.swing that subclasses RayoSwingEnvironment.  
+
[[Image:scout_application_with_rayo_look_and_feel.png|center]]
  
  package tutorial.rayo.ui.swing;
+
== Addendum ==
  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 ===
+
Since Rayo build version 3.8.1.201209050944, decorated frames of the Operating Systems can be used like in Nimbus, Metal and Synth in the JRE.
 +
Previous Rayo versions were only supporting Look & Feel decorated frames so that most of the Operating System functionalities regarding dialogs and frames were affected due to multiple bugs in the JRE, e.g. resizing, maximizing, minimizing and multiple screens. When using L&F decorated frame and dialog, the Windows+UP/DOWN/LEFT/RIGHT keys do not work anymore. Also resizing issues arise and in general some native OS functions are disabled.
  
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.
+
To use the decorated frames of the OS, just unset the following flag in the Swing config.ini file:
  
  package tutorial.rayo.ui.swing;
+
scout.laf.useLafFrameAndDialog=false
  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 ===
+
The semantic is:
 +
scout.laf.useLafFrameAndDialog=false <=> OS decorated frames and dialogs
 +
 
 +
scout.laf.useLafFrameAndDialog=true <=> Rayo Look & Feel decorated frames and dialogs
  
Add the following line of code to the createSwingEnvironment() method of the class SwingApplication in the package tutorial.rayo.ui.swing:
 
  
  @Override
+
See also {{Bug|388781}}
  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 ==
+
== See also ==
 
+
* {{ScoutLink|Concepts|Rayo|Rayo look and feel}}
Instead of using the Scout SDK to download and install Rayo Look and Feel, Rayo can also be downloaded at the [http://marketplace.eclipse.org 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.
+
 
+
[[Image:1_install_url.png|thumb|center|200px|Rayo URL via Update Site]]
+
 
+
[[Image:2_install_rayo.png|thumb|center|200px|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.
+

Latest revision as of 11:55, 21 May 2013


Scout
Wiki Home
Website
DownloadGit
Community
ForumsBlogTwitter
Bugzilla
Bugzilla


Introduction

Rayo is a modern Look and Feel that is based on Synth Look and Feel. All the painting is delegated to components without requiring any code to be written in Rayo: It is a skinnable Look and Feel that is 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).

Preparation

First we create a new Scout "Hello World" application as described in Hello World tutorial.

Installation of Rayo using Scout SDK

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 section Manual installation of Rayo

Changes applied to the Scout project

Click on OK.

If this is your first time using Rayo, it is downloaded first (this may take a while) and installed into your Eclipse instance afterwards. In that case you must accept the license after pressing OK [1].

When the download has been completed, confirm the 'Security Warning' [2] dialog with OK to install the Rayo feature. When the installation is finished you are prompten to restart Eclipse. Confirm with 'Yes' to complete the installation.

Manual installation of Rayo

Instead of using the Scout SDK to download and install Rayo Look and Feel (section above), 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 (section above).

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 http://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.

Add Rayo Plugins to the Swing Product

Switch to Scout SDK. Select your Scout project in the Scout Explorer. In the Scout Object Properties view under Product launchers open your Swing client product by clicking on the link. Add the plugin com.bsiag.scout.rt.ui.swing.rayo and the fragment com.bsiag.scout.rt.ui.swing.laf.rayo.fragment as shown in the picture. You may need to do the same change for other products as well.

Add Rayo Plugin and Fragment to Swing client Product

Add Rayo Plugin to the Swing Manifest

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

Add Rayo to required plugins

Change SwingEnvironment

Open the class SwingEnvironment and inherit from com.bsiag.scout.rt.ui.swing.rayo.RayoSwingEnvironment by adding the following line:

 public class SwingEnvironment extends com.bsiag.scout.rt.ui.swing.rayo.RayoSwingEnvironment {
 }
Inherit from Rayo Swing Environment


Launch the application

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

Addendum

Since Rayo build version 3.8.1.201209050944, decorated frames of the Operating Systems can be used like in Nimbus, Metal and Synth in the JRE. Previous Rayo versions were only supporting Look & Feel decorated frames so that most of the Operating System functionalities regarding dialogs and frames were affected due to multiple bugs in the JRE, e.g. resizing, maximizing, minimizing and multiple screens. When using L&F decorated frame and dialog, the Windows+UP/DOWN/LEFT/RIGHT keys do not work anymore. Also resizing issues arise and in general some native OS functions are disabled.

To use the decorated frames of the OS, just unset the following flag in the Swing config.ini file:

scout.laf.useLafFrameAndDialog=false

The semantic is:

scout.laf.useLafFrameAndDialog=false <=> OS decorated frames and dialogs
 
scout.laf.useLafFrameAndDialog=true <=> Rayo Look & Feel decorated frames and dialogs


See also bug 388781

See also