Editing PyMaemo/UI tutorial/Navigation

{{main|Legacy Maemo 5 Documentation/Graphical UI Tutorial/Navigation}}

To develop Hildon user interfaces, you can use any container widget provided by GTK+. For more details, [http://www.pygtk.org/pygtk2tutorial/index.html PyGTK 2.0 Tutorial] includes a good introduction to this topic.

Apart from supporting those containers, the Hildon framework also provides a new container widget called <code>HildonPannableArea</code>, a scrolling widget designed for touch screens. This chapter will cover all that is necessary to properly use this widget.

<code>HildonPannableArea</code> is used to create an area with another widget inside which will be accessible regardless of the size using the touchscreen to scroll it. You may insert any type of widget into a pannable area, and it will be accessible by dragging on the area with the fingers.

     add_with_viewport(self, child)

That is a convenience function used to add a child to a <code>GtkViewport</code>, and add the viewport to the pannable area.

Widgets that have native scrolling should be added directly inside a pannable area. For example, widgets such as <code>GtkTextView</code>, <code>GtkTreeView</code>, <code>GtkIconView</code> and <code>GtkLayout</code> should be added by calling <code>add()</code>. Otherwise, panning could not work properly.

import gtk

import hildon

 

def create_table():

    # create a table of 10 by 10 squares.  

    table = gtk.Table (10, 10, False)

    # set the spacing to 10 on x and 10 on y

    table.set_row_spacings(10)

 

 

    # this simply creates a grid of toggle buttons on the table

    # to demonstrate the scrolled window.

    for i in range(10):

            table.attach(button, i, i+1, j, j+1)

 

 

 

 

 

    pannable_area = hildon.PannableArea()

To see all the buttons, users can scroll with the fingers. In this example, horizontal and vertical panning are activated as that is needed to allow users to be able to interact both all the widgets. The property <code>“mov-mode”</code> controls if the area can scroll horizontally, vertically (default value) or both, using <code>hildon.MOVEMENT_MODE_HORIZ</code>, <code>hildon.MOVEMENT_MODE_VERT</code> or <code>hildon.MOVEMENT_MODE_BOTH</code>, respectively.

For example, the first of the functions changes the current position on the pannable area to ensure position (x,y) is visible. The movement is a quick jump. The second function performs a smooth scroll towards the selected position.

Here is a modified version of the previous example. The pannable area is packed into an <code>gtk.VBox</code> and a new button is also added to navigate to the last clicked button.

# Example 5.2, "Example of a pannable area and a "jump-to" button"

# Callabck to set last clicked button

def go_to_last_clicked(button, pannable_area):

     pannable_area.scroll_to_child(last_clicked_button)

     # create a table of 10 by 10 squares.

     table = gtk.Table (10, 10, False)

     # set the spacing to 10 on x and 10 on y

     table.set_row_spacings(10)

 

     # this simply creates a grid of toggle buttons on the table

    # to demonstrate the scrolled window.

     for i in range(10):

         for j in range(10):

            data_buffer = "button (%d,%d)\n" % (i, j)

            button.connect("clicked", clicked)

            table.attach(button, i, i+1, j, j+1)

    return table

 

def app_quit(widget, data=None):  

    gtk.main_quit()

def main():

    window = hildon.StackableWindow()

    window.connect("destroy", app_quit)

     pannable_area.set_property("mov-mode", hildon.MOVEMENT_MODE_BOTH)

    button = gtk.Button("Go to last clicked button")

    button.connect("clicked", go_to_last_clicked, pannable_area)

 

     table = create_table()

 

     # pack the table into the scrolled window

    pannable_area.add_with_viewport(table)