magdev/php-qml
1
Fork 0
Code Issues Pull Requests Actions Releases 4 Activity

Phase 3 sub-commit 3: examples/todo POC app, built via the makers

Browse Source 
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:
Marco Grätsch
2026-05-02 15:22:36 +02:00
parent 9c97984bc9
commit 15f9aa032e
28 changed files with 6793 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
examples/todo/qml/Main.qml Normal file
View 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()
}
}
}