Added Builder example
This commit is contained in:
Stefan Salewski
parent
8dbad94581
commit
00a254887d
3 changed files with 192 additions and 1 deletions
117
README.adoc
117
README.adoc
|
|
@ -1,4 +1,4 @@
|
||||||
= High level GTK3 bindings for the Nim programming language
|
= High level GTK3 (and GTK4) bindings for the Nim programming language
|
||||||
(c) Stefan Salewski
|
(c) Stefan Salewski
|
||||||
//Version 0.4 2018
|
//Version 0.4 2018
|
||||||
:experimental:
|
:experimental:
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
:source-highlighter: pygments
|
:source-highlighter: pygments
|
||||||
:pygments-style: monokai
|
:pygments-style: monokai
|
||||||
:icons: font
|
:icons: font
|
||||||
|
:toc:
|
||||||
|
|
||||||
:GIR: GObject-Introspection
|
:GIR: GObject-Introspection
|
||||||
:MAC: MacOSX
|
:MAC: MacOSX
|
||||||
|
|
@ -646,6 +647,120 @@ code you may catch such exceptions with Nim's `try:` blocks. (You may also modif
|
||||||
an illegal CSS statement -- if the statement is seriously wrong, then you should get an exception from
|
an illegal CSS statement -- if the statement is seriously wrong, then you should get an exception from
|
||||||
loadFromData().
|
loadFromData().
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
== GTK Builder -- user interfaces created with the glade tool
|
||||||
|
|
||||||
|
As C code can be very verbose, some people prefer outsourcing the GUI layout
|
||||||
|
in XML files which can be created and modified with the glade GUI creator program.
|
||||||
|
For high level languages like Python or Nim the program source code is generally
|
||||||
|
short and clean, so that use of XML files may not have much benefit. But of course
|
||||||
|
we can use GTK builder from Nim. We follow the example from
|
||||||
|
https://developer.gnome.org/gtk3/stable/ch01s03.html
|
||||||
|
but we modify it to use the new GTK3 app style: For the XML file we have to change only
|
||||||
|
class="GtkWindow" into class="GtkApplicationWindow". Our Nim program has
|
||||||
|
the well known application shape, with one addition: We have to
|
||||||
|
explicitly set the application for the main window. Of course you can also
|
||||||
|
use the traditional program structure with Nim and Builder, for that case
|
||||||
|
you can straight follow the linked page or other examples. Here is the XML file and the Nim code:
|
||||||
|
|
||||||
|
[[builder.ui]]
|
||||||
|
[source, xml]
|
||||||
|
.builder.ui
|
||||||
|
----
|
||||||
|
<interface>
|
||||||
|
<object id="window" class="GtkApplicationWindow">
|
||||||
|
<property name="visible">True</property>
|
||||||
|
<property name="title">Grid</property>
|
||||||
|
<property name="border-width">10</property>
|
||||||
|
<child>
|
||||||
|
<object id="grid" class="GtkGrid">
|
||||||
|
<property name="visible">True</property>
|
||||||
|
<child>
|
||||||
|
<object id="button1" class="GtkButton">
|
||||||
|
<property name="visible">True</property>
|
||||||
|
<property name="label">Button 1</property>
|
||||||
|
</object>
|
||||||
|
<packing>
|
||||||
|
<property name="left-attach">0</property>
|
||||||
|
<property name="top-attach">0</property>
|
||||||
|
</packing>
|
||||||
|
</child>
|
||||||
|
<child>
|
||||||
|
<object id="button2" class="GtkButton">
|
||||||
|
<property name="visible">True</property>
|
||||||
|
<property name="label">Button 2</property>
|
||||||
|
</object>
|
||||||
|
<packing>
|
||||||
|
<property name="left-attach">1</property>
|
||||||
|
<property name="top-attach">0</property>
|
||||||
|
</packing>
|
||||||
|
</child>
|
||||||
|
<child>
|
||||||
|
<object id="quit" class="GtkButton">
|
||||||
|
<property name="visible">True</property>
|
||||||
|
<property name="label">Quit</property>
|
||||||
|
</object>
|
||||||
|
<packing>
|
||||||
|
<property name="left-attach">0</property>
|
||||||
|
<property name="top-attach">1</property>
|
||||||
|
<property name="width">2</property>
|
||||||
|
</packing>
|
||||||
|
</child>
|
||||||
|
</object>
|
||||||
|
<packing>
|
||||||
|
</packing>
|
||||||
|
</child>
|
||||||
|
</object>
|
||||||
|
</interface>
|
||||||
|
----
|
||||||
|
|
||||||
|
|
||||||
|
[[builder.nim]]
|
||||||
|
[source, nim]
|
||||||
|
.builder.nim
|
||||||
|
----
|
||||||
|
https://developer.gnome.org/gtk3/stable/ch01s03.html
|
||||||
|
# builder.nim -- application style example using builder/glade xml file for user interface
|
||||||
|
# nim c builder.nim
|
||||||
|
import gintro/[gtk, glib, gobject, gio]
|
||||||
|
|
||||||
|
proc hello(b: Button; msg: string) =
|
||||||
|
echo "Hello", msg
|
||||||
|
|
||||||
|
proc quitApp(b: Button; app: Application) =
|
||||||
|
echo "Bye"
|
||||||
|
quit(app)
|
||||||
|
|
||||||
|
proc appActivate(app: Application) =
|
||||||
|
let builder = newBuilder()
|
||||||
|
discard builder.addFromFile("builder.ui")
|
||||||
|
let window = builder.getApplicationWindow("window")
|
||||||
|
window.setApplication(app)
|
||||||
|
var button = builder.getButton("button1")
|
||||||
|
button.connect("clicked", hello, "")
|
||||||
|
button = builder.getButton("button2")
|
||||||
|
button.connect("clicked", hello, " again...")
|
||||||
|
button = builder.getButton("quit")
|
||||||
|
button.connect("clicked", quitApp, app)
|
||||||
|
#showAll(window)
|
||||||
|
|
||||||
|
proc main =
|
||||||
|
let app = newApplication("org.gtk.example")
|
||||||
|
connect(app, "activate", appActivate)
|
||||||
|
discard run(app)
|
||||||
|
|
||||||
|
main()
|
||||||
|
----
|
||||||
|
|
||||||
|
For each builder component gintro provides a typesafe access proc like
|
||||||
|
getApplicationWindow() and getButton() in this example.
|
||||||
|
|
||||||
|
Generally it is possible to use resource files merged with the executable program
|
||||||
|
instead of an external XML files, we have to investigate how we can do that in Nim.
|
||||||
|
And it may be possible to connect the signal handlers to handler procs from within
|
||||||
|
the XML file -- this is also work in progress...
|
||||||
|
|
||||||
== Drawing with Cairo graphics library
|
== Drawing with Cairo graphics library
|
||||||
|
|
||||||
The next example shows how we can use the cairo graphics library for drawing on a DrawingArea widget,
|
The next example shows how we can use the cairo graphics library for drawing on a DrawingArea widget,
|
||||||
|
|
|
||||||
31
examples/builder.nim
Normal file
31
examples/builder.nim
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
# https://developer.gnome.org/gtk3/stable/ch01s03.html
|
||||||
|
# builder.nim -- application style example using builder/glade xml file for user interface
|
||||||
|
# nim c builder.nim
|
||||||
|
import gintro/[gtk, glib, gobject, gio]
|
||||||
|
|
||||||
|
proc hello(b: Button; msg: string) =
|
||||||
|
echo "Hello", msg
|
||||||
|
|
||||||
|
proc quitApp(b: Button; app: Application) =
|
||||||
|
echo "Bye"
|
||||||
|
quit(app)
|
||||||
|
|
||||||
|
proc appActivate(app: Application) =
|
||||||
|
let builder = newBuilder()
|
||||||
|
discard builder.addFromFile("builder.ui")
|
||||||
|
let window = builder.getApplicationWindow("window")
|
||||||
|
window.setApplication(app)
|
||||||
|
var button = builder.getButton("button1")
|
||||||
|
button.connect("clicked", hello, "")
|
||||||
|
button = builder.getButton("button2")
|
||||||
|
button.connect("clicked", hello, " again...")
|
||||||
|
button = builder.getButton("quit")
|
||||||
|
button.connect("clicked", quitApp, app)
|
||||||
|
#showAll(window)
|
||||||
|
|
||||||
|
proc main =
|
||||||
|
let app = newApplication("org.gtk.example")
|
||||||
|
connect(app, "activate", appActivate)
|
||||||
|
discard run(app)
|
||||||
|
|
||||||
|
main()
|
||||||
45
examples/builder.ui
Normal file
45
examples/builder.ui
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
<interface>
|
||||||
|
<object id="window" class="GtkApplicationWindow">
|
||||||
|
<property name="visible">True</property>
|
||||||
|
<property name="title">Grid</property>
|
||||||
|
<property name="border-width">10</property>
|
||||||
|
<child>
|
||||||
|
<object id="grid" class="GtkGrid">
|
||||||
|
<property name="visible">True</property>
|
||||||
|
<child>
|
||||||
|
<object id="button1" class="GtkButton">
|
||||||
|
<property name="visible">True</property>
|
||||||
|
<property name="label">Button 1</property>
|
||||||
|
</object>
|
||||||
|
<packing>
|
||||||
|
<property name="left-attach">0</property>
|
||||||
|
<property name="top-attach">0</property>
|
||||||
|
</packing>
|
||||||
|
</child>
|
||||||
|
<child>
|
||||||
|
<object id="button2" class="GtkButton">
|
||||||
|
<property name="visible">True</property>
|
||||||
|
<property name="label">Button 2</property>
|
||||||
|
</object>
|
||||||
|
<packing>
|
||||||
|
<property name="left-attach">1</property>
|
||||||
|
<property name="top-attach">0</property>
|
||||||
|
</packing>
|
||||||
|
</child>
|
||||||
|
<child>
|
||||||
|
<object id="quit" class="GtkButton">
|
||||||
|
<property name="visible">True</property>
|
||||||
|
<property name="label">Quit</property>
|
||||||
|
</object>
|
||||||
|
<packing>
|
||||||
|
<property name="left-attach">0</property>
|
||||||
|
<property name="top-attach">1</property>
|
||||||
|
<property name="width">2</property>
|
||||||
|
</packing>
|
||||||
|
</child>
|
||||||
|
</object>
|
||||||
|
<packing>
|
||||||
|
</packing>
|
||||||
|
</child>
|
||||||
|
</object>
|
||||||
|
</interface>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue