Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Remote Application Platform (RAP) » CSS Styles for Custom Widget(How to apply CSS to Custom Widgets)
CSS Styles for Custom Widget [message #1697767] Mon, 08 June 2015 10:03 Go to next message
Stefan Weiser is currently offline Stefan WeiserFriend
Messages: 55
Registered: February 2012
Member
Hello,

I have a custom widgets (e.g. a button) and would like to style it via CSS in RAP. I followed several descriptions, but had no luck. Several native widgets work fine. Following scenario:

I have the class TestButton (package com.test.widgets), which is only a Composite holding a Label with a text (experimental).

I created the internal package com.test.widgets.internal.testbuttonkit holding TestButton.default.css and TestButton.theme.xml. The XML looks as follows:
<theme>
	<element name="TestButton" description="Test buttons">
		<property name="color" description="Text color for custom buttons" />
		<property name="background-color" description="Background color for custom buttons" />
		<state name="hover" description="Applies while the user hovers over a button." />
	</element>
</theme>


Furthermore I registered the widget in the ExtensionPoint org.eclipse.ra.ui.themeableWigets with id = "TestButton".

When starting the application the custom widget applies the styles of the native widgets (background for the Label) and does not apply its own style:
TestButton {
	background-color: green;
}

TestButton:hover {
	background-color: gray;
}

Button {
	background-color: red;
}

Button:hover {
	background-color: yellow;
}

Label {
	background-color: green;
}

Label:hover {
	background-color: gray;
}


How is it possible to style custom widgets? What is my mistake?
Re: CSS Styles for Custom Widget [message #1697830 is a reply to message #1697767] Mon, 08 June 2015 17:15 Go to previous messageGo to next message
Ivan Furnadjiev is currently offline Ivan FurnadjievFriend
Messages: 2426
Registered: July 2009
Location: Sofia, Bulgaria
Senior Member
Hi Stefan,
your description of what you did is perfectly fine. As a working example
you could look at RAP Forms bundle. There are couple of custom themeable
widgets like FormText or Hyperlink.
HTH,
Ivan

--
Ivan Furnadjiev

Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/

Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
Re: CSS Styles for Custom Widget [message #1697851 is a reply to message #1697830] Tue, 09 June 2015 04:36 Go to previous messageGo to next message
Stefan Weiser is currently offline Stefan WeiserFriend
Messages: 55
Registered: February 2012
Member
Hi Ivan,

thx for the hint.

I continued debugging and found the class ThemeDefinitionReader where I can identify that the TestButton.theme.xml gets parsed correctly, containing the defined properties. Unfortunately I do not understand where the CSS properties are loaded, parsed and interpreted. Hopefully I'll get more involved and understand, why my code is not working as expected.

Do you have further hints, how to debug the problem?
Re: CSS Styles for Custom Widget [message #1697852 is a reply to message #1697830] Tue, 09 June 2015 05:01 Go to previous messageGo to next message
Stefan Weiser is currently offline Stefan WeiserFriend
Messages: 55
Registered: February 2012
Member
Hi again,

the problem seem to be situated in the handling of the foreground- and background-color. I have no problem to define the border for the custom control, as it gets picked up in getBorder() and goes though AbstractThemeAdapter.getPrimaryElement(...), and finding the correct property.

Is there any specific behavior for the foreground- and background-color? Is it possible to style the foreground- or background-color of a Compound Widget, without defining custom variants for the inner widgets (which should be hidden)?
Re: CSS Styles for Custom Widget [message #1697856 is a reply to message #1697852] Tue, 09 June 2015 06:01 Go to previous messageGo to next message
Ivan Furnadjiev is currently offline Ivan FurnadjievFriend
Messages: 2426
Registered: July 2009
Location: Sofia, Bulgaria
Senior Member
Hi,
there is nothing special about these properties. They must be named
"color" (not foreground) and "background-color" in order to be parsed by
the PropertyResolver class. Also make sure that you don't set
foreground/background color by the code. The colors set by the code will
override the colors set by the theme.
HTH,
Ivan

--
Ivan Furnadjiev

Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/

Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
Re: CSS Styles for Custom Widget [message #1697978 is a reply to message #1697856] Wed, 10 June 2015 04:38 Go to previous messageGo to next message
Stefan Weiser is currently offline Stefan WeiserFriend
Messages: 55
Registered: February 2012
Member
Hi Ivan,

I'm sorry but that's not the situation. Have a look at the Code-Snippet in the attachment. There I have a custom control CanvasButton, where I set the color and the background-color.

When using RWT.CUSTOM_VARIANT with "canvas", everything works fine by using Composite.canvas in CSS.

When using CanvasButton in CSS, the color and background-color is not recognized. When I get the color manually by calling CanvasButton.this.getForeground() I receive the correct color as defined. The problem is demonstrated in the attachement. The color yellow is displayed correctly (setting foreground in GC), the background-color is not displayed correct (should be black).

Path of EntryPoint: /test

[Updated on: Wed, 10 June 2015 04:43]

Report message to a moderator

Re: CSS Styles for Custom Widget [message #1697990 is a reply to message #1697978] Wed, 10 June 2015 07:43 Go to previous message
Ivan Furnadjiev is currently offline Ivan FurnadjievFriend
Messages: 2426
Registered: July 2009
Location: Sofia, Bulgaria
Senior Member
Hi Stefan,
some comments on your code:
1. Using extension point to add themeable widget only works when
Workbench is used.
2. As you are using application configuration you must specify the theme
contribution and the themeable widget in your AppplicationConfiguration
class:
application.addStyleSheet( RWT.DEFAULT_THEME_ID, "theme/theme.css",
loader );
application.addThemeableWidget( CanvasButton.class );
If you problem persists please file a bugzilla and we will look on it.
Regards,
Ivan

--
Ivan Furnadjiev

Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/

Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
Previous Topic:how to custom error page instead of error 500
Next Topic:Scrollpane paint problem with RAP 3.0 RC3
Goto Forum:
  


Current Time: Tue Apr 16 05:31:54 GMT 2024

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

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

Back to the top