Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » scout » Change Icon of checkable Table
Change Icon of checkable Table [message #1060221] Thu, 23 May 2013 15:14 Go to next message
David Marx is currently offline David Marx
Messages: 6
Registered: April 2013
Junior Member
Hi!

When a table in scout is configured "checkable" a check box is displayed for each row, like in the following screen shot:
index.php/fa/15027/0/

In the RAP client, the style of various elements can be defined via css, e.g. the font size of table rows. I noticed the check box itself is an image (rather than a HTML element) and RAP offers the possibility to set a background image for "Table-Checkbox".

Is this supported in Eclipse Scout? Can a custom check box style be set with images and corresponding entries in the css?

Thanks in Advance,

David
  • Attachment: Table.PNG
    (Size: 5.01KB, Downloaded 451 times)
Re: Change Icon of checkable Table [message #1060275 is a reply to message #1060221] Thu, 23 May 2013 19:46 Go to previous messageGo to next message
Jeremie Bresson is currently offline Jeremie Bresson
Messages: 765
Registered: October 2011
Senior Member
David Marx wrote on Thu, 23 May 2013 17:14
Is this supported in Eclipse Scout? Can a custom check box style be set with images and corresponding entries in the css?


I do not think that you will find something as easy as CSS for RAP.

Can you indicate the renderer (and if swing the look and feel) and the version, where you want to do this?
Re: Change Icon of checkable Table [message #1060314 is a reply to message #1060275] Fri, 24 May 2013 06:43 Go to previous messageGo to next message
David Marx is currently offline David Marx
Messages: 6
Registered: April 2013
Junior Member
Hi!

The Scout version is 3.8.2 (with Eclipse Juno). I'm only interested in RAP as renderer, Swing/SWT are not used here.

For the font color I added the following to the generated theme/application.css:
Table {
color: #FF0000;
}

Also a background image for the table can set with:
Table {
background-image:url(theme/background.png);
}

I tried to achieve custom check boxes in the RAP client with:
Table-Checkbox {
background-image:url(theme/check_box.png);
}

But this has no effect.

I hope i provided all necessary information.

Thanks,

David
Re: Change Icon of checkable Table [message #1060384 is a reply to message #1060314] Fri, 24 May 2013 11:27 Go to previous messageGo to next message
Claudio Guglielmo is currently offline Claudio Guglielmo
Messages: 127
Registered: March 2010
Senior Member
Hi David

The theming does not work in this case because the rap table ui of scout does not use the checkbox mechanism provided by rwt/swt (SWT.CHECK) due to some limitations. Instead it uses the scout icon provider servies to resolve the checkbox icon.

To replace the icon with another one you have to make sure that at least one of the registered icon provider services finds your checkbox icons.

To do so just register the IconProviderService as extension in your rap-plugin with a high priority:

<extension
        point="org.eclipse.scout.service.services">
     <service
           class="org.eclipse.scout.rt.client.services.common.icon.IconProviderService"
           createImmediately="false"
           factory="org.eclipse.scout.service.DefaultServiceFactory"
           ranking="100">
     </service>

The IconProviderService loads the icons from the folder resources/icons of the host plugin, so put your icons in that folder of the rap-plugin. Make sure the names are correct ("checkbox_no.png/gif", "checkbox_yes.png/gif").

Regards
Claudio
Re: Change Icon of checkable Table [message #1060574 is a reply to message #1060384] Mon, 27 May 2013 07:00 Go to previous messageGo to next message
David Marx is currently offline David Marx
Messages: 6
Registered: April 2013
Junior Member
Hi Claudio,

many thanks for your quick answer, it works perfectly for table check boxes.

However it seems check box fields (AbstractCheckBox) are not covered by this configuration:

index.php/fa/15056/0/

Can the icon of these fields also be configured with the IconProvider? Or via CSS?

Thanks,

David
Re: Change Icon of checkable Table [message #1061263 is a reply to message #1060574] Thu, 30 May 2013 20:57 Go to previous messageGo to next message
Claudio Guglielmo is currently offline Claudio Guglielmo
Messages: 127
Registered: March 2010
Senior Member
Hi David

The checkbox field does not use the icon provider services to locate the checkbox icon, so it's not possible to change it that way, see http://git.eclipse.org/c/scout/org.eclipse.scout.rt.git/tree/org.eclipse.scout.rt.ui.rap/src/org/eclipse/scout/rt/ui/rap/form/fields/checkbox/RwtScoutCheckbox.java.

If you really want to change it you can do it with the rap css. Either create your custom theme based on the rap css (see also this post: http://www.eclipse.org/forums/index.php/t/488225/), or use the theme contribution extension point from rap and extend the scout theme. Please notice that the main purpose of the theme contribution is to specify the properties for additional components and not to change existing ones. But in your case it should work fine.

Snippet from the scout theme.
Button-CheckIcon {
background-image: url(theme/img/button/check_box.png);
}
Button-CheckIcon:disabled {
background-image: url(theme/img/button/check_box_disabled.png);
}
Button-CheckIcon:selected {
background-image: url(theme/img/button/check_box_selected.png);
}
Button-CheckIcon:selected:disabled {
background-image: url(theme/img/button/check_box_disabled_selected.png);
}

Regards
Claudio
Re: Change Icon of checkable Table [message #1062196 is a reply to message #1061263] Thu, 06 June 2013 13:30 Go to previous messageGo to next message
Urs Beeli is currently offline Urs Beeli
Messages: 335
Registered: October 2012
Location: Bern, Switzerland
Senior Member
Hi Claudio

I have added a tri-state checkbox to my project (see this thread: http://www.eclipse.org/forums/index.php/mv/msg/488397/1061827/#msg_1061827). I have this working perfectly with SWT and Swing and I have the functionality of a tri-state checkbox in RAP working, too, but RAP renders the "indeterminate" state with the same icon as the "true" state (I am using getUiField().setSelection(true); getUiField().setGrayed(true); to enable the indeterminate state).

So, my last task is to define the RAP icon for that state. I've read through this thread (and the one you linked above). However, I don't quite see how I would proceed. Specifically, can you refer me to some documentation on how to:


  • create your custom theme based on the rap css
    How do I create my custom theme? Where do I need to place my css file? Where do I need to place my images (I tried to append "theme/img/button/check_box_disabled.png" to "localhost:8082/" with any number of variations but didn't manage to even find the existing images). Can you tell me what Button-CheckIcon modifier to use for the "tri-state" icon?

  • use the theme contribution extension point from rap and extend the scout theme
    what is the theme contribution extension point and how would I extend the scout theme?

Re: Change Icon of checkable Table [message #1062211 is a reply to message #1062196] Thu, 06 June 2013 14:18 Go to previous message
Urs Beeli is currently offline Urs Beeli
Messages: 335
Registered: October 2012
Location: Bern, Switzerland
Senior Member
Answering myself after some googling:

  • the extension point is already defined in the default RAP project's plugin.xml:
    <extension point="org.eclipse.rap.ui.themes">
    <themeContribution file="theme/application.css" themeId="org.eclipse.scout.rt.ui.rap.theme"/>
    </extension>

  • the name of the CSS element to use can be found in the RAP default CSS (which is more complete than the two CSS files linked to in this post)
    for the tri-state icon it is Button-CheckIcon:selected:grayed
  • the file theme/application.css already exists and is empty, adding the following block supplied my icon:
    Button-CheckIcon:selected:grayed {
    background-image: url( theme/img/button/check-grayed.png );
    }

  • I had to create the directories img/button below the already existing directory theme
    I had first tried to place the image into the "web-resources" directory whose contents can be accessed using localhost:8082/res/... but that did not work for the images referred to in the css file (obviously with url( res/...png))


Anyway, my problem is solved, I hope my summary helps others who want to try similar things. I'll update the complete RAP solution to my Tri-state checkbox thread next week.
Previous Topic:Cannot export scout project
Next Topic:Focusable field in Swing and SWT
Goto Forum:
  


Current Time: Fri Oct 24 19:07:38 GMT 2014

Powered by FUDForum. Page generated in 0.04647 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software