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 13:49, 11 October 2015
, 11 October 2015→Creating MFD Dialogs
| Line 85: | Line 85: | ||
Full-dps-space-shuttle-keypad.png|Screen shot showing the DPS keypad on the space shuttle using Nasal/Canvas | Full-dps-space-shuttle-keypad.png|Screen shot showing the DPS keypad on the space shuttle using Nasal/Canvas | ||
</gallery> | </gallery> | ||
<syntaxhighlight lang="nasal"> | <syntaxhighlight lang="nasal">## | ||
## | |||
# helper function for registering events (callbacks) with buttons (wrapped in a closure) | # helper function for registering events (callbacks) with buttons (wrapped in a closure) | ||
var createButton = func(root, label, clickAction) { | var createButton = func(root, label, clickAction) { | ||
var button = canvas.gui.widgets.Button.new(root, canvas.style, {} ) | var button = canvas.gui.widgets.Button.new(root, canvas.style, {} ) | ||
.setText(label | .setText(label); | ||
button.listen("clicked", clickAction ); | button.listen("clicked", clickAction ); | ||
return button; | return button; | ||
} | } | ||
var (width,height) = ( | var (width,height) = (400,210); | ||
var title = 'DPS Keypad'; | var title = 'DPS Keypad'; | ||
| Line 109: | Line 107: | ||
var root = myCanvas.createGroup(); | var root = myCanvas.createGroup(); | ||
# create a new layout | # create a new layout for the keypad: | ||
var myHBox = canvas.HBoxLayout.new(); | var myHBox = canvas.HBoxLayout.new(); | ||
# assign the layout to the Canvas | # assign the layout to the Canvas | ||
| Line 171: | Line 169: | ||
foreach(var btn; col) { | foreach(var btn; col) { | ||
var button=createButton(root:root, label: btn, clickAction:func {print("button clicked:");}); | |||
(func() { | |||
var action=btn; | |||
var vbox=vbox; | |||
var button=createButton(root:root, label: btn, clickAction:func {print("button clicked:",action);}); | |||
# add the button to the vbox | # add the button to the vbox | ||
vbox.addItem(button); | vbox.addItem(button); | ||
})(); # invoke anonymous function (closure) | |||
} | } | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||