MojoX GUI questions

[EthernautParticipant]

I’ve just started getting my feet wet in MojoX so I can create some content editors, and have some questions. There aren’t a lot of learning resources other than the examples and something like the source for Ted2, so I still can’t figure out:

• In the code below, how would you make edge between the two views “draggable”, so that the relative size of each one changes? The “resizable” argument on AddView only seems to work if I specify the size in pixels, but then each view has its own independent size, instead of being a percentage of the parent view. It works in Ted2Go – the “_browsersTabView” has the behavior I want – but I can’t figure out how
• In my GraphView class, the “OnMouseEvent” method should scroll based on the mouse wheel X and Y axis (two fingers drag on trackpad). But setting Scroll returns without doing anything, even though I added some content to the view. What am I missing?
• Again on GraphView, how would I add more than one visible item to it, if ContentView only supports one view object? I want to add several “Nodes” I can drag around and connect, and I imagine I’ll extend the View class (or maybe Button) to create the draggable/clickable nodes.

Monkey

#Import "<mojo>" #Import "<mojox>" Using std.. Using mojo.. Using mojox.. Function Main() New AppInstance New TestGui App.Run() End Class TestGui Extends Window Field mainView:DockingView Field gameView:GameView Field graphView:GraphView Const smallFont:Font = Font.Load( "font::DejaVuSans.ttf", 10 ) Method New() Super.New( "Test", 1024, 640, WindowFlags.Resizable ) 'Child views gameView=New GameView() graphView = New GraphView() 'Main View mainView = New DockingView mainView.AddView( gameView, "left", "60%", True ) mainView.AddView( graphView, "right", "40%", True ) ContentView=mainView End End Class GraphView Extends ScrollView Field panSpeed := 2.5 Method New() Layout="fill" ScrollBarsVisible = True Local newStyle := Style.Copy() newStyle.BackgroundColor = Color.Grey newStyle.BorderColor = Color.Black newStyle.Font = TestGui.smallFont newStyle.TextColor = Color.DarkGrey Style = newStyle Local button:=New PushButton( "Test" ) button.Layout="float" button.Gravity=New Vec2f( 0.5 ) button.MaxSize=New Vec2i( 100,0 ) ContentView=button End Method OnRender( canvas:Canvas ) Override canvas.DrawText( "graph:", 5, 5 ) Super.OnRender( canvas ) canvas.DrawCircle( 100, 200, 25 ) End Method OnMouseEvent( event:MouseEvent ) Override Select event.Type Case EventType.MouseWheel Scroll.X += ( event.Wheel.X * panSpeed ) Scroll.Y -= ( event.Wheel.Y * panSpeed ) App.RequestRender() End End End Class GameView Extends View Field text:String Method New() Layout="fill" Local newStyle := Style.Copy() newStyle.BackgroundColor = Color.DarkGrey newStyle.BorderColor = Color.Black newStyle.TextColor = Color.Black newStyle.Font = TestGui.smallFont Style = newStyle End Method OnRender( canvas:Canvas ) Override Super.OnRender( canvas ) RequestRender() canvas.DrawText( "gameview:" + App.FPS + " fps", 5, 5 ) canvas.DrawCircle( 200, 200, 50 ) End End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96

