Eclipse Community Forums: Eclipse Scout » How to set a backgroundcolor to a specific button in RAP

Help

Home

Home » Eclipse Projects » Eclipse Scout » How to set a backgroundcolor to a specific button in RAP

Show: Today's Messages :: Show Polls :: Message Navigator

How to set a backgroundcolor to a specific button in RAP [message #1440594]

Wed, 08 October 2014 15:11

Michiel Arentsen

Messages: 11
Registered: October 2014

Junior Member

Hello Scout gurus,

I am a newbie in Scout development, and currently figuring out the styling possibilities for a Scout RAP application (see the screeenshot to get an idea where i am going..).

I am trying to style the 'Save' button in RAP. I want to give it another backgroundcolor.
I know how to style buttons in the CSS, but is there a possibility to style a specific button backgroundcolor?

We have a toolbar with a save button like
public class SaveButton extends AbstractSaveButton {}

Is there a way in the CSS to style this SaveButton?

Attachment: LookAndFeelTest.png
(Size: 88.56KB, Downloaded 203 times)

Report message to a moderator

Re: How to set a backgroundcolor to a specific button in RAP [message #1440624 is a reply to message #1440594]

Wed, 08 October 2014 16:13

Jeremie Bresson

Messages: 1252
Registered: October 2011

Senior Member

Hi,

Thanks for posting here. Welcome!

In the Scout model a button is defined by:
- The SystemType property (NONE, CANCEL, CLOSE, OK, RESET, SAVE ...)
- The ProcessButton property (true / false)

I will need to check with RAP experts, but I am not sure that those properties are transferred to the RAP layer. This is a precondition in order for you to be able to style the component.

This reminds me of this conversation we have about the default button of a form. This information is missing in the Scout model. Kind of limitation, but your problem might be unrelated.

By the way, you seem to have a nice Scout application. Is it already deployed in production?

Report message to a moderator

Re: How to set a backgroundcolor to a specific button in RAP [message #1440643 is a reply to message #1440624]

Wed, 08 October 2014 16:46

Michiel Arentsen

Messages: 11
Registered: October 2014

Junior Member

Hi Jeremie,

Thanks alot for looking into it. The default button issue is not directly related, but would be nice to have though.

I found out in this forum that styling a formtoolbutton in RAP is done by adding the class name of the formtoolbutton in the CSS, like for a formtoolbutton called UserSetingsTool i can use:

Button.toolButton-UserSettingsTool {
..}

But this doesn't work for a standard button, or i am missing something.. Confused

The application is not yet in production, we are working on converting an Oracle Forms application to Scout..

Thanks again in advance for consulting your RAP experts.
Michiel

Report message to a moderator

Re: How to set a backgroundcolor to a specific button in RAP [message #1443239 is a reply to message #1440643]

Sun, 12 October 2014 11:20

Michiel Arentsen

Messages: 11
Registered: October 2014

Junior Member

any hint?

Report message to a moderator

Re: How to set a backgroundcolor to a specific button in RAP [message #1443940 is a reply to message #1443239]

Mon, 13 October 2014 12:39

Jeremie Bresson

Messages: 1252
Registered: October 2011

Senior Member

I got this input from Daniel Wiehl.

In the RwtEnvironment, the method createFormField(..) is called for every scout-field. This is where the corresponding Rwt-Widget is instantiated.
If you have a way to recognize your button, you can add additional metadata to the Widget: RWT.CUSTOM_VARIANT seems to do, what you are looking for.

Here an example (for Desktop):

import org.eclipse.rap.rwt.RWT;
import org.eclipse.scout.rt.client.ui.form.fields.IFormField;
import org.eclipse.scout.rt.client.ui.form.fields.button.AbstractOkButton;
import org.eclipse.scout.rt.ui.rap.AbstractStandaloneRwtEnvironment;
import org.eclipse.scout.rt.ui.rap.form.fields.IRwtScoutFormField;
import org.eclipse.swt.widgets.Composite;
import org.eclipsescout.demo.minicrm.client.ClientSession;

public class StandaloneRwtEnvironment extends AbstractStandaloneRwtEnvironment {

  public StandaloneRwtEnvironment() {
    super(Activator.getDefault().getBundle(), ClientSession.class);
  }

  @Override
  public IRwtScoutFormField createFormField(Composite parent, IFormField model) {
    IRwtScoutFormField rwtField = super.createFormField(parent, model);
    if (model instanceof AbstractOkButton) {
      rwtField.getUiField().setData(RWT.CUSTOM_VARIANT, "OkButton");
    }
    return rwtField;
  }
}

I hope this helps you. Do not hesitate to continue the discussion.

Report message to a moderator