Fix ImageElements example to use a QML module

Removed the 'content' directory, and placed all images into a 'pics'
directory.

CMakeLists.txt is now also using qt_add_qml_module()

Pick-to: 6.2
Change-Id: I673b7adea1832f304003f95e171118b0822b3c83
Reviewed-by: Shawn Rutledge <shawn.rutledge@qt.io>

examples/quick/imageelements/BorderImageSelector.qml

@@ -66,7 +66,7 @@ Item {
          curIdx += steps;
     }
     Image {
-        source: "arrow.png"
+        source: "pics/arrow.png"
         MouseArea{
             anchors.fill: parent
             onClicked: selector.advance(-1)
@@ -78,7 +78,7 @@ Item {
         Behavior on opacity {NumberAnimation{}}
     }
     Image {
-        source: "arrow.png"
+        source: "pics/arrow.png"
         mirror: true
         MouseArea{
             anchors.fill: parent

examples/quick/imageelements/CMakeLists.txt

@@ -7,7 +7,6 @@ set(CMAKE_INCLUDE_CURRENT_DIR ON)
 
 set(CMAKE_AUTOMOC ON)
 set(CMAKE_AUTORCC ON)
-set(CMAKE_AUTOUIC ON)
 
 if(NOT DEFINED INSTALL_EXAMPLESDIR)
   set(INSTALL_EXAMPLESDIR "examples")
@@ -15,89 +14,58 @@ endif()
 
 set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/quick/imageelements")
 
-find_package(Qt6 COMPONENTS Core)
+find_package(Qt6 COMPONENTS Core Gui Quick Qml)
-find_package(Qt6 COMPONENTS Gui)
-find_package(Qt6 COMPONENTS Quick)
-find_package(Qt6 COMPONENTS Qml)
 
-qt_add_executable(imageelements
+add_subdirectory("../shared" "shared")
+
+qt_add_executable(imageelementsexample
+    WIN32
+    MACOSX_BUNDLE
     main.cpp
 )
-set_target_properties(imageelements PROPERTIES
+
-    WIN32_EXECUTABLE TRUE
+target_link_libraries(imageelementsexample PUBLIC
-    MACOSX_BUNDLE TRUE
-)
-target_link_libraries(imageelements PUBLIC
     Qt::Core
     Qt::Gui
     Qt::Qml
     Qt::Quick
 )
 
-
+qt_add_qml_module(imageelementsexample
-# Resources:
+    URI imageelements
-set(imageelements_resource_files
+    VERSION 1.0
+    QML_FILES
         "animatedimage.qml"
         "animatedsprite.qml"
         "borderimage.qml"
-    "content/BearSheet.png"
-    "content/BorderImageSelector.qml"
-    "content/ImageCell.qml"
-    "content/MyBorderImage.qml"
-    "content/ShadowRectangle.qml"
-    "content/Uniflow_steam_engine.gif"
-    "content/arrow.png"
-    "content/bw.png"
-    "content/colors-round.sci"
-    "content/colors-stretch.sci"
-    "content/colors.png"
-    "content/multi.ico"
-    "content/qt-logo.png"
-    "content/shadow.png"
-    "content/speaker.png"
         "framestepping.qml"
         "image.qml"
         "imageelements.qml"
         "multiframeborderimage.qml"
         "shadows.qml"
         "spritesequence.qml"
-)
+        "BorderImageSelector.qml"
+        "ImageCell.qml"
+        "MyBorderImage.qml"
+        "ShadowRectangle.qml"
+    RESOURCES
+        "pics/qt-logo.png"
+        "pics/shadow.png"
+        "pics/speaker.png"
+        "pics/colors.png"
+        "pics/BearSheet.png"
+        "pics/Uniflow_steam_engine.gif"
+        "pics/arrow.png"
+        "pics/bw.png"
+        "pics/multi.ico"
+        "pics/colors-round.sci"
+        "pics/colors-stretch.sci"
+    )
 
-qt6_add_resources(imageelements "imageelements"
+install(TARGETS imageelementsexample
-    PREFIX
-        "/imageelements"
-    FILES
-        ${imageelements_resource_files}
-)
-set(shared_resource_files
-    "../shared/Button.qml"
-    "../shared/CheckBox.qml"
-    "../shared/FlickrRssModel.qml"
-    "../shared/Label.qml"
-    "../shared/LauncherList.qml"
-    "../shared/SimpleLauncherDelegate.qml"
-    "../shared/Slider.qml"
-    "../shared/TabSet.qml"
-    "../shared/TextField.qml"
-    "../shared/images/back.png"
-    "../shared/images/checkmark.png"
-    "../shared/images/next.png"
-    "../shared/images/qt-logo.png"
-    "../shared/images/slider_handle.png"
-    "../shared/images/tab.png"
-)
-
-qt6_add_resources(imageelements "shared"
-    PREFIX
-        "/shared"
-    BASE
-        "../shared"
-    FILES
-        ${shared_resource_files}
-)
-
-install(TARGETS imageelements
     RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}"
     BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}"
     LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}"
 )
+
+bundle_shared(imageelementsexample)

examples/quick/imageelements/ImageCell.qml

@@ -57,7 +57,7 @@ Item {
     Image {
         id: image
         width: parent.width; height: parent.height - captionItem.height
-        source: "qt-logo.png"
+        source: "pics/qt-logo.png"
         clip: true      // only makes a difference if mode is PreserveAspectCrop
     }
 

examples/quick/imageelements/ShadowRectangle.qml

@@ -58,7 +58,7 @@ Item {
         anchors.fill: rectangle
         anchors { leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
         border { left: 10; top: 10; right: 10; bottom: 10 }
-        source: "shadow.png"
+        source: "pics/shadow.png"
     }
 //! [shadow]
 

examples/quick/imageelements/animatedimage.qml

@@ -59,7 +59,7 @@ Column {
 //! [image]
     AnimatedImage {
         id: animation
-        source: "content/Uniflow_steam_engine.gif"
+        source: "pics/Uniflow_steam_engine.gif"
         anchors.horizontalCenter: parent.horizontalCenter
         speed: speedSlider.value
         TapHandler {

examples/quick/imageelements/animatedsprite.qml

@@ -62,7 +62,7 @@ Item {
     AnimatedSprite {
         id: sprite
         anchors.centerIn: parent
-        source: "content/speaker.png"
+        source: "pics/speaker.png"
         frameCount: 60
         frameSync: true
         frameWidth: 170

examples/quick/imageelements/borderimage.qml

@@ -49,7 +49,6 @@
 ****************************************************************************/
 
 import QtQuick
-import "content"
 
 Rectangle {
     id: page
@@ -81,47 +80,47 @@ Rectangle {
 
             MyBorderImage {
                 minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
-                source: Qt.resolvedUrl("content/colors.png"); margin: 30
+                source: Qt.resolvedUrl("pics/colors.png"); margin: 30
             }
 
             MyBorderImage {
                 minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
-                source: Qt.resolvedUrl("content/colors.png"); margin: 30
+                source: Qt.resolvedUrl("pics/colors.png"); margin: 30
                 horizontalMode: BorderImage.Repeat; verticalMode: BorderImage.Repeat
             }
 
             MyBorderImage {
                 minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
-                source: Qt.resolvedUrl("content/colors.png"); margin: 30
+                source: Qt.resolvedUrl("pics/colors.png"); margin: 30
                 horizontalMode: BorderImage.Stretch; verticalMode: BorderImage.Repeat
             }
 
             MyBorderImage {
                 minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
-                source: Qt.resolvedUrl("content/colors.png"); margin: 30
+                source: Qt.resolvedUrl("pics/colors.png"); margin: 30
                 horizontalMode: BorderImage.Round; verticalMode: BorderImage.Round
             }
 
             MyBorderImage {
                 minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
-                source: Qt.resolvedUrl("content/bw.png"); margin: 10
+                source: Qt.resolvedUrl("pics/bw.png"); margin: 10
             }
 
             MyBorderImage {
                 minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
-                source: Qt.resolvedUrl("content/bw.png"); margin: 10
+                source: Qt.resolvedUrl("pics/bw.png"); margin: 10
                 horizontalMode: BorderImage.Repeat; verticalMode: BorderImage.Repeat
             }
 
             MyBorderImage {
                 minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
-                source: Qt.resolvedUrl("content/bw.png"); margin: 10
+                source: Qt.resolvedUrl("pics/bw.png"); margin: 10
                 horizontalMode: BorderImage.Stretch; verticalMode: BorderImage.Repeat
             }
 
             MyBorderImage {
                 minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
-                source: Qt.resolvedUrl("content/bw.png"); margin: 10
+                source: Qt.resolvedUrl("pics/bw.png"); margin: 10
                 horizontalMode: BorderImage.Round; verticalMode: BorderImage.Round
             }
         }

examples/quick/imageelements/doc/src/imageelements.qdoc

@@ -49,7 +49,7 @@
 
     \e Shadows shows how to create a drop shadow effect for a rectangular item
     using a \l BorderImage:
-    \snippet imageelements/content/ShadowRectangle.qml shadow
+    \snippet imageelements/ShadowRectangle.qml shadow
 
     \section1 Sprite Animations with AnimatedSprite
 

examples/quick/imageelements/framestepping.qml

@@ -58,7 +58,7 @@ Rectangle {
         id: img
         anchors.centerIn: parent
         cache: true
-        source: "content/multi.ico"
+        source: "pics/multi.ico"
 
         Shortcut {
             sequence: StandardKey.MoveToNextPage

examples/quick/imageelements/image.qml

@@ -49,7 +49,6 @@
 ****************************************************************************/
 
 import QtQuick
-import "content"
 
 Rectangle {
     width: 320

examples/quick/imageelements/imageelements.qml

@@ -49,7 +49,7 @@
 ****************************************************************************/
 
 import QtQuick
-import "../shared" as Shared
+import shared as Shared
 
 Item {
     height: 480

examples/quick/imageelements/imageelements.qrc

@@ -1,28 +1,28 @@
 <RCC>
     <qresource prefix="/imageelements">
-        <file>content/arrow.png</file>
-        <file>content/BearSheet.png</file>
-        <file>content/BorderImageSelector.qml</file>
-        <file>content/bw.png</file>
-        <file>content/colors-round.sci</file>
-        <file>content/colors-stretch.sci</file>
-        <file>content/colors.png</file>
-        <file>content/ImageCell.qml</file>
-        <file>content/multi.ico</file>
-        <file>content/MyBorderImage.qml</file>
-        <file>content/qt-logo.png</file>
-        <file>content/shadow.png</file>
-        <file>content/ShadowRectangle.qml</file>
-        <file>content/speaker.png</file>
-        <file>content/Uniflow_steam_engine.gif</file>
-        <file>imageelements.qml</file>
         <file>animatedimage.qml</file>
         <file>animatedsprite.qml</file>
         <file>borderimage.qml</file>
+        <file>BorderImageSelector.qml</file>
         <file>framestepping.qml</file>
-        <file>multiframeborderimage.qml</file>
+        <file>ImageCell.qml</file>
+        <file>imageelements.qml</file>
         <file>image.qml</file>
+        <file>multiframeborderimage.qml</file>
+        <file>MyBorderImage.qml</file>
+        <file>ShadowRectangle.qml</file>
         <file>shadows.qml</file>
         <file>spritesequence.qml</file>
+        <file>pics/arrow.png</file>
+        <file>pics/BearSheet.png</file>
+        <file>pics/bw.png</file>
+        <file>pics/colors-round.sci</file>
+        <file>pics/colors-stretch.sci</file>
+        <file>pics/colors.png</file>
+        <file>pics/multi.ico</file>
+        <file>pics/qt-logo.png</file>
+        <file>pics/shadow.png</file>
+        <file>pics/speaker.png</file>
+        <file>pics/Uniflow_steam_engine.gif</file>
     </qresource>
 </RCC>

examples/quick/imageelements/multiframeborderimage.qml

@@ -59,7 +59,7 @@ Rectangle {
         anchors.fill: parent
         anchors.margins: 6
         cache: true
-        source: "content/multi.ico"
+        source: "pics/multi.ico"
         border { left: 19; top: 19; right: 19; bottom: 19 }
         horizontalTileMode: BorderImage.Stretch
 

examples/quick/imageelements/shadows.qml

@@ -49,7 +49,6 @@
 ****************************************************************************/
 
 import QtQuick
-import "content"
 
 Rectangle {
     id: window

examples/quick/imageelements/spritesequence.qml

@@ -75,7 +75,7 @@ Item {
 //! [still]
         Sprite {
             name: "still"
-            source: "content/BearSheet.png"
+            source: "pics/BearSheet.png"
             frameCount: 1
             frameWidth: 256
             frameHeight: 256
@@ -85,7 +85,7 @@ Item {
 //! [still]
         Sprite {
             name: "blink"
-            source: "content/BearSheet.png"
+            source: "pics/BearSheet.png"
             frameCount: 3
             frameX: 256
             frameY: 1536
@@ -96,7 +96,7 @@ Item {
         }
         Sprite {
             name: "floating"
-            source: "content/BearSheet.png"
+            source: "pics/BearSheet.png"
             frameCount: 9
             frameX: 0
             frameY: 0
@@ -107,7 +107,7 @@ Item {
         }
         Sprite {
             name: "flailing"
-            source: "content/BearSheet.png"
+            source: "pics/BearSheet.png"
             frameCount: 8
             frameX: 0
             frameY: 768
@@ -118,7 +118,7 @@ Item {
         }
         Sprite {
             name: "falling"
-            source: "content/BearSheet.png"
+            source: "pics/BearSheet.png"
             frameCount: 5
             frameY: 1280
             frameWidth: 256