MojoX Placement/Sizing Code

This topic contains 12 replies, has 4 voices, and was last updated by Mark Sibly 2 years, 8 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts

August 18, 2016 at 11:05 pm #3193

Participant

Can someone do me a huge favor and post mojox code that makes a button appear in the top-left corner of the screen with the max-width of the button being 50px?

I have a grasp on the auto-sizing but I am still unsure on how to set specific parameters. Any help would be appreciated.

August 19, 2016 at 12:20 am #3194

Mark Sibly

Keymaster

Here you go…

#import "<std>"
#import "<mojo>"
#import "<mojox>"

Using std..
Using mojo..
Using mojox..

Class MyWindow Extends Window

	Method New()
		Super.New( "Button Demo",640,480,WindowFlags.Resizable )
		
		Local button:=New PushButton( "Click ME!" )
		button.Layout="float"			'normal size
		button.Gravity=New Vec2f( 0,0 )	'top-left
		button.MaxSize=New Vec2i( 100,0 )
		
		button.Clicked=Lambda()
			Alert( "Well done sir!" )
		End
		
		ContentView=button
	End
	
End

Function Main()

	New AppInstance
	
	New MyWindow
	
	App.Run()
End

#import "<std>"

#import "<mojo>"

#import "<mojox>"

Using std..

Using mojo..

Using mojox..

Class MyWindow Extends Window

Method New()

Super.New( "Button Demo",640,480,WindowFlags.Resizable )

Local button:=New PushButton( "Click ME!" )

button.Layout="float" 'normal size

button.Gravity=New Vec2f( 0,0 ) 'top-left

button.MaxSize=New Vec2i( 100,0 )

button.Clicked=Lambda()

Alert( "Well done sir!" )

End

ContentView=button

End

Function Main()

New AppInstance

New MyWindow

App.Run()

End

Note that mojox is very much oriented towards auto-layout, ie: buttons are really designed to be added to toolbars, dockingviews etc, which are added to other dialogs, dockingviews and so on.

This is why buttons default to ‘fill-x’ layout and not ‘float’…try it with ‘fill-x’ layout to see the difference. Note you can also set TextGravity to Vec2f( .5,.5 ) to center text within a button if you need to in ‘fill-x’ layout.

August 19, 2016 at 12:42 am #3195

Mark Sibly

Keymaster

Another point probably worth making: when a window lays out its content view, all it does is set the content view’s frame to match entire window content rect (checkout the Window.OnLayout method). This means when the actual contentview’s ‘Layout’ mode is applied, it will float within or fill the entire window.

But this isn’t very flexible – in most cases you probably want to use a DockingView as the ‘main’ window/content view. This way, the docking view fills the window (unless you change its Layout!) and you can then add things at the top, left, etc of the dockingview/window.

August 19, 2016 at 12:50 am #3196

Cole Chapman

Participant

Awesome thanks Mark, I really appreciate the help. I think I’m going to like this new GUI system once I get the hang of it.

August 19, 2016 at 1:34 am #3198

impixi

Participant

I was planning on posting some “simple” mojox examples demonstrating the various principles and widgets but have encountered “conceptual” issues myself.

Reading TED2 source is useful for some things but leaves me wondering for others.

But this isn’t very flexible – in most cases you probably want to use a DockingView as the ‘main’ window/content view. This way, the docking view fills the window (unless you change its Layout!) and you can then add things at the top, left, etc of the dockingview/window.

Ah, that actually makes sense now…

August 19, 2016 at 3:15 am #3202

Mark Sibly

Keymaster

I would have quite liked Window to extend or contain DockingView, but it would have meant dragging a significant chunk of mojox into mojo, and would have been extra overhead (albeit very little) for people who only need a plain window (eg: games) so I decided against it.

There are also still a few layout view types missing IMO – a GridView, a FlowView and no doubt more. These will happen over time, but in the meantime you can get away with quite a lot using the DockingView.

