Hands On The New Hildon

1,674 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,674
On SlideShare
0
From Embeds
0
Number of Embeds
265
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hands On The New Hildon

  1. 1. Hands on the New Hildon Gran Canaria Desktop Summit (GUADEC @ Paradise) Joaquim Rocha jrocha@igalia.com
  2. 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. 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. 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. 5. Root view / Sub view philosophy: Example List of emails Reading email (Root View) (Sub View) GCDS · Joaquim Rocha · jrocha@igalia.com 5
  6. 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. 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. 8. Root View/Sub View Demo Stock items GCDS · Joaquim Rocha · jrocha@igalia.com 8
  9. 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. 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. 11. Pannable Area
  12. 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. 13. Pannable Area: Demo Eye of GNOME: Desktop properties VS Maemo Properties GCDS · Joaquim Rocha · jrocha@igalia.com 13
  14. 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. 15. Application Menu
  16. 16. Application Menu One level! No more submenus, subsubsubsubmenus, … – Small number of items – Allows filters GCDS · Joaquim Rocha · jrocha@igalia.com 16
  17. 17. Application Menu: Filter Should NOT change contents but how contents are presented GCDS · Joaquim Rocha · jrocha@igalia.com 17
  18. 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. 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. 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. 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. 22. Buttons Differences
  23. 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. 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. 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. 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. 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. 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. 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. 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. 31. ...so much code it makes my eyes hurt! GCDS · Joaquim Rocha · jrocha@igalia.com 31 [2]
  32. 32. Specialized Picker Buttons Just to make your life easier: HildonDateButton HildonTimeButton GCDS · Joaquim Rocha · jrocha@igalia.com 32
  33. 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. 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. 35. Text Input Differences
  36. 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. 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. 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. 39. And That's All Folks Questions? GCDS · Joaquim Rocha · jrocha@igalia.com 39
  40. 40. Thank you! [1] http://www.flickr.com/photos/lilcrabbygal/484635049/ [2] http://farm4.static.flickr.com/3061/2924390962_61dc14d42c.jpg?v=0

×