Different alignment between designer and runtime

[ashouric]

Dear all,

For the following case, the designer is aligning the upper panel to right, although in hosted mode and real time it is aligned to the left.

It is noticed that "Test" widget design view is aligned right, while "EntryPoint" design view is aligned left.

Code: Select all

public class Test extends Composite {

   private Label label1;
   private Label label2;
   private Label label3;
   private Label label4;
   private Label label5;
   private Label label6;
   private static final String SPACER_TEXT = " ";

   public Test() {
      final VerticalPanel verticalPanel = new VerticalPanel();
      initWidget(verticalPanel);
      verticalPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);

      final HorizontalPanel upperHP = new HorizontalPanel();
      verticalPanel.add(upperHP);
      
      DOM.setStyleAttribute( upperHP.getElement(), "background", "#ABCDEF" );
      final Label filller = new Label(" ");
      upperHP.add(filller);

      label6 = new Label("6");
      upperHP.add(label6);

      upperHP.add(new Label(SPACER_TEXT));

      label5 = new Label("5");
      upperHP.add(label5);
      label5.setWordWrap(false);

      upperHP.add(new Label(SPACER_TEXT));

      label4 = new Label("4");
      upperHP.add(label4);
      label4.setWordWrap(false);

      upperHP.add(new Label(SPACER_TEXT));

      label3 = new Label("3");
      upperHP.add(label3);

      upperHP.add(new Label(SPACER_TEXT));

      label2 = new Label("2");
      upperHP.add(label2);
      label2.setWordWrap(false);

      upperHP.add(new Label(SPACER_TEXT));

      label1 = new Label("1");
      upperHP.add(label1);
      label1.setWordWrap(false);


      final DockPanel middlePanel = new DockPanel();
      verticalPanel.add(middlePanel);

      final HorizontalPanel lowerHP = new HorizontalPanel();
      verticalPanel.add(lowerHP);
   }

}


[Eric Clayberg]

For the following case, the designer is aligning the upper panel to right, although in hosted mode and real time it is aligned to the left.

I don't understand. When I try your code, I get the same view in design mode and in hosted mode.

According to the following line of code, everything in the main panel is right-aligned...

Code: Select all

verticalPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);

This is what I see when editing the Composite...



When I add the Composite to my entry point module...



And in hosted mode...

[ashouric]

Using latest GWTDesigner 2006.10.17,
Eclipse 3.2.1 M20060921-0945, and
GWT 1.1.10

According to the following line of code, everything in the main panel is right-aligned...

Code: Select all

verticalPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);

Well, that is an intermediate development code, althought it is right, please see the below.

Make sure to use this:

Code: Select all

public class ImageViewer implements EntryPoint {
   public void onModuleLoad() {
      RootPanel.get().add( new Test() );
   }
}


And here is what is visible to me:

[Eric Clayberg]

Well, that is an intermediate development code, althought it is right, please see the below.

Make sure to use this:

Code: Select all

public class ImageViewer implements EntryPoint {
   public void onModuleLoad() {
      RootPanel.get().add( new Test() );
   }
}


And here is what is visible to me

I see the same thing that you do with the above code, so your pictures look correct.

They represent what I would expect to see both in Designer and at runtime, so what do you think is wrong with them?

[ashouric]

Well, after deliberate thinking, I believe the issue is that the designer assumes the width is greater than the contained elements.

Issue can be solved by setting the width of 'verticalPanel' to 100% or something like 500. So, actually host mode/runtime is correct, becuase it didn't expand the 'verticalPanel'.

I believe you have to make sure the designer sets the size (width/heigh) to 0 and expands as necessary only to the contained widgets.

Hope that solves, many thanks for your help.

[Eric Clayberg]

Well, after deliberate thinking, I believe the issue is that the designer assumes the width is greater than the contained elements.

I'm not sure what you mean. I don't see any problem or inconsistency in the screen shots you posted.

Issue can be solved by setting the width of 'verticalPanel' to 100% or something like 500. So, actually host mode/runtime is correct, becuase it didn't expand the 'verticalPanel'.

If you embed the Composite in your mdule and don't specify a size, it will take on its preferred size which is just large enough to contain its children. The HorizontalPanel is still right-aligned, but in a container (the VerticalPanel) that is the same size. If you click on the Composite in your module and set its size via the property pane (make it 200x200 for example), you will see that the HorizontalPanel is right-aligned as expected (and as shown when you are editing it directly).

I believe you have to make sure the designer sets the size (width/heigh) to 0 and expands as necessary only to the contained widgets.

If you place the Composite in another container like your module and don't specify a size, that is exactly what GWT does and what GWT Designer shows you. If you edit the Composite directly, you can view it at any size that you like. The default initial size will match the preference set in the Deisgner > General > Default Form Size preferences. If you resize it in the design view, Designer will remember that size the next time you open that Composite.

[Konstantin.Scheglov]

Make sure to use this:

Code: Select all

public class ImageViewer implements EntryPoint {
   public void onModuleLoad() {
      RootPanel.get().add( new Test() );
   }
}


This is reason. Alignment works when there is extra space. But when you just add your Composite and don't set any size, it will use minimal size, so there are not space for alignment. In other words alignment still works, but you can not see this, because there are no space to the left of your aligned widgets.

[ashouric]

Alignment works when there is extra space.

Exactly, this is what is concluded.

Fine, if you see this is a normal behaviour. But my original issue is simple:

In designer you should exactly see what is expected in the realtime, (WYSIWYG), right?

So, I suggest that the designer precisely shows the 'left alignment' in the above case.

Sorry if I wasn't clear enough before, but hope i am now.

[Konstantin.Scheglov]

Alignment works when there is extra space.

Exactly, this is what is concluded.

Fine, if you see this is a normal behaviour. But my original issue is simple:

In designer you should exactly see what is expected in the realtime, (WYSIWYG), right?

Yes.

So, I suggest that the designer precisely shows the 'left alignment' in the above case.

Sorry if I wasn't clear enough before, but hope i am now.

Sorry, I don't understand you. Designer really shows as your form will look at runtime, I personally don't see any bug here.

[Eric Clayberg]

In designer you should exactly see what is expected in the realtime, (WYSIWYG), right?

With some caveats...for example, when editing your Composite, we show placeholders for the "Empty dock panel" and "Empty horizontal panel" contained within your vertical panel. We also put a dotted outline around them.

If we did not do that, they would have zero size and you would not see them or be able to drop children on them.

[ashouric]

Designer really shows as your form will look at runtime.

In designer you should exactly see what is expected in the realtime, (WYSIWYG), right?

With some caveats...

I understand and accept the situation now, if the TestWidget size is set, all views (designer, EntryPoint designer, realtime) are aligned right.

But if EntryPoint didn't set any size, and TestWidget size is too small (or undefined), designer view is aligned right, while others are aligned left (which was perceived as WYSIWYG violation).

Finally, real thanks for your amazing response.

[Eric Clayberg]

I understand and accept the situation now, if the TestWidget size is set, all views (designer, EntryPoint designer, realtime) are aligned right.

But if EntryPoint didn't set any size, and TestWidget size is too small (or undefined), designer view is aligned right, while others are aligned left (which was perceived as WYSIWYG violation).

EntryPoint and TestWidget are separate classes that are independent of one another. If you look at TestWidget by itself, you should see the horizontal panel right aligned within its parent vertical panel. That is how your code is written and that is what you see.

TestWidget by itself, viewed in isolation, has no intrinsic size. It only has a size in the context of a containing parent. Designer will, in fact, allow you to resize it and see what it will look like at various sizes (since it could be at any size once it is place in a container). If we shrank TestWidget down to its smallest possible size (when edited itself), you would not be able to edit it graphically (it would be too small).

If you then embed TestWidget into your EntryPoint and don't give it a size, TestWidget will shrink to its preferred size. Likewise, if you drop TestWidget into your EntryPoint and specify a size, you should see TestWidget shown at that size.

Ultimately, how TestWidget looks is entirely dependent on the context. Is it being viewed standalone? Is it embedded in another container? Does it specify a size or not in that other container?