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

Help

Home

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

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

Change Icon of checkable Table [message #1060221]

Thu, 23 May 2013 15:14

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

Report message to a moderator

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

Thu, 23 May 2013 19:46

Jeremie Bresson

Messages: 1252
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?

Report message to a moderator

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

Fri, 24 May 2013 06:43

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

Report message to a moderator

Re: Change Icon of checkable Table [message #1060384 is a reply to message #1060314]

Fri, 24 May 2013 11:27

Claudio Guglielmo

Messages: 256
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

Report message to a moderator

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

Mon, 27 May 2013 07:00

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

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

Report message to a moderator

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

Thu, 30 May 2013 20:57

Claudio Guglielmo

Messages: 256
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

Report message to a moderator

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

Thu, 06 June 2013 13:30

Urs Beeli

Messages: 573
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?

Report message to a moderator

Re: Change Icon of checkable Table [message #1062211 is a reply to message #1062196]

Thu, 06 June 2013 14:18

Urs Beeli

Messages: 573
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.

Report message to a moderator

Previous Topic:	Cannot export scout project
Next Topic:	Focusable field in Swing and SWT

Goto Forum:

-=] Back to Top [=-

[ Syndicate this forum (XML) ] [

]

Current Time: Fri Apr 19 02:51:57 GMT 2024

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter