File: sec-custom-widgets.html

package info (click to toggle)
gtkmm-documentation 4.12.0-1
links: PTS, VCS
area: main
in suites: forky, sid, trixie
size: 25,772 kB
sloc: cpp: 15,541; javascript: 1,208; makefile: 1,080; python: 401; xml: 106; perl: 67; sh: 8
file content (339 lines) | stat: -rw-r--r-- 11,958 bytes
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="highlight.min.css">
<script src="highlight.min.js"></script><script>
      hljs.configure({languages: ['cpp']});
      hljs.highlightAll();
    </script><title>Custom Widgets</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="generator" content="DocBook XSL Stylesheets Vsnapshot">
<link rel="home" href="index.html" title="Programming with gtkmm 4">
<link rel="up" href="chapter-customwidgets.html" title="Chapter 28. Custom Widgets">
<link rel="prev" href="chapter-customwidgets.html" title="Chapter 28. Custom Widgets">
<link rel="next" href="sec-custom-css-names.html" title="Custom CSS Names">
</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">Custom Widgets</th></tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="chapter-customwidgets.html"><img src="icons/prev.png" alt="Prev"></a> </td>
<th width="60%" align="center">Chapter 28. Custom Widgets</th>
<td width="20%" align="right"> <a accesskey="n" href="sec-custom-css-names.html"><img src="icons/next.png" alt="Next"></a>
</td>
</tr>
</table>
<hr>
</div>
<div class="section">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="sec-custom-widgets"></a>Custom Widgets</h2></div></div></div>
    

    <p>By deriving directly from <code class="classname">Gtk::Widget</code> you can
        do all the drawing for your widget directly, instead of just arranging
        child widgets. For instance, a <code class="classname">Gtk::Label</code> draws
        the text of the label, but does not do this by using other
        widgets.</p>

    <p>When deriving from <code class="classname">Gtk::Widget</code>, you should
        override the following virtual methods. The methods marked (optional)
        need not be overridden in all custom widgets. The base class's methods
        may be appropriate.
    </p>
<div class="itemizedlist"><ul class="itemizedlist" style="list-style-type: disc; ">
<li class="listitem"><p><code class="methodname">get_request_mode_vfunc()</code>: (optional) Return what <code class="literal">Gtk::SizeRequestMode</code> is preferred by the widget.</p></li>
<li class="listitem"><p><code class="methodname">measure_vfunc()</code>: Calculate the minimum and natural width or height of the widget.</p></li>
<li class="listitem"><p><code class="methodname">size_allocate_vfunc()</code>: (optional) Position the widget, given the height and width that it has actually been given.</p></li>
<li class="listitem"><p><code class="methodname">on_realize()</code>:  (optional)</p></li>
<li class="listitem"><p><code class="methodname">on_unrealize()</code>: (optional)</p></li>
<li class="listitem"><p><code class="methodname">on_map()</code>: (optional)</p></li>
<li class="listitem"><p><code class="methodname">on_unmap()</code>: (optional)</p></li>
<li class="listitem"><p><code class="methodname">snapshot_vfunc()</code>: Create a render node, e.g. a <code class="classname">Cairo::Context</code> node, and draw on it.</p></li>
</ul></div>
<p>
    </p>

    <p>The first 3 methods in the previous table are also overridden in custom
        containers. They are briefly described in the
        <a class="link" href="chapter-customwidgets.html#sec-custom-containers" title="Custom Containers">Custom Containers</a> section.
    </p>

<div class="section">
<div class="titlepage"><div><div><h3 class="title">
<a name="custom-init-functions"></a>Class Init and Instance Init Functions</h3></div></div></div>


<p>Some <span class="application">GTK</span> functions, if called at all, must be
called from the class init function. Some other <span class="application">GTK</span>
functions, if called, must be called from the instance init function.
If your custom widget must call any of those functions, you can derive a class
from <code class="classname">Glib::ExtraClassInit</code> and derive your custom class
from that class. The <a class="link" href="sec-custom-css-names.html#custom-css-name-example" title="Example">custom CSS name example</a>
shows how that's done.</p>
</div>

<div class="section">
<div class="titlepage"><div><div><h3 class="title">
<a name="custom-widget-example"></a>Example</h3></div></div></div>


<p>This example implements a widget which draws Penrose triangles.</p>

<div class="figure">
<a name="figure-custom-widget"></a><p class="title"><b>Figure 28.2. Custom Widget</b></p>
<div class="figure-contents">
  
  <div class="screenshot">
    <div class="mediaobject"><img src="figures/custom_widget.png" alt="Custom Widget"></div>
  </div>
</div>
</div>
<br class="figure-break">

<p><a class="ulink" href="https://gitlab.gnome.org/GNOME/gtkmm-documentation/tree/master/examples/book/custom/custom_widget/" target="_top">Source Code</a></p>

<p>File: <code class="filename">examplewindow.h</code> (For use with gtkmm 4)</p>
<pre class="programlisting"><code class="code">#ifndef GTKMM_EXAMPLEWINDOW_H
#define GTKMM_EXAMPLEWINDOW_H

#include &lt;gtkmm.h&gt;
#include "mywidget.h"

class ExampleWindow : public Gtk::Window
{
public:
  ExampleWindow();
  virtual ~ExampleWindow();

protected:
  //Signal handlers:
  void on_button_quit();

  //Child widgets:
  Gtk::Grid m_Grid;
  MyWidget m_MyWidgetS1;
  MyWidget m_MyWidgetS2;
  Gtk::Box m_ButtonBox;
  Gtk::Button m_Button_Quit;
};

#endif //GTKMM_EXAMPLEWINDOW_H
</code></pre>
<p>File: <code class="filename">mywidget.h</code> (For use with gtkmm 4)</p>
<pre class="programlisting"><code class="code">#ifndef GTKMM_CUSTOM_WIDGET_MYWIDGET_H
#define GTKMM_CUSTOM_WIDGET_MYWIDGET_H

#include &lt;gtkmm/widget.h&gt;
#include &lt;gtkmm/border.h&gt;
#include &lt;gdkmm/rgba.h&gt;

class MyWidget : public Gtk::Widget
{
public:
  MyWidget();
  ~MyWidget() override;

protected:
  // Overrides:
  Gtk::SizeRequestMode get_request_mode_vfunc() const override;
  void measure_vfunc(Gtk::Orientation orientation, int for_size, int&amp; minimum, int&amp; natural,
    int&amp; minimum_baseline, int&amp; natural_baseline) const override;
  void on_map() override;
  void on_unmap() override;
  void on_realize() override;
  void on_unrealize() override;
  void snapshot_vfunc(const Glib::RefPtr&lt;Gtk::Snapshot&gt;&amp; snapshot) override;

  Gtk::Border m_padding;
  Gdk::RGBA m_foreground{0.0, 0.0, 1.0};
  Gdk::RGBA m_background{1.0, 0.0, 0.0};
};

#endif //GTKMM_CUSTOM_WIDGET_MYWIDGET_H
</code></pre>
<p>File: <code class="filename">examplewindow.cc</code> (For use with gtkmm 4)</p>
<pre class="programlisting"><code class="code">#include "examplewindow.h"

ExampleWindow::ExampleWindow()
: m_Button_Quit("Quit")
{
  set_title("Custom Widget example");
  set_default_size(600, 400);

  m_Grid.set_margin(6);
  m_Grid.set_row_spacing(10);
  m_Grid.set_column_spacing(10);

  set_child(m_Grid);

  m_Grid.attach(m_MyWidgetS1, 0, 0);
  m_Grid.attach(m_MyWidgetS2, 1, 1);

  m_Grid.attach(m_ButtonBox, 0, 2, 2, 1);

  m_ButtonBox.append(m_Button_Quit);
  m_ButtonBox.set_margin(6);
  m_Button_Quit.set_hexpand(true);
  m_Button_Quit.set_halign(Gtk::Align::END);
  m_Button_Quit.signal_clicked().connect( sigc::mem_fun(*this, &amp;ExampleWindow::on_button_quit) );
}

ExampleWindow::~ExampleWindow()
{
}

void ExampleWindow::on_button_quit()
{
  set_visible(false);
}
</code></pre>
<p>File: <code class="filename">main.cc</code> (For use with gtkmm 4)</p>
<pre class="programlisting"><code class="code">#include "examplewindow.h"
#include &lt;gtkmm/application.h&gt;

int main(int argc, char *argv[])
{
  auto app = Gtk::Application::create("org.gtkmm.example");

  //Shows the window and returns when it is closed.
  return app-&gt;make_window_and_run&lt;ExampleWindow&gt;(argc, argv);
}
</code></pre>
<p>File: <code class="filename">mywidget.cc</code> (For use with gtkmm 4)</p>
<pre class="programlisting"><code class="code">#include "mywidget.h"
#include &lt;gdkmm/general.h&gt;  // for Gdk::Cairo:: functions
#include &lt;gtkmm/snapshot.h&gt;

MyWidget::MyWidget()
{
  // Expand, if there is extra space.
  set_expand(true);

  m_padding.set_left(5);
  m_padding.set_right(15);
  m_padding.set_top(10);
  m_padding.set_bottom(20);
}

