mojox – experimental widget

[degacParticipant]

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

Monkey

Namespace mojox #rem monkeydoc The PBar class. #end Class PBar Extends View #rem monkeydoc Invoked when the label is clicked. #end Field Clicked:Void() #rem monkeydoc Invoked when the label is right clicked. #end Field RightClicked:Void() #rem monkeydoc Invoked when the label is double clicked. #end Field DoubleClicked:Void() #rem monkeydoc Creates a new label. #end Method New( value:Float=0.0) Style=GetStyle( "Button" ) _value=value Layout="fill-x" Gravity=New Vec2f( 0,.5 ) End Method Update:Void(v:Float=0.0) _value=v If _value<0 _value=0 If _value>1 _value=1 RequestRender() End #rem monkeydoc Adds a view to the right of the label. #end Method AddView( view:View ) AddChildView( view ) _views.Push( view ) End #rem monkeydoc Removes a view from the label. #end Method RemoveView( view:View ) RemoveChildView( view ) _views.Remove( view ) End Protected Method OnMeasure:Vec2i() Override _viewsSize=New Vec2i( 0,0 ) Local w:=0,h:=0 w=100 h=20 For Local view:=Eachin _views _viewsSize.x+=view.LayoutSize.x _viewsSize.y=Max( _viewsSize.y,view.LayoutSize.y ) Next w+=_viewsSize.x h=Max( h,_viewsSize.y ) Return New Vec2i( w,h ) End Method OnLayout() Override Local iy:=(Height-_iconSize.y)/2 _iconRect=New Recti( 0,iy,_iconSize.x,iy+_iconSize.y ) Local tx:=_iconSize.x,ty:=0 Local tw:=_textSize.x,th:=Height _textRect=New Recti( tx,ty,tx+tw,ty+th ) _textRect=New Recti(0,0,100,20)'the default size (for now!) Local x1:=Width For Local view:=Eachin _views.Backwards() Local x0:=Max( x1-view.LayoutSize.x,_textRect.Right ) view.Frame=New Recti( x0,0,x1,Height ) x1=x0 Next Return Local x0:=_textRect.Right For Local view:=Eachin _views Local x1:=Min( x0+view.LayoutSize.x,Width ) view.Frame=New Recti( x0,0,x1,Height ) x0=x1 Next End Method OnRender( canvas:Canvas ) Override Local s:=Self.Frame Local pp:Float pp=Float(100)*_value canvas.Color=Color.Grey canvas.DrawRect(s.X,s.Y,s.X+102,s.Y+15) canvas.Color=Color.Red canvas.DrawRect(s.X+1,s.Y+1,s.X+pp,s.Y+12) End Method OnMouseEvent( event:MouseEvent ) Override Select event.Type Case EventType.MouseDown,EventType.MouseWheel Return Case EventType.MouseClick Clicked() Case EventType.MouseRightClick RightClicked() Case EventType.MouseDoubleClick DoubleClicked() End event.Eat() End Private Field _value:float Field _views:=New Stack<View> Field _iconSize:Vec2i Field _iconRect:Recti Field _textSize:Vec2i Field _textRect:Recti Field _viewsSize:Vec2i 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 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159

Namespace mojox   #rem monkeydoc The PBar class. #end Class PBar Extends View   #rem monkeydoc Invoked when the label is clicked. #end Field Clicked:Void()   #rem monkeydoc Invoked when the label is right clicked. #end Field RightClicked:Void() #rem monkeydoc Invoked when the label is double clicked. #end Field DoubleClicked:Void() #rem monkeydoc Creates a new label. #end Method New( value:Float=0.0) Style=GetStyle( "Button" ) _value=value Layout="fill-x" Gravity=New Vec2f( 0,.5 ) End   Method Update:Void(v:Float=0.0) _value=v If _value<0 _value=0 If _value>1 _value=1 RequestRender()   End   #rem monkeydoc Adds a view to the right of the label. #end Method AddView( view:View ) AddChildView( view ) _views.Push( view ) End #rem monkeydoc Removes a view from the label. #end Method RemoveView( view:View ) RemoveChildView( view ) _views.Remove( view ) End Protected Method OnMeasure:Vec2i() Override _viewsSize=New Vec2i( 0,0 ) Local w:=0,h:=0   w=100 h=20 For Local view:=Eachin _views _viewsSize.x+=view.LayoutSize.x _viewsSize.y=Max( _viewsSize.y,view.LayoutSize.y ) Next w+=_viewsSize.x h=Max( h,_viewsSize.y ) Return New Vec2i( w,h ) End Method OnLayout() Override Local iy:=(Height-_iconSize.y)/2 _iconRect=New Recti( 0,iy,_iconSize.x,iy+_iconSize.y ) Local tx:=_iconSize.x,ty:=0 Local tw:=_textSize.x,th:=Height _textRect=New Recti( tx,ty,tx+tw,ty+th ) _textRect=New Recti(0,0,100,20)'the default size (for now!) Local x1:=Width For Local view:=Eachin _views.Backwards() Local x0:=Max( x1-view.LayoutSize.x,_textRect.Right ) view.Frame=New Recti( x0,0,x1,Height ) x1=x0 Next Return Local x0:=_textRect.Right For Local view:=Eachin _views Local x1:=Min( x0+view.LayoutSize.x,Width ) view.Frame=New Recti( x0,0,x1,Height ) x0=x1 Next End Method OnRender( canvas:Canvas ) Override Local s:=Self.Frame Local pp:Float pp=Float(100)*_value canvas.Color=Color.Grey canvas.DrawRect(s.X,s.Y,s.X+102,s.Y+15) canvas.Color=Color.Red canvas.DrawRect(s.X+1,s.Y+1,s.X+pp,s.Y+12)   End Method OnMouseEvent( event:MouseEvent ) Override   Select event.Type Case EventType.MouseDown,EventType.MouseWheel Return Case EventType.MouseClick Clicked() Case EventType.MouseRightClick RightClicked() Case EventType.MouseDoubleClick DoubleClicked() End   event.Eat() End Private   Field _value:float Field _views:=New Stack<View> Field _iconSize:Vec2i Field _iconRect:Recti Field _textSize:Vec2i Field _textRect:Recti Field _viewsSize:Vec2i   End

PBar example

Monkey

#import "<std>" #import "<mojo>" #import "<mojox>" Using std.. Using mojo.. Using mojox.. Class MyWindow Extends Window Global pb:PBar,label:Label Global timer:Timer Global counter:Int Global bvalue:Float=0.1 Method New() Super.New( "Pbar Demo",640,480,WindowFlags.Resizable ) label=New Label( "Idle" ) label.Gravity=New Vec2f( .5,0 ) pb=New PBar(bvalue) pb.Layout="stretch" timer=New Timer(2,OnUpdate) Local dockingView:=New DockingView dockingView.AddView( label,"top" ) dockingView.AddView( pb,"top" ) ContentView=dockingView End Method OnUpdate() counter+=1 Print "Tick: "+counter bvalue=bvalue+.1 pb.Update(bvalue) label.Text="Value "+bvalue End End Function Main() New AppInstance New MyWindow App.Run() 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

#import "<std>" #import "<mojo>" #import "<mojox>"   Using std.. Using mojo.. Using mojox..   Class MyWindow Extends Window     Global pb:PBar,label:Label Global timer:Timer Global counter:Int Global bvalue:Float=0.1   Method New() Super.New( "Pbar Demo",640,480,WindowFlags.Resizable ) label=New Label( "Idle" ) label.Gravity=New Vec2f( .5,0 ) pb=New PBar(bvalue) pb.Layout="stretch" timer=New Timer(2,OnUpdate) Local dockingView:=New DockingView dockingView.AddView( label,"top" ) dockingView.AddView( pb,"top" ) ContentView=dockingView End Method OnUpdate() counter+=1 Print "Tick: "+counter bvalue=bvalue+.1 pb.Update(bvalue) label.Text="Value "+bvalue End End   Function Main()   New AppInstance New MyWindow App.Run() End

Cheers!

[Mark SiblyKeymaster]

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.

Monkey

#import "<std>" #import "<mojo>" #import "<mojox>" Using std.. Using mojo.. Using mojox.. Class PBar Extends View Method New( value:Float=0 ) Layout="fill-x" Style=New Style( Style ) Style.Border=New Recti( -4,-4,4,4 ) Style.BorderColor=Color.DarkGrey Value=value End Property Value:Float() Return _value Setter( value:Float ) value=Clamp( value,0.0,1.0 ) If value=_value Return _value=value RequestRender() End Protected Method OnMeasure:Vec2i() Override Return New Vec2i( 16,16 ) End Method OnRender( canvas:Canvas ) Override Local t:=Int( Width*_value ) canvas.Color=Color.Grey canvas.DrawRect( 0,0,t,Height ) canvas.Color=Color.Red canvas.DrawRect( t,0,Width-t,Height ) End Private Field _value:Float End Class MyWindow Extends Window Global pb:PBar,label:Label Global timer:Timer Global counter:Int Global bvalue:Float=0.1 Method New() Super.New( "Pbar Demo",640,480,WindowFlags.Resizable ) label=New Label( "Idle" ) label.Gravity=New Vec2f( .5,0 ) pb=New PBar(bvalue) timer=New Timer(2,OnUpdate) Local dockingView:=New DockingView dockingView.AddView( label,"top" ) dockingView.AddView( pb,"top" ) ContentView=dockingView End Method OnUpdate() counter+=1 Print "Tick: "+counter bvalue=bvalue+.1 pb.Value=bvalue label.Text="Value "+bvalue End End Function Main() New AppInstance New MyWindow App.Run() 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

#import "<std>" #import "<mojo>" #import "<mojox>"   Using std.. Using mojo.. Using mojox..   Class PBar Extends View   Method New( value:Float=0 )   Layout="fill-x" Style=New Style( Style ) Style.Border=New Recti( -4,-4,4,4 ) Style.BorderColor=Color.DarkGrey Value=value End Property Value:Float()   Return _value Setter( value:Float ) value=Clamp( value,0.0,1.0 ) If value=_value Return _value=value RequestRender() End   Protected Method OnMeasure:Vec2i() Override Return New Vec2i( 16,16 ) End Method OnRender( canvas:Canvas ) Override Local t:=Int( Width*_value ) canvas.Color=Color.Grey canvas.DrawRect( 0,0,t,Height ) canvas.Color=Color.Red canvas.DrawRect( t,0,Width-t,Height ) End Private Field _value:Float   End Class MyWindow Extends Window     Global pb:PBar,label:Label Global timer:Timer Global counter:Int Global bvalue:Float=0.1   Method New() Super.New( "Pbar Demo",640,480,WindowFlags.Resizable ) label=New Label( "Idle" ) label.Gravity=New Vec2f( .5,0 ) pb=New PBar(bvalue) timer=New Timer(2,OnUpdate) Local dockingView:=New DockingView dockingView.AddView( label,"top" ) dockingView.AddView( pb,"top" ) ContentView=dockingView End Method OnUpdate() counter+=1 Print "Tick: "+counter bvalue=bvalue+.1 pb.Value=bvalue label.Text="Value "+bvalue End End   Function Main()   New AppInstance New MyWindow App.Run() End

[degacParticipant]

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)!

[Author]

Posts