Editing PyMaemo/UI tutorial/Data selection

Warning: You are not logged in. Your IP address will be recorded in this page's edit history.
The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.
Latest revision Your text
Line 1: Line 1:
-
{{main|Legacy Maemo 5 Documentation/Graphical UI Tutorial/Data selection}}
+
= Data selection =
-
 
+
Hildon provides a set of widgets for data selection specially designed for touchscreens that allows to build simple and easy-to-use interfaces.
Hildon provides a set of widgets for data selection specially designed for touchscreens that allows to build simple and easy-to-use interfaces.
Line 7: Line 6:
In addition, Hildon also provides a specialized dialog and a specialized button to be used in combination with a selector.
In addition, Hildon also provides a specialized dialog and a specialized button to be used in combination with a selector.
-
==Touch selector==
 
-
<code>HildonTouchSelector</code> is the mentioned selector widget. This widget can display several pannable columns. Each column is represented by a <code>GtkTreeModel</code> and single or multiple selection is allowed.
+
==Touch selector ==
 +
HildonTouchSelector is the mentioned selector widget. This widget can display several pannable columns. Each column is represented by a GtkTreeModel and single or multiple selection is allowed.
 +
 
===Text Columns Example===
===Text Columns Example===
-
 
+
This is the simplest possible example. A selector that shows a single text column.
-
This is the simplest example: a selector that shows a single text column.
+
'''Example 6.1. Example of a single-column selector'''
'''Example 6.1. Example of a single-column selector'''
[[Image:example-single-text-column-selector.png|400px]]
[[Image:example-single-text-column-selector.png|400px]]
-
<source lang="python">
 
-
# Based on C code from:
 
-
# "Hildon Tutorial" version 2009-04-28
 
-
# Example 5.6, "Example of a single-column selector"
 
-
import gtk
+
    # Based on C code from:
-
import hildon
+
    # "Hildon Tutorial" version 2009-04-28
 +
    # Example 5.6, "Example of a single-column selector"
 +
   
 +
    import gtk
 +
    import hildon
 +
   
 +
    def selection_changed(selector, user_data):
 +
        current_selection = selector.get_current_text()
 +
        print "Current selection : %s" % (current_selection)
 +
   
 +
    def create_simple_selector():
 +
        #Create a HildonTouchSelector with a single text column
 +
        # selector = hildon.TouchSelector()
 +
        selector = hildon.hildon_touch_selector_new_text()
 +
   
 +
        # Set selection mode to allow multiple selection
 +
        selector.set_column_selection_mode(hildon.TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE)
 +
   
 +
        # Set a handler to "changed" signal
 +
        selector.connect("changed", selection_changed)
 +
   
 +
        # Populate selector
 +
        for i in range(10):
 +
            label = "Item %d" % i
 +
            # Add item to the column
 +
            selector.append_text(label)
 +
   
 +
        return selector
 +
   
 +
    def app_quit(widget, data=None):
 +
        gtk.main_quit()
 +
   
 +
    def main():
 +
        program = hildon.hildon_program_get_instance()
 +
        gtk.set_application_name("hildon-touch-selector example program")
 +
   
 +
        window = hildon.StackableWindow()
 +
        program.add_window(window)
 +
   
 +
        # Create touch selector
 +
        selector = create_simple_selector()
 +
        window.add(selector)
 +
   
 +
        window.connect("destroy", app_quit)
 +
   
 +
        window.show_all()
 +
   
 +
        gtk.main()
 +
   
 +
    if __name__ == "__main__":
 +
        main()
-
def selection_changed(selector, user_data):
 
-
    current_selection = selector.get_current_text()
 
-
    print "Current selection : %s" % (current_selection)
 
-
def create_simple_selector():
+
A HildonTouchSelector with a single text column is created in this program using the following convenience constructor.
-
    #Create a HildonTouchSelector with a single text column
+
-
    selector = hildon.TouchSelector(text = True)
+
-
     # Set a handler to "changed" signal
+
     hildon.touch_selector_new_text()
-
    selector.connect("changed", selection_changed)
+
-
    # Populate selector
 
-
    for i in range(10):
 
-
        label = "Item %d" % i
 
-
        # Add item to the column
 
-
        selector.append_text(label)
 
-
    # Set selection mode to allow multiple selection
+
To add text to a selector created by calling the constructor above, use the function.
-
    selector.set_column_selection_mode(hildon.TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE)
+
-
     return selector
+
     def append(self, text):
-
def app_quit(widget, data=None):
+
Alternatively, you can use <code>prepend_text()</code> or <code>insert_text()</code> to add text to the selector in different positions.
-
    gtk.main_quit()
+
-
def main():
+
You can set the desired selection with the function. In the example, the mode was set to allow multiple selection.
-
    program = hildon.Program.get_instance()
+
-
    gtk.set_application_name("hildon-touch-selector example program")
+
-
     window = hildon.StackableWindow()
+
     def set_column_selection_mode(self, mode):
-
    program.add_window(window)
+
-
    # Create touch selector
 
-
    selector = create_simple_selector()
 
-
    window.add(selector)
 
-
 
-
    window.connect("destroy", app_quit)
 
-
 
-
    window.show_all()
 
-
 
-
    gtk.main()
 
-
 
-
if __name__ == "__main__":
 
-
    main()
 
-
</source>
 
-
A HildonTouchSelector with a single text column is created in this program using the following convenience constructor.
 
-
<source lang="python">
 
-
hildon.TouchSelector(text = True)
 
-
</source>
 
-
To add text to a selector created by calling the constructor above, use the function.
 
-
<source lang="python">
 
-
def append(self, text):
 
-
</source>
 
-
Alternatively, you can use <code>prepend_text()</code> or <code>insert_text()</code> to add text to the selector in different positions.
 
-
 
-
You can set the desired selection with the function. In the example, the mode was set to allow multiple selection.
 
-
<source lang="python">
 
-
def set_column_selection_mode(self, mode):
 
-
</source>
 
This example shows a very common use case of this widget. Next section shows how to build a more complex selector with several columns of different types.
This example shows a very common use case of this widget. Next section shows how to build a more complex selector with several columns of different types.
Line 92: Line 94:
To change how the text representation is generated, set your own function by  calling <code>set_print_func()</code> and using the following signature for the function:
To change how the text representation is generated, set your own function by  calling <code>set_print_func()</code> and using the following signature for the function:
-
<source lang="python">
 
-
def user_function (selector):
 
-
</source>
 
-
===Custom columns===
 
-
In the previous section, a selector with a text column was created. That is probably the most common use case of touch selectors. Convenience functions to deal with text columns were used. However, you can also set other type of columns.
+
    def user_function (selector):
-
As each column is basically a treeview, you can use the same display for different data. You can also show information in different ways as you would do with a <code>GtkTreeView</code>. Thus, you can use the <code>GtkCellRenderer</code>s available in GTK+ to display the data on each cell.
+
===Custom columns===
-
This section explains how to build a selector within a column displaying stock icons. Firstly, let us take a look on the function used for appending new columns to a touchable selector.
+
In the previous section, a selector with a text column was created. That is probably the most common use case of touch selectors. Convenience functions to deal with text columns was used. However, you can also set other type of columns.
-
<source lang="python">
+
-
def append_column(self, model, cell_renderer):
+
-
</source>
+
-
This functions adds a new column to the widget whose data is obtained from the passed model. A <code>GtkCellRenderer</code> is also necessary.
+
-
This function basically adds a <code>GtkTreeView</code> to the widget. For more information about how <code>GtkTreeView</code>s work, see [http://library.gnome.org/devel/pygtk/stable/class-gtktreeview.html GTK+ widgets] before.
+
Because each column is basically a treeview, you can use the same display to different data and in different ways as you would do with a GtkTreeview. Thus, you can use the GtkCellRenderers available in GTK+ to display the data on each cell.
-
The following example shows how to set a column to display images in a selector.
+
-
'''Example 6.2. Example of a selector with a custom column'''
+
This section explains how to build a selector within a column displaying stock icons. Firstly, let us take a look on the function which used for appending new columns to a touchable selector.
-
[[Image:example-single-column-selector.png|400px]]
+
    def append_column(self, model, cell_renderer, ...):
-
<source lang="python">
+
-
# Based on C code from:
+
-
# "Hildon Tutorial" version 2009-04-28
+
-
# Example 6.2 "Example of a selector with a custom column"
+
-
import gtk
+
This functions adds a new column to the widget whose data is obtained from the passed model. Pass also a GtkCellRenderer and a list of pairs property/value which is set as attributes of the renderer.
-
import hildon
+
-
import gobject
+
-
def selection_changed(selector, user_data):
+
This function basically adds a GtkTreeView to the widget. For more information on how GtkTreeviews work, see [http://library.gnome.org/devel/pygtk/stable/class-gtktreeview.html GTK+ widgets] before.
-
    current_selection = selector.get_current_text()
+
The following example shows how to set a column to display images in a selector. For clarity, only the function which creates the selector is shown.
-
    print "Current selection : %s" % (current_selection)
+
-
def create_customized_selector():
+
'''Example 6.2. Example of a selector with a custom column'''
-
    # Create a touch selector  
+
-
    selector = hildon.TouchSelector()
+
-
    # Stock icons will be used for the example
+
[[Image:example-single-column-selector.png|400px]]
-
    icon_list = gtk.stock_list_ids()
+
-
     # Create model to store selector's items  
+
     # Based on C code from:
-
    store_icons = gtk.ListStore(gobject.TYPE_STRING)
+
    # "Hildon Tutorial" version 2009-04-28
 +
    # Example 6.2 "Example of a selector with a custom column"
 +
   
 +
    import gtk
 +
    import hildon
 +
    import gobject
 +
   
 +
    def selection_changed(selector, user_data):
 +
        current_selection = selector.get_current_text()
 +
        print "Current selection : %s" % (current_selection)
 +
   
 +
    def create_customized_selector():
 +
        # Create a touch selector
 +
        selector = hildon.TouchSelector()
 +
   
 +
        # Stock icons will be used for the example
 +
        icon_list = gtk.stock_list_ids()
 +
   
 +
        # Create model to store selector's items  
 +
        store_icons = gtk.ListStore(gobject.TYPE_STRING);
 +
   
 +
        # Populate model
 +
        for item in icon_list:
 +
            new_iter = store_icons.append()
 +
            store_icons.set(new_iter, 0, item)
 +
   
 +
        # Create and set up a pixbuf renderer to use in the selector
 +
        renderer = gtk.CellRendererPixbuf()
 +
        renderer.set_fixed_size(-1, 100)
 +
   
 +
   
 +
        # Add the column to the selector
 +
        # FIXME: bug 4646
 +
        #column = selector.append_column(store_icons, renderer, "stock-id", 0)
 +
   
 +
        # Set the selection mode
 +
        selector.set_column_selection_mode(hildon.TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE)
 +
   
 +
        # Set the property "text-column" that indicates the column
 +
        # of the model to get the string from
 +
        column.set_property("text-column", 0)
 +
   
 +
        return selector
 +
   
 +
    def app_quit(widget, data=None):
 +
        gtk.main_quit()
 +
   
 +
    def main():
 +
        program = hildon.hildon_program_get_instance()
 +
        gtk.set_application_name("hildon-touch-selector example program")
 +
   
 +
        window = hildon.StackableWindow()
 +
        program.add_window(window)
 +
   
 +
        # Create touch selector
 +
        selector = create_customized_selector()
 +
        window.add(selector)
 +
   
 +
        window.connect("destroy", app_quit)
 +
   
 +
        window.show_all()
-
     # Populate model
+
        gtk.main()
-
     for item in icon_list:
+
      
-
         new_iter = store_icons.append()
+
     if __name__ == "__main__":
-
        store_icons.set(new_iter, 0, item)
+
         main()
-
    # Create and set up a pixbuf renderer to use in the selector
 
-
    renderer = gtk.CellRendererPixbuf()
 
-
    renderer.set_fixed_size(-1, 100)
 
 +
The first step in the example is to create and populate a GtkTreeModel. A GtkListStore is used in the example. In most use cases of the touchable selectors a GtkListStore fits well as selectors were designed to allow users to select from a list of items.
-
    # Add the column to the selector
+
In this case, the model stores a list of GTK+ stock icons identifiers. The following call creates a list store with one column to store strings.
-
    column = selector.append_column(store_icons, renderer, stock_id = 0)
+
-
     # Set the selection mode
+
     store_icons = gtk.ListStore(G_TYPE_STRING);
-
    selector.set_column_selection_mode(hildon.TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE)
+
-
    # Set the property "text-column" that indicates the column
 
-
    # of the model to get the string from
 
-
    column.set_property("text-column", 0)
 
-
    return selector
+
The following loop appends all stock identifiers in the newly created model. The identifiers were previously retrieved using
-
def app_quit(widget, data=None):
+
    for item in icon_list:
-
    gtk.main_quit()
+
        new_iter = store_icons.append()
 +
        store_icons.set(new_iter, 0, item)
-
def main():
+
The next step is to set up the renderer which renders each row of the new column. We need a GtkCellRendererPixbuf to display the stock icons.
-
    program = hildon.Program.get_instance()
+
-
    gtk.set_application_name("hildon-touch-selector example program")
+
-
     window = hildon.StackableWindow()
+
     renderer = gtk.CellRendererPixbuf()
-
    program.add_window(window)
+
-
    # Create touch selector
+
Finally, we create and append the new column, using the model and renderer previously created.
-
    selector = create_customized_selector()
+
-
    window.add(selector)
+
-
    window.connect("destroy", app_quit)
+
This call also sets the property "stock-id" of the GtkCellrendererPixbuf. The value is set to 0 which is the number of the column in the GtkTreeModel that stores the stock-id.
-
     window.show_all()
+
     column = selector.append_column(store_icons, renderer, "stock-id", 0)
-
    gtk.main()
+
To summarize, setting a new custom column in a touchable selector is quite similar to setting a new column in a normal GtkTreeview. Create a model to store the data and a cell renderer to properly show this data in each row, and finally add the new column.
-
 
+
-
if __name__ == "__main__":
+
-
    main()
+
-
</source>
+
-
 
+
-
The first step in the example is to create and populate a <code>GtkTreeModel</code>. A <code>GtkListStore</code> is used in the example. In most use cases of the touchable selectors a <code>GtkListStore</code> fits well as selectors were designed to allow users to select from a list of items.
+
-
 
+
-
In this case, the model stores a list of GTK+ stock icons identifiers. The following call creates a list store with one column to store strings.
+
-
<source lang="python">
+
-
    store_icons = gtk.ListStore(gobject.TYPE_STRING)
+
-
</source>
+
-
 
+
-
The following loop appends all stock identifiers in the newly created model. The identifiers were previously retrieved using
+
-
<source lang="python">
+
-
    for item in icon_list:
+
-
        new_iter = store_icons.append()
+
-
        store_icons.set(new_iter, 0, item)
+
-
</source>
+
-
The next step is to set up the renderer which renders each row of the new column. We need a <code>GtkCellRendererPixbuf</code> to display the stock icons.
+
-
<source lang="python">
+
-
    renderer = gtk.CellRendererPixbuf()
+
-
</source>
+
-
Finally, we create and append the new column, using the model and renderer previously created.
+
-
<source lang="python">
+
-
    column = selector.append_column(store_icons, renderer, stock_id = 0)
+
-
</source>
+
-
To summarize, setting a new custom column in a touchable selector is quite similar to setting a new column in a normal <code>GtkTreeView</code>. Create a model to store the data and a cell renderer to properly show this data in each row, and finally add the new column.
+
==Picker dialog and picker buttons ==
==Picker dialog and picker buttons ==
-
 
+
Normally, you use HildonTouchSelector together with a HildonPickerDialog activated from a button. For most common cases you use HildonPickerButton.
-
Normally, you use <code>HildonTouchSelector</code> together with a <code>HildonPickerDialog</code> activated from a button. For most common cases you use <code>HildonPickerButton</code>.
+
This is the usual way to present a selector to the user. The picker button opens a dialog which presents the selector and properly manages user interaction.
This is the usual way to present a selector to the user. The picker button opens a dialog which presents the selector and properly manages user interaction.
Line 213: Line 217:
'''Example'''
'''Example'''
-
Previous sections showed you how to create a touchable selector. In most cases the next step is to attach the selector to a <code>HildonPickerButton</code>.
+
Previous sections showed you how to create a touchable selector. In most cases the next step is to attach the selector to a HildonPickerButton.
A HildonPickerButton is a special GtkButton which displays two labels, title and value, and brings up a HildonPickerDialog. The user chooses one or several items. A string representation of the chosen items is displayed in the value label of the picker button.
A HildonPickerButton is a special GtkButton which displays two labels, title and value, and brings up a HildonPickerDialog. The user chooses one or several items. A string representation of the chosen items is displayed in the value label of the picker button.
Line 222: Line 226:
'''Example 6.3. Example of a Hildon picker button'''
'''Example 6.3. Example of a Hildon picker button'''
-
<source lang="python">
 
-
# Based on C code from:
 
-
# "Hildon Tutorial" version 2009-04-28
 
-
# Example 6.3, "Example of a Hildon picker button"
 
-
import gtk
+
    # Based on C code from:
-
import hildon
+
    # "Hildon Tutorial" version 2009-04-28
-
import gobject
+
    # Example 6.3, "Example of a Hildon picker button"
-
 
+
   
-
def on_picker_value_changed(button, user_data=None):
+
    import gtk
-
    print "Newly selected value: %s\n" % button.get_value()
+
    import hildon
-
 
+
    import gobject
-
def app_quit(widget, data=None):
+
   
-
    gtk.main_quit()
+
    def on_picker_value_changed(button, user_data=None):
-
 
+
        print "Newly selected value: %s\n" % button.get_value()
-
def create_customized_selector():
+
   
-
    # Create a touch selector  
+
    def app_quit(widget, data=None):
-
    selector = hildon.TouchSelector()
+
        gtk.main_quit()
-
 
+
   
-
     # Stock icons will be used for the example
+
    def create_customized_selector():
-
    icon_list = gtk.stock_list_ids()
+
        # Create a touch selector  
 +
        selector = hildon.TouchSelector()
 +
      
 +
        # Stock icons will be used for the example
 +
        icon_list = gtk.stock_list_ids()
 +
       
 +
        print icon_list
 +
   
 +
        # Create model to store selector's items
 +
        store_icons = gtk.ListStore(gobject.TYPE_STRING)
 +
   
 +
        # Populate model
 +
        for item in icon_list:
 +
            new_iter = store_icons.append()
 +
            store_icons.set_value(new_iter, 0, item)
 +
   
 +
        # Create and set up a text renderer to use in the selector
 +
        renderer = gtk.CellRendererPixbuf()
 +
        renderer.set_fixed_size(-1, 100)
 +
   
 +
        # Add the column to the selector
 +
        column = selector.append_column(store_icons, renderer, stock_id=0)
 +
   
 +
        # Set the selection mode
 +
        selector.set_column_selection_mode(hildon.TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE)
 +
   
 +
        # Set the property "text-column" that indicates the column
 +
        # of the model to get the string from
 +
        column.set_property("text-column", 0)
 +
   
 +
        return selector
 +
   
 +
    def main ():
 +
        program = hildon.Program.get_instance()
 +
        gtk.set_application_name("hildon-touch-selector example program")
 +
   
 +
        window = hildon.StackableWindow()
 +
        program.add_window(window)
 +
   
 +
        # Create touch selector
 +
        selector = create_customized_selector()
 +
   
 +
        # Create a picker button
 +
        picker_button = hildon.PickerButton(gtk.HILDON_SIZE_AUTO,
 +
                                            hildon.BUTTON_ARRANGEMENT_VERTICAL)
 +
   
 +
        # Set a title to the button
 +
        picker_button.set_title("Select an item")
 +
   
 +
        # Attach the touch selector to the picker button
 +
        picker_button.set_selector(selector)
 +
   
 +
        # Attach callback to the "value-changed" signal
 +
        picker_button.connect("value-changed", on_picker_value_changed)
 +
   
 +
        # Add button to main window
 +
        window.add(picker_button)
 +
   
 +
        window.connect("destroy", app_quit)
 +
        window.show_all()
 +
        gtk.main()
 +
   
 +
    if __name__ == "__main__":
 +
        main()
      
      
-
    print icon_list
 
-
    # Create model to store selector's items
+
In the above example a picker button is created. The reference to the attached selector is stored in the property "touch-selector" of the picker button. To retrieve the attached selector , use function <code>hildon.PickerButton()</code>. To attach the selector, use the function <code>picker_button.set_selector()</code>.
-
    store_icons = gtk.ListStore(gobject.TYPE_STRING)
+
-
    # Populate model
+
Note that you do not need to take care of the HildonPickerDialog. The dialog is automatically brought up when users click the picker button and closed when the selection is done.
-
    for item in icon_list:
+
-
        new_iter = store_icons.append()
+
-
        store_icons.set_value(new_iter, 0, item)
+
-
 
+
-
    # Create and set up a text renderer to use in the selector
+
-
    renderer = gtk.CellRendererPixbuf()
+
-
    renderer.set_fixed_size(-1, 100)
+
-
 
+
-
    # Add the column to the selector
+
-
    column = selector.append_column(store_icons, renderer, stock_id=0)
+
-
 
+
-
    # Set the selection mode
+
-
    selector.set_column_selection_mode(hildon.TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE)
+
-
 
+
-
    # Set the property "text-column" that indicates the column
+
-
    # of the model to get the string from
+
-
    column.set_property("text-column", 0)
+
-
 
+
-
    return selector
+
-
 
+
-
def main ():
+
-
    program = hildon.Program.get_instance()
+
-
    gtk.set_application_name("hildon-touch-selector example program")
+
-
 
+
-
    window = hildon.StackableWindow()
+
-
    program.add_window(window)
+
-
 
+
-
    # Create touch selector
+
-
    selector = create_customized_selector()
+
-
 
+
-
    # Create a picker button
+
-
    picker_button = hildon.PickerButton(gtk.HILDON_SIZE_AUTO,
+
-
                                        hildon.BUTTON_ARRANGEMENT_VERTICAL)
+
-
 
+
-
    # Set a title to the button
+
-
    picker_button.set_title("Select an item")
+
-
 
+
-
    # Attach the touch selector to the picker button
+
-
    picker_button.set_selector(selector)
+
-
 
+
-
    # Attach callback to the "value-changed" signal
+
-
    picker_button.connect("value-changed", on_picker_value_changed)
+
-
 
+
-
    # Add button to main window
+
-
    window.add(picker_button)
+
-
 
+
-
    window.connect("destroy", app_quit)
+
-
    window.show_all()
+
-
    gtk.main()
+
-
 
+
-
if __name__ == "__main__":
+
-
    main()
+
-
</source>
+
-
In the above example a picker button is created. The reference to the attached selector is stored in the property "touch-selector" of the picker button. To retrieve the attached selector, use function <code>hildon.PickerButton()</code>. To attach the selector, use the function <code>picker_button.set_selector()</code>.
+
-
 
+
-
Note that you do not need to take care of the <code>HildonPickerDialog</code>. The dialog is automatically brought up when users click the picker button and closed when the selection is done.
+
The dialog shows a button "Done" to allow users finish the selection when the touchable selector allows multiple selection. When the selector allows only single selection, the dialog does not show any button and closes when the user taps on one item.
The dialog shows a button "Done" to allow users finish the selection when the touchable selector allows multiple selection. When the selector allows only single selection, the dialog does not show any button and closes when the user taps on one item.
Line 316: Line 321:
==Touch selector entry ==
==Touch selector entry ==
 +
The HildonTouchSelectorEntry is a selector widget with a text entry that allows users to select an item from a predefined list or to enter a different one in a HildonEntry. Items can also be searched and selected by typing in the entry.
-
The <code>HildonTouchSelectorEntry</code> is a selector widget with a text entry that allows users to select an item from a predefined list or to enter a different one in a <code>HildonEntry</code>. Items can also be searched and selected by typing in the entry.
+
An additional feature is that the HildonEntry is auto-completed with the list's items as the user types their name.
-
 
+
-
An additional feature is that the <code>HildonEntry</code> is auto-completed with the list's items as the user types their name.
+
Example below shows how to build a selector to pick a word in a list of words.
Example below shows how to build a selector to pick a word in a list of words.
Line 326: Line 330:
'''Example 6.4. Example of a Hildon picker button with a selector entry'''
'''Example 6.4. Example of a Hildon picker button with a selector entry'''
-
<source lang="python">
 
-
# Based on C code from:
 
-
# "Hildon Tutorial" version 2009-04-28
 
-
# Example 6.4, "Hildon picker button with a selector entry"
 
-
import gtk
+
    # Based on C code from:
-
import hildon
+
    # "Hildon Tutorial" version 2009-04-28
-
 
+
    # Example 6.4, "Hildon picker button with a selector entry"
-
def app_quit(widget, data=None):
+
   
-
    gtk.main_quit()
+
    import gtk
-
 
+
    import hildon
-
def main ():
+
   
-
    artists = [
+
    def app_quit(widget, data=None):
-
        "AC/DC",
+
        gtk.main_quit()
-
        "Aerosmith",
+
   
-
        "Alice in Chains",
+
    def main ():
-
        "Black Sabbath",
+
        artists = [
-
        "Carcass",
+
            "AC/DC",
-
        "Danzig",
+
            "Aerosmith",
-
        "Deep Purple",
+
            "Alice in Chains",
-
        "Dream Theater",
+
            "Black Sabbath",
-
        "Eric Clapton",
+
            "Carcass",
-
    ]
+
            "Danzig",
-
 
+
            "Deep Purple",
-
    program = hildon.Program.get_instance()
+
            "Dream Theater",
-
    gtk.set_application_name("hildon-touch-selector example program")
+
            "Eric Clapton",
-
 
+
        ]
-
     window = hildon.StackableWindow()
+
   
-
    program.add_window(window)
+
        program = hildon.hildon_program_get_instance()
-
 
+
        gtk.set_application_name("hildon-touch-selector example program")
-
     # Create a picker button
+
      
-
    picker_button = hildon.PickerButton(gtk.HILDON_SIZE_AUTO,
+
        window = hildon.StackableWindow()
-
                                        hildon.BUTTON_ARRANGEMENT_VERTICAL)
+
        program.add_window(window)
-
 
+
      
-
     # Set a title to the button  
+
        # Create a picker button
-
    picker_button.set_title("Pick a band!")
+
        picker_button = hildon.PickerButton(gtk.HILDON_SIZE_AUTO,
-
 
+
                                            hildon.BUTTON_ARRANGEMENT_VERTICAL)
-
     # Create a touch selector entry
+
      
-
    selector = hildon.TouchSelectorEntry(text=True)
+
        # Set a title to the button  
-
     
+
        picker_button.set_title("Pick a band!")
-
    # Populate the selector
+
      
-
    for artist in artists:
+
        # Create a touch selector entry */
-
        selector.append_text(artist)
+
        # FIXME: bug 4647
 +
        selector = hildon.hildon_touch_selector_entry_new_text()
 +
         
 +
        # Populate the selector
 +
        for artist in artists:
 +
            selector.append_text(artist)
 +
   
 +
        # Attach the touch selector to the picker button
 +
        picker_button.set_selector(selector)
 +
   
 +
        # Add button to main window
 +
        window.add(picker_button)
 +
   
 +
        window.connect("destroy", app_quit)
 +
        window.show_all()
 +
        gtk.main()
 +
   
 +
    if __name__ == "__main__":
 +
        main()
-
    # Attach the touch selector to the picker button
 
-
    picker_button.set_selector(selector)
 
-
    # Add button to main window
 
-
    window.add(picker_button)
 
-
    window.connect("destroy", app_quit)
 
-
    window.show_all()
 
-
    gtk.main()
 
-
 
-
if __name__ == "__main__":
 
-
    main()
 
-
</source>
 
As you can see in the example above, the use of this widget is similar to using a normal touchable selector.
As you can see in the example above, the use of this widget is similar to using a normal touchable selector.
You can also use custom columns in a HildonTouchableEntry but at least one column must be a text column. The text column is indicated by the property "text_column" which you set with <code>set_text_column()</code>.
You can also use custom columns in a HildonTouchableEntry but at least one column must be a text column. The text column is indicated by the property "text_column" which you set with <code>set_text_column()</code>.
-
==Pre-built selectors==
+
==Pre-built selectors ==
-
 
+
The widgets HildonDateButton and HildonTimeButton are buttons displaying and allowing the selection of date and time, respectively. Developers can use them directly instead of building their own date or time selectors.
-
The widgets <code>HildonDateButton</code> and <code>HildonTimeButton</code> are buttons displaying and allowing the selection of date and time, respectively. Developers can use them directly instead of building their own date or time selectors.
+
Both widgets are specialized picker buttons with a convenient touchable selector attached that you can use directly in your application.
Both widgets are specialized picker buttons with a convenient touchable selector attached that you can use directly in your application.
-
Here is a simple application using a <code>HildonDateButton</code>.
+
Here is a simple application using a HildonDateButton.
'''Example 6.5. Example of a Hildon date button'''
'''Example 6.5. Example of a Hildon date button'''
-
<source lang="python">
 
-
# Based on C code from:
 
-
# "Hildon Tutorial" version 2009-04-28
 
-
# Example 6.5, "Example of a Hildon date button"
 
-
import gtk
+
    # Based on C code from:
-
import hildon
+
    # "Hildon Tutorial" version 2009-04-28
-
 
+
    # Example 6.5, "Example of a Hildon date button"
-
def app_quit(widget, data=None):
+
   
-
    gtk.main_quit()
+
    import gtk
-
 
+
    import hildon
-
def main ():
+
   
-
    program = hildon.Program.get_instance()
+
    def app_quit(widget, data=None):
-
    gtk.set_application_name("hildon-touch-selector example program")
+
        gtk.main_quit()
-
 
+
   
-
     window = hildon.StackableWindow()
+
    def main ():
-
    program.add_window(window)
+
        program = hildon.Program.get_instance()
-
 
+
        gtk.set_application_name("hildon-touch-selector example program")
-
     # Create a date picker
+
      
-
    date_button = hildon.DateButton(gtk.HILDON_SIZE_AUTO,
+
        window = hildon.StackableWindow()
-
                                    hildon.BUTTON_ARRANGEMENT_VERTICAL)
+
        program.add_window(window)
-
 
+
      
-
     # Set a title to the button
+
        # Create a date picker
-
    date_button.set_title("Select an item")
+
        date_button = hildon.DateButton(gtk.HILDON_SIZE_AUTO,
-
 
+
                                        hildon.BUTTON_ARRANGEMENT_VERTICAL)
-
     # Add button to main window  
+
      
-
    window.add(date_button)
+
        # Set a title to the button
-
 
+
        date_button.set_title("Select an item")
-
       
+
      
-
    window.connect("destroy", app_quit)
+
        # Add button to main window  
-
    window.show_all()
+
        window.add(date_button)
-
    gtk.main()
+
   
-
 
+
           
-
if __name__ == "__main__":
+
        window.connect("destroy", app_quit)
-
    main()
+
        window.show_all()
-
</source>
+
        gtk.main()
-
 
+
   
-
[[Category:Python]]
+
    if __name__ == "__main__":
 +
        main()

Learn more about Contributing to the wiki.


Please note that all contributions to maemo.org wiki may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see maemo.org wiki:Copyrights for details). Do not submit copyrighted work without permission!


Cancel | Editing help (opens in new window)

Templates used on this page:

Retrieved from "http://wiki.maemo.org/PyMaemo/UI_tutorial/Data_selection"