An introduction to the new widgets of Hildon 2.2 and some advices on how to port desktop applications to Maemo Fremantle.

1. Hands on the New Hildon
Gran Canaria Desktop Summit (GUADEC @ Paradise)
Joaquim Rocha
jrocha@igalia.com

2. whoami
● GTK+ && Hildon && Python developer
● Igalian since late 2008
● Portuguese since 1985
.. and lots of other interesting things :)
GCDS · Joaquim Rocha · jrocha@igalia.com 2

3. Hildon 2.2
● New finger-friendly widgets
● New UI philosophy
– Deprecated widgets
– Porting means “adapting”, not “recompiling”
GCDS · Joaquim Rocha · jrocha@igalia.com 3

4. Root view / Sub view philosophy
● Applications are stacks of windows
● The root window is the base
– E.g.: List of emails
● Actions that break with what the user is doing
should be done in a sub view
– E.g.: Writing an email
GCDS · Joaquim Rocha · jrocha@igalia.com 4

5. Root view / Sub view philosophy: Example
List of emails Reading email
(Root View) (Sub View)
GCDS · Joaquim Rocha · jrocha@igalia.com 5

6. Stacks of Windows
● Use HildonStackableWindow
● All you (normally) need to worry about is to
show the windows, yes, with gtk_widget_show
GCDS · Joaquim Rocha · jrocha@igalia.com 6

7. Stacks of Windows: Code
rootview = hildon_stackable_window_new ();
...
gtk_widget_show_all (rootview);
subview = hildon_stackable_window_new ();
...
gtk_widget_show_all (subview);
GCDS · Joaquim Rocha · jrocha@igalia.com 7

8. Root View/Sub View Demo
Stock items
GCDS · Joaquim Rocha · jrocha@igalia.com 8

9. Root View/Sub View : How can it be done
● Initialize a GtkTreeView using
hildon_gtk_tree_view_new
● Use it the GTK+ way you're used to
tree_view = hildon_gtk_tree_view_new (HILDON_UI_NORMAL_MODE);
GCDS · Joaquim Rocha · jrocha@igalia.com 9

10. Tree Views Code: UI Mode
Defines the way the user interacts with the items
in a list
– Normal Mode: Tapping on a widget will
behave as it would normally do, for example,
triggering an action
– Edit Mode: Special mode where a range of
items can be selected
GCDS · Joaquim Rocha · jrocha@igalia.com 10

11. Pannable Area

12. Pannable Area
● A magical finger-friendly scrolling widget
● Use it to display widgets that don't fit in the
visible area
● It's a container! Just add your contents
GCDS · Joaquim Rocha · jrocha@igalia.com 12

13. Pannable Area: Demo
Eye of GNOME:
Desktop properties VS Maemo Properties
GCDS · Joaquim Rocha · jrocha@igalia.com 13

14. Pannable Area: Code
contents = hildon_pannable_area_new ();
hildon_pannable_area_add_with_viewport (
HILDON_PANNABLE_AREA (contents),
main_contents);
GCDS · Joaquim Rocha · jrocha@igalia.com 14

15. Application Menu

16. Application Menu
One level! No more submenus,
subsubsubsubmenus, …
– Small number of items
– Allows filters
GCDS · Joaquim Rocha · jrocha@igalia.com 16

17. Application Menu: Filter
Should NOT change contents but
how contents are presented
GCDS · Joaquim Rocha · jrocha@igalia.com 17

18. Application Menu: Don't stuff it
● How to reduce the number of items
● DRY
● Put only what matters
Eye of GNOME Demo:
Desktop menu VS Maemo App. Menu
GCDS · Joaquim Rocha · jrocha@igalia.com 18

19. Application Menu: Code
menu = hildon_app_menu_new ();
filter = hildon_gtk_radio_button_new (HILDON_SIZE_FINGER_HEIGHT,
NULL);
gtk_button_set_label (GTK_BUTTON (filter), "a-Z");
gtk_toggle_button_set_mode (GTK_TOGGLE_BUTTON (filter), FALSE);
hildon_app_menu_add_filter (HILDON_APP_MENU (menu),
GTK_BUTTON (filter));
GCDS · Joaquim Rocha · jrocha@igalia.com 19

20. Application Menu: Code (cont.)
filter = hildon_gtk_radio_button_new_from_widget (
HILDON_SIZE_FINGER_HEIGHT,
GTK_RADIO_BUTTON (other_filter));
gtk_button_set_label (GTK_BUTTON (filter1), "z-A");
gtk_toggle_button_set_mode (GTK_TOGGLE_BUTTON (filter1), FALSE);
hildon_app_menu_add_filter (HILDON_APP_MENU (menu),
GTK_BUTTON (filter));
GCDS · Joaquim Rocha · jrocha@igalia.com 20

21. Application Menu: Code (cont. 2)
item = hildon_gtk_button_new (HILDON_SIZE_FINGER_HEIGHT);
gtk_button_set_label (GTK_BUTTON (item), "Foo Bar");
hildon_app_menu_append (HILDON_APP_MENU (menu), GTK_BUTTON(item));
...
hildon_window_set_app_menu (HILDON_WINDOW (main_window),
HILDON_APP_MENU (menu));
GCDS · Joaquim Rocha · jrocha@igalia.com 21

22. Buttons Differences

23. Buttons Differences
● You have GTK+ buttons and Hildon buttons
● Hildon buttons have a title and a value
● GTK+ buttons are the same, just chubbier
[1]
GCDS · Joaquim Rocha · jrocha@igalia.com 23

24. GTK+ Button
Hildon provides convenience functions to create
hildonized GTK+ buttons
button = hildon_gtk_button_new (HILDON_SIZE_THUMB_HEIGHT);
GCDS · Joaquim Rocha · jrocha@igalia.com 24

25. Hildon Button
● Title: E.g. a property's title
● Value: E.g. a property's state
● The arrangement can be vertical or horizontal
GCDS · Joaquim Rocha · jrocha@igalia.com 25

26. Hildon Button: Code
button = hildon_button_new_with_text (HILDON_SIZE_FINGER_HEIGHT,
HILDON_BUTTON_ARRANGEMENT_VERTICAL,
"My size is",
"Finger!");
GCDS · Joaquim Rocha · jrocha@igalia.com 26

27. Picker Button
● A Hildon button that will show a picker dialog:
– Allows the user to choose an item from a
TouchSelector
● Use it instead a combo box or a set of radio
buttons
GCDS · Joaquim Rocha · jrocha@igalia.com 27

28. Picker Button
button = hildon_picker_button_new (HILDON_SIZE_FINGER_HEIGHT,
HILDON_BUTTON_ARRANGEMENT_VERTICAL);
hildon_button_set_title (HILDON_BUTTON (button),
"I think GCDS is:");
GCDS · Joaquim Rocha · jrocha@igalia.com 28

29. Picker Button: Creating the TouchSelector
selector = hildon_touch_selector_new_text ();
hildon_touch_selector_append_text (
HILDON_TOUCH_SELECTOR (selector),
"Awesome");
hildon_touch_selector_append_text (
HILDON_TOUCH_SELECTOR (selector),
"Great");
...
GCDS · Joaquim Rocha · jrocha@igalia.com 29

30. Picker Button: Creating the TouchSelector
hildon_picker_button_set_selector (HILDON_PICKER_BUTTON (button),
HILDON_TOUCH_SELECTOR (selector));
GCDS · Joaquim Rocha · jrocha@igalia.com 30

31. ...so much
code it
makes my
eyes hurt!
GCDS · Joaquim Rocha · jrocha@igalia.com 31 [2]

32. Specialized Picker Buttons
Just to make your life easier:
HildonDateButton
HildonTimeButton
GCDS · Joaquim Rocha · jrocha@igalia.com 32

33. Date and Time Button: Code
date_button = hildon_date_button_new (HILDON_SIZE_FINGER_HEIGHT,
HILDON_BUTTON_ARRANGEMENT_VERTICAL);
time_button = hildon_time_button_new (HILDON_SIZE_FINGER_HEIGHT,
HILDON_BUTTON_ARRANGEMENT_HORIZONTAL);
GCDS · Joaquim Rocha · jrocha@igalia.com 33

34. Checkbutton: Code
Use it like a check box
check_button = hildon_check_button_new(HILDON_SIZE_FINGER_HEIGHT);
GCDS · Joaquim Rocha · jrocha@igalia.com 34

35. Text Input Differences

36. Text Input Differences
● HildonEntry and HildonTextView allow to set a
placeholder text
● HildonTextView expands according to its
contents
● Use placeholders as if they were tooltips
GCDS · Joaquim Rocha · jrocha@igalia.com 36

37. Text Input Differences: Code
name = hildon_entry_new (HILDON_SIZE_FINGER_HEIGHT);
hildon_entry_set_placeholder (HILDON_ENTRY (name),
"Your full name");
info = hildon_text_view_new ();
hildon_text_view_set_placeholder (HILDON_TEXT_VIEW (info),
"Some info about you");
GCDS · Joaquim Rocha · jrocha@igalia.com 37

38. Where to go from here?
● Hildon Tutorial:
● http://maemo.org/api_refs/5.0/beta/tutorial/html/
● Hildon HIG:
● http://maemo.org/api_refs/5.0/beta/hig/html/
● Hildon API reference:
● http://maemo.org/api_refs/5.0/beta/hildon/
GCDS · Joaquim Rocha · jrocha@igalia.com 38

39. And That's All Folks
Questions?
GCDS · Joaquim Rocha · jrocha@igalia.com 39

40. Thank you!
[1] http://www.flickr.com/photos/lilcrabbygal/484635049/
[2] http://farm4.static.flickr.com/3061/2924390962_61dc14d42c.jpg?v=0