Editing Hildon-Extras

Warning: You are not logged in. Your IP address will be recorded in this page's edit history.
The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.
Latest revision Your text
Line 1: Line 1:
Hildon-Extras is a set of community-contributed widgets (that's GTK+ widgets, not Desktop widgets) and dialogs that can be used by application developers to provide a usable, well-balanced interface. Some of these widgets provide functionality that the "stock" [[Hildon]] widgets don't provide, and some dialogs are touch-friendly versions of existing dialogs in GTK+ and/or Hildon.
Hildon-Extras is a set of community-contributed widgets (that's GTK+ widgets, not Desktop widgets) and dialogs that can be used by application developers to provide a usable, well-balanced interface. Some of these widgets provide functionality that the "stock" [[Hildon]] widgets don't provide, and some dialogs are touch-friendly versions of existing dialogs in GTK+ and/or Hildon.
-
A more detailed documentation of the components found in Hildon-Extras (currently excluding the Qt bindings in QtHeWrapper) can be found here:
+
* http://hildon-extras.garage.maemo.org/
-
* http://hildon-extras.garage.maemo.org/reference/current/
+
==Current status==
==Current status==
-
Hildon-Extras is now [http://maemo.org/packages/view/libhildon-extras1/ released]. The components are considered quite stable at this point.
+
Hildon-Extras is very close to being released. The components are considered quite stable, but some small polishing is needed until release.
-
===Translations===
+
===Qt integration==
-
If you are interested in translating Hildon-Extras, please have a look at the Transifex project here: http://www.transifex.net/projects/p/hildon_extras/c/trunk/ There are only about 7 strings that shouldn't take you more than a minute to translate.
+
There is a class called QtHeWrapper in Hildon-Extras that is provided to developers of [[Qt]]-based apps. It is a [http://en.wikipedia.org/wiki/Wrapper_library wrapper] that provides interoperability between Hildon-Extras and [[Qt]] code. It allows developers to call Hildon-Extras easily from [[Qt]]-based software.
-
===Qt integration===
+
The QtHeWrapper currenty supports all the dialogs in Hildon-Extras. It allows for easily displaying any of the dialogs.
-
There is a class called <code>QtHeWrapper</code> in Hildon-Extras that is provided to developers of [[Qt-Maemo|Qt]]-based apps. It is a [[:wikipedia:Wrapper_library|wrapper]] that provides interoperability between Hildon-Extras and Qt code. It allows developers to call Hildon-Extras dialogs easily from Qt-based software.
+
==List of applications using Hildon-Extras==
-
<code>QtHeWrapper</code> is a static class that currenty supports all the dialogs in Hildon-Extras. It contains static methods that display a given dialog. These methods accept such parameters and they also have such return types that make them easily callable from Qt code. (Eg. <code>QColor</code> or <code>QString</code>.) No actual reference to Gtk/Hildon headers is needed in order to have it working.
+
* [http://maemo.org/downloads/product/Maemo5/conboy/ Conboy] (HeCheckButton, HeFullscreenButton, HeAboutDialog)
 +
* [http://thpinfo.com/2010/maepad/ MaePad] (HeAboutDialog, HeFullscreenButton, HeSimpleColorDialog)
 +
* [http://mrawviewer.garage.maemo.org MRAWViewer] (HeFullscreenManager at the moment, planning to add HeAboutDialog for the next release)
 +
* [https://garage.maemo.org/projects/maemo-mapper/ Mapper] (HeAboutDialog)
 +
* [http://maemo.org/downloads/product/Maemo5/custom-operator-name-widget/ Custom Operator Name Widget] (HeColorDialog)
 +
* [http://maemo.org/downloads/product/Maemo5/gpodder/ gPodder] (HeAboutDialog)
 +
* [http://maemo.org/downloads/product/Maemo5/panucci/ Panucci] (HeAboutDialog)
 +
* [http://wiki.maemo.org/Queen_BeeCon_Widget Queen BeeCon Widget] (HeFont*, He*Color*)
 +
* [https://garage.maemo.org/projects/sticky-notes/ Sticky Notes] (HeSimpleColorDialog and HeAboutDialog since version 0.2)
 +
* ''(add yours here)''
-
In order to use it, you must include <code>qt-he-wrapper.h</code> which is a C++ header and contains a class called <code>QtHeWrapper</code> with static functions:
+
==Widget Gallery==
-
* <code>showHeSimpleColorDialog</code>
+
-
* <code>showHeColorDialog</code>
+
-
* <code>showHeAboutDialog</code>
+
-
* <code>showHeFontDialog</code>
+
-
===List of applications using Hildon-Extras===
+
===HeAboutDialog===
-
* [http://maemo.org/downloads/product/Maemo5/conboy/ Conboy] (<code>HeCheckButton</code>, <code>HeFullscreenButton</code>, <code>HeAboutDialog</code>)
+
[[Image:HeAboutDialog.png|thumb|The about dialog from MaePad]]
-
* [http://thpinfo.com/2010/maepad/ MaePad] (<code>HeAboutDialog</code>, <code>HeFullscreenButton</code>, <code>HeSimpleColorDialog</code>)
+
-
* [http://mrawviewer.garage.maemo.org MRAWViewer] (<code>HeFullscreenManager</code> at the moment, planning to add <code>HeAboutDialog</code> for the next release)
+
-
* [https://garage.maemo.org/projects/maemo-mapper/ Mappero] (<code>HeAboutDialog</code>)
+
-
* [https://garage.maemo.org/projects/mapper/ Mapper] (<code>HeAboutDialog</code>)
+
-
* [http://maemo.org/downloads/product/Maemo5/custom-operator-name-widget/ Custom Operator Name Widget] (<code>HeColorDialog</code>)
+
-
* [http://maemo.org/downloads/product/Maemo5/gpodder/ gPodder] (<code>HeAboutDialog</code>)
+
-
* [http://maemo.org/downloads/product/Maemo5/panucci/ Panucci] (<code>HeAboutDialog</code>)
+
-
* [[Queen BeeCon Widget]] (<code>HeFont*</code>, <code>He*Color*</code>)
+
-
* [https://garage.maemo.org/projects/sticky-notes/ Sticky Notes] (<code>HeSimpleColorDialog</code>, <code>HeColorDialog</code>, <code>HeFontDialog</code> and <code>HeAboutDialog</code> through <code>QtHeWrapper</code>)
+
-
* [https://extcalllog.garage.maemo.org/ Extended Call Log] (<code>HeAboutDialog</code>)
+
-
* [https://webtexter.garage.maemo.org/ WebTexter] (<code>HeAboutDialog</code>)
+
-
* [https://pidgin.garage.maemo.org/ Pidgin] (<code>HeMenuView</code>)
+
-
* ''(add yours here)''
+
-
==Widget Gallery==
+
The HeAboutDialog is a replacement for GtkAboutDialog and provides a finger-friendly, good-looking about dialog with optional buttons for:
-
Here is a list of widgets currently in Hildon-Extras.
+
* Project website
 +
* Bug tracker ("Enter new bug")
 +
* Donations page
-
===Dialogs===
+
There is a [http://en.wikipedia.org/wiki/Wrapper_function wrapper] that can be used by [[Qt]]-based applications for this dialog in QtHeWrapper.
-
Hildon-Extras has a nice collection of dialog windows that are optimized to be both good-looking and finger-friendly.
+
If you are writing a Python application, you might be interested in the Python port of HeAboutDialog: [http://repo.or.cz/w/gpodder.git/blob_plain/HEAD:/src/gpodder/gtkui/frmntl/about.py Download about.py]
-
All of the dialogs support integration with Qt-based software via the <code>QtHeWrapper</code> class (in the "qt-he-wrapper.h" header).
+
===HeCheckButton===
-
====HeAboutDialog====
+
[[Image:HeCheckButton.png|thumb|An example check button]]
-
[[Image:HeAboutDialog.png|thumb|About dialog in MaePad]]
+
HeCheckButton is a check button with primary and secondary labels. The standard HildonCheckButton supports only one label.
-
The <code>HeAboutDialog</code> is a replacement for <code>GtkAboutDialog</code> and provides a finger-friendly, good-looking about dialog with optional buttons for:
+
This button can be very handy for developers who would like to provide some description about the functionality of a check box.
-
* Project website
+
===HeFullscreenButton===
-
* Bug tracker ("Enter new bug")
+
-
* Donations page
+
-
There is a [[:wikipedia:Wrapper_function|wrapper]] that can be used by Qt-based applications for this dialog in <code>QtHeWrapper</code>.
+
[[Image:HeFullscreenButton.png|thumb|The HeFullScreenButton]]
-
If you are writing a Python application, you might be interested in the Python port of <code>HeAboutDialog</code>: [http://repo.or.cz/w/gpodder.git/blob_plain/HEAD:/src/gpodder/gtkui/frmntl/about.py Download about.py]
+
HeFullscreenButton is a button that allows users to '''leave''' full screen mode. It becomes visible after the user touched the screen or pressed a key and it vanishes after 5 seconds of inactivity.
-
====HeSimpleColorDialog====
+
It looks like the full screen button in the built-in applications of Maemo 5, so it is very good if a developer wants his/her application to blend in well with the rest of the platform.
-
[[Image:HeSimpleColorDialog.png|thumb|Simple color dialog]]
+
===HeSimpleColorDialog===
 +
 
 +
[[Image:HeSimpleColorDialog.png|thumb|The simple color dialog in action]]
This dialog provides a finger-friendly, limited list of colors (a Tango-ish color palette) for the user to choose from. Especially useful when the color selection does not have to be "that special shade of green" but rather "a nice green" (for example to colorize categories or items).
This dialog provides a finger-friendly, limited list of colors (a Tango-ish color palette) for the user to choose from. Especially useful when the color selection does not have to be "that special shade of green" but rather "a nice green" (for example to colorize categories or items).
There is also the possibility of an advanced mode for this dialog.
There is also the possibility of an advanced mode for this dialog.
-
This presents an additional "Advanced" button above "Select". When clicked, it presents the user with a regular <code>HeColorDialog</code> to pick an exact colour.
+
This presents an additional "Advanced" button above "Select". When clicked, it presents the user with a regular HeColorDialog to pick an exact colour.
Example code and use cases:
Example code and use cases:
Line 78: Line 71:
* MaePad uses it for coloring the text of checklist items and for the color in sketches ([http://repo.or.cz/w/maepad.git/blob/HEAD:/src/ui/callbacks.c src/ui/callbacks.c])
* MaePad uses it for coloring the text of checklist items and for the color in sketches ([http://repo.or.cz/w/maepad.git/blob/HEAD:/src/ui/callbacks.c src/ui/callbacks.c])
-
====HeColorDialog====
+
===HeColorDialog===
-
[[Image:HeColorDialog.png|thumb|Color dialog]]
+
[[Image:HeColorDialog.png|thumb|The color dialog]]
This dialog lets the user to select a color by selecting the intensity of the red, green, and blue channels. Also provides hex input/output of colours.
This dialog lets the user to select a color by selecting the intensity of the red, green, and blue channels. Also provides hex input/output of colours.
Line 86: Line 79:
It may come in handy when a developer wants his/her users to be able to pick an exact shade of an exact colour in a finger-friendly way.
It may come in handy when a developer wants his/her users to be able to pick an exact shade of an exact colour in a finger-friendly way.
-
====HeFontDialog====
+
===HeFontDialog===
-
[[Image:HeFontDialog.png|thumb|Font dialog]]
+
[[Image:HeFontDialog.png|thumb|The font dialog]]
Lets the user choose a font together with a font size. It also offers bold and italic styles.
Lets the user choose a font together with a font size. It also offers bold and italic styles.
-
====HeMenuView====
+
===HeColorButton===
-
[[Image:he-menu-view-before-and-after.png|thumb|Menu view]]
+
[[Image:HeColorButton.png|thumb|The color button]]
-
This widget allows you to display a GtkMenu as a series of columns in a dialog. In addition, you can hook into all your HildonWindow widgets and have those menus that are not HildonAppMenu widgets appear as HeMenuView dialogs.
+
On tapping the HeColorButton opens the HeColorDialog and lets the user select a color. This color is then displayed on the HeColorButton.
-
 
+
-
===Buttons===
+
-
 
+
-
The buttons in Hildon-Extras provide commonly used behaviour and are looking nice.
+
-
 
+
-
====HeCheckButton====
+
-
 
+
-
[[Image:HeCheckButton.png|thumb|Check button]]
+
-
 
+
-
<code>HeCheckButton</code> is a check button with primary and secondary labels. The standard HildonCheckButton supports only one label.
+
-
 
+
-
This button can be very handy for developers who would like to provide some description about the functionality of a check box.
+
-
 
+
-
====HeFullscreenButton====
+
-
 
+
-
[[Image:HeFullscreenButton.png|thumb|The HeFullScreenButton]]
+
-
 
+
-
<code>HeFullscreenButton</code> is a button that allows users to '''leave''' full screen mode. It becomes visible after the user touched the screen or pressed a key and it vanishes after 5 seconds of inactivity.
+
-
 
+
-
It looks like the full screen button in the built-in applications of Maemo 5, so it is very good if a developer wants his/her application to blend in well with the rest of the platform.
+
-
====HeColorButton====
+
===HeFontButton===
-
[[Image:HeColorButton.png|thumb|Color button]]
+
[[Image:HeFontButton.png|thumb|The font button]]
-
On tapping the <code>HeColorButton</code> opens the <code>HeColorDialog</code> and lets the user select a color. This color is then displayed on the <code>HeColorButton</code>.
+
On tapping the HeFontButton displays a HeFontDialog that lets the user select a font. The selected font is then displayed on the HeFontButton.
-
====HeFontButton====
 
-
[[Image:HeFontButton.png|thumb|Font button]]
 
-
On tapping the <code>HeFontButton</code> displays a <code>HeFontDialog</code> that lets the user select a font. The selected font is then displayed on the <code>HeFontButton</code>.
 
[[Category:Development]]
[[Category:Development]]
[[Category:Documentation]]
[[Category:Documentation]]
[[Category:Fremantle]]
[[Category:Fremantle]]

Learn more about Contributing to the wiki.


Please note that all contributions to maemo.org wiki may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see maemo.org wiki:Copyrights for details). Do not submit copyrighted work without permission!


Cancel | Editing help (opens in new window)