Some help with a mojox GUI

[coconParticipant]

I want to create a simple mojox GUI application, that will contain two textviews (up and down) in a docker. What I come up is by studying ted, but so far I can’t figure out how to display it, I am not enough experienced with mojox yet.

Monkey

#Import "<std>" #Import "<mojo>" #Import "../../../../Programs/monkey2/src/ted2/mojox/mojox" Using std.. Using mojo.. Using mojox.. Function Main() New AppInstance New MainWindowInstance() App.Run() End Class MainWindowInstance Extends Window Field _docker:DockingView Field _inputTextView:TextView Field _outputTextView:TextView Method New() Super.New("Test", New Recti(0, 0, 960, 800), WindowFlags.Resizable|WindowFlags.Center) CreateGUI() End Method CreateGUI() _inputTextView = New TextView _outputTextView = New TextView _docker = New DockingView _docker.AddView(_inputTextView, "top", 0) _docker.AddView(_outputTextView, "bottom", 400) 'Self.KeyView = Cast<View>(_inputTextView) 'App.KeyView = _docker AddChild(_docker) End Method OnRender(canvas:Canvas) Override App.RequestRender() GCCollect() End 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

#Import "<std>" #Import "<mojo>" #Import "../../../../Programs/monkey2/src/ted2/mojox/mojox"     Using std.. Using mojo.. Using mojox..     Function Main() New AppInstance New MainWindowInstance() App.Run() End     Class MainWindowInstance Extends Window Field _docker:DockingView Field _inputTextView:TextView Field _outputTextView:TextView Method New() Super.New("Test", New Recti(0, 0, 960, 800), WindowFlags.Resizable|WindowFlags.Center) CreateGUI() End Method CreateGUI() _inputTextView = New TextView _outputTextView = New TextView _docker = New DockingView _docker.AddView(_inputTextView, "top", 0) _docker.AddView(_outputTextView, "bottom", 400)   'Self.KeyView = Cast<View>(_inputTextView) 'App.KeyView = _docker AddChild(_docker) End   Method OnRender(canvas:Canvas) Override App.RequestRender() GCCollect() End End

[AdamStrangeParticipant]

Here’s the basic definition:

_docker.AddView( _menuBar, “top”, 40, false )

_menuBar would be your view/component. in your case _inputTextView

It being located at the “top” with a height of 40 (or width if it was at the left/right)

the last parameter is “use click/drag separator” in this case it is false, so it won’t be able to be resized.

 

Your code:

_docker.AddView( _inputTextView, “top”, 0 ) <– 0 will give it a height of 0, make it 100 and see what happens

the line

_docker.AddView( _outputTextView, “bottom”, 400 )

would place a window/component with a height of 400 and a draggle size, I think what you really wanted was 2 windows with a single sizeable separator.

So what you want is this version

_docker.ContentView = _outputTextView

Where the remaining space (ContentView) is taken up by a component.

Next…

[coconParticipant]

Hi thanks for the feedback. I did the changes and now it works.

Monkey

Function Main() Theme.Load() New AppInstance New MainWindowInstance() App.Run() End '... Method CreateGUI() _inputTextView = New TextView _outputTextView = New TextView _docker = New DockingView ' I set the initial _docker view to _inputTextView (should fill the all of the screen) _docker.ContentView = _inputTextView ' I create a new bottom split, by default is resizable _docker.AddView(_outputTextView, "bottom", 400) ' The GUI element must be added to the Window Self.AddChild(_docker) 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

Function Main() Theme.Load() New AppInstance New MainWindowInstance() App.Run() End   '...   Method CreateGUI() _inputTextView = New TextView _outputTextView = New TextView _docker = New DockingView ' I set the initial _docker view to _inputTextView (should fill the all of the screen) _docker.ContentView = _inputTextView ' I create a new bottom split, by default is resizable _docker.AddView(_outputTextView, "bottom", 400)   ' The GUI element must be added to the Window Self.AddChild(_docker) End

[Mark SiblyKeymaster]

I’m actually in the process of cleaning up mojox and turning it into a ‘real’ module – results should be out within a week or so.

[AdamStrangeParticipant]

Mark. You want to look over my (heavily) modified mojox files?

[Mark SiblyKeymaster]

Sure – are they up at github yet?

[coconParticipant]

