UI system is driving me bonkers.

[Xyphos]

 

 

no really, I need a good tutorial for UI programming, I don't seem to be getting anywhere by trial-and-error

[malkuth]

You want to use horizontal not vertical.  And every horizontal will contain your button or label.

The problem is that if you use the default methods to call all this your going to get lost.  

I'm on phone so hard type but the popup thread has a lot of examples.  You can get to that thread via the sticky.

but the very first example in that thread is an early example of popup from mm.  If your doing it that way then your going to get it lost.  You want to split everything the same way you call old ongui.  Than call them,  it's easier to work with that way.

i don't know exactly what your trying to do but if your trying to have two button or boxes side by side than you need them within the horizontal method.

Edited July 14, 2017 by malkuth

[Alshain]

Is this the Popup Dialog or the GUILayout?

So there are two possibilities here.  If you just have two items you w

If I understand you right, you need both horizontal and vertical.  Your overall form is Horizontal (i,e, the two vertical frames are actually horizontal to each other), but each list of stuff is vertical.

So if this is GUILayout you would have:

GUILayout.BeginHorizontal();
	GUILayout.BeginVertical();
		//Stuff Goes Here
	GUILayout.EndVertical();

	GUILayout.BeginVertical();
		//Stuff goes here too
	GUILayout.EndVertical();
GUILayout.EndHorizontal();

Now I *think* the default nature of a window is vertical.  So if you don't specify your initial horizontal, it will make the whole thing vertical.  So you have two vertical frames and those two frames are stacked vertically on one another, that is what you are seeing.  It's basically this:

GUILayout.BeginVertical(); // This is implied and not necessary
	GUILayout.BeginVertical();
		//Stuff Goes Here
	GUILayout.EndVertical();

	GUILayout.BeginVertical();
		//Stuff goes here too
	GUILayout.EndVertical();
GUILayout.EndVertical(); // This is implied and not necessary

Just don't forget that your inner GUILayout must obey the orientation of the higher GUILayout, and if there isn't a higher, it's assumed to be vertical.

 

Now If I didn't understand your image correctly (which I think is supposed to be two lists of things side by side?), then you may just be asking about putting two objects side by side.  In that case, you don't need the verticals at all:

GUILayout.BeginHorizontal();
	//Stuff Goes Here
	//Stuff goes here too
GUILayout.EndHorizontal();

 

Edited July 14, 2017 by Alshain

[Xyphos]

14 minutes ago, Alshain said:

Is this the Popup Dialog or the GUILayout?

Dialog, from what I understand, we're not supposed to use GUILayout anymore?

and thanks for your example, I'll try that.

[Alshain]

Just now, Xyphos said:

Dialog, from what I understand, we're not supposed to use GUILayout anymore?

and thanks for your example, I'll try that.

Depends on what you are doing.  Popup dialog isn't all powerful.  As I understand it, there are things you can't do.  Ideally in that case I think you would go with AssetBundle but that's another animal entirely.

[Xyphos]

1 minute ago, Alshain said:

but that's another animal entirely.

sadly, I may need to, as my UI will require the use of scrolling panes, comboboxes, etc.

DMagic supposedly wrote a tutorial but I'm having trouble following it.

[Alshain]

Hmm comboboxes might be difficult without it.  Though really a combo box is just a compact form of mutually exclusive radio button. ( As an ergonomics GUI design specialist I want take this moment to point out that radio buttons should always be mutually exclusive and KSP is wrong , but alas, I've not seen a checkbox in KSP anywhere)

[Alshain]

@Xyphos

I made you an image to illustrate how the nested layouts work.  This is AGM's current layout.

In code this would be:

Begin Horizontal
	Begin Vertical
		Label (Category Filters)
		Begin Horizontal
			Button
			Button
		End Horizontal
		//Repeat last four lines in a loop (count modulo 2)
	End Vertical
	Begin ScrollView
		Begin Vertical // (this might not be necessary, but AGM does it, it might be default for a scroll view)
			Button //(repeated as needed)
			Begin Horizontal
				Label
				Button
				Button
			End Horizontal
			//Continue Buttons loop
		End Vertical
	End ScrollView
	Begin Scroll View
		Begin Vertical
			// More of the Same
		End Vertical
	End Scroll View
	Begin Vertical
		//More buttons in horizontal modulo 2
	End Vertical
End Horizontal
Begin Horizontal
	Label(Part Search)
	TextField
	Button
End Horizontal
Begin Horizontal
	Label (Tooltip)
	Label (Version #)
End Horizontal

 

[Aelfhe1m]

At the most basic level a two column layout using the new UI in code it would look something like:

var content = new DialogGUIHorizontalLayout(
				new DialogGUIVerticalLayout(
					// various UI elements for 1st column
					...
				),
				new DialogGUIVerticalLayout(
					// more UI elements for 2nd column
					...
				)
			);

 

[Xyphos]

31 minutes ago, Alshain said:

I made you an image to illustrate how the nested layouts work.  This is AGM's current layout.

That actually helps a lot - knowing where to "draw" the sections and being able to visualize them. I'll try it.