PannableArea

Hildon::PannableArea is a container widget than can be panned around using fingers. The widget has no scrollbars, but does have small indicators that appear when a dragging motion has started. The motion is kinetic, meaning that the area can be flicked to a position, with the movement continuing for a short time after the finger has been raised. The scrolling can also be stopped by tapping on the pannable area.

Hildon::PannableArea can be used in the same way as Gtk::ScrolledWindow, except that it has extra features specific to the Hildon platform. It is derived from Gtk::Bin, so it only accepts a single widget.

[Note] Note

Set the mov-mode property to the correct orientation, horizontal, vertical or both, in order for panning to work as expected.

PannableArea reference

Example

This example shows a simple window with ten Hildon::Button widgets inside a Hildon::PannableArea.

PannableArea

Figure 4.20. PannableArea


Source code

File: examplewindow.h

#ifndef _MAEMOMM_EXAMPLEWINDOW_H
#define _MAEMOMM_EXAMPLEWINDOW_H

#include <hildonmm/window.h>
#include <hildonmm/pannable-area.h>
#include <hildonmm/button.h>
#include <gtkmm/buttonbox.h>
#include <gtkmm/viewport.h>

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

private:
  // Signal handlers:
  void on_button_clicked();

  // Child widgets:
  Gtk::VButtonBox box_;
  Hildon::Button button1_;
  Hildon::Button button2_;
  Hildon::Button button3_;
  Hildon::Button button4_;
  Hildon::Button button5_;
  Hildon::Button button6_;
  Hildon::Button button7_;
  Hildon::Button button8_;
  Hildon::Button button9_;
  Hildon::Button button10_;
  Hildon::PannableArea area_;
};

#endif /* _MAEMOMM_EXAMPLEWINDOW_H */

File: examplewindow.cc

#include "examplewindow.h"
#include <iostream>

ExampleWindow::ExampleWindow() :
  button1_(Gtk::Hildon::SIZE_HALFSCREEN_WIDTH | Gtk::Hildon::SIZE_FINGER_HEIGHT,
    Hildon::BUTTON_ARRANGEMENT_VERTICAL,
    "Click Me",
    "1"),
  button2_(Gtk::Hildon::SIZE_HALFSCREEN_WIDTH | Gtk::Hildon::SIZE_FINGER_HEIGHT,
    Hildon::BUTTON_ARRANGEMENT_VERTICAL,
    "Click Me",
    "2"),
  button3_(Gtk::Hildon::SIZE_HALFSCREEN_WIDTH | Gtk::Hildon::SIZE_FINGER_HEIGHT,
    Hildon::BUTTON_ARRANGEMENT_VERTICAL,
    "Click Me",
    "3"),
  button4_(Gtk::Hildon::SIZE_HALFSCREEN_WIDTH | Gtk::Hildon::SIZE_FINGER_HEIGHT,
    Hildon::BUTTON_ARRANGEMENT_VERTICAL,
    "Click Me",
    "4"),
  button5_(Gtk::Hildon::SIZE_HALFSCREEN_WIDTH | Gtk::Hildon::SIZE_FINGER_HEIGHT,
    Hildon::BUTTON_ARRANGEMENT_VERTICAL,
    "Click Me",
    "5"),
  button6_(Gtk::Hildon::SIZE_HALFSCREEN_WIDTH | Gtk::Hildon::SIZE_FINGER_HEIGHT,
    Hildon::BUTTON_ARRANGEMENT_VERTICAL,
    "Click Me",
    "6"),
  button7_(Gtk::Hildon::SIZE_HALFSCREEN_WIDTH | Gtk::Hildon::SIZE_FINGER_HEIGHT,
    Hildon::BUTTON_ARRANGEMENT_VERTICAL,
    "Click Me",
    "7"),
  button8_(Gtk::Hildon::SIZE_HALFSCREEN_WIDTH | Gtk::Hildon::SIZE_FINGER_HEIGHT,
    Hildon::BUTTON_ARRANGEMENT_VERTICAL,
    "Click Me",
    "8"),
  button9_(Gtk::Hildon::SIZE_HALFSCREEN_WIDTH | Gtk::Hildon::SIZE_FINGER_HEIGHT,
    Hildon::BUTTON_ARRANGEMENT_VERTICAL,
    "Click Me",
    "9"),
  button10_(Gtk::Hildon::SIZE_HALFSCREEN_WIDTH | Gtk::Hildon::SIZE_FINGER_HEIGHT,
    Hildon::BUTTON_ARRANGEMENT_VERTICAL,
    "Click Me",
    "10")
{
  set_title("Hildon::PannableArea Example");

  box_.add(button1_);
  box_.add(button2_);
  box_.add(button3_);
  box_.add(button4_);
  box_.add(button5_);
  box_.add(button6_);
  box_.add(button7_);
  box_.add(button8_);
  box_.add(button9_);
  box_.add(button10_);

  area_.add(box_);
  add(area_);

  button1_.signal_clicked().connect(
    sigc::mem_fun(*this, &ExampleWindow::on_button_clicked));
  button2_.signal_clicked().connect(
    sigc::mem_fun(*this, &ExampleWindow::on_button_clicked));
  button3_.signal_clicked().connect(
    sigc::mem_fun(*this, &ExampleWindow::on_button_clicked));
  button4_.signal_clicked().connect(
    sigc::mem_fun(*this, &ExampleWindow::on_button_clicked));
  button5_.signal_clicked().connect(
    sigc::mem_fun(*this, &ExampleWindow::on_button_clicked));
  button6_.signal_clicked().connect(
    sigc::mem_fun(*this, &ExampleWindow::on_button_clicked));
  button7_.signal_clicked().connect(
    sigc::mem_fun(*this, &ExampleWindow::on_button_clicked));
  button8_.signal_clicked().connect(
    sigc::mem_fun(*this, &ExampleWindow::on_button_clicked));
  button9_.signal_clicked().connect(
    sigc::mem_fun(*this, &ExampleWindow::on_button_clicked));
  button10_.signal_clicked().connect(
    sigc::mem_fun(*this, &ExampleWindow::on_button_clicked));

  show_all_children();
}

ExampleWindow::~ExampleWindow()
{
}

void ExampleWindow::on_button_clicked()
{
  std::cout << "Button clicked." << std::endl;
}

File: main.cc

#include <hildonmm.h>
#include "examplewindow.h"

int main(int argc, char *argv[])
{
  Gtk::Main kit(argc, argv);
  Hildon::init();

  ExampleWindow window;
  kit.run(window); //Shows the window and returns when it is closed.

  return 0;
}