diff options
Diffstat (limited to 'examples/quick')
| -rw-r--r-- | examples/quick/demos/calqlatr/doc/src/calqlatr.qdoc | 116 | ||||
| -rw-r--r-- | examples/quick/demos/photosurface/doc/src/photosurface.qdoc | 130 | ||||
| -rw-r--r-- | examples/quick/quick.pro | 4 | ||||
| -rw-r--r-- | examples/quick/tutorials/gettingStartedQml/filedialog/filedialog.pro | 12 |
4 files changed, 242 insertions, 20 deletions
diff --git a/examples/quick/demos/calqlatr/doc/src/calqlatr.qdoc b/examples/quick/demos/calqlatr/doc/src/calqlatr.qdoc index ff8061e2ea..e72d048567 100644 --- a/examples/quick/demos/calqlatr/doc/src/calqlatr.qdoc +++ b/examples/quick/demos/calqlatr/doc/src/calqlatr.qdoc @@ -29,14 +29,122 @@ \title Qt Quick Demo - Calqlatr \ingroup qtquickdemos \example demos/calqlatr - \brief A simple QML calculator app, designed for portrait devices. + \brief A QML app designed for portrait devices that uses custom components, + animated with AnimationController, and JavaScript for the application logic. \image qtquick-demo-calqlatr.png - \e{Calqlatr} demonstrates various QML and \l{Qt Quick} features such as - displaying custom components. The logic is implemented in JavaScript and the - appearance implemented in QML. + \e{Calqlatr} demonstrates various QML and \l{Qt Quick} features, such as + displaying custom components and using animation to move the components + around in the application view. The application logic is implemented in + JavaScript and the appearance is implemented in QML. \include examples-run.qdocinc + \section1 Displaying Custom Components + + In the Calqlatr application, we use the following custom types that are + each defined in a separate .qml file: + + \list + \li Button.qml + \li Display.qml + \li NumberPad.qml + \li StyleLabel.qml + \endlist + + To use the custom types, we add an import statement to the main QML file, + calqlatr.qml that imports the folder called \c content where the types are + located: + + \code + import "content" + \endcode + + We can then display custom components by adding the component types to + any QML file. For example, we use the NumberPad type in calqlatr.qml to + create the number pad of the calculator. We place the type inside an + \l{Item} QML type, which is the base type for all visual items in Qt Quick: + + \quotefromfile demos/calqlatr/calqlatr.qml + \skipto Item + \printuntil } + \printuntil } + + Further, we use the Button type in the NumberPad type to create the + calculator buttons. Button.qml specifies the basic properties for a + button that we can modify for each button instance in NumberPad.qml. For the + digit and separator buttons, we additionally specify the text property using + the property alias \c text that we define in Button.qml. + + For the operator buttons, we also specify another color (green) using the + property alias \c color and set the operator property to \c true. We use + the operator property in functions that perform the calculations. + + We place the buttons inside a \l{Grid} QML type to position them in a grid: + + \quotefromfile demos/calqlatr/content/NumberPad.qml + \skipto Grid + \printuntil /^\}/ + + \section1 Animating Components + + We use the Display type to display calculations. In Display.qml, we use + images to make the display component look like a slip of paper that contains + a grip. Users can drag the grip to move the display from left to right. + + When users release the grip, the AnimationController QML type that we define + in the calqlatr.qml file finishes running the controlled animation in either + a forwards or a backwards direction. To run the animation, we call either + completeToEnd() or completeToBeginning(), depending on the direction. We do + this in the MouseArea's \c onReleased signal handler, where \c controller + is the id of our AnimationController: + + \quotefromfile demos/calqlatr/calqlatr.qml + \skipto onPressed + \printuntil } + + Unlike other QML animation types, AnimationController is not driven by + internal timers but by explicitly setting its progress property to a + value between \c 0.0 and \c 1.0. + + Inside the AnimationController, we run two NumberAnimation instances in + parallel to move the number pad and the display components simultaneously to + the opposite sides of the view. In addition, we run a SequentialAnimation + instance to scale the number pad during the transition, giving the animation + some depth. + + \quotefromfile demos/calqlatr/calqlatr.qml + \skipto AnimationController + \printuntil 1; easing.type + \printuntil } + \printuntil } + \printuntil } + + We use the easing curve of the type \c Easing.InOutQuad to accelerate the + motion until halfway and then decelerate it. + + \section1 Performing Calculations + + The calculator.js file contains definitions for the functions to execute + when users press the digit and operator buttons. To use the functions, we + import calculator.js in the calqlatr.qml file as \c CalcEngine: + + \code + import "content/calculator.js" as CalcEngine + \endcode + + We can then declare the functions to execute depending on whether the + operator property for a button is set to \c true in NumberPad.qml: + + \quotefromfile demos/calqlatr/calqlatr.qml + \skipto operatorPressed + \printuntil digitPressed + + When users press a digit or operator, the text from the digit appears on the + display. When they press the equals operator (=), the appropriate + calculation is performed, and the results appear on the display. + + \section1 List of Files + \sa {QML Applications} */ diff --git a/examples/quick/demos/photosurface/doc/src/photosurface.qdoc b/examples/quick/demos/photosurface/doc/src/photosurface.qdoc index d56b34365d..b66143368e 100644 --- a/examples/quick/demos/photosurface/doc/src/photosurface.qdoc +++ b/examples/quick/demos/photosurface/doc/src/photosurface.qdoc @@ -29,13 +29,135 @@ \title Qt Quick Demo - Photo Surface \ingroup qtquickdemos \example demos/photosurface - \brief A touch-based app for shuffling photos around a virtual surface. + \brief A QML app for touch devices that uses a Repeater with a + FolderListModel to access content in a folder, and a PinchArea that contains + a MouseArea to handle pinch gestures on the fetched content. \image qtquick-demo-photosurface-small.png - \e{Photo Surface} demonstrates how to handle dragging, rotation and pinch - zooming within the same item using a \l PinchArea containing a \l MouseArea. + \e{Photo Surface} demonstrates how to use a \l{Repeater} with a + FolderListModel and a FileDialog to access images from a folder selected + by a user and how to handle dragging, rotation and pinch zooming within the + same item using a \l PinchArea that contains a \l MouseArea. + + All the app code is contained in one QML file, photosurface.qml. Inline + JavaScript code is used to place, rotate, and scale images on the photo + surface. \include examples-run.qdocinc - \sa {QML Applications} + \section1 Creating the Main Window + + To create the main window for the Photo Surface app, we use the \l{Window} + QML type as the root item. It automatically sets up the window for use with + \l{Qt Quick} graphical types: + + \quotefromfile demos/photosurface/photosurface.qml + \skipto Window { + \printuntil defaultSize + + To use the \l{Window} type, we must import it: + + \code + import QtQuick.Window 2.1 + \endcode + + \section1 Accessing Folder Contents + + We use a \l{Repeater} QML type together with the FolderListModel to display + GIF, JPG, and PNG images located in a folder: + + \quotefromfile demos/photosurface/photosurface.qml + \skipto Repeater + \printuntil } + + To use the FolderListModel type, we must import it: + + \code + import Qt.labs.folderlistmodel 1.0 + \endcode + + We use a FileDialog to enable users to select the folder that contains + the images: + + \quotefromfile demos/photosurface/photosurface.qml + \skipto FileDialog + \printuntil } + + To use the FileDialog type, we must import \l{Qt Quick Dialogs}: + + \code + import QtQuick.Dialogs 1.0 + \endcode + + We use the \c {fileDialog.open()} function to open the file dialog when the + app starts: + + \code + Component.onCompleted: fileDialog.open() + \endcode + + Users can also click the file dialog icon to open the file dialog. We use + an \l{Image} QML type to display the icon. Inside the \l{Image} type, we + use a MouseArea with the \c onClicked signal handler to call the + \c {fileDialog.open()} function: + + \quotefromfile demos/photosurface/photosurface.qml + \skipuntil Image { + \skipto Image { + \printuntil } + \printuntil } + + \section1 Displaying Images on the Photo Surface + + We use a \l{Rectangle} as a delegate for a \l{Repeater} to provide a frame + for each image that the FolderListModel finds in the selected folder. We use + JavaScript \c Math() methods to place the frames randomly on the photo + surface and to rotate them at random angles, as well as to scale the images: + + \quotefromfile demos/photosurface/photosurface.qml + \skipto Rectangle + \printuntil } + + \section1 Handling Pinch Gestures + + We use a PinchArea that contains a MouseArea in the photo frames to handle + dragging, rotation and pinch zooming of the frame: + + \quotefromfile demos/photosurface/photosurface.qml + \skipto PinchArea + \printuntil onPinchFinished + + We use the \c pinch group property to control how the photo frames react to + pinch gestures. The \c pinch.target sets \c photoFrame as the item to + manipulate. The rotation properties specify that the frames can be rotated + at all angles and the scale properties specify that they can be scaled + between \c 0.1 and \c 10. + + In the MouseArea's \c onPressed signal handler, we raise the selected photo + frame to the top by increasing the value of its \c z property. The root item + stores the z value of the top-most frame. The border color of the photo + frame is controlled in the \c onEntered and \c onExited signal handlers to + highlight the selected image. + + \quotefromfile demos/photosurface/photosurface.qml + \skipto MouseArea + \printuntil onExited + + To enable you to test the example on the desktop, we use the MouseArea's + \c onWheel signal handler to simulate pinch gestures by using a mouse: + + \quotefromfile demos/photosurface/photosurface.qml + \skipto onWheel + \printuntil photoFrame.y + \printuntil } + \printuntil } + \printuntil } + + The \c onWheel signal handler is called in response to mouse wheel gestures. + Use the vertical wheel to zoom and Ctrl and the vertical wheel to rotate + frames. If the mouse has a horizontal wheel, use it to rotate frames. + + \section1 List of Files + + \sa {QML Applications} */ diff --git a/examples/quick/quick.pro b/examples/quick/quick.pro index f39931bd94..421f95a162 100644 --- a/examples/quick/quick.pro +++ b/examples/quick/quick.pro @@ -26,8 +26,8 @@ SUBDIRS = quick-accessibility \ # Widget dependent examples qtHaveModule(widgets) { - SUBDIRS += embeddedinwidgets \ - quickwidgets + SUBDIRS += embeddedinwidgets + qtHaveModule(quickwidgets): SUBDIRS += quickwidgets } EXAMPLE_FILES = \ diff --git a/examples/quick/tutorials/gettingStartedQml/filedialog/filedialog.pro b/examples/quick/tutorials/gettingStartedQml/filedialog/filedialog.pro index 0886f37b1f..e88e8f670c 100644 --- a/examples/quick/tutorials/gettingStartedQml/filedialog/filedialog.pro +++ b/examples/quick/tutorials/gettingStartedQml/filedialog/filedialog.pro @@ -20,14 +20,6 @@ SOURCES += \ OTHER_FILES += qmldir -copyfile = $$PWD/qmldir -copydest = $$DESTDIR - -# On Windows, use backslashes as directory separators -win32: { - copyfile ~= s,/,\\,g - copydest ~= s,/,\\,g -} - # Copy the qmldir file to the same folder as the plugin binary -QMAKE_POST_LINK += $$QMAKE_COPY $$quote($$copyfile) $$quote($$copydest) $$escape_expand(\\n\\t) +QMAKE_POST_LINK += $$QMAKE_COPY $$shell_quote($$shell_path($$PWD/qmldir)) \ + $$shell_quote($$shell_path($$DESTDIR)) $$escape_expand(\\n\\t) |