[WIP] Hildon Qt Components - Page 6 - maemo.org

Active Topics

Is there a section to talk about Java ME? Apps, etc. (0)
to General by Kalatti - 2 days, 19 hrs ago
Extra softwares in Sailfish using CLI, repositories, etc (117)
to SailfishOS by nieldk - 4 days, 16 hrs ago
Firefox with Leste (6)
to Maemo 7 / Leste by teroyk - 5 days, 13 hrs ago
more...

Page 6 of 10

Thread Tools

	marxian	2014-02-25 , 17:16
	Posts: 2,448 \| Thanked: 9,523 times \| Joined on Aug 2010 @ Wigan, UK	#51

Repository now available at https://github.com/marxoft/qt-components-hildon.

The project includes an example gallery at /examples/gallery.

Some screenshots and example code:

Code:

import org.hildon.components 1.0

Window {
    id: mainWindow

    windowTitle: "Gallery"
    contextMenuPolicy: Qt.ActionsContextMenu // Display the list of actions in a context menu when a long-press occurs
    tools: Action {
        text: "About"
        onTriggered: dialog.open()
    }

    actions: [
        Action {
            text: "Action 1"
            onTriggered: console.log(text + " clicked")
        },

        Action {
            text: "Action 2"
            onTriggered: console.log(text + " clicked")
        },

        Action {
            text: "Action 3"
            onTriggered: console.log(text + " clicked")
        }
    ]

    Column {
        width: 460
        anchors {
            top: parent.top
            topMargin: 20
            horizontalCenter: parent.horizontalCenter
        }
        spacing: 20

        Label {
            width: parent.width
            alignment: Qt.AlignCenter
            font.bold: true
            font.pixelSize: 32
            color: platformStyle.activeTextColor
            wordWrap: true
            text: qsTr("Welcome to Qt Components Hildon Gallery.")
        }

        Button {
            width: parent.width
            text: qsTr("Next window")
            onClicked: windowStack.push(Qt.resolvedUrl("SecondWindow.qml"), { windowTitle: "Stacked window" })
        }

        Button {
            width: parent.width
            text: qsTr("Toggle orientation")
            onClicked: screen.orientationLock = screen.orientationLock === Screen.PortraitOrientation ? Screen.LandscapeOrientation : Screen.PortraitOrientation
        }

        CheckBox {
            width: parent.width
            text: qsTr("Fullscreen")
            onClicked: mainWindow.fullScreen = !mainWindow.fullScreen
        }
    }

    Dialog {
        id: dialog

        windowTitle: qsTr("About")
        content: Label {
            anchors.fill: parent
            wordWrap: true
            text: qsTr("Qt Components Hildon Gallery is a demo of Qt Components Hildon.")
        }

        buttons: Button {
            text: qsTr("Done")
            onClicked: dialog.accept()
        }
    }
}

Code:

import org.hildon.components 1.0

Window {
    id: root

    tools: [
        ActionGroup {
            exclusive: true

            Action {
                checkable: true
                checked: true
                text: qsTr("One")
                onTriggered: stack.currentIndex = 0
            }

            Action {
                checkable: true
                text: qsTr("Two")
                onTriggered: stack.currentIndex = 1
            }

            Action {
                checkable: true
                text: qsTr("Three")
                onTriggered: stack.currentIndex = 2
            }
        },

        Action {
            text: qsTr("Pop window")
            onTriggered: windowStack.pop()
        },

        Action {
            text: qsTr("Toggle orientation")
            onTriggered: screen.orientationLock = screen.orientationLock === Screen.PortraitOrientation ? Screen.LandscapeOrientation : Screen.PortraitOrientation
        }
    ]

    Stack {
        id: stack

        anchors.fill: parent

        Label {
            alignment: Qt.AlignCenter
            font.bold: true
            font.pixelSize: 40
            color: platformStyle.activeTextColor
            wordWrap: true
            text: qsTr("Showing tab one")
        }

        Label {
            alignment: Qt.AlignCenter
            font.bold: true
            font.pixelSize: 40
            color: platformStyle.activeTextColor
            wordWrap: true
            text: qsTr("Showing tab two")
        }

        Label {
            alignment: Qt.AlignCenter
            font.bold: true
            font.pixelSize: 40
            color: platformStyle.activeTextColor
            wordWrap: true
            text: qsTr("Showing tab three")
        }
    }
}

There are a few bugs with anchors/layouts and still lots of things to add, but the concept works well.

__________________
'Men of high position are allowed, by a special act of grace, to accomodate their reasoning to the answer they need. Logic is only required in those of lesser rank.' - J K Galbraith

My website

GitHub

Quote & Reply |

The Following 9 Users Say Thank You to marxian For This Useful Post:
Android_808, fw190, marmistrz, MartinK, mattaustin, nodevel, OVK, rcolistete, sixwheeledbeast

	marxian	2014-02-26 , 02:51
	Posts: 2,448 \| Thanked: 9,523 times \| Joined on Aug 2010 @ Wigan, UK	#52

I've now added a webkit module and a simple webkit browser example.

Code:

import org.hildon.components 1.0
import org.hildon.webkit 1.0

