// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only

/*!

    \ingroup gstutorials

    \page design-viewer-single-page-navigation.html
    \brief Illustrates how to create a single-page navigation web
    application that you can run in Qt Design Viewer.

    \title Creating a single-page navigation web application

    This tutorial explains how you can create a single-page navigation web
    application suitable to run in Qt Design Viewer. In this project,
    you create the structure and navigation for the web application.

    \section1 Setting up the project

    In the \QDS Welcome screen, select \uicontrol {Create Project}.
    Then, in the \uicontrol Presets tab, select > \uicontrol Desktop > \uicontrol Launcher,
    and set:
      \list
        \li \uicontrol Resolution to 1024 x 768.
        \li \uicontrol {Qt Target Version} to 6.2.
      \endlist

    Next, remove the unneeded components from the new project.

    In \uicontrol Navigator:
        \list 1
          \li Select and delete \e Text.
          \li Select \e Rectangle and in \uicontrol Properties, set
          \uicontrol {Fill color} to #ffffff.
        \endlist

    \section1 Adding components

    Next, add the needed components to create the structure for your
    web application.

    First, to add the needed components to \uicontrol Components, add the
    \uicontrol {QtQuick Layouts} module to your project:
    \list 1
      \li In \uicontrol Components, select
      \imageplus.
      \li Select \uicontrol {QtQuick.Layouts}.
    \endlist

    Next, drag the following components from \uicontrol Components to
    \uicontrol Navigator:

    \list 1
      \li A \uicontrol Rectangle to the root \e Rectangle.
      \li A \uicontrol Row component to the new \e rectangle component.
      \li Three \uicontrol Button components to \e Row.
      \li A \uicontrol Flickable to the new \e rectangle.
      \li A \uicontrol {Column Layout} to \e Flickable.
    \endlist

    \image web-navigation-components.png {The added components in the Navigator view.}

    \section1 Creating the pages

    Next, create separate pages for \e Home, \e {About Us}, and \e {Contact Us} pages of
    your web application. Create each page as a separate component and then add ithem to
    the main application.

    To create the first page:

    \list 1
      \li Go to \uicontrol File > \uicontrol {New File}.
      \li On the \uicontrol {Qt Quick Files} tab,
      select the \uicontrol {Qt Quick File} wizard template.
      \li Select \uicontrol {Choose} and enter a name, for example, \e Page1.
      \li Set \uicontrol {Root Item} to \e Rectangle.
    \endlist

    \image {web-navigation-new-file.png} {Creating a new page using the Qt Quick File wizard template.}

    When you have created the new page, select \e rectangle in
    \uicontrol Navigator, and in the \uicontrol Properties view:
    \list
      \li Set \uicontrol Size > \uicontrol H to 1024.
      \li Next to \uicontrol Size > \uicontrol W, select
      \imageactionicon, and select \uicontrol Reset.
    \endlist

    Next, create a header for the page:
    \list 1
      \li From \uicontrol Components, drag a \uicontrol Text component
      to \e Rectangle in \uicontrol Navigator.
      \li In \uicontrol Properties, go to the \uicontrol Text tab and set:
        \list
          \li \uicontrol Text to \e Welcome.
          \li \uicontrol {Style Name} to Bold.
          \li \uicontrol Size to 32 px.
        \endlist
      \li On the \uicontrol Layout tab set the anchors and margins to:
        \list
          \li Top, 100
          \li Left, 50
        \endlist
        \image {web-navigation-page-margins.png} {Setting the anchors and margins in the Layout tab of the Properties view.}
    \endlist

Now, with the first page done, create two more pages in the same way. For these
pages, set the text to \e {About Us} and \e {Contact Us} respectively.

You can change the file that you are working on from the dropdown menu in the
toolbar. Now, select \e Screen01.ui.qml from this menu to go back to your
main page.

\image {web-navigation-change-file.png} {Changing between files using the dropdown menu.} {Changing the file in top toolbar.}

You can see the pages you created under \uicontrol {My Components} in the
\uicontrol Components view. To edit a component, right-click it in
\uicontrol Components and select \uicontrol {Edit Component}

\image {web-navigation-page-components.png} {The newly created pages in My Components in the Components view.}

\section1 Organizing the pages

To organize the pages vertically:

\list 1
  \li From \uicontrol Components, drag each of the pages to
  \e columnLayout in \uicontrol Navigator.
  \image {web-navigation-components-2.png} {The added components in the Navigator view.}
  \li Select \e columnLayout in Navigator and in \uicontrol Properties:
    \list
      \li Next to \uicontrol Size > \uicontrol W and \uicontrol Size >
      \uicontrol H, select \imageactionicon
      and select \uicontrol Reset.
      \li Set \uicontrol {Column Spacing} to 0.
    \endlist
  \li Select \e flickable in \uicontrol Navigator, and in \uicontrol Properties:
    \list
      \li Next to \uicontrol Size > \uicontrol W and \uicontrol Size >
      \uicontrol H, select \imageactionicon
      and select \uicontrol Reset.
      \li Set \uicontrol {Content size} > \uicontrol H to 3072.
      \li On the \uicontrol Layout tab, select
      \uicontrol {Fill parent component}.
    \endlist
\endlist

You must also create a scrollbar to scroll the web application. You create
vertical and horizontal scrollbars that are visible only when the content
doesn't fit in the window, similar to web browser scrollbars.

To create the scrollbar, go to the \uicontrol Code view and enter the scrollbar
code inside the \e Flickable component:
\code
      Flickable {
        id: flickable
        anchors.fill: parent
        contentHeight: 3072
       ScrollBar.vertical: ScrollBar {
            policy: flickable.contentHeight > flickable.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
            width: 20
        }
        ScrollBar.horizontal: ScrollBar {
            policy: flickable.contentWidth > flickable.width ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
            height: 20
        }
        ...
\endcode

To align the scrollbar to the right and bottom side of the window, set the height and width of
the main rectangle, so that it adapts to the window size:

\list 1
  \li In \uicontrol Navigator, select \e Rectangle.
  \li In \uicontrol Properties, select
  \imageactioniconbinding
  next to \uicontrol Width and select \uicontrol {Set Binding}.
  \li Enter \c {Window.width}
  \image {web-navigation-size-binding.png} {Window.width set in Binding Editor.}
  \li Repeat step 2 and 3 for \uicontrol Height and set the value to
  \c {Window.height}.
\endlist

\section1 Creating the navigation

For the final step of the tutorial, create the navigation for the web page using the buttons
that you created earlier.

First, create an animation to use when scrolling between the different pages:

\list 1
  \li From \uicontrol Components, drag a \uicontrol {Number Animation} to
  \e Rectangle in \uicontrol Navigator.
  \li In \uicontrol Properties, set:
    \list
      \li \uicontrol Target to \e flickable.
      \li \uicontrol Property to \e contentY.
      \li \uicontrol Duration to \e 200.
    \endlist
\endlist

Next, connect the buttons to the number animation to scroll the content
vertically to the correct place:

\list 1
  \li In \uicontrol Navigator, select \e rectangle and in \uicontrol Properties
   set:
    \list
      \li \uicontrol Height to 40.
      \li \uicontrol {Fill color} to #e0e0e0.
      \li \uicontrol {Z stack} to 1.
    \endlist
  \li Select \imageactioniconbinding
  next to \uicontrol Width and select \uicontrol {Set Binding}.
  \li Enter \c {parent.width}.
  \image {web-navigation-size-binding-2.png} {parent.width set in Binding Editor.}
  \li In \uicontrol Navigator:
    \list 1
      \li Select \e Button and on the \uicontrol Button tab in \uicontrol Properties,
      set \uicontrol Text to \e {Home}.
      \li Select \e Button1 and on the \uicontrol Button tab in \uicontrol Properties,
      set \uicontrol Name to \e {About Us}.
      \li Select \e Button2 and on the \uicontrol Button tab in \uicontrol Properties,
      set \uicontrol Name to \e {Contact Us}.
    \endlist
  \li In \uicontrol Code, enter \e connections for each of the buttons to run
  the number animation when pressed.
  \code
  Button {
            id: button
            text: qsTr("Home")
            Connections {
                target: button

                onPressed: {
                    numberAnimation.to = 0
                    numberAnimation.start()
                }
            }
        }

        Button {
            id: button1
            text: qsTr("About Us")
            Connections {
                target: button1

                onPressed: {
                    numberAnimation.to = 1024
                    numberAnimation.start()
                }
            }
        }

        Button {
            id: button2
            text: qsTr("Contact Us")
            Connections {
                target: button2

                onPressed: {
                    numberAnimation.to = 2048
                    numberAnimation.start()
                }
            }
        }
        \endcode
\endlist

\section1 Previewing the application

To preview your application in \uicontrol {Live Preview}, select \key Alt + \key P. You
can also go to \uicontrol File > \uicontrol {Share Application Online} to
share and preview your application in a web browser.

*/