20,741
edits
Howto:Creating a Canvas GUI dialog file: Difference between revisions
Jump to navigation
Jump to search
Howto:Creating a Canvas GUI dialog file (view source)
Revision as of 17:59, 29 June 2014
, 29 June 2014→Creating the actual dialog file
| Line 27: | Line 27: | ||
== Creating the actual dialog file == | == Creating the actual dialog file == | ||
{{Note|These dialog files can be edited at run-time and simply closed/re-opened, because the Canvas system will reload them from disk whenever the menu binding is triggered. So this is very convenient for quickly developing and testing your dialogs.}} | {{Note|These dialog files can be edited at run-time and simply closed/re-opened, because the Canvas system will reload them from disk whenever the menu binding is triggered. So this is very convenient for quickly developing and testing your dialogs. For testing purposes, you can also paste the snippet into your [[Nasal Console]] and directly execute it.}} | ||
Next, open/create $FG_ROOT/Nasal/canvas/gui/dialogs/CanvasDemo.nas and add some boilerplate code: | Next, open/create $FG_ROOT/Nasal/canvas/gui/dialogs/CanvasDemo.nas and add some boilerplate code: | ||
<syntaxhighlight lang="nasal"> | <syntaxhighlight lang="nasal"> | ||
| Line 40: | Line 40: | ||
_active_button: nil | _active_button: nil | ||
}; | }; | ||
m._dlg.getCanvas(1) | m._dlg.getCanvas(1) | ||
.set("background", canvas.style.getColor("bg_color")); | .set("background", canvas.style.getColor("bg_color")); | ||
m._root = m._dlg.getCanvas().createGroup(); | m._root = m._dlg.getCanvas().createGroup(); | ||
var vbox = VBoxLayout.new(); | var vbox = canvas.VBoxLayout.new(); | ||
m._dlg.setLayout(vbox); | m._dlg.setLayout(vbox); | ||
# this is where you can add widgets from $FG_ROOT/Nasal/canvas/gui/widgets, e.g.: | # this is where you can add widgets from $FG_ROOT/Nasal/canvas/gui/widgets, e.g.: | ||
vbox.addItem( | vbox.addItem( | ||
canvas.gui.widgets.Button.new(m._root, style, {}) | canvas.gui.widgets.Button.new(m._root, canvas.style, {}) | ||
.setText( "my Button !" ) | .setText( "my Button !" ) | ||
); | ); | ||
return m; | return m; | ||
}, | }, | ||
}; | }; | ||
var demo = DemoDialog.new(); | var demo = DemoDialog.new();</syntaxhighlight> | ||
</syntaxhighlight> | |||
Finally, start FlightGear and open your new dialog | Finally, start FlightGear and open your new dialog | ||