Window {
    id: mainWindow

    windowTitle: qsTr("Browser")
    tools: Action {
        text: qsTr("About")
        onTriggered: dialog.open()
    }

    WebView {
        id: webView

        anchors {
            left: parent.left
            right: parent.right
            top: parent.top
            bottom: toolbar.top
        }
    }

    ToolBar {
        id: toolbar

        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }

        Action {
            icon: "general_backspace"
            enabled: webView.status != WebView.Null
            onTriggered: webView.back()
        }

        TextField {
            onReturnPressed: if (acceptableInput) webView.url = text
        }

        Action {
            icon: webView.status == WebView.Loading ? "general_stop" : "general_refresh"
            enabled: webView.status != WebView.Null
            onTriggered: webView.status == WebView.Loading ? webView.stop() : webView.reload()
        }
    }

    Dialog {
        id: dialog

        windowTitle: qsTr("About")
        content: Label {
            anchors.fill: parent
            wordWrap: true
            text: qsTr("Qt Components Hildon Browser is a demo of Qt Components Hildon Webkit.")
        }

        buttons: Button {
            text: qsTr("Done")
            onClicked: dialog.accept()
        }
    }
}

https://github.com/marxoft/qt-compon...ter/src/webkit

https://github.com/marxoft/qt-compon...amples/browser

Quote & Reply |

The Following 6 Users Say Thank You to marxian For This Useful Post:
fw190, MaddogG, MartinK, mattaustin, nodevel, OVK

seanmcken	2014-02-26 , 03:07
Posts: 863 \| Thanked: 213 times \| Joined on Feb 2012 @ Goa	#53

how to install that browser n all, noob here, please help

Quote & Reply |

marmistrz	2014-02-26 , 11:39
Posts: 3,328 \| Thanked: 4,476 times \| Joined on May 2011 @ Poland	#54

Why a separate module for webkit instead of

Code:

import QtWebkit x.y

__________________
If you want to support my work, you can donate by PayPal or Flattr

Projects no longer actively developed: here

Last edited by marmistrz; 2014-02-26 at 11:48.

Quote & Reply |

	marxian	2014-02-26 , 14:01
	Posts: 2,448 \| Thanked: 9,523 times \| Joined on Aug 2010 @ Wigan, UK	#55

Originally Posted by seanmcken

how to install that browser n all, noob here, please help

You would need to compile the source for the components and the browser, but there isn't much point in installing it for daily use. It's a very basic example browser.

Quote & Reply |

	marxian	2014-02-26 , 14:09
	Posts: 2,448 \| Thanked: 9,523 times \| Joined on Aug 2010 @ Wigan, UK	#56

Originally Posted by marmistrz

Why a separate module for webkit instead of
Code:
import QtWebkit x.y

The standard QtWebKit module requires a QGraphicsScene to render the QML WebView element. You cannot use any of the visual elements due to lack of QGraphicsScene. I intend to also replace the non-visual elements (Timer etc) with my own in order to avoid importing the QtQuick module which is of limited use.

Quote & Reply |

The Following User Says Thank You to marxian For This Useful Post:
marmistrz

marmistrz	2014-02-26 , 14:12
Posts: 3,328 \| Thanked: 4,476 times \| Joined on May 2011 @ Poland	#57

Originally Posted by marxian

The standard QtWebKit module requires a QGraphicsScene to render the QML WebView element. You cannot use any of the visual elements due to lack of QGraphicsScene. I intend to also replace the non-visual elements (Timer etc) with my own in order to avoid importing the QtQuick module which is of limited use.

Maybe you could simply "reimport" the non-visual elements without creating the replacements?

__________________
If you want to support my work, you can donate by PayPal or Flattr

Projects no longer actively developed: here

Quote & Reply |

	marxian	2014-02-26 , 14:21
	Posts: 2,448 \| Thanked: 9,523 times \| Joined on Aug 2010 @ Wigan, UK	#58

Originally Posted by marmistrz

Maybe you could simply "reimport" the non-visual elements without creating the replacements?

I don't think that's possible. I expect they are exposed in the same way as any custom declarative plugin, which means that it's all or nothing. You can't import only specific elements.

Besides, some of them may not work correctly, and those that do will probably have some redundant code.

Quote & Reply |

The Following User Says Thank You to marxian For This Useful Post:
sixwheeledbeast

marmistrz	2014-02-26 , 17:57
Posts: 3,328 \| Thanked: 4,476 times \| Joined on May 2011 @ Poland	#59

Originally Posted by marxian

I don't think that's possible. I expect they are exposed in the same way as any custom declarative plugin, which means that it's all or nothing. You can't import only specific elements.

Besides, some of them may not work correctly, and those that do will probably have some redundant code.

But I guess you'll reuse the Qt types, not create your own ones, just removing the UI stuff?

__________________
If you want to support my work, you can donate by PayPal or Flattr

Projects no longer actively developed: here

Quote & Reply |

	marxian	2014-02-26 , 20:40
	Posts: 2,448 \| Thanked: 9,523 times \| Joined on Aug 2010 @ Wigan, UK	#60

Originally Posted by marmistrz

But I guess you'll reuse the Qt types, not create your own ones, just removing the UI stuff?

If you mean reuse the implementations in the declarative classes, then that probably will not be possible in most cases, as they usually depend on QDeclarativeItem or some other class that I'm not using. They also use private APIs (like QObjectPrivate) that I would then need to ship with my library, which I want to avoid.

I will use the code as a guide, where possible, which is what I did for the anchors. Most things will be quite straightforward, anyway. The biggest challenge is probably the model/view stuff.