• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Hands On The New Hildon
 

Hands On The New Hildon

on

  • 3,204 views

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

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

Statistics

Views

Total Views
3,204
Views on SlideShare
2,943
Embed Views
261

Actions

Likes
0
Downloads
18
Comments
0

5 Embeds 261

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

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Hands On The New Hildon Hands On The New Hildon Presentation Transcript

    • 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