Help with GUI

[HezkoreParticipant]

I can’t for the life of me figure out how to make a DockingView at the left side of the screen (say 50% or so) with a TextView at the top, a few checkboxes under it and a button at the bottom.
The TextView never fully covers the entire area, it just sits as a tiny bar at the top.

Monkey

#Import "<std>" #Import "<mojo>" #Import "<mojox>" Using std.. Using mojo.. Using mojox.. Class MyWindow Extends Window Method New() Super.New("Simple Mojo Gui App",640,480,WindowFlags.Resizable) Local mainview:=New DockingView Local d1:DockingView=New DockingView Local d2:DockingView=New DockingView d1.AddView(New TextView(),"top") d2.AddView(New PushButton("Activate"),"top") d1.Layout="fill" mainview.AddView(d1,"left","128",True) d1.AddView(d2,"bottom") ContentView=mainview 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

#Import "<std>" #Import "<mojo>" #Import "<mojox>"   Using std.. Using mojo.. Using mojox..   Class MyWindow Extends Window Method New() Super.New("Simple Mojo Gui App",640,480,WindowFlags.Resizable) Local mainview:=New DockingView Local d1:DockingView=New DockingView Local d2:DockingView=New DockingView d1.AddView(New TextView(),"top") d2.AddView(New PushButton("Activate"),"top") d1.Layout="fill" mainview.AddView(d1,"left","128",True) d1.AddView(d2,"bottom") ContentView=mainview End End   Function Main() New AppInstance New MyWindow App.Run() End

UPDATE: Okay so I think I’ve got it figured out…

Monkey

#Import "<std>" #Import "<mojo>" #Import "<mojox>" Using std.. Using mojo.. Using mojox.. Class MyWindow Extends Window Method New() Super.New("Simple Mojo Gui App",640,480,WindowFlags.Resizable) Local mainview:=New DockingView Local d1:DockingView=New DockingView d1.ContentView=New TextView() d1.AddView(New PushButton("Activate"),"bottom") d1.AddView(New CheckButton("Option"),"bottom") mainview.AddView(d1,"left","128",True) Self.ContentView=mainview 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

#Import "<std>" #Import "<mojo>" #Import "<mojox>"   Using std.. Using mojo.. Using mojox..   Class MyWindow Extends Window Method New() Super.New("Simple Mojo Gui App",640,480,WindowFlags.Resizable) Local mainview:=New DockingView Local d1:DockingView=New DockingView d1.ContentView=New TextView() d1.AddView(New PushButton("Activate"),"bottom") d1.AddView(New CheckButton("Option"),"bottom") mainview.AddView(d1,"left","128",True) Self.ContentView=mainview End End   Function Main() New AppInstance New MyWindow App.Run() End

[HezkoreParticipant]

Another question regarding the GUI…

How would I get the width of a DockingView that is resizable?
The draggable knob, or whatever, never seems to be taken into account when testing for width.

Also, how do detect if a mouse click is inside my DockingView or the main window canvas?

And is there any way to get images from the theme?
I know there’s App.Theme.OpenImage but that only loads an image from the theme folder, I want to specify a image name in the theme json file and somehow get that in the app.

Finally, is there a way to remove spaces at the start of a word-wrapped line in the TextView?
Cause, this:  isn’t very pretty.
The space before “to” should be removed.

[nerobotParticipant]

1. Width – you can catch onLayout processing by extending mojox view. But when I tried to do that I got endless onLayout queue…

2. Mouse click – look at OnMouseEvent (or OnContentMouseEvent) but need to extend mojox view to use this way.

3. Have no on the box. Hm, maybe we can write theme extension class to get that stuff.

4. Remove spaces – small fix in textview needed. Maybe I’ll create patch..

[HezkoreParticipant]

I’ve managed to get images from a theme using “skins”.
They’re automatically loaded once the theme is applied.

Monkey

myImage=App.Theme.GetStyle("YourStyle").Skin.Image

1	myImage=App.Theme.GetStyle("YourStyle").Skin.Image

In the theme file you’ll have to add something like:

Monkey

"YourStyle":{"skin":"some_image.png"},

1	"YourStyle":{"skin":"some_image.png"},

Don’t forget that it needs to go under “styles”:{ in the theme file and the image has to be in the “themes” folder!

[Author]

Posts