Add support for custom styles and runtime change of style

Styles can now co-exist in plugin resources and file system.
All the built-in styles are now embedded into plugin resources
and therefore available at runtime. Furthermore, custom styles
can be installed independently to the target system by copying
them into Styles directory:

$$[QT_INSTALL_QML]/QtQuick/Enterprise/VirtualKeyboard/Styles

The default built-in style is still configured at build time
and changed with CONFIG+=retro-style as before.

The runtime style can be changed by setting an environment
variable QT_VIRTUALKEYBOARD_STYLE to the name of the style.
The style name can be one of the built-in styles or custom
styles currently available in the system. However, there is
an limitation that the custom style cannot have the same
name as any of the built-in styles.

Added new child module QtQuick.Enterprise.VirtualKeyboard.Settings,
which provides VirtualKeyboardSettings instance.

Change-Id: Ide076529c2c6d6944d8c0532d0b5daa5a56cae76
Reviewed-by: Mitch Curtis <mitch.curtis@digia.com>

12 files changed, 488 insertions, 38 deletions

diff --git a/src/virtualkeyboard/content/components/Keyboard.qml b/src/virtualkeyboard/content/components/Keyboard.qml
index a6bc89a2..e23635fc 100644
--- a/src/virtualkeyboard/content/components/Keyboard.qml
+++ b/src/virtualkeyboard/content/components/Keyboard.qml
@@ -20,6 +20,7 @@ import QtQuick 2.0
 import QtQuick.Layouts 1.0
 import QtQuick.Enterprise.VirtualKeyboard 1.1
 import QtQuick.Enterprise.VirtualKeyboard.Styles 1.1
