Hybrid View

  1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    15
    Vote Rating
    0
    shashank_a is on a distinguished road

      0  

    Default Customizing themes in Sencha GXT 3.0 X(Applying themes to the GXT 3.0X applications)

    Customizing themes in Sencha GXT 3.0 X(Applying themes to the GXT 3.0X applications)


    Hi all,

    Can any one provide me some heads up or some information in customizing the themes in GXT 3.0.

    Customizing means how can we apply only colors to the component background instead of maintaining static images with different states(Select state, over state, Inactive state etc.,)

    I tried with extracting the jar file and make my changes to various styles and and adding those files back to the jar and importing jar to my application and checking whether I made appropriate change or not. This is taking a hell lot of time as it is involving lot of permutations to be executed.

    And one more important thing is that their are static images that are used as borders(top, left, right and bottom) so if I change the background color of a component it will applied only to the background of of the text that I'm displaying no to the entire background of the component because of above statement(maintaining static images). In case of a text button it is even more worse as their is some layer or static images being displayed behind the text on the button, If I apply background-color property it applies behind that layer(I can see the color that I had applied from behind the rounded corners of the button I had created).

    Following a simple issue what I'm trying to explain above.
    Attachment 42903
    Beside the text(Dashboard) in the tab panel are the static images that are applied using CSS by the framework.

    Thanks in advance.
    Attached Images

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Vote Rating
    89
    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 short version is that if you want to use the GXT TextButton class, and style it to your own specific needs, then you need to completely style it. One option is to start with the built in themeing, and change in one piece at a time. Another is to use one of the GWT button classes, and have a simpler dom to work with, and not worry about cross browser differences.

    Longer answer, assuming you stick with GXT buttons:
    At present, the button is styled by 9 images, in the typical 9-box pattern:
    Code:
      top-left  |  top-center   |  top-right
    ------------+---------------+-------------
    middle-left | middle-center | middle-right
    ------------+---------------+-------------
    bottom-left | bottom-center | bottom-right
    This enables each corner to be rounded, even for browsers that don't support rounded corners. Likewise the middle sections might have gradients to let them be drawn differently for browsers that don't support that feature (or are slow to draw them).

    Nine images for each button. Now multiple that by three possible states that a button can be in - normal, over (or focused), and active (or toggled) gives us 27 different images that need to be customized.

    If all browsers supported alpha transparency, we could make these images transparent and let background-color set a color that could bleed through - this wouldn't be quite perfect (rounded corners again), but we could get close.

    We're working on a theme builder that will allow more control over styles and will generate images for the browsers that need it, and possibly use CSS3 for for those that can support it.

    In the mean time, as I said, if you want the same button api/lookandfeel/cross browser consistency that gxt's TextButton offers, making the 9-box images is really the way to do it. Editing those appearances gives you as much control as possible as to how any given widget or cell should be rendered. You don't need to use images at all, and can even use your own html structure, such as just drawing a <button> and giving it some css styling.

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    15
    Vote Rating
    0
    shashank_a is on a distinguished road

      0  

    Default


    Thanks Colin for the reply.

    Is that the only way we can apply styles to GXT components since it will be a lot of hectic work to go that way round?

    When will be theme builder is being released?

  4. #4
    Sencha User
    Join Date
    May 2011
    Location
    Netherlands
    Posts
    44
    Vote Rating
    1
    rcbeuker is on a distinguished road

      0  

    Default graphical design

    graphical design


    Hello Colin,

    Styling is getting more and more important for our customers... What are your recommendations for graphic adjustments regarding to GXT3 programs? We want to outsource this to graphical designers, who want to know the possibilities and procedures for this.

    "We're working on a theme builder"

    Is there already a demo or something?

    Regards,

    Roland Beuker

Thread Participants: 2