Hybrid View

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    18
    Answers
    1
    Vote Rating
    0
    the.wizard is on a distinguished road

      0  

    Default Unanswered: Dynamic Themes For GXT 3

    Unanswered: Dynamic Themes For GXT 3


    Hi everyone,
    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,
    the.wizard

  2. #2
    Sencha User
    Join Date
    Dec 2011
    Posts
    18
    Answers
    1
    Vote Rating
    0
    the.wizard is on a distinguished road

      0  

    Default


    Hello.. no one can help me? At least can someone show me where to start digging this dynamic themes things?
    Please kindly help me.
    Thanks.

  3. #3
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Answers
    109
    Vote Rating
    88
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    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:
    Code:
    <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>
    It inherits the 'real' app, Explorer, and adds the gray theme, and replaces one additional appearance, used in a specific example - your app may not require anything like that replace-with line at all.

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    18
    Answers
    1
    Vote Rating
    0
    the.wizard is on a distinguished road

      0  

    Default


    Quote Originally Posted by Colin Alworth View Post
    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:
    Code:
    <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>
    It inherits the 'real' app, Explorer, and adds the gray theme, and replaces one additional appearance, used in a specific example - your app may not require anything like that replace-with line at all.
    Hi Colin,
    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.

  5. #5
    Sencha User
    Join Date
    Apr 2013
    Posts
    6
    Vote Rating
    0
    kym is on a distinguished road

      0  

    Default I have the same questions but no answers, sorry to say.

    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

  6. #6
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Answers
    109
    Vote Rating
    88
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    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.

Thread Participants: 2

Tags for this Thread