B4J Question Simple problem with Layout

B

Brian Dean

Well-Known Member
Licensed User
Longtime User
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?
 

Attachments

  • LayoutTest.zip
    3.9 KB · Views: 96
Solution
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...
Sort by date Sort by votes

Lucas Siqueira

Active Member
Licensed User
Longtime User


 
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
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?
 
Upvote 0
B

Brian Dean

Well-Known Member
Licensed User
Longtime User
Your Test Project has 2 seperate Layouts, which one are you talking about?
Click to expand...
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!

 
Last edited:
Upvote 0

teddybear

Well-Known Member
Licensed User
Because the anchor (position) of your pnlOptions is not fixed, you need to set it in script or code.

B4X: 
Button1.Bottom=pnlOptions.height-10
Button1.Right= pnlOptions.Width-10
 
Last edited:
Upvote 0
B

Brian Dean

Well-Known Member
Licensed User
Longtime User
Place the anchors on both the panel and the label, anchored on both sides, and also anchored at the bottom
Click to expand...
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.
Click to expand...
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.
 
Upvote 0

teddybear

Well-Known Member
Licensed User
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
 

Attachments

  • LayoutTest.zip
    5.7 KB · Views: 80
Last edited:
Upvote 0

klaus

Expert
Licensed User
Longtime User
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
 

Attachments

  • LayoutTest2.zip
    3.8 KB · Views: 110
Last edited:
Upvote 0
Solution

teddybear

Well-Known Member
Licensed User
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
 
Upvote 0

teddybear

Well-Known Member
Licensed User
klaus said:
Have you tested the project from post #9 ?
Click to expand...
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
 
Last edited:
Upvote 0

klaus

Expert
Licensed User
Longtime User
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.
 
Upvote 0
B

Brian Dean

Well-Known Member
Licensed User
Longtime User
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.
 
Last edited:
Upvote 0
You must log in or register to reply here.

Similar Threads

P
  • Article
B4J Tutorial Simple Layout Designer (SLD) B4J application.
2
Replies
37
Views
7K
PaulMeuris
P
  • Locked
  • Article
B4A Library [B4X] SimpleMediaManager (SMM) - framework for images, videos and more
Replies
17
Views
19K
Erel
  • Locked
  • Article
Android Tutorial [B4X] [B4XPages] What exactly does it solve?
2
Replies
24
Views
31K
Erel
  • Locked
  • Article
Android Tutorial [B4X] B4XPages - Cross platform and simple framework for managing multiple pages
Replies
12
Views
72K
Erel
  • Article
B4J Library [B4X] BalConverter - Convert the layouts files to JSON (and vice versa)
2 3
Replies
55
Views
31K
aeric
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…