Phase 3 sub-commit 3: examples/todo POC app, built via the makers
Standalone Composer/CMake project under examples/todo/ derived from the
skeleton, demonstrating every Phase 3 architectural primitive in a
non-trivial app. All cross-side wiring is maker-generated; no
handwritten bridge glue.
Generated and customised:
- src/Entity/Todo.php — make:bridge:resource Todo (UUIDv7 id)
- src/Controller/TodoController.php — make:bridge:resource Todo (CRUD)
- src/Controller/MarkAllDoneController.php — make:bridge:command
MarkAllDone, body filled in to flip done=true on every row
- qml/TodoList.qml — make:bridge:resource Todo (starter ListView)
- qml/TodoWindow.qml — make:bridge:window Todo, body customised to
embed a read-only mirror of the same ReactiveListModel
The Phase 1 ping demo is dropped from this app — it doesn't fit the
todo flow and nothing in Main.qml references it.
Main.qml is the real list UI:
- Add input + button (POST /api/todos with optimistic-friendly key).
- Per-row CheckBox + delete button (PATCH/DELETE via
todoModel.invoke() with `pending` role driving opacity).
- "Mark all done" button (POST /api/mark-all-done).
- "Open second window" button (Component { TodoWindow {} } pattern).
Build / run delegated to the same Makefile shape as the skeleton, with
SCRIPT_DIR/QT_BIN updated for the renamed binary (build/qml/todo).
composer.json's path repo points at ../../../framework/php (one level
deeper than the skeleton's path repo).
Verified end-to-end with offscreen QPA: POST/PATCH/DELETE on /api/todos
all round-trip, /api/mark-all-done flips every row, Mercure dual-
publishes on every change. Clean shutdown.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
35
examples/todo/qml/CMakeLists.txt
Normal file
35
examples/todo/qml/CMakeLists.txt
Normal file
@@ -0,0 +1,35 @@
|
||||
cmake_minimum_required(VERSION 3.21)
|
||||
project(php_qml_todo_example LANGUAGES CXX)
|
||||
|
||||
set(CMAKE_CXX_STANDARD 20)
|
||||
set(CMAKE_CXX_STANDARD_REQUIRED ON)
|
||||
set(CMAKE_AUTOMOC ON)
|
||||
|
||||
find_package(Qt6 6.5 REQUIRED COMPONENTS Core Gui Quick QuickControls2 Network Qml)
|
||||
qt_standard_project_setup(REQUIRES 6.5)
|
||||
|
||||
# Pull in the framework's QML module (PhpQml.Bridge) — the example uses
|
||||
# the same module the skeleton does, just one level deeper in the tree.
|
||||
add_subdirectory(${CMAKE_CURRENT_SOURCE_DIR}/../../../framework/qml ${CMAKE_BINARY_DIR}/php_qml_bridge)
|
||||
|
||||
qt_add_executable(todo main.cpp)
|
||||
|
||||
qt_add_qml_module(todo
|
||||
URI Todo
|
||||
VERSION 1.0
|
||||
QML_FILES
|
||||
Main.qml
|
||||
TodoList.qml
|
||||
TodoWindow.qml
|
||||
)
|
||||
|
||||
target_link_libraries(todo PRIVATE
|
||||
Qt6::Core
|
||||
Qt6::Gui
|
||||
Qt6::Quick
|
||||
Qt6::QuickControls2
|
||||
Qt6::Network
|
||||
Qt6::Qml
|
||||
php_qml_bridge
|
||||
php_qml_bridgeplugin
|
||||
)
|
||||
212
examples/todo/qml/Main.qml
Normal file
212
examples/todo/qml/Main.qml
Normal file
@@ -0,0 +1,212 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
|
||||
import PhpQml.Bridge
|
||||
import Todo // local module — picks up TodoList.qml + TodoWindow.qml
|
||||
|
||||
ApplicationWindow {
|
||||
id: window
|
||||
width: 720
|
||||
height: 560
|
||||
visible: true
|
||||
title: "php-qml — Todo example"
|
||||
|
||||
// Single shared model means a second window sees the same data.
|
||||
// (Each ReactiveListModel instance has its own MercureClient
|
||||
// subscription, but the underlying server state is the same.)
|
||||
property alias rest: rest
|
||||
property alias todoModel: todoModel
|
||||
|
||||
RestClient {
|
||||
id: rest
|
||||
baseUrl: BackendConnection.url
|
||||
token: BackendConnection.token
|
||||
}
|
||||
|
||||
ReactiveListModel {
|
||||
id: todoModel
|
||||
baseUrl: BackendConnection.url
|
||||
token: BackendConnection.token
|
||||
source: "/api/todos"
|
||||
topic: "app://model/todo"
|
||||
|
||||
onCommandFailed: function(key, status, problem) {
|
||||
log.append("× failed " + status + ": " + JSON.stringify(problem))
|
||||
}
|
||||
onCommandTimedOut: function(key) {
|
||||
log.append("× timed out " + key)
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: secondWindowCmp
|
||||
TodoWindow {}
|
||||
}
|
||||
|
||||
AppShell {
|
||||
anchors.fill: parent
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 16
|
||||
spacing: 12
|
||||
|
||||
// ── Header / actions ────────────────────────────────────
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 8
|
||||
|
||||
Label {
|
||||
text: "Todos"
|
||||
font.pixelSize: 18
|
||||
font.bold: true
|
||||
}
|
||||
Item { Layout.fillWidth: true }
|
||||
Button {
|
||||
text: "Mark all done"
|
||||
onClicked: {
|
||||
rest.post("/api/mark-all-done").then(function(r) {
|
||||
log.append("→ mark-all-done")
|
||||
}).catch(function(e) {
|
||||
log.append("× mark-all-done " + e.status)
|
||||
})
|
||||
}
|
||||
}
|
||||
Button {
|
||||
text: "Open second window"
|
||||
onClicked: {
|
||||
const w = secondWindowCmp.createObject()
|
||||
if (w) w.show()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Add input ───────────────────────────────────────────
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 8
|
||||
|
||||
TextField {
|
||||
id: newTodoField
|
||||
Layout.fillWidth: true
|
||||
placeholderText: "What needs doing?"
|
||||
onAccepted: addBtn.clicked()
|
||||
}
|
||||
Button {
|
||||
id: addBtn
|
||||
text: "Add"
|
||||
enabled: newTodoField.text.trim().length > 0
|
||||
&& BackendConnection.connectionState === BackendConnection.Online
|
||||
onClicked: {
|
||||
const title = newTodoField.text.trim()
|
||||
if (!title) return
|
||||
rest.post("/api/todos", {title: title, done: false})
|
||||
.then(function(r) { log.append("→ added '" + title + "'") })
|
||||
.catch(function(e) { log.append("× add failed " + e.status) })
|
||||
newTodoField.clear()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Todo list ───────────────────────────────────────────
|
||||
Frame {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
padding: 0
|
||||
ListView {
|
||||
id: todoView
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
model: todoModel
|
||||
spacing: 1
|
||||
|
||||
delegate: ItemDelegate {
|
||||
required property string id
|
||||
required property string title
|
||||
required property bool done
|
||||
required property bool pending
|
||||
|
||||
width: ListView.view.width
|
||||
opacity: pending ? 0.5 : 1.0
|
||||
|
||||
contentItem: RowLayout {
|
||||
spacing: 8
|
||||
|
||||
CheckBox {
|
||||
checked: done
|
||||
enabled: !pending
|
||||
onToggled: {
|
||||
todoModel.invoke(
|
||||
"PATCH",
|
||||
"/api/todos/" + id,
|
||||
{ done: checked },
|
||||
{ op: "upsert", id: id, data: { id: id, title: title, done: checked } }
|
||||
)
|
||||
}
|
||||
}
|
||||
Label {
|
||||
Layout.fillWidth: true
|
||||
text: title
|
||||
font.strikeout: done
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
Button {
|
||||
text: "×"
|
||||
flat: true
|
||||
enabled: !pending
|
||||
onClicked: {
|
||||
todoModel.invoke(
|
||||
"DELETE",
|
||||
"/api/todos/" + id,
|
||||
null,
|
||||
{ op: "delete", id: id }
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Label {
|
||||
anchors.centerIn: parent
|
||||
visible: todoView.count === 0 && todoModel.ready
|
||||
text: "No todos yet — add one above."
|
||||
opacity: 0.6
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Status / log ────────────────────────────────────────
|
||||
Label {
|
||||
text: BackendConnection.url
|
||||
color: "#888"
|
||||
font.pixelSize: 11
|
||||
elide: Text.ElideRight
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
Frame {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 100
|
||||
padding: 0
|
||||
ScrollView {
|
||||
anchors.fill: parent
|
||||
TextArea {
|
||||
id: log
|
||||
readOnly: true
|
||||
wrapMode: TextArea.Wrap
|
||||
font.family: "monospace"
|
||||
font.pixelSize: 11
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: SingleInstance
|
||||
function onLaunchArgsReceived(args) {
|
||||
window.requestActivate()
|
||||
}
|
||||
}
|
||||
}
|
||||
28
examples/todo/qml/TodoList.qml
Normal file
28
examples/todo/qml/TodoList.qml
Normal file
@@ -0,0 +1,28 @@
|
||||
// Auto-generated by `bin/console make:bridge:resource Todo`.
|
||||
// Drop this into your QML and customize the delegate to taste.
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import PhpQml.Bridge
|
||||
|
||||
ListView {
|
||||
id: todoList
|
||||
|
||||
model: ReactiveListModel {
|
||||
baseUrl: BackendConnection.url
|
||||
token: BackendConnection.token
|
||||
source: "/api/todos"
|
||||
topic: "app://model/todo"
|
||||
}
|
||||
|
||||
delegate: ItemDelegate {
|
||||
required property string id
|
||||
required property string title
|
||||
required property bool done
|
||||
required property bool pending
|
||||
|
||||
text: title + (done ? " ✓" : "")
|
||||
opacity: pending ? 0.5 : 1.0
|
||||
width: ListView.view.width
|
||||
}
|
||||
}
|
||||
75
examples/todo/qml/TodoWindow.qml
Normal file
75
examples/todo/qml/TodoWindow.qml
Normal file
@@ -0,0 +1,75 @@
|
||||
// Auto-generated by `bin/console make:bridge:window Todo`,
|
||||
// then customised to embed a read-only TodoList. Independently subscribed
|
||||
// to the same Mercure topic — proves the multi-window test in PLAN.md §13.
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import PhpQml.Bridge
|
||||
|
||||
ApplicationWindow {
|
||||
id: todoWindow
|
||||
width: 480
|
||||
height: 520
|
||||
visible: true
|
||||
title: "Todos (mirror)"
|
||||
|
||||
ReactiveListModel {
|
||||
id: mirrorModel
|
||||
baseUrl: BackendConnection.url
|
||||
token: BackendConnection.token
|
||||
source: "/api/todos"
|
||||
topic: "app://model/todo"
|
||||
}
|
||||
|
||||
AppShell {
|
||||
anchors.fill: parent
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 16
|
||||
spacing: 12
|
||||
|
||||
Label {
|
||||
text: "Mirror window"
|
||||
font.pixelSize: 16
|
||||
font.bold: true
|
||||
}
|
||||
Label {
|
||||
text: "Read-only view of the same /api/todos. Edits in the main window propagate here within ~50 ms via Mercure."
|
||||
wrapMode: Text.Wrap
|
||||
opacity: 0.7
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
Frame {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
padding: 0
|
||||
ListView {
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
model: mirrorModel
|
||||
|
||||
delegate: ItemDelegate {
|
||||
required property string title
|
||||
required property bool done
|
||||
required property bool pending
|
||||
|
||||
width: ListView.view.width
|
||||
opacity: pending ? 0.5 : 1.0
|
||||
text: (done ? "✓ " : " ") + title
|
||||
}
|
||||
|
||||
Label {
|
||||
anchors.centerIn: parent
|
||||
visible: parent.count === 0 && mirrorModel.ready
|
||||
text: "(empty)"
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
28
examples/todo/qml/main.cpp
Normal file
28
examples/todo/qml/main.cpp
Normal file
@@ -0,0 +1,28 @@
|
||||
#include <QGuiApplication>
|
||||
#include <QQmlApplicationEngine>
|
||||
#include <QQmlContext>
|
||||
#include <QStringList>
|
||||
|
||||
#include "SingleInstance.h"
|
||||
|
||||
int main(int argc, char *argv[])
|
||||
{
|
||||
QGuiApplication app(argc, argv);
|
||||
QGuiApplication::setOrganizationName(QStringLiteral("php-qml"));
|
||||
QGuiApplication::setApplicationName(QStringLiteral("todo"));
|
||||
|
||||
PhpQml::Bridge::SingleInstance singleInstance(QStringLiteral("todo"));
|
||||
if (!singleInstance.acquireOrForward(app.arguments())) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
QQmlApplicationEngine engine;
|
||||
engine.rootContext()->setContextProperty(QStringLiteral("SingleInstance"), &singleInstance);
|
||||
engine.loadFromModule("Todo", "Main");
|
||||
|
||||
if (engine.rootObjects().isEmpty()) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return app.exec();
|
||||
}
|
||||
Reference in New Issue
Block a user