SlideShare a Scribd company logo
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

More Related Content

Similar to Hands On The New Hildon

Hildon 2.2: the Hildon toolkit for Fremantle
Hildon 2.2: the Hildon toolkit for FremantleHildon 2.2: the Hildon toolkit for Fremantle
Hildon 2.2: the Hildon toolkit for Fremantle
Alberto Garcia
 
201801 SER332 Lecture 04
201801 SER332 Lecture 04201801 SER332 Lecture 04
201801 SER332 Lecture 04
Javier Gonzalez-Sanchez
 
DrTAD Blender Tutorial Animation Basics - Transforming 3D geometry with shape...
DrTAD Blender Tutorial Animation Basics - Transforming 3D geometry with shape...DrTAD Blender Tutorial Animation Basics - Transforming 3D geometry with shape...
DrTAD Blender Tutorial Animation Basics - Transforming 3D geometry with shape...
FIDE Master Tihomir Dovramadjiev PhD
 
DrTAD Blender Tutorial Animation Basics - Keys - Movement
DrTAD Blender Tutorial Animation Basics - Keys - MovementDrTAD Blender Tutorial Animation Basics - Keys - Movement
DrTAD Blender Tutorial Animation Basics - Keys - Movement
FIDE Master Tihomir Dovramadjiev PhD
 
DrTAD Blender Tutorial Animation Basics - Morphing 2 objects with Shrinkwrap ...
DrTAD Blender Tutorial Animation Basics - Morphing 2 objects with Shrinkwrap ...DrTAD Blender Tutorial Animation Basics - Morphing 2 objects with Shrinkwrap ...
DrTAD Blender Tutorial Animation Basics - Morphing 2 objects with Shrinkwrap ...
FIDE Master Tihomir Dovramadjiev PhD
 
Graphics Programming OpenGL & GLUT in Code::Blocks
Graphics Programming OpenGL & GLUT in Code::BlocksGraphics Programming OpenGL & GLUT in Code::Blocks
Graphics Programming OpenGL & GLUT in Code::Blocks
Budditha Hettige
 
Multitouching your apps
Multitouching your appsMultitouching your apps
Multitouching your apps
FSCONS
 

Similar to Hands On The New Hildon (7)

Hildon 2.2: the Hildon toolkit for Fremantle
Hildon 2.2: the Hildon toolkit for FremantleHildon 2.2: the Hildon toolkit for Fremantle
Hildon 2.2: the Hildon toolkit for Fremantle
 
201801 SER332 Lecture 04
201801 SER332 Lecture 04201801 SER332 Lecture 04
201801 SER332 Lecture 04
 
DrTAD Blender Tutorial Animation Basics - Transforming 3D geometry with shape...
DrTAD Blender Tutorial Animation Basics - Transforming 3D geometry with shape...DrTAD Blender Tutorial Animation Basics - Transforming 3D geometry with shape...
DrTAD Blender Tutorial Animation Basics - Transforming 3D geometry with shape...
 
DrTAD Blender Tutorial Animation Basics - Keys - Movement
DrTAD Blender Tutorial Animation Basics - Keys - MovementDrTAD Blender Tutorial Animation Basics - Keys - Movement
DrTAD Blender Tutorial Animation Basics - Keys - Movement
 
DrTAD Blender Tutorial Animation Basics - Morphing 2 objects with Shrinkwrap ...
DrTAD Blender Tutorial Animation Basics - Morphing 2 objects with Shrinkwrap ...DrTAD Blender Tutorial Animation Basics - Morphing 2 objects with Shrinkwrap ...
DrTAD Blender Tutorial Animation Basics - Morphing 2 objects with Shrinkwrap ...
 
Graphics Programming OpenGL & GLUT in Code::Blocks
Graphics Programming OpenGL & GLUT in Code::BlocksGraphics Programming OpenGL & GLUT in Code::Blocks
Graphics Programming OpenGL & GLUT in Code::Blocks
 
Multitouching your apps
Multitouching your appsMultitouching your apps
Multitouching your apps
 

Recently uploaded

GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Neo4j
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Zilliz
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
Rohit Gautam
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Vladimir Iglovikov, Ph.D.
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 

Recently uploaded (20)

GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 

Hands On The New Hildon

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