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.

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

      0  

    Default Dynamic changing of color and/or font

    Dynamic changing of color and/or font


    I have a .css that specifies color and font for a text area. One setting is Green, the other is White. When I get new data, I tried doing ta.setStyleName("newData") with the newData in my css file looking like:

    .newData{
    background-color: Green;
    font-size: 16px;
    }

    Is this what you meant?

    This did not have any effect. The .css is being used and referenced in the program's html. I have also
    tried to set the window backgrounds to different colors. This has an impact only when using the gray
    theme.

    Secondly, I had put the theme in my program's gwt.xml file to the blue theme and then replaced it
    with gray. This is in the xml file that is in src above the directory containing my code. I found that I
    got only the title bars in my new windows to automatically be created with the color specified in
    that .css. When I use "<inherits name='com.sencha.gxt.theme.gray.Gray'/>" in this file, the textarea
    settings do nothing, still, but my window's title bar obtains the color in the .css. I tried using the
    theme.base.Base and theme.blue.Blue, but they do nothing different from each other. They have the
    blue look and nocolors on title bar that I get when using Gray theme.

    I don't think it is safe to count on the gray theme because it is likely a bug in the sencha theme code
    that has my colors work for the title bar. Also, it does not fully do what I want, anyway.

    So how can I just simply set the color and font?

    I have only been able to have it work in google toolkit. I had not done it in gxt 2, but I interpreted the
    docs on gxt 3 to imply that this was my problem with setting colors - the change to use themes. But if
    you think this is something easy to do, I would much appreciate some further information about
    which files need to be changed, or perhaps the order of them being loaded by the browser makes a
    difference (how does one change that?). I will go back to a simpler example and see what happens
    when I do that.

    Help would be appreciated as we are planning to purchase license but are holding off until I get these
    requirements handled.

    Best,
    Kym

  8. #8
    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


    I can't say that I would expect this to work in 3.x, mostly because I can't even get it to work in 2.x. Here is what I tried:

    Add your style to a css file:
    Code:
    /*style.css*/
    .newData{
      background-color: Green;
      font-size: 16px;
    }
    Load that css (and gxt-all.css, and the app itself) in a html file
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <title>Test App</title>
        <link rel="stylesheet" type="text/css" href="gxt/resources/css/gxt-all.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script language='javascript' src='test/test.nocache.js'></script>
      </head>
      <body>
      </body>
    </html>
    Make a simple app that uses that css (using addStyleNames rather than setStyleNames so I don't delete existing css classes):
    Code:
    public class Test implements EntryPoint {
    
      public void onModuleLoad() {
        TextArea textarea = new TextArea();
        textarea.addStyleName("newData");
        RootPanel.get().add(textarea);
      }
    }
    Or am I missing something, and you *are* able to make that work in 2.x?

    As near as I can tell, you aren't struggling with GXT 3 styling, you are struggling with CSS itself. The css rule doesn't really make sense, no matter which GXT version it is applied to, or how themes are achieved in it. The rule, as written, is trying to style the element the class is set on, while it *should* be styling the textarea element itself. Here is one way this could be achieved (works in both GXT 2 and 3):
    Code:
    .newData textarea{
      background-color: Green;
      font-size: 16px;
    }
    One exception: this does not remove the background gradient that is added by default in GXT. To do that, you must also clear out the background image. This image is not transparent, as it would prevent certain older browsers (at least IE6 and 7) from drawing correctly. Add `background-image:none;` to the above css to remove that gradient. Note also that this gradient is missing from the TextArea class in GXT 3, so at present this isn't required. I suspect this is a bug, and am looking into it.

    This isn't a question of GXT 3 not 'improving' over GXT 2. The improvement comes in the form of a) making it easier to maintain complex changes to the appearance of a widget, and b) the compiled output of your application, including those styles which your app requires. While (as described in my last post) it is not required to follow this appearance pattern, it *is* unfortunately necessary to understand CSS in order to write it. I don't say this to be rude, but to point out that there is more going on here than your simplified problem seems to tell.

    Your issue with Window is almost certainly related, though without seeing the CSS, I can't say for sure. In order to build the Window so that it has rounded corners and the edge effects used in our default themes but still make it work cross-browser, many elements need to be added to the dom, each with particular styles. In this case (I haven't tested, this post is giant already), I believe you need to style the element accessible via the getBody() method to get the central region of the window. Your situation may be different, I'd need to see what you've tried and how your widgets (i.e. your html structure) is set up to be more specific.

    I hope this helps in explaining that this isn't complexity for the sake of complexity, but the fact that CSS isn't quite so straightforward, and that supporting such a variety of browsers requires some knowledge of those browsers when you delve deeper than just assembling widgets.

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

      0  

    Default Dynamic changing of color

    Dynamic changing of color


    Thanks so much for clarification about .css. I also have mine working with the change you suggested. My apologies for that, I do not know css that well, so the definition of the element is not clear to me.

    Now, regarding the window title bars getting colors as per the .css, that is interesting because I am only
    specifying the style name in the css (as I was doing for the textarea).

    So I have:
    .window1{
    background-color: Green;
    }
    .window2{
    background-color: Yellow;
    }
    ...
    ...

    With setting of style done this way:
    appWindow = new Window();
    ...
    ...
    appWindow.setStyleName("window1");
    or
    appWindow.setStyleName("window2");
    etc.

    This "worked" only under the gray theme and was ignored with anything else. And, even if I changed
    the css to conform to the change done for textarea, nothing changed the title bar color outside of the above setting. In the css I tried both:

    .appWindow window1 {
    background-color: Green;
    }
    or
    .window window1 {
    ....
    ....
    Only the first made the change. Don't know why.

    But thaniks for your help,
    Kym

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

      0  

    Default Setting dynamic styles

    Setting dynamic styles


    I am still pondering the issue of the classname in .css and why I needed to include the textarea into it. I thought you could define any name you want (that is valid) as the classname and just do a setStyleName() to it. Where are the rules defined for this?

    -Kym

Thread Participants: 2

Tags for this Thread