<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Adding a side bar</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="generator" content="DocBook XSL Stylesheets V1.79.1">
<link rel="home" href="index.html" title="Programming with gtkmm 3">
<link rel="up" href="chapter-building-applications.html" title="Chapter 31. Building applications">
<link rel="prev" href="sec-buildapp-search-bar.html" title="Adding a search bar">
<link rel="next" href="sec-buildapp-properties.html" title="Properties">
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
<div class="navheader">
<table width="100%" summary="Navigation header">
<tr><th colspan="3" align="center">Adding a side bar</th></tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="sec-buildapp-search-bar.html"><img src="icons/prev.png" alt="Prev"></a> </td>
<th width="60%" align="center">Chapter 31. Building applications</th>
<td width="20%" align="right"> <a accesskey="n" href="sec-buildapp-properties.html"><img src="icons/next.png" alt="Next"></a>
</td>
</tr>
</table>
<hr>
</div>
<div class="sect1">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="sec-buildapp-side-bar"></a>Adding a side bar</h2></div></div></div>
<p>
As another piece of functionality, we are adding a sidebar, which demonstrates
<code class="classname">Gtk::MenuButton</code>, <code class="classname">Gtk::Revealer</code> and
<code class="classname">Gtk::ListBox</code>. The new widgets are added in the <code class="filename">window.ui</code> file.
</p>
<p>
The code to populate the sidebar with buttons for the words found in each file is a
little too involved to go into here. But we'll look at the code to add the gears menu.
As expected by now, the gears menu is specified in a <code class="classname">Gtk::Builder</code>
ui file, <code class="filename">gears_menu.ui</code>
</p>
<p>
To connect the menu item to the new <code class="literal">show-words</code> setting, we use a
<code class="classname">Gio::Action</code> corresponding to the given <code class="classname">Gio::Settings</code>
key. In <code class="classname">ExampleAppWindow</code>'s constructor:
</p>
<pre class="programlisting">
// Connect the menu to the MenuButton m_gears, and bind the show-words setting
// to the win.show-words action and the "Words" menu item.
// (The connection between action and menu item is specified in gears_menu.ui.)
auto menu_builder = Gtk::Builder::create_from_resource("/org/gtkmm/exampleapp/gears_menu.ui");
auto object = menu_builder->get_object("menu");
auto menu = Glib::RefPtr<Gio::MenuModel>::cast_dynamic(object);
m_gears->set_menu_model(menu);
add_action(m_settings->create_action("show-words"));
</pre>
<p>
</p>
<p>
What our application looks like now:
</p>
<div class="figure">
<a name="figure-buildapp-side-bar"></a><p class="title"><b>Figure 31.7. Adding a side bar</b></p>
<div class="figure-contents"><div class="screenshot"><div><img src="figures/buildapp_side_bar.png" alt="Adding a side bar"></div></div></div>
</div>
<br class="figure-break"><p><a class="ulink" href="http://git.gnome.org/browse/gtkmm-documentation/tree/examples/book/buildapp/step7?h=gtkmm-3-24" target="_top">Source Code</a></p>
<p>File: <code class="filename">exampleappwindow.h</code> (For use with gtkmm 3, not gtkmm 2)
</p>
<pre class="programlisting">
#ifndef GTKMM_EXAMPLEAPPWINDOW_H_
#define GTKMM_EXAMPLEAPPWINDOW_H_
#include <gtkmm.h>
class ExampleAppWindow : public Gtk::ApplicationWindow
{
public:
ExampleAppWindow(BaseObjectType* cobject,
const Glib::RefPtr<Gtk::Builder>& refBuilder);
static ExampleAppWindow* create();
void open_file_view(const Glib::RefPtr<Gio::File>& file);
protected:
// Signal handlers
void on_search_text_changed();
void on_visible_child_changed();
void on_find_word(const Gtk::Button* button);
void on_reveal_child_changed();
void update_words();
Glib::RefPtr<Gtk::Builder> m_refBuilder;
Glib::RefPtr<Gio::Settings> m_settings;
Gtk::Stack* m_stack;
Gtk::ToggleButton* m_search;
Gtk::SearchBar* m_searchbar;
Gtk::SearchEntry* m_searchentry;
Gtk::MenuButton* m_gears;
Gtk::Revealer* m_sidebar;
Gtk::ListBox* m_words;
Glib::RefPtr<Glib::Binding> m_prop_binding;
};
#endif /* GTKMM_EXAMPLEAPPWINDOW_H */
</pre>
<p>File: <code class="filename">exampleappprefs.h</code> (For use with gtkmm 3, not gtkmm 2)
</p>
<pre class="programlisting">
#include "../step5/exampleappprefs.h"
// Equal to the corresponding file in step5
</pre>
<p>File: <code class="filename">exampleapplication.h</code> (For use with gtkmm 3, not gtkmm 2)
</p>
<pre class="programlisting">
#include "../step4/exampleapplication.h"
// Equal to the corresponding file in step4
</pre>
<p>File: <code class="filename">exampleapplication.cc</code> (For use with gtkmm 3, not gtkmm 2)
</p>
<pre class="programlisting">
#include "../step5/exampleapplication.cc"
// Equal to the corresponding file in step5
</pre>
<p>File: <code class="filename">main.cc</code> (For use with gtkmm 3, not gtkmm 2)
</p>
<pre class="programlisting">
#include "../step5/main.cc"
// Equal to the corresponding file in step5
</pre>
<p>File: <code class="filename">exampleappwindow.cc</code> (For use with gtkmm 3, not gtkmm 2)
</p>
<pre class="programlisting">
#include "exampleappwindow.h"
#include <iostream>
#include <stdexcept>
#include <set>
ExampleAppWindow::ExampleAppWindow(BaseObjectType* cobject,
const Glib::RefPtr<Gtk::Builder>& refBuilder)
: Gtk::ApplicationWindow(cobject),
m_refBuilder(refBuilder),
m_settings(),
m_stack(nullptr),
m_search(nullptr),
m_searchbar(nullptr),
m_searchentry(nullptr),
m_gears(nullptr),
m_sidebar(nullptr),
m_words(nullptr),
m_prop_binding()
{
// Get widgets from the Gtk::Builder file.
m_refBuilder->get_widget("stack", m_stack);
if (!m_stack)
throw std::runtime_error("No \"stack\" object in window.ui");
m_refBuilder->get_widget("search", m_search);
if (!m_search)
throw std::runtime_error("No \"search\" object in window.ui");
m_refBuilder->get_widget("searchbar", m_searchbar);
if (!m_searchbar)
throw std::runtime_error("No \"searchbar\" object in window.ui");
m_refBuilder->get_widget("searchentry", m_searchentry);
if (!m_searchentry)
throw std::runtime_error("No \"searchentry\" object in window.ui");
m_refBuilder->get_widget("gears", m_gears);
if (!m_gears)
throw std::runtime_error("No \"gears\" object in window.ui");
m_refBuilder->get_widget("sidebar", m_sidebar);
if (!m_sidebar)
throw std::runtime_error("No \"sidebar\" object in window.ui");
m_refBuilder->get_widget("words", m_words);
if (!m_words)
throw std::runtime_error("No \"words\" object in window.ui");
// Bind settings.
m_settings = Gio::Settings::create("org.gtkmm.exampleapp");
m_settings->bind("transition", m_stack->property_transition_type());
m_settings->bind("show-words", m_sidebar->property_reveal_child());
// Bind properties.
m_prop_binding = Glib::Binding::bind_property(m_search->property_active(),
m_searchbar->property_search_mode_enabled(), Glib::BINDING_BIDIRECTIONAL);
// Connect signal handlers.
m_searchentry->signal_search_changed().connect(
sigc::mem_fun(*this, &ExampleAppWindow::on_search_text_changed));
m_stack->property_visible_child().signal_changed().connect(
sigc::mem_fun(*this, &ExampleAppWindow::on_visible_child_changed));
m_sidebar->property_reveal_child().signal_changed().connect(
sigc::mem_fun(*this, &ExampleAppWindow::on_reveal_child_changed));
// Connect the menu to the MenuButton m_gears, and bind the show-words setting
// to the win.show-words action and the "Words" menu item.
// (The connection between action and menu item is specified in gears_menu.ui.)
auto menu_builder = Gtk::Builder::create_from_resource("/org/gtkmm/exampleapp/gears_menu.ui");
auto object = menu_builder->get_object("menu");
auto menu = Glib::RefPtr<Gio::MenuModel>::cast_dynamic(object);
if (!menu)
throw std::runtime_error("No \"menu\" object in gears_menu.ui");
m_gears->set_menu_model(menu);
add_action(m_settings->create_action("show-words"));
}
//static
ExampleAppWindow* ExampleAppWindow::create()
{
// Load the Builder file and instantiate its widgets.
auto refBuilder = Gtk::Builder::create_from_resource("/org/gtkmm/exampleapp/window.ui");
ExampleAppWindow* window = nullptr;
refBuilder->get_widget_derived("app_window", window);
if (!window)
throw std::runtime_error("No \"app_window\" object in window.ui");
return window;
}
void ExampleAppWindow::open_file_view(const Glib::RefPtr<Gio::File>& file)
{
const auto basename = file->get_basename();
auto scrolled = Gtk::make_managed<Gtk::ScrolledWindow>();
scrolled->set_hexpand(true);
scrolled->set_vexpand(true);
scrolled->show();
auto view = Gtk::make_managed<Gtk::TextView>();
view->set_editable(false);
view->set_cursor_visible(false);
view->show();
scrolled->add(*view);
m_stack->add(*scrolled, basename, basename);
auto buffer = view->get_buffer();
try
{
char* contents = nullptr;
gsize length = 0;
file->load_contents(contents, length);
buffer->set_text(contents, contents+length);
g_free(contents);
}
catch (const Glib::Error& ex)
{
std::cout << "ExampleAppWindow::open_file_view(\"" << file->get_parse_name()
<< "\"):\n " << ex.what() << std::endl;
return;
}
auto tag = buffer->create_tag();
m_settings->bind("font", tag->property_font());
buffer->apply_tag(tag, buffer->begin(), buffer->end());
m_search->set_sensitive(true);
update_words();
}
void ExampleAppWindow::on_search_text_changed()
{
const auto text = m_searchentry->get_text();
if (text.empty())
return;
auto tab = dynamic_cast<Gtk::ScrolledWindow*>(m_stack->get_visible_child());
if (!tab)
{
std::cout << "ExampleAppWindow::on_search_text_changed(): No visible child." << std::endl;
return;
}
auto view = dynamic_cast<Gtk::TextView*>(tab->get_child());
if (!view)
{
std::cout << "ExampleAppWindow::on_search_text_changed(): No visible text view." << std::endl;
return;
}
// Very simple-minded search implementation.
auto buffer = view->get_buffer();
Gtk::TextIter match_start;
Gtk::TextIter match_end;
if (buffer->begin().forward_search(text, Gtk::TEXT_SEARCH_CASE_INSENSITIVE,
match_start, match_end))
{
buffer->select_range(match_start, match_end);
view->scroll_to(match_start);
}
}
void ExampleAppWindow::on_visible_child_changed()
{
m_searchbar->set_search_mode(false);
update_words();
}
void ExampleAppWindow::on_find_word(const Gtk::Button* button)
{
m_searchentry->set_text(button->get_label());
}
void ExampleAppWindow::on_reveal_child_changed()
{
update_words();
}
void ExampleAppWindow::update_words()
{
auto tab = dynamic_cast<Gtk::ScrolledWindow*>(m_stack->get_visible_child());
if (!tab)
return;
auto view = dynamic_cast<Gtk::TextView*>(tab->get_child());
if (!view)
{
std::cout << "ExampleAppWindow::update_words(): No visible text view." << std::endl;
return;
}
auto buffer = view->get_buffer();
// Find all words in the text buffer.
std::set<Glib::ustring> words;
auto start = buffer->begin();
Gtk::TextIter end;
while (start)
{
while (start && !start.starts_word())
++start;
if (!start)
break;
end = start;
end.forward_word_end();
if (start == end)
break;
auto word = buffer->get_text(start, end, false);
words.insert(word.lowercase());
start = end;
}
// Remove old children from the ListBox.
auto old_children = m_words->get_children();
for (auto child : old_children)
{
m_words->remove(*child);
delete child;
}
// Add new child buttons, one per unique word.
for (const auto& word : words)
{
auto row = Gtk::make_managed<Gtk::Button>(word);
row->signal_clicked().connect(sigc::bind(sigc::mem_fun(*this,
&ExampleAppWindow::on_find_word), row));
row->show();
m_words->add(*row);
}
}
</pre>
<p>File: <code class="filename">exampleappprefs.cc</code> (For use with gtkmm 3, not gtkmm 2)
</p>
<pre class="programlisting">
#include "../step5/exampleappprefs.cc"
// Equal to the corresponding file in step5
</pre>
<p>File: <code class="filename">exampleapp.gresource.xml</code> (For use with gtkmm 3, not gtkmm 2)
</p>
<pre class="programlisting">
<?xml version="1.0" encoding="UTF-8"?>
<gresources>
<gresource prefix="/org/gtkmm/exampleapp">
<file preprocess="xml-stripblanks">window.ui</file>
<file preprocess="xml-stripblanks">app_menu.ui</file>
<file preprocess="xml-stripblanks">gears_menu.ui</file>
<file preprocess="xml-stripblanks">prefs.ui</file>
</gresource>
</gresources>
</pre>
<p>File: <code class="filename">gears_menu.ui</code> (For use with gtkmm 3, not gtkmm 2)
</p>
<pre class="programlisting">
<?xml version="1.0"?>
<interface>
<!-- interface-requires gtk+ 3.0 -->
<menu id="menu">
<section>
<item>
<attribute name="label" translatable="yes">_Words</attribute>
<attribute name="action">win.show-words</attribute>
</item>
</section>
</menu>
</interface>
</pre>
<p>File: <code class="filename">window.ui</code> (For use with gtkmm 3, not gtkmm 2)
</p>
<pre class="programlisting">
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<!-- interface-requires gtk+ 3.8 -->
<object class="GtkApplicationWindow" id="app_window">
<property name="title" translatable="yes">Example Application</property>
<property name="default-width">600</property>
<property name="default-height">400</property>
<child>
<object class="GtkBox" id="content_box">
<property name="visible">True</property>
<property name="orientation">vertical</property>
<child>
<object class="GtkHeaderBar" id="header">
<property name="visible">True</property>
<child type="title">
<object class="GtkStackSwitcher" id="tabs">
<property name="visible">True</property>
<property name="stack">stack</property>
</object>
</child>
<child>
<object class="GtkToggleButton" id="search">
<property name="visible">True</property>
<property name="sensitive">False</property>
<style>
<class name="image-button"/>
</style>
<child>
<object class="GtkImage" id="search-icon">
<property name="visible">True</property>
<property name="icon-name">edit-find-symbolic</property>
<property name="icon-size">1</property>
</object>
</child>
</object>
<packing>
<property name="pack-type">end</property>
</packing>
</child>
<child>
<object class="GtkMenuButton" id="gears">
<property name="visible">True</property>
<property name="direction">none</property>
<property name="use-popover">True</property>
<style>
<class name="image-button"/>
</style>
</object>
<packing>
<property name="pack-type">end</property>
</packing>
</child>
</object>
</child>
<child>
<object class="GtkSearchBar" id="searchbar">
<property name="visible">True</property>
<child>
<object class="GtkSearchEntry" id="searchentry">
<property name="visible">True</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkBox" id="hbox">
<property name="visible">True</property>
<child>
<object class="GtkRevealer" id="sidebar">
<property name="visible">True</property>
<property name="transition-type">slide-right</property>
<child>
<object class="GtkScrolledWindow" id="sidebar-sw">
<property name="visible">True</property>
<property name="hscrollbar-policy">never</property>
<property name="vscrollbar-policy">automatic</property>
<child>
<object class="GtkListBox" id="words">
<property name="visible">True</property>
<property name="selection-mode">none</property>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkStack" id="stack">
<property name="visible">True</property>
<property name="transition-duration">500</property>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</interface>
</pre>
<p>File: <code class="filename">org.gtkmm.exampleapp.gschema.xml</code> (For use with gtkmm 3, not gtkmm 2)
</p>
<pre class="programlisting">
<?xml version="1.0" encoding="UTF-8"?>
<schemalist>
<schema path="/org/gtkmm/exampleapp/" id="org.gtkmm.exampleapp">
<key name="font" type="s">
<default>'Monospace 12'</default>
<summary>Font</summary>
<description>The font to be used for content.</description>
</key>
<key name="transition" type="s">
<choices>
<choice value='none'/>
<choice value='crossfade'/>
<choice value='slide-left-right'/>
</choices>
<default>'none'</default>
<summary>Transition</summary>
<description>The transition to use when switching tabs.</description>
</key>
<key name="show-words" type="b">
<default>false</default>
<summary>Show words</summary>
<description>Whether to show a word list in the sidebar.</description>
</key>
</schema>
</schemalist>
</pre>
</div>
<div class="navfooter">
<hr>
<table width="100%" summary="Navigation footer">
<tr>
<td width="40%" align="left">
<a accesskey="p" href="sec-buildapp-search-bar.html"><img src="icons/prev.png" alt="Prev"></a> </td>
<td width="20%" align="center"><a accesskey="u" href="chapter-building-applications.html"><img src="icons/up.png" alt="Up"></a></td>
<td width="40%" align="right"> <a accesskey="n" href="sec-buildapp-properties.html"><img src="icons/next.png" alt="Next"></a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">Adding a search bar </td>
<td width="20%" align="center"><a accesskey="h" href="index.html"><img src="icons/home.png" alt="Home"></a></td>
<td width="40%" align="right" valign="top"> Properties</td>
</tr>
</table>
</div>
</body>
</html>
