Doc: improve the SpinBox floating point example

Until we get a dedicated DoubleSpinBox control, we should make it
easier for users to roll their own. We have a snippet for this in
the docs already, but we can make it better:

- Make the SpinBox editable. It's not very useful as an example if it's
  not, since the stepSize is an integer, so there's no way to modify
  the decimal component otherwise (without modifying the source, which
  users shouldn't have to do).
- Set decimals in the validator so that it prevents entering more than
  2.
- Add a convenience function to convert decimals to integers.
- Store the magic number 100 in a read-only property.
- Use StandardNotation rather than ScientificNotation. This allows
  our internal fixup logic to work with the entered text.
- Rename spinbox to spinBox.

Task-number: QTBUG-67349
Pick-to: 6.2 6.5
Change-Id: I2b0cab086b87d668408df194440ebaf64f598241
Reviewed-by: Richard Moe Gustavsen <richard.gustavsen@qt.io>

1 files changed, 17 insertions, 9 deletions

diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols-spinbox-double.qml b/src/quickcontrols/doc/snippets/qtquickcontrols-spinbox-double.qml
index fe2dfbd722..c2aaa74869 100644
--- a/src/quickcontrols/doc/snippets/qtquickcontrols-spinbox-double.qml
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols-spinbox-double.qml
@@ -6,27 +6,35 @@ import QtQuick.Controls
 
 //! [1]
 SpinBox {
-    id: spinbox
+    id: spinBox
     from: 0
-    value: 110
-    to: 100 * 100
-    stepSize: 100
+    value: decimalToInt(1.1)
+    to: decimalToInt(100)
+    stepSize: decimalFactor
+    editable: true
     anchors.centerIn: parent
 
     property int decimals: 2
-    property real realValue: value / 100
+    property real realValue: value / decimalFactor
+    readonly property int decimalFactor: Math.pow(10, decimals)
+
+    function decimalToInt(decimal) {
+        return decimal * decimalFactor
+    }
 
     validator: DoubleValidator {
-        bottom: Math.min(spinbox.from, spinbox.to)
-        top:  Math.max(spinbox.from, spinbox.to)
+        bottom: Math.min(spinBox.from, spinBox.to)
+        top:  Math.max(spinBox.from, spinBox.to)
+        decimals: spinBox.decimals
+        notation: DoubleValidator.StandardNotation
     }
 
     textFromValue: function(value, locale) {
-        return Number(value / 100).toLocaleString(locale, 'f', spinbox.decimals)
+        return Number(value / decimalFactor).toLocaleString(locale, 'f', spinBox.decimals)
     }
 
     valueFromText: function(text, locale) {
-        return Number.fromLocaleString(locale, text) * 100
+        return Math.round(Number.fromLocaleString(locale, text) * decimalFactor)
     }
 }
 //! [1]