Hands On The New Hildon

Hands on the New Hildon

Gran Canaria Desktop Summit (GUADEC @ Paradise)

Joaquim Rochajrocha@igalia.com

GCDS · Joaquim Rocha · jrocha@igalia.com 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

● 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

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

● You have GTK+ buttons and Hildon buttons● Hildon buttons have a title and a value● GTK+ buttons are the same, just chubbier

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!

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

● 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/

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

Hands On The New Hildon

Technology

New power in your hands

EarthCube All Hands Meeting New Interest Group: EarthCube Data Science Publications

Hildon 2.2: the Hildon toolkit for Fremantle

Lessons Learned from I Expect You To Die: New Puzzles, New Hands

hands on - TAYEBtayeb.fr/photo/docs/Canon.camera.hacking_IEEE.Spectrum...hands on CAMERA HACKING New firmware allows Canon cameras to perform some neat tricks BACK IN THE DAY, hands-on

NCV 3 New Venture Creation Hands-On Support Slide Show - Module1

Mayan Hands Brochure, New World Crafts

DK 1.1 New Features Hands On Tutorial Manual

Hands-on Minds-on Activities that Address New and Relocated TEKS

New Jersey 4-H Head + Heart + Hands + Health Leader ...nj4h.rutgers.edu/volunteering/lts/3.3_Presentations-PowerPoint.pdf · Leader Training Series New Jersey 4-H Head + Heart + Hands

Hands-On Lab: Leverage the New CA Spectrum® Web Client

My hands with the new museum of my city

Biofreeze New Product Overview Pain Relieving Wipes & Hands-Free Applicator

Program Innovation to Drive New Membership Top Hands 2015

Why Hildon?...finest establishments all over the world. In 2016, a £5.5 million investment in cutting edge technology into our new manufacturing facility has allowed us to stay ahead

Adding momentum ‘The new India’ is in good hands to

Usabilla NEW All Hands

The New OBIEE 11g A Quick Start Guide Hands-On

Hildon User Interface Style Guide Summary

Local 1505 Hands on Magazine New York