#Import "<mojo>" #Import "<mojox>"   Using std.. Using mojo.. Using mojox..   Function Main() New AppInstance New TestGui App.Run() End     Class TestGui Extends Window Field mainView:DockingView Field gameView:GameView Field graphView:GraphView Const smallFont:Font = Font.Load( "font::DejaVuSans.ttf", 10 ) Method New() Super.New( "Test", 1024, 640, WindowFlags.Resizable ) 'Child views gameView=New GameView() graphView = New GraphView() 'Main View mainView = New DockingView mainView.AddView( gameView, "left", "60%", True  ) mainView.AddView( graphView, "right", "40%", True  ) ContentView=mainView End End     Class GraphView Extends ScrollView Field panSpeed := 2.5 Method New() Layout="fill" ScrollBarsVisible = True Local newStyle := Style.Copy() newStyle.BackgroundColor = Color.Grey newStyle.BorderColor = Color.Black newStyle.Font = TestGui.smallFont newStyle.TextColor = Color.DarkGrey Style = newStyle Local button:=New PushButton( "Test" ) button.Layout="float" button.Gravity=New Vec2f( 0.5 ) button.MaxSize=New Vec2i( 100,0 ) ContentView=button End Method OnRender( canvas:Canvas ) Override canvas.DrawText( "graph:", 5, 5 ) Super.OnRender( canvas ) canvas.DrawCircle( 100, 200, 25 ) End Method OnMouseEvent( event:MouseEvent ) Override Select event.Type Case EventType.MouseWheel Scroll.X += ( event.Wheel.X * panSpeed ) Scroll.Y -= ( event.Wheel.Y * panSpeed ) App.RequestRender() End End End     Class GameView Extends View Field text:String Method New() Layout="fill" Local newStyle := Style.Copy() newStyle.BackgroundColor = Color.DarkGrey newStyle.BorderColor = Color.Black newStyle.TextColor = Color.Black newStyle.Font = TestGui.smallFont Style = newStyle End Method OnRender( canvas:Canvas ) Override Super.OnRender( canvas ) RequestRender() canvas.DrawText( "gameview:" + App.FPS + " fps", 5, 5 ) canvas.DrawCircle( 200, 200, 50 ) End End

Thanks!

[nerobotParticipant]

1. Resizable doesn’t work with persentage widths. There is pixel-sized _browsersTabView in ted2go
2. To make scrolling :
   • set button size more than view to enable scrolling: button.MinSize=New Vec2i( 0,1000 )
   • change scroll like this: Scroll = Scroll + New Vec2i( event.Wheel.X * panSpeed, -event.Wheel.Y * panSpeed )
   • assigning a value to Scroll.X is a mistake, because when you get access to Scroll variable you get copy of vec2 – say “hello” to struct type!
   • in my case you assign whole vec2 and get right result.
3. You can extends GraphView with DockingView. Or use internal docking view ‘wrapped’ with scrollview to manage views and have scrolling stuf.
4. I am thinking about writing own gui system – I like the QT widgets layout, maybe I can implement some similar stuff.

What I like in QT and missed in monkey – SizePolicy basis, so you can just set sizePolicy=SizePolicy.Expanding and view will expand to all empty space, etc.

But it requires to write more complex and difficult layout system.

Also I tried to use operator += to add views, looks good.

Monkey

Class VerticalLayout Extends DockingView Method New( topToBottom:Bool=True ) _topToBottom=topToBottom Layout="fill-y" End Operator += :Void( view:View ) Self.AddView( view,_topToBottom ? "top" Else "bottom" ) End Private Field _topToBottom:Bool End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Class VerticalLayout Extends DockingView Method New( topToBottom:Bool=True ) _topToBottom=topToBottom Layout="fill-y" End Operator += :Void( view:View ) Self.AddView( view,_topToBottom ? "top" Else "bottom" ) End Private Field _topToBottom:Bool End

and usage is

Monkey

Local lay:=New VerticalLayout lay += New Label( "Line 1" ) lay += New Label( "Line 2" ) lay += New Label( "Line 3" )

1 2 3 4

Local lay:=New VerticalLayout lay += New Label( "Line 1" ) lay += New Label( "Line 2" ) lay += New Label( "Line 3" )

[Mark SiblyKeymaster]

The use of percentages in docking view means the pane is always that percentage of docking view size, so absolute size will only change if docking view size changes. So a pane that is 25% is always 25%. If you change sizes to pixel size (eg: “60”) it works the way you want, although DockingView is really designed to have a ContentView so may have a ‘hole’ in the middle. I agree percentage sizes should probably have a resize knob too if ‘resizable=true’ and the percentage should mean ‘initial’ size. Will have a look at fixing this.

Another thing you can do is to just keep adding stuff to the “left” of a DockingView so it’s ‘stacks up’ left to right. Then, if you make the last view the ‘ContentView’ you can completely fill up the DockingView as the content view fills up the space left over after all ‘docks’ are added. Just noticed nerobot suggested something similar with VerticalLayout…

