Exercise 3 : User Interface Basics(gtk, hildon)

In this Exercise we will cover few basics of UI development.

Imports

  • import gtk
  • import hildon

Windows

  • Create and show window
  • gtk.Window(), hildon.Window(), hildon.StackableWindow()

gtk.Window()

  window = gtk.Window(gtk.WINDOW_TOPLEVEL)
  window.show()

hildon.Window()

  window = hildon.Window()
  window.show()
  

hildon.StackableWindow() (recommended to use, it makes life lot easier)

  window = hildon.StackableWindow()
  window.show()

show window

  • difference between window.show() and window.show_all() ?

Label, Button and Entry

Label

  label = gtk.Label("Exercise 3")
  window.add(label)
  

Button

  button = hildon.GtkButton(gtk.HILDON_SIZE_AUTO)
  button.set_label(button1)
  
  # Attach callback to clicked signal
  button.connect("clicked", some_callback, arg0, arg1, .....)
  
  window.add(button)
  

Entry (Text boxes are called Entry)

  entry = hildon.Entry(gtk.HILDON_SIZE_AUTO)
  entry.set_placeholder("Write something to continue")
  window.add(entry)
  

Containers

  • HBox and VBox

HBox : creates horizontal boxes

  hbox = gtk.HBox(False, 0)
  window.add(hbox)

VBox : creates Vertical boxes

  vbox = gtk.VBox(False, 0)
  window.add(vbox) 
  
  

inserting label or button on VBox or HBox

  label = gtk.Label("Label1")
  button = gtk.Button("Button1")    
  vbox = gtk.VBox(False, 0)
  vbox.pack_start(label, True, True, 0)	
  vbox.pack_start(button, True, True, 0)
  window.add(vbox) 
  

Notebook:

  #Notebook is not a container but it is used 
  #in a dialog, It still can contain labels, buttons, entrys, etc.
  # Create a notebook
  notebook = gtk.Notebook() 
  # Create widgets to palce into the notebook's pages
  label1 = gtk.Label("Page 1")
  label2 = gtk.Label("Page 2") 
  entry = hildon.Entry(gtk.HILDON_SIZE_AUTO)
  entry.set_placeholder("Write something to continue") 
  label4 = gtk.Label("Page 4") 
  # Append pages
  notebook.append_page(label_1, None)
  notebook.append_page(label_2, None)
  notebook.append_page(entry_3, None)
  notebook.append_page(label_4, None)    
  #notebook has a "switch-page" signal
  # Set a handler for "switch-page" signal
  notebook.connect("switch-page", on_page_switch, arg0, arg1, ...)    
  window.add(notebook)
  window.show_all()

PannableArea PannableArea:

  #PannableArea is also not a container but it is used 
  #in a dialog, It still can contain labels, buttons, entrys, treeviews etc.  
  area = hildon.PannableArea()    
  area.add(tree_view)#treeview here is a hildon.GtkTreeView
  window.add(area) 

Callbacks (How it is defined and called)

Defining a callback

   def button_clicked( string, label):           	  	
  	label.set_text(string)
        if string == "Exit":
	   gtk.main_quit()
  	print >>sys.stderr, "Button (%s) clicked" % string
  

Calling from button

      #.connect calls
      button.connect("clicked", button_clicked, "Save", label)
  • list type menu and app menu

list type menu

        #example of list type menu is File menu under which 
        #open, save and exit are menuItems 
        #menu items have 'activate' signals
        menu = gtk.Menu()  
   	menuItemOpen = gtk.MenuItem("Open")
        menuItemOpen.connect_object("activate", menu_item_activated, "Open", label)	
   	menuItemSave = gtk.MenuItem("Save")
        menuItemSave.connect_object("activate", menu_item_activated, "Save", label)
   	menuItemSeparator = gtk.SeparatorMenuItem()
   	menuItemExit = gtk.MenuItem("Exit")
        menuItemExit.connect_object("activate", menu_item_activated, "Exit", label)  
   	menu.append(menuItemOpen)
   	menu.append(menuItemSave)
   	menu.append(menuItemSeparator)
   	menu.append(menuItemExit)  
   	menuItemFile = gtk.MenuItem("File")
   	menuItemFile.set_submenu(menu)  	
   	menu_bar = gtk.MenuBar()
   	menu_bar.append(menuItemFile)
        window.add(menu_bar)
   

callback for menu item activated

    def menu_item_activated( string, label):    	  	
  	label.set_text(string)
        if string == "Exit":
	    gtk.main_quit()
  	print >>sys.stderr, "menu item clicked: %s" % string
  

app menu

      menu = hildon.AppMenu()
      collection = ['Menu Button 1','Menu Button 2','Menu Button 3','Menu Button 4']
      for i in xrange(0, 4):
          # Create menu entries
          button = hildon.GtkButton(gtk.HILDON_SIZE_AUTO)
          command_id = "Menu command %d" % i
          button.set_label(collection[i]) 
          # Attach callback to clicked signal
          button.connect("clicked", menu_button_clicked, label) 
          # Add entry to the view menu
          menu.append(button) 
      # Create filters
      button = hildon.GtkRadioButton(gtk.HILDON_SIZE_AUTO, None)
      button.set_label("filter one")
      button.connect("clicked", menu_button_clicked, label)
      menu.add_filter(button)
      button.set_mode(False) 
      button = hildon.GtkRadioButton(gtk.HILDON_SIZE_AUTO, button)
      button.set_label("filter two")
      button.connect("clicked", menu_button_clicked, label)
      menu.add_filter(button)
      button.set_mode(False) 
      menu.show_all()

Dialogs

  • FileChooserDialog
  • LoginDialog
  • YesNo Dialog

FileChooserDialog

dialog = hildon.FileChooserDialog(hildon.Window(), action=gtk.FILE_CHOOSER_ACTION_OPEN)
dialog.show_all()

LoginDialog

      parent = hildon.WindowStack.get_default().peek()
      dialog = hildon.LoginDialog(parent)
      dialog.set_message("Authentication required")           
      response = dialog.run()
      txtlogin = dialog.get_username()
      txtpassword = dialog.get_password()
      dialog.show_all()
      if response == gtk.RESPONSE_OK:
          if txtlogin == txtpassword:
          
              label.set_text("username and password matches")
              dialog.destroy()
          
         else:
          
             label.set_text("Invalid login")
             dialog.destroy()

YesNo dialog

   dialog = gtk.Dialog("Yes or No?", None, 0,(gtk.STOCK_CANCEL, gtk.RESPONSE_CANCEL,gtk.STOCK_NO, gtk.RESPONSE_NO,gtk.STOCK_YES, gtk.RESPONSE_YES))
   response = dialog.run()
   dialog.destroy()
   while gtk.events_pending():
       gtk.main_iteration(False)
   if response == gtk.RESPONSE_YES:
       label.set_text("Its a Big Yes!")        
   elif response == gtk.RESPONSE_NO:
       label.set_text("Its a Big No!")   
   dialog.show_all()

WizardDialog

      # Create wizard dialog
      dialog = hildon.WizardDialog(None, "Wizard", notebook) 
      # Notebook is created earlier, Set a handler for "switch-page" signal
      notebook.connect("switch-page", on_page_switch, dialog) 
      # Set a function to decide if user can go to next page
      dialog.set_forward_page_func(some_page_func) 
      dialog.show_all()
      dialog.run()
  

Toolbars

  • Edit toolbar
  • find toolbar
  • gtk toolbar

Edit Toolbar

  # Create a new edit toolbar
  toolbar = hildon.EditToolbar("Choose items to delete", "Delete")
  # Add toolbar to the window
  window.set_edit_toolbar(toolbar)
  toolbar.connect("button-clicked", delete_button_clicked, tree_view)
   

Date Picker

# Create a date picker
datepicker_button = hildon.DateButton(gtk.HILDON_SIZE_AUTO,hildon.BUTTON_ARRANGEMENT_VERTICAL) 
# Set a title to the button
datepicker_button.set_title("Date Picker")
window.add(datepicker_button)

More UI basics coming

  • Toolbars
  • Navigation
  • Data selection
  • Controls
  • etc.

Other

Lot more stuffs can be explored and you have a vast internet.

Tutorial

We will create a UI app in the Exercise class to learn the basics.

starter skeleton can be downloaded from here : Exercise_3_skeleton

The Solution for Exercise 3 is Here : Exercise 3 solution file

Important sources and references