QML components bootstrap.

bootstrap.pro

TEMPLATE = lib
QT += declarative
CONFIG += qt plugin

TARGET = $$qtLibraryTarget($$TARGET)

# for qtcreator
uri = com.example.bootstrap
#DESTDIR = $$replace(uri, \\., /)

SOURCES += \
    settings.cpp \
    plugin.cpp

HEADERS += \
    settings.h \
    plugin.h

QML_FILES = qmldir \
    $$files(qml/*.qml) \
    $$files(qml/*.js)

OTHER_FILES = $$QML_FILES \
    test.qml

qmlassets.files = $$QML_FILES

unix {
    installPath = $$[QT_INSTALL_IMPORTS]/$$replace(uri, \\., /)
    qmlassets.path = $$installPath
    target.path = $$installPath
    INSTALLS += target qmlassets
}

BusyIndicator.qml

import QtQuick 1.1
import 'UIConstants.js' as UI


Item {
    width: parent.width
    property alias running: anim.running
    height: running ? 48 : 0
    Rectangle {
        id: bar
        anchors { fill: parent }
        color: UI.ACTIVE_BACKGROUND

        SequentialAnimation on opacity  {
            id: anim
            loops: Animation.Infinite
            NumberAnimation {
                duration: 500
                from: 0
                to: 1
            }
            NumberAnimation {
                duration: 500
                from: 1
                to: 0
            }
        }
    }
}

Button.qml

import QtQuick 1.1


Rectangle {
    property alias text: label.text
    signal clicked

    border.color: 'lightgray'
    color: mouse.pressed ? 'lightgray' : 'WhiteSmoke'
    height: label.paintedHeight + 16
    width: Math.max(label.paintedWidth + 24, 64)

    Text {
        id: label
        anchors { centerIn: parent }
        font.pixelSize: 18
    }

    MouseArea {
        id: mouse
        anchors {fill: parent; margins: -4}
        onClicked: {
            parent.clicked()
        }
    }
}

Dialog.qml

import QtQuick 1.1


Page {
    hideStack: false

    MouseArea {
        anchors.fill: parent
        onClicked: {
            // close/cancel
        }
    }

    Rectangle {
        anchors.fill: parent
        color: "#80000000"
    }
    Rectangle {
        anchors {fill: content_placeholder; margins: -2}
        color: "#20000000"
    }

    Rectangle {
        id: content_placeholder
        anchors { left: parent.left; right: parent.right; margins: 18; verticalCenter: parent.verticalCenter}
        height: childrenRect.height + 48
        color: "white"
    }

    property alias contents: content_placeholder.children
}

InputField.qml

import QtQuick 1.1


Rectangle {
    property alias echoMode: label.echoMode
    property alias text: label.text

    border.color: 'lightgray'
    height: label.height + 16
    color: 'white'

    onFocusChanged: {
        if (focus) {
            label.focus = true
            label.selectAll()
        }
    }

    MouseArea {
        anchors {fill: parent; margins: -4}
        onPressed: {
            label.focus = true;
        }
    }

    TextInput {
        id: label
        anchors {
            left: parent.left
            right: parent.right
            verticalCenter: parent.verticalCenter
            margins: 8
        }
        font.pixelSize: 18
    }
}

Page.qml

import QtQuick 1.1


Item {
    anchors.fill: parent
    property PageStack pageStack
    property bool hideStack: true
}

PageStack.js

var stack = []

PageStack.qml

import QtQuick 1.1
import 'PageStack.js' as Self


QtObject {
    id: self
    property Item window

    function push(obj, properties) {
        var page = obj.parent ? obj : obj.createObject(window, properties || {})
        if (Self.stack.length > 0 && page.hideStack) {
            Self.stack[Self.stack.length-1].visible = false
        }
        page.pageStack = self
        Self.stack.push(page)
    }

    function pop() {
        Self.stack[Self.stack.length-1].visible = false
        Self.stack[Self.stack.length-1].destroy()
        Self.stack.pop()
        Self.stack[Self.stack.length-1].visible = true
    }
}

plugin.cpp

#include "plugin.h"
#include "settings.h"

#include <qdeclarative.h>

void BootstrapPlugin::registerTypes(const char *uri)
{
    // @uri bootstrap.components
    qmlRegisterType<Settings>(uri, 1, 0, "Settings");
}

Q_EXPORT_PLUGIN2(Bootstrap, BootstrapPlugin)

plugin.h

#ifndef BOOTSTRAP_PLUGIN_H
#define BOOTSTRAP_PLUGIN_H

#include <QDeclarativeExtensionPlugin>

class BootstrapPlugin : public QDeclarativeExtensionPlugin
{
    Q_OBJECT
    
public:
    void registerTypes(const char *uri);
};

#endif // BOOTSTRAP_PLUGIN_H

qmldir

plugin bootstrap
BusyIndicator 1.0 BusyIndicator.qml
Button 1.0 Button.qml
Dialog 1.0 Dialog.qml
InputField 1.0 InputField.qml
Page 1.0 Page.qml
PageStack 1.0 PageStack.qml
ScrollDecorator 1.0 ScrollDecorator.qml
Window 1.0 Window.qml

ScrollDecorator.qml

import QtQuick 1.1


Rectangle {
    anchors { right: parent.right }
    width: 8
    height: parent.visibleArea.heightRatio * parent.height
    y: parent.visibleArea.yPosition * parent.height
    color: "black"
    opacity: 0

    Connections {
        target: parent
        onMovingChanged: {
            if (parent.moving) {
                timer.stop()
                opacity = 0.3
            }
            else {
                timer.interval = 200
                timer.restart()
            }
        }
    }

    onHeightChanged: {
        if (!parent.moving) {
            opacity = 0.3
            timer.interval = 1000
            timer.restart()
        }
    }

    Timer {
        id: timer
        onTriggered: {
            opacity = 0
        }
    }

    Behavior on opacity {
        NumberAnimation {
        }
    }
}

settings.cpp

#include "settings.h"

#include <qdeclarative.h>

Settings::Settings(QDeclarativeItem *parent):
    QDeclarativeItem(parent)
{
    // By default, QDeclarativeItem does not draw anything. If you subclass
    // QDeclarativeItem to create a visual item, you will need to uncomment the
    // following line:
    
    // setFlag(ItemHasNoContents, false);
}

Settings::~Settings()
{
}

settings.h

#ifndef WINDOW_H
#define WINDOW_H

#include <QDeclarativeItem>

class Settings : public QDeclarativeItem
{
    Q_OBJECT
    Q_DISABLE_COPY(Settings)
    
public:
    Settings(QDeclarativeItem *parent = 0);
    ~Settings();
};

QML_DECLARE_TYPE(Settings)

#endif // WINDOW_H

test.qml

import QtQuick 1.1
import com.example.bootstrap 1.0


Window {
    width: 480
    height: 854-16

    Component {
        id: initail_page
        Page {
        }
    }

    Component.onCompleted: {
        pushPage(initail_page)
    }
}

UIConstants.js

.pragma library


var DEFAULT_FONT_SIZE = 18

var HEADER_FONT_SIZE = 22

var ACTIVE_BACKGROUND = "#19F"
var INACTIVE_BACKGROUND = 'lightgray'

var PRIMARY_COLOR = 'black'
var SECONDARY_COLOR = 'gray'

var BADGE_FOREGROUND = "#AAA"
var BADGE_BACKGROUND = 'white'
var BADGE_FOREGROUND_ACTIVE = '#58F'
var BADGE_BACKGROUND_ACTIVE = 'white'
var BADGE_RADIUS = 6
var BADGE_MARGIN = 8
var BADGE_FONT_SIZE = 16
var BADGE_HEIGHT = BADGE_FONT_SIZE + BADGE_MARGIN


var POST_SIGNATURE_COLOR = 'gray'

Window.qml

import QtQuick 1.1


Item {
    id: self
    PageStack {
        id: _stack
        window: self
    }

    function pushPage(page, properties) {
        _stack.push(page, properties)
    }
}