| Adding custom application themes [message #1699680] |
Thu, 25 June 2015 19:04  |
|
Hi All,
I'm attempting to add a custom theme to my RAP application (i'm currently using 2.3.2). I've created the CSS file in my rap plugin project in ${project_root}/themes/theme.css and added the plugin extension point in plugin.xml in ${project_root} and referenced it at themes/theme.css and gave it a theme id.
Then in my branding extension point, I added the themeId attribute with my themeId. Then I build the plugin bundle and verify the plugin.xml is at root level and themes/theme.css is in there as well.
However, the theme is not being applied to my StyledText (I added my own styledtext class which extends Text since StyledText isn't in RAP). I called setData on my StyledText for the custom variant and just to be safe added entries in the CSS for StyledText.variant_name, Text.variant_name and Widget.variant_name (since i'm not sure which one gets resolved) with a simple "text-decoration: underline" property.
Is there something else I can check or something obviously wrong with this approach?
Thanks so much!
|
|
|
| Re: Adding custom application themes [message #1700004 is a reply to message #1699680] |
Mon, 29 June 2015 15:20  |
 Tim Buschtoens
Messages: 396
Registered: July 2009 |
Senior Member |
|
|
Hi.
If you want to verify that the theme is working at all, simply create an
entry like
..test {background-color: red;}
and set a composite the custom variant, i.e.
composite.setData(RWT.CUSTOM_VARIAN, "test");
If the composite is red, the CSS is included.
Next, I don't know what exactly you are doing with that StyledText class
- not only should you generally not extend SWT controls other than
Composite or Canvas, there is little you can achieve by doing so.
Anyway, CSS theming in RAP does only support specific properties for
specific Widgets, and Text does not support text-decoration[1].
This was done this ways because, among other things, RAP handles all
kind of cross-browser issues (usually related to older IE). As of RAP
3.0 there is a way around this using JavaScript to set CSS properties
directly [2], but not in RAP 2.x.
Greetings,
Tim
[1]
http://download.eclipse.org/rt/rap/doc/3.0/guide/reference/theming/Text.html
[2]
http://download.eclipse.org/rt/rap/doc/3.0/guide/reference/jsdoc/symbols/%24.html#css
Am 25.06.2015 um 21:04 schrieb Trent Vigar:
> Hi All,
>
> I'm attempting to add a custom theme to my RAP application (i'm
> currently using 2.3.2). I've created the CSS file in my rap plugin
> project in ${project_root}/themes/theme.css and added the plugin
> extension point in plugin.xml in ${project_root} and referenced it at
> themes/theme.css and gave it a theme id.
>
> Then in my branding extension point, I added the themeId attribute with
> my themeId. Then I build the plugin bundle and verify the plugin.xml is
> at root level and themes/theme.css is in there as well.
> However, the theme is not being applied to my StyledText (I added my own
> styledtext class which extends Text since StyledText isn't in RAP). I
> called setData on my StyledText for the custom variant and just to be
> safe added entries in the CSS for StyledText.variant_name,
> Text.variant_name and Widget.variant_name (since i'm not sure which one
> gets resolved) with a simple "text-decoration: underline" property.
>
> Is there something else I can check or something obviously wrong with
> this approach?
> Thanks so much!
--
Tim Buschtöns
Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/
Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
|
|
|
| Re: Adding custom application themes [message #1700007 is a reply to message #1700004] |
Mon, 29 June 2015 15:35 |
|
Hey Tim,
You're right, I should be using composition instead of inheritance for StyledText.
Thanks for the Text CSS reference doc, I have never found this documentation, there are so many random RAP guides/docs I must have missed it. Since it doesn't support text-decoration, how else would you suggest I apply underlining based on my StyledText's underline attribute?
Thanks so much
|
|
|
| Re: Adding custom application themes [message #1700049 is a reply to message #1700007] |
Mon, 29 June 2015 19:55 |
|
First of all, I changed my styled text to encapsulate a Text object inside it instead of subclassing it.
Second of all, I set the RWT custom variant data value on the text object (like I was doing before), and updated my css to just have Text.test { background-color: red; } and rebuilt/redeployed and still nothing.
I drilled in to the eclipse/plugins folder on my tomcat instance where the war is deployed and unzipped my RAP plugin with the entry point code and verified the updated CSS file is in the jar and the plugin.xml in that jar is referencing that file correctly for a theme contribution and my branding is using that themeId.
Am I missing something here?
Thanks in advance.
|
|
|
| Re: Adding custom application themes [message #1700125 is a reply to message #1700049] |
Tue, 30 June 2015 10:12 |
Tim Buschtoens
Messages: 396
Registered: July 2009 |
Senior Member |
|
|
Okay, so first when are you using the RAP launcher you can probably more
quickly make changes and with less risk that the issue is in your
deployment.
Second, make sure your plugin.xml looks like it is described in the
developer's guide under "Registering a Theme contribution" [1].
If you want the Text widget to support text-decoration you could simply
open an enhancement request on our bugzilla, but it may be a while until
it's in a stable release. If you don't mind a hacky solution, use the
JSExecutor to set a native CSS property on the text input element. In
the developer's guide there is an example of doing this with HTML
attributes[2] (for test-ids), but it also works with CSS properties by
using "$input.css" instead of "$el.attr". (And 'text-decoration' instead
of 'test-id', of course.)
[1]
http://www.eclipse.org/rap/developers-guide/devguide.php?topic=theming.html&version=3.0#workbench
[2]
http://www.eclipse.org/rap/developers-guide/devguide.php?topic=scripting.html&version=3.0#html
Am 29.06.2015 um 21:55 schrieb Trent Vigar:
> First of all, I changed my styled text to encapsulate a Text object
> inside it instead of subclassing it.
> Second of all, I set the RWT custom variant data value on the text
> object (like I was doing before), and updated my css to just have
> Text.test { background-color: red; } and rebuilt/redeployed and still
> nothing.
>
> I drilled in to the eclipse/plugins folder on my tomcat instance where
> the war is deployed and unzipped my RAP plugin with the entry point code
> and verified the updated CSS file is in the jar and the plugin.xml in
> that jar is referencing that file correctly for a theme contribution and
> my branding is using that themeId.
> Am I missing something here?
> Thanks in advance.
--
Tim Buschtöns
Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/
Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
|
|
|
| Re: Adding custom application themes [message #1700310 is a reply to message #1700125] |
Wed, 01 July 2015 17:41 |
|
I'm now using the RAP launcher to run the application instead of building and deploying to tomcat, which is certainly a quicker, easier, and less error-prone method, thanks for the advice there.
I have been following the referenced workbench theming guide and here is what I have in my plugin.xml for the theming and branding :
<extension
point="org.eclipse.rap.ui.themes">
<theme
file="themes/theme.css"
id="theme.example.id"
name="Example Theme"/>
</extension>
<extension
point="org.eclipse.rap.ui.branding">
<branding
defaultEntrypointId="com.company.example.BasicEntryPoint"
id="com.company.example.Branding"
servletName="rapServlet"
themeId="theme.example.id"
title="Example Application">
</branding>
</extension>
Is there something wrong here?
Thanks so much.
|
|
|
| Re: Adding custom application themes [message #1700316 is a reply to message #1700310] |
Wed, 01 July 2015 18:34 |
|
Here's basically what I have in my plugin.xml, maybe there is an issue there.
<?xml version="1.0" encoding="UTF-8"?>
<?eclipse version="3.4"?>
<plugin>
<extension
point="org.eclipse.rap.ui.entrypoint">
<entrypoint
class="com.company.example.BasicEntryPoint"
id="com.company.example.BasicEntryPoint"
path="/rapApplication">
</entrypoint>
</extension>
<extension
point="org.eclipse.ui.perspectives">
<perspective
name="My Perspective"
class="com.company.example.ui.Perspective"
id="com.company.example.ui.Perspective">
</perspective>
</extension>
<extension
point="org.eclipse.ui.views">
<view
class="com.company.example.ui.MainView"
id="com.company.example.ui.MyView"
name="Main View"
restorable="true">
</view>
</extension>
<extension
point="org.eclipse.ui.perspectiveExtensions">
<perspectiveExtension
targetID="*">
<view
id="com.company.example.ui.MyView"
minimized="false"
ratio=".95f"
relationship="top"
relative="org.eclipse.ui.editors">
</view>
</perspectiveExtension>
</extension>
<extension
point="org.eclipse.rap.ui.themes">
<theme
file="themes/theme.css"
id="theme.example.id"
name="Example Theme"/>
</extension>
<extension
point="org.eclipse.rap.ui.branding">
<branding
defaultEntrypointId="com.company.example.BasicEntryPoint"
id="com.company.example.Branding"
servletName="rapServlet"
themeId="theme.example.id"
title="Example Application">
</branding>
</extension>
<extension
point="org.eclipse.equinox.http.registry.resources">
<resource
alias="/WEB-INF/resources"
base-name="src/main/resources">
</resource>
</extension>
</plugin>
|
|
|
|
Powered by
FUDForum. Page generated in 0.09057 seconds
] 
Search
Help
Register
Login
Home
