Rendering to views in mojox

Tagged: mojox

This topic contains 14 replies, has 4 voices, and was last updated by peterigz 1 year, 5 months ago.

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

Author

Posts

October 29, 2017 at 6:23 pm #11362

peterigz

Participant

I’m just getting into using mojox and getting to grips with how views work etc.

I can’t figure out why the following code doesn’t render anything in the WorldView, I’m sure it’s something obvious but any ideas what I’m doing wrong?

#Import "<std>"
#Import "<mojo>"
#Import "<mojox>"

Using std..
Using mojo..
Using mojox..

Class SCEditor Extends Window
	
	Field MainMenu:MenuBar
	Field World:WorldView
	Field WorldDoc:ScrollView
	Field MainView:DockingView

	Method New()
		Super.New( "SpaceCraft Editor",640,480,WindowFlags.Resizable )
		
		SetMenu()
		
		MainView = New DockingView
		Local tools:=New ToolBar
		
		For Local i:=1 To 9
		
			tools.AddAction( "Tool "+i ).Triggered=Lambda()
				Alert( "Tool "+i+" clicked" )
			End
		
		Next
		
		World = New WorldView
		WorldDoc = New ScrollView
		WorldDoc.ContentView = World
		
		MainView.AddView(MainMenu, "top")
		MainView.AddView(tools, "top")
		MainView.AddView(WorldDoc, "top")
		
		ContentView = MainView
		
	End
	
	Method SetMenu()
		
		Local filemenu:=New Menu("File")
		
		filemenu.AddAction("Open...").Triggered = Lambda()
			Alert("Open")
		End
		
		filemenu.AddSeparator()
		
		filemenu.AddAction("Quit").Triggered = Lambda()
			App.Terminate()
		End
		
		MainMenu = New MenuBar
		
		MainMenu.AddMenu(filemenu)
			
	End

End

Class WorldView Extends View
	
	Method New()
	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
	

Function Main()

	New AppInstance
	
	New SCEditor
	
	App.Run()
End

#Import "<std>"

#Import "<mojo>"

#Import "<mojox>"

Using std..

Using mojo..

Using mojox..

Class SCEditor Extends Window

Field MainMenu:MenuBar

Field World:WorldView

Field WorldDoc:ScrollView

Field MainView:DockingView

Method New()

Super.New( "SpaceCraft Editor",640,480,WindowFlags.Resizable )

SetMenu()

MainView = New DockingView

Local tools:=New ToolBar

For Local i:=1 To 9

tools.AddAction( "Tool "+i ).Triggered=Lambda()

Alert( "Tool "+i+" clicked" )

End

World = New WorldView

WorldDoc = New ScrollView

WorldDoc.ContentView = World

MainView.AddView(MainMenu, "top")

MainView.AddView(tools, "top")

MainView.AddView(WorldDoc, "top")

ContentView = MainView

End

Method SetMenu()

Local filemenu:=New Menu("File")

filemenu.AddAction("Open...").Triggered = Lambda()

Alert("Open")

End

filemenu.AddSeparator()

filemenu.AddAction("Quit").Triggered = Lambda()

App.Terminate()

End

MainMenu = New MenuBar

MainMenu.AddMenu(filemenu)

End

Class WorldView Extends View

Method New()

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

Function Main()

New AppInstance

New SCEditor

App.Run()

End

Thanks!

October 29, 2017 at 7:24 pm #11363

Hezkore

Participant

You may need RequestRender() inside of the Windows OnRender method and not your View.

October 30, 2017 at 7:00 pm #11368

peterigz

Participant

After a bit of experimenting, this seemed to work ok:

MainView.AddView(WorldDoc, "left", "100%")

1	MainView.AddView(WorldDoc, "left", "100%")

If I used “100%” with “top” then that would work but the height would be set to the height of the window, not the remaining space. Not sure how you get it to set the height to the remaining space only. Not specifying any size at all meant the size was basically 0. Don’t know if that’s correct behaviour or not or if there’s some other things that I’m missing.

October 31, 2017 at 2:05 am #11371

nerobot

Participant

You can override OnMeasure method for MainView to set its size.

You can use MinSize and MaxSize to specify bounds. Separately or both.

Also there is a ContentView property.

And there is a Layout property. For example Layout=”float” ; Gravity=new vec2f (.5,1) – align view at x-center&y-bottom.

And you can omit size param of AddView () to use view own size.

October 31, 2017 at 4:56 am #11373

Mark Sibly

Keymaster

Change this…

MainView.AddView(WorldDoc, "top")

…to this…

MainView.ContentView=WorldDoc

The problem here is that ‘border’ views added to a DockingView (ie: views added via AddView, not the ContentView) should implement the OnMeasure method, as this is how the docking view knows how high (for top/bottom views) or wide (for left/right views) the border views should be for layout.

The ContentView of a DockingView does not actually need to implement OnMeasure as it gets all the remaining space once the border top/bottom/left/right views are added. The size of the ContentView as returned by OnMeasure is effectively ignored.

I think OnMeasure might return 0,0 by default. It’d probaby be better if it returned 16,16 or something else non-null so in cases like this at least something gets rendered.

October 31, 2017 at 5:02 am #11374

nerobot

Participant

Maybe add Property PrefferedSize:Vec2i() as an alternative way to specify view size.

October 31, 2017 at 1:27 pm #11387

peterigz

Participant

Thanks Mark, that makes a bit more sense now.

October 31, 2017 at 10:24 pm #11393

peterigz

Participant

Is there an event that I can hook into that I can initialise certain things after the width and height of the view has been calculated?

