/****************************************************************************
**
** Copyright (C) 2015 The Qt Company Ltd.
** Contact: http://www.qt.io/licensing
**
** This file is part of Qt Creator
**
**
** GNU Free Documentation License
**
** 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.
**
**
****************************************************************************/

// **********************************************************************
// 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 {Qt Creator Manual}
    \previouspage creator-using-qt-quick-designer.html
    \page quick-components.html
    \nextpage quick-buttons.html

    \title Creating Components

    A \l{glossary-component}{component} provides a way of defining a new visual item
    that you can re-use in other QML files. A component is like a black box; it
    interacts with the outside world through properties, signals, and slots, and
    is generally defined in its own QML file. You can import components to
    screens and applications.

    You can use the following QML types to create components:

    \list

        \li \l{BorderImage} uses an image as a border or background.

        \li \l{Image}
            adds a bitmap to the scene. You can stretch and tile images.

        \li \l{Item}
            is the most basic of all visual types in QML. Even though it has no
            visual appearance, it defines all the properties that are common
            across visual types, such as the x and y position, width and height,
            anchoring, and key handling.

        \li \l{Rectangle}
            adds a rectangle that is painted with a solid fill color and an
            optional border. You can also use the radius property to create
            rounded rectangles.

        \li \l{Text} adds formatted read-only text.

        \li \l{TextEdit}
            adds a single line of editable formatted text that can be validated.

        \li \l{TextInput}
            adds a single line of editable plain text that can be validated.

        \omit
        \li \l{WebView} adds web content to a canvas.
        \endomit

    \endlist

    You can also use ready-made Qt Quick 1 Components (for Qt 4) to create
    screens with a native look and feel for a particular target platform.
    Since Qt 5.1, Qt Quick Controls, Dialogs, and Layouts are available for
    creating classic desktop-style user interfaces using Qt Quick 2.1. You can
    use the Qt Quick Controls Styles to customize Qt Quick Controls.

    The \QC project wizards create Qt Quick applications that use Qt Quick
    Components or Controls.

    Even if you use the Qt Quick Components, you can still write cross-platform
    applications, by using different sets of QML files for each platform.

    \section1 Creating Components in Qt Quick Designer

    \list 1

        \li Select \uicontrol File > \uicontrol {New File or Project} >
            \uicontrol {Files and Classes} > \uicontrol Qt > \uicontrol {QML File (Qt Quick 1)} or
            \uicontrol {QML File (Qt Quick 2)} > \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
            letter.

        \li Click \uicontrol Design to open the .qml file in \QMLD.

        \li Drag and drop a QML type from the \uicontrol Library to the editor.

        \li Edit its properties in the \uicontrol Properties pane.

            The available properties depend on the QML type.

    \endlist

    The following sections contain examples of how to create some common
    components:

    \list

        \li \l{Creating Buttons}

        \li \l{Creating Scalable Buttons and Borders}

    \endlist

    \section1 Moving Within Components

    Components can consist of several other components. To view the component
    hierarchy as a bread crumb path when you edit a component on the canvas,
    select \uicontrol {Go into Component} or press \key F2. Click the component
    names in the path to navigate to them. You can easily navigate back to the
    top level when you are done editing the component.

    \image qmldesigner-breadcrumbs.png "Go into Component command"
*/
