[Closed] How To dock two or more Rollout Horizontally?

That’s quite cool. My first impression is that is probably achieved via a plugin…can you tell us what you are using that allows you to achieve this effect??

Shane

You just need to register your rollout or dialog as a dialog bar. Look for “cui.RegisterDialogBar” in the ref.

As to the original question, not sure! Investigating!

Okay! After a little investigation, here’s how you can do it. This test code uses the dotNet calendar example from the ref, so feel free to remove that part. I just needed some code in there!

Basically you have to set up your cui floaters/dialogs individually. Of course there may be an easier way, but this works even if it’s a bit convoluted:

 rollout test1 "test" height:200 width:220
 (
 	 dotNetControl f1 "MonthCalendar" align:#left height:180 width:200
 	 on f1 mousedown val do 
 	 (
 		  format "in mousedown handler: arg: %
" val
 		  format "showproperties:
"
 		  showproperties val
 		  format "showmethods:
"
 		  showmethods val
 		  format "showevents:
"
 		  showevents val
 		  format "getpropnames : %
" (getpropnames val)
 		  format "prop values:
"
 	 )
 )
 
 rollout test2 "test2" height:200 width:220
 (
 	 dotNetControl f1 "MonthCalendar" align:#left height:180 width:200
 	 on f1 mousedown val do 
 	 (
 		  format "in mousedown handler: arg: %
" val
 		  format "showproperties:
"
 		  showproperties val
 		  format "showmethods:
"
 		  showmethods val
 		  format "showevents:
"
 		  showevents val
 		  format "getpropnames : %
" (getpropnames val)
 		  format "prop values:
"
 	 )
 )
 
 
 
 
 testFloater1 = newRolloutFloater "testFloater1" 300 400
 addRollout test1 testFloater1
 
 testFloater2 = newRolloutFloater "testFloater2" 300 400
 addRollout test2 testFloater2
 
 cui.RegisterDialogBar testFloater1 minSize:[180,200] style:#(#cui_dock_all, #cui_floatable, #cui_handles)
 cui.RegisterDialogBar testFloater2 minSize:[180,200] style:#(#cui_dock_all, #cui_floatable, #cui_handles)
 
 cui.DockDialogBar testFloater1 #cui_dock_bottom 
 cui.DockDialogBar testFloater2 #cui_dock_bottom 
 

Note: This immediately docks the calendars to the bottom of the screen. Just drag them out again to undock and close them!

From the image you provided, it look as if the windows were “docked”…It would also be good if you could keep the windows “together” when they are moved…but that’s just me

Shane

Sorry my bad , after looking erilaz’s code , I found that I built my rolloutFloater too wide.
so my two rolloutFloater got piled up .BTW I found this method is critically depending on user’s screen resolution.
different user may cause different dock type…
so I found “subrollout” method which may avoid this…
the Image below is the result what I want

rollout test "test" width:600 height:400
(
	subRollout test1 "test1" pos:[13,7] width:300 height:181 
	subRollout test2 "test2" pos:[326,7] width:300 height:181
	subRollout test3 "test3" pos:[13,200] width:600 height:201
)
rollout test1a "Left Eye morpher" width:300 height:114 
( 
slider test1as1 "Left Eye1"
slider test1as2 "Left Eye2"
slider test1as3 "Left Eye3"
)
rollout test1b "Right Eye morpher"  width:300 height:114 
( 
slider test1as1 "Right Eye1"
slider test1as2 "Right Eye2"
slider test1as3 "Right Eye3"
)
rollout test1c "Mouth Morpher"  width:600 height:114 
( 
slider test1as1 "Mouth1"
slider test1as2 "Mouth2"
slider test1as3 "Mouth3"
)

testFloater1 = newRolloutFloater "testFloater1" 660 400
addRollout test testFloater1 
cui.RegisterDialogBar testFloater1  style:#(#cui_dock_all, #cui_floatable, #cui_handles)
cui.DockDialogBar testFloater1 #cui_dock_bottom 

AddSubRollout test.test1 test1a
AddSubRollout test.test2 test1b
AddSubRollout test.test3 test1c

I want to create this layout because our character’s morpher_modifier is dividing into 3 part(The LeftEye, The RightEye and The Mouth ) If I create the ui like a face , that looks intuitive , right?

I’ve learnt recently, that A solution is A solution, good or bad…

Shane