1. #1
    Sencha User abshnasko's Avatar
    Join Date
    Sep 2011
    Posts
    44
    Vote Rating
    0
    abshnasko is on a distinguished road

      0  

    Default How to create a GXT theme?

    How to create a GXT theme?


    I am finding no good resources on how to create themes for either GXT 2.x or GXT 3.0. I've seen exactly two forum posts on this topic: one from 4 years ago that is beyond irrelevant now, and one from sven a few months ago that didn't work and he never followed up on how to fix the problems people were having.

    Can someone from Sencha provide some resources on how to create a custom theme for GXT 3? All GXT apps I've ever seen are either blue or grey!

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,634
    Vote Rating
    79
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    What specifically are you looking for? How to make an implementation for each appearance interface in GXT that is specific for your needs?

    The basic idea is that GXT components are not drawn by the widget subclass creating the exact html structure and css styles that it required, but leaving that work to a delegate called an Appearance. That appearance is responsible for any html or styles it intends to use, as well as providing the widget or cell with specifics about already drawn objects so they can be updated interactively.

    As an example, lets look at TextFieldAppearance - it doesnt define much by itself, but it extends ValueBaseFieldAppearance:
    Code:
      public interface TextFieldAppearance extends ValueBaseFieldAppearance {    void onResize(XElement parent, int width, int height);
    
    
        void render(SafeHtmlBuilder sb, String type, String value, FieldAppearanceOptions options);
      }
    The render method is used to actual draw the field, based on the type (text or password) the value, and a few customizable features in the options object (name, readonly status, empty text, etc). A trivial implementation might just return an input:

    Code:
        interface SimpleTextField extends XTemplates {      @XTemplate("<input type='{type}' value='{value}' />")
          SafeHtml render(String type, String value);
        }
        @Override
        public void render(SafeHtmlBuilder sb, String type, String value,
            FieldAppearanceOptions options) {
          SimpleTextField f = GWT.create(SimpleTextField.class);
          sb.append(f.render(type, value));
        }
    Other methods would be responsible for drawing other details like focus/blur, valid/invalid, dealing with size changes (if that matters for your implementation), changing state from readonly to read/write, etc. You have the ability to add any extra features or content without needing to write slow dom manipulation commands after render is complete (though for simple cases this can still be done, it just isn't the only option any more). You can even avoid using CssResources and ClientBundles for your styles and images to use instead external files, defined at runtime, at the cost of extra files being downloaded at runtime.

    Our built-in appearance classes come with extra constructors for providing your own ClientBundles complete with other images or stylesheets so you can override just one (or all) of the styles, but leave the html structure totally untouched. This could be done in Ext GWT 2.x, but meant that you _always_ loaded the unused css as part of gxt-all.css, whereas now the compiler may detect that you never use the default, and it will skip downloading them.

    When you define a new Appearance implementation, you can either pass it into the component or cell constructor to use only in that one case, or you can set it as the default by making a replace-with rule in your module file.

    Code:
      <replace-with class="my.project.client.appearance.CustomButtonAppearance">    <when-type-is class="com.sencha.gxt.cell.core.client.ButtonCell.ButtonCellAppearance" />
      </replace-with>
    Check out the Desktop project for a few more examples of alternate appearance creation.

    Appearance building is an important goal going forward - so far we've built the interfaces so all of this is possible, but haven't yet created many implementations as our first goals have been to get it working and in the hands of the developer community. With 3.0.0 released, expect more work in this area, but we're also hoping if it is a priority for users that we'll get more posts from developers sharing the work they've done, and successes and issues they have.

  3. #3
    Sencha User abshnasko's Avatar
    Join Date
    Sep 2011
    Posts
    44
    Vote Rating
    0
    abshnasko is on a distinguished road

      0  

    Default


    Pardon my ignorance.

    I've read about Appearance, but I don't understand how that helps me create a unified theme for my application. In most web frameworks, you don't have to style each individual type of thing. To effect a style change for a FormPanel, it should be sufficient to style Panel. Is this accurate?

    Where does the CSS go? Where is a css bundle associated with an "Appearance"?

    Thanks in advance. I just hope creating a theme isn't as onerous as it seems...

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,634
    Vote Rating
    79
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    Onerous is such a strong word . And I wouldn't call it ignorance, only that you haven't learned it yet - this is the first official release, so not everyone has all the details yet, and the appearance pattern isn't used heavily even within GWT code, though we've found it to be extremely helpful in being flexible with our styling and theming.

    In typical frameworks, you define one more more css files, with images that you generally get to sprite together on your own. Some tools cover most of this for you, but can leave you with long (inefficient) css declarations:
    Code:
    .grid .row .cell .button {...}
    CssResource gives us obfuscated non-colliding names so css classes can be simply declared and then will be scoped to within a single CssResource automatically. Images will be sprited in cases where it is needed, or inlined otherwise. The stylesheets themselves will be loaded (and hopefully cached if you have that set up) into the main download, so that a very minimal set of files is downloaded when your application is run. Styles can be defined to only take effect in a particular browser. And CssResource/ImageResource instances that are never use in your application will be compiled out automatically (as well as styles only used by another browser or locale), courtesy of the GWT compiler.

    All of this magic comes at an 'onerous' cost - we need to tell it which images and stylesheets we use with which widgets/cells, and make the method invocations (ensureInjected typically) that indicate that we need those strings. This isn't our idea originally, we're borrowing heavily from GWT examples such as how the DataGrid gets its styles and the appearance patter is from http://code.google.com/p/google-web-...arance_Pattern.

    If there is significant pushback from the community we could look into a ClientBundle-less set of appearances that lets you define all possible css styles, but this would require the return of a number of browser-specific hacks to make different browser select only specific styles (resulting in longer selector declarations). Much like good coding practices often discourage extremely large methods or types, good ClientBundle usage almost always encourages css files with much smaller scope, and grants better compiled characteristics as a result, as well as improved maintainability - turn on pretty styles, and you know exactly where a particular style is coming from.

    Code:
    <set-configuration-property name="CssResource.style" value="pretty" />
    Take a look in our default Blue theme for how this gets set up - ContentPanel uses ContentPanelBaseAppearance which is extended by the specific BlueContentPanelAppearance. and as FramedPanel extends from ContentPanel, so does FramedPanelBaseAppearance extend from ContentPanelBaseAppearance to reuse the styles and images it can. Following CssResource rules, CSS files are in the same package as the ClientBundle that references them, or else the ClientBundle will have @Source annotations that specify where the files exist.

  5. #5
    Sencha User abshnasko's Avatar
    Join Date
    Sep 2011
    Posts
    44
    Vote Rating
    0
    abshnasko is on a distinguished road

      0  

    Default


    Ok, I'm diving into this. Appearance is a bit obtuse, but has a functional elegance to it that I like so far. Can you have a quick look and tell me if I'm doing this right? I ask for some hand-holding due to the nascency of this technology and thus the appropriate lack of documentation / examples. The documentation I've seen on Sencha's site (on the GXT3 blog post) pertains to creating a new Widget using templates and html and such. I just want to apply an Appearance to a TextButton that sets some different CSS styles. Is this mindset at least sensible?

    As a learning project, I'm trying to create an Appearance for TextButton. I guess I need to send it a ButtonCell that uses my appearance, right? So here we go:

    Code:
    TextButton btn = new TextButton(new TextButtonCell(new PrimaryButtonAppearance());
    Is this the correct (and most consice) way to set a Widget's appearance?

    Question: is there any way to designate the Appearance of a widget through UiBinder?

    EDIT: As I mentioned I want to change the CSS for my button. I'm kinda desperate so I'm looking through the GXT source. I found something called ButtonCellResources, which has a ButtonCellStyle. Am I on the right track?

  6. #6
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,966
    Vote Rating
    130
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Is this the correct (and most consice) way to set a Widget's appearance?
    Not for all widgets. Non cell widgets can take it directly into the constructor, but for a TextButton it is.

    Question: is there any way to designate the Appearance of a widget through UiBinder?
    Currently not always directly. We are missing a lot of UiConstructor annotations. You should be able use UiFactory to still make it work. However the Appearance would be in the java code.

    Am I on the right track?
    Yes, these are the interfaces you will need to extend. If you want to change the css, you will also need to extend ButtonCellResources. You will need to override the style method. Make sure that one returns your new interface extending ButtonCellStyle. Although it extends it, you have to directly return the new extended ButtonCellStyle.

    A good starting point is to look at the blue theme. This one extends the base theme which you also should extend if you want to change the colors only.

  7. #7
    Sencha User
    Join Date
    May 2012
    Location
    Paris
    Posts
    10
    Vote Rating
    0
    anass_benjelloun is on a distinguished road

      0  

    Default looking for a theme selector in GXT 3.0

    looking for a theme selector in GXT 3.0


    Hello,
    thank you in advance, I have a question about the ThemeSelector Class that exists in EXT-GWT 2.2.5
    I'm really a beginner developer , and I want to develop the same class for GXT 3.0 , in fact this class extends ComboxBox<Theme>. but I don't know How to deal with this. can you help me ?

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar