button and textfield in qml

git-svn-id: http://cpunk.de/svn/src/gpg4usb/trunk@1053 34ebc366-c3a9-4b3c-9f84-69acf7962910

7 files changed, 182 insertions, 6 deletions

diff --git a/gpg4usb.pro b/gpg4usb.pro
index fcf4c19..1a282ad 100644
--- a/gpg4usb.pro
+++ b/gpg4usb.pro
@@ -101,6 +101,8 @@ contains(DEFINES, GPG4USB_NON_PORTABLE) {
 }
 
 OTHER_FILES += \
-    qml/keydetails.qml
+    qml/keydetails.qml \
+    qml/Button.qml \
+    qml/TextField.qml
 
 
diff --git a/gpg4usb.qrc b/gpg4usb.qrc
index ed4f8f5..54bdb4d 100644
--- a/gpg4usb.qrc
+++ b/gpg4usb.qrc
@@ -51,5 +51,7 @@
         <file alias="button_plus.png">release/icons/button_plus.png</file>
         <file alias="button_next.png">release/icons/button_next.png</file>
         <file alias="button_previous.png">release/icons/button_previous.png</file>
+        <file>qml/Button.qml</file>
+        <file>qml/TextField.qml</file>
     </qresource>
 </RCC>
diff --git a/qml/Button.qml b/qml/Button.qml
new file mode 100644
index 0000000..3c02dea
--- /dev/null
+++ b/qml/Button.qml
@@ -0,0 +1,97 @@
+import QtQuick 1.0
+
+ Rectangle {
+     id: container
+
+     property variant text
+     signal clicked
+
+     height: text.height + 10; width: text.width + 20
+     border.width: 1
+     radius: 4
+     smooth: true
+
+     gradient: Gradient {
+         GradientStop {
+             position: 0.0
+             color: !mouseArea.pressed ? activePalette.light : activePalette.button
+         }
+         GradientStop {
+             position: 1.0
+             color: !mouseArea.pressed ? activePalette.button : activePalette.dark
+         }
+     }
+
+     SystemPalette { id: activePalette }
+
+     MouseArea {
+         id: mouseArea
+         anchors.fill: parent
+         onClicked: container.clicked()
+     }
+
+     Text {
+         id: text
+         anchors.centerIn:parent
+         font.pointSize: 10
+         text: parent.text
+         color: activePalette.buttonText
+     }
+ }
+
+//import QtQuick 1.0
+
+// Rectangle {
+//     id: container
+
+//     property string text: "Button"
+//     property string image: ""
+
+//     signal clicked
+
+//     //width: buttonLabel.width + 5; height: buttonLabel.height + buttonImage.height + 5
+//     width: 60
+//     height: 60
+//     border { width: 1; color: Qt.darker(activePalette.button) }
+//     smooth: true
+//     radius: 8
+
+//     // color the button with a gradient
+//     gradient: Gradient {
+//         GradientStop {
+//             position: 0.0
+//             color: {
+//                 if (mouseArea.pressed)
+//                     return activePalette.dark
+//                 else
+//                     return activePalette.light
+//             }
+//         }
+//         GradientStop { position: 1.0; color: activePalette.button }
+//     }
+
+//     MouseArea {
+//         id: mouseArea
+//         anchors.fill: parent
+//         onClicked: container.clicked();
+//     }
+
+//     Image {
+//         id: buttonImage
+//         y: 5
+//         source: container.image
+//         height: 30
+//         width: 30
+//         anchors.horizontalCenter: parent.horizontalCenter
+//         //anchors.fill: parent
+//     }
+
+//     Text {
+//         id: buttonLabel
+//         //anchors.centerIn: container
+//         anchors { top: buttonImage.bottom; horizontalCenter: parent.horizontalCenter }
+//         color: activePalette.buttonText
+//         text: container.text
+//         horizontalAlignment: Text.AlignLeft
+//     }
+// }
diff --git a/qml/TextField.qml b/qml/TextField.qml
new file mode 100644
index 0000000..1d3c12d
--- /dev/null
+++ b/qml/TextField.qml
@@ -0,0 +1,41 @@
+import QtQuick 1.1
+
+Rectangle {
+
+    id: textField
+
+    property alias text: textInput.text
+
+    //width: 100
+    //height: 62
+
+    //Rectangle {
+     //   id: rectangle4
+        width: 114
+        height: 28
+        color: "#ffffff"
+        radius: 3
+        border.width: 1
+        border.color: "#999999"
+    //}
+
+
+
+    TextInput {
+        id: textInput
+        width: 102
+        height: 20
+        color: "#151515"
+        text: parent.text
+        selectionColor: "#008000"
+        font.pixelSize: 12
+        anchors.centerIn:parent
+        //onActiveFocusChanged: rectangle4.border.color = "#0000ff";
+        onActiveFocusChanged: {
+                if (textInput.activeFocus)
+                    parent.border.color = "#0000ff";
+                else
+                    parent.border.color = "#999999";
+            }
+    }
+}
diff --git a/qml/keydetails.qml b/qml/keydetails.qml
index 29e83a6..106f6b9 100644
--- a/qml/keydetails.qml
+++ b/qml/keydetails.qml
@@ -1,8 +1,8 @@
 import QtQuick 1.1
 
