WebEngine Recipe Browser

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QQuickStyle>
#include <qtwebengineglobal.h>

int main(int argc, char *argv[])
{
    QCoreApplication::setOrganizationName("QtExamples");
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
    QtWebEngine::initialize();

    QQuickStyle::setStyle(QStringLiteral("Material"));

    QQmlApplicationEngine engine;

    bool isEmbedded = false;
#ifdef QTWEBENGINE_RECIPE_BROWSER_EMBEDDED
    isEmbedded = true;
#endif
    engine.rootContext()->setContextProperty(QStringLiteral("isEmbedded"), isEmbedded);

    engine.load(QUrl(QStringLiteral("qrc:/qml/main.qml")));

    return app.exec();
}

ApplicationWindow {
    id: appWindow
    title: qsTr("Recipe Browser")
    visible: true

    property int shorterDesktop: 768
    property int longerDesktop: 1024
    property int shorterMin: 360
    property int longerMin: 480
    property bool isPortrait: Screen.primaryOrientation === Qt.PortraitOrientation
    width: {
        if (isEmbedded)
            return Screen.width
        var potentialWidth = shorterDesktop
        if (!isPortrait)
            potentialWidth = longerDesktop
        return potentialWidth > Screen.width ? Screen.width : potentialWidth
    }
    height: {
        if (isEmbedded)
            return Screen.height
        var potentialHeight = longerDesktop
        if (!isPortrait)
            potentialHeight = shorterDesktop
        return potentialHeight > Screen.height ? Screen.height : potentialHeight
    }
    minimumWidth: isPortrait ? shorterMin : longerMin
    minimumHeight: isPortrait ? longerMin : shorterMin

    RowLayout {
        id: container
        anchors.fill: parent
        spacing: 0

        RecipeList {
                ...
            }
        }

        WebEngineView {
                ...
        }
    }

        RecipeList {
            id: recipeList
            Layout.minimumWidth: 124
            Layout.preferredWidth: parent.width / 3
            Layout.maximumWidth: 300
            Layout.fillWidth: true
            Layout.fillHeight: true
            focus: true
            activeFocusOnTab: true
            onRecipeSelected: function(url) {
                webView.showRecipe(url)
            }

        WebEngineView {
            id: webView
            Layout.preferredWidth: 2 * parent.width / 3
            Layout.fillWidth: true
            Layout.fillHeight: true
            // Make sure focus is not taken by the web view, so user can continue navigating
            // recipes with the keyboard.
            settings.focusOnNavigationEnabled: false

            onContextMenuRequested: function(request) {
                request.accepted = true
            }

            property bool firstLoadComplete: false
            onLoadingChanged: function(loadRequest) {
                if (loadRequest.status === WebEngineView.LoadSucceededStatus
                    && !firstLoadComplete) {
                    // Debounce the showing of the web content, so images are more likely
                    // to have loaded completely.
                    showTimer.start()
                }
            }

            Timer {
                id: showTimer
                interval: 500
                repeat: false
                onTriggered: {
                    webView.show(true)
                    webView.firstLoadComplete = true
                    recipeList.showHelp()
                }
            }

            Rectangle {
                id: webViewPlaceholder
                anchors.fill: parent
                z: 1
                color: "white"

                BusyIndicator {
                    id: busy
                    anchors.centerIn: parent
                }
            }

            function showRecipe(url) {
                webView.url = url
            }

            function show(show) {
                if (show === true) {
                    busy.running = false
                    webViewPlaceholder.visible = false
                } else {
                    webViewPlaceholder.visible = true
                    busy.running = true
                }
            }
        }
    }
}

FocusScope {
    id: root
    signal recipeSelected(url url)

    ColumnLayout {
        spacing: 0
        anchors.fill: parent

        ToolBar {
            id: headerBackground
            Layout.fillWidth: true
            implicitHeight: headerText.height + 20

            Label {
                id: headerText
                width: parent.width
                text: qsTr("Favorite recipes")
                padding: 10
                anchors.centerIn: parent
            }
        }

        ListView {
            id: listView
            Layout.fillWidth: true
            Layout.fillHeight: true
            keyNavigationWraps: true
            clip: true
            focus: true
            ScrollBar.vertical: ScrollBar { }

            model: recipeModel

            delegate: ItemDelegate {
                width: parent.width
                text: model.name
                contentItem: Text {
                    text: parent.text
                    font: parent.font
                    color: parent.enabled ? parent.Material.primaryTextColor
                                          : parent.Material.hintTextColor
                    elide: Text.ElideRight
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                    wrapMode: Text.Wrap
                }

                property url url: model.url
                highlighted: ListView.isCurrentItem

                onClicked: {
                    listView.forceActiveFocus()
                    listView.currentIndex = model.index
                }
            }

            onCurrentItemChanged: {
                root.recipeSelected(currentItem.url)
            }

            ListModel {
                id: recipeModel

                ListElement {
                    name: "Pizza Diavola"
                    url: "qrc:///pages/pizza.html"
                }
                ListElement {
                    name: "Steak"
                    url: "qrc:///pages/steak.html"
                }
                ListElement {
                    name: "Burger"
                    url: "qrc:///pages/burger.html"
                }
                ListElement {
                    name: "Soup"
                    url: "qrc:///pages/soup.html"
                }
                ListElement {
                    name: "Pasta"
                    url: "qrc:///pages/pasta.html"
                }
                ListElement {
                    name: "Grilled Skewers"
                    url: "qrc:///pages/skewers.html"
                }
                ListElement {
                    name: "Cupcakes"
                    url: "qrc:///pages/cupcakes.html"
                }
            }

            ToolTip {
                id: help
                implicitWidth: root.width - padding * 3
                y: root.y + root.height
                delay: 1000
                timeout: 5000
                text: qsTr("Use keyboard, mouse, or touch controls to navigate through the\
                            recipes.")

                contentItem: Text {
                    text: help.text
                    font: help.font
                    color: help.Material.primaryTextColor
                    wrapMode: Text.Wrap
                }
            }
        }
    }

    function showHelp() {
        help.open()
    }
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Soup</title>
  <link rel="stylesheet" type="text/css" href="assets/3rdparty/markdown.css">
  <link rel="stylesheet" type="text/css" href="assets/custom.css">
</head>
<body>
  <div id="placeholder"></div>
  <div id="content">

<img src="images/soup.jpg" alt="Soup" title="Soup" />

Soup
=============

### Ingredients

* 2 potatoes
* 2 onions
* 2 cloves of garlic
* olive oil
* 400 ml organic stock
* 3 bunches of watercress

### Instructions
* Peel and roughly chop the potatoes, onions and garlic.
* In a large saucepan, heat a little olive oil, then sauté the potato, onion and garlic until the onions are translucent.
* Add the stock and simmer until the potato is soft. Chop and add the watercress and simmer for a further 3 to 4 minutes.
* Using a hand blender, liquidise the soup until smooth.
* Serve with a swirl of crème fraîche and some Fortt’s Bath Oliver biscuits, if you like.

**Enjoy!**

  </div><!--End of content-->
  <script src="assets/3rdparty/marked.js"></script>
  <script src="assets/custom.js"></script>
</body>
</html>