This is great news  That way it will be developed even more.

[AdamStrangeParticipant]

Hi Mark, Yep. finally got it sorted at:

https://github.com/StrangeIsMyName/monkey2

in the src you will find ted21

canvas, keyboard and keycodes also need to be updated in modules/mojo

canvas has a small addition, and the same for the keycodes

[Mark SiblyKeymaster]

I had a quick look through but I don’t I’ll be able to use any of the mojox stuff.

The problem is (as far as I can tell anyway) too much of it is hard coded in. For example, buttonx uses literal rects/colors etc everywhere.

On of the goals with the gui is to create something people can use for their own games, which means they need to be able to tweak as much as possible.

This means padding rects, colors, icons etc need to be variables of some sort, and preferably collected together so they are easier to tweak. The mojox/theme.monkey2 file was my temporary solution to this but has been superceded by a much nicer ‘theme.json’ config file in the new mojox.

I’m a bit curious why you duplicated the code for ‘TreeView’ in codetreeview – was there some reason you couldn’t just extend TreeView.Node? This is what I’ve done in debugview/helpview and it turned out to work surprisingly well. Or is it just another case of ‘no docs’?

DrawImageIcon is possibly a useful addition to mojo, although it can also be achieved with DrawRect( x,y,w,h,image,sx,sy,sw,sh ). In future, when mx2 gets the ability to add methods to classes, you’d be able to implement DrawImageIcon without having to add more stuff to canvas.

Everyone’s likely to have their own ‘must have’ version of DrawImage etc. If there’s enough demand for one in paticular I’d consider adding it, but it’s a ‘one off’ request and can be implemented without disturbing canvas it probably wont happen.

I like the new Color consts and think they would make a nice addition – although ‘Phlox’?!?

I don’t think the Key.Command addition is necessary – the ‘Gui’ key basically means ‘the key between Control and Shift’ and I’m fine with that. My Ps2 keyboard (still going!) has a ‘PS’ key for the Gui key – should I add another enum for that? I don’t think so…

What is probably sorely needed though is something like:

Monkey

#If __TARGET__="macos" MenuCmd=Gui #Else MenuCmd=Control #Endif

1 2 3 4 5

#If __TARGET__="macos"    MenuCmd=Gui #Else    MenuCmd=Control #Endif

…to make setting hotkeys for menus easier.

Nice work in general though! I’m amazed anyone has been able to do anything useful with mojox considering it is completely undocced and fairly underdeveloped so I understand it can’t have been easy to do what you’ve done.

The new mojox will have SOME docs at least so hopefully my apparently ‘weird’ approaches to some stuff will make more sense.

[AdamStrangeParticipant]

Mark, LOL.

Ah, I didn’t see DrawRect( x,y,w,h,image,sx,sy,sw,sh ) – I was looking at the image code. I can possible remove and replace with this version?

The reason for the duplication was just me doing something fast and needing augmenting the code. the  code tree adds to the line storage. I didn’t want to break anything and I also didn’t want tree view to possibly slow down with lots of ‘variations’. So it was simpler just to have all the code in one place.

[AdamStrangeParticipant]

Mark, have you thought about a page system and designer?

E.G.

For any app or game, you are dealing with a series of pages (a page being a single entire window view)

in a game pages would be something like: MainPage, OptionsPage, SubOptionsPage, GameStartPage, GameRunPage, PagePausePage, GameDiePage

In (lets say a very simple text editor with no toolbars, etc) MainPage possible FindPage and PrefsPage

 

An app page would be much more complex because they would have lots of components (text, buttons, etc)

a game page would generally not contain many components, a menu page some components, etc

 

The designer would be the visual drag/drop designer to make a page. Drag a button onto the page, give it some text, look, position, etc. save the resulting page as a file

load the resulting page definition and let the user connect it all up (wire)?

[gcmartijnParticipant]

I hope that that page option is optional, now there is complete freedom.

@mark

if i had to make a gui system, then maybe i would use the same like microsoft wpf

https://msdn.microsoft.com/en-us/library/mt149842.aspx

It is using a simple xml system.

[Mark SiblyKeymaster]

Mark, have you thought about a page system and designer?

I think it’s a great idea, but probably a bit much for me to take on right now.

[AdamStrangeParticipant]

No Probs Mark

[Author]

Posts