Adding two views to one view

This topic contains 8 replies, has 4 voices, and was last updated by Hezkore 2 years ago.

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

Author

Posts

April 10, 2017 at 1:42 am #7832

Participant

I’m trying to make my own “view” (they’ll forever be called gadgets to me heh)
Basically, I want one main view, which does nothing more than house two other views in a DockingView you can resize.

I can’t figure out how to do it though!
I’ve tried AddChildView but it never produces any result, it’s like it’s never added.
Something similar to this:

Class MainView Extends View
	Method New()
		Local d:DockingView=New DockingView
		
		d.AddView(New View1,"left","",True)
		d.AddView(New View2,"right","",True)
		
		Self.AddChildView(d)
	End
End

Class MainView Extends View

Method New()

Local d:DockingView=New DockingView

d.AddView(New View1,"left","",True)

d.AddView(New View2,"right","",True)

Self.AddChildView(d)

End

Here’s a picture of what I want:

Main view, view 1 and view 2 would just be one single view to the end user.
When you make a new view, you’d just do blah=New MainView, and view 1 and 2 would always be part of it.

Any examples of this?

April 10, 2017 at 4:08 am #7836

nerobot

Participant

Look at this example

Namespace CustomViews

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

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


Class View1 Extends View

	Method OnRender( canvas:Canvas ) Override
		
		canvas.Color=Color.Green
		canvas.DrawText( "View 1",Frame.Width*.5,Frame.Height*.5,.5,.5 )
	End
	
End

Class View2 Extends View

	Method New()
	
		RenderStyle.BackgroundColor=Color.Steel
	End
	
	Method OnRender( canvas:Canvas ) Override
		
		canvas.Color=Color.White
		canvas.DrawText( "View 2",Frame.Width*.5,Frame.Height*.5,.5,.5 )
	End
	
End

Class GameView Extends View
	
	Method New()
		
		RenderStyle.BackgroundColor=Color.DarkGrey
	End
	
	Method OnRender( canvas:Canvas ) Override
		
		canvas.Color=Color.Red
		canvas.DrawText( "Game View",Frame.Width*.5,Frame.Height*.5,.5,.5 )
	End
	
End

Class MainView Extends DockingView
	
	Method New()
		
		Super.New()
		
		Local d:=New DockingView
		d.AddView( New View1,"left","50%",True )
		d.AddView( New View2,"left","50%",True )
		AddView( d,"bottom","240",True )
		
		ContentView=New GameView
	End
	
	Method OnRender( canvas:Canvas ) Override
	
		Super.OnRender( canvas )
		'canvas.Color=Color.Red
		'canvas.DrawText( "MainView",Frame.Width*.5,Frame.Height*.5,.5,.5 )
	End
	
End

Class AppWindow Extends Window
	
	Method New()
		
		Super.New( "CustomView test",800,600,WindowFlags.Resizable|WindowFlags.Center )
		
		Local view:=New MainView
		ContentView=view
	End
	
	Method OnRender( canvas:Canvas ) Override
		
		Super.OnRender( canvas )
		RequestRender()
	End
	
End

Function Main()
	
	New AppInstance
	New AppWindow
	App.Run()
	
End

100

Namespace CustomViews

#Import "<std>"

#Import "<mojo>"

#Import "<mojox>"

Using std..

Using mojo..

Using mojox..

Class View1 Extends View

Method OnRender( canvas:Canvas ) Override

canvas.Color=Color.Green

canvas.DrawText( "View 1",Frame.Width*.5,Frame.Height*.5,.5,.5 )

End

Class View2 Extends View

Method New()

RenderStyle.BackgroundColor=Color.Steel

End

Method OnRender( canvas:Canvas ) Override

canvas.Color=Color.White

canvas.DrawText( "View 2",Frame.Width*.5,Frame.Height*.5,.5,.5 )

End

Class GameView Extends View

Method New()

RenderStyle.BackgroundColor=Color.DarkGrey

End

Method OnRender( canvas:Canvas ) Override

canvas.Color=Color.Red

canvas.DrawText( "Game View",Frame.Width*.5,Frame.Height*.5,.5,.5 )

End

Class MainView Extends DockingView

Method New()

Super.New()

Local d:=New DockingView

d.AddView( New View1,"left","50%",True )

d.AddView( New View2,"left","50%",True )

AddView( d,"bottom","240",True )

ContentView=New GameView

End

Method OnRender( canvas:Canvas ) Override

Super.OnRender( canvas )

'canvas.Color=Color.Red

'canvas.DrawText( "MainView",Frame.Width*.5,Frame.Height*.5,.5,.5 )

End

Class AppWindow Extends Window

Method New()

Super.New( "CustomView test",800,600,WindowFlags.Resizable|WindowFlags.Center )

Local view:=New MainView

ContentView=view

End

Method OnRender( canvas:Canvas ) Override

Super.OnRender( canvas )

RequestRender()

End

Function Main()

New AppInstance

New AppWindow

App.Run()

End

Inside of MainView you can see two different ways of AddView – one with percentage, other with pixels.

If you use percentage – views will resizable according to parent view.

If you use pixels – resizing beam became visible, so we can change it position.

