Positioning Popups

[soa]

I'm trying to display a pop-up over the top of another control (to create a touch friendly drop down) but I'm having trouble identifying the top & left values. I can see that the values returned as based on the controls container panel but the panel is on a RP on a web page. Is the there a simple way of getting top & left of a control relative to a page. Or is there another way to approach this.

[Stewart Marshall]

There are several ways to control the position of a popup.

For your particular case, you need the ScreenTop and ScreenLeft properties of the control. These always provide the absolute position of the control, regardless of the parent chain. All you need to do is determine the required Top and Left in the Prepare event.

The sample code below shows how popup positioning can be affected.

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Height(632) Width(984) Theme(#SYS_THEME<2015Blue>) LayoutManager(#Layout1)
Define_Com Class(#PRIM_TBLO) Name(#Layout1)
Define_Com Class(#PRIM_TBLO.Column) Name(#Column1) DisplayPosition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Row) Name(#Row1) DisplayPosition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem1) Alignment(BottomRight) Column(#Column1) Manage(#LaidOutPopup) Parent(#Layout1) Row(#Row1) Sizing(None) MarginBottom(20) MarginRight(20)

Define_Com Class(#PRIM_PANL) Name(#Panel1) DisplayPosition(1) Left(528) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Top(40) Height(185) Width(257) ThemeDrawStyle('LightTitle') TouchMove(Both)
Define_Com Class(#PRIM_PHBN) Name(#BottomRight) Caption('Show a popup at the bottom right corner of this button') DisplayPosition(1) Left(16) Parent(#Panel1) TabPosition(1) Top(96) Height(73) Width(225) WordWrap(True) MarginLeft(4) MarginRight(4) ThemeDrawStyle('Heading2')

Define_Com Class(#Prim_ppnl) Name(#CenteredPopup) TitleBar(True) CloseButton(True) Caption('Centered Popup') AutoClose(False) Height(249) Width(361)
Define_Com Class(#Prim_ppnl) Name(#Popup) TitleBar(True) CloseButton(True) Caption('Unparented Popup')
Define_Com Class(#Prim_ppnl) Name(#LaidOutPopup) Parent(#COM_OWNER) TitleBar(True) CloseButton(True) Caption('Laid Out Popup') Left(603) Top(363) Height(249) Width(361) AutoClose(False)

Define_Com Class(#PRIM_LABL) Name(#Label1) Caption('This panel can be moved') DisplayPosition(2) Ellipses(Word) Height(25) Left(8) Parent(#Panel1) TabPosition(2) TabStop(False) Top(8) VerticalAlignment(Center) Width(241) Alignment(Center)
Define_Com Class(#PRIM_PHBN) Name(#Centered) DisplayPosition(3) Left(16) Parent(#COM_OWNER) TabPosition(3) Top(16) Width(161) Caption('Show a centered popup') Height(57) ThemeDrawStyle('Heading2') WordWrap(True)
Define_Com Class(#PRIM_PHBN) Name(#Laidout) DisplayPosition(2) Left(16) Parent(#COM_OWNER) TabPosition(2) Top(80) Width(161) Caption('Show a popup under layout') Height(57) ThemeDrawStyle('Heading2') WordWrap(True)
Define_Com Class(#PRIM_LABL) Name(#Label2) Caption('Resize the page. Popup will stay close to the bottom right corner') DisplayPosition(2) Ellipses(Word) Height(81) Left(32) Parent(#LaidOutPopup) TabPosition(2) TabStop(False) Top(96) Width(297) ThemeDrawStyle('Heading3') Alignment(Center)
Define_Com Class(#PRIM_LABL) Name(#Label3) Caption('Resize the page. Popup will stay in the center') DisplayPosition(2) Ellipses(Word) Height(81) Left(32) Parent(#CenteredPopup) TabPosition(2) TabStop(False) Top(96) Width(297) ThemeDrawStyle('Heading3') Alignment(Center)

Evtroutine Handling(#BottomRight.Click)

#Popup.ShowPopup Placement(Absolute)

Endroutine

Evtroutine Handling(#Centered.Click)

#CenteredPopup.ShowPopup Placement(Center)

Endroutine

Evtroutine Handling(#Laidout.Click)

#LaidOutPopup.ShowPopup

Endroutine

Evtroutine Handling(#Popup.Prepare) Left(#Left) Top(#Top)

#Left := #BottomRight.ScreenLeft + #BottomRight.Width
#Top := #BottomRight.ScreenTop + #BottomRight.Height

Endroutine

End_Com

Regards

[soa]

Thanks Stewart

Question, what is the rational behind setting top & left in the Prepare event rather than the ShowPopUp?

#CohortSelect.ShowPopup Left(#left) Top(#top) Transition(SuperScaled)

[Stewart Marshall]

When the popup is used on multiple controls as a hint or similar, the Prepare event supplies the Context, which is a reference to the control to which it applies. The same mechanism is used on popup menus too.

As it and I have been around for years, I tend to write the code in the Prepare event out of habit as much as anything.