maemo.org - Talk - [WIP] Hildon Qt Components

maemo.org - Talk (https://talk.maemo.org/index.php)

- Development (https://talk.maemo.org/forumdisplay.php?f=13)

- - [WIP] Hildon Qt Components (https://talk.maemo.org/showthread.php?t=85955)

[WIP] Hildon Qt Components

Recently, I have been working on a set of Hildonized Qt Components for Maemo5. The purpose of this project is to enable easy building of UIs using the Hildon style for those that do not wish to use QtGui/GTK widgets. The project provides a number of QML components along with C++ plugins to provide backend functionality, similar to Harmattan/Symbian Qt Components. The current list of completed components is:

BusyIndicator
Button
ButtonRow
CheckBox
Contact - Visual component for displaying contacts
ContextMenu
ContextMenuItem
ContextMenuLayout
Dialog
DialogButton
FileBrowserDialog - Fully functional file browser enabling choosing of files/folders and creation of new folders
FilterBox - Used with a ListView to filter a list
FilterListView - ListView with FilterBox component
InfoBanner
InfoNote
Label
ListItem - Base delegate for ListView
MaskedItem
MenuAction - Menu filter
MenuActionGroup - Container for MenuAction
MenuItem
MenuLayout
MultiSelectionDialog - Equivalent to QMaemo5ListPickSelector allowing multiple selections
MultiSelectionItem - Convenience component comprising of a SelectionButton and MultiSelectionDialog
Page
PageStackWindow
ProgressBar
QueryDialog
RatingIndicator
ScrollDecorator
SearchBox - TextField with some convenience functions for searching/filtering
SelectionButton - Equivalent to QMaemo5ValueButton
SelectionDialog - Equivalent to QMaemo5ListPickSelector
SelectionItem - Convenience component comprising of a SelectionButton and SelectionDialog
Slider
StylusButton
TabBar
TabButton
TabGroup
TextArea
TextField
ToolBar
ToolBarLayout
ToolButton
WebShortcut - Visual component for displaying web shortcuts

The global properties available are:

theme - provides access to theme constants such as fonts and transition values
screen - provides access to screen information such as size and orientation

More components will be added to these in future.

Many of these components have associated style components (set via the platformStyle property), which are used to set visual properties. The properties and signals are, where possible, the same as those for the Harmattan components, but I will document them fully once I have them in the repositories. The main difference is in the use of the drop-down menu where Harmattan uses the toolbar. So, for Hildon Qt Components, the tools of a Page component are set like this:

Code:

Page {

    id: root



    tools: MenuLayout {



        MenuItem {

            text: "Menu Item 1"

        }



        MenuItem {

            text: "Menu Item 2"

        }



        MenuItem {

            text: "Menu Item 3"

        }

    }

}

As shown in the screenshots below, components other than the MenuItem can also be used in a menu. These components will be resized accordingly.

Blur transitions are provided for the components, but are disabled by default for performance reasons. The default desaturation is a blurless transition with full color. The blur transitions can be enabled via the global theme property:

Code:

theme.enableDesaturationEffects = true;

More generally, the transition values are taken from the transitions.ini file. The values are loaded at startup and made available via the global theme property. Images are accessed in a similar way to the Harmattan components. To load an image from the current theme:

Code:

Image {

    source: "image://theme/some_image"

}

Or an icon (currently 48x48 icon is used):

Code:

Image {

    source: "image://theme/icon/some_icon"

}

Some screenshots:

http://img209.imageshack.us/img209/3...pshot28.th.png http://img341.imageshack.us/img341/4...pshot31.th.png http://img836.imageshack.us/img836/1...pshot32.th.png
http://img515.imageshack.us/img515/2...pshot33.th.png http://img198.imageshack.us/img198/3...shot34c.th.png http://img152.imageshack.us/img152/4...pshot36.th.png
http://img98.imageshack.us/img98/574...shot39a.th.png http://img685.imageshack.us/img685/6...pshot41.th.png http://img193.imageshack.us/img193/9...pshot43.th.png
http://img689.imageshack.us/img689/6...pshot44.th.png http://img441.imageshack.us/img441/2...shot46c.th.png http://img441.imageshack.us/img441/9...shot49a.th.png
http://img443.imageshack.us/img443/1...pshot29.th.png http://img837.imageshack.us/img837/4...pshot35.th.png http://img826.imageshack.us/img826/5...shot42a.th.png http://img580.imageshack.us/img580/5...shot45u.th.png

Latest source is at https://github.com/marx1an/qt-components-hildon