From ac382b68b7c67af45096cb590fc537b5794e8f27 Mon Sep 17 00:00:00 2001 From: Leena Miettinen Date: Wed, 30 Jan 2019 14:26:56 +0100 Subject: Doc: Show button examples also in Qt Design Studio Manual Use defines to display the correct menu paths to the wizards. Change-Id: I2cd6dff049a674e9646639fa928f7353d97037ac Reviewed-by: Thomas Hartmann --- doc/src/qtquick/creator-only/qtquick-buttons.qdoc | 287 --------------------- doc/src/qtquick/qtquick-buttons.qdoc | 295 ++++++++++++++++++++++ doc/src/qtquick/qtquick-components.qdoc | 17 +- doc/src/qtquick/qtquick-navigator.qdoc | 6 +- 4 files changed, 303 insertions(+), 302 deletions(-) delete mode 100644 doc/src/qtquick/creator-only/qtquick-buttons.qdoc create mode 100644 doc/src/qtquick/qtquick-buttons.qdoc diff --git a/doc/src/qtquick/creator-only/qtquick-buttons.qdoc b/doc/src/qtquick/creator-only/qtquick-buttons.qdoc deleted file mode 100644 index 00a09a7ccc..0000000000 --- a/doc/src/qtquick/creator-only/qtquick-buttons.qdoc +++ /dev/null @@ -1,287 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2018 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of the Qt Creator documentation. -** -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** GNU Free Documentation License Usage -** Alternatively, this file may be used under the terms of the GNU Free -** Documentation License version 1.3 as published by the Free Software -** Foundation and appearing in the file included in the packaging of -** this file. Please review the following information to ensure -** the GNU Free Documentation License version 1.3 requirements -** will be met: https://www.gnu.org/licenses/fdl-1.3.html. -** -****************************************************************************/ - -// ********************************************************************** -// NOTE: the sections are not ordered by their logical order to avoid -// reshuffling the file each time the index order changes (i.e., often). -// Run the fixnavi.pl script to adjust the links to the index order. -// ********************************************************************** - -/*! - \contentspage index.html - \previouspage quick-components.html - \page quick-buttons.html - \nextpage quick-scalable-image.html - - \title Creating Buttons - - To create a button type: - - \list 1 - - \li Select \uicontrol File > \uicontrol {New File or Project} > - \uicontrol Qt > \uicontrol {QML File (Qt Quick 2)} > - \uicontrol Choose to create a QML file called Button.qml (for - example). - - \note Types are listed in the \uicontrol Library only if the - filename begins with a capital letter. - - \li Click \uicontrol {Design} to edit the file in the - \uicontrol {Form Editor}. - - \li In the \uicontrol Navigator, select \uicontrol Item and set the - width (\uicontrol W) and height (\uicontrol H) of the button in the - \uicontrol Properties pane. - - \li Drag and drop a \uicontrol Rectangle from the \uicontrol Library to - the item in the navigator. This creates a nested item where the - item is the parent of the rectangle. Items are positioned relative - to their parents. - - \li In the \uicontrol Properties pane, modify the appearance of the - rectangle: - - \list a - - \li In the \uicontrol Color field, select the button color. - - \li In the \uicontrol Radius field, use the slider to set the radius of - the rectangle and produce rounded corners for the button. - - \li Select \uicontrol {Layout}, and then select the - \inlineimage anchor_fill.png - (\uicontrol {Fill to Parent}) button to anchor the rectangle to - the item. - - - \endlist - - \li Drag and drop a \uicontrol {Text} type to the item in the navigator. - - \li In the \uicontrol Properties pane, edit the properties of the \uicontrol Text - type. - - \list a - - \li In the \uicontrol Text field, type \b Button. - - You can select the text color in the \uicontrol {Text color} field and the - font, size, and style in the - \uicontrol Font section. - - \li In the \uicontrol Alignment field, select the center buttons to align - the text to the center of the button. - - \li Select \uicontrol Layout > \uicontrol {Fill to Parent} - to anchor the text to the whole button area. - - \endlist - - \li Press \key {Ctrl+S} to save the button. - - \image qmldesigner-button.png "Button component" - - \endlist - - To create a graphical button that scales beautifully without using vector - graphics, use the \l [QML]{BorderImage}{Border Image} type. For more - information, see \l{Creating Scalable Buttons and Borders}. - - */ - - -/*! - - \contentspage index.html - \previouspage quick-buttons.html - \page quick-scalable-image.html - \nextpage qtquick-navigator.html - - \title Creating Scalable Buttons and Borders - - You can use the \l [QML]{BorderImage}{Border Image} type to display an - image, such as a PNG file, as a border and a background. - - Use two border images and suitable graphics to make it look like the - button is pushed down when it is clicked. One of the border images - is visible by default. You can specify that it is hidden and the other one - becomes visible when the mouse is clicked. - - Add a \l [QML]{MouseArea}{Mouse Area} type that covers the whole area and - emits the clicked signal (\c {item.clicked()}) when it detects a mouse - click. - - You can add text to the button and set it up as a property. The text can - then be initialized from the outside, making the button a reusable UI - component. The font size is also available in case the default size is too - big. You can scale down the button text and use smooth text rendering for - some extra quality. - - \image qmldesigner-borderimage.png "Graphical button" - - To create a graphical button: - - \list 1 - - \li Select \uicontrol File > \uicontrol {New File or Project} > - \uicontrol Qt > \uicontrol {QML File (Qt Quick 2)} > - \uicontrol Choose to create a QML file called Button.qml (for - example). - - \note Types are listed in the \uicontrol Library only if the - filename begins with a capital letter. - - \li Click \uicontrol {Design} to edit the file in the - \uicontrol {Form Editor}. - - \li In the \uicontrol Navigator, select \uicontrol Item and set the - width (\uicontrol W) and height (\uicontrol H) of the button in the - \uicontrol Properties pane. - - \li Select \uicontrol Connections > \uicontrol {Properties} > - \uicontrol Add to add properties for the item: - - \image qmldesigner-borderimage-properties.png "Properties" - - \list a - - \li Double-click in the columns in the view to specify a \c text - property with the type \c string and an empty value. - - \li Specify another property, \c fontSize, with the type \c int - and the value \c 10. - - \endlist - - \li Drag and drop two \uicontrol {Border Image} types from the - \uicontrol Library to the item in the \uicontrol Navigator. - - \li Drag and drop a \uicontrol Text type to the item in the navigator. - - \li Drag and drop a \uicontrol {Mouse Area} to the item in the - navigator. - - \li In the navigator, select a border image to specify settings for it - in the \uicontrol Properties pane: - - \list a - - \li Select \uicontrol Connections > \uicontrol {Bindings} - > \uicontrol Add to hide the image when the mouse button is not - pressed down. Specify the \c visible property with the - \c !mouseArea source item and \c pressed source property. - - \image qmldesigner-borderimage-bindings.png "Border image bindings" - - \li In the \uicontrol Source field, select the image file for the button, - for example button_up.png. - - \li Click \uicontrol {Layout}, and then click the - \inlineimage anchor_fill.png - (\uicontrol {Fill to Parent}) button to anchor the border image to the - \uicontrol Item. - - \endlist - - \li Select the other border image to specify similar settings for it: - - \list a - - \li In \uicontrol Bindings, specify the \c visible property - with the \c mouseArea source item and \c pressed source - property to show the image when the mouse button is pressed - down. - - \li In the \uicontrol Source field, select the image file for the button - when it is clicked, for example button_down.png. - - \li Select \uicontrol {Layout} > \uicontrol {Fill to Parent} - button to anchor the border image to the \uicontrol Item. - - \endlist - - \li Select the text to specify font size and color, and text scaling - and rendering: - - \list a - - \li In the \uicontrol Color field, use the color picker to select - the font color, or enter a value in the field. - - \li In \uicontrol Bindings, create bindings to properties: - - \image qmldesigner-borderimage-bindings-text.png "Text bindings" - - \list - - \li Set the source property of the \c text property as - \c text and the source item as \c parent. - - \li Set the source property of the \c font.pixelSize as - \c fontSize and the source item as \c parent. - - \li Set the source property of \c scale as - \c {if (!mouseArea} and the source item as - \c {pressed) { 1 } else { 0.95 }}. - - \endlist - - \li Click \uicontrol {Layout}, and then click the - \inlineimage anchor_vertical.png - (\uicontrol {Set Vertical Anchor}) and - \inlineimage anchor_horizontal.png - (\uicontrol {Set Horizontal Anchor}) - buttons to inherit the vertical and horizontal centering from - the parent. - - \endlist - - \li Select \uicontrol mouseArea in the navigator and then select - \uicontrol Connections > \uicontrol Add to set \c item.clicked() - as the value of the \c onClicked signal handler. - - \image qmldesigner-borderimage-connections.png "Item connections" - - \li In the \uicontrol {Text Editor}, specify the \c clicked signal for - the Item: - - \qml - Item { - id: item - property string text: "" - property int fontSize: 10 - - signal clicked - } - \endqml - - \endlist - - \note To test the button, add it to a Qt Quick Application or Qt - Quick UI project and run the application. - -*/ - diff --git a/doc/src/qtquick/qtquick-buttons.qdoc b/doc/src/qtquick/qtquick-buttons.qdoc new file mode 100644 index 0000000000..0f7c5f5235 --- /dev/null +++ b/doc/src/qtquick/qtquick-buttons.qdoc @@ -0,0 +1,295 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Creator documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +// ********************************************************************** +// NOTE: the sections are not ordered by their logical order to avoid +// reshuffling the file each time the index order changes (i.e., often). +// Run the fixnavi.pl script to adjust the links to the index order. +// ********************************************************************** + +/*! + \contentspage index.html + \previouspage quick-components.html + \page quick-buttons.html + \nextpage quick-scalable-image.html + + \title Creating Buttons + + To create a button type: + + \list 1 + + \li Select \uicontrol File > \uicontrol {New File or Project} > + \if defined(qtcreator) + \uicontrol Qt > \uicontrol {QML File (Qt Quick 2)} > + \else + \uicontrol {Qt Quick Files} > \uicontrol {Qt Quick File} > + \endif + \uicontrol Choose to create a QML file called Button.qml (for + example). + + \note Types are listed in the \uicontrol Library only if the + filename begins with a capital letter. + + \li Click \uicontrol {Design} to edit the file in the + \uicontrol {Form Editor}. + + \li In the \uicontrol Navigator, select \uicontrol Item and set the + width (\uicontrol W) and height (\uicontrol H) of the button in the + \uicontrol Properties pane. + + \li Drag and drop a \uicontrol Rectangle from the \uicontrol Library to + the item in the navigator. This creates a nested item where the + item is the parent of the rectangle. Items are positioned relative + to their parents. + + \li In the \uicontrol Properties pane, modify the appearance of the + rectangle: + + \list a + + \li In the \uicontrol Color field, select the button color. + + \li In the \uicontrol Radius field, use the slider to set the radius of + the rectangle and produce rounded corners for the button. + + \li Select \uicontrol {Layout}, and then select the + \inlineimage anchor_fill.png + (\uicontrol {Fill to Parent}) button to anchor the rectangle to + the item. + + + \endlist + + \li Drag and drop a \uicontrol {Text} type to the item in the navigator. + + \li In the \uicontrol Properties pane, edit the properties of the \uicontrol Text + type. + + \list a + + \li In the \uicontrol Text field, type \b Button. + + You can select the text color in the \uicontrol {Text color} field and the + font, size, and style in the + \uicontrol Font section. + + \li In the \uicontrol Alignment field, select the center buttons to align + the text to the center of the button. + + \li Select \uicontrol Layout > \uicontrol {Fill to Parent} + to anchor the text to the whole button area. + + \endlist + + \li Press \key {Ctrl+S} to save the button. + + \image qmldesigner-button.png "Button component" + + \endlist + + To create a graphical button that scales beautifully without using vector + graphics, use the \l [QML]{BorderImage}{Border Image} type. For more + information, see \l{Creating Scalable Buttons and Borders}. + + */ + + +/*! + + \contentspage index.html + \previouspage quick-buttons.html + \page quick-scalable-image.html + \nextpage qtquick-navigator.html + + \title Creating Scalable Buttons and Borders + + You can use the \l [QML]{BorderImage}{Border Image} type to display an + image, such as a PNG file, as a border and a background. + + Use two border images and suitable graphics to make it look like the + button is pushed down when it is clicked. One of the border images + is visible by default. You can specify that it is hidden and the other one + becomes visible when the mouse is clicked. + + Add a \l [QML]{MouseArea}{Mouse Area} type that covers the whole area and + emits the clicked signal (\c {item.clicked()}) when it detects a mouse + click. + + You can add text to the button and set it up as a property. The text can + then be initialized from the outside, making the button a reusable UI + component. The font size is also available in case the default size is too + big. You can scale down the button text and use smooth text rendering for + some extra quality. + + \image qmldesigner-borderimage.png "Graphical button" + + To create a graphical button: + + \list 1 + + \li Select \uicontrol File > \uicontrol {New File or Project} > + \if defined(qtcreator) + \uicontrol Qt > \uicontrol {QML File (Qt Quick 2)} > + \else + \uicontrol {Qt Quick Files} > \uicontrol {Qt Quick File} > + \endif + \uicontrol Choose to create a QML file called Button.qml (for + example). + + \note Types are listed in the \uicontrol Library only if the + filename begins with a capital letter. + + \li Click \uicontrol {Design} to edit the file in the + \uicontrol {Form Editor}. + + \li In the \uicontrol Navigator, select \uicontrol Item and set the + width (\uicontrol W) and height (\uicontrol H) of the button in the + \uicontrol Properties pane. + + \li Select \uicontrol Connections > \uicontrol {Properties} > + \uicontrol Add to add properties for the item: + + \image qmldesigner-borderimage-properties.png "Properties" + + \list a + + \li Double-click in the columns in the view to specify a \c text + property with the type \c string and an empty value. + + \li Specify another property, \c fontSize, with the type \c int + and the value \c 10. + + \endlist + + \li Drag and drop two \uicontrol {Border Image} types from the + \uicontrol Library to the item in the \uicontrol Navigator. + + \li Drag and drop a \uicontrol Text type to the item in the navigator. + + \li Drag and drop a \uicontrol {Mouse Area} to the item in the + navigator. + + \li In the navigator, select a border image to specify settings for it + in the \uicontrol Properties pane: + + \list a + + \li Select \uicontrol Connections > \uicontrol {Bindings} + > \uicontrol Add to hide the image when the mouse button is not + pressed down. Specify the \c visible property with the + \c !mouseArea source item and \c pressed source property. + + \image qmldesigner-borderimage-bindings.png "Border image bindings" + + \li In the \uicontrol Source field, select the image file for the button, + for example button_up.png. + + \li Click \uicontrol {Layout}, and then click the + \inlineimage anchor_fill.png + (\uicontrol {Fill to Parent}) button to anchor the border image to the + \uicontrol Item. + + \endlist + + \li Select the other border image to specify similar settings for it: + + \list a + + \li In \uicontrol Bindings, specify the \c visible property + with the \c mouseArea source item and \c pressed source + property to show the image when the mouse button is pressed + down. + + \li In the \uicontrol Source field, select the image file for the button + when it is clicked, for example button_down.png. + + \li Select \uicontrol {Layout} > \uicontrol {Fill to Parent} + button to anchor the border image to the \uicontrol Item. + + \endlist + + \li Select the text to specify font size and color, and text scaling + and rendering: + + \list a + + \li In the \uicontrol Color field, use the color picker to select + the font color, or enter a value in the field. + + \li In \uicontrol Bindings, create bindings to properties: + + \image qmldesigner-borderimage-bindings-text.png "Text bindings" + + \list + + \li Set the source property of the \c text property as + \c text and the source item as \c parent. + + \li Set the source property of the \c font.pixelSize as + \c fontSize and the source item as \c parent. + + \li Set the source property of \c scale as + \c {if (!mouseArea} and the source item as + \c {pressed) { 1 } else { 0.95 }}. + + \endlist + + \li Click \uicontrol {Layout}, and then click the + \inlineimage anchor_vertical.png + (\uicontrol {Set Vertical Anchor}) and + \inlineimage anchor_horizontal.png + (\uicontrol {Set Horizontal Anchor}) + buttons to inherit the vertical and horizontal centering from + the parent. + + \endlist + + \li Select \uicontrol mouseArea in the navigator and then select + \uicontrol Connections > \uicontrol Add to set \c item.clicked() + as the value of the \c onClicked signal handler. + + \image qmldesigner-borderimage-connections.png "Item connections" + + \li In the \uicontrol {Text Editor}, specify the \c clicked signal for + the Item: + + \qml + Item { + id: item + property string text: "" + property int fontSize: 10 + + signal clicked + } + \endqml + + \endlist + + \note To test the button, add it to a Qt Quick Application or Qt + Quick UI project and run the application. + +*/ + diff --git a/doc/src/qtquick/qtquick-components.qdoc b/doc/src/qtquick/qtquick-components.qdoc index 7a83860c72..77e0a8c58a 100644 --- a/doc/src/qtquick/qtquick-components.qdoc +++ b/doc/src/qtquick/qtquick-components.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2018 The Qt Company Ltd. +** Copyright (C) 2019 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Creator documentation. @@ -33,11 +33,7 @@ \contentspage index.html \page quick-components.html \previouspage creator-using-qt-quick-designer.html - \if defined(qtdesignstudio) - \nextpage qtquick-navigator.html - \else \nextpage quick-buttons.html - \endif \title Creating Components @@ -466,15 +462,17 @@ Some ready-made controls, such as a gauge, dial, status indicator, and tumbler, are provided by the \l {Qt Quick Extras} module. - \if defined(qtcreator) \section1 Creating Components in Design Mode \list 1 \li Select \uicontrol File > \uicontrol {New File or Project} > - \uicontrol {Files and Classes} > \uicontrol Qt > - \uicontrol {QML File (Qt Quick 2)} > \uicontrol Choose to create a new .qml - file. + \if defined(qtcreator) + \uicontrol Qt > \uicontrol {QML File (Qt Quick 2)} > + \else + \uicontrol {Qt Quick Files} > \uicontrol {Qt Quick File} > + \endif + \uicontrol Choose to create a new .qml file. \note Components are listed in the \uicontrol {QML Components} section of the \uicontrol Library only if the filename begins with a capital @@ -501,7 +499,6 @@ \li \l{Creating Scalable Buttons and Borders} \endlist - \endif \section1 Moving Within Components diff --git a/doc/src/qtquick/qtquick-navigator.qdoc b/doc/src/qtquick/qtquick-navigator.qdoc index e61e517bac..0215df96be 100644 --- a/doc/src/qtquick/qtquick-navigator.qdoc +++ b/doc/src/qtquick/qtquick-navigator.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2018 The Qt Company Ltd. +** Copyright (C) 2019 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Creator documentation. @@ -26,11 +26,7 @@ /*! \contentspage {Qt Creator Manual} \page qtquick-navigator.html - \if defined(qtdesignstudio) - \previouspage quick-components.html - \else \previouspage quick-scalable-image.html - \endif \nextpage qtquick-properties.html \title Managing Item Hierarchy -- cgit v1.2.1