add ch06 content

pthis · Jul 8, 2021 · 4030fd9 · 4030fd9
1 parent 4d40620
commit 4030fd9
Show file tree

Hide file tree

Showing 12 changed files with 138 additions and 40 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -243,7 +243,7 @@ function ch07Sidebar() {
 
 function ch06Sidebar() {
   return {
-    title: "QtQuick Controls 2",
+    title: "QtQuick Controls (Qt5)",
     path: '/ch06-controls/controls2',
     collapsable: false,
     children: [
@@ -259,7 +259,7 @@ function ch06Sidebar() {
 
 function ch05Sidebar() {
   return {
-    title: "Fluid Elements",
+    title: "Fluid Elements (Qt5)",
     path: '/ch05-fluid/fluid-elements',
     collapsable: false,
     children: [
@@ -273,7 +273,7 @@ function ch05Sidebar() {
 
 function ch04Sidebar() {
   return {
-    title: "Quick Starter",
+    title: "Quick Starter (Qt6 - Draft)",
     path: '/ch04-qmlstart/quick-start',
     collapsable: false,
     children: [
@@ -292,7 +292,7 @@ function ch04Sidebar() {
 
 function ch03Sidebar() {
   return {
-    title: "Qt Creator IDE",
+    title: "Qt Creator IDE (Qt6 - Draft)",
     path: '/ch03-qtcreator/qt-creator',
     collapsable: false,
     children: [
@@ -310,7 +310,7 @@ function ch03Sidebar() {
 
 function ch02Sidebar() {
   return {
-    title: "Getting Started",
+    title: "Getting Started (Qt6 - Draft)",
     path: '/ch02-start/quick-start',
     collapsable: false,
     children: [
@@ -325,7 +325,7 @@ function ch02Sidebar() {
 
 function ch01Sidebar() {
   return { 
-    title: "Meet Qt",
+    title: "Meet Qt (Qt6 - Draft)",
     path: '/ch01-meetqt/meet-qt',
     collapsable: false,
     children: [

diff --git a/docs/ch04-qmlstart/advanced.md b/docs/ch04-qmlstart/advanced.md
@@ -6,4 +6,4 @@ QML and Javascript are interpreted languages. This means that they do not have t
 
 The QML engine uses just-in-time (JIT) compilation to improve performance. It also caches the intermediate output to avoid having to recompile. This works seamlessly for you as a developer. The only trace of this is that files ending with `qmlc` and `jsc` can be found next to the source files.
 
-If you want to avoid the initial start-up penalty induced by the initial parsing you can also pre-compile your QML and Javascript. This requires you to put your code into a Qt resource file and is described in detail in the [Compiling QML Ahead of Time](http://doc.qt.io/qt-5/qtquick-deployment.html#compiling-qml-ahead-of-time) chapter in the Qt documentation.
+If you want to avoid the initial start-up penalty induced by the initial parsing you can also pre-compile your QML and Javascript. This requires you to put your code into a Qt resource file and is described in detail in the [Compiling QML Ahead of Time](http://doc.qt.io/qt-6/qtquick-deployment.html#compiling-qml-ahead-of-time) chapter in the Qt documentation.
diff --git a/docs/ch04-qmlstart/components.md b/docs/ch04-qmlstart/components.md
@@ -56,7 +56,7 @@ To achieve this we create a `Button.qml` file and copy our button UI inside. Add
 ```qml
 // Button.qml
 
-import QtQuick 2.5
+import QtQuick
 
 Rectangle {
     id: root

diff --git a/docs/ch04-qmlstart/core-elements.md b/docs/ch04-qmlstart/core-elements.md
@@ -46,6 +46,13 @@ Rectangle {
 
 ::: tip
 Valid colors values are colors from the SVG color names (see  [http://www.w3.org/TR/css3-color/#svg-color](http://www.w3.org/TR/css3-color/#svg-color)). You can provide colors in QML in different ways, but the most common way is an RGB string (‘#FF4444’) or as a color name (e.g. ‘white’).
+
+A random color can be created using some JavaScript.
+
+```qml
+color: Qt.rgba( Math.random(), Math.random(), Math.random(), 1 )
+```
+
 :::
 
 Besides a fill color and a border the rectangle also supports custom gradients.
@@ -90,7 +97,11 @@ Text {
 
 ![](./assets/text.png)
 
-Text can be aligned to each side and the center using the `horizontalAlignment` and `verticalAlignment` properties. To further enhance the text rendering you can use the `style` and `styleColor` property, which allows you render the text in outline, raised and sunken mode. For longer text, you often want to define a *break* position like *A very … long text*, this can be achieved using the `elide` property. The `elide` property allows you to set the elide position to the left, right or middle of your text. In case you don’t want the ‘…’ of the elide mode to appear but still want to see the full text you can also wrap the text using the `wrapMode` property (works only when the width is explicitly set):
+Text can be aligned to each side and the center using the `horizontalAlignment` and `verticalAlignment` properties. To further enhance the text rendering you can use the `style` and `styleColor` property, which allows you render the text in outline, raised and sunken mode. 
+
+For longer text, you often want to define a *break* position like *A very … long text*, this can be achieved using the `elide` property. The `elide` property allows you to set the elide position to the left, right or middle of your text. 
+
+In case you don’t want the ‘…’ of the elide mode to appear but still want to see the full text you can also wrap the text using the `wrapMode` property (works only when the width is explicitly set):
 
 ```qml
 Text {
@@ -120,7 +131,7 @@ Often when you want to layout `Text` elements you need to differentiate between
 
 ## Image Element
 
-An `Image` element is able to display images in various formats (e.g. PNG, JPG, GIF, BMP, WEBP). *For the full list of supported image formats, please consult the Qt documentation*. Besides the obvious `source` property to provide the image URL, it contains a `fillMode` which controls the resizing behavior.
+An `Image` element is able to display images in various formats (e.g. `PNG`, `JPG`, `GIF`, `BMP`, `WEBP`). *For the full list of supported image formats, please consult the Qt documentation*. Besides the obvious `source` property to provide the image URL, it contains a `fillMode` which controls the resizing behavior.
 
 ```qml
 Image {
@@ -181,15 +192,15 @@ Rectangle {
 }
 ```
 
-![](./assets/mousearea1.png)
+![MouseArea](./assets/mousearea1.png)
 
-![](./assets/mousearea2.png)
+![MouseArea](./assets/mousearea2.png)
 
 ::: tip
 This is an important aspect of Qt Quick, the input handling is separated from the visual presentation. By this it allows you to show the user an interface element, but the interaction area can be larger.
 :::
 
 ::: tip
-For more complex interaction, [Qt Quick Input Handlers](https://doc-snapshots.qt.io/qt5-dev/qtquickhandlers-index.html) where introduced with Qt 5.12. They are intended to be used instead of elements such as `MouseArea` and `Flickable` and offer greater control and flexibility. The idea is to handle one interaction aspect in each handler instance instead of centralizing the handling of all events from a given source in a single element, which was the case before.
+For more complex interactionsee [Qt Quick Input Handlers](https://doc.qt.io/qt-6/qtquickhandlers-index.html). They are intended to be used instead of elements such as `MouseArea` and `Flickable` and offer greater control and flexibility. The idea is to handle one interaction aspect in each handler instance instead of centralizing the handling of all events from a given source in a single element, which was the case before.
 :::
 
diff --git a/docs/ch04-qmlstart/input.md b/docs/ch04-qmlstart/input.md
@@ -9,7 +9,7 @@ The `TextInput` allows the user to enter a line of text. The element supports in
 ```qml
 // textinput.qml
 
-import QtQuick 2.5
+import QtQuick
 
 Rectangle {
     width: 200
@@ -41,7 +41,7 @@ The user can click inside a `TextInput` to change the focus. To support switchin
 ```qml
 // textinput2.qml
 
-import QtQuick 2.5
+import QtQuick
 
 Rectangle {
     width: 200
@@ -76,7 +76,7 @@ We move this piece of code into our own component called `TLineEditV1` for reuse
 ```qml
 // TLineEditV1.qml
 
-import QtQuick 2.5
+import QtQuick
 
 Rectangle {
     width: 96; height: input.height + 8
@@ -126,7 +126,7 @@ A focus scope declares that the last child element with `focus: true` receives t
 ```qml
 // TLineEditV2.qml
 
-import QtQuick 2.5
+import QtQuick
 
 FocusScope {
     width: 96; height: input.height + 8
@@ -174,7 +174,7 @@ The `TextEdit` is very similar to `TextInput` and support a multi-line text edit
 ```qml
 // TTextEdit.qml
 
-import QtQuick 2.5
+import QtQuick
 
 FocusScope {
     width: 96; height: 96
@@ -202,7 +202,7 @@ You can use it like the `TLineEdit` component
 ```qml
 // textedit.qml
 
-import QtQuick 2.5
+import QtQuick
 
 Rectangle {
     width: 136
@@ -228,7 +228,7 @@ The attached property `Keys` allows executing code based on certain key presses.
 ```qml
 // keys.qml
 
-import QtQuick 2.5
+import QtQuick
 
 DarkSquare {
     width: 400; height: 200

diff --git a/docs/ch04-qmlstart/positioning.md b/docs/ch04-qmlstart/positioning.md
@@ -10,7 +10,7 @@ Before we go into details, let me introduce some helper elements. The red, blue,
 ```qml
 // RedSquare.qml
 
-import QtQuick 2.5
+import QtQuick
 
 Rectangle {
     width: 48
@@ -29,7 +29,7 @@ The `Column` element arranges child items into a column by stacking them on top
 ```qml
 // column.qml
 
-import QtQuick 2.5
+import QtQuick
 
 DarkSquare {
     id: root
@@ -54,7 +54,7 @@ The `Row` element places its child items next to each other, either from the lef
 ```qml
 // row.qml
 
-import QtQuick 2.5
+import QtQuick
 
 BrightSquare {
     id: root
@@ -78,7 +78,7 @@ The `Grid` element arranges its children in a grid, by setting the `rows` and `c
 ```qml
 // grid.qml
 
-import QtQuick 2.5
+import QtQuick
 
 BrightSquare {
     id: root
@@ -106,7 +106,7 @@ The final positioner is `Flow`. It adds its child items in a flow. The direction
 ```qml
 // flow.qml
 
-import QtQuick 2.5
+import QtQuick
 
 BrightSquare {
     id: root
@@ -132,7 +132,7 @@ An element often used with positioners is the `Repeater`. It works like a for-lo
 ```qml
 // repeater.qml
 
-import QtQuick 2.5
+import QtQuick
 
 DarkSquare {
     id: root

diff --git a/docs/ch04-qmlstart/qml-syntax.md b/docs/ch04-qmlstart/qml-syntax.md
@@ -11,7 +11,7 @@ Let’s start with a simple example of a QML file to explain the different synta
 ```qml
 // RectangleExample.qml
 
-import QtQuick 2.5
+import QtQuick
 
 // The root element is the Rectangle
 Rectangle {
@@ -52,15 +52,15 @@ Rectangle {
 ```
 
 
-* The `import` statement imports a module in a specific version.
+* The `import` statement imports a module. An optional version in the form of `<major>.<minor>` can be added.
 * Comments can be made using `//` for single line comments or `/\* \*/` for multi-line comments. Just like in C/C++ and JavaScript
 * Every QML file needs to have exactly one root element, like HTML
 * An element is declared by its type followed by `{ }`
 * Elements can have properties, they are in the form \`\` name: value\`\`
 * Arbitrary elements inside a QML document can be accessed by using their `id` (an unquoted identifier)
 * Elements can be nested, meaning a parent element can have child elements. The parent element can be accessed using the `parent` keyword
 
-The `import` statement you import a specific version of a module. For the QML modules that comes with Qt the version is linked to the Qt version you intend to use. The lower the version number, the earlier Qt version can be used. The minor version of the `import` statement matches the minor version of the Qt release, so Qt 5.11 corresponds to `QtQuick` 2.11, Qt 5.12 to `QtQuick` 2.12 and so on. Prior to Qt 5.11, the QML modules shipped with Qt had their own versioning sequences, meaning that `QtQuick` followed the Qt versions, while `QtQuick.Controls` started with version 2.0 at Qt 5.7 and was at version 2.4 by Qt 5.11.
+With the `import` statement you import a QML module by name. In Qt5 you had to specify a major and minor version (e.g. `2.15`), this is now optional in Qt6. For the book content we drop this optional version number as normally you automatically want to choose the newest version available from your selected Qt Kit.
 
 ::: tip
 Often you want to access a particular element by id or a parent element using the `parent` keyword. So it’s good practice to name your root element “root” using `id: root`. Then you don’t have to think about how the root element is named in your QML document.

diff --git a/docs/ch04-qmlstart/quick-start.md b/docs/ch04-qmlstart/quick-start.md
@@ -1,5 +1,5 @@
 # Quick Starter
 
 
-This chapter provides an overview of QML, the declarative user interface language used in Qt 5. We will discuss the QML syntax, which is a tree of elements, followed by an overview of the most important basic elements. Later we will briefly look at how to create our own elements, called components and how to transform elements using property manipulations. Towards the end, we will look at how to arrange elements together in a layout and finally have a look at elements where the user can provide input.
+This chapter provides an overview of QML, the declarative user interface language used in Qt 6. We will discuss the QML syntax, which is a tree of elements, followed by an overview of the most important basic elements. Later we will briefly look at how to create our own elements, called components and how to transform elements using property manipulations. Towards the end, we will look at how to arrange elements together in a layout and finally have a look at elements where the user can provide input.
 
diff --git a/docs/ch04-qmlstart/transformations.md b/docs/ch04-qmlstart/transformations.md
@@ -12,7 +12,7 @@ Before we show off the example I would like to introduce a little helper: The `C
 // ClickableImage.qml
 // Simple image which can be clicked
 
-import QtQuick 2.5
+import QtQuick
 
 Image {
     id: root
@@ -33,7 +33,7 @@ We use our clickable image to present three objects (box, circle, triangle). Eac
 ```qml
 // transformation.qml
 
-import QtQuick 2.5
+import QtQuick
 
 Item {
     // set width based on given background

diff --git a/docs/index.md b/docs/index.md
@@ -1,6 +1,5 @@
 ---
 home: true
-heroImage: /hero.png
 heroText: Qt6 Book
 tagline: A book about Qt6
 actionText: Get Started →

diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
   "author": "Juergen Ryannel <[email protected]>",
   "license": "MIT",
   "devDependencies": {
+    "copyfiles": "^2.4.1",
     "vuepress": "^1.8.2",
     "vuepress-plugin-mermaidjs": "^1.8.1"
   },
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,4 +6,4 @@ QML and Javascript are interpreted languages. This means that they do not have t

		The QML engine uses just-in-time (JIT) compilation to improve performance. It also caches the intermediate output to avoid having to recompile. This works seamlessly for you as a developer. The only trace of this is that files ending with `qmlc` and `jsc` can be found next to the source files.

		If you want to avoid the initial start-up penalty induced by the initial parsing you can also pre-compile your QML and Javascript. This requires you to put your code into a Qt resource file and is described in detail in the [Compiling QML Ahead of Time](http://doc.qt.io/qt-5/qtquick-deployment.html#compiling-qml-ahead-of-time) chapter in the Qt documentation.
		If you want to avoid the initial start-up penalty induced by the initial parsing you can also pre-compile your QML and Javascript. This requires you to put your code into a Qt resource file and is described in detail in the [Compiling QML Ahead of Time](http://doc.qt.io/qt-6/qtquick-deployment.html#compiling-qml-ahead-of-time) chapter in the Qt documentation.