Hands On The New Hildon

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

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

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

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

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

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

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

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

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

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

Pannable Area

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

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

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

Application Menu

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

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

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

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

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

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

Buttons Differences

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

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

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

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

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

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

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

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

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

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

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

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

Text Input Differences

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

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

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

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

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

http://maemo.org	179
http://www.joaquimrocha.com	65
http://www.slideshare.net	5
http://209.85.227.132	2
http://209.85.229.132	1

Hands On The New Hildon

by Joaquim Rocha on Jul 09, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 252

Statistics

Hands On The New Hildon — Presentation Transcript