diff options
Diffstat (limited to 'examples/quick/tutorials/gettingStartedQml/core')
7 files changed, 218 insertions, 175 deletions
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 |