13 Mar 2013 2:04 AM #1
Unanswered: Dynamic Themes For GXT 3
I need help for controlling theme in GXT 3. When I still use GXT 2, I can write one application, and then deploy the application with different theme, Let say the first application using default theme (blue), and the other deployed using custom theme (ie. red), all thanks to the css theme. Now in GXT 3, I read that the theme must be done in compile time, and what I understand from that point is I have to compile and build twice for creating a different war package with different theme. Is there any way that I can still achive this dynamic theme in GXT?
Oh and also, I look at the GXT 3 explorer demo, it has no theme combobox at top right of the view, something that is missing when I take a look at GXT 2 explorer demo.
Please kindly advice me.
Thanks & Regards,
18 Mar 2013 5:44 PM #2
Hello.. no one can help me? At least can someone show me where to start digging this dynamic themes things?
Please kindly help me.
21 Mar 2013 2:28 PM #3
- Join Date
- Feb 2009
- Vote Rating
The combo box in GXT 2 reloads the app, and uses a new css file when it comes back up - in the same way, both http://www.sencha.com/examples/explorer-blue.html and http://www.sencha.com/examples/explorer-gray.html are the same except for those themeing details. We didn't add a combo box to switch between them, but could for a future version of the explorer.
To make the gray explorer module, this is all we did:
<module rename-to='explorerGray'> <inherits name='com.sencha.gxt.explorer.Explorer'/> <inherits name='com.sencha.gxt.theme.gray.Gray'/> <replace-with class='com.sencha.gxt.explorer.client.chart.GrayThemedChartAppearance'> <when-type-is class='com.sencha.gxt.explorer.client.chart.ThemedChartExample.ThemedChartAppearance'/> </replace-with> </module>
31 Mar 2013 6:24 PM #4
Thanks for answering my question.. Now from your explanation, what I understand is, I still have to change the gwt.xml file everytime I need to change the theme, am I right? What I want is, I compile the application once (ie. I set it to gray theme), and then compile it to a .war file to deploy to web server (ie. tomcat). Then I just need to modify the gray css file in my web server to change the theme to any custom theme I want. In GXT 2 this is a simple task to do, but in GXT 3 I don't sure about it. So please help me, how to achieve this goal? Thanks.
23 Apr 2013 2:53 PM #5
I have the same questions but no answers, sorry to say.
I need to be able to dynamically change the background color of a widget to yellow, for an alert, and switch it back to normal after n seconds. I also need to allow the user to select different colors (aka themes) but I do not know ahead of time what colors would be selected. I expected to be able to offer perhaps 4-6 background colors for each window in a desktop application. And user wants to have nighttime vs daytime settings. I could easily see how to do this earlier, via css. I have no idea how to do it now without a tremendous amount of coding. How is this an improvement over gxt 2?
Need quick advice please
25 Apr 2013 11:31 AM #6
- Join Date
- Feb 2009
- Vote Rating
kym - you can still do all of this via CSS - have you tried it? Create a css file, either with or without CssResource, and change the css class name on the widget each time the color needs to change. This is how you had to do it in GXT 2, this is how you do it with GXT 3.
Or, just change the backgroundColor property of the style object.
How did you do this in 2? Can you show how you tried to do the same thing in 3?
The theming point is totally different - to change a theme in 2.x, you would load another css file into the page, which would cause it to re-render each dom element, but would not necessarily re-layout the app, which could cause issues. GXT 2 didn't really 'support' changing the theme on the fly, it just happened to work. The GXT 2 process to change themes was expensive for the browser to change, the 3 process takes more compile time but is easier for the browser.
In general, this is a big theme of GXT 3 - to better follow the general GWT directive of using the compiler to produce code that is built for the browser. It does require an extra file to declare 'this app, but with that theme', and it does require an extra compile, but once this is done, you have finished, optimized apps that only run the code that is needed to get the app going with that theme.
With bug fixes present in GWT 2.5 an 2.5.1, there is another option available - if you set the configuration property "CssResource.style" to "stable-shorttype" or "stable", you will get consistent (and unoptimized!) css class names, so that you can build your own external css files using those classes, and load them on the fly as you see fit. As with GXT 2, as long as those only change colors after the app is loaded, you should be fine, but if sizing or paddings are changed, layouts may need to be performed, which you'll need to kick off manually.
5 Aug 2014 6:45 AM #7
Need your help on achieving nighttime vs daytime settings of Themes Via Css
I'm bit new to GXT and I'm using GXT 2.3. Would appreciate if you can share the idea as in to how change themes dynamically via css in GXT 2.X versions. Specifically quoting your phrase "user wants to have nighttime vs daytime settings. I could easily see how to do this earlier, via css". Can you please help me in knowing how can we achieve this in detail.
Thanks in advance.