Your scrollview isn’t scrolling at least because it doesn’t have any content –  you need to set the ContentView property. The content view of  a scroll view should also have an OnMeasure method as  ScrollView uses content view’s MeasuredSize to determine how large scrollable content is, how large to make scroll bars etc.

Here’s a little scroll view demo showing the basics. Note this doesn’t extend ScrollView as there’s little point here, although if you want to customize scroll wheel handling etc you can do so. Scroll wheel handling in ScrollView uses font height for scrolling I think.

Monkey

#Import "<mojo>" #Import "<mojox>" Using std.. Using mojo.. Using mojox.. Function Main() New AppInstance New TestGui App.Run() End Class TestGui Extends Window Field gameView:GameView Field scrollView:ScrollView Method New() Super.New( "Test", 1024, 640, WindowFlags.Resizable ) gameView=New GameView scrollView=New ScrollView scrollView.ContentView=gameView ContentView=scrollView End End Class GameView Extends View Field text:String Method New() End Method OnMeasure:Vec2i() Override Return New Vec2i( 1920,1080 ) End Method OnRender( canvas:Canvas ) Override RequestRender() canvas.DrawText( "gameview:" + App.FPS + " fps, Width="+Width+", Height="+Height, 5, 5 ) canvas.DrawCircle( 200, 200, 50 ) End End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

#Import "<mojo>" #Import "<mojox>" Using std.. Using mojo.. Using mojox.. Function Main() New AppInstance New TestGui App.Run() End Class TestGui Extends Window   Field gameView:GameView Field scrollView:ScrollView Method New() Super.New( "Test", 1024, 640, WindowFlags.Resizable )   gameView=New GameView   scrollView=New ScrollView scrollView.ContentView=gameView   ContentView=scrollView End End   Class GameView Extends View Field text:String Method New() End Method OnMeasure:Vec2i() Override Return New Vec2i( 1920,1080 ) End Method OnRender( canvas:Canvas ) Override RequestRender() canvas.DrawText( "gameview:" + App.FPS + " fps, Width="+Width+", Height="+Height, 5, 5 ) canvas.DrawCircle( 200, 200, 50 ) End End

[EthernautParticipant]

I got the scrolling and the resizing working perfectly, thanks for the help!

I agree percentage sizes should probably have a resize knob too if ‘resizable=true’ and the percentage should mean ‘initial’ size. Will have a look at fixing this.

That seems like it would be really helpful, thanks Mark!

Here’s the revised example. Only one thing I’m not being able to get right: I’d like the initial Scroll coordinates to be centered in the frame when the App starts, but setting Scroll in New() seems to have no effect. I could make a ‘_firstFrame:Bool” field and check for it in OnRender, but it feels like it would be unnecessary clutter if there’s a place where Scroll can be initialized. Where is it?

Monkey

