1. #1
    Sencha User
    Join Date
    Jun 2013
    Location
    Stockholm, Sweden
    Posts
    7
    Vote Rating
    0
    henkaa is on a distinguished road

      0  

    Default Switching from GWT 2.4.0 to GWT 2.5.1 destroys my layout

    Switching from GWT 2.4.0 to GWT 2.5.1 destroys my layout


    Hi all.
    I have made some own form widgets (i hope i use the right term here) extending the AdapterField. My widgets are basicly collections of standard form fields working together with logic. Last in my constructors I do a setWidth(150).

    When I use GWT 2.4.0 as a base, my widgets renders nicely and gets the width of 150px (as I expect it to be).
    Now, I upgraded my GWT to 2.5.1 (still using the same GXT 3 and same code) and the widgets are no longer 150px. they seem to stretch more, which in turn mess up the rest of the layout. The widgets seem to be internally intact, they just stretch to have higher width (ie take up the space they can inside the FieldLabel I put them in).

    Does anyone know of any changes made that I have missed or does anyone has any other ideas on what I do wrong here.

    My development is made in Eclipse with the help of the GDT and I use Google Chrome as "first" browser to test in.

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,732
    Vote Rating
    90
    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


    What is GDT? Which GXT version are you using? We haven't seen any changes with using GWT 2.4 vs 2.5 so far, so any more light you can shed on this would be great.

    Can you describe your form setup - which GWT and GXT widgets are you using in it? Can you share the basic setup here so we can try to run it and see what changes?

  3. #3
    Sencha User
    Join Date
    Jun 2013
    Location
    Stockholm, Sweden
    Posts
    7
    Vote Rating
    0
    henkaa is on a distinguished road

      0  

    Default Detailed facts

    Detailed facts


    Hi.
    I saw the term somewhere on a forum so I re-used it here thinking ppl knew, but GDT I think stand for (Google Developer Tool) ie the Google Plugin for Eclipse that you can create, build and run GWT with

    My platform is built on the GWT that follows with it (one is 2.4.0 and the other 2.5.1) and GXT 3.0.4 on jdk1.6.0_37.

    Here is part of the ui Binder. The CybFieldLabel is an extension of the original FieldLabel, where I add the ?-button. (It is added as component at index 1)
    Code:
    <g:VerticalPanel spacing="10">
     
        <c:FramedPanel headingText="CybGXT components" width="350" bodyStyle="background: none; padding: 5px">
          <container:VerticalLayoutContainer>
          <form:FieldSet ui:field="fieldSet1" headingText="Standard components" collapsible="false">
            <container:VerticalLayoutContainer>
              <container:child layoutData="{verticalLayoutData}">
                <cybform:CybFieldLabel text="Konto" helptext="Konto hjälp" helpTrigger="{helpbothtrigger}" ui:field="accountlabel">
                  <cybform:widget>
                    <cybform:AccountField ui:field="account" allowBlank="false"/>
                  </cybform:widget>
                </cybform:CybFieldLabel>
              </container:child>
              
              <container:child layoutData="{verticalLayoutData}">
                <cybform:CybFieldLabel text="Gata" helptext="Gata hjälp" helpTrigger="{helpbothtrigger}" ui:field="streetTestlabel">
                  <cybform:widget>
                    <cybform:StreetField ui:field="streetTest"/>
                  </cybform:widget>
                </cybform:CybFieldLabel>
              </container:child>
    ...
    My Widgets are simply added UI-style in the corresponding Java-code.
    Code:
        @UiField
        AccountField account;
        
        @UiField
        StreetField streetTest;
    Here is the Constructor and an override of onResize of the StreetField
    Code:
        /**
         * Constructor.
         */
        @UiConstructor
        public StreetField()
        {
            super(new HorizontalPanel());
            this.panel = (HorizontalPanel) getWidget();
            
            streetLbl = new HTML(getMessages().street());
            nrLbl = new HTML(getMessages().nr());
            
            street = new TextField();
            street.addFocusHandler(new FocusHandler() {
    
                @Override
                public void onFocus(FocusEvent event)
                {
                    fireEvent(event);
                }
                
            });
            nr = new TextField();
            nr.setWidth(32);
            nr.addFocusHandler(new FocusHandler() {
    
                @Override
                public void onFocus(FocusEvent event)
                {
                    fireEvent(event);
                }
                
            });
            panel.add(streetLbl);
            panel.add(street);
            panel.add(nrLbl);
            panel.add(nr);
            
            setWidth(150);
        }
    
        @Override
        protected void onResize(int width, int height)
        {
            super.onResize(width, height);
            int streetWidth = streetLbl.getOffsetWidth();
            int nrWidth = nrLbl.getOffsetWidth();
            street.setWidth(width - 32 - streetWidth - nrWidth);
        }
    Here is a screenshot of how it looks when I run it with GWT 2.4.0
    working_design.PNG

    And here is how it looks when I run it with GWT 2.5.1 (the only change I make to the project)
    failed_design.PNG

    If you need more info, let me know

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,732
    Vote Rating
    90
    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


    That's a new acronym for it for me - I've always seen it as GPE, the Google Plugin for Eclipse, but I do see gdt in the plugin package.

    Can you share the module file you're using? In the update from GWT 2.4.0 to 2.5.1 you must remove the reference to the sencha uibinder code, since that patch was accepted into GWT itself in 2.5.0. I'm also curious if there are other customizations you might have, specifically that would affect the fieldset text, which is the main interesting thing I'm noticing.

    That appears to be the only GXT widget that is rendering differently, though we aren't seeing that internally (compare the bottom fieldset in http://qa.sencha.com:8080/examples-d...e:formsexample with http://qa.sencha.com:8080/examples-d...e:formsexample - aside from a few api changes, the only difference is that 3.1 is compiled with 2.5.0). Aside from that, I'm curious about the implementation of CybFieldLabel and StreetField (as AccountField seems to be sized the way it used to be). The ? icon in the CynFieldLabel is clearing to the next line instead of being later in that same line, and the StreetField
    is wider than it used to be, taking up more space than it should.

    I'm mostly guessing there, since I can't actually run your code, so can't reproduce your results. If possible, can you look into making a sample app that we can run as well and perhaps debug how those sizes have changed?

    As I said, there don't seem to be layout changes in the examples above. I'll see about changing our nightly 3.1 build to use 2.5.1, but my local testing hasn't shown any changes like what you are seeing.

  5. #5
    Sencha User
    Join Date
    Jun 2013
    Location
    Stockholm, Sweden
    Posts
    7
    Vote Rating
    0
    henkaa is on a distinguished road

      0  

    Default


    Ok, Im not familiar with the term "modue file" (or maby just to tired at the moment). So what file should I look in and what to look for?

    The only customized components in my code is CybFieldLabel (which is a custom of FieldLabel, to render the button) and a small customization to SimpleContainer with a function to add the button (overriding its add()-function which would replace the widget). FieldSet is the standard one.

    I will get back to you with examples, since now I should travel for work . I will also try a change in my CybFieldLabel and see how that turn out.

  6. #6
    Sencha User
    Join Date
    Jun 2013
    Location
    Stockholm, Sweden
    Posts
    7
    Vote Rating
    0
    henkaa is on a distinguished road

      0  

    Default


    Hi again.
    I have prepared a zip with the project, but it seems to big to upload (a limit of 488k it seems to be). How should I share the code?

    My test with fixing the CybFieldLabel did not work.

  7. #7
    Sencha User
    Join Date
    Jun 2013
    Location
    Stockholm, Sweden
    Posts
    7
    Vote Rating
    0
    henkaa is on a distinguished road

      0  

    Default


    Finally I managed to find some more files I hope you do not need

    The attachment contains a small sample of the project. There are no GWT or GXT files included to reduce zip-size.

    Here is a summary of the libraries that the project has:
    Library_setup.PNG
    Attached Files

  8. #8
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,732
    Vote Rating
    90
    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


    Thanks, I'll try to check this out today.

    The module file in GWT is the file ending in .gwt.xml - it declares what other modules you are using as well as other settings.

  9. #9
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,732
    Vote Rating
    90
    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


    Also, I recompiled our 3.1 build to use GWT 2.5.1 - the same FieldLabel and FieldSet code as was in GXT 3.0 is used there, but they still seem to draw correctly, http://qa.sencha.com:8080/examples-dev-3.1/

  10. #10
    Sencha User
    Join Date
    Jun 2013
    Location
    Stockholm, Sweden
    Posts
    7
    Vote Rating
    0
    henkaa is on a distinguished road

      0  

    Default A little fix of CybFieldLabel

    A little fix of CybFieldLabel


    Hi again.
    I managed to rewrite the CybFieldLabel a bit giving the button an own div and handling the size of the actual widget some. This has made it a bit more stable If I have done it in a "correct" way, I don't know.

    This fix made it more stable for my current usage in this project, but I have not made some big testing on it, so if you find anything useful to know, I am still interested to hear
    Attached Files