Troubleshooting Layouts

[jyoung]

Anybody have any ideas / tips on troubleshooting layout issues?

I typically use different border colors to get a handle on where different panels are rendering but I am having a heck of time figuring out why one panel is MUCH larger then everything else.

The shell looks like this in the IDE. All "content" panels are put into the panel with the blue border. That panel's size is ContentHeight - Fit to Width.

shell.PNG (22.25 KiB) Viewed 8879 times

When a panel is activated and put in the container it is done so like this.

Code: Select all

evtroutine handling(#PTOApplicationManager.PanelActivated) panel(#panel) forward(#forward)
#panel.Parent <= #ContainerPanel
#LayoutItem4.Manage <= #panel
#LayoutItem4.Sizing := ContentHeightFitToWidth

if ((#PTOContentPanel *IsNot *Null) *And (#PTOContentPanel *IsNotEqualTo #panel))

if (#forward)
#COM_OWNER.Transition from(#PTOContentPanel) to(#panel) transitiontype(DifferentEasingFromLeft) duration(250)
else
#COM_OWNER.Transition from(#PTOContentPanel) to(#panel) transitiontype(DifferentEasingFromRight) duration(250)
endif
else
#panel.Visible := True
endif

#PTOContentPanel <= #panel
#PTOContentPanel.Activate
endroutine

The panel I am putting into that panel is this. The red border is yet another panel inside this one, outlined by green.

content panel.PNG (20.91 KiB) Viewed 8879 times

The layout for that component is pretty small

Code: Select all

begin_com role(*EXTENDS #PTOContentPanel) layoutmanager(#MainLayout) height(537) width(1041) style(#Style1)
* ================================================================================
* LAYOUT
* ================================================================================

define_com class(#PRIM_VS.Style) name(#Style1) borderbottom(1) borderleft(1) borderright(1) bordertop(1) borderbrush(#Brush1)
define_com class(#PRIM_VS.SolidBrush) name(#Brush1) color(2:255:1)

define_com class(#PRIM_VS.Style) name(#Style2) borderbottom(1) borderleft(1) borderright(1) bordertop(1) borderbrush(#Brush2)
define_com class(#PRIM_VS.SolidBrush) name(#Brush2) color(255:0:10)

define_com class(#PRIM_TBLO) name(#MainLayout)
define_com class(#PRIM_TBLO.Row) name(#LayoutRow1) displayposition(1) parent(#MainLayout)
define_com class(#PRIM_TBLO.Column) name(#LayoutColumn1) displayposition(1) parent(#MainLayout)
define_com class(#PRIM_TBLO.Item) name(#LayoutItem1) alignment(TopCenter) column(#LayoutColumn1) manage(#PTORequestDetailPanel) parent(#MainLayout) row(#LayoutRow1) flow(Down) sizing(ContentHeightFitToWidth)
define_com class(#PRIM_TBLO.Item) name(#LayoutItem2) alignment(TopCenter) column(#LayoutColumn1) manage(#SubmitButton) parent(#MainLayout) row(#LayoutRow1) sizing(None) flow(Down)
define_com class(#PRIM_TBLO.Item) name(#LayoutItem3) alignment(TopCenter) column(#LayoutColumn1) manage(#LoadingImage) parent(#MainLayout) row(#LayoutRow1) sizing(None) margintop(100)

* ================================================================================
* UI COMPONENTS
* ================================================================================
define_com class(#PTORequestDetailPanel) name(#PTORequestDetailPanel) parent(#COM_OWNER) tabstop(False) width(1039) style(#Style2) height(499)
define_com class(#PRIM_PHBN) name(#SubmitButton) caption('Submit') displayposition(2) left(474) parent(#COM_OWNER) tabposition(2) themedrawstyle('PrimaryButton') height(35) width(90) top(499)
define_com class(#PRIM_IMAG) name(#LoadingImage) displayposition(3) left(575) parent(#COM_OWNER) tabposition(3) tabstop(False) top(100) visible(False)
define_com class(#PTOMessagePopupPanel) name(#PTOMessagePopupPanel) left(800) parent(#COM_OWNER) top(522)

* OTHER CODE OMITTED

end_com

Yet when rendered it looks like this. Notice the blue and green borders running out of the bottom of the browser window.

rendered.PNG (27.26 KiB) Viewed 8879 times

I've tried everything I can think of and I cannot get this sized properly.

On another panel that has the EXACT same panel, the rendered blue panel is smaller and does not flow off the browser, although it still does not match the height of the panel in the IDE.

[dannyoorburg]

Hi Joe,

one of the first questions I always ask myself...

"Does it somehow fix itself up if I resize the browser?"

In which case it's probably a bug within LANSA (maybe caused by the timing of the animations or something simular)

If not, it's usually a bug in my code...


I have no clear answer to how to solve it, a bit of trial and error usually gets me there, showing some borders like you do... making some changes to try and understand the behaviour..

Try to explain the height you see, is it the designed height and did the layout manager just leave it alone?


Danny

[MarkD]

Sometimes putting colored borders onto a troublesome object’s parent, as well as itself, delivers an “Ah-ha!” moment for me.
Not onto what I think the parent object is – but onto the actual TheTroublesomeObject.Parent.

[jyoung]

Resizing does not fix the issue. I noticed the issue because I noticed the vertical scroll bar showing up when I did not expect one.

The odd thing is is that all the panels are set to ContentHeightFitToWidth or ContentHeight. So somehow, somewhere, something thinks the content is bigger than what it is.

It would be nice, if there was some way to "inspect" a panel at run time to determine how and why that panel's height and width was calculated.
If I look in Chrome and see the height of the Content Panel, its height is 781px. I have no idea how it came up with that number. If I measure the pixels of the content appears on the screen its 533px. So where did the other 248px come from?

[jyoung]

Wow, ok, I think I fixed it although I don't understand.

I have a custom popup component that I use to relay messages back to the user. Pretty standard stuff.

As I am digging through all the different panels, I look at the layout of the root object and notice that the sizing is "None".
I change the sizing to ContentHeight and the IDE designer GROWS to include what appears to be those pixels.

One of the components on this panel is a custom popup component. It looks like when I dragged that popup from the Repository List to the Designer that the top and left properties where set on it and it was down in the lower right corner and did not have a layout item.

I removed the top and left properties from the popup and am left with

Code: Select all

define_com class(#PTOMessagePopupPanel) name(#PTOMessagePopupPanel) parent(#COM_OWNER)

and all of a sudden the layout started sizing as I expected.

The popup component is relatively simple

Code: Select all

function options(*DIRECT)
begin_com role(*EXTENDS #PRIM_PPNL) caption('Caption') left(0) height(257) titlebar(True) top(0) width(361) autoclose(False) layoutmanager(#Layout1) shroudstyle(#ShroudStyle)

* ================================================================================
* STYLES
* ================================================================================
define_com class(#PRIM_VS.Style) name(#ShroudStyle) backgroundbrush(#ShroudBrush)
define_com class(#PRIM_VS.SolidBrush) name(#ShroudBrush) color(28:28:28) opacity(30)

define_com class(#PRIM_VS.Style) name(#ErrorStyle) foregroundbrush(#Brush2)
define_com class(#PRIM_VS.SolidBrush) name(#Brush2) color(255:3:13)
define_com class(#PRIM_VS.Style) name(#Style1) borderbottom(0) borderleft(0) borderright(0) bordertop(0)

* ================================================================================
* LAYOUT
* ================================================================================
define_com class(#PRIM_TBLO) name(#Layout1)
define_com class(#PRIM_TBLO.Row) name(#LayoutRow1) displayposition(1) parent(#Layout1)
define_com class(#PRIM_TBLO.Column) name(#LayoutColumn1) displayposition(1) parent(#Layout1)
define_com class(#PRIM_TBLO.Item) name(#LayoutItem1) alignment(TopLeft) column(#LayoutColumn1) manage(#MessageLabel) parent(#Layout1) row(#LayoutRow1) sizing(FitToWidth) flow(Down) marginleft(5) marginright(5) margintop(5)
define_com class(#PRIM_TBLO.Item) name(#LayoutItem2) alignment(TopLeft) column(#LayoutColumn1) manage(#ErrorList) parent(#Layout1) row(#LayoutRow1) sizing(FitToWidth) flow(Down) marginleft(5) marginright(5) margintop(5)
define_com class(#PRIM_TBLO.Item) name(#LayoutItem3) alignment(BottomCenter) column(#LayoutColumn1) manage(#Button) parent(#Layout1) row(#LayoutRow1) sizing(None) marginbottom(10)

* ================================================================================
* UI COMPONENTS
* ================================================================================
define_com class(#PRIM_LABL) name(#MessageLabel) caption('[Message]') displayposition(2) ellipses(Word) height(25) left(5) parent(#COM_OWNER) tabposition(2) tabstop(False) top(35) verticalalignment(Center) width(349)
define_com class(#PRIM_LIST) name(#ErrorList) displayposition(3) left(5) parent(#COM_OWNER) tabposition(3) top(65) height(150) width(349) columnheaderheight(0) columnlines(False) rowlines(False) style(#Style1)
define_com class(#PRIM_LIST.String) name(#ColumnSTD_STRNG1) columnwidth(1) displayposition(1) parent(#ErrorList) source(#STD_STRNG) columnunits(Proportion)
define_com class(#PRIM_PHBN) name(#Button) caption('[Caption]') displayposition(4) left(139) parent(#COM_OWNER) tabposition(4) top(220)

* ================================================================================
* ROUTINES
* ================================================================================
mthroutine name(ShowInfoPopup)
define_map for(*INPUT) class(#PRIM_ALPH) name(#caption)
define_map for(*INPUT) class(#PRIM_ALPH) name(#message)

#ErrorList.Visible := False
#Button.Visible := False

#MessageLabel.Style <= *NULL

#COM_OWNER.Caption := #Caption
#MessageLabel := #message

#COM_OWNER.ShowPopup placement(Center)
endroutine

mthroutine name(ShowErrorPopup)
define_map for(*INPUT) class(#PRIM_ALPH) name(#message)
define_map for(*INPUT) class(#PRIM_BOLN) name(#canClose)

#COM_OWNER.ShowError( #message #canClose )

#COM_OWNER.ShowPopup placement(Center)
endroutine

mthroutine name(ShowError) access(*PRIVATE)
define_map for(*INPUT) class(#PRIM_ALPH) name(#message)
define_map for(*INPUT) class(#PRIM_BOLN) name(#canClose)

#COM_OWNER.Caption := 'Error'

#Button.Visible := #canClose
#Button.Caption := 'Close'

#MessageLabel.Style <= #ErrorStyle
#MessageLabel := #message

clr_list named(#ErrorList)
#ErrorList.Visible := True

for each(#msg) in(#SYS_MSGQ.Messages)
#STD_STRNG := #msg.Text
add_entry to_list(#ErrorList)
endfor

#ColumnSTD_STRNG1.SizeToContents
endroutine

evtroutine handling(#Button.Click)
#COM_OWNER.ClosePopup
endroutine
end_com

Why would a popup component that is typically rendered on top of other components affect the layout sizing?