숫자는 파일에 없다

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": ...} 를 돌려주도록 만들어 뒀다. 그 맵의 키와 화면의 {{...}} 이름이 같으면 사이에 변환 코드가 없다.

숫자는 파일에 없다 — 같은 파일, 두 그림

자리를 비워 둔다

값을 넣는다