From fc8b40f888139342ebe0d4ce7d507005572737db Mon Sep 17 00:00:00 2001 From: Topi Reinio Date: Thu, 1 Aug 2013 11:39:02 +0200 Subject: Doc: Update example used for QML getting started tutorial Update the example project referred to in Getting Started with Qt Quick tutorial. - Fix coding/comment style issues - Change plugin TARGET name, Use /imports as the destination directory - Fix qmldir with proper module info, delete unused qmldir from /core - Add a .qmlproject file Change-Id: If269e61fb76399faae753469dc251d07cc219139 Reviewed-by: Jerome Pasion --- .../tutorials/gettingStartedQml/core/Button.qml | 54 ++++----- .../tutorials/gettingStartedQml/core/EditMenu.qml | 39 ++++--- .../gettingStartedQml/core/FileDialog.qml | 61 ++++++---- .../tutorials/gettingStartedQml/core/FileMenu.qml | 128 +++++++++++---------- .../tutorials/gettingStartedQml/core/MenuBar.qml | 68 ++++++----- .../tutorials/gettingStartedQml/core/TextArea.qml | 36 +++--- .../quick/tutorials/gettingStartedQml/core/qmldir | 7 -- .../gettingStartedQml/filedialog/dialogPlugin.cpp | 7 +- .../gettingStartedQml/filedialog/dialogPlugin.h | 8 +- .../gettingStartedQml/filedialog/directory.cpp | 77 +++++++------ .../gettingStartedQml/filedialog/directory.h | 27 +++-- .../gettingStartedQml/filedialog/file.cpp | 2 - .../gettingStartedQml/filedialog/filedialog.pro | 27 +++-- .../tutorials/gettingStartedQml/filedialog/qmldir | 3 +- .../tutorials/gettingStartedQml/texteditor.qml | 57 ++++----- .../gettingStartedQml/texteditor.qmlproject | 20 ++++ 16 files changed, 353 insertions(+), 268 deletions(-) delete mode 100644 examples/quick/tutorials/gettingStartedQml/core/qmldir create mode 100644 examples/quick/tutorials/gettingStartedQml/texteditor.qmlproject diff --git a/examples/quick/tutorials/gettingStartedQml/core/Button.qml b/examples/quick/tutorials/gettingStartedQml/core/Button.qml index 43383021c9..35a0a618a9 100644 --- a/examples/quick/tutorials/gettingStartedQml/core/Button.qml +++ b/examples/quick/tutorials/gettingStartedQml/core/Button.qml @@ -38,71 +38,71 @@ ** ****************************************************************************/ - import QtQuick 2.0 Rectangle { - //identifier of the item + // Identifier of the item id: button - //these properties act as constants, useable outside this QML file + // These properties act as constants, useable outside this QML file property int buttonHeight: 75 property int buttonWidth: 150 - //attaches to the Text element's text content + // Attaches to the Text element's text content property string label property color textColor: buttonLabel.color - //the color highlight when the mouse hovers on the rectangle + // The color highlight when the mouse hovers on the rectangle property color onHoverColor: "lightsteelblue" property color borderColor: "transparent" - //buttonColor is set to the button's main color + // buttonColor is set to the button's main color property color buttonColor: "lightblue" property real labelSize: 14 - - //set appearance properties + // Set appearance properties radius: 6 antialiasing: true - border { width: 2; color: borderColor } - width: buttonWidth; height: buttonHeight + border.width: 2 + border.color: borderColor + width: buttonWidth + height: buttonHeight Text { id: buttonLabel anchors.centerIn: parent - text: label //bind the text to the parent's text + text: label // Bind the text to the parent's text color: "#DCDCCC" font.pointSize: labelSize } - //buttonClick() is callable and a signal handler, onButtonClick is automatically created + // buttonClick() is callable and a signal handler, + // onButtonClick is automatically created signal buttonClick() - //define the clickable area to be the whole rectangle - MouseArea { + // Define the clickable area to be the whole rectangle + MouseArea { id: buttonMouseArea - anchors.fill: parent //stretch the area to the parent's dimension + anchors.fill: parent // Stretch the area to the parent's dimension onClicked: buttonClick() - //if true, then onEntered and onExited called if mouse hovers in the mouse area - //if false, a button must be clicked to detect the mouse hover + // If true, then onEntered and onExited called if mouse hovers in the mouse area + // If false, a button must be clicked to detect the mouse hover hoverEnabled: true - //display a border if the mouse hovers on the button mouse area + // Display a border if the mouse hovers on the button mouse area onEntered: parent.border.color = onHoverColor - //remove the border if the mouse exits the button mouse area + //Remove the border if the mouse exits the button mouse area onExited: parent.border.color = borderColor } - //change the color of the button when pressed + // Change the color of the button when pressed color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor - //animate the color whenever the color property changes - Behavior on color { ColorAnimation{ duration: 55 } } - - //scale the button when pressed - scale: buttonMouseArea.pressed ? 1.1 : 1.00 - //Animate the scale property change - Behavior on scale { NumberAnimation{ duration: 55 } } + // Animate the color whenever the color property changes + Behavior on color { ColorAnimation { duration: 55 } } + // Scale the button when pressed + scale: buttonMouseArea.pressed ? 1.1 : 1.0 + // Animate the scale property change + Behavior on scale { NumberAnimation { duration: 55 } } } diff --git a/examples/quick/tutorials/gettingStartedQml/core/EditMenu.qml b/examples/quick/tutorials/gettingStartedQml/core/EditMenu.qml index d2e52dfad6..8bab04d6d6 100644 --- a/examples/quick/tutorials/gettingStartedQml/core/EditMenu.qml +++ b/examples/quick/tutorials/gettingStartedQml/core/EditMenu.qml @@ -38,66 +38,73 @@ ** ****************************************************************************/ - import QtQuick 2.0 Rectangle { id: editMenu - height: 480; width:1000 + width: 1000; height: 480 color: "powderblue" property color buttonBorderColor: "#7A8182" property color buttonFillColor: "#61BDCACD" property string menuName:"Edit" + gradient: Gradient { GradientStop { position: 0.0; color: "#6A7570" } GradientStop { position: 1.0; color: Qt.darker("#6A7570") } } Rectangle { - id:actionContainer - color:"transparent" + id: actionContainer + color: "transparent" anchors.centerIn: parent - width: parent.width; height: parent.height / 5 + width: parent.width + height: parent.height / 5 + Row { anchors.centerIn: parent - spacing: parent.width/9 + spacing: parent.width / 9 Button { id: loadButton buttonColor: buttonFillColor label: "Copy" labelSize: 16 borderColor: buttonBorderColor - height: actionContainer.height; width: actionContainer.width/6 + height: actionContainer.height + width: actionContainer.width / 6 onButtonClick: textArea.copy() gradient: Gradient { - GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) } - GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) } + GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor, 1.25) } + GradientStop { position: 0.67; color: Qt.darker(buttonFillColor, 1.3) } } } + Button { id: saveButton - height: actionContainer.height; width: actionContainer.width/6 + height: actionContainer.height + width: actionContainer.width / 6 buttonColor: buttonFillColor label: "Paste" borderColor: buttonBorderColor labelSize: 16 onButtonClick: textArea.paste() gradient: Gradient { - GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) } - GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) } + GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor, 1.25) } + GradientStop { position: 0.67; color: Qt.darker(buttonFillColor, 1.3) } } } + Button { id: exitButton label: "Select All" - height: actionContainer.height; width: actionContainer.width/6 + height: actionContainer.height + width: actionContainer.width/6 labelSize: 16 buttonColor: buttonFillColor - borderColor:buttonBorderColor + borderColor: buttonBorderColor onButtonClick: textArea.selectAll() gradient: Gradient { - GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) } - GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) } + GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor, 1.25) } + GradientStop { position: 0.67; color: Qt.darker(buttonFillColor, 1.3) } } } } diff --git a/examples/quick/tutorials/gettingStartedQml/core/FileDialog.qml b/examples/quick/tutorials/gettingStartedQml/core/FileDialog.qml index dc3ad09c9c..2744dcff79 100644 --- a/examples/quick/tutorials/gettingStartedQml/core/FileDialog.qml +++ b/examples/quick/tutorials/gettingStartedQml/core/FileDialog.qml @@ -37,17 +37,17 @@ ** $QT_END_LICENSE$ ** ****************************************************************************/ - import QtQuick 2.0 Rectangle { - id:dialog - height: 200 * partition; width: 200 + id: dialog + width: 200 + height: 200 * partition color: "transparent" signal selectChanged() signal notifyRefresh() - onNotifyRefresh:dirView.model = directory.files + onNotifyRefresh: dirView.model = directory.files property string selectedFile property int selectedIndex: 0 @@ -56,15 +56,17 @@ Rectangle { id: dirBox radius: 10 antialiasing: true - anchors.centerIn:parent - height: parent.height -15; width: parent.width -30 + anchors.centerIn: parent + height: parent.height -15 + width: parent.width - 30 Rectangle { - id:header - height: parent.height*0.1; width: parent.width - radius:3 + id: header + height: parent.height * 0.1 + width: parent.width + radius: 3 antialiasing: true - z:1 + z: 1 gradient: Gradient { GradientStop { position: 0.0; color: "#8C8F8C" } GradientStop { position: 0.17; color: "#6A6D6A" } @@ -72,32 +74,39 @@ Rectangle { GradientStop { position: 1.0; color: "#0e1B20" } } Text { - height: header.height; anchors.centerIn: header - text: "files:" + height: header.height + anchors.centerIn: header + text: "files:" color: "lightblue" font.weight: Font.Light font.italic: true } } + GridView { - id:dirView - width:parent.width; height:parent.height*.9 + id: dirView + width: parent.width + height: parent.height * 0.9 anchors.top: header.bottom - cellWidth: 100; cellHeight: 75 + cellWidth: 100 + cellHeight: 75 model: directory.files delegate: dirDelegate clip: true highlightMoveDuration: 40 } + Component { id: dirDelegate + Rectangle { - id:file + id: file color: "transparent" - width: GridView.view.cellWidth; height: GridView.view.cellHeight + width: dirView.cellWidth + height: dirView.cellHeight Text { - id:fileName + id: fileName width: parent.width anchors.centerIn: parent text: name @@ -107,14 +116,17 @@ Rectangle { elide: Text.ElideMiddle horizontalAlignment: Text.AlignHCenter } + Rectangle { id: selection - width: parent.width; height: parent.height + width: parent.width + height: parent.height anchors.centerIn: parent radius: 10 antialiasing: true scale: dirView.currentIndex == index ? 1 : 0.5 opacity: dirView.currentIndex == index ? 1 : 0 + Text { id: overlay width: parent.width @@ -126,18 +138,20 @@ Rectangle { elide: Text.ElideMiddle horizontalAlignment: Text.AlignHCenter } + Behavior on opacity { NumberAnimation{ duration: 45 } } Behavior on scale { NumberAnimation{ duration: 45 } } gradient: Gradient { - GradientStop { position: 0.0; color: Qt.lighter("lightsteelblue",1.25) } - GradientStop { position: 0.67; color: Qt.darker("lightsteelblue",1.3) } + GradientStop { position: 0.0; color: Qt.lighter("lightsteelblue", 1.25) } + GradientStop { position: 0.67; color: Qt.darker("lightsteelblue", 1.30) } } border.color: "lightsteelblue" border.width: 1 } + MouseArea { - id:fileMouseArea - anchors.fill:parent + id: fileMouseArea + anchors.fill: parent hoverEnabled: true onClicked: { @@ -156,6 +170,7 @@ Rectangle { } } } + gradient: Gradient { GradientStop { position: 0.0; color: "#A5333333" } GradientStop { position: 1.0; color: "#03333333" } diff --git a/examples/quick/tutorials/gettingStartedQml/core/FileMenu.qml b/examples/quick/tutorials/gettingStartedQml/core/FileMenu.qml index 9808aa74b5..c8667a0cc5 100644 --- a/examples/quick/tutorials/gettingStartedQml/core/FileMenu.qml +++ b/examples/quick/tutorials/gettingStartedQml/core/FileMenu.qml @@ -39,55 +39,58 @@ ****************************************************************************/ import QtQuick 2.0 -import "../filedialog" 1.0 +import FileDialog 1.0 Rectangle { id: fileMenu - height: 480; width:1000 + height: 480 + width: 1000 property color buttonBorderColor: "#7F8487" property color buttonFillColor: "#8FBDCACD" - property string fileContent:directory.fileContent + property string fileContent: directory.fileContent - //the menuName is accessible from outside this QML file + // menuName is accessible from outside this QML file property string menuName: "File" - //used to divide the screen into parts. - property real partition: 1/3 + // Used to divide the screen into parts + property real partition: 1 / 3 - color: "#6C646A" + color: "#6C646A" gradient: Gradient { - GradientStop { position: 0.0; color: "#6C646A" } - GradientStop { position: 1.0; color: Qt.darker("#6A6D6A") } + GradientStop { position: 0.0; color: "#6C646A" } + GradientStop { position: 1.0; color: Qt.darker("#6A6D6A") } } Directory { - id:directory + id: directory filename: textInput.text - onDirectoryChanged:fileDialog.notifyRefresh() + onDirectoryChanged: fileDialog.notifyRefresh() } Rectangle { - id:actionContainer + id: actionContainer - //make this rectangle invisible - color:"transparent" + // Make this rectangle invisible + color: "transparent" anchors.left: parent.left - //the height is a good proportion that creates more space at the top of - //the column of buttons - width: fileMenu.width * partition; height: fileMenu.height + // The height is a good proportion that creates more space at the + // top of the column of buttons + width: fileMenu.width * partition + height: fileMenu.height Column { anchors.centerIn: parent - spacing: parent.height/32 + spacing: parent.height / 32 + Button { id: saveButton label: "Save" borderColor: buttonBorderColor buttonColor: buttonFillColor - width: actionContainer.width/ 1.3 - height:actionContainer.height / 8 - labelSize:24 + width: actionContainer.width / 1.3 + height: actionContainer.height / 8 + labelSize: 24 onButtonClick: { directory.fileContent = textArea.textContent directory.filename = textInput.text @@ -98,15 +101,16 @@ Rectangle { GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) } } } + Button { id: loadButton - width: actionContainer.width/ 1.3 - height:actionContainer.height/ 8 + width: actionContainer.width / 1.3 + height: actionContainer.height / 8 buttonColor: buttonFillColor borderColor: buttonBorderColor label: "Load" - labelSize:24 - onButtonClick:{ + labelSize: 24 + onButtonClick: { directory.filename = textInput.text directory.loadFile() textArea.textContent = directory.fileContent @@ -118,13 +122,13 @@ Rectangle { } Button { id: newButton - width: actionContainer.width/ 1.3 - height: actionContainer.height/ 8 + width: actionContainer.width / 1.3 + height: actionContainer.height / 8 buttonColor: buttonFillColor borderColor: buttonBorderColor label: "New" labelSize: 24 - onButtonClick:{ + onButtonClick: { textArea.textContent = "" textInput.text = "" } @@ -132,9 +136,8 @@ Rectangle { GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) } GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) } } - } - Rectangle { + Rectangle{ id: space width: actionContainer.width/ 1.3 height: actionContainer.height / 16 @@ -142,8 +145,8 @@ Rectangle { } Button { id: exitButton - width: actionContainer.width/ 1.3 - height: actionContainer.height/ 8 + width: actionContainer.width / 1.3 + height: actionContainer.height / 8 label: "Exit" labelSize: 24 buttonColor: buttonFillColor @@ -156,75 +159,84 @@ Rectangle { } } } + Rectangle { - id:dialogContainer + id: dialogContainer - width: 2*fileMenu.width * partition; height: fileMenu.height - anchors.right:parent.right + width: 2 * fileMenu.width * partition + height: fileMenu.height + anchors.right: parent.right color: "transparent" Column { anchors.centerIn: parent - spacing: parent.height /640 + spacing: parent.height / 640 FileDialog { - id:fileDialog - height: 2*dialogContainer.height * partition + id: fileDialog + height: 2 * dialogContainer.height * partition width: dialogContainer.width onSelectChanged: textInput.text = selectedFile } Rectangle { - id:lowerPartition - height: dialogContainer.height * partition; width: dialogContainer.width + id: lowerPartition + height: dialogContainer.height * partition + width: dialogContainer.width color: "transparent" Rectangle { id: nameField - gradient: Gradient { + + gradient: Gradient{ GradientStop { position: 0.0; color: "#806F6F6F" } GradientStop { position: 1.0; color: "#136F6F6F" } } + radius: 10 - anchors { centerIn:parent; leftMargin: 15; rightMargin: 15; topMargin: 15 } - height: parent.height-15 - width: parent.width -20 - border { color: "#4A4A4A"; width:1 } + anchors { centerIn: parent; leftMargin: 15; rightMargin: 15; topMargin: 15 } + height: parent.height - 15 + width: parent.width - 20 + border { color:"#4A4A4A"; width: 1 } TextInput { id: textInput - z:2 + z: 2 anchors { bottom: parent.bottom; topMargin: 10; horizontalCenter: parent.horizontalCenter } width: parent.width - 10 - height: parent.height -10 + height: parent.height - 10 font.pointSize: 40 color: "lightsteelblue" focus: true } + Text { id: textInstruction anchors.centerIn: parent - text: "Select file name and press save or load" - font {pointSize: 11; weight: Font.Light; italic: true} + text: "Select file name and press Save or Load" + font { pointSize: 11; weight: Font.Light; italic: true } color: "lightblue" z: 2 opacity: (textInput.text == "") ? 1 : 0 } + Text { - id:fieldLabel + id: fieldLabel anchors { top: parent.top; left: parent.left } text: " file name: " font { pointSize: 11; weight: Font.Light; italic: true } color: "lightblue" - z:2 + z: 2 } + MouseArea { - anchors.centerIn:parent - width: nameField.width; height: nameField.height - onClicked: { - textInput.text = "" - textInput.focus = true - textInput.forceFocus() - } + anchors.centerIn: parent + width: nameField.width + height: nameField.height + onClicked: { + textInput.text = "" + textInput.focus = true + textInput.forceFocus() + } } } } diff --git a/examples/quick/tutorials/gettingStartedQml/core/MenuBar.qml b/examples/quick/tutorials/gettingStartedQml/core/MenuBar.qml index b53fc1b45a..f77e76a6d6 100644 --- a/examples/quick/tutorials/gettingStartedQml/core/MenuBar.qml +++ b/examples/quick/tutorials/gettingStartedQml/core/MenuBar.qml @@ -43,20 +43,21 @@ import QtQml.Models 2.1 Rectangle { id: menuBar - width: 1000; height:300 - color:"transparent" + width: 1000; height: 300 + color: "transparent" property color fileColor: "plum" property color editColor: "powderblue" - property real partition: 1/10 + property real partition: 1 / 10 Column { anchors.fill: parent - //container for the header and the buttons z: 1 + + // Container for the header and the buttons Rectangle { id: labelList - height:menuBar.height*partition + height: menuBar.height * partition width: menuBar.width color: "beige" gradient: Gradient { @@ -65,43 +66,50 @@ Rectangle { GradientStop { position: 0.98;color: "#3F3F3F" } GradientStop { position: 1.0; color: "#0e1B20" } } + Text { height: parent.height - anchors { right: labelRow.left ; verticalCenter: parent.bottom } - text: "menu: " + anchors { right: labelRow.left; verticalCenter: parent.bottom } + text: "menu: " color: "lightblue" font { weight: Font.Light; italic: true } } - //row displays its children in a vertical row + + // Row displays its children in a vertical row Row { id: labelRow anchors.centerIn: parent - spacing:40 + spacing: 40 + Button { id: fileButton - height: 20; width: 50 + width: 50; height: 20 label: "File" - buttonColor : menuListView.currentIndex == 0? fileColor : Qt.darker(fileColor, 1.5) - scale: menuListView.currentIndex == 0? 1.25: 1 - labelSize: menuListView.currentIndex == 0? 16:12 + buttonColor: menuListView.currentIndex == 0 ? fileColor : Qt.darker(fileColor, 1.5) + scale: menuListView.currentIndex == 0 ? 1.25 : 1 + labelSize: menuListView.currentIndex == 0 ? 16 : 12 radius: 1 - //on a button click, change the list's currently selected item to FileMenu + + // On a button click, change the list's currently selected item to FileMenu onButtonClick: menuListView.currentIndex = 0 + gradient: Gradient { GradientStop { position: 0.0; color: fileColor } GradientStop { position: 1.0; color: "#136F6F6F" } } } + Button { id: editButton - height: 20; width: 50 - buttonColor : menuListView.currentIndex == 1? Qt.darker(editColor, 1.5) : Qt.darker(editColor, 1.9) - scale: menuListView.currentIndex == 1? 1.25: 1 + width: 50; height: 20 + buttonColor : menuListView.currentIndex == 1 ? Qt.darker(editColor, 1.5) : Qt.darker(editColor, 1.9) + scale: menuListView.currentIndex == 1 ? 1.25 : 1 label: "Edit" radius: 1 - labelSize: menuListView.currentIndex == 1? 16:12 + labelSize: menuListView.currentIndex == 1 ? 16 : 12 + //on a button click, change the list's currently selected item to EditMenu - onButtonClick: menuListView.currentIndex = 1 + onButtonClick: menuListView.currentIndex = 1 gradient: Gradient { GradientStop { position: 0.0; color: editColor } GradientStop { position: 1.0; color: "#136F6F6F" } @@ -110,36 +118,40 @@ Rectangle { } } - //list view will display a model according to a delegate + // A ListView will display a model according to a delegate ListView { id: menuListView - width:menuBar.width; height: 9*menuBar.height*partition + width: menuBar.width + height: 9 * menuBar.height * partition - //the model contains the data + // The model contains the data model: menuListModel //control the movement of the menu switching snapMode: ListView.SnapOneItem orientation: ListView.Horizontal - boundsBehavior: Flickable.StopAtBounds + boundsBehavior: Flickable.StopAtBounds flickDeceleration: 5000 highlightFollowsCurrentItem: true - highlightMoveDuration:240 + highlightMoveDuration: 240 highlightRangeMode: ListView.StrictlyEnforceRange } } - //a list of visual items already have delegates handling their display + + // A list of visual items that already have delegates handling their display ObjectModel { id: menuListModel FileMenu { - id:fileMenu - width: menuListView.width; height: menuListView.height + id: fileMenu + width: menuListView.width + height: menuListView.height color: fileColor } EditMenu { color: editColor - width: menuListView.width; height: menuListView.height + width: menuListView.width + height: menuListView.height } } } diff --git a/examples/quick/tutorials/gettingStartedQml/core/TextArea.qml b/examples/quick/tutorials/gettingStartedQml/core/TextArea.qml index c9294ca5d5..dd6b89547f 100644 --- a/examples/quick/tutorials/gettingStartedQml/core/TextArea.qml +++ b/examples/quick/tutorials/gettingStartedQml/core/TextArea.qml @@ -41,45 +41,49 @@ import QtQuick 2.0 Rectangle { - id:textArea + id: textArea function paste() { textEdit.paste() } function copy() { textEdit.copy() } function selectAll() { textEdit.selectAll() } - width :400; height:400 + width: 400; height: 400 property color fontColor: "white" property alias textContent: textEdit.text + Flickable { id: flickArea - width: parent.width; height: parent.height - anchors.fill:parent + width: parent.width + height: parent.height + anchors.fill: parent boundsBehavior: Flickable.StopAtBounds flickableDirection: Flickable.HorizontalFlick interactive: true - //Will move the text Edit area to make the area visible when - //scrolled with keyboard strokes + + // Move the content coordinates to make the text area + // visible when scrolled with keyboard strokes function ensureVisible(r) { if (contentX >= r.x) - contentX = r.x; - else if (contentX+width <= r.x+r.width) - contentX = r.x+r.width-width; + contentX = r.x; + else if (contentX + width <= r.x + r.width) + contentX = r.x + r.width - width; if (contentY >= r.y) - contentY = r.y; - else if (contentY+height <= r.y+r.height) - contentY = r.y+r.height-height; + contentY = r.y; + else if (contentY + height <= r.y + r.height) + contentY = r.y + r.height - height; } TextEdit { id: textEdit - anchors.fill:parent - width:parent.width; height:parent.height - color:fontColor + anchors.fill: parent + width: parent.width + height: parent.height + color: fontColor focus: true wrapMode: TextEdit.Wrap - font.pointSize:10 + font.pointSize: 10 onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle) selectByMouse: true } diff --git a/examples/quick/tutorials/gettingStartedQml/core/qmldir b/examples/quick/tutorials/gettingStartedQml/core/qmldir deleted file mode 100644 index da1f373433..0000000000 --- a/examples/quick/tutorials/gettingStartedQml/core/qmldir +++ /dev/null @@ -1,7 +0,0 @@ -Button ./Button.qml -FileDialog ./FileDialog.qml -TextArea ./TextArea.qml -TextEditor ./TextEditor.qml -EditMenu ./EditMenu.qml -MenuBar ./MenuBar.qml -FileMenu ./FileMenu.qml diff --git a/examples/quick/tutorials/gettingStartedQml/filedialog/dialogPlugin.cpp b/examples/quick/tutorials/gettingStartedQml/filedialog/dialogPlugin.cpp index 7076f2c19c..b1ba601df3 100644 --- a/examples/quick/tutorials/gettingStartedQml/filedialog/dialogPlugin.cpp +++ b/examples/quick/tutorials/gettingStartedQml/filedialog/dialogPlugin.cpp @@ -41,11 +41,12 @@ #include "dialogPlugin.h" #include "directory.h" #include "file.h" -#include +#include void DialogPlugin::registerTypes(const char *uri) { - //register the class Directory into QML as a "Directory" element version 1.0 + // Register the class Directory into QML as a "Directory" type version 1.0 + // @uri FileDialog qmlRegisterType(uri, 1, 0, "Directory"); - qmlRegisterType(uri,1,0,"File"); + qmlRegisterType(uri, 1, 0, "File"); } diff --git a/examples/quick/tutorials/gettingStartedQml/filedialog/dialogPlugin.h b/examples/quick/tutorials/gettingStartedQml/filedialog/dialogPlugin.h index 5c4e5c971d..f23391f1df 100644 --- a/examples/quick/tutorials/gettingStartedQml/filedialog/dialogPlugin.h +++ b/examples/quick/tutorials/gettingStartedQml/filedialog/dialogPlugin.h @@ -46,11 +46,11 @@ class DialogPlugin : public QQmlExtensionPlugin { Q_OBJECT - Q_PLUGIN_METADATA(IID "org.qt-project.Qt.QQmlExtensionInterface") + Q_PLUGIN_METADATA(IID "org.qt-project.QmlExtensionPlugin.FileDialog") + public: + //registerTypes is inherited from QQmlExtensionPlugin + void registerTypes(const char *uri); -public: - // registerTypes is inherited from QQmlExtensionPlugin - void registerTypes(const char *uri); }; #endif diff --git a/examples/quick/tutorials/gettingStartedQml/filedialog/directory.cpp b/examples/quick/tutorials/gettingStartedQml/filedialog/directory.cpp index 0d4b551787..9535b97dd9 100644 --- a/examples/quick/tutorials/gettingStartedQml/filedialog/directory.cpp +++ b/examples/quick/tutorials/gettingStartedQml/filedialog/directory.cpp @@ -42,27 +42,28 @@ #include /* -Directory constructor + Directory constructor -Initialize the saves directory and creates the file list + Initialize the saves directory and creates the file list */ Directory::Directory(QObject *parent) : QObject(parent) { m_dir.cd(QDir::currentPath()); - // go to the saved directory. if not found, create save directory + // Go to the saved directory. if not found, create it m_saveDir = "saves"; if (m_dir.cd(m_saveDir) == 0) { m_dir.mkdir(m_saveDir); m_dir.cd(m_saveDir); } - m_filterList << "*.txt"; + m_filterList << "*.txt"; + refresh(); } /* -Directory::filesNumber -Return the number of Files + Directory::filesCount + Returns the number of files */ int Directory::filesCount() const { @@ -70,25 +71,25 @@ int Directory::filesCount() const } /* -Function called to append data onto list property + Function to append data into list property */ void appendFiles(QQmlListProperty *property, File *file) { - Q_UNUSED(property); - Q_UNUSED(file); - //Do nothing. can't add to a directory using this method + Q_UNUSED(property) + Q_UNUSED(file) + // Do nothing. can't add to a directory using this method } /* -Function called to retrieve file in the list using an index + Function called to retrieve file in the list using an index */ -File *fileAt(QQmlListProperty *property, int index) +File* fileAt(QQmlListProperty *property, int index) { return static_cast< QList *>(property->data)->at(index); } /* -Returns the number of files in the list + Returns the number of files in the list */ int filesSize(QQmlListProperty *property) { @@ -96,7 +97,7 @@ int filesSize(QQmlListProperty *property) } /* -Function called to empty the list property contents + Function called to empty the list property contents */ void clearFilesPtr(QQmlListProperty *property) { @@ -104,7 +105,7 @@ void clearFilesPtr(QQmlListProperty *property) } /* -Returns the list of files as a QQmlListProperty. + Returns the list of files as a QQmlListProperty. */ QQmlListProperty Directory::files() { @@ -113,7 +114,7 @@ QQmlListProperty Directory::files() } /* -Return the name of the currently selected file + Return the name of the currently selected file. */ QString Directory::filename() const { @@ -121,7 +122,7 @@ QString Directory::filename() const } /* -Return the file's content as a string. + Return the file's content as a string. */ QString Directory::fileContent() const { @@ -129,7 +130,7 @@ QString Directory::fileContent() const } /* -Set the file name of the current file + Set the file name of the current file. */ void Directory::setFilename(const QString &str) { @@ -140,7 +141,7 @@ void Directory::setFilename(const QString &str) } /* -Set the content of the file as a string + Set the content of the file as a string. */ void Directory::setFileContent(const QString &str) { @@ -151,32 +152,35 @@ void Directory::setFileContent(const QString &str) } /* -Called from QML to save the file using the filename and file content. -Saving makes sure that the file has a .txt extension. + Called from QML to save the file using the filename and content. + Makes sure that the file has a .txt extension. */ void Directory::saveFile() { - if (currentFile.name().isEmpty()) { - qWarning()<< "Empty filename. no save"; + if (currentFile.name().size() == 0) { + qWarning() << "Cannot save file, empty filename."; return; } + QString extendedName = currentFile.name(); if (!currentFile.name().endsWith(".txt")) { extendedName.append(".txt"); } + QFile file(m_dir.filePath(extendedName)); if (file.open(QFile::WriteOnly | QFile::Truncate)) { QTextStream outStream(&file); outStream << m_fileContent; } + file.close(); refresh(); emit directoryChanged(); } /* -Load the contents of a file. -Only loads files with a .txt extension + Load the contents of a file. + Only loads files with a .txt extension */ void Directory::loadFile() { @@ -186,30 +190,35 @@ void Directory::loadFile() extendedName.append(".txt"); } - QFile file(m_dir.filePath(extendedName)); - if (file.open(QFile::ReadOnly)) { + QFile file( m_dir.filePath(extendedName)); + if (file.open(QFile::ReadOnly )) { QTextStream inStream(&file); - m_fileContent = inStream.readAll(); + QString line; + + do { + line = inStream.read(75); + m_fileContent.append(line); + } while (!line .isNull()); } file.close(); } /* -Reloads the content of the files list. This is to ensure that the newly -created files are added onto the list. + Reloads the content of the files list. This is to ensure + that the newly created files are added onto the list. */ void Directory::refresh() { - m_dirFiles = m_dir.entryList(m_filterList,QDir::Files,QDir::Name); + m_dirFiles = m_dir.entryList(m_filterList, QDir::Files, QDir::Name); m_fileList.clear(); - File *file; - for (int i = 0; i < m_dirFiles.size(); ++i) { + File * file; + for (int i = 0; i < m_dirFiles.size(); i ++) { file = new File(); if (m_dirFiles.at(i).endsWith(".txt")) { QString name = m_dirFiles.at(i); - file->setName(name.remove(".txt",Qt::CaseSensitive)); + file->setName(name.remove(".txt", Qt::CaseSensitive)); } else { file->setName(m_dirFiles.at(i)); } diff --git a/examples/quick/tutorials/gettingStartedQml/filedialog/directory.h b/examples/quick/tutorials/gettingStartedQml/filedialog/directory.h index 2cdfab0e43..de170f28b0 100644 --- a/examples/quick/tutorials/gettingStartedQml/filedialog/directory.h +++ b/examples/quick/tutorials/gettingStartedQml/filedialog/directory.h @@ -44,41 +44,40 @@ #include "file.h" #include -#include -#include #include #include +#include +#include -class Directory : public QObject -{ +class Directory : public QObject { Q_OBJECT - // number of files in the directory + // Number of files in the directory Q_PROPERTY(int filesCount READ filesCount) - // list property containing file names as QString + // List property containing file names as QString Q_PROPERTY(QQmlListProperty files READ files CONSTANT) - // file name of the text file to read/write + // File name of the text file to read/write Q_PROPERTY(QString filename READ filename WRITE setFilename NOTIFY filenameChanged) - // text content of the file + // Text content of the file Q_PROPERTY(QString fileContent READ fileContent WRITE setFileContent NOTIFY fileContentChanged) public: Directory(QObject *parent = 0); - // properties' read functions + // Properties' read functions int filesCount() const; QString filename() const; QString fileContent() const; QQmlListProperty files(); - // properties' write functions + // Properties' write functions void setFilename(const QString &str); void setFileContent(const QString &str); - // accessible from QML + // Accessible from QML Q_INVOKABLE void saveFile(); Q_INVOKABLE void loadFile(); @@ -94,13 +93,13 @@ private: QString m_saveDir; QStringList m_filterList; - //contains the file data in QString format + // Contains the file data in QString format QString m_fileContent; - //Registered to QML in a plugin. Accessible from QML as a property of Directory + // Registered to QML in a plugin. Accessible from QML as a property of Directory QList m_fileList; - //refresh content of the directory + // Refresh content of the directory void refresh(); }; diff --git a/examples/quick/tutorials/gettingStartedQml/filedialog/file.cpp b/examples/quick/tutorials/gettingStartedQml/filedialog/file.cpp index 983c24975b..e2cdab003a 100644 --- a/examples/quick/tutorials/gettingStartedQml/filedialog/file.cpp +++ b/examples/quick/tutorials/gettingStartedQml/filedialog/file.cpp @@ -38,7 +38,6 @@ ** ****************************************************************************/ - #include "file.h" File::File(QObject *parent) : QObject(parent) @@ -57,4 +56,3 @@ void File::setName(const QString &str) emit nameChanged(); } } - diff --git a/examples/quick/tutorials/gettingStartedQml/filedialog/filedialog.pro b/examples/quick/tutorials/gettingStartedQml/filedialog/filedialog.pro index da06975e3b..0886f37b1f 100644 --- a/examples/quick/tutorials/gettingStartedQml/filedialog/filedialog.pro +++ b/examples/quick/tutorials/gettingStartedQml/filedialog/filedialog.pro @@ -2,21 +2,32 @@ TEMPLATE = lib CONFIG += plugin QT += qml -DESTDIR += ../plugins +DESTDIR += ../imports/FileDialog OBJECTS_DIR = tmp MOC_DIR = tmp -TARGET = FileDialog +TARGET = filedialogplugin -HEADERS += directory.h \ +HEADERS += \ + directory.h \ file.h \ dialogPlugin.h -SOURCES += directory.cpp \ +SOURCES += \ + directory.cpp \ file.cpp \ dialogPlugin.cpp -target.path = $$[QT_INSTALL_EXAMPLES]/quick/tutorials/gettingStartedQml/filedialog -qml.files = qmldir -qml.path = $$[QT_INSTALL_EXAMPLES]/quick/tutorials/gettingStartedQml/filedialog -INSTALLS += target qml +OTHER_FILES += qmldir + +copyfile = $$PWD/qmldir +copydest = $$DESTDIR + +# On Windows, use backslashes as directory separators +win32: { + copyfile ~= s,/,\\,g + copydest ~= s,/,\\,g +} + +# Copy the qmldir file to the same folder as the plugin binary +QMAKE_POST_LINK += $$QMAKE_COPY $$quote($$copyfile) $$quote($$copydest) $$escape_expand(\\n\\t) diff --git a/examples/quick/tutorials/gettingStartedQml/filedialog/qmldir b/examples/quick/tutorials/gettingStartedQml/filedialog/qmldir index 4a8d13d026..fbcd5f7fd3 100644 --- a/examples/quick/tutorials/gettingStartedQml/filedialog/qmldir +++ b/examples/quick/tutorials/gettingStartedQml/filedialog/qmldir @@ -1 +1,2 @@ -plugin FileDialog ../plugins +module FileDialog +plugin filedialogplugin diff --git a/examples/quick/tutorials/gettingStartedQml/texteditor.qml b/examples/quick/tutorials/gettingStartedQml/texteditor.qml index 6f62301413..1850476b53 100644 --- a/examples/quick/tutorials/gettingStartedQml/texteditor.qml +++ b/examples/quick/tutorials/gettingStartedQml/texteditor.qml @@ -44,14 +44,14 @@ import "core" Rectangle { id: screen width: 1000; height: 1000 - property int partition: height/3 - border { width: 1; color: "#DCDCCC"} + property int partition: height / 3 state: "DRAWER_CLOSED" - //Item 1: MenuBar on the top portion of the screen + // Item 1: MenuBar on the top portion of the screen MenuBar { - id:menuBar - height: screen.partition; width: screen.width + id: menuBar + height: screen.partition + width: screen.width z: 1 } @@ -61,26 +61,31 @@ Rectangle { y: drawer.height color: "#3F3F3F" fontColor: "#DCDCCC" - height: partition*2; width:parent.width + height: partition * 2 + width: parent.width } - //Item 3: The drawer handle + // Item 3: The drawer handle Rectangle { id: drawer - height: 15; width: parent.width - border { color : "#6A6D6A"; width: 1 } + height:15; width: parent.width + border.color : "#6A6D6A" + border.width: 1 z: 1 + gradient: Gradient { - GradientStop { position: 0.0; color: "#8C8F8C" } - GradientStop { position: 0.17; color: "#6A6D6A" } - GradientStop { position: 0.77; color: "#3F3F3F" } - GradientStop { position: 1.0; color: "#6A6D6A" } - } + GradientStop { position: 0.0; color: "#8C8F8C" } + GradientStop { position: 0.17; color: "#6A6D6A" } + GradientStop { position: 0.77; color: "#3F3F3F" } + GradientStop { position: 1.0; color: "#6A6D6A" } + } + Image { id: arrowIcon source: "images/arrow.png" anchors.horizontalCenter: parent.horizontalCenter - Behavior{ NumberAnimation { property: "rotation"; easing.type: Easing.OutExpo } } + + Behavior { NumberAnimation { property: "rotation"; easing.type: Easing.OutExpo } } } MouseArea { @@ -88,30 +93,28 @@ Rectangle { anchors.fill: parent hoverEnabled: true onEntered: parent.border.color = Qt.lighter("#6A6D6A") - onExited: parent.border.color = "#6A6D6A" + onExited: parent.border.color = "#6A6D6A" onClicked: { - if (screen.state == "DRAWER_CLOSED") { + if (screen.state == "DRAWER_CLOSED") screen.state = "DRAWER_OPEN" - } - else if (screen.state == "DRAWER_OPEN"){ + else if (screen.state == "DRAWER_OPEN") screen.state = "DRAWER_CLOSED" - } } } } //! [states] - states:[ + states: [ State { name: "DRAWER_OPEN" - PropertyChanges { target: menuBar; y: 0} - PropertyChanges { target: textArea; y: partition + drawer.height} - PropertyChanges { target: drawer; y: partition} - PropertyChanges { target: arrowIcon; rotation: 180} + PropertyChanges { target: menuBar; y: 0 } + PropertyChanges { target: textArea; y: partition + drawer.height } + PropertyChanges { target: drawer; y: partition } + PropertyChanges { target: arrowIcon; rotation: 180 } }, State { name: "DRAWER_CLOSED" - PropertyChanges { target: menuBar; y:-height; } + PropertyChanges { target: menuBar; y: -height; } PropertyChanges { target: textArea; y: drawer.height; height: screen.height - drawer.height } PropertyChanges { target: drawer; y: 0 } PropertyChanges { target: arrowIcon; rotation: 0 } @@ -123,7 +126,7 @@ Rectangle { transitions: [ Transition { to: "*" - NumberAnimation { target: textArea; properties: "y, height"; duration: 100; easing.type:Easing.OutExpo } + NumberAnimation { target: textArea; properties: "y, height"; duration: 100; easing.type: Easing.OutExpo } NumberAnimation { target: menuBar; properties: "y"; duration: 100; easing.type: Easing.OutExpo } NumberAnimation { target: drawer; properties: "y"; duration: 100; easing.type: Easing.OutExpo } } diff --git a/examples/quick/tutorials/gettingStartedQml/texteditor.qmlproject b/examples/quick/tutorials/gettingStartedQml/texteditor.qmlproject new file mode 100644 index 0000000000..72bdcdea73 --- /dev/null +++ b/examples/quick/tutorials/gettingStartedQml/texteditor.qmlproject @@ -0,0 +1,20 @@ +import QmlProject 1.0 + +Project { + mainFile: "texteditor.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + + JavaScriptFiles { + directory: "." + } + + ImageFiles { + directory: "." + } + + importPaths: ["./imports"] +} -- cgit v1.2.3