数字はファイルに無い — 同じファイル、二つの絵

第2回までの画面は、ファイルに書いたものしか見せない。待ち番号をそう作ると、番号が変わるたびに画面ファイルを送り直すことになる。

場所を空けておく

{ "type": "page", "title": "Step 3",
  "initialState": { "now": "0", "waiting": 0 },
  "content": { "type": "center",
    "child": { "type": "linear", "direction": "vertical", "spacing": 10, "alignment": "center",
      "children": [
        { "type": "text", "text": "NOW SERVING", "style": { "fontSize": 15, "letterSpacing": 5, "color": "#6b7280" } },
        { "type": "text", "text": "{{now}}", "style": { "fontSize": 92, "fontWeight": "bold", "color": "#111827" } },
        { "type": "text", "text": "{{waiting}} waiting", "style": { "fontSize": 20, "color": "#6b7280" } } ] } } }

二つ増えた。

initialState — この画面が開いた瞬間に持つ値。開いてすぐ空欄が見えないようにするためだ。

{{now}} — そこに状態の now を入れよという印。丸ごと書いてもいいし、{{waiting}} waiting のように文の中に混ぜてもいい。

値を入れる

rt.stateManager.set('now', '42') のようにキーと値を渡すと、そのキーを使うノードが描き直される。ホストはどのノードだったか知らないし、知る必要もない。

クライアント講座で作ったものと繋げば、一つずつ入れる必要もない。

onToolCall: (tool, params) async {
  // サーバーが返したマップをそのまま流し込む
  final r = await client.callTool(tool, params);
  final state = jsonDecode((r.content.first as TextContent).text)
      as Map<String, dynamic>;
  state.forEach(rt.stateManager.set);
},

サーバー講座 第3回でツールが {"now": ..., "waiting": ...} を返すようにしてある。そのマップのキーと画面の {{...}} の名前が同じなら、あいだに変換コードは要らない。