Artificial intelligence in the post-deep learning era
Hands On The New Hildon
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
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
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
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
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
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
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
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
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