Eclipse Community Forums: Eclipse Scout » Change Icon of checkable Table

Home » Eclipse Projects » Eclipse Scout » Change Icon of checkable Table

Change Icon of checkable Table [message #1060221]

Thu, 23 May 2013 11:14

Eclipse User

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 1395 times)

Re: Change Icon of checkable Table [message #1060275 is a reply to message #1060221]

Thu, 23 May 2013 15:46

Eclipse User

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 02:43

Eclipse User

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 07:27

Eclipse User

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 03:00

Eclipse User

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

Attachment: CheckBoxTableCheckBox.PNG
(Size: 9.55KB, Downloaded 1288 times)

Re: Change Icon of checkable Table [message #1061263 is a reply to message #1060574]

Thu, 30 May 2013 16:57

Eclipse User

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 09:30

Eclipse User

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 10:18

Eclipse User

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:

-=] Back to Top [=-

Current Time: Tue Jul 22 18:13:17 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter