PyMaemo/UI tutorial/Data selection - Revision history

imported_>amigadave: add C documentation link

2010-10-07T11:34:33Z

add C documentation link

← Older revision		Revision as of 11:34, 7 October 2010
Line 1:		Line 1:
			{{main\|Legacy Maemo 5 Documentation/Graphical UI Tutorial/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.

imported_>amigadave: tidy

2010-06-23T08:25:50Z

tidy

Show changes

imported_>amigadave: use and `, still needs tidying`


2010-06-22T15:28:48Z
use <source> and <code>, still needs tidying
Show changes



imported_>amigadave: Category:Python
2010-02-11T15:54:37Z
Category:Python

				
				
				
				
				
				← Older revision
				Revision as of 15:54, 11 February 2010
				
Line 431:
Line 431:
     if __name__ == "__main__":      if __name__ == "__main__":
         main()          main()

[[Category:Python]]



imported_>danielwilms: PyMaemo/UITutorial/Data selection moved to PyMaemo/UI tutorial/Data selection
2010-02-01T11:13:55Z
PyMaemo/UITutorial/Data selection moved to PyMaemo/UI tutorial/Data selection

				
				← Older revision
				Revision as of 11:13, 1 February 2010
				
(No difference)



imported_>lizardo: /* Text Columns Example */
2010-01-12T15:45:05Z
Text Columns Example

				
				
				
				
				
				← Older revision
				Revision as of 15:45, 12 January 2010
				
Line 18:
Line 18:
[[Image:example-single-text-column-selector.png|400px]] [[Image:example-single-text-column-selector.png|400px]]



    # Based on C code from:  # Based on C code from:
    # "Hildon Tutorial" version 2009-04-28  # "Hildon Tutorial" version 2009-04-28
    # Example 5.6, "Example of a single-column selector"  # Example 5.6, "Example of a single-column selector"
     
    import gtk  import gtk
    import hildon  import hildon
     
    def selection_changed(selector, user_data):  def selection_changed(selector, user_data):
        current_selection = selector.get_current_text()      current_selection = selector.get_current_text()
        print "Current selection : %s" % (current_selection)      print "Current selection : %s" % (current_selection)
     
    def create_simple_selector():  def create_simple_selector():
        #Create a HildonTouchSelector with a single text column      #Create a HildonTouchSelector with a single text column
        selector = hildon.TouchSelector(text = True)      selector = hildon.TouchSelector(text = True)
     
        # Set a handler to "changed" signal        # Set a handler to "changed" signal
        selector.connect("changed", selection_changed)      selector.connect("changed", selection_changed)
     
        # Populate selector        # Populate selector
        for i in range(10):      for i in range(10):
            label = "Item %d" % i          label = "Item %d" % i
            # Add item to the column            # Add item to the column
            selector.append_text(label)          selector.append_text(label)
     
        # Set selection mode to allow multiple selection      # Set selection mode to allow multiple selection
        selector.set_column_selection_mode(hildon.TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE)      selector.set_column_selection_mode(hildon.TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE)
     
        return selector      return selector
     
    def app_quit(widget, data=None):  def app_quit(widget, data=None):
        gtk.main_quit()      gtk.main_quit()
     
    def main():  def main():
        program = hildon.Program.get_instance()      program = hildon.Program.get_instance()
        gtk.set_application_name("hildon-touch-selector example program")      gtk.set_application_name("hildon-touch-selector example program")
     
        window = hildon.StackableWindow()      window = hildon.StackableWindow()
        program.add_window(window)      program.add_window(window)
     
        # Create touch selector      # Create touch selector
        selector = create_simple_selector()      selector = create_simple_selector()
        window.add(selector)      window.add(selector)
     
        window.connect("destroy", app_quit)      window.connect("destroy", app_quit)
     
        window.show_all()      window.show_all()
     
        gtk.main()      gtk.main()
     
    if __name__ == "__main__":  if __name__ == "__main__":
        main()      main()
  



A HildonTouchSelector with a single text column is created in this program using the following convenience constructor. A HildonTouchSelector with a single text column is created in this program using the following convenience constructor.



    hildon.TouchSelector(text = True)  hildon.TouchSelector(text = True)






To add text to a selector created by calling the constructor above, use the function. To add text to a selector created by calling the constructor above, use the function.



    def append(self, text):  def append(self, text):



Alternatively, you can use <code>prepend_text()</code> or <code>insert_text()</code> to add text to the selector in different positions. Alternatively, you can use <code>prepend_text()</code> or <code>insert_text()</code> to add text to the selector in different positions.
Line 84:
Line 83:
You can set the desired selection with the function. In the example, the mode was set to allow multiple selection. You can set the desired selection with the function. In the example, the mode was set to allow multiple selection.



    def set_column_selection_mode(self, mode):  def set_column_selection_mode(self, mode):



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 94:
Line 93:
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:



     def user_function (selector):  def user_function (selector):



===Custom columns=== ===Custom columns===



200.184.118.130: /* Custom columns */
2009-10-20T13:18:40Z
Custom columns

				
				
				
				
				
				← Older revision
				Revision as of 13:18, 20 October 2009
				
Line 148:
Line 148:
             
         # Add the column to the selector          # Add the column to the selector
         column = selector.append_column(store_icons, renderer)          column = selector.append_column(store_icons, renderer, stock_id = 0)
             
         # Set the selection mode          # Set the selection mode
Line 202:
Line 202:
Finally, we create and append the new column, using the model and renderer previously created. Finally, we create and append the new column, using the model and renderer previously created.



     column = selector.append_column(store_icons, renderer)      column = selector.append_column(store_icons, renderer, stock_id = 0)



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. 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.



200.184.118.130: /* Custom columns */
2009-10-19T22:08:12Z
Custom columns

				
				
				
				
				
				← Older revision
				Revision as of 22:08, 19 October 2009
				
Line 135:
Line 135:
             
         # Create model to store selector's items            # Create model to store selector's items  
         store_icons = gtk.ListStore(gobject.TYPE_STRING);          store_icons = gtk.ListStore(gobject.TYPE_STRING)
             
         # Populate model          # Populate model
Line 187:
Line 187:
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. 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.



     store_icons = gtk.ListStore(G_TYPE_STRING);      store_icons = gtk.ListStore(gobject.TYPE_STRING)









200.184.118.130: /* Custom columns */
2009-10-19T22:06:35Z
Custom columns

				
				
				
				
				
				← Older revision
				Revision as of 22:06, 19 October 2009
				
Line 163:
Line 163:
             
     def main():      def main():
         program = hildon.hildon_program_get_instance()          program = hildon.Program.get_instance()
         gtk.set_application_name("hildon-touch-selector example program")          gtk.set_application_name("hildon-touch-selector example program")
             



200.184.118.130: /* Custom columns */
2009-10-19T20:26:53Z
Custom columns

				
				
				
				
				
				← Older revision
				Revision as of 20:26, 19 October 2009
				
Line 98:
Line 98:
===Custom columns=== ===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 was used. However, you can also set other type of 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.



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. 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 GtkTreeview. Thus, you can use the GtkCellRenderers available in GTK+ to display the data on each cell.



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. 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.



      def append_column(self, model, cell_renderer, ...):       def append_column(self, model, cell_renderer):



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. This functions adds a new column to the widget whose data is obtained from the passed model. A GtkCellRenderer is also necessary.



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. This function basically adds a GtkTreeView to the widget. For more information about how GtkTreeviews works, see [http://library.gnome.org/devel/pygtk/stable/class-gtktreeview.html GTK+ widgets] before.
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. 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''' '''Example 6.2. Example of a selector with a custom column'''
Line 148:
Line 148:
             
         # Add the column to the selector          # Add the column to the selector
         # FIXME: bug 4646          column = selector.append_column(store_icons, renderer)
        #column = selector.append_column(store_icons, renderer, "stock-id", 0) 
             
         # Set the selection mode          # Set the selection mode
Line 177:
Line 176:
             
         window.show_all()          window.show_all()
      
         gtk.main()          gtk.main()
             
Line 203:
Line 202:
Finally, we create and append the new column, using the model and renderer previously created. Finally, we create and append the new column, using the model and renderer previously created.



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.      column = selector.append_column(store_icons, renderer)
  
     column = selector.append_column(store_icons, renderer, "stock-id", 0) 



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. 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.

← Older revision		Revision as of 15:54, 11 February 2010
Line 431:		Line 431:
	if __name__ == "__main__":		if __name__ == "__main__":
	main()		main()

			[[Category:Python]]

← Older revision	Revision as of 11:13, 1 February 2010
(No difference)

← Older revision		Revision as of 15:45, 12 January 2010
Line 18:		Line 18:
	[[Image:example-single-text-column-selector.png\|400px]]		[[Image:example-single-text-column-selector.png\|400px]]

	# Based on C code from:		# Based on C code from:
	# "Hildon Tutorial" version 2009-04-28		# "Hildon Tutorial" version 2009-04-28
	# Example 5.6, "Example of a single-column selector"		# Example 5.6, "Example of a single-column selector"

	import gtk		import gtk
	import hildon		import hildon

	def selection_changed(selector, user_data):		def selection_changed(selector, user_data):
	current_selection = selector.get_current_text()		current_selection = selector.get_current_text()
	print "Current selection : %s" % (current_selection)		print "Current selection : %s" % (current_selection)

	def create_simple_selector():		def create_simple_selector():
	#Create a HildonTouchSelector with a single text column		#Create a HildonTouchSelector with a single text column
	selector = hildon.TouchSelector(text = True)		selector = hildon.TouchSelector(text = True)

	# Set a handler to "changed" signal		# Set a handler to "changed" signal
	selector.connect("changed", selection_changed)		selector.connect("changed", selection_changed)

	# Populate selector		# Populate selector
	for i in range(10):		for i in range(10):
	label = "Item %d" % i		label = "Item %d" % i
	# Add item to the column		# Add item to the column
	selector.append_text(label)		selector.append_text(label)

	# Set selection mode to allow multiple selection		# Set selection mode to allow multiple selection
	selector.set_column_selection_mode(hildon.TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE)		selector.set_column_selection_mode(hildon.TOUCH_SELECTOR_SELECTION_MODE_MULTIPLE)

	return selector		return selector

	def app_quit(widget, data=None):		def app_quit(widget, data=None):
	gtk.main_quit()		gtk.main_quit()

	def main():		def main():
	program = hildon.Program.get_instance()		program = hildon.Program.get_instance()
	gtk.set_application_name("hildon-touch-selector example program")		gtk.set_application_name("hildon-touch-selector example program")

	window = hildon.StackableWindow()		window = hildon.StackableWindow()
	program.add_window(window)		program.add_window(window)

	# Create touch selector		# Create touch selector
	selector = create_simple_selector()		selector = create_simple_selector()
	window.add(selector)		window.add(selector)

	window.connect("destroy", app_quit)		window.connect("destroy", app_quit)

	window.show_all()		window.show_all()

	gtk.main()		gtk.main()

	if __name__ == "__main__":		if __name__ == "__main__":
	main()		main()


	A HildonTouchSelector with a single text column is created in this program using the following convenience constructor.		A HildonTouchSelector with a single text column is created in this program using the following convenience constructor.

	hildon.TouchSelector(text = True)		hildon.TouchSelector(text = True)


	To add text to a selector created by calling the constructor above, use the function.		To add text to a selector created by calling the constructor above, use the function.

	def append(self, text):		def append(self, text):

	Alternatively, you can use <code>prepend_text()</code> or <code>insert_text()</code> to add text to the selector in different positions.		Alternatively, you can use <code>prepend_text()</code> or <code>insert_text()</code> to add text to the selector in different positions.
Line 84:		Line 83:
	You can set the desired selection with the function. In the example, the mode was set to allow multiple selection.		You can set the desired selection with the function. In the example, the mode was set to allow multiple selection.

	def set_column_selection_mode(self, mode):		def set_column_selection_mode(self, mode):

	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 94:		Line 93:
	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:

	def user_function (selector):		def user_function (selector):

	===Custom columns===		===Custom columns===

← Older revision		Revision as of 13:18, 20 October 2009
Line 148:		Line 148:

	# Add the column to the selector		# Add the column to the selector
	column = selector.append_column(store_icons, renderer)		column = selector.append_column(store_icons, renderer, stock_id = 0)

	# Set the selection mode		# Set the selection mode
Line 202:		Line 202:
	Finally, we create and append the new column, using the model and renderer previously created.		Finally, we create and append the new column, using the model and renderer previously created.

	column = selector.append_column(store_icons, renderer)		column = selector.append_column(store_icons, renderer, stock_id = 0)

	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.		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.

← Older revision		Revision as of 22:08, 19 October 2009
Line 135:		Line 135:

	# Create model to store selector's items		# Create model to store selector's items
	store_icons = gtk.ListStore(gobject.TYPE_STRING);		store_icons = gtk.ListStore(gobject.TYPE_STRING)

	# Populate model		# Populate model
Line 187:		Line 187:
	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.		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.

	store_icons = gtk.ListStore(~~G_TYPE_STRING~~);		store_icons = gtk.ListStore(gobject.TYPE_STRING)

← Older revision		Revision as of 22:06, 19 October 2009
Line 163:		Line 163:

	def main():		def main():
	program = hildon.~~hildon_program_get_instance~~()		program = hildon.Program.get_instance()
	gtk.set_application_name("hildon-touch-selector example program")		gtk.set_application_name("hildon-touch-selector example program")

← Older revision		Revision as of 20:26, 19 October 2009
Line 98:		Line 98:
	===Custom columns===		===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 ~~was~~ used. However, you can also set other type of 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.

	~~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.		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 GtkTreeview. Thus, you can use the GtkCellRenderers available in GTK+ to display the data on each cell.

	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.		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.

	def append_column(self, model, cell_renderer~~, ...~~):		def append_column(self, model, cell_renderer):

	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~~.		This functions adds a new column to the widget whose data is obtained from the passed model. A GtkCellRenderer is also necessary.

	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.		This function basically adds a GtkTreeView to the widget. For more information about how GtkTreeviews works, see [http://library.gnome.org/devel/pygtk/stable/class-gtktreeview.html GTK+ widgets] before.
	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~~.		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'''		'''Example 6.2. Example of a selector with a custom column'''
Line 148:		Line 148:

	# Add the column to the selector		# Add the column to the selector
	~~# FIXME: bug 4646~~		column = selector.append_column(store_icons, renderer)
	#column = selector.append_column(store_icons, renderer~~, "stock-id", 0~~)

	# Set the selection mode		# Set the selection mode
Line 177:		Line 176:

	window.show_all()		window.show_all()

	gtk.main()		gtk.main()

Line 203:		Line 202:
	Finally, we create and append the new column, using the model and renderer previously created.		Finally, we create and append the new column, using the model and renderer previously created.

	~~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.~~		column = selector.append_column(store_icons, renderer)

	column = selector.append_column(store_icons, renderer~~, "stock-id", 0~~)

	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.		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.

PyMaemo/UI tutorial/Data selection - Revision history

imported_>amigadave: add C documentation link

imported_>amigadave: tidy

imported_>amigadave: use and , still needs tidying

imported_>amigadave: Category:Python

imported_>danielwilms: PyMaemo/UITutorial/Data selection moved to PyMaemo/UI tutorial/Data selection

imported_>lizardo: /* Text Columns Example */

200.184.118.130: /* Custom columns */

200.184.118.130: /* Custom columns */

200.184.118.130: /* Custom columns */

200.184.118.130: /* Custom columns */

imported_>amigadave: use and `, still needs tidying`