August 20, 2016 at 9:32 pm #3265

degac

Participant

Questions:

there’s a way to change/to get the size of a widget? I’ve looked at View and there are some Property (Rect, Frame etc) – but I get always ‘0’ as result.

Secondly, ProgressBar widget, well, it isn’t a ‘real’ progress bar… I haven’t found any ‘value/position’ field in View. I think it should be renamed in something else and a ‘proper’ progress bar should be implemented (… I’m thinking to create it as exercise, once I’ll understand better mojox/MX2)

August 20, 2016 at 11:41 pm #3266

Mark Sibly

Keymaster

Rect and Frame are only valid after GUI layout is updated, which will happen just before the next render if you’ve just added a view. In this way, Rect really reflects what the user sees on the screen.

You can use MinSize/MaxSize to clamp a view’s size to a range, but these can be overriden in some cases, eg: if the view’s layout is set to ‘fill’ and it’s the content of a docking view.

You can manually control a view’s layout by using the low-level AddChildView() and modifying it’s ‘Frame’ property directly – in which case you may also need to call view.RequestRender(). You are totally in control of the view in this case, ie: no layout will be performed at all. This is pretty much how the container views like DockingView etc work, except they only modify Frame during OnLayout() (which is the recommended way/time to set a child view’s frame).

You can also use the (currently hidden I think) MeasureLayoutSize() method on a view. However this is not generally recommended, as measuring a view can be expensive, ie: a treeview with thousands of nodes in it etc. But in some cases, eg: for measuring a dialog just before it’s opens, this is kind of unavoidable.

What are you trying to do might be the better question?

August 21, 2016 at 7:28 am #3314

degac

Participant

Thanks, now it’s clear why I got zero! The ‘real’ size is calculated after the layout… quite logic!

I’m trying to understand (well) how mojox works: the idea is to implement some gadgets (well, proxygadgets) I did/use on Bmax (ie: FilePicker, DatePicker, Calendar etc)

August 21, 2016 at 8:41 pm #3342

Cole Chapman

Participant

I added a DockingView but I’m unsure how to properly add gadgets if I only want them displayed in the center. I ended up adding them to the “Top” view and made the DockingView layout “float” which doesn’t seem correct.

#import "<std>"
#import "<mojo>"
#import "<mojox>"
 
Using std..
Using mojo..
Using mojox..
 
Class MyWindow Extends Window
 
	Method New()
		Super.New( "Button Demo",640,480,WindowFlags.Resizable )
		
		Local button:=New PushButton( "Click ME! This is testing a longer message" )		
		Local button2:=New PushButton( "Test" )

		button.Clicked=Lambda()
			Alert( "Well done sir!" )
		End
		
		Local TestView:=New DockingView
		TestView.Layout = "float"
		TestView.AddView(button,"top")	'This seems wrong
		TestView.AddView(button2,"top")
		
		button.MaxSize=New Vec2i( 100,0 )
		button.MinSize=New Vec2i( 75,0 )
		button.TextGravity=New Vec2f( .5,.5 ) 'This doesn't work
		
		button2.MaxSize=New Vec2i( 100,0 )
		button2.MinSize=New Vec2i( 75,0 )
		button2.TextGravity=New Vec2f( .5,.5 ) 'This doesn't work
		
		ContentView = TestView
	End
	
End
 
Function Main()
 
	New AppInstance
	
	New MyWindow
	
	App.Run()
End

#import "<std>"

#import "<mojo>"

#import "<mojox>"

Using std..

Using mojo..

Using mojox..

Class MyWindow Extends Window

Method New()

Super.New( "Button Demo",640,480,WindowFlags.Resizable )

Local button:=New PushButton( "Click ME! This is testing a longer message" )

Local button2:=New PushButton( "Test" )

button.Clicked=Lambda()

Alert( "Well done sir!" )

End

Local TestView:=New DockingView

TestView.Layout = "float"

TestView.AddView(button,"top") 'This seems wrong