-Rectangle {
-    width: 1600   //these are the only explicit sizes set
-    height: 1200   //all others are relative
+FocusScope {
+    //width: 1600   //these are the only explicit sizes set
+    //height: 1200   //all others are relative
 
     anchors.fill: parent
 
@@ -85,5 +85,35 @@ Rectangle {
          font.pixelSize:22
      }
 
+     TextField {
+         x: 119
+         y: 155
+         id: tf1
+         text: "some other text"
+     }
+
+     Button {
+         x: 246
+         y: 155
+         text: "ok"
+         onClicked: console.log("ok clicked, text: " +  tf1.text)
+     }
+
+     TextField {
+         x: 119
+         y: 188
+         id: tf2
+         text: "some other text"
+     }
+
+     Button {
+         x: 246
+         y: 188
+         text: "ok2"
+         onClicked: console.log("ok2: " + tf2.text)
+     }
+
+
+
 
 }
diff --git a/qmlpage.cpp b/qmlpage.cpp
index 464566c..277eb61 100644
--- a/qmlpage.cpp
+++ b/qmlpage.cpp
@@ -1,6 +1,6 @@
 #include "qmlpage.h"
 #include <QtDeclarative/QDeclarativeView>
-#include <QVBoxLayout>
+#include <QHBoxLayout>
 #include <QDebug>
 #include <QDeclarativeContext>
 
@@ -11,6 +11,9 @@ QMLPage::QMLPage(KgpgCore::KgpgKey key, QWidget *parent) :
 
     // http://harmattan-dev.nokia.com/docs/library/html/qt4/qml-integration.html
     // http://qt-project.org/doc/qt-4.8/qtbinding.html
+    // http://jryannel.wordpress.com/
+    // http://stackoverflow.com/questions/5594769/normal-desktop-user-interface-controls-with-qml
+
     QDeclarativeView *qmlView = new QDeclarativeView;
     qmlView->setResizeMode(QDeclarativeView::SizeRootObjectToView);
     qmlView->setSource(QUrl("qrc:/qml/keydetails.qml"));
@@ -22,7 +25,7 @@ QMLPage::QMLPage(KgpgCore::KgpgKey key, QWidget *parent) :
 
     qDebug() << "qml:::::" << QUrl::fromLocalFile("keydetails.qml");
 
-    QVBoxLayout *mainLayout = new QVBoxLayout(this);
+    QHBoxLayout *mainLayout = new QHBoxLayout(this);
     mainLayout->setSpacing(0);
     mainLayout->setContentsMargins(0,0,0,0);
     mainLayout->addWidget(qmlView);
diff --git a/textedit.cpp b/textedit.cpp
index 22473aa..ca2a904 100644
--- a/textedit.cpp
+++ b/textedit.cpp
@@ -68,6 +68,7 @@ void TextEdit::slotNewHelpTab(QString title, QString path)
 
 void TextEdit::slotNewQMLTab(QString title, KgpgCore::KgpgKey key) {
     QMLPage *page = new QMLPage(key);
+    // todo: should parent also be given?
     tabWidget->addTab(page, title);
     tabWidget->setCurrentIndex(tabWidget->count() - 1);
 }