Page 1 of 1
Positioning Popups
Posted: Wed Nov 09, 2016 10:34 am
by 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.
Re: Positioning Popups
Posted: Wed Nov 09, 2016 11:37 am
by 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
Re: Positioning Popups
Posted: Wed Nov 09, 2016 12:14 pm
by 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)
Re: Positioning Popups
Posted: Wed Nov 09, 2016 12:51 pm
by 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.