#Import "<mojo>" #Import "<mojox>" Using std.. Using mojo.. Using mojox.. Function Main() New AppInstance New TestGui App.Run() End Class TestGui Extends Window Field mainDock:DockingView Field rgtDock:ScrollView Field graphView:GraphView Const smallFont:Font = Font.Load( "font::DejaVuSans.ttf", 10 ) Method New() Super.New( "Test", 1024, 640, WindowFlags.Resizable ) mainDock = New MainDock() rgtDock = New RightDock() mainDock.AddView( rgtDock, "right", "400", True ) ContentView = mainDock End End Class MainDock Extends DockingView Method New() Layout="fill" Local newStyle := Style.Copy() newStyle.BackgroundColor = Color.DarkGrey newStyle.BorderColor = Color.Black newStyle.Font = TestGui.smallFont Style = newStyle End Method OnRender( canvas:Canvas ) Override Super.OnRender( canvas ) canvas.Color = New Color( Rnd(), Rnd(), Rnd() ) canvas.DrawCircle( 200, 200, 50 ) canvas.Color = Color.Aluminum canvas.DrawText( "gameview:" + App.FPS + " fps", 5, 5 ) End End Class RightDock Extends ScrollView Private Field _panSpeed := 5.0 Public Method New() Layout="fill" ScrollBarsVisible = True Local newStyle := Style.Copy() newStyle.BackgroundColor = Color.Grey newStyle.BorderColor = Color.Black newStyle.Font = TestGui.smallFont Style = newStyle Local graph:=New GraphView ContentView = graph Scroll = New Vec2i( graph.Frame.Width/2, graph.Frame.Height/2 ) 'Doesn't work! End Method OnRender( canvas:Canvas ) Override Super.OnRender( canvas ) canvas.Color = Color.Aluminum canvas.DrawText( "size:" + Frame + " ,scroll:" + Scroll , 5, 5 ) End Method OnMouseEvent( event:MouseEvent ) Override Select event.Type Case EventType.MouseWheel Scroll = New Vec2i( Scroll.X+(event.Wheel.X*_panSpeed), Scroll.Y-(event.Wheel.Y*_panSpeed) ) App.RequestRender() End End End Class GraphView Extends View Private Field _panSpeed := 5.0 Field _size := New Vec2i( 1024, 1024 ) Public Method New() MinSize=New Vec2i( _size.X, _size.Y ) End Method OnRender( canvas:Canvas ) Override Local r:= 20.0 For Local x := 1 Until 10 For Local y := 1 Until 10 Local v := (x/10.0) -0.05 canvas.Color = New Color( v, v, v ) canvas.DrawCircle( (x*100)+r, (y*100)+r, r ) Next Next End End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111

#Import "<mojo>" #Import "<mojox>"   Using std.. Using mojo.. Using mojox..   Function Main() New AppInstance New TestGui App.Run() End     Class TestGui Extends Window Field mainDock:DockingView Field rgtDock:ScrollView Field graphView:GraphView Const smallFont:Font = Font.Load( "font::DejaVuSans.ttf", 10 ) Method New() Super.New( "Test", 1024, 640, WindowFlags.Resizable ) mainDock = New MainDock() rgtDock = New RightDock() mainDock.AddView( rgtDock, "right", "400", True  ) ContentView = mainDock End End     Class MainDock Extends DockingView Method New() Layout="fill" Local newStyle := Style.Copy() newStyle.BackgroundColor = Color.DarkGrey newStyle.BorderColor = Color.Black newStyle.Font = TestGui.smallFont Style = newStyle End Method OnRender( canvas:Canvas ) Override Super.OnRender( canvas ) canvas.Color = New Color( Rnd(), Rnd(), Rnd() ) canvas.DrawCircle( 200, 200, 50 ) canvas.Color = Color.Aluminum canvas.DrawText( "gameview:" + App.FPS + " fps", 5, 5 ) End End       Class RightDock Extends ScrollView Private Field _panSpeed := 5.0 Public Method New() Layout="fill" ScrollBarsVisible = True Local newStyle := Style.Copy() newStyle.BackgroundColor = Color.Grey newStyle.BorderColor = Color.Black newStyle.Font = TestGui.smallFont Style = newStyle Local graph:=New GraphView ContentView = graph Scroll = New Vec2i( graph.Frame.Width/2, graph.Frame.Height/2 ) 'Doesn't work! End Method OnRender( canvas:Canvas ) Override Super.OnRender( canvas ) canvas.Color = Color.Aluminum canvas.DrawText( "size:" + Frame + " ,scroll:" + Scroll , 5, 5 ) End Method OnMouseEvent( event:MouseEvent ) Override Select event.Type Case EventType.MouseWheel Scroll = New Vec2i( Scroll.X+(event.Wheel.X*_panSpeed), Scroll.Y-(event.Wheel.Y*_panSpeed) ) App.RequestRender() End End End     Class GraphView Extends View Private Field _panSpeed := 5.0 Field _size := New Vec2i( 1024, 1024 ) Public Method New() MinSize=New Vec2i( _size.X, _size.Y ) End Method OnRender( canvas:Canvas ) Override Local r:= 20.0 For Local x := 1 Until 10 For Local y := 1 Until 10 Local v :=  (x/10.0) -0.05 canvas.Color = New Color( v, v, v ) canvas.DrawCircle( (x*100)+r, (y*100)+r, r ) Next Next End End