TestView.AddView(button2,"top")

button.MaxSize=New Vec2i( 100,0 )

button.MinSize=New Vec2i( 75,0 )

button.TextGravity=New Vec2f( .5,.5 ) 'This doesn't work

button2.MaxSize=New Vec2i( 100,0 )

button2.MinSize=New Vec2i( 75,0 )

button2.TextGravity=New Vec2f( .5,.5 ) 'This doesn't work

ContentView = TestView

End

Function Main()

New AppInstance

New MyWindow

App.Run()

End

Also I could not figure out how to center-align the text inside the button.

August 21, 2016 at 9:16 pm #3345

Mark Sibly

Keymaster

I ended up adding them to the “Top” view and made the DockingView layout “float” which doesn’t seem correct.

It’s completely correct!

DockingView has turned out to be a super-versatile thing that can be used in place of ‘row view’, ‘column view’ etc (I’ve been reluctant to add RowView and ColumnView for this reason).

DockingView is also used internally by many view types like toolbar, menu, dialog etc (which probably seem more suitable to ‘float’) but in some cases all these really add is a different style, default layout etc.

Using DockingView on its own however you want is fine.

Also I could not figure out how to center-align the text inside the button.

It’s a mojox bug in label.monkey2 – fixed now at github.

August 21, 2016 at 10:43 pm #3348

Cole Chapman

Participant

Thanks for the information Mark! Regarding the mojox bug… With the new github module, if you take the code I posted above and remove button’s MaxSize and MinSize, button2’s seems to be ignored and will be set to whatever button is.

	Method New()
		Super.New( "Button Demo",640,480,WindowFlags.Resizable )
		
		Local button:=New PushButton( "Click ME! This is testing a longer message and it changes the other button size" )		
		Local button2:=New PushButton( "Test" )

		button.Clicked=Lambda()
			Alert( "Well done sir!" )
		End
		
		Local TestView:=New DockingView
		TestView.Layout = "float"
		TestView.AddView(button,"top")
		TestView.AddView(button2,"top")
		
		button.TextGravity=New Vec2f( .5,.5 )
		
		button2.MaxSize=New Vec2i( 100,0 )
		button2.MinSize=New Vec2i( 75,0 )
		button2.TextGravity=New Vec2f( .5,.5 )
		
		ContentView = TestView
	End

Method New()

Super.New( "Button Demo",640,480,WindowFlags.Resizable )

Local button:=New PushButton( "Click ME! This is testing a longer message and it changes the other button size" )

Local button2:=New PushButton( "Test" )

button.Clicked=Lambda()

Alert( "Well done sir!" )

End

Local TestView:=New DockingView

TestView.Layout = "float"

TestView.AddView(button,"top")

TestView.AddView(button2,"top")

button.TextGravity=New Vec2f( .5,.5 )

button2.MaxSize=New Vec2i( 100,0 )

button2.MinSize=New Vec2i( 75,0 )

button2.TextGravity=New Vec2f( .5,.5 )

ContentView = TestView

End

August 21, 2016 at 11:05 pm #3349

Mark Sibly

Keymaster

This is because MinSize and MaxSize are really only ‘hints’ (they are applied after OnMeasure) and can be override by some Layout modes, eg: the ‘fill’ modes.

In this case, the default layout mode for a PushButton is ‘fill-x’, so the button ends up filling all the width available, regardless of min/max width. min/max width is still used to help layouts work out where everything goes, but if you ask for ‘fill-x’ you get ‘fill-x’!

You can fix it in this case by making button2 float, eg:

button2.Layout=”float”
button2.Gravity=New Vec2f( .5,.5 )

(perhaps PushButton should default to this?)

Making min/max size hard constraints even in the case of ‘fill’ layouts is a possiblity I guess, but I vaguely remember there being a good reason for having it work the way it does…

Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

MojoX Placement/Sizing Code

Archives

Recent Replies

What is this?