maemo.org - Talk

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)

marxian 2012-08-08 16:23

[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

qwazix 2012-08-08 16:54

Re: [WIP] Hildon Qt Components
 
Wow! I've been thinking to start doing something like that, I even started something but I never found the time to continue. Awesome work. I must find something to start coding with them.

ivgalvez 2012-08-08 18:26

Re: [WIP] Hildon Qt Components
 
How is this related with QtComponents for Fremantle?

marxian 2012-08-08 18:45

Re: [WIP] Hildon Qt Components
 
Quote:

Originally Posted by ivgalvez (Post 1249224)
How is this related with qtComponents for Fremantle?

It isn't related to that project, because the goals are different. QtComponents for Fremantle is about enabling applications written using Harmattan QtComponents to run unaltered on Fremantle using Harmattan UX. Hildon QtComponents is about enabling developers to create applications with Hildon UX using QML. The component names and properties are kept as similar to Harmattan QtComponents as possible for familiarity, but there is very little code shared between the two projects (only the PageStack component, I think). Hildon QtComponents does not depend on QtComponents for Fremantle.

munozferna 2012-08-08 19:52

Re: [WIP] Hildon Qt Components
 
Fantastic work! is there any place to check your work? please make it available on the extras (extras-devel) repo, that way it can be easily added as a dependency for new QML applications for Fremantle

marxian 2012-08-09 00:13

Re: [WIP] Hildon Qt Components
 
Quote:

Originally Posted by munozferna (Post 1249246)
Fantastic work! is there any place to check your work? please make it available on the extras (extras-devel) repo, that way it can be easily added as a dependency for new QML applications for Fremantle

I'll be uploading to extras-devel as soon as I've sorted out the packaging and installation details. :)

freemangordon 2012-08-09 19:18

Re: [WIP] Hildon Qt Components
 
Great job pal.

Does it need Qt from CSSU?

EDIT:

Hmm, I realize my question sounds silly in the light of your statement that you'll upload that to extras-devel :)

jackburton 2012-08-09 20:56

Re: [WIP] Hildon Qt Components
 
long live the N900

marxian 2012-08-10 09:03

Re: [WIP] Hildon Qt Components
 
Quote:

Originally Posted by freemangordon (Post 1249744)
Great job pal.

Does it need Qt from CSSU?

EDIT:

Hmm, I realize my question sounds silly in the light of your statement that you'll upload that to extras-devel :)

I don't believe it will require Qt 4.7.4, unless I use QSystemInfo for the battery indicator etc. Presumably there are lower-level methods to get battery info and such that would enable me to avoid using the high-level QtMobility APIs.

EDIT: Also, I don't suppose you know the answer to my question of how to determine which theme is currently being used? I need to be able to tell my QDeclarativeImageProvider where to load the images from (and also load transistions.ini if the theme overrides the default one).

nicolai 2012-08-10 09:45

Re: [WIP] Hildon Qt Components
 
Quote:

Originally Posted by marxian (Post 1249997)
how to determine which theme is currently being used?

/etc/hildon/theme

nicolai


All times are GMT. The time now is 20:55.

vBulletin® Version 3.8.8