[gnome-devel-docs] Vala Toolbar tutorial using Glade.

From: Tiffany Antopolski <antopolski src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-devel-docs] Vala Toolbar tutorial using Glade.
Date: Sun, 10 Jun 2012 06:14:16 +0000 (UTC)
commit 50e5a556e7e6fd01e40501797cd98307f173ff95
Author: Tiffany Antopolski <tiffany antopolski gmail com>
Date:   Sun Jun 10 02:12:08 2012 -0400

    Vala Toolbar tutorial using Glade.
    
    Added the ui file, vala code, mallard page and screenshots.
    Updated Makefile.am.

 platform-demos/C/media/glade_select_toolbar.png  |  Bin 0 -> 6380 bytes
 platform-demos/C/media/glade_toolbar_common.png  |  Bin 0 -> 25373 bytes
 platform-demos/C/media/glade_toolbar_edit.png    |  Bin 0 -> 43253 bytes
 platform-demos/C/media/glade_toolbar_editor.png  |  Bin 0 -> 64592 bytes
 platform-demos/C/media/glade_toolbar_general.png |  Bin 0 -> 19685 bytes
 platform-demos/C/media/glade_ui.png              |  Bin 0 -> 47789 bytes
 platform-demos/C/media/glade_visible_no.png      |  Bin 0 -> 47639 bytes
 platform-demos/C/samples/toolbar_builder.ui      |   93 +++++++++++++
 platform-demos/C/samples/toolbar_builder.vala    |  103 +++++++++++++++
 platform-demos/C/toolbar_builder.vala.page       |  154 ++++++++++++++++++++++
 platform-demos/Makefile.am                       |   10 ++
 11 files changed, 360 insertions(+), 0 deletions(-)