April 10, 2017 at 1:59 pm #7840

Hezkore

Participant

Super big thanks!

I’m having a super hard time understanding how “Views” work…
MaxGUI made sense to me, MojoX does not haha.

With a bit of messing around, I finally managed to get it to act the way I want!

April 11, 2017 at 10:35 am #7851

nerobot

Participant

AFAIK, AdamStrange made his own layout system, but I didn’t look at that.

I like QT widgets, maxgui is like qt. But i don’t remember is it possible to use auto-stretching gadgets in maxgui.

The power of ui system based on flexible layout system. Let’s bring it into mx2 official repo at one point? mojo[y]

April 11, 2017 at 11:44 am #7852

AdamStrange

Participant

Yep, I made my own one, Mojox just doesn’t work.

Ted21 uses this new layout system for the custom controls as wells as mt font editor, map editor, sprite editor, and palette editor.

Check them out here:

https://adamstrange.itch.io

Both the font and palette editor have no mojox anywhere near them – apart from the internal stuff that Mark moved into Mojo.

In essence I took the Mojo view and started from scratch from their building a proper flexible control and layout system.

April 11, 2017 at 9:52 pm #7859

Mark Sibly

Keymaster

Mojox just doesn’t work.

Works fine here.

Mojox could definitely do with more layout views, like GridView, FlowView etc. These’ll happen one day, but DockingView is a very flexible alternative for now.

Wish I could spend more time on mojox, but it’s still relatively low priority…

April 11, 2017 at 10:46 pm #7860

Hezkore

Participant

Yeah, it’s not that MojoX doesn’t work for me.
It’s just kinda confusing, especially without any proper documentation or examples.
MojoX doesn’t come naturally to me, like MaxGUI did.
I mean, I’ll probably learn it eventually, but it’s hard figuring everything on my own.

April 11, 2017 at 11:14 pm #7861

Mark Sibly

Keymaster

It’s just kinda confusing, especially without any proper documentation or examples.

There’s a sample for each view type in the mojox/tests dir, but yeah, docs could be better.

Mojox is a little more complex than MaxGUI as it aims for an algorithmic layout approach instead of using ‘hard coded’ coords/sizes everywhere ala MaxGUI. This is mainly to make it easier to write GUIs that work on a wide range of devices/resolutions, but it also helps when dealing with resizable windows and dynamic themes.

Alas, there is not a great deal of variety when it comes to layout style views. It really needs something like a GridView for arranging simple tool palettes etc, a FlowView for quick ‘n’ nasty ‘add some buttons to a windows’ functionality, and likely a bunch more! DockingView is flexible, but it can be cumbersome to use in some situations.

I’ll probably be getting back into some mojox soon, but in the meantime, here’s a little GridView that might be useful for situations such as the above:

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

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

Class GridView Extends View
	
	Method New( width:Int,height:Int )
		_gridw=width
		_gridh=height
	End
	
	Method Clear()
		
		For Local cell:=Eachin _cells
			RemoveChildView( cell.view )
		Next
		_cells.Clear()
		RequestRender()
	End
	
	Method AddView( view:View,x:Int,y:Int,width:Int=1,height:Int=1 )
		
		_cells.Add( New Cell( view,x,y,width,height ) )
		AddChildView( view )
		RequestRender()
	End
	
	Method ReplaceView( view:View,with:View )
		
		For Local cell:=Eachin _cells
			If cell.view<>view Continue
			RemoveChildView( view )
			AddChildView( with )
			cell.view=with
			RequestRender()
			Return
		Next
		
	End
	
	Method RemoveView( view:View )
		
		For Local cell:=Eachin _cells
			If cell.view<>view Continue
			RemoveChildView( view )
			_cells.Remove( cell )
			RequestRender()
			Return
		Next
		
	End
	
	Protected
	
	Method OnMeasure:Vec2i() Override

		Local maxw:=0
		Local maxh:=0
		
		For Local cell:=Eachin _cells
			
			Local size:=cell.view.MeasuredSize
			
			maxw=Max( maxw,Int( Ceil( size.x/cell.w ) ) )
			maxh=Max( maxh,Int( Ceil( size.y/cell.h ) ) )
		Next
		
		Return New Vec2i( maxw * _gridw,maxh * _gridh )
	End
	
	Method OnLayout() Override
		
		For Local cell:=Eachin _cells
			
			Local x0:=cell.x * Width / _gridw
			Local x1:=(cell.x+cell.w) * Width / _gridw

			Local y0:=cell.y * Height / _gridw
			Local y1:=(cell.y+cell.h) * Height / _gridh
			
			cell.view.Frame=New Recti( x0,y0,x1,y1 )
		Next
			
	End
	
	Private
	
	Struct Cell
		Field view:View
		Field x:Int
		Field y:Int
		Field w:Int
		Field h:Int
		
		Method New( view:View,x:Int,y:Int,w:Int,h:Int )
			Self.view=view
			Self.x=x
			Self.y=y
			Self.w=w
			Self.h=h
		End
	End
	
	Field _cellw:Int
	Field _cellh:Int
	Field _gridw:Int
	Field _gridh:Int
	Field _cells:=New Stack<Cell>
End

Class MyWindow Extends Window
	
	Field mainView:GridView
	
	Field gameView:TextView
	Field view1:TextView
	Field view2:TextView
	
	Method New()
		Super.New( "GridView",640,480,WindowFlags.Resizable )
		
		gameView=New TextView
		gameView.Text="GameView"
		Local gameViewStyle:=gameView.Style.Copy()
		gameViewStyle.BackgroundColor=Color.Red
		gameView.Style=gameViewStyle
		
		view1=New TextView
		view1.Text="View1"
		Local view1Style:=view1.Style.Copy()
		view1Style.BackgroundColor=Color.Green
		view1.Style=view1Style
		
		view2=New TextView
		view2.Text="View2"
		Local view2Style:=view2.Style.Copy()
		view2Style.BackgroundColor=Color.Blue
		view2.Style=view2Style

		mainView=New GridView( 8,8 )			'create 8x8 grid
		mainView.AddView( gameView,0,0,8,4 )	'top half is gameView
		mainView.AddView( view1,0,4,4,4 )		'lower left quarter is view1
		mainView.AddView( view2,4,4,4,4 )		'lower right quarter is view2
		
		ContentView=mainView
	End
	
End

Function Main()
	
	New AppInstance
	New MyWindow
	App.Run()
	
End

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

160

161

#Import "<std>"

#Import "<mojo>"

#Import "<mojox>"

Using std..

Using mojo..

Using mojox..

Class GridView Extends View

Method New( width:Int,height:Int )

_gridw=width

_gridh=height

End

Method Clear()

For Local cell:=Eachin _cells

RemoveChildView( cell.view )

_cells.Clear()

RequestRender()

End

Method AddView( view:View,x:Int,y:Int,width:Int=1,height:Int=1 )

_cells.Add( New Cell( view,x,y,width,height ) )

AddChildView( view )

RequestRender()

End

Method ReplaceView( view:View,with:View )

For Local cell:=Eachin _cells

If cell.view<>view Continue

RemoveChildView( view )

AddChildView( with )

cell.view=with

RequestRender()

Return

End

Method RemoveView( view:View )

For Local cell:=Eachin _cells

If cell.view<>view Continue

RemoveChildView( view )

_cells.Remove( cell )

RequestRender()

Return

End

Protected

Method OnMeasure:Vec2i() Override

Local maxw:=0

Local maxh:=0

For Local cell:=Eachin _cells

Local size:=cell.view.MeasuredSize

maxw=Max( maxw,Int( Ceil( size.x/cell.w ) ) )

maxh=Max( maxh,Int( Ceil( size.y/cell.h ) ) )

Return New Vec2i( maxw * _gridw,maxh * _gridh )

End

Method OnLayout() Override

For Local cell:=Eachin _cells

Local x0:=cell.x * Width / _gridw

Local x1:=(cell.x+cell.w) * Width / _gridw

Local y0:=cell.y * Height / _gridw

Local y1:=(cell.y+cell.h) * Height / _gridh

cell.view.Frame=New Recti( x0,y0,x1,y1 )

End

Private

Struct Cell

Field view:View

Field x:Int

Field y:Int

Field w:Int

Field h:Int

Method New( view:View,x:Int,y:Int,w:Int,h:Int )

Self.view=view

Self.x=x

Self.y=y

Self.w=w

Self.h=h

End

Field _cellw:Int

Field _cellh:Int

Field _gridw:Int

Field _gridh:Int

Field _cells:=New Stack<Cell>

End

Class MyWindow Extends Window

Field mainView:GridView

Field gameView:TextView

Field view1:TextView

Field view2:TextView

Method New()

Super.New( "GridView",640,480,WindowFlags.Resizable )

gameView=New TextView

gameView.Text="GameView"

Local gameViewStyle:=gameView.Style.Copy()

gameViewStyle.BackgroundColor=Color.Red

gameView.Style=gameViewStyle

view1=New TextView

view1.Text="View1"

Local view1Style:=view1.Style.Copy()

view1Style.BackgroundColor=Color.Green

view1.Style=view1Style

view2=New TextView

view2.Text="View2"

Local view2Style:=view2.Style.Copy()

view2Style.BackgroundColor=Color.Blue

view2.Style=view2Style

mainView=New GridView( 8,8 ) 'create 8x8 grid

mainView.AddView( gameView,0,0,8,4 ) 'top half is gameView

mainView.AddView( view1,0,4,4,4 ) 'lower left quarter is view1

mainView.AddView( view2,4,4,4,4 ) 'lower right quarter is view2

ContentView=mainView

End

Function Main()

New AppInstance

New MyWindow

App.Run()

End

…that was pretty fun to write – think I’ll add this to mojox right now!

April 11, 2017 at 11:20 pm #7862

Hezkore

Participant

Whoa!
You’re a machine Mark haha.

Thanks a bunch, but focus on the 3D module! (Or ZIP module)
The 3D module is the only reason I check Twitter every day heh. x)

Author

Posts

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

You must be logged in to reply to this topic.

Adding two views to one view

Archives

Recent Replies

What is this?