Home » Eclipse Projects » Remote Application Platform (RAP) » Contributing to the default theme for RWT
|
| Re: Contributing to the default theme for RWT [message #736313 is a reply to message #736166] |
Thu, 13 October 2011 21:57   |
 Rüdiger Herrmann
Messages: 335
Registered: July 2009 |
Senior Member |
|
|
Sebastian,
since about 2011-10-06, the API of Configurator changed. It is now
called ApplicationConfigurator and allows to add style sheets to a
common theme-id. If you update, you should be able to call
ApplicationConfigurator#addStyleSheet() to contribute your styles.
Please file a buzilla if it doesn't work.
HTH
Rüdiger
On 13.10.2011 19:59, Sebastian Bauer wrote:
> Hello,
>
> I like to contribute a style sheet to the default RWT theme, but I'm not
> able to figure out how this is done. I realize that there is a method
> addThemeContribution() in the Context of the Configurator, but at this
> time, the default theme has not been initialized and thus cannot be
> found. Note that it is possible that I did not understand everything
> correctly regarding themes in RWT.
>
> What I want to achieve at the end of the day is to change the colors of
> some specific buttons (I think I figured out how this can be done using
> setData() on the Button, but this apparently needs some css passed to
> the client)
>
> Thanks a lot!
>
> Sebastian
--
Rüdiger Herrmann
Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/
Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
|
|
|
| Re: Contributing to the default theme for RWT [message #736611 is a reply to message #736166] |
Fri, 14 October 2011 06:42 |
Ivan Furnadjiev
Messages: 2426
Registered: July 2009
Location: Sofia, Bulgaria |
Senior Member |
|
|
Hi Sebastian,
you could do it with an extension point as well:
<extension
point="org.eclipse.rap.ui.themes">
<themeContribution
file="css/addition.css"
themeId="org.eclipse.rap.rwt.theme.Default">
</themeContribution>
</extension>
HTH,
Ivan
On 10/13/2011 8:59 PM, Sebastian Bauer wrote:
> Hello,
>
> I like to contribute a style sheet to the default RWT theme, but I'm
> not able to figure out how this is done. I realize that there is a
> method addThemeContribution() in the Context of the Configurator, but
> at this time, the default theme has not been initialized and thus
> cannot be found. Note that it is possible that I did not understand
> everything correctly regarding themes in RWT.
>
> What I want to achieve at the end of the day is to change the colors
> of some specific buttons (I think I figured out how this can be done
> using setData() on the Button, but this apparently needs some css
> passed to the client)
>
> Thanks a lot!
>
> Sebastian
|
|
| | |
| Re: Contributing to the default theme for RWT [message #736943 is a reply to message #736816] |
Fri, 14 October 2011 13:45 |
Sebastian Bauer
Messages: 25
Registered: July 2009 |
Junior Member |
|
|
I can add now styles with the new API without problems. But I still have one difficulty.
I want to maintain three different button styles. Here, is the .css
Button.match {
border: 1px solid #A4A4A4;
border-radius: 3px;
padding: 2px 5px;
background-image: gradient(
linear, left top, left bottom,
from( #ffffff ),
color-stop( 48%, #d0f0d0 ),
color-stop( 52%, #c8e0c8 ),
to( #ffffff )
);
animation: hoverOut 500ms ease-out;
cursor: pointer;
}
Button.match:hover {
background-image: gradient(
linear, left top, left bottom,
from( #ffffff ),
color-stop( 48%, #d0f0d0 ),
color-stop( 52%, #c8e0c8 ),
to( #ccffcc )
);
}
Button.queryOnly {
border: 1px solid #A4A4A4;
border-radius: 3px;
padding: 2px 5px;
background-image: gradient(
linear, left top, left bottom,
from( #ffffff ),
color-stop( 48%, #f0d0d0 ),
color-stop( 52%, #e0c8c8 ),
to( #ffffff )
);
animation: hoverOut 500ms ease-out;
cursor: pointer;
}
Button.queryOnly:hover {
background-image: gradient(
linear, left top, left bottom,
from( #ffffff ),
color-stop( 48%, #f0d0d0 ),
color-stop( 52%, #e0c8c8 ),
to( #ffcccc )
);
}
Here is the corresponding Java code:
import org.eclipse.rwt.lifecycle.IEntryPoint;
import org.eclipse.rwt.lifecycle.WidgetUtil;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;
public class TestRWT implements IEntryPoint
{
@Override
public int createUI() {
Display display = new Display();
Shell shell = new Shell( display, 0 );
shell.setLayout(new FillLayout());
shell.setMaximized(true);
Button but0 = new Button(shell,0);
Button but1 = new Button(shell,0);
but1.setData(WidgetUtil.CUSTOM_VARIANT, "match");
Button but2 = new Button(shell,0);
but2.setData(WidgetUtil.CUSTOM_VARIANT, "queryOnly");
shell.layout();
shell.open();
while( !shell.isDisposed() ) {
if( !display.readAndDispatch() )
display.sleep();
}
display.dispose();
return 0;
}
}
The .css is correctly added by the custom ApplicationConfigurator.
If I run this test application with the latest nightly, I see two green buttons, although one of them should be red. If I hover over the button that should be red, the button appears red. If I change the order of the css definitions, the green buttons become red while hovering over the button that should be green but is red becomes green. So I suppose that my css definition at least is somewhat correct. But I'm not sure about this. Did I miss something in the definition or is this a bug of the nightly?
|
|
|
| Re: Contributing to the default theme for RWT [message #739465 is a reply to message #736943] |
Mon, 17 October 2011 14:00 |
Ivan Furnadjiev
Messages: 2426
Registered: July 2009
Location: Sofia, Bulgaria |
Senior Member |
|
|
Only a link the a bug report opened by Sebastian.
361122: Not all styles are applied properly
https://bugs.eclipse.org/bugs/show_bug.cgi?id=361122
The problem is in QxImage#hashCode, which returns same hashCode for
different gradients.
On 10/14/2011 4:45 PM, Sebastian Bauer wrote:
> I can add now styles with the new API without problems. But I still
> have one difficulty.
>
> I want to maintain three different button styles. Here, is the .css
>
>
> Button.match {
> border: 1px solid #A4A4A4;
> border-radius: 3px;
> padding: 2px 5px;
> background-image: gradient(
> linear, left top, left bottom,
> from( #ffffff ),
> color-stop( 48%, #d0f0d0 ),
> color-stop( 52%, #c8e0c8 ),
> to( #ffffff )
> );
> animation: hoverOut 500ms ease-out;
> cursor: pointer;
> }
>
> Button.match:hover {
> background-image: gradient(
> linear, left top, left bottom,
> from( #ffffff ),
> color-stop( 48%, #d0f0d0 ),
> color-stop( 52%, #c8e0c8 ),
> to( #ccffcc )
> );
> }
>
> Button.queryOnly {
> border: 1px solid #A4A4A4;
> border-radius: 3px;
> padding: 2px 5px;
> background-image: gradient(
> linear, left top, left bottom,
> from( #ffffff ),
> color-stop( 48%, #f0d0d0 ),
> color-stop( 52%, #e0c8c8 ),
> to( #ffffff )
> );
> animation: hoverOut 500ms ease-out;
> cursor: pointer;
> }
>
> Button.queryOnly:hover {
> background-image: gradient(
> linear, left top, left bottom,
> from( #ffffff ),
> color-stop( 48%, #f0d0d0 ),
> color-stop( 52%, #e0c8c8 ),
> to( #ffcccc )
> );
> }
>
>
> Here is the corresponding Java code:
>
>
> import org.eclipse.rwt.lifecycle.IEntryPoint;
> import org.eclipse.rwt.lifecycle.WidgetUtil;
> import org.eclipse.swt.layout.FillLayout;
> import org.eclipse.swt.widgets.Button;
> import org.eclipse.swt.widgets.Display;
> import org.eclipse.swt.widgets.Shell;
>
> public class TestRWT implements IEntryPoint
> {
> @Override
> public int createUI() {
> Display display = new Display();
> Shell shell = new Shell( display, 0 );
> shell.setLayout(new FillLayout());
> shell.setMaximized(true);
> Button but0 = new Button(shell,0);
> Button but1 = new Button(shell,0);
> but1.setData(WidgetUtil.CUSTOM_VARIANT, "match");
> Button but2 = new Button(shell,0);
> but2.setData(WidgetUtil.CUSTOM_VARIANT, "queryOnly");
> shell.layout();
> shell.open();
> while( !shell.isDisposed() ) {
> if( !display.readAndDispatch() )
> display.sleep();
> }
> display.dispose();
>
> return 0;
> }
> }
>
>
>
> The .css is correctly added by the custom ApplicationConfigurator.
>
> If I run this test application with the latest nightly, I see two
> green buttons, although one of them should be red. If I hover over the
> button that should be red, the button appears red. If I change the
> order of the css definitions, the green buttons become red while
> hovering over the button that should be green but is red becomes
> green. So I suppose that my css definition at least is somewhat
> correct. But I'm not sure about this. Did I miss something in the
> definition or is this a bug of the nightly?
>
|
|
|
Goto Forum:
Current Time: Wed Apr 24 18:33:06 GMT 2024
Powered by FUDForum. Page generated in 0.03527 seconds |
] 
Search
Help
Register
Login
Home
