doc: Expand multi-output example documentation

Add code snippets and an image, and explain some details in how the
two different scenes are set up.

Task-number: QTBUG-91674
Change-Id: If45b2ef78820d57f0ad3ec40c76a88a250ea749b
Reviewed-by: Paul Olav Tvete <paul.tvete@qt.io>
Reviewed-by: Eskil Abrahamsen Blomfeldt <eskil.abrahamsen-blomfeldt@qt.io>

1 files changed, 7 insertions, 5 deletions

diff --git a/examples/wayland/multi-output/qml/main.qml b/examples/wayland/multi-output/qml/main.qml
index 7632eb9cf..5cde7411c 100644
--- a/examples/wayland/multi-output/qml/main.qml
+++ b/examples/wayland/multi-output/qml/main.qml
@@ -95,17 +95,19 @@ WaylandCompositor {
 
     XdgOutputManagerV1 {}
 
-    WlShell {
-        id: defaultShell
-
-        onWlShellSurfaceCreated: {
-            var item = chromeComponent.createObject(defaultOutput.surfaceArea, { "shellSurface": shellSurface } );
+    // ![xdgshell]
+    XdgShell {
+        onToplevelCreated: {
+            var item = chromeComponent.createObject(defaultOutput.surfaceArea, { "shellSurface": xdgSurface } );
             item.surface.activated.connect(item.raise);
         }
     }
+    // ![xdgshell]
 
+    // ![onSurfaceRequested]
     onSurfaceRequested: {
         var surface = surfaceComponent.createObject(comp, { } );
         surface.initialize(comp, client, id, version);
     }
+    // ![onSurfaceRequested]
 }