MojoX GUI questions

Home Forums Monkey 2 Programming Help MojoX GUI questions

Tagged: ,

This topic contains 10 replies, has 3 voices, and was last updated by  Ethernaut 2 weeks, 2 days ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #10203

    Ethernaut
    Participant

    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.

    Thanks!

    #10205

    nerobot
    Participant
    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.

    and usage is

    #10217

    Mark Sibly
    Keymaster

    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.

    #10221

    Ethernaut
    Participant

    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?

    #10225

    nerobot
    Participant

    There is my ‘improved’ version

    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. 🙂

    #10226

    nerobot
    Participant

    Here is splitted-by-classes version:

    #10228

    Mark Sibly
    Keymaster

    Hi,

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

    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.

    #10229

    nerobot
    Participant

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

    #10230

    Mark Sibly
    Keymaster

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

    #10231

    Mark Sibly
    Keymaster

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

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

    #10234

    Ethernaut
    Participant

    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!

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

You must be logged in to reply to this topic.