[nerobotParticipant]

There is my ‘improved’ version

Monkey

Class RightDock Extends ScrollView Private Field _panSpeed := 5.0 Field _prevSize:Vec2i Method FirstGrabSizes( newSize:Vec2i,prevSize:Vec2i ) Print "sizes: "+newSize+", "+prevSize 'Scroll = newSize * 0.5 Scroll = AvailableScroll * 0.5 SizeChanged-=FirstGrabSizes ' unsubscribes End ' missed this method in mojox Property AvailableScroll:Vec2i() ' also need to calc paddings, etc Local xx:=Max( 0,MeasuredSize.x-VisibleRect.Width ) Local yy:=Max( 0,MeasuredSize.y-VisibleRect.Height ) Return New Vec2i( xx,yy ) End Public Field SizeChanged:Void( newSize:Vec2i,prevSize:Vec2i ) Method New() Layout="fill" ScrollBarsVisible = True Local newStyle := Style.Copy() newStyle.BackgroundColor = Color.Grey newStyle.BorderColor = Color.Black newStyle.Font = TestGui.smallFont Style = newStyle Local graph:=New GraphView ContentView = graph ' subscribes to changes SizeChanged+=FirstGrabSizes End Method OnRender( canvas:Canvas ) Override Super.OnRender( canvas ) canvas.Color = Color.Aluminum canvas.DrawText( "size:" + Frame + " ,scroll:" + Scroll , 5, 5 ) End Protected Method OnMouseEvent( event:MouseEvent ) Override Select event.Type Case EventType.MouseWheel Scroll = New Vec2i( Scroll.X+(event.Wheel.X*_panSpeed), Scroll.Y-(event.Wheel.Y*_panSpeed) ) App.RequestRender() End End ' store prev size Method OnMeasure:Vec2i() Override _prevSize=MeasuredSize Return Super.OnMeasure() End ' check new size and fire SizeChanged event if necessary Method OnLayout() Override Super.OnLayout() Local cur:=MeasuredSize If cur<>_prevSize Then SizeChanged( cur,_prevSize ) End End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

Class RightDock Extends ScrollView Private Field _panSpeed := 5.0 Field _prevSize:Vec2i Method FirstGrabSizes( newSize:Vec2i,prevSize:Vec2i ) Print "sizes: "+newSize+", "+prevSize 'Scroll = newSize * 0.5 Scroll = AvailableScroll * 0.5 SizeChanged-=FirstGrabSizes ' unsubscribes End ' missed this method in mojox Property AvailableScroll:Vec2i() ' also need to calc paddings, etc Local xx:=Max( 0,MeasuredSize.x-VisibleRect.Width ) Local yy:=Max( 0,MeasuredSize.y-VisibleRect.Height ) Return New Vec2i( xx,yy ) End Public Field SizeChanged:Void( newSize:Vec2i,prevSize:Vec2i ) Method New() Layout="fill" ScrollBarsVisible = True Local newStyle := Style.Copy() newStyle.BackgroundColor = Color.Grey newStyle.BorderColor = Color.Black newStyle.Font = TestGui.smallFont Style = newStyle Local graph:=New GraphView ContentView = graph ' subscribes to changes SizeChanged+=FirstGrabSizes End Method OnRender( canvas:Canvas ) Override Super.OnRender( canvas ) canvas.Color = Color.Aluminum canvas.DrawText( "size:" + Frame + " ,scroll:" + Scroll , 5, 5 ) End Protected Method OnMouseEvent( event:MouseEvent ) Override Select event.Type Case EventType.MouseWheel Scroll = New Vec2i( Scroll.X+(event.Wheel.X*_panSpeed), Scroll.Y-(event.Wheel.Y*_panSpeed) ) App.RequestRender() End End ' store prev size Method OnMeasure:Vec2i() Override _prevSize=MeasuredSize Return Super.OnMeasure() End ' check new size and fire SizeChanged event if necessary Method OnLayout() Override Super.OnLayout() Local cur:=MeasuredSize If cur<>_prevSize Then SizeChanged( cur,_prevSize ) End End

