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)); 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? 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; 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? 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? 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 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 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. 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 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 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. 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) Link to comment Share on other sites More sharing options...
andyhill Posted March 6, 2022 Share Posted March 6, 2022 Did this help ? 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 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 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 Link to comment Share on other sites More sharing options...
风吹小机机 Posted March 7, 2022 Share Posted March 7, 2022 form.jsform.jsid Link to comment Share on other sites More sharing options...
风吹小机机 Posted March 7, 2022 Share Posted March 7, 2022 pas code not js 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 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. 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 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 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now