robinhodemorais Posted February 25, 2022 Share Posted February 25, 2022 Hello, I'm creating a screen using UniFrame, in it I put a scrollBox to create a scrollbar due to the size of the screen and inside the scroll I have a unicontainerpanel with my components, this unicontainerpanel needs to be centered on the screen, so with the command below in create from UniFrame I can center, but uniFrame doesn't have the onResize or onScreenResize event as there is in uniForm, so how can I center my unicontainerpanel in a uniFrame when the user changes the screen size? code used in OnCreate unicontainerpanel.Top := 0; unicontainerpanel.Left := Round((Screen.Width / 2) - (unicontainerpanel.Width / 2)); Quote Link to comment Share on other sites More sharing options...
Sherzod Posted February 25, 2022 Share Posted February 25, 2022 Hello, What alignment are you using? Quote Link to comment Share on other sites More sharing options...
robinhodemorais Posted February 25, 2022 Author Share Posted February 25, 2022 Structure > uniFrame (no alignment) >> uniScrollBox(Align = alClient) >>> uniSimplePanel (no alignment) - the uniSimplePanel is my central panel, which should be centered in the middle of the uniScrollBox With the code below in uniFrame's onCreate I can center it, but if I move the browser it doesn't center in the middle again procedure TfrmPagePadrao.UniFrameCreate(Sender: TObject); begin uniSimplePanel.Top := 0; uniSimplePanel.Left := Round((Screen.Width / 2) - (uniSimplePanel.Width / 2)); end; Quote Link to comment Share on other sites More sharing options...
Sherzod Posted February 25, 2022 Share Posted February 25, 2022 Are you using server-side alignment? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted February 25, 2022 Share Posted February 25, 2022 Can you make a simple testcase to check? Quote Link to comment Share on other sites More sharing options...
robinhodemorais Posted February 25, 2022 Author Share Posted February 25, 2022 is attached I use version 1.90.0.1537 CenterUnigui.rar Quote Link to comment Share on other sites More sharing options...
robinhodemorais Posted March 1, 2022 Author Share Posted March 1, 2022 Can anyone help me with this problem, because I've tried everything and I couldn't Quote Link to comment Share on other sites More sharing options...
andyhill Posted March 1, 2022 Share Posted March 1, 2022 From my viewpoint you are using VCL positioning and thinking. You need to forget the VCL approach and position everything the Sencha way via Layout / LayoutConfig / Flex. Quote Link to comment Share on other sites More sharing options...
robinhodemorais Posted March 2, 2022 Author Share Posted March 2, 2022 2 hours ago, andyhill said: From my viewpoint you are using VCL positioning and thinking. You need to forget the VCL approach and position everything the Sencha way via Layout / LayoutConfig / Flex. how can i do this with sencha? I do not know Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 2, 2022 Share Posted March 2, 2022 3 hours ago, robinhodemorais said: how can i do this with sencha? I do not know Hello, Please see related demos: \FMSoft\Framework\uniGUI\Demos\Desktop\Clientside Alignment - xx Quote Link to comment Share on other sites More sharing options...
robinhodemorais Posted March 2, 2022 Author Share Posted March 2, 2022 7 hours ago, Sherzod said: Hello, Please see related demos: \FMSoft\Framework\uniGUI\Demos\Desktop\Clientside Alignment - xx I checked these demos, but in all my tests I couldn't center as needed, I tried anchor but I couldn't either, the problem is if I move the browser it doesn't center, the attached demo shows the situation. Quote Link to comment Share on other sites More sharing options...
andyhill Posted March 3, 2022 Share Posted March 3, 2022 A brief look at your screen shot, you have 3 panels each using 1/3 of the screen - Yes ? If so this is how I would do it (there are many ways to do this):- 1) MainPanel Layout "vbox", LayoutConfig height "100%" width "100%" (all other panels sit inside this panel) - this becomes the browsers view a) TopPanel Layout "hbox", LayoutConfig height "33%" width "100%" b) MiddlePanel Layout "hbox", LayoutConfig height "33%" width "100%" c) BottomPanel Layout "hbox" LayoutConfig height "33%" width "100%" Layout can define orientation importance LayoutConfig allows for fine tuning You can also use a combination of Flex (ratio adjuster) to automatically cater for dynamic changes (I have done this from memory so forgive me if it is not correct) Quote Link to comment Share on other sites More sharing options...
andyhill Posted March 6, 2022 Share Posted March 6, 2022 Did this help ? Quote Link to comment Share on other sites More sharing options...
robinhodemorais Posted March 7, 2022 Author Share Posted March 7, 2022 5 hours ago, andyhill said: Did this help ? hello, sorry for the delay, off here, so, my problem is the panel is inside, these are not the simple bluepanela that should always be more positioned in the middle of the scrollbox, I've tried in several ways here, but it wasn't, even following the examples in the demo, see that in the attached gif, when moving the browser it does not position itself, my problem is not being able to reposition it in the middle again using the uniframe > scrollbox > simplepanel Quote Link to comment Share on other sites More sharing options...
风吹小机机 Posted March 7, 2022 Share Posted March 7, 2022 p.ClientEvents.ExtEvents.Values['afterlayout'] := ' function afterlayout(sender, layout, eOpts)' + ' {' + ' var PWidth = Ext.get("' + p.jsid + '").getWidth();' + ' var PHegith = Ext.get("' + p.jsid + '").getHeight();' + ' var FWidth = Ext.get("' + self.jsid + '").getWidth();' + ' var FHegith = Ext.get("' + self.jsid + '").getHeight();' + ' var PTop = FHegith / 2 - PHegith/2;' + ' var PLeft = FWidth / 2 - PWidth/2;' + ' Ext.get("' + p.JSId + '").setStyle({"top":PTop + "px","left":PLeft + "px"});' + ' }'; 1 Quote Link to comment Share on other sites More sharing options...
robinhodemorais Posted March 7, 2022 Author Share Posted March 7, 2022 Thanks for the help, but I didn't adapt the codes correctly, see the image below; when running it is giving this error Quote Link to comment Share on other sites More sharing options...
风吹小机机 Posted March 7, 2022 Share Posted March 7, 2022 form.jsform.jsid Quote Link to comment Share on other sites More sharing options...
风吹小机机 Posted March 7, 2022 Share Posted March 7, 2022 pas code not js Quote Link to comment Share on other sites More sharing options...
robinhodemorais Posted March 7, 2022 Author Share Posted March 7, 2022 but I don't have onAfterRunScript event in uniFrame Quote Link to comment Share on other sites More sharing options...
robinhodemorais Posted March 8, 2022 Author Share Posted March 8, 2022 I even managed to centralize it by disabling all Anchors, but everything I put inside the simplePanel is misaligned, thus also not meeting my problem. Quote Link to comment Share on other sites More sharing options...
风吹小机机 Posted March 8, 2022 Share Posted March 8, 2022 unit Unit2; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, uniGUITypes, uniGUIAbstractClasses, uniGUIClasses, uniGUIFrame, uniGUIBaseClasses, uniPanel; type TUniFrame2 = class(TUniFrame) P: TUniContainerPanel; SP: TUniSimplePanel; private { Private declarations } public { Public declarations } constructor Create(AOwner: TComponent); override; destructor Destroy; override; end; implementation {$R *.dfm} constructor TUniFrame2.Create(AOwner: TComponent); begin inherited Create(AOwner); p.ClientEvents.ExtEvents.Values['afterlayout'] := 'function afterlayout(sender, layout, eOpts)' + ' {' + ' var PWidth = Ext.get("' + p.jsid + '").getWidth ();' + ' var PHegith = Ext.get("' + p.jsid + '").getHeight();' + ' var FWidth = Ext.get("' + SP.jsid + '").getWidth();' + ' var FHegith = Ext.get("' + SP.jsid + '").getHeight();' + ' var PLeft = FWidth / 2 - PWidth/2;' + ' var PTop = FHegith / 2 - PHegith/2;' + ' Ext.get("' + p.JSId + '").setStyle({"top":PTop + "px","left":PLeft + "px"});' +'}'; end; destructor TUniFrame2.Destroy; begin inherited Destroy; end; end. object UniFrame2: TUniFrame2 Left = 0 Top = 0 Width = 472 Height = 355 Align = alClient Anchors = [akLeft, akTop, akRight, akBottom] TabOrder = 0 ExplicitWidth = 320 ExplicitHeight = 240 object SP: TUniSimplePanel Left = 0 Top = 0 Width = 472 Height = 355 ParentColor = False Align = alClient TabOrder = 0 ExplicitLeft = 68 ExplicitTop = 181 ExplicitWidth = 256 ExplicitHeight = 128 object P: TUniContainerPanel Left = 13 Top = 14 Width = 256 Height = 128 ParentColor = False Color = 12615680 TabOrder = 1 end end end 1 Quote Link to comment Share on other sites More sharing options...
风吹小机机 Posted March 8, 2022 Share Posted March 8, 2022 16 hours ago, robinhodemorais said: 但我在 uniFrame 中没有 onAfterRunScript 事件 There is no onafterrunscript event. You can create a create by yourself OOP foundation is still important Quote Link to comment Share on other sites More sharing options...
robinhodemorais Posted March 8, 2022 Author Share Posted March 8, 2022 Thanks for your patience and help, it was perfect, see the gif below and the demo attached for those who need it. CenterUnigui.rar 2 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.