20,741
edits
Canvas snippets: Difference between revisions
Jump to navigation
Jump to search
m
→Adding GUI Buttons (Layouts): screen shot & code added
m (→Adding GUI Buttons (Layouts): generalize & simplify snippet, add screen shot) |
m (→Adding GUI Buttons (Layouts): screen shot & code added) |
||
| Line 117: | Line 117: | ||
! Screenshot !! Code !! | ! Screenshot !! Code !! | ||
|- | |- | ||
| [[File:Canvas-demo-layouts-and-buttons-by-Necolatis.png|thumb|Canvas snippet: buttons and layouts (by Necolatis)]]|| | | [[File:Canvas-demo-layouts-and-buttons-by-Necolatis.png|thumb|Canvas snippet: buttons and layouts (by Necolatis)]] [[File:Canvas-toggle-button-snippet-by-Necolatis.png|thumb|Canvas toggle button demo by Necolatis]] || | ||
{{Note|This assumes that you already have a top-level root group set up, and named it '''root''', just change this variable if you want it to be rendered elsewhere. It also assumes you have a Layout item setup and called '''myLayoutItem'''. You must also have either setup a layout called '''style''' or be calling this from inside a dialog showed using canvas.loadDialog(dialog), which will define it for you.}} | {{Note|This assumes that you already have a top-level root group set up, and named it '''root''', just change this variable if you want it to be rendered elsewhere. It also assumes you have a Layout item setup and called '''myLayoutItem'''. You must also have either setup a layout called '''style''' or be calling this from inside a dialog showed using canvas.loadDialog(dialog), which will define it for you.}} | ||
<syntaxhighlight lang="nasal" enclose="div"> | <syntaxhighlight lang="nasal" enclose="div"> | ||
| Line 142: | Line 141: | ||
<syntaxhighlight lang="nasal" enclose="div"> | <syntaxhighlight lang="nasal" enclose="div"> | ||
# create a new layout | |||
var myLayout = canvas.HBoxLayout.new(); | |||
# assign it to the Canvas | |||
myCanvas.setLayout(myLayout); | |||
var button = canvas.gui.widgets.Button.new(root, canvas.style, {}) | |||
.setText("Toggle me") | .setText("Toggle me") | ||
.setCheckable(1) # this indicates that is should be a toggle button | .setCheckable(1) # this indicates that is should be a toggle button | ||
| Line 150: | Line 152: | ||
.setFixedSize(75, 25); | .setFixedSize(75, 25); | ||
button.listen("toggled", func (e) { | |||
if( e.detail.checked ) { | if( e.detail.checked ) { | ||
# add code here to react on button being depressed. | # add code here to react on button being depressed. | ||
| Line 158: | Line 160: | ||
}); | }); | ||
myLayout.addItem(button); | |||
</syntaxhighlight> | </syntaxhighlight> | ||
|- | |- | ||