MyWidget::~MyWidget()
{
}

Gtk::SizeRequestMode MyWidget::get_request_mode_vfunc() const
{
  //Accept the default value supplied by the base class.
  return Gtk::Widget::get_request_mode_vfunc();
}

//Discover the total amount of minimum space and natural space needed by
//this widget.
//Let's make this simple example widget always need minimum 60 by 50 and
//natural 100 by 70.
void MyWidget::measure_vfunc(Gtk::Orientation orientation, int /* for_size */,
  int&amp; minimum, int&amp; natural, int&amp; minimum_baseline, int&amp; natural_baseline) const
{
  if (orientation == Gtk::Orientation::HORIZONTAL)
  {
    minimum = 60;
    natural = 100;
  }
  else
  {
    minimum = 50;
    natural = 70;
  }

  // Don't use baseline alignment.
  minimum_baseline = -1;
  natural_baseline = -1;
}

void MyWidget::on_map()
{
  //Call base class:
  Gtk::Widget::on_map();
}

void MyWidget::on_unmap()
{
  //Call base class:
  Gtk::Widget::on_unmap();
}

void MyWidget::on_realize()
{
  //Call base class:
  Gtk::Widget::on_realize();
}

void MyWidget::on_unrealize()
{
  //Call base class:
  Gtk::Widget::on_unrealize();
}

void MyWidget::snapshot_vfunc(const Glib::RefPtr&lt;Gtk::Snapshot&gt;&amp; snapshot)
{
  const auto allocation = get_allocation();
  const Gdk::Rectangle rect(0, 0, allocation.get_width(), allocation.get_height());

  // Create a cairo context to draw on.
  auto cr = snapshot-&gt;append_cairo(rect);

  // paint the background
  Gdk::Cairo::set_source_rgba(cr, m_background);
  Gdk::Cairo::add_rectangle_to_path(cr, rect);
  cr-&gt;fill();

  // draw the foreground
  const double scale_x = 0.001 * (allocation.get_width() - m_padding.get_left() - m_padding.get_right());
  const double scale_y = 0.001 * (allocation.get_height() - m_padding.get_top() - m_padding.get_bottom());
  Gdk::Cairo::set_source_rgba(cr, m_foreground);
  cr-&gt;translate(m_padding.get_left(), m_padding.get_top());
  cr-&gt;rectangle(0.0, 0.0, 1000.0*scale_x, 1000.0*scale_y);
  cr-&gt;move_to(155.*scale_x, 165.*scale_y);
  cr-&gt;line_to(155.*scale_x, 838.*scale_y);
  cr-&gt;line_to(265.*scale_x, 900.*scale_y);
  cr-&gt;line_to(849.*scale_x, 564.*scale_y);
  cr-&gt;line_to(849.*scale_x, 438.*scale_y);
  cr-&gt;line_to(265.*scale_x, 100.*scale_y);
  cr-&gt;line_to(155.*scale_x, 165.*scale_y);
  cr-&gt;move_to(265.*scale_x, 100.*scale_y);
  cr-&gt;line_to(265.*scale_x, 652.*scale_y);
  cr-&gt;line_to(526.*scale_x, 502.*scale_y);
  cr-&gt;move_to(369.*scale_x, 411.*scale_y);
  cr-&gt;line_to(633.*scale_x, 564.*scale_y);
  cr-&gt;move_to(369.*scale_x, 286.*scale_y);
  cr-&gt;line_to(369.*scale_x, 592.*scale_y);
  cr-&gt;move_to(369.*scale_x, 286.*scale_y);
  cr-&gt;line_to(849.*scale_x, 564.*scale_y);
  cr-&gt;move_to(633.*scale_x, 564.*scale_y);
  cr-&gt;line_to(155.*scale_x, 838.*scale_y);
  cr-&gt;stroke();
}
</code></pre>

</div>
</div>
<div class="navfooter">
<hr>
<table width="100%" summary="Navigation footer">
<tr>
<td width="40%" align="left">
<a accesskey="p" href="chapter-customwidgets.html"><img src="icons/prev.png" alt="Prev"></a> </td>
<td width="20%" align="center"><a accesskey="u" href="chapter-customwidgets.html"><img src="icons/up.png" alt="Up"></a></td>
<td width="40%" align="right"> <a accesskey="n" href="sec-custom-css-names.html"><img src="icons/next.png" alt="Next"></a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">Chapter 28. Custom Widgets </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"> Custom CSS Names</td>
</tr>
</table>
</div>
</body>
</html>