A simple demonstration for recipes menu

App.qml

import QtQuick
import QtQuick.Window
import QtQuick.Controls

import org.julialang

Window {

    id : window

    width: 900
    height: 700 

    visible: true
    color: "#C1BCB5"
    title: "Test"

    
    property int deme

    // We are not using bridge.deme directly
    // as that would couple Julia model from the view
    onDemeChanged : {
        console.log("Deme changed")
        bridge.deme = deme
    }

    property var demeModel : bridge.demeModel
    property var proposalModel : bridge.proposalModel


    ListView {

        anchors.top : parent.top
        anchors.bottom : parent.bottom
        anchors.left : parent.left
        anchors.right : parent.horizontalCenter

        anchors.topMargin : 50

        spacing : 10

        model : demeModel

        delegate : Rectangle {

            anchors.horizontalCenter : parent.horizontalCenter

            width : 0.8 * parent.width
            height : 50

            color : "#E6E4E1"

            border.width : 2
            border.color : window.deme == model.uuid ? "black" : "transparent"
            
            Text { 

                anchors.centerIn : parent
                
                font.pointSize : 24
                text : model.title

            }

            MouseArea {
                anchors.fill : parent
                onClicked : window.deme = model.uuid
            }
        }
    }

    
    ListView { 

        id : listview

        anchors.top : parent.top
        anchors.bottom : parent.bottom
        anchors.left : parent.horizontalCenter
        anchors.right : parent.right

        anchors.topMargin : 50

        spacing : 10

        model : proposalModel


        delegate : Rectangle {

            anchors.horizontalCenter : listview.horizotnalCenter // to a parent
            width : 0.8 * listview.width

            height : 80

            color : "#E6E4E1"
            
            Text { 

                anchors.horizontalCenter : parent.horizontalCenter
                anchors.top : parent.top
                anchors.topMargin : 10
                
                font.pointSize : 16
                text : title // model.title also works

            }

            
            ComboBox {
                anchors.horizontalCenter : parent.horizontalCenter
                anchors.bottom : parent.bottom
                anchors.bottomMargin : 10
                
                width: 200
                model : options // model.options DOES NOT WORK!!!
            }

        }

    }
}

Main.jl

ENV["QT_QUICK_CONTROLS_STYLE"] = "Basic"

using QML
using Observables

function reset!(lm, list)

    QML.begin_reset_model(lm)

    data = QML.get_julia_data(lm)

    empty!(data.values[])
    append!(data.values[], list)

    QML.end_reset_model(lm)

    return
end

mutable struct DemeItem
    uuid::Int
    title::String
end


mutable struct ProposalItem
    uuid::Int
    title::String
    options::Vector{String}
end


ProposalItem(uuid, title) = ProposalItem(uuid, title, ["1", "2", "3"])

bridge = QML.JuliaPropertyMap()

deme = Observable(0)

deme_model = JuliaItemModel([DemeItem(23, "apples"), DemeItem(12, "bananas"), DemeItem(19, "pears")])
proposal_model = JuliaItemModel(ProposalItem[])


proposal_data = Dict(23 => [ProposalItem(21, "jam"), ProposalItem(12, "pie")],
                     12 => [ProposalItem(14, "salad"), ProposalItem(19, "smoothie")],
                     19 => [ProposalItem(19, "juice"), ProposalItem(41, "raw")])


on(deme) do x

    println("Deme changed to $x")
    reset!(proposal_model, proposal_data[x])

end

loadqml("App.qml"; bridge = JuliaPropertyMap("deme" => deme, "proposalModel" => proposal_model, "demeModel" => deme_model))

exec()