As for me, SizeChanged event should be a mojox core part.

Also I missed AvailableScroll:Vec2i property in ScrollView – to let us know is there scroll available and how much.

Above is a way how my BlaBlaViewExt were borned in ted2go.

[nerobotParticipant]

Here is splitted-by-classes version:

Monkey

Class RightDock Extends ScrollViewExt Private Method FirstGrabSizes( newSize:Vec2i,prevSize:Vec2i ) Print "sizes: "+newSize+", "+prevSize 'Scroll = newSize * 0.5 Scroll = AvailableScroll * 0.5 SizeChanged-=FirstGrabSizes ' unsubscribes End Public Method New() Layout="fill" ScrollBarsVisible = True Local newStyle := Style.Copy() newStyle.BackgroundColor = Color.Grey newStyle.BorderColor = Color.Black newStyle.Font = TestGui.smallFont Style = newStyle Local graph:=New GraphView ContentView = graph ' subscribes to changes SizeChanged+=FirstGrabSizes End Method OnRender( canvas:Canvas ) Override Super.OnRender( canvas ) canvas.Color = Color.Aluminum canvas.DrawText( "size:" + Frame + " ,scroll:" + Scroll , 5, 5 ) End End Class ScrollViewExt Extends ScrollView Private Field _prevSize:Vec2i Field _panSpeed := 5.0 ' missed this method in mojox Property AvailableScroll:Vec2i() ' also need to calc paddings, etc Local xx:=Max( 0,MeasuredSize.x-VisibleRect.Width ) Local yy:=Max( 0,MeasuredSize.y-VisibleRect.Height ) Return New Vec2i( xx,yy ) End Public Field SizeChanged:Void( newSize:Vec2i,prevSize:Vec2i ) Protected Method OnMouseEvent( event:MouseEvent ) Override Select event.Type Case EventType.MouseWheel Scroll = New Vec2i( Scroll.X+(event.Wheel.X*_panSpeed), Scroll.Y-(event.Wheel.Y*_panSpeed) ) App.RequestRender() End End ' store prev size Method OnMeasure:Vec2i() Override _prevSize=MeasuredSize Return Super.OnMeasure() End ' check new size and fire SizeChanged event if necessary Method OnLayout() Override Super.OnLayout() Local cur:=MeasuredSize If cur<>_prevSize Then SizeChanged( cur,_prevSize ) End End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

Class RightDock Extends ScrollViewExt Private Method FirstGrabSizes( newSize:Vec2i,prevSize:Vec2i ) Print "sizes: "+newSize+", "+prevSize 'Scroll = newSize * 0.5 Scroll = AvailableScroll * 0.5 SizeChanged-=FirstGrabSizes ' unsubscribes End Public Method New() Layout="fill" ScrollBarsVisible = True Local newStyle := Style.Copy() newStyle.BackgroundColor = Color.Grey newStyle.BorderColor = Color.Black newStyle.Font = TestGui.smallFont Style = newStyle Local graph:=New GraphView ContentView = graph ' subscribes to changes SizeChanged+=FirstGrabSizes End Method OnRender( canvas:Canvas ) Override Super.OnRender( canvas ) canvas.Color = Color.Aluminum canvas.DrawText( "size:" + Frame + " ,scroll:" + Scroll , 5, 5 ) End End     Class ScrollViewExt Extends ScrollView Private Field _prevSize:Vec2i Field _panSpeed := 5.0 ' missed this method in mojox Property AvailableScroll:Vec2i() ' also need to calc paddings, etc Local xx:=Max( 0,MeasuredSize.x-VisibleRect.Width ) Local yy:=Max( 0,MeasuredSize.y-VisibleRect.Height ) Return New Vec2i( xx,yy ) End Public Field SizeChanged:Void( newSize:Vec2i,prevSize:Vec2i ) Protected Method OnMouseEvent( event:MouseEvent ) Override Select event.Type Case EventType.MouseWheel Scroll = New Vec2i( Scroll.X+(event.Wheel.X*_panSpeed), Scroll.Y-(event.Wheel.Y*_panSpeed) ) App.RequestRender() End End ' store prev size Method OnMeasure:Vec2i() Override _prevSize=MeasuredSize Return Super.OnMeasure() End ' check new size and fire SizeChanged event if necessary Method OnLayout() Override Super.OnLayout() Local cur:=MeasuredSize If cur<>_prevSize Then SizeChanged( cur,_prevSize ) End End

