diff --git a/source/tutorials/beginners/box.rst b/source/tutorials/beginners/box.rst index 6203945822a8559fed804468543d263673408752..150190973b3ada94f03c5d26f2d46874ce49c7e9 100644 --- a/source/tutorials/beginners/box.rst +++ b/source/tutorials/beginners/box.rst @@ -44,6 +44,18 @@ orientation. If you want each child to have the same size, you can use the box.props.homogeneous = True + .. code-tab:: vala + :emphasize-lines: 8 + + var box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 6); + var hello = new Gtk.Button.with_label ("Hello"); + var gbye = new Gtk.Button.with_label ("Goodbye"); + + box.append (hello); + box.append (gbye); + + box.homogeneous = true; + Expanding boxes --------------- @@ -84,6 +96,22 @@ Boxes will provide extra space to a child if the child is set to expand: box.append(bar) box.append(baz) + .. code-tab:: vala + + var box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 6); + + var foo = new Gtk.Button.with_label ("Live"); + var bar = new Gtk.Button.with_label ("Laugh"); + var baz = new Gtk.Button.with_label ("Love"); + + box.append (foo); + box.append (bar); + box.append (baz); + + // We set the middle button to expand. which will make the box + // expand, if given more space + bar.hexpand = true; + .. code-tab:: xml diff --git a/source/tutorials/beginners/button.rst b/source/tutorials/beginners/button.rst index 000c1bf69d907eee319f52abc87c6cd763414948..75012bbaab3ec47c8fea3900395a79db8f2a92c0 100644 --- a/source/tutorials/beginners/button.rst +++ b/source/tutorials/beginners/button.rst @@ -118,6 +118,13 @@ set the ``GtkWidget:can-default`` property for this to work. # "window" is the top level window that contains the button window.set_default_widget(button) + .. code-tab:: vala + + button.can_default = true; + + // "window" is the top level window that contains the button + window.default_widget = button; + One more detail that is good to know about default activation is that hitting :kbd:`Enter` while the focus is in a ``GtkEntry`` will only activate the default @@ -127,12 +134,15 @@ widget if the entry is marked as 'activates-default'. .. code-tab:: c - gtk_entry_set_activates_default (entry, TRUE); - + gtk_entry_set_activates_default (entry, TRUE); .. code-tab:: python - entry.props.activates_default = True + entry.props.activates_default = True + + .. code-tab:: vala + + entry.activates_default = true; Styles diff --git a/source/tutorials/beginners/check_box.rst b/source/tutorials/beginners/check_box.rst index 8531e8fab64bd20ba4ed3b0baa5d5623ab6c9139..ca9734fd8d0dfdbfcbd278a36c2be4802470f0a6 100644 --- a/source/tutorials/beginners/check_box.rst +++ b/source/tutorials/beginners/check_box.rst @@ -25,6 +25,13 @@ label. # "on_toggled" is defined elsewhere check.connect("toggled", on_toggled) + .. code-tab:: vala + + var check = new Gtk.CheckButton.with_label ("Show title"); + + // "on_toggled" is defined elsewhere + check.toggled.connect (on_toggled); + Useful methods for the component -------------------------------- diff --git a/source/tutorials/beginners/entry.rst b/source/tutorials/beginners/entry.rst index ab2633707a67a210a48a2c223b677be21f1cd068..36ecb2ff35c2b0027a817eba95d5c847c9910979 100644 --- a/source/tutorials/beginners/entry.rst +++ b/source/tutorials/beginners/entry.rst @@ -30,6 +30,13 @@ the :kbd:`Return` key. # "on_entry_activate" is defined elsewhere entry.connect("activate", on_entry_activate) + .. code-tab:: vala + + var entry = new Gtk.Entry (); + + // "on_entry_activate" is defined elsewhere + entry.activate.connect (on_entry_activate); + The entry can also activate the default widget in the same window, by setting the ``GtkEntry:activates-default`` property: @@ -46,6 +53,12 @@ the ``GtkEntry:activates-default`` property: entry = Gtk.Entry(activates_default=True) + .. code-tab:: vala + + var entry = new Gtk.Entry () { + activates_default = true + }; + Buffers ------- @@ -73,6 +86,15 @@ can use entry buffers to share content between different entry widgets: laugh = Gtk.Entry(buffer=buffer) love = Gtk.Entry(buffer=buffer) + .. code-tab:: vala + + var buffer = new Gtk.EntryBuffer ("Live, Laugh, Love"); + + // All three entries will show "Live, Laugh, Love" + var live = new Gtk.Entry.with_buffer (buffer); + var laugh = new Gtk.Entry.with_buffer (buffer); + var love = new Gtk.Entry.with_buffer (buffer); + Useful methods for the component -------------------------------- diff --git a/source/tutorials/beginners/file_dialog.rst b/source/tutorials/beginners/file_dialog.rst index bafa73ae67fefe9a936135f431bf683a4ef7f40f..0658c18e38f147fa11bc47d953d6d3bb647d72c0 100644 --- a/source/tutorials/beginners/file_dialog.rst +++ b/source/tutorials/beginners/file_dialog.rst @@ -73,13 +73,30 @@ Opening files ) def on_file_open_response(native, response): - if response == Gtk.Response.ACCEPT: + if response == Gtk.ResponseType.ACCEPT: self.open_file(native.get_file()) self._native = None self._native.connect("response", on_file_open_response) self._native.show() + .. code-tab:: vala + + var native = new Gtk.FileChooserNative ("Open File", + parent_window, + Gtk.FileChooserAction.OPEN, + "_Open", + "_Cancel"); + + native.response.connect ((response_id) => { + if (response_id == Gtk.ResponseType.ACCEPT) + open_file (native.get_file ()); + + native = null; + }; + + native.show (); + Saving files ------------ @@ -130,13 +147,28 @@ Saving files ) def on_file_save_response(native, response): - if response == Gtk.Response.ACCEPT: + if response == Gtk.ResponseType.ACCEPT: self.save_file(native.get_file()) self._native = None self._native.connect("response", on_file_save_response) self._native.show() + .. code-tab:: vala + + var native = new Gtgk.FileChooserNative ("Open File", + parent_window, + Gtk.FileChooserAction.SAVE, + "_Save", + "_Cancel"); + + native.response.connect ((response_id) => { + if (response_id == Gtk.ResponseType.ACCEPT) + save_file (native.get_file ()); + }); + + native.show (); + Choices ------- @@ -178,6 +210,16 @@ a set of possible values: ["live", "laugh", "love"], ["Live", "Laugh", "Love"]) + .. code-tab:: vala + + // Boolean choice + filechooser.add_choice ("validate", "Enable validation on load", null, null); + // Multiple choice + filechooser.add_choice ("action", + "Action when loading", + { "live", "laug", "love" }, + { "Live", "Laugh", "Love" }); + You can then use the ``get_choice()`` method in the "response" signal handler to retrieve the value of the given choice. diff --git a/source/tutorials/beginners/image.rst b/source/tutorials/beginners/image.rst index caae65924d727ffd4c77af678d9fb989bab75a73..b26dfdf214591d4d11fea0228917b340198bb8f7 100644 --- a/source/tutorials/beginners/image.rst +++ b/source/tutorials/beginners/image.rst @@ -11,12 +11,8 @@ fixed size images, like icons, you should use ``GtkImage`` instead. .. code-tab:: c - // create an image - GtkWidget *image = gtk_picture_new (); - - // set the content of the image using the gnome-image.png file - gtk_picture_set_from_file (GTK_PICTURE (image), "gnome-image.png"); - + // create an image and set the content of the image using the gnome-image.png file + GtkWidget *image = gtk_picture_new_for_filename ("gnome-image.png"); .. code-tab:: python @@ -24,7 +20,12 @@ fixed size images, like icons, you should use ``GtkImage`` instead. image = Gtk.Picture() # set the content of the image using the gnome-image.png file - image.set_from_file("gnome-image.png") + image.set_filename("gnome-image.png") + + .. code-tab:: vala + + // create an picture and set the content of the picture using the gnome-image.png file + var picture = new Gtk.Picture.for_filename ("gnome-image.png"); .. important:: diff --git a/source/tutorials/beginners/label.rst b/source/tutorials/beginners/label.rst index a5235f5156bf167513effacbee93dd155f96b73c..735f815638f8a4550fb04db2fe69d3c8fab8c616 100644 --- a/source/tutorials/beginners/label.rst +++ b/source/tutorials/beginners/label.rst @@ -31,6 +31,16 @@ The text rendering is controlled by `Pango attributes # A markup label label = Gtk.Label(markup="Hello GNOME!") + .. code-tab:: vala + + // A plain text label + var label = new Gtk.Label ("Hello GNOME!"); + + // A Label that uses markup + var markup_label = new Gtk.Label ("Hello GNOME!") { + use_markup = true + }; + Wrapping labels --------------- @@ -88,6 +98,14 @@ To control how much of the label can be ellipsized away, use the label.props.ellipsize = Pango.EllipsizeMode.END label.props.width_chars = 15 + .. code-tab:: vala + + var label = new Gtk.Label ("This is a long text that" + + "might need to get ellipsized") { + ellipsize = Pango.EllipsizeMode.END, + width_chars = 15 + }; + .. note:: @@ -116,6 +134,11 @@ the text manually: label = Gtk.Label(text="This is a long text\nthat might need\nto be wrapped") + .. code-tab:: vala + + var label = new Gtk.Label ("This is a long text\n"+ + "that might need\nto be wrapped"); + This can be problematic because you have to balance line length yourself, and translators may inadvertently change the number of lines by removing or adding @@ -143,6 +166,13 @@ many lines of text you want, using the ``set_lines()`` method: label.props.ellipsize = Pango.EllipsizeMode.END label.props.lines = 3 + .. code-tab:: vala + + var label = new Gtk.Label ("This is a long text that might need to be wrapped"); + label.wrap = true; + label.ellipsize = Pango.EllipsizeMode.END; + label.lines = 3; + With this configuration, ``GtkLabel`` will automatically wrap lines to the right width and only ellipsize the last one, if needed. @@ -172,6 +202,14 @@ Labels can be used to describe other widgets, for instance: box.append(label) box.append(switch) + .. code-tab:: vala + + var box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 12); + var switch = new Gtk.Switch (); + var label = new Gtk.Label ("Enable feature"); + box.append (label); + box.append (switch); + To simplify keyboard navigation, labels can include "mnemonics": underlined characters that are used as shortcuts for activating the widget that is @@ -205,6 +243,19 @@ described by the label: # Bind the switch to the label's mnemonic label.set_mnemonic_widget(switch) + .. code-tab:: vala + :emphasize-lines: 5,9 + + // Add a switch to enable a feature + var box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 12); + var switch = new Gtk.Switch (); + var label = new Gtk.Label ("Enable _feature"); + label.use_underline = true; + box.append (label); + box.append (switch); + // Bind the switch to the label's mnemonic + label.mnemonic_widget = switch; + Now, pressing :kbd:`Alt` + :kbd:`F` will toggle the switch. diff --git a/source/tutorials/beginners/level_bar.rst b/source/tutorials/beginners/level_bar.rst index 100a5040025ee4822271bace84bc3c70c26b4047..4dba8f50869ed50c5bce4612a04cd4cda6595563 100644 --- a/source/tutorials/beginners/level_bar.rst +++ b/source/tutorials/beginners/level_bar.rst @@ -46,6 +46,17 @@ and a threshold. # 75%-100%: Good level.add_offset_value("good", 0.75) + .. code-tab:: vala + + var level = new Gtk.LevelBar (); + + // 0%-50%: Poor + level.add_offset_value ("poor", 0.0); + // 50%-75%: Average + level.add_offset_value ("average", 0.5); + // 75%-100%: Good + level.add_offset_value ("good", 0.75); + Useful methods for the component -------------------------------- diff --git a/source/tutorials/beginners/link_button.rst b/source/tutorials/beginners/link_button.rst index 4401720ccc9ee584236220380b1cf8c3d385a751..67e0541ba10e27b2162fc57b5d7e2eebd9c35b67 100644 --- a/source/tutorials/beginners/link_button.rst +++ b/source/tutorials/beginners/link_button.rst @@ -19,6 +19,11 @@ A button showing an hyper link to a resource. link = Gtk.LinkButton(uri="https://developer.gnome.org", label="Developer Documentation") + .. code-tab:: vala + + var link = new Gtk.LinkButton.with_label ("https://developer.gnome.org", + "Developer Documentation"); + It is possible to use a link to any resource that has a URI scheme with a handler defined in the operating system; for instance, this button will @@ -36,6 +41,11 @@ open the help browser: help = Gtk.LinkButton(uri="help:devhelp", label="Open the Devhelp documentation") + .. code-tab:: vala + + var help = new Gtk.LinkButton.with_label ("help:devhelp", + "Open the Devhelp documentation"); + Useful methods for the component -------------------------------- diff --git a/source/tutorials/beginners/menu_button.rst b/source/tutorials/beginners/menu_button.rst index 2e293db23ec665b1d7e300ed723d8978eb9a55e5..3a65d6f773e3a3cd3bf1ec7adb2366708f7611bd 100644 --- a/source/tutorials/beginners/menu_button.rst +++ b/source/tutorials/beginners/menu_button.rst @@ -27,6 +27,14 @@ menu will activate an :doc:`action ` associated to it. # "menu" is defined elsewhere button = Gtk.MenuButton(icon_name="open-menu-symbolic", menu_model=menu) + .. code-tab:: vala + + // "menu" is defined elsewhere + var button = new Gtk.MenuButton () { + icon_name = "open-menu-symbolic", + menu_model = menu + }; + .. code-tab:: xml diff --git a/source/tutorials/beginners/message_dialog.rst b/source/tutorials/beginners/message_dialog.rst index 7ba6b46bc8a61c2479c77c96b7d13f23c8161f78..d5b7df0abf18a13ca0187e5aa992f88abaa1350d 100644 --- a/source/tutorials/beginners/message_dialog.rst +++ b/source/tutorials/beginners/message_dialog.rst @@ -46,6 +46,21 @@ for user confirmation. # Destroy the dialog when the user responds to it dialog.connect("response", lambda d: d.destroy()) + .. code-tab:: vala + + Gtk.DialogFlags flags = DESTROY_WITH_PARENT | MODAL; + + // "parent_window" is defined elsewhere + var dialog = new Gtk.MessageDialog (parent_window, + flags, + Gtk.MessageType.ERROR, + Gtk.ButtonsType.CLOSE, + "Error reading ā€œ%sā€", + // "filename" is defined elsewhere + filename); + + dialog.response.connect (dialog.destroy); + Useful methods for the component -------------------------------- diff --git a/source/tutorials/beginners/password_entry.rst b/source/tutorials/beginners/password_entry.rst index 1cb17d2dbf4d3e06659e02804a577d5c62a64e90..32eee72de3b1dbd8251c1d8c22b912fc20e3ce3b 100644 --- a/source/tutorials/beginners/password_entry.rst +++ b/source/tutorials/beginners/password_entry.rst @@ -20,6 +20,10 @@ password entry will not show its contents by default. entry = Gtk.PasswordEntry() + .. code-tab:: vala + + var entry = new Gtk.PasswordEntry (); + Useful methods for the component -------------------------------- diff --git a/source/tutorials/beginners/radio_button.rst b/source/tutorials/beginners/radio_button.rst index fcf2793376fa2729db4c8cc2fdccb0daf677113d..3ee62e27539918d0e92569a6024eda2ae52209a5 100644 --- a/source/tutorials/beginners/radio_button.rst +++ b/source/tutorials/beginners/radio_button.rst @@ -29,6 +29,15 @@ group can be selected. laugh = Gtk.CheckButton(label="Laugh", group=live) love = Gtk.CheckButton(label="Love", group=live) + .. code-tab:: vala + + var live = new Gtk.CheckButton.with_label ("Live"); + var laugh = new Gtk.CheckButton.with_label ("Laugh"); + var love = new Gtk.CheckButton.with_label ("Love"); + + laugh.group = live; + love.group = live; + Useful methods for the component -------------------------------- diff --git a/source/tutorials/beginners/spin_button.rst b/source/tutorials/beginners/spin_button.rst index 36a3c27b2b2aff9771fc0c44827527d0457da494..0c62104d8b5eb565fc0d48a4787960f8fafb473b 100644 --- a/source/tutorials/beginners/spin_button.rst +++ b/source/tutorials/beginners/spin_button.rst @@ -32,6 +32,12 @@ that allow the value to be increased or decreased by a fixed amount. climb_rate=1, digits=0) + .. code-tab:: vala + + var spin_adjustment = new Gtk.Adjustment (0, 0, 100, 1, 5, 0); + + var spin_button = new Gtk.SpinButton (spin_adjustment, 1, 0); + .. code-tab:: xml @@ -82,6 +88,14 @@ signals: # "on_value_changed" is defined elsewhere spin_button.connect("value-changed", on_value_changed) + .. code-tab:: vala + + // "adj" is defined elsewhere + var spin_button = new Gtk.SpinButton (adj, 1, 0); + + // "on_value_changed" is defined elsewhere + spin_button.value_changed.connect (on_value_changed); + Non-numerical spin buttons -------------------------- @@ -194,6 +208,45 @@ displayed. digits=0, numeric=False) + .. code-tab:: vala + + var adj = new Gtk.Adjustment (0, 0, 2, 1, 1, 0); + + var spin_button = new Gtk.SpinButton (adj, 1, 0); + spin_button.numeric = false; + + spin_button.input.connect ((new_value) => { + string text = spin_button.text; + + spin_button.remove_css_class ("error"); + + if (text == "Live") + new_value = 0; + else if (text == "Laugh") + new_value = 1; + else if (text == "Love") + new_value = 2; + else + new_value = 0; + spin_button.add_css_class ("error"); + new_value = 0; + }); + + spin_button.output.connect (() => { + int value = adj.value; + + assert (value >= 0 && value <= 3); + + switch (value) { + case 0: + spin_button.text = "Live"; + case 1: + spin_button.text = "Laugh"; + case 2: + spin_button.text = "Love"; + } + }); + Useful methods for the component -------------------------------- diff --git a/source/tutorials/beginners/spinner.rst b/source/tutorials/beginners/spinner.rst index 919575da1f35e23cf7a6a22330d84ffafc0699fe..be6523a4ea48feca9d836b48ba974efad3f72f8c 100644 --- a/source/tutorials/beginners/spinner.rst +++ b/source/tutorials/beginners/spinner.rst @@ -41,6 +41,17 @@ background. GLib.timeout_add_seconds(5, stop_spinner, spinner) + .. code-tab:: vala + + var spinner = new Gtk.Spinner (); + spinner.start (); + + // Stop spinner after 5 seconds + Timeout.add_seconds (5, () => { + spinner.stop (); + return Source.REMOVE; + }); + API references -------------- diff --git a/source/tutorials/beginners/stack.rst b/source/tutorials/beginners/stack.rst index d08a882735ad19269c8aab18b3612069e3d67416..4fed4213e77dd1fec7d220516cc4f9c50d11b7f0 100644 --- a/source/tutorials/beginners/stack.rst +++ b/source/tutorials/beginners/stack.rst @@ -63,6 +63,10 @@ using the child widget you want to show: stack.set_visible_child_name("beginning") + .. code-tab:: vala + + stack.visible_child_name = "beginning"; + Transitions ----------- @@ -91,6 +95,14 @@ type for all pages, or for a specific one. # Show the "end" page using a 3D transition stack.set_visible_child_full("end", Gtk.StackTransitionType.ROTATE_RIGHT) + .. code-tab:: vala + + // Default transition + stack.transition_type = Gtk.StackTransitionType.CROSSFADE; + + // Show the "end" page using a 3D transition + stack.set_visible_child_full ("end", Gtk.StackTransitionType.ROTATE_RIGHT); + Pages ----- diff --git a/source/tutorials/beginners/switch.rst b/source/tutorials/beginners/switch.rst index 7b3782a191bfe25fd6b297e525d4f3c0edab9000..43d4fd565ade0c03f6710d016d194ac8b04196e0 100644 --- a/source/tutorials/beginners/switch.rst +++ b/source/tutorials/beginners/switch.rst @@ -42,9 +42,22 @@ A section outlining some functionality box.append(label) box.append(sw) - // The switch__notify_active() method is defined elsewhere + # The switch__notify_active() method is defined elsewhere sw.connect("notify::active", self.switch__notify_active) + .. code-tab:: vala + + var box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 6); + + var label = new Gtk.Label ("Enable awesomeness"); + var sw = new Gtk.Switch (); + + box.append (label); + box.append (sw); + + // The switch__notify_active() method is defined elsewhere + sw.notify["active"].connect (switch__notify_active); + Useful methods for the component -------------------------------- diff --git a/source/tutorials/beginners/toggle.rst b/source/tutorials/beginners/toggle.rst index be2f38bd3382846c39414fa4bcc7bf1c062baa88..2f491e4e6d1b5b2aca98c550d43cdf5ab0a28611 100644 --- a/source/tutorials/beginners/toggle.rst +++ b/source/tutorials/beginners/toggle.rst @@ -43,6 +43,16 @@ Clicking it again will cause the toggle button to return to its normal state. toggle = Gtk.ToggleButton(label="Hello") toggle.connect("toggled", on_toggle) + .. code-tab:: vala + + var toggle = new Gtk.ToggleButton.with_label ("Hello"); + toggle.toggled.connect (() => { + if (toggle.active) + toggle.label = "Goodbye"; + else + toggle.label = "Hello"; + }); + Programmatic toggling --------------------- @@ -63,6 +73,12 @@ the state of a toggle button. toggle = Gtk.ToggleButton(label="Hello") toggle.set_active(True) + .. code-tab:: vala + + var toggle = new Gtk.ToggleButton.with_label ("Hello") { + active = true + }; + Changing the ``GtkToggleButton:active`` property will also emit the ``GtkToggleButton::toggled`` signal; if you are programmatically changing @@ -98,6 +114,14 @@ signal callback, you should block the handler before calling ``set_active()``: closure=on_toggle, func=dummy, data=dammy) + .. code-tab:: vala + + // "toggle" and "on_toggle" are defined elsewhere + + SignalHandler.block_by_func (toggle, on_toggle, null); + toggle.active = true; + SignalHandler.unblock_by_func (toggle, on_toggle, null); + Grouping buttons ---------------- @@ -125,6 +149,12 @@ will switch the currently toggled one off. laugh = Gtk.ToggleButton(label="Laugh", group=live) love = Gtk.ToggleButton(label="Love", group=live) + .. code-tab:: vala + + var live = new Gtk.ToggleButton.with_label ("Live"); + var laugh = new Gtk.ToggleButton.with_label ("Laugh") { group = live }; + var love = new Gtk.ToggleButton.with_label ("Love") { group = live }; + .. code-tab:: xml diff --git a/source/tutorials/beginners/window.rst b/source/tutorials/beginners/window.rst index 37946dc0d17543e09c1b8ab76e6647b34e706903..d1a9c077bf466efdf9ebee2a2ee9279ce1213e03 100644 --- a/source/tutorials/beginners/window.rst +++ b/source/tutorials/beginners/window.rst @@ -81,6 +81,34 @@ A minimal GNOME application: a window with a title. exit_status = app.run(sys.argv) sys.exit(exit_status) + .. code-tab:: vala + + /* + * The main application. + */ + class My.Application : Adw.Application { + public Application () { + Object (application_id: "com.example.Application", + flags: ApplicationFlags.FLAGS_NONE); + } + + protected override void activate () { + // create a Gtk Window belonging to the application itself + var window = new Adw.ApplicationWindow (this); + // show the window + window.present (); + } + + /* + * create and run the application, exit with the value returned by + * running the program + */ + public static int main (string[] args) { + var app = new My.Application (); + return app.run (args); + } + } + Useful methods for a Window widget ----------------------------------