At the moment if I try and set something up where I need to know the calculated width and height of the view I can’t put it in New() because width and height are both 0 at that point. OnLayout seems to be called every frame. I’ll also need something like OnResize for when the window/view is resized. Or is it just a case of checking manually if the width/height have changed?

Edit: sorry might have lot’s of questions about mojox! How do I change the font of the menus? I can change the font of other views ok using styles but the same method doesn’t seem to be working for menus.

November 1, 2017 at 1:01 am #11401

Mark Sibly

Keymaster

Have a look at this thread for a similar discussion re: mojox and how layout works in general (near the end).

MojoX GUI questions

Use window method UpdateWindow( False ) in window ctor to force a full window layout which will update all view sizes. Views aren’t normally resized until just before rendering during a layout phase – more info here:

http://monkeycoder.co.nz/forums/reply/10228/

In general, mojox is designed to automate layout as much as possible, making it highly reactive. However, people who are used to maxgui etc and having to do layout ‘by hand’ might find it a bit confusing.

How do I change the font of the menus?

There may actually be no programmatic way to do that right now, I will have a closer look at some point. You should be able to do this by setting the MenuButton{} style in a theme file though. I would actually recommend using a theme file anyway, but it really should be possible to set menu button font programmatically too.

November 1, 2017 at 9:28 am #11408

peterigz

Participant

Thanks, I had seen that thread but didn’t notice the stuff about layout. So basically use a flag for the initial layout, that’s fair enough.

Still haven’t worked out this though: How do I change the font of the menus? I can change the font of other views ok using styles but the same method doesn’t seem to be working for menus.

November 1, 2017 at 11:08 am #11410

nerobot

Participant

Still haven’t worked out this though: How do I change the font of the menus? I can change the font of other views ok using styles but the same method doesn’t seem to be working for menus.

{
	"extends":"default",

	"fonts":{
		"super-big-font":"DejaVuSans.ttf,34"
	},

	"styles":{
	
		"MenuButton":{
			"extends":"Label",
			"font":"super-big-font"
		}
		
	}
}

{

"extends":"default",

"fonts":{

"super-big-font":"DejaVuSans.ttf,34"

"styles":{

"MenuButton":{

"extends":"Label",

"font":"super-big-font"

}

minimal style’s part to change menus font.

November 1, 2017 at 12:47 pm #11412

peterigz

Participant

Thanks nerobot. I was just trying to do this in code like:

		Local newStyle := filemenu.Style.Copy()
		newStyle.Font = SCEditor.Roboto
		filemenu.Style = newStyle

Local newStyle := filemenu.Style.Copy()

newStyle.Font = SCEditor.Roboto

filemenu.Style = newStyle

Can you do it like that? I tried on the menu and menu bar but nothing changed. I know the font is loaded ok because the same code is working on the render view.

November 1, 2017 at 1:38 pm #11414

nerobot

Participant

I’ve got it!

Class MyWindow Extends Window

	Method New()
		
		Super.New( "Simple Mojo Gui App",640,480,WindowFlags.Resizable )
		
		Local bar:=New MenuBar
		
		Local menuFile:=New Menu( "File" )
		menuFile.AddAction( "Open" )
		menuFile.AddAction( "Save" )
		
		Local menuView:=New Menu( "View" )
		menuView.AddAction( "Goto line" )
		
		bar.AddMenu( menuFile )
		bar.AddMenu( menuView )
		
		Local dock:=New DockingView
		dock.AddView( bar,"top" )
		
		ContentView=dock
		
		' apply custom font for all Menu and MenuButton
		Local font:=Font.Load( "asset::verdana.ttf",32 )
		
		Local unusedItem:=New MenuButton( "" )
		SetFont( unusedItem.Style,font )
		
		Local unusedMenu:=New Menu( "" )
		SetFont( unusedMenu.Style,font )
	End
	
End

Function SetFont( style:Style,font:Font )
	
	style.Font=font
	
	For Local i:=Eachin style.States.Values
		SetFont( i,font )
	Next
End

Class MyWindow Extends Window

Method New()

Super.New( "Simple Mojo Gui App",640,480,WindowFlags.Resizable )

Local bar:=New MenuBar

Local menuFile:=New Menu( "File" )

menuFile.AddAction( "Open" )

menuFile.AddAction( "Save" )

Local menuView:=New Menu( "View" )

menuView.AddAction( "Goto line" )

bar.AddMenu( menuFile )

bar.AddMenu( menuView )

Local dock:=New DockingView

dock.AddView( bar,"top" )

ContentView=dock

' apply custom font for all Menu and MenuButton

Local font:=Font.Load( "asset::verdana.ttf",32 )

Local unusedItem:=New MenuButton( "" )

SetFont( unusedItem.Style,font )

Local unusedMenu:=New Menu( "" )

SetFont( unusedMenu.Style,font )

End

Function SetFont( style:Style,font:Font )

style.Font=font

For Local i:=Eachin style.States.Values

SetFont( i,font )

End

November 1, 2017 at 8:58 pm #11421

Mark Sibly

Keymaster

Yuck! But it works…

What’s probably needed is something like SetStyle in the Theme class, so you can programmatically set any style used by the gui internals that you don’t get to directly create, like MenuButton etc. Will look into adding this.

A theme json file is still IMO the best way to do all styling…

(hmm…does F1 no longer show docs? It shows the status bar quick-help but it used to open actual docs I think?)

November 2, 2017 at 12:25 am #11423

peterigz

Participant

Thanks Nerobot/Mark, I guess I should look into doing it via a theme instead then, that looks like the cleanest way of doing it.

And yes I noticed that F1 doesn’t always show the docs (sometimes it does work though)

Author

Posts

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

You must be logged in to reply to this topic.

Rendering to views in mojox

Archives

Recent Replies

What is this?