TouchSelectorEntry

A TouchSelectorEntry widget shows one or more columns of information, like a TouchSelector and also has an Entry widget at the top of the list for user input. The Entry can be used to search the list (although it is by default case-sensitive) or to enter a new item. See the TouchSelector section for details of the base class.

[Note] Note

The "text-column" property controls which column in the associated model is used for autocompletion of the Entry. Only one column can be set as the text-column.

TouchSelectorEntry reference

The TouchSelectorEntryText class offers a simpler API for showing a simple list of text strings, with an Entry at the top.

TouchSelectorEntryText reference

Single-column TouchSelectorEntry example

This example shows a simple window that contains a Hildon::PickerButton. When clicked, the PickerButton shows a TouchSelectorEntry with a single text column, a column of Gtk::Images and a Hildon::Entry above it. When a name is selected, the result appears as the value (sub-title) of the PickerButton and the application sends a line of output to the terminal.

Figure 4.10. Single-column TouchSelectorEntry

Single-column TouchSelectorEntry

Source Code

File: examplewindow.h

#ifndef _MAEMOMM_EXAMPLEWINDOW_H
#define _MAEMOMM_EXAMPLEWINDOW_H

#include <hildonmm/window.h>
#include <hildonmm/picker-button.h>
#include <hildonmm/touch-selector-entry.h>
#include <gtkmm.h>

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

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

  //Name TreeModelColumns:
  class PeopleColumns : public Gtk::TreeModel::ColumnRecord
  {
  public:
    PeopleColumns()
    {
      add(name_);
      add(picture_);
    }

    Gtk::TreeModelColumn<Glib::ustring> name_;
    Gtk::TreeModelColumn< Glib::RefPtr<Gdk::Pixbuf> > picture_;
  };

  PeopleColumns people_columns_;

  //Child widgets:
  Gtk::HButtonBox box_;
  Hildon::PickerButton pickerbutton_;
  Hildon::TouchSelectorEntry touchselector_;
};

#endif /* _MAEMOMM_EXAMPLEWINDOW_H */

File: main.cc

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

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;
}

File: examplewindow.cc

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

static Glib::RefPtr<Gdk::Pixbuf> load_image(const std::string& filename)
{
  Glib::RefPtr<Gdk::Pixbuf> result;

  std::auto_ptr<Glib::Error> ex;
  result = Gdk::Pixbuf::create_from_file("images/" + filename, 
    64, 64, true, ex);
  
  if(ex.get())
  {
    std::cerr << "Error while loading file: " << ex->what() << std::endl;
  }

  return result;
}

ExampleWindow::ExampleWindow() :
  pickerbutton_(Gtk::Hildon::SIZE_HALFSCREEN_WIDTH |
    Gtk::Hildon::SIZE_FINGER_HEIGHT, Hildon::BUTTON_ARRANGEMENT_VERTICAL)
{
  set_title("Hildon::TouchSelectorEntry Example");

  // Create TreeModels and add TouchSelectorColumns to show them:
  Glib::RefPtr<Gtk::ListStore> list_store = 
    Gtk::ListStore::create(people_columns_);
  Glib::RefPtr<Hildon::TouchSelectorColumn> name_column =
    touchselector_.append_text_column(list_store);
  name_column->set_property("text-column", 0); // TODO: Add a TextSelectorColumn::set_text_column() method?

  name_column->pack_start(people_columns_.picture_);

  // Populate the TreeModel with data:
  Gtk::TreeModel::Row row = *(list_store->append());
  row[people_columns_.name_] = "Armin Burgmeier";
  row[people_columns_.picture_] = load_image("armin_burgmeier.png");
  row = *(list_store->append());
  row[people_columns_.name_] = "Daniel Borgmann";
  row[people_columns_.picture_] = load_image("daniel_borgmann.png");
  row = *(list_store->append());
  row[people_columns_.name_] = "Daniel Elstner";
  row[people_columns_.picture_] = load_image("daniel_elstner.png");
  row = *(list_store->append());
  row[people_columns_.name_] = "David King";
  row[people_columns_.picture_] = load_image("david_king.png");
  row = *(list_store->append());
  row[people_columns_.name_] = "Jan Arne Petersen";
  row[people_columns_.picture_] = load_image("jan_arne_petersen.png");
  row = *(list_store->append());
  row[people_columns_.name_] = "Mathias Hasselmann";
  row[people_columns_.picture_] = load_image("mathias_hasselmann.png");
  row = *(list_store->append());
  row[people_columns_.name_] = "Michael Hasselmann";
  row[people_columns_.picture_] = load_image("michael_hasselmann.png");
  row = *(list_store->append());
  row[people_columns_.name_] = "Murray Cumming";
  row[people_columns_.picture_] = load_image("murrayc.png");

  pickerbutton_.set_selector(touchselector_);
  pickerbutton_.set_title("Select a Person");

  box_.add(pickerbutton_);
  add(box_);

  pickerbutton_.signal_value_changed().connect(
    sigc::mem_fun(*this, &ExampleWindow::on_value_changed));

  show_all_children();
}

ExampleWindow::~ExampleWindow()
{
}

void ExampleWindow::on_value_changed()
{
  std::cout << "Selection changed. Current state=" <<
    touchselector_.get_current_text() << std::endl;
}

Multi-column TouchSelectorEntry example

This example shows a simple window that contains a Hildon::PickerButton. When clicked, the PickerButton shows a TouchSelectorEntry with multiple text columns and a Hildon::Entry above it. The Entry can be used to select an alternate first name only, as there can only a single model column associated with a TouchSelectorEntry. When a name is selected, the result appears as the value (sub-title) of the PickerButton and the application sends a line of output to the terminal.

Figure 4.11. Multi-column TouchSelectorEntry

Multi-column TouchSelectorEntry

Source Code

File: examplewindow.h

#ifndef _MAEMOMM_EXAMPLEWINDOW_H
#define _MAEMOMM_EXAMPLEWINDOW_H

#include <hildonmm/window.h>
#include <hildonmm/picker-button.h>
#include <hildonmm/touch-selector-entry.h>
#include <gtkmm.h>

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

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

  //Print function for PickerButton subtitle:
  Glib::ustring picker_button_print_func();

  //Name TreeModelColumns:
  class NameColumns : public Gtk::TreeModel::ColumnRecord
  {
  public:
    NameColumns()
    {
      add(name_);
    }

    Gtk::TreeModelColumn<Glib::ustring> name_;
  };

  NameColumns name_columns_;

  //Surname TreeModelColumns:
  class SurnameColumns : public Gtk::TreeModel::ColumnRecord
  {
  public:
    SurnameColumns()
    {
      add(surname_);
    }

    Gtk::TreeModelColumn<Glib::ustring> surname_;
  };

  SurnameColumns surname_columns_;

  //Child widgets:
  Gtk::HButtonBox box_;
  Hildon::PickerButton pickerbutton_;
  Hildon::TouchSelectorEntry touchselector_;
};

#endif /* _MAEMOMM_EXAMPLEWINDOW_H */

File: main.cc

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

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;
}

File: examplewindow.cc

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

ExampleWindow::ExampleWindow() :
  pickerbutton_(Gtk::Hildon::SIZE_HALFSCREEN_WIDTH |
    Gtk::Hildon::SIZE_FINGER_HEIGHT, Hildon::BUTTON_ARRANGEMENT_VERTICAL)
{
  set_title("Hildon::TouchSelectorEntry Example");

  // Create TreeModels and add TouchSelectorColumns to show them:
  Glib::RefPtr<Gtk::ListStore> name_store = 
    Gtk::ListStore::create(name_columns_);
  Glib::RefPtr<Hildon::TouchSelectorColumn> name_column =
    touchselector_.append_text_column(name_store);
  name_column->set_property("text-column", 0); // TODO: Add a TextSelectorColumn::set_text_column() method?

  Glib::RefPtr<Gtk::ListStore> surname_store = 
    Gtk::ListStore::create(surname_columns_);
  Glib::RefPtr<Hildon::TouchSelectorColumn> surname_column =
    touchselector_.append_text_column(surname_store);
  surname_column->set_property("text-column", 0);

  // Populate the name and surname columns.
  Gtk::TreeModel::Row row = *(name_store->append());
  row[name_columns_.name_] = "Alice";
  row = *(name_store->append());
  row[name_columns_.name_] = "Bob";
  row = *(name_store->append());
  row[name_columns_.name_] = "Jane";
  row = *(name_store->append());
  row[name_columns_.name_] = "John";
  row = *(name_store->append());
  row[name_columns_.name_] = "Peter";
  row = *(name_store->append());
  row[name_columns_.name_] = "Sally";
  row = *(name_store->append());
  row[name_columns_.name_] = "Simon";
  row = *(surname_store->append());
  row[surname_columns_.surname_] = "Brown";
  row = *(surname_store->append());
  row[surname_columns_.surname_] = "Jennings";
  row = *(surname_store->append());
  row[surname_columns_.surname_] = "Johnson";
  row = *(surname_store->append());
  row[surname_columns_.surname_] = "King";
  row = *(surname_store->append());
  row[surname_columns_.surname_] = "Matthews";
  row = *(surname_store->append());
  row[surname_columns_.surname_] = "Parker";
  row = *(surname_store->append());
  row[surname_columns_.surname_] = "White";
  
  pickerbutton_.set_selector(touchselector_);
  pickerbutton_.set_title("Select a Name");

  box_.add(pickerbutton_);
  add(box_);

  pickerbutton_.signal_value_changed().connect(
    sigc::mem_fun(*this, &ExampleWindow::on_value_changed));

  //Set a callback function to build a text representation of the 
  //selected item for the picker button:
  touchselector_.set_print_func(
    sigc::mem_fun(*this, &ExampleWindow::picker_button_print_func));

  show_all_children();
}

ExampleWindow::~ExampleWindow()
{
}

void ExampleWindow::on_value_changed()
{
  std::cout << "Selection changed. Current state=" <<
    touchselector_.get_current_text() << std::endl;
}

// Combine strings in TouchSelector, adding space between each string.
Glib::ustring ExampleWindow::picker_button_print_func()
{
//  Gtk::TreeModel::iterator iter = touchselector_.get_selected(0);
//  Gtk::TreeModel::Row row = *iter;
//  Glib::ustring name = row[name_columns_.name_];

  Gtk::TreeModel::iterator iter = touchselector_.get_selected(1);
  Gtk::TreeModel::Row row = *iter;
  Glib::ustring surname = row[surname_columns_.surname_];
  
  return touchselector_.get_entry()->get_text() + " " + surname;
}

TouchSelectorEntryText example

This example shows a simple window that contains a Hildon::PickerButton. When clicked, the PickerButton shows a TouchSelectorEntryText with a single text column and a Hildon::Entry above it. When a color is selected from the list, or a custom color is input, the result appears as the value (sub-title) of the PickerButton and the application sends a line of output to the terminal.

Figure 4.12. TouchSelectorEntryText

TouchSelectorEntryText

Source Code

File: examplewindow.h

#ifndef _MAEMOMM_EXAMPLEWINDOW_H
#define _MAEMOMM_EXAMPLEWINDOW_H

#include <hildonmm/window.h>
#include <hildonmm/picker-button.h>
#include <hildonmm/touch-selector-entry-text.h>
#include <gtkmm.h>

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

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

  //Child widgets:
  Gtk::HButtonBox box_;
  Hildon::PickerButton pickerbutton_;
  Hildon::TouchSelectorEntryText touchselector_;
};

#endif /* _MAEMOMM_EXAMPLEWINDOW_H */

File: main.cc

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

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;
}

File: examplewindow.cc

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

ExampleWindow::ExampleWindow() :
  pickerbutton_(Gtk::Hildon::SIZE_HALFSCREEN_WIDTH |
    Gtk::Hildon::SIZE_FINGER_HEIGHT, Hildon::BUTTON_ARRANGEMENT_VERTICAL)
{
  set_title("Hildon::TouchSelectorEntryText Example");

  // Append text to TouchSelectorEntryText:
  touchselector_.append_text("Blue");
  touchselector_.append_text("Green");
  touchselector_.append_text("Indigo");
  touchselector_.append_text("Orange");
  touchselector_.append_text("Red");
  touchselector_.append_text("Violet");
  touchselector_.append_text("Yellow");
  
  pickerbutton_.set_selector(touchselector_);
  pickerbutton_.set_title("Select a Color");

  box_.add(pickerbutton_);
  add(box_);

  pickerbutton_.signal_value_changed().connect(
    sigc::mem_fun(*this, &ExampleWindow::on_value_changed));

  show_all_children();
}

ExampleWindow::~ExampleWindow()
{
}

void ExampleWindow::on_value_changed()
{
  std::cout << "Selection changed. Current state=" <<
    touchselector_.get_current_text() << std::endl;
}