mojox – experimental widget

About Monkey 2 Forums Monkey 2 Development mojox – experimental widget

This topic contains 2 replies, has 2 voices, and was last updated by  degac 2 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #3319


    Ok, this is my first attempt to create a ‘new’ widget in mojox. Probably (…sure!) there are dozens of way to make it better, but even if the code is BAD and UGLY (I know :P) I post here – maybe someone else could be inspired!

    the widget is a ‘real’ progress bar… I suppose I don’t need to explain!

    On my system I hacked/added to mojox folder my ‘class’ PBar and changed mojox.monkey2 to import this one.

    The ‘base’ is the Label.monkey2 class – there are many other things not needed (icon & text informations etc) – and events are not implemented (I’m still thinking if this widget should or not be interactive with the user)

    I still have no clear how to ‘render well’ a widget – it seems to depend on View & Style class, I have no intention to ‘break’ too much!

    BPar class

    PBar example



    Mark Sibly

    Nice first attempt!

    It’s a bit overcomplicated, probably because you based it on Label which actually does quite a bit these days! I’ve attached a simplified version below, with the text and event stuff ripped out for clarity. If you do want text/events on your PBar, it’s probably best to just extend Label…in which case you can ditch OnMeasure and just call Super.OnRender at the end of OnRender.

    Some notes:

    It’s a good idea to set preferred Layout, TextGravity (now fixed!) etc for a view in it’s ctor to increase the chances of it working as expected by users!

    I’d recommend ‘fill-x’ layout for view’s like this – ‘stretch’ will cause rendering to be scaled which can look wonky/ugly and distorts borders, skins etc. Also, by using ‘fill-x’ you don’t have to worry about the width returned by OnMeasure, as it will be effectively thrown away. So in the code below, I just return (16,16) from OnMeasure, of which only the height is actually used. However, it’s always a good idea to return something non-0 in OnMeasure just in case the user sets some weird Layout mode. For example, setting my PBar’s Layout to “float” means it will end up being 16 x 16, which wont look ideal but at least it will work. In this case, the user will probably have to use MinSize etc to make it look any good, but that’s OK, you’re not pyschic and can’t be expected to know how wide they want their floating PBars!

    A view’s Frame rect is in ‘parent’ coords (parents use it to layout children) so it’s not really much use to children and you don’t want to use it inside OnRender. Unless you’re writing a layout view, you can probably ignore frame altogether. Instead, just use Rect, Width and Height inside OnRender (just like a game). Rect.X and Rect.Y are always (0,0) so Rect discribes the view’s local coordinate system. This makes my PBar’s OnRender very simple!

    I’ve also added a custome style to the PBar that adds a dark grey border, just to show how it’s done. Styles can actually be stored in a theme ‘.json’ file, but more on that later. Note that adding/changing a view’s style doesn’t affect anything in terms of OnMeasure/OnRender – this is automatically handled for you by the system.



    Wow, very clean & much more readable!

    I’m not used to Property/Setter … same result but in a more ‘human logic’ way!
    And I discovered Clamp() too!

    I have something new to study now (Style)!

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

You must be logged in to reply to this topic.