+import QtQuick.Enterprise.VirtualKeyboard.Settings 1.0
 import Qt.labs.folderlistmodel 2.0
 
 Item {
@@ -357,7 +358,7 @@ Item {
     }
     Loader {
         id: styleLoader
-        source: "qrc:/style.qml"
+        source: VirtualKeyboardSettings.style
         Binding {
             target: styleLoader.item
             property: "keyboardHeight"
diff --git a/src/virtualkeyboard/content/styles/default/style.qrc b/src/virtualkeyboard/content/styles/default/default_style.qrc
index 6e469a75..100f3fcb 100644
--- a/src/virtualkeyboard/content/styles/default/style.qrc
+++ b/src/virtualkeyboard/content/styles/default/default_style.qrc
@@ -1,5 +1,5 @@
 <RCC>
-    <qresource prefix="/">
+    <qresource prefix="/content/styles/default">
         <file>style.qml</file>
         <file>images/backspace.png</file>
         <file>images/enter.png</file>
diff --git a/src/virtualkeyboard/content/styles/default/style.qml b/src/virtualkeyboard/content/styles/default/style.qml
index 037c5c0d..f86ef6d9 100644
--- a/src/virtualkeyboard/content/styles/default/style.qml
+++ b/src/virtualkeyboard/content/styles/default/style.qml
@@ -26,6 +26,7 @@ KeyboardStyle {
     readonly property real keyBackgroundMargin: Math.round(13 * scaleHint)
     readonly property real keyContentMargin: Math.round(45 * scaleHint)
     readonly property real keyIconMargin: Math.round(35 * scaleHint)
+    readonly property string resourcePrefix: "qrc:/content/styles/default/"
 
     keyboardDesignWidth: 2560
     keyboardDesignHeight: 800
@@ -98,7 +99,7 @@ KeyboardStyle {
             anchors.margins: keyBackgroundMargin
             KeyIcon {
                 id: backspaceKeyIcon
-                source: "qrc:/images/backspace.png"
+                source: resourcePrefix + "images/backspace.png"
                 color: "#868482"
                 anchors.fill: parent
                 anchors.topMargin: keyIconMargin
@@ -142,7 +143,7 @@ KeyboardStyle {
             anchors.margins: keyBackgroundMargin
             KeyIcon {
                 id: languageKeyIcon
-                source: "qrc:/images/globe.png"
+                source: resourcePrefix + "images/globe.png"
                 color: "#868482"
                 anchors.fill: parent
                 anchors.topMargin: keyIconMargin
@@ -193,11 +194,11 @@ KeyboardStyle {
                     case EnterKeyAction.Send:
                     case EnterKeyAction.Next:
                     case EnterKeyAction.Done:
-                        return "qrc:/images/check.png"
+                        return resourcePrefix + "images/check.png"
                     case EnterKeyAction.Search:
-                        return "qrc:/images/search.png"
+                        return resourcePrefix + "images/search.png"
                     default:
-                        return "qrc:/images/enter.png"
+                        return resourcePrefix + "images/enter.png"
                     }
                 }
                 color: "#868482"
@@ -269,7 +270,7 @@ KeyboardStyle {
             anchors.margins: keyBackgroundMargin
             KeyIcon {
                 id: hideKeyIcon
-                source: "qrc:/images/hidekeyboard.png"
+                source: resourcePrefix + "images/hidekeyboard.png"
                 color: "#868482"
                 anchors.fill: parent
                 anchors.topMargin: keyIconMargin
@@ -313,7 +314,7 @@ KeyboardStyle {
             anchors.margins: keyBackgroundMargin
             KeyIcon {
                 id: shiftKeyIcon
-                source: "qrc:/images/shift.png"
+                source: resourcePrefix + "images/shift.png"
                 color: "#868482"
                 anchors.fill: parent
                 anchors.topMargin: keyIconMargin
diff --git a/src/virtualkeyboard/content/styles/retro/style.qrc b/src/virtualkeyboard/content/styles/retro/retro_style.qrc
index 8cdb9b0f..53214704 100644
--- a/src/virtualkeyboard/content/styles/retro/style.qrc
+++ b/src/virtualkeyboard/content/styles/retro/retro_style.qrc
@@ -1,5 +1,5 @@
 <RCC>
-    <qresource prefix="/">
+    <qresource prefix="/content/styles/retro">
         <file>style.qml</file>
         <file>images/key154px_black.png</file>
         <file>images/key154px_black_long.png</file>
diff --git a/src/virtualkeyboard/content/styles/retro/style.qml b/src/virtualkeyboard/content/styles/retro/style.qml
index 546ad721..0b05e778 100644
--- a/src/virtualkeyboard/content/styles/retro/style.qml
+++ b/src/virtualkeyboard/content/styles/retro/style.qml
@@ -26,6 +26,7 @@ KeyboardStyle {
     readonly property real keyBackgroundMargin: Math.round(9 * scaleHint)
     readonly property real keyContentMargin: Math.round(50 * scaleHint)
     readonly property real keyIconMargin: Math.round(40 * scaleHint)
+    readonly property string resourcePrefix: "qrc:/content/styles/retro/"
 
     keyboardDesignWidth: 2560
     keyboardDesignHeight: 800
@@ -44,7 +45,7 @@ KeyboardStyle {
     keyPanel: KeyPanel {
         Image {
             id: keyBackground
-            source: "qrc:/images/key154px_colorA.png"
+            source: resourcePrefix + "images/key154px_colorA.png"
             fillMode: Image.PreserveAspectFit
             anchors.fill: parent
             anchors.margins: keyBackgroundMargin
@@ -56,7 +57,7 @@ KeyboardStyle {
                         '~', '·', '÷', '}', '€', '£', '§', ']', '«', '»'].indexOf(control.displayText.toLowerCase()) >= 0
                     PropertyChanges {
                         target: keyBackground
-                        source: "qrc:/images/key154px_colorB.png"
+                        source: resourcePrefix + "images/key154px_colorB.png"
                     }
                 },
                 State {
@@ -64,7 +65,7 @@ KeyboardStyle {
                     when: control.displayText.length > 2
                     PropertyChanges {
                         target: keyBackground
-                        source: "qrc:/images/key154px_black.png"
+                        source: resourcePrefix + "images/key154px_black.png"
                     }
                 }
             ]
@@ -124,7 +125,7 @@ KeyboardStyle {
     backspaceKeyPanel: KeyPanel {
         BorderImage {
             id: backspaceKeyBackground
-            source: "qrc:/images/key154px_black.png"
+            source: resourcePrefix + "images/key154px_black.png"
             width: (parent.width - 2 * keyBackgroundMargin) / scale
             height: sourceSize.height
             anchors.centerIn: parent
@@ -137,7 +138,7 @@ KeyboardStyle {
         }
         KeyIcon {
             id: backspaceKeyIcon
-            source: "qrc:/images/backspace.png"
+            source: resourcePrefix + "images/backspace.png"
             color: "#c5a96f"
             anchors.fill: parent
             anchors.topMargin: keyIconMargin
@@ -174,14 +175,14 @@ KeyboardStyle {
     languageKeyPanel: KeyPanel {
         Image {
             id: languageKeyBackground
-            source: "qrc:/images/key154px_colorB.png"
+            source: resourcePrefix + "images/key154px_colorB.png"
             fillMode: Image.PreserveAspectFit
             anchors.fill: parent
             anchors.margins: keyBackgroundMargin
         }
         KeyIcon {
             id: languageKeyIcon
-            source: "qrc:/images/globe.png"
+            source: resourcePrefix + "images/globe.png"
             color: "#110b05"
             anchors.fill: parent
             anchors.topMargin: keyIconMargin
@@ -218,7 +219,7 @@ KeyboardStyle {
     enterKeyPanel: KeyPanel {
         BorderImage {
             id: enterKeyBackground
-            source: "qrc:/images/key154px_black.png"
+            source: resourcePrefix + "images/key154px_black.png"
             width: (parent.width - 2 * keyBackgroundMargin) / scale
             height: sourceSize.height
             anchors.centerIn: parent
@@ -238,11 +239,11 @@ KeyboardStyle {
                 case EnterKeyAction.Send:
                 case EnterKeyAction.Next:
                 case EnterKeyAction.Done:
-                    return "qrc:/images/check.png"
+                    return resourcePrefix + "images/check.png"
                 case EnterKeyAction.Search:
-                    return "qrc:/images/search.png"
+                    return resourcePrefix + "images/search.png"
                 default:
-                    return "qrc:/images/enter.png"
+                    return resourcePrefix + "images/enter.png"
                 }
             }
             color: "#c5a96f"
@@ -310,7 +311,7 @@ KeyboardStyle {
     hideKeyPanel: KeyPanel {
         BorderImage {
             id: hideKeyBackground
-            source: "qrc:/images/key154px_black.png"
+            source: resourcePrefix + "images/key154px_black.png"
             width: (parent.width - 2 * keyBackgroundMargin) / scale
             height: sourceSize.height
             anchors.centerIn: parent
@@ -323,7 +324,7 @@ KeyboardStyle {
         }
         KeyIcon {
             id: hideKeyIcon
-            source: "qrc:/images/hidekeyboard.png"
+            source: resourcePrefix + "images/hidekeyboard.png"
             color: "#c5a96f"
             anchors.fill: parent
             anchors.topMargin: keyIconMargin
@@ -360,7 +361,7 @@ KeyboardStyle {
     shiftKeyPanel: KeyPanel {
         BorderImage {
             id: shiftKeyBackground
-            source: "qrc:/images/key154px_black.png"
+            source: resourcePrefix + "images/key154px_black.png"
             width: (parent.width - 2 * keyBackgroundMargin) / scale
             height: sourceSize.height
             anchors.centerIn: parent
@@ -376,7 +377,7 @@ KeyboardStyle {
                     when: InputContext.capsLock
                     PropertyChanges {
                         target: shiftKeyBackground
-                        source: "qrc:/images/key154px_capslock.png"
+                        source: resourcePrefix + "images/key154px_capslock.png"
                     }
                     PropertyChanges {
                         target: shiftKeyIcon
@@ -388,7 +389,7 @@ KeyboardStyle {
                     when: InputContext.shift
                     PropertyChanges {
                         target: shiftKeyBackground
-                        source: "qrc:/images/key154px_shiftcase.png"
+                        source: resourcePrefix + "images/key154px_shiftcase.png"
                     }
                     PropertyChanges {
                         target: shiftKeyIcon
@@ -399,7 +400,7 @@ KeyboardStyle {
         }
         KeyIcon {
             id: shiftKeyIcon
-            source: "qrc:/images/shift.png"
+            source: resourcePrefix + "images/shift.png"
             color: "#c5a96f"
             anchors.fill: parent
             anchors.topMargin: keyIconMargin
@@ -436,7 +437,7 @@ KeyboardStyle {
     spaceKeyPanel: KeyPanel {
         BorderImage {
             id: spaceKeyBackground
-            source: "qrc:/images/key154px_colorA.png"
+            source: resourcePrefix + "images/key154px_colorA.png"
             width: (parent.width - 2 * keyBackgroundMargin) / scale
             height: sourceSize.height
             anchors.centerIn: parent
@@ -470,7 +471,7 @@ KeyboardStyle {
     symbolKeyPanel: KeyPanel {
         BorderImage {
             id: symbolKeyBackground
-            source: "qrc:/images/key154px_black.png"
+            source: resourcePrefix + "images/key154px_black.png"
             width: (parent.width - 2 * keyBackgroundMargin) / scale
             height: sourceSize.height
             anchors.centerIn: parent
@@ -528,7 +529,7 @@ KeyboardStyle {
         id: characterPreview
         Image {
             id: characterPreviewBackground
-            source: "qrc:/images/key_preview.png"
+            source: resourcePrefix + "images/key_preview.png"
             fillMode: Image.PreserveAspectFit
             anchors.fill: parent
         }
@@ -604,7 +605,7 @@ KeyboardStyle {
         property bool currentItemHighlight: false
         BorderImage {
             cache: false
-            source: "qrc:/images/key160px_black.png"
+            source: resourcePrefix + "images/key160px_black.png"
             width: sourceSize.width + parent.width / scale
             height: sourceSize.height
             anchors.centerIn: parent
@@ -617,7 +618,7 @@ KeyboardStyle {
         }
         Image {
             visible: currentItemOffset !== undefined
-            source: currentItemHighlight ? "qrc:/images/triangle_highlight.png" : "qrc:/images/triangle_black.png"
+            source: currentItemHighlight ? resourcePrefix + "images/triangle_highlight.png" : resourcePrefix + "images/triangle_black.png"
             fillMode: Image.PreserveAspectFit
             width: sourceSize.width * scaleHint
             height: sourceSize.height * scaleHint
diff --git a/src/virtualkeyboard/declarativesettings.cpp b/src/virtualkeyboard/declarativesettings.cpp
new file mode 100644
index 00000000..26eba375
--- /dev/null
+++ b/src/virtualkeyboard/declarativesettings.cpp
@@ -0,0 +1,190 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the Qt Virtual Keyboard add-on for Qt Enterprise.
+**
+** Licensees holding valid Qt Enterprise licenses may use this file in
+** accordance with the Qt Enterprise License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+**
+****************************************************************************/
+
+#include "declarativesettings.h"
+#include "settings.h"
+#include "virtualkeyboarddebug.h"
+#include <QQmlEngine>
+#include <QFile>
+#include <QtCore/private/qobject_p.h>
+
+class DeclarativeSettingsPrivate : public QObjectPrivate
+{
+public:
+    DeclarativeSettingsPrivate() :
+        QObjectPrivate(),
+        engine() {}
+
+    QString buildStyleImportPath(const QString &path, const QString &name) const
+    {
+        QString importPath(path);
+        return importPath + name + "/style.qml";
+    }
+
+    QString buildStyleFilePath(const QString &path, const QString &name) const
+    {
+        QString filePath(path);
+        if (filePath.startsWith("qrc:"))
+            filePath.remove(0, 3);
+        return filePath + name + "/style.qml";
+    }
+
+    QString styleImportPath(const QString &name) const
+    {
+        QStringList styleImportPathList;
+        styleImportPathList << "qrc:/content/styles/";
+        QStringList importPathList = engine->importPathList();
+        // Add QML import path (Note: the QML base dir is always the last entry in the list)
+        if (!importPathList.isEmpty())
+            styleImportPathList << importPathList.last() + "/QtQuick/Enterprise/VirtualKeyboard/Styles/";
+        foreach (const QString &styleImportPath, styleImportPathList) {
+            QString filePath = buildStyleFilePath(styleImportPath, name);
+            if (QFile(filePath).exists())
+                return buildStyleImportPath(styleImportPath, name);
+        }
+        return QString();
+    }
+
+    QPointer<QQmlEngine> engine;
+};
+
+/*!
+    \qmlmodule QtQuick.Enterprise.VirtualKeyboard.Settings 1.0
+
+    This module provides settings components for Qt Virtual Keyboard.
+*/
+
+/*!
+    \qmltype VirtualKeyboardSettings
+    \inqmlmodule QtQuick.Enterprise.VirtualKeyboard.Settings
+    \ingroup qtvirtualkeyboard-settings-qml
+    \since QtQuick.Enterprise.VirtualKeyboard 1.2
+    \internal
+    \brief Provides settings for virtual keyboard.
+
+    This module provides VirtualKeyboarSettings instance,
+    which can be used for configuring virtual keyboard settings.
+
+    Note that settings have only effect during current application
+    lifetime, i.e. the configuration changes are not persistent.
+
+    For example, to change the keyboard style in application:
+
+    \code
+        Component.onCompleted: VirtualKeyboardSettings.styleName = "retro"
+    \endcode
+*/
+
+/*!
+    \internal
+*/
+QObject *DeclarativeSettings::registerSettingsModule(QQmlEngine *engine, QJSEngine *jsEngine)
+{
+    Q_UNUSED(jsEngine);
+    return new DeclarativeSettings(engine);
+}
+
+/*!
+    \internal
+*/
+DeclarativeSettings::DeclarativeSettings(QQmlEngine *engine) :
+    QObject(*new DeclarativeSettingsPrivate())
+{
+    Q_D(DeclarativeSettings);
+    d->engine = engine;
+    Settings *settings = Settings::instance();
+    if (settings->styleName().isEmpty())
+        resetStyle();
+    connect(settings, SIGNAL(styleChanged()), SIGNAL(styleChanged()));
+    connect(settings, SIGNAL(styleNameChanged()), SIGNAL(styleNameChanged()));
+}
+
+/*!
+    \internal
+*/
+QString DeclarativeSettings::style() const
+{
+    return Settings::instance()->style();
+}
+
+/*!
+    \internal
+*/
+QString DeclarativeSettings::styleName() const
+{
+    return Settings::instance()->styleName();
+}
+
+/*!
+    \internal
+*/
+void DeclarativeSettings::setStyleName(const QString &styleName)
+{
+    Q_D(DeclarativeSettings);
+    Settings *settings = Settings::instance();
+    QString style = d->styleImportPath(styleName);
+    if (style.isEmpty()) {
+        qWarning() << "WARNING: Cannot find style" << styleName << "- fallback:" << settings->styleName();
+        return;
+    }
+    settings->setStyleName(styleName);
+    settings->setStyle(style);
+}
+
+void DeclarativeSettings::resetStyle()
+{
+    Q_D(DeclarativeSettings);
+    Settings *settings = Settings::instance();
+    QString styleName = QT_VIRTUALKEYBOARD_DEFAULT_STYLE;
+    QString style = d->styleImportPath(styleName);
+    QString customStyleName = qgetenv("QT_VIRTUALKEYBOARD_STYLE");
+    if (!customStyleName.isEmpty()) {
+        bool found = false;
+        QRegExp styleNameValidator("\\w+");
+        if (styleNameValidator.exactMatch(customStyleName)) {
+            QString customStyle = d->styleImportPath(customStyleName);
+            if (!customStyle.isEmpty()) {
+                styleName = customStyleName;
+                style = customStyle;
+                found = true;
+            }
+        }
+        if (!found) {
+            qWarning() << "WARNING: Cannot find style" << customStyleName << "- fallback:" << styleName;
+        }
+    }
+    if (!style.isEmpty()) {
+        settings->setStyleName(styleName);
+        settings->setStyle(style);
+    }
+}
+
+/*!
+    \qmlproperty string VirtualKeyboardSettings::style
+    \internal
+*/
+
+/*!
+    \qmlproperty string VirtualKeyboardSettings::styleName
+
+    This property provides the current style. Application can change
+    the keyboard style by setting the styleName to different value.
+
+    The system wide keyboard style can be affected by setting
+    the QT_VIRTUALKEYBOARD_STYLE environment variable.
+*/
diff --git a/src/virtualkeyboard/declarativesettings.h b/src/virtualkeyboard/declarativesettings.h
new file mode 100644
index 00000000..66d522db
--- /dev/null
+++ b/src/virtualkeyboard/declarativesettings.h
@@ -0,0 +1,51 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the Qt Virtual Keyboard add-on for Qt Enterprise.
+**
+** Licensees holding valid Qt Enterprise licenses may use this file in
+** accordance with the Qt Enterprise License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+**
+****************************************************************************/
+
+#ifndef DECLARATIVESETTINGS_H
+#define DECLARATIVESETTINGS_H
+
+#include "qqml.h"
+
+class DeclarativeSettingsPrivate;
+
+class DeclarativeSettings : public QObject
+{
+    Q_OBJECT
+    Q_DECLARE_PRIVATE(DeclarativeSettings)
+    Q_PROPERTY(QUrl style READ style NOTIFY styleChanged)
+    Q_PROPERTY(QString styleName READ styleName WRITE setStyleName NOTIFY styleNameChanged)
+
+public:
+    static QObject *registerSettingsModule(QQmlEngine *engine, QJSEngine *jsEngine);
+
+    explicit DeclarativeSettings(QQmlEngine *engine);
+
+    QString style() const;
+
+    QString styleName() const;
+    void setStyleName(const QString &styleName);
+
+signals:
+    void styleChanged();
+    void styleNameChanged();
+
+private:
+    void resetStyle();
+};
+
+#endif // DECLARATIVESETTINGS_H
diff --git a/src/virtualkeyboard/doc/src/technical-guide.qdoc b/src/virtualkeyboard/doc/src/technical-guide.qdoc
index bc61eadf..14946cb7 100644
--- a/src/virtualkeyboard/doc/src/technical-guide.qdoc
+++ b/src/virtualkeyboard/doc/src/technical-guide.qdoc
@@ -404,10 +404,10 @@ The alternativeKeys can specify either a string, or a list of strings.
 If alternativeKeys is a string, the user can select between the characters in
 the string.
 
-\section2 Themes and Layouts
+\section2 Styles and Layouts
 
 The keyboard layouts cannot specify any visual elements. Instead, the layout is
-visualized by the keyboard theme. On the other hand, the keyboard theme cannot
+visualized by the keyboard style. On the other hand, the keyboard style cannot
 affect the size of the keyboard layout.
 
 \section2 Keyboard Layouts with Multiple Pages of Keys
@@ -461,4 +461,77 @@ For example:
     }
 \endcode
 
+\section1 Keyboard Styles
+
+The virtual keyboard styling system supports built-in styles as well
+as custom styles. The built-in styles are embedded as Qt Resources
+into the plugin binary and the custom styles are located in the file system
+and can be installed without recompiling the virtual keyboard itself.
+
+The selection of the runtime style is affected by an environment
+variable QT_VIRTUALKEYBOARD_STYLE, which can be set to the name of
+the built-in style, e.g. "retro", or any of the custom styles installed
+into the Styles directory:
+
+\code
+$$[QT_INSTALL_QML]/QtQuick/Enterprise/VirtualKeyboard/Styles
+\endcode
+
+In case the environment variable is not set, or contains an invalid
+style name, the virtual keyboard falls back in the default built-in style.
+
+\section2 Adding Custom Styles
+
+The process of creating a new style begins by creating a new subdirectory
+for the style in the virtual keyboard \e Styles directory. The directory
+name can not contain spaces or special characters other than underscore.
+Also, the directory name can not be the same as one of the built-in style,
+which currently includes "default" and "retro".
+
+A good starting point for creating a new style is to use an existing
+built-in style as a template and edit it. You can find the built-in
+styles from the virtual keyboard sources directory
+src/virtualkeyboard/content/styles. Copy one of the directories containing
+a built-in style into the \e Styles directory and rename it to "test".
+The directory structure should now be as follows:
+
+\code
+test/default_style.qrc
+test/style.qml
+test/images
+test/images/backspace.png
+test/images/check.png
+test/images/enter.png
+test/images/globe.png
+test/images/hidekeyboard.png
+test/images/search.png
+test/images/shift.png
+\endcode
+
+The QRC configuration file, which is unnecessary in this case, can
+be safely removed.
+
+\note The style.qml file should not be renamed, or otherwise the virtual
+      keyboard cannot load the style.
+
+Next, open the style.qml in your favorite editor and set the
+resourcePrefix property to an empty string. The resource prefix
+is not needed as the resources are contained in the same directory
+as the style.qml file.
+
+Also, to make it more obvious to see that the custom style is actually
+being loaded and used, set the keyboard background to a different color:
+
+\code
+keyboardBackground: Rectangle {
+    color: "gray"
+}
+\endcode
+
+The final step is to run the example application with your custom style:
+
+\code
+QT_VIRTUALKEYBOARD_STYLE=test virtualkeyboard
+\endcode
+
 */
diff --git a/src/virtualkeyboard/plugin.cpp b/src/virtualkeyboard/plugin.cpp
index 84575934..65c1f019 100644
--- a/src/virtualkeyboard/plugin.cpp
+++ b/src/virtualkeyboard/plugin.cpp
@@ -35,6 +35,7 @@
 #include "declarativeselectionlistmodel.h"
 #include "enterkeyaction.h"
 #include "enterkeyactionattachedtype.h"
+#include "declarativesettings.h"
 
 static QPointer<PlatformInputContext> platformInputContext;
 
@@ -79,6 +80,7 @@ QPlatformInputContext *PlatformInputContextPlugin::create(const QString &system,
 #endif
     qmlRegisterType<EnterKeyActionAttachedType>();
     qmlRegisterType<EnterKeyAction>("QtQuick.Enterprise.VirtualKeyboard", 1, 0, "EnterKeyAction");
+    qmlRegisterSingletonType<DeclarativeSettings>("QtQuick.Enterprise.VirtualKeyboard.Settings", 1, 0, "VirtualKeyboardSettings", DeclarativeSettings::registerSettingsModule);
 
     if (system.compare(system, QStringLiteral("qtvirtualkeyboard"), Qt::CaseInsensitive) == 0) {
         platformInputContext = new PlatformInputContext();
diff --git a/src/virtualkeyboard/settings.cpp b/src/virtualkeyboard/settings.cpp
new file mode 100644
index 00000000..2e1f29e9
--- /dev/null
+++ b/src/virtualkeyboard/settings.cpp
@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the Qt Virtual Keyboard add-on for Qt Enterprise.
+**
+** Licensees holding valid Qt Enterprise licenses may use this file in
+** accordance with the Qt Enterprise License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+**
+****************************************************************************/
+
+#include "settings.h"
+#include <QtCore/private/qobject_p.h>
+
+class SettingsPrivate : public QObjectPrivate
+{
+public:
+    SettingsPrivate() :
+        QObjectPrivate(),
+        style(),
+        styleName() {}
+
+    QString style;
+    QString styleName;
+};
+
+static QScopedPointer<Settings> s_settingsInstance;
+
+Settings::Settings(QObject *parent) :
+    QObject(*new SettingsPrivate(), parent)
+{
+}
+
+Settings *Settings::instance()
+{
+    if (!s_settingsInstance)
+        s_settingsInstance.reset(new Settings());
+    return s_settingsInstance.data();
+}
+
+QString Settings::style() const
+{
+    Q_D(const Settings);
+    return d->style;
+}
+
+void Settings::setStyle(const QString &style)
+{
+    Q_D(Settings);
+    if (d->style != style) {
+        d->style = style;
+        emit styleChanged();
+    }
+}
+
+QString Settings::styleName() const
+{
+    Q_D(const Settings);
+    return d->styleName;
+}
+
+void Settings::setStyleName(const QString &styleName)
+{
+    Q_D(Settings);
+    if (d->styleName != styleName) {
+        d->styleName = styleName;
+        emit styleNameChanged();
+    }
+}
diff --git a/src/virtualkeyboard/settings.h b/src/virtualkeyboard/settings.h
new file mode 100644
index 00000000..6092bc43
--- /dev/null
+++ b/src/virtualkeyboard/settings.h
@@ -0,0 +1,48 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the Qt Virtual Keyboard add-on for Qt Enterprise.
+**
+** Licensees holding valid Qt Enterprise licenses may use this file in
+** accordance with the Qt Enterprise License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+**
+****************************************************************************/
+
+#ifndef SETTINGS_H
+#define SETTINGS_H
+
+#include <QObject>
+
+class SettingsPrivate;
+
+class Settings : public QObject
+{
+    Q_OBJECT
+    Q_DISABLE_COPY(Settings)
+    Q_DECLARE_PRIVATE(Settings)
+
+    Settings(QObject *parent = 0);
+
+public:
+    static Settings *instance();
+
+    QString style() const;
+    void setStyle(const QString &style);
+
+    QString styleName() const;
+    void setStyleName(const QString &name);
+
+signals:
+    void styleChanged();
+    void styleNameChanged();
+};
+
+#endif // SETTINGS_H
diff --git a/src/virtualkeyboard/virtualkeyboard.pro b/src/virtualkeyboard/virtualkeyboard.pro
index 1026f5c6..0249f7e4 100644
--- a/src/virtualkeyboard/virtualkeyboard.pro
+++ b/src/virtualkeyboard/virtualkeyboard.pro
@@ -37,7 +37,9 @@ SOURCES += platforminputcontext.cpp \
     defaultinputmethod.cpp \
     abstractinputpanel.cpp \
     enterkeyaction.cpp \
-    enterkeyactionattachedtype.cpp
+    enterkeyactionattachedtype.cpp \
+    settings.cpp \
+    declarativesettings.cpp
 
 HEADERS += platforminputcontext.h \
     declarativeinputcontext.h \
@@ -51,12 +53,17 @@ HEADERS += platforminputcontext.h \
     abstractinputpanel.h \
     virtualkeyboarddebug.h \
     enterkeyaction.h \
-    enterkeyactionattachedtype.h
+    enterkeyactionattachedtype.h \
+    settings.h \
+    declarativesettings.h
 
+RESOURCES += \
+    content/styles/default/default_style.qrc \
+    content/styles/retro/retro_style.qrc
 retro-style {
-    RESOURCES += content/styles/retro/style.qrc
+    DEFINES += QT_VIRTUALKEYBOARD_DEFAULT_STYLE=\\\"retro\\\"
 } else {
-    RESOURCES += content/styles/default/style.qrc
+    DEFINES += QT_VIRTUALKEYBOARD_DEFAULT_STYLE=\\\"default\\\"
 }
 
 OTHER_FILES += content/InputPanel.qml \