PyMaemo/UI tutorial/Data selection - Revision history

amigadave: add C documentation link

amigadave — Thu, 07 Oct 2010 11:34:33 GMT

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.

amigadave: tidy

amigadave — Wed, 23 Jun 2010 08:25:50 GMT

tidy

Show changes

amigadave: use and `, still needs tidying`


amigadave — Tue, 22 Jun 2010 15:28:48 GMT
use <source> and <code>, still needs tidying
Show changes



amigadave: Category:Python
amigadave — Thu, 11 Feb 2010 15:54:37 GMT
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]]




danielwilms: PyMaemo/UITutorial/Data selection moved to PyMaemo/UI tutorial/Data selection
danielwilms — Mon, 01 Feb 2010 11:13:55 GMT
PyMaemo/UITutorial/Data selection moved to PyMaemo/UI tutorial/Data selection

		
		
		
		
		
		
		← Older revision
		Revision as of 11:13, 1 February 2010
		
		



lizardo: /* Text Columns Example */
lizardo — Tue, 12 Jan 2010 15:45:05 GMT
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 */
200.184.118.130 — Tue, 20 Oct 2009 13:18:40 GMT
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 */
200.184.118.130 — Mon, 19 Oct 2009 22:08:12 GMT
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 */
200.184.118.130 — Mon, 19 Oct 2009 22:06:35 GMT
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 */
200.184.118.130 — Mon, 19 Oct 2009 20:26:53 GMT
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 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

amigadave: add C documentation link

amigadave: tidy

amigadave: use and , still needs tidying

amigadave: Category:Python

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

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 */

amigadave: use and `, still needs tidying`