[Mark SiblyKeymaster]

Hi,

Here’s my little hack for initial auto-centering. Just replace RightDock.OnRender wth this:

Monkey

Method OnRender( canvas:Canvas ) Override Super.OnRender( canvas ) canvas.Color = Color.Aluminum canvas.DrawText( "size:" + Frame + " ,scroll:" + Scroll , 5, 5 ) Global _centered:Bool If _centered Return Scroll=(ContentView.MeasuredSize-VisibleRect.Size)/2 _centered=True End

1 2 3 4 5 6 7 8 9 10 11

Method OnRender( canvas:Canvas ) Override Super.OnRender( canvas ) canvas.Color = Color.Aluminum canvas.DrawText( "size:" + Frame + " ,scroll:" + Scroll , 5, 5 )   Global _centered:Bool If _centered Return Scroll=(ContentView.MeasuredSize-VisibleRect.Size)/2 _centered=True End

OK, it’s still not all that pretty, and also relies on a ‘done’ style flag. This is alas not easy/possible to do in the ctor because the gui has not been laid out yet – layout is done just before render so while ctor is executing, nothing has been measured/positioned yet.

I chose this design to minimize layout overhead and to simplify things. Another approach is to, as nerobot says, make views update layout in response to resize events, but in my experience this can lead to considerable layout overhead, and even layout ‘lockups’,  esp. in the case of complex hierarchies as one resize can trigger lots of layout code. I’m not adverse to adding a SizeChanged event, but I am against the idea of it being used to trigger layout.

Mojox uses a pretty simple layout system (largely pinched form Android). Layout is a 2 pass process and is always performed just before rendering (could be optimized/improved here). In the first pass, views are measured ‘bottom up’ using OnMeasure. This initializes their MeasuredSize property. Since measuring is bottom up, parent views can therefore depend on children having already been measured when measuring themselves. In the second pass, views are positioned/laid out ‘top down’. This way, everything is measured *exactly* once, and positioned *exactly* once. Also, properties like ‘Rect’ and ‘Frame’ etc are updated once and always in sync with each other and their true ‘render position’.

There are of course some limitations and issues with the mojox approach. Layout of things like wordwrapped text or html views is tricky, because view height is dependant on view width, and there are some hacks in there for dealing with that . And having layout occur ‘at some point in the future’ can sometimes be inconvenient, but in my experience the benefits are worth it. YMMV.

[nerobotParticipant]

Thanks for explanation, and for ‘global’ inside of method body.

[Mark SiblyKeymaster]

Actually, ‘field’ inside of method would be cool!

[Mark SiblyKeymaster]

Also, forgot about UpdateWindow(). Add this to the end of TestGui ctor:

Monkey

UpdateWindow( False ) rgtDock.Scroll=(rgtDock.ContentView.MeasuredSize-rgtDock.VisibleRect.Size)/2

1 2 3

UpdateWindow( False ) rgtDock.Scroll=(rgtDock.ContentView.MeasuredSize-rgtDock.VisibleRect.Size)/2

UpdateWindow causes a full window layout update so should be used sparingly, but I think its the right solution in this case.

[EthernautParticipant]

You guys are amazing!

I’m enjoying MojoX now that I understand it better, and diving into it led me to rework my “Game” class so it extends View instead of Window. That way I can more easily stick it into a GUI with all kinds of docks and toolbars, and even have two or more different instances of that class, each one showing something different, in the same interface.

Thanks!

[Author]

Posts