Hands On The New Hildon

Hands on the New Hildon

Gran Canaria Desktop Summit (GUADEC @ Paradise)

Joaquim [email protected]

GCDS · Joaquim Rocha · [email protected] 2

whoami

● GTK+ && Hildon && Python developer

● Igalian since late 2008

● Portuguese since 1985

.. and lots of other interesting things :)


Hildon 2.2

● New finger-friendly widgets

● New UI philosophy– Deprecated widgets– Porting means “adapting”, not “recompiling”


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


Root view / Sub view philosophy: Example

List of emails Reading email (Root View) (Sub View)


Stacks of Windows

● Use HildonStackableWindow

● All you (normally) need to worry about is to show the windows, yes, with gtk_widget_show


Stacks of Windows: Code

rootview = hildon_stackable_window_new ();...gtk_widget_show_all (rootview);

subview = hildon_stackable_window_new ();...gtk_widget_show_all (subview);


Root View/Sub View Demo

Stock items


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);


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

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


Pannable Area: Demo

Eye of GNOME:

Desktop properties VS Maemo Properties


Pannable Area: Code

contents = hildon_pannable_area_new ();

hildon_pannable_area_add_with_viewport (HILDON_PANNABLE_AREA (contents),main_contents);

Application Menu


Application Menu

One level! No more submenus, subsubsubsubmenus, …

– Small number of items– Allows filters


Application Menu: Filter

Should NOT change contents but how contents are presented


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


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));


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));


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));

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]


GTK+ Button

Hildon provides convenience functions to create hildonized GTK+ buttons

button = hildon_gtk_button_new (HILDON_SIZE_THUMB_HEIGHT);


Hildon Button

● Title: E.g. a property's title

● Value: E.g. a property's state

● The arrangement can be vertical or horizontal


Hildon Button: Code

button = hildon_button_new_with_text (HILDON_SIZE_FINGER_HEIGHT, HILDON_BUTTON_ARRANGEMENT_VERTICAL,

"My size is", "Finger!");


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


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:");


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");

...


Picker Button: Creating the TouchSelector

hildon_picker_button_set_selector (HILDON_PICKER_BUTTON (button), HILDON_TOUCH_SELECTOR (selector));


...so much code itmakes my eyes hurt!

[2]


Specialized Picker Buttons

Just to make your life easier:

HildonDateButton

HildonTimeButton


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);


Checkbutton: Code

Use it like a check box

check_button = hildon_check_button_new(HILDON_SIZE_FINGER_HEIGHT);

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


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");


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/

http://maemo.org/api_refs/5.0/beta/tutorial/html/

http://maemo.org/api_refs/5.0/beta/hig/html/

http://maemo.org/api_refs/5.0/beta/hildon/


And That's All Folks

Questions?

Thank you!

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

Technology

Hands On The New Hildon