---
diff --git a/platform-demos/C/media/glade_select_toolbar.png b/platform-demos/C/media/glade_select_toolbar.png
new file mode 100644
index 0000000..13c7e4a
Binary files /dev/null and b/platform-demos/C/media/glade_select_toolbar.png differ
diff --git a/platform-demos/C/media/glade_toolbar_common.png b/platform-demos/C/media/glade_toolbar_common.png
new file mode 100644
index 0000000..0eb64ad
Binary files /dev/null and b/platform-demos/C/media/glade_toolbar_common.png differ
diff --git a/platform-demos/C/media/glade_toolbar_edit.png b/platform-demos/C/media/glade_toolbar_edit.png
new file mode 100644
index 0000000..9f3b50c
Binary files /dev/null and b/platform-demos/C/media/glade_toolbar_edit.png differ
diff --git a/platform-demos/C/media/glade_toolbar_editor.png b/platform-demos/C/media/glade_toolbar_editor.png
new file mode 100644
index 0000000..88d14da
Binary files /dev/null and b/platform-demos/C/media/glade_toolbar_editor.png differ
diff --git a/platform-demos/C/media/glade_toolbar_general.png b/platform-demos/C/media/glade_toolbar_general.png
new file mode 100644
index 0000000..1359fc9
Binary files /dev/null and b/platform-demos/C/media/glade_toolbar_general.png differ
diff --git a/platform-demos/C/media/glade_ui.png b/platform-demos/C/media/glade_ui.png
new file mode 100644
index 0000000..bbb327f
Binary files /dev/null and b/platform-demos/C/media/glade_ui.png differ
diff --git a/platform-demos/C/media/glade_visible_no.png b/platform-demos/C/media/glade_visible_no.png
new file mode 100644
index 0000000..ae5f69b
Binary files /dev/null and b/platform-demos/C/media/glade_visible_no.png differ
diff --git a/platform-demos/C/samples/toolbar_builder.ui b/platform-demos/C/samples/toolbar_builder.ui
new file mode 100644
index 0000000..8d53d16
--- /dev/null
+++ b/platform-demos/C/samples/toolbar_builder.ui
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <!-- interface-requires gtk+ 3.0 -->
+  <object class="GtkToolbar" id="toolbar">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="hexpand">True</property>
+    <property name="show_arrow">False</property>
+    <child>
+      <object class="GtkToolButton" id="new_button">
+        <property name="use_action_appearance">False</property>
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="use_action_appearance">False</property>
+        <property name="is_important">True</property>
+        <property name="label" translatable="yes">New</property>
+        <property name="use_underline">True</property>
+        <property name="stock_id">gtk-new</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="homogeneous">True</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkToolButton" id="open_button">
+        <property name="use_action_appearance">False</property>
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="use_action_appearance">False</property>
+        <property name="is_important">True</property>
+        <property name="action_name">app.open</property>
+        <property name="label" translatable="yes">Open</property>
+        <property name="use_underline">True</property>
+        <property name="stock_id">gtk-open</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="homogeneous">True</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkToolButton" id="undo_button">
+        <property name="use_action_appearance">False</property>
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="use_action_appearance">False</property>
+        <property name="is_important">True</property>
+        <property name="action_name">win.undo</property>
+        <property name="label" translatable="yes">Undo</property>
+        <property name="use_underline">True</property>
+        <property name="stock_id">gtk-undo</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="homogeneous">True</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkToolButton" id="fullscreen_button">
+        <property name="use_action_appearance">False</property>
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="use_action_appearance">False</property>
+        <property name="is_important">True</property>
+        <property name="action_name">win.fullscreen</property>
+        <property name="label" translatable="yes">Fullscreen</property>
+        <property name="use_underline">True</property>
+        <property name="stock_id">gtk-fullscreen</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="homogeneous">True</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkToolButton" id="leave_fullscreen_button">
+        <property name="use_action_appearance">False</property>
+        <property name="can_focus">False</property>
+        <property name="use_action_appearance">False</property>
+        <property name="is_important">True</property>
+        <property name="action_name">win.fullscreen</property>
+        <property name="label" translatable="yes">Leave Fullscreen</property>
+        <property name="use_underline">True</property>
+        <property name="stock_id">gtk-leave-fullscreen</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="homogeneous">True</property>
+      </packing>
+    </child>
+  </object>
+</interface>
diff --git a/platform-demos/C/samples/toolbar_builder.vala b/platform-demos/C/samples/toolbar_builder.vala
new file mode 100644
index 0000000..1d3d6aa
--- /dev/null
+++ b/platform-demos/C/samples/toolbar_builder.vala
@@ -0,0 +1,103 @@
+/* This is the Window */
+class MyWindow : Gtk.ApplicationWindow {
+
+	/* Declare these two ToolButtons, as we will get them
+	 * from the ui file (see lines 32 and 33), so we can 
+	 * hide() and show() them as needed.*/
+	Gtk.ToolButton fullscreen_button;
+	Gtk.ToolButton leave_fullscreen_button;
+
+	/* Contstructor */
+	internal MyWindow (MyApplication app) {
+		Object (application: app, title: "Toolbar Example");
+
+		this.set_default_size (400, 200);
+		var grid = new Gtk.Grid ();
+		this.add (grid);
+		grid.show ();
+
+		/* add the toolbar from the ui file */
+		var builder = new Gtk.Builder ();
+		try {
+			builder.add_from_file ("toolbar_builder.ui");
+		}
+		/* Handle the exception */
+		catch (Error e) {
+			error ("Unable to load file: %s", e.message);
+		}
+
+		grid.attach (builder.get_object ("toolbar") as Gtk.Toolbar, 0, 0, 1, 1);
+
+		/* get these objects from the ui file so we can toggle between them */
+		fullscreen_button = builder.get_object ("fullscreen_button") as Gtk.ToolButton;
+		leave_fullscreen_button = builder.get_object ("leave_fullscreen_button") as Gtk.ToolButton;
+
+		/* create the "undo" window action action */
+		var undo_action = new SimpleAction ("undo", null);
+		undo_action.activate.connect (undo_callback);
+		this.add_action (undo_action);
+
+		/* create the "fullscreen" window action */
+		var fullscreen_action = new SimpleAction ("fullscreen", null);
+		fullscreen_action.activate.connect (fullscreen_callback);
+		this.add_action (fullscreen_action);
+	}
+
+	void undo_callback (SimpleAction simple, Variant? parameter) {
+			print ("You clicked \"Undo\".\n");
+	}
+
+	void fullscreen_callback (SimpleAction simple, Variant? parameter) {
+		if ((this.get_window ().get_state () & Gdk.WindowState.FULLSCREEN) != 0) {
+			this.unfullscreen ();
+			leave_fullscreen_button.hide ();
+			fullscreen_button.show ();
+		}
+		else {
+			this.fullscreen ();
+			fullscreen_button.hide ();
+			leave_fullscreen_button.show ();
+		}
+	}
+}
+
+/* This is the application */
+class MyApplication : Gtk.Application {
+	protected override void activate () {
+		new MyWindow (this).show ();
+	}
+
+	protected override void startup () {
+		base.startup ();
+
+		/* Create the "new" action and add it to the app*/
+		var new_action = new SimpleAction ("new", null);
+		new_action.activate.connect (new_callback);
+		this.add_action (new_action);
+
+		/* Create the "open" action, and add it to the app */
+		var open_action = new SimpleAction ("open", null);
+		open_action.activate.connect (open_callback);
+		this.add_action (open_action);
+
+		/* You could also add the action to the app menu
+		 * if you wanted to.
+		 */
+		//var menu = new Menu ();
+		//menu.append ("New", "app.new");
+		//this.app_menu = menu;
+	}
+
+	void new_callback (SimpleAction action, Variant? parameter) {
+		print ("You clicked \"New\".\n");
+	}
+
+	void open_callback (SimpleAction action, Variant? parameter) {
+			print ("You clicked \"Open\".\n");
+	}
+}
+
+/* The main function creates the application and runs it. */
+int main (string[] args) {
+	return new MyApplication ().run (args);
+}
diff --git a/platform-demos/C/toolbar_builder.vala.page b/platform-demos/C/toolbar_builder.vala.page
new file mode 100644
index 0000000..06ab91f
--- /dev/null
+++ b/platform-demos/C/toolbar_builder.vala.page
@@ -0,0 +1,154 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page xmlns="http://projectmallard.org/1.0/";
+      xmlns:xi="http://www.w3.org/2001/XInclude";
+      type="guide" style="task"
+      id="toolbar_builder.vala">
+  <info>
+    <link type="guide" xref="beginner.vala#menu-combo-toolbar"/>
+    <link type="seealso" xref="toolbar.vala"/>
+    <link type="seealso" xref="grid.vala"/>
+    <revision version="0.1" date="2012-05-08" status="draft"/>
+
+    <credit type="author copyright">
+      <name>Tiffany Antopolski</name>
+      <email>tiffany antopolski gmail com</email>
+      <years>2012</years>
+    </credit>
+
+    <desc>A bar of buttons</desc>
+  </info>
+
+  <title>Toolbar created using Glade</title>
+
+  <media type="image" mime="image/png" src="media/toolbar.png"/>
+  <p>This example is similar to <link xref="toolbar.vala"/>, except we use Glade to create the toolbar in an XML ui file.</p>
+
+  <p>
+  To create the toolbar using the <link href="http://glade.gnome.org/";>Glade Interface Designer</link>:
+  </p>
+  <steps>
+    <item><p>Open Glade, and save the file as <file>toolbar_builder.ui</file></p>
+         <media type="image" src="media/glade_ui.png" width="900">
+           Screenshot of Glade ui
+         </media>
+    </item>
+
+    <item><p>Under <gui>Containers</gui> on the left hand side, right click on the toolbar icon and select <gui>Add widget as toplevel</gui>.</p>
+          <media type="image" src="media/glade_select_toolbar.png">
+           Screenshot of toolbar icon in Glade ui
+         </media>
+    </item>
+
+    <item><p>Under the <gui>General</gui> tab on the bottom right, change the <gui>Name</gui> to <input>toolbar</input> and <gui>Show Arrow</gui> to <gui>No</gui>.</p>
+          <media type="image" src="media/glade_toolbar_general.png">
+           Screenshot of General tab
+          </media>
+    </item>
+
+    <item><p>Under the <gui>Common</gui> tab, set <gui>Horizontal Expand</gui> to <gui>Yes</gui>.</p>
+         <media type="image" src="media/glade_toolbar_common.png">
+              Screenshot of Common tab
+          </media>
+     </item>
+
+     <item><p>Right click on the toolbar in the top right and select <gui>Edit</gui>.  The <gui>Tool Bar Editor</gui> window will appear.</p>
+         <media type="image" src="media/glade_toolbar_edit.png">
+             Screenshot of where to right click to edit toolbar.
+          </media>
+   </item>
+
+   <item><p>We want to add 5 ToolButtons: New, Open, Undo, Fullscreen and Leave Fullscreen.  First, we will add the New ToolButton.
+     </p>
+     <steps>
+       <item><p>Under <gui>Hierarchy</gui> tab, click <gui>Add</gui>.</p></item>
+       <item><p>Change the name of the ToolItem to <input>new_button</input>.</p></item>
+       <item><p>Scroll down and set <gui>Is important</gui> to <gui>Yes</gui>.  This will cause the label of the ToolButton to be shown, when you view the toolbar.</p></item>
+       <item><p>Enter the <gui>action name</gui>: <input>app.new</input>.</p></item>
+       <item><p>Change the <gui>Label</gui> to <input>New</input>.</p></item>
+       <item><p>Select the <gui>New</gui> Stock Id from the drop down menu, or type <input>gtk-new</input>.</p></item>
+     </steps>
+     <p>
+    Repeat the above steps for the remaining ToolButtons, with the following properties:
+  </p>
+  <table frame="all" rules="rows">
+    <thead>
+      <tr>
+        <td><p>Name</p></td>
+        <td><p>Is important</p></td>
+        <td><p>action name</p></td>
+        <td><p>Label</p></td>
+        <td><p>Stock Id</p></td>
+      </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td><p>open_button</p></td>
+      <td><p>Yes</p></td>
+      <td><p>app.open</p></td>
+      <td><p>Open</p></td>
+      <td><p>gtk-open</p></td>
+    </tr>
+    <tr>
+      <td><p>undo_button</p></td>
+      <td><p>Yes</p></td>
+      <td><p>win.undo</p></td>
+      <td><p>Undo</p></td>
+      <td><p>gtk-undo</p></td>
+    </tr>
+    <tr>
+      <td><p>fullscreen_button</p></td>
+      <td><p>Yes</p></td>
+      <td><p>win.fullscreen</p></td>
+      <td><p>Fullscreen</p></td>
+      <td><p>gtk-fullscreen</p></td>
+    </tr>
+    <tr>
+      <td><p>leave_fullscreen_button</p></td>
+      <td><p>Yes</p></td>
+      <td><p>win.fullscreen</p></td>
+      <td><p>Leave Fullscreen</p></td>
+      <td><p>gtk-leave-fullscreen</p></td>
+    </tr>
+    </tbody>
+</table>
+          <media type="image" src="media/glade_toolbar_editor.png">
+
+          </media>
+    </item>
+
+    <item><p>Close the <gui>Tool Bar Editor</gui>.</p>
+   </item>
+
+   <item><p>When our program will first start, we don't want the <gui>Leave Fullscreen</gui> ToolButton to be visible, since the application will not be in fullscreen mode.  You can set this in the <gui>Common</gui> tab, by clicking the <gui>Visible</gui> property to <gui>No</gui>.  The ToolButton will still appear in the interface designer, but will behave correctly when the file is loaded into your program code.</p>
+          <media type="image" src="media/glade_visible_no.png">
+                 Setting the visible property to No
+          </media>
+   </item>
+
+    <item><p>Save your work, and close Glade.</p>
+   </item>
+
+   <item><p>The XML file created by Glade is shown below. This is the description of the toolbar.  At the time of this writing, the option to add the class Gtk.STYLE_CLASS_PRIMARY_TOOLBAR in the Glade Interface did not exist.  We can manually add this to the XML file.  To do this, add the following XML code at line 9 of <file>toolbar_builder.ui</file>:</p>
+   <code><![CDATA[
+  <style>
+     <class name="primary-toolbar"/>
+  </style>
+  ]]></code>
+  <p>If you do not add this, the program will still work fine.  The resulting toolbar will however look slightly different then the screenshot at the top of this page.</p>
+   </item>
+</steps>
+  <code mime="text" style="numbered"><xi:include href="samples/toolbar_builder.ui" parse="text"><xi:fallback/></xi:include></code>
+
+  <p>We now create the code below, which adds the toolbar from the file we just created.</p>
+<code mime="text/x-vala" style="numbered"><xi:include href="samples/toolbar_builder.vala" parse="text"><xi:fallback/></xi:include></code>
+
+<p>
+  In this sample we used the following:
+</p>
+<list>
+  <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Toolbar.html";>Gtk.Toolbar</link></p></item>
+  <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.ToolButton.html";>Gtk.Toolbutton</link></p></item>
+  <item><p><link href="http://www.valadoc.org/gtk+-3.0/Gtk.Stock.html";>Gtk.Stock</link></p></item>
+</list>
+
+</page>
diff --git a/platform-demos/Makefile.am b/platform-demos/Makefile.am
index 4869469..5c2c0cd 100644
--- a/platform-demos/Makefile.am
+++ b/platform-demos/Makefile.am
@@ -96,6 +96,8 @@ demo_sources = \
 	samples/toolbar.js			\
 	samples/toolbar.py			\
 	samples/toolbar.vala			\
+	samples/toolbar_builder.ui		\
+	samples/toolbar_builder.vala		\
 	samples/treeview_simple_liststore.py	\
 	samples/treeview_simple_liststore.vala	\
 	samples/window.c			\
@@ -114,6 +116,13 @@ DOC_FIGURES = \
 	media/dialog.png			\
 	media/entry.png				\
 	media/fedora.png			\
+	media/glade_select_toolbar.png		\
+	media/glade_toolbar_common.png		\
+	media/glade_toolbar_edit.png		\
+	media/glade_toolbar_editor.png		\
+	media/glade_toolbar_general.png		\
+	media/glade_ui.png			\
+	media/glade_visible_no.png		\
 	media/gmenu.c.png			\
 	media/gmenu.js.png			\
 	media/gmenu.py.png			\
@@ -259,6 +268,7 @@ DOC_PAGES =				\
 	toolbar.js.page			\
 	toolbar.py.page			\
 	toolbar.vala.page		\
+	toolbar_builder.vala.page	\
 	treeview_simple_liststore.py.page	\
 	treeview_simple_liststore.vala.page	\
 	translate.page			\
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]