B4J Question Simple problem with Layout

[Brian Dean]

What am I doing wrong here? I have made plenty of layout files before but this one is not working for me. What I want is ...

- A label spanning the base of the form : That works okay.
- A panel sitting above that label : That does not work - it underlaps the label.
- Another panel within that panel with a "Help" button anchored to the bottom right corner : That does not work - its sited top-left.
- There is a floating "Text" caption that belongs to some other view - what?

I have been playing with this for hours. I must be missing something simple - can someone tell me what that is?

 

[Lucas Siqueira]

What am I doing wrong here? I have made plenty of layout files before but this one is not working for me. What I want is ...

- A label spanning the base of the form : That works okay.
- A panel sitting above that label : That does not work - it underlaps the label.
- Another panel within that panel with a "Help" button anchored to the bottom right corner : That does not work - its sited top-left.
- There is a floating "Text" caption that belongs to some other view - what?

I have been playing with this for hours. I must be missing something simple - can someone tell me what that is?

 

[Cableguy]

Your Test Project has 2 seperate Layouts, which one are you talking about?

can you post an image, or drawing of what you are expecting to achieve?

 

[Brian Dean]

Your Test Project has 2 seperate Layouts, which one are you talking about?

I have problems with each of them.

Layout1 : should position label "sbar" at the base of the form (that is okay) and position "pnlAction" above it - that is, anchored 30 pixels from the bottom edge of the form. It looks correct in the WYSIWYG window but when I run the app it lies behind "sbar" and appears to be right at the form bottom edge.

ActionPanel : this contains a sub-panel which contains a button "Help". That button is anchored to the bottom and right-hand edges in the Designer but when I run the app it appears in the top-left corner of the panel.

I cannot believe that I am writing this; how can it possibly not work!

 

[Lucas Siqueira]

Place the anchors on both the panel and the label, anchored on both sides, and also anchored at the bottom
increase the height of the Action panel to fit all components.

 

[teddybear]

I have problems with each of them.

Layout1 : should position label "sbar" at the base of the form (that is okay) and position "pnlAction" above it - that is, anchored 30 pixels from the bottom edge of the form. It looks correct in the WYSIWYG window but when I run the app it lies behind "sbar" and appears to be right at the form bottom edge.

ActionPanel : this contains a sub-panel which contains a button "Help". That button is anchored to the bottom and right-hand edges in the Designer but when I run the app it appears in the top-left corner of the panel.

I cannot believe that I am writing this; how can it possibly not work!

View attachment 145768

Because the anchor (position) of your pnlOptions is not fixed, you need to set it in script or code.

Button1.Bottom=pnlOptions.height-10
Button1.Right= pnlOptions.Width-10

 

[Brian Dean]

Place the anchors on both the panel and the label, anchored on both sides, and also anchored at the bottom

Thanks @Lucas Siqueira. When I copied my main project layout to make the example here I failed to properly copy some of the anchors. I have corrected them now, as you pointed out. But pnlAction was always anchored 30px from the bottom of the form - that ought to work. Please see the final paragraph below.

Because the anchor (position) of your pnlOptions is not fixed, you need to set it in script or code.

Hi @teddybear - are you saying that if I include a panel containing views in a layout then have to populate it using code? I don't think that is true. Again, the reason is below.

The suggestions that both of you make do work but I don't think that they are the proper answers. When I look at either of my layouts in the WYSIWYG window I see exactly what I want to achieve - pnlAction sits on the top of the statusbar and the Help button is anchored bottom right. But when I run the app what I see in WYSIWIG is not what I get in real life.

 

[teddybear]

Thanks @Lucas Siqueira. When I copied my main project layout to make the example here I failed to properly copy some of the anchors. I have corrected them now, as you pointed out. But pnlAction was always anchored 30px from the bottom of the form - that ought to work. Please see the final paragraph below.


Hi @teddybear - are you saying that if I include a panel containing views in a layout then have to populate it using code? I don't think that is true. Again, the reason is below.

The suggestions that both of you make do work but I don't think that they are the proper answers. When I look at either of my layouts in the WYSIWYG window I see exactly what I want to achieve - pnlAction sits on the top of the statusbar and the Help button is anchored bottom right. But when I run the app what I see in WYSIWIG is not what I get in real life.

The ActionPanel.bjl is incrrect， copy all views of the ActionPanel.bjl to a new layout file and load it. it doesn't need any script

 

[klaus]

I tested your project from post 1.
The problem is that the Height of pnlAction is too small.
It has a height of 100, but the bottom of btnGo is 80 + 30 = 110 therefore out of the panel height.
Then, you can move pnlOtions on its right place and set its anchors to BOTH and it works as you expect it and no need to have any Designer Script.
You should also check Handle Resize Event on top of the Main.
When you run the program and you resize the form in the lower right corner everything moves.

Be aware to keep your layout dimensions consistently.
The form dimensions in the main code is : width = 894 height = 800
The layout Layout1 is 600 x 600 ?
The layout ActionPanel is 894 x 900 ?
The dimensions when you run the program are those in the main code.

EDIT: Updated the project according to post #12

 

[teddybear]

I tested your project from post 1.
The problem is that the Height of pnlAction is too small.
It has a height of 100, but the bottom of btnGo is 80 + 30 = 110 therefore out of the panel height.
Then, you can move pnlOtions on its right place and set its anchors to BOTH and it works as you expect it and no need to have any Designer Script.

It doesn't seem like a height issue of the pnlAction, even if the ActionPanel is loaded in MainForm.RootPane.LoadLayout("ActionPanel"), it's still incorrect

 

[klaus]

It doesn't seem like a height issue of the pnlAction,,,,

Have you tested the project from post #9 ?

 

[teddybear]

Have you tested the project from post #9 ?

yes, I have tested it, it is incorrect for the help button either , it is on top-left corner, like the picture of post#4

 

[klaus]

Sorry, i had not read carefully enough the first post.
In my previous project the Help button was positioned on the top left corner and the anchors set to top - left.
Moving the button to the right lower corner and setting the anchors to right - bottom works OK.
I have updated the project in post #9.

 

[Brian Dean]

Thanks @klaus - your answers completely correct my errors. That is a great relief to me as I was beginning to lose confidence in the Designer. I must be more disciplined in future.

Thank you too, @teddybear, for your continued and significant contributions.

Edit : When I looked into Klaus's design more closely I found that my real error was that I had not previously discovered variant layouts and their application in a desktop environment. Once I had sorted that out everything fell into place.