フォームとリスト

GoField — 間違いを抱えられる行

入力欄が5つあるフォームの先頭に「入力を確認してください」と1行あっても、どの欄なのかは分からない。 その1点だけで、人は新規登録をやめてしまう。

var name_field := GoField.make("キャラクター名", GoStyle.line_edit("2〜12文字"), "あとから変更できない")
name_field.set_error("その名前は使われている")   # サーバーが断った
name_field.clear_error()

エラーが出ている間ヒントは隠れるので、行が1行ぶん伸びて下のすべてを押し下げることがない。エラーの文は コントロールの読み上げ名にも連結される — 赤い枠だけでは、赤が見えない人には何も伝わらない。

GoStyle.field() は静的な版だ。ラベル、コントロール、ヒント、エラー状態なし。何も失敗しよう がないところはファクトリで、サーバーに断られうるものはノードで作る。

GoInputGroup — ボタンと溶接された入力欄

GoInputGroup.make(GoStyle.line_edit("メッセージ"), {"suffix": GoStyle.icon_button(&"send", send)})
GoInputGroup.make(GoStyle.line_edit("名前"), {"prefix_icon": &"search"})

これが解くのは角の問題だ。丸い形が2つ真ん中で出会うとくびれて見えるし、既定の隙間があると2つの物体と して読めてしまう。外側の角は丸いまま、触れ合う角は四角にする — それをボタンのどの状態でも行う。さもないと、 押した瞬間にグループが割れる。面取りのスキンにはそもそも角の項目がないので、そこでは何も触らず、四角い 面どうしがきれいに合わさる。

GoCombobox — 検索できるピッカー

項目が10個までなら GoStyle.select() のほうがよい。タップが1回少なく、リスト全体が見える。 30 を超えると、目で追うこと自体が作業になる。

var picker := GoCombobox.make(server_names, 0, "サーバーを選ぶ")
picker.picked.connect(func(i: int) -> void: connect_to(servers[i]))

GoCodeInput — クーポンとギフトコード

コードは打ち込まれるより、メッセージから貼り付けられることのほうがずっと多い。本物の入力欄を12個並べると、 貼り付けは最初のマスで止まり、IME が文字を食う。だから文字を受け取るのは隠した1つの欄で、マスは描かれた ものだ。ABCD-EFGH-IJKL は、入るときにハイフンが落ちる。

var coupon := GoCodeInput.make(12, 4)
coupon.completed.connect(func(code: String) -> void: server.redeem(code))
coupon.set_error("使用済み")

GoTable — 並べ替えできる見出し、選べる行

var board := GoTable.make(
    [{"text": "順位", "width": 56}, {"text": "名前"}, {"text": "スコア", "numeric": true}], rows)
board.row_selected.connect(func(i: int) -> void: open_profile(rows[i]))

row_selected が渡すのは、並べ替え後の位置ではなく元の配列での添字だ。並べ替えの向きは色だけで なく記号でも示され、行は全体が押せるので、1つのセルを狙う必要はない。GoStyle.table() は 読み取り専用の表のまま残る。

GoPagination — ページ番号、あるいは「もっと見る」の行

var pager := GoPagination.make(1, 12, func(page: int) -> void: load_mail(page))
var more := GoPagination.more(load_next)   # スマートフォン向きの変種

番号はマウスの UI だ。スマートフォンなら「もっと見る」の行のほうが読みやすい。現在のページは窓の中央に 留まるので、次を押すたびに番号が全部並び替わることはない。合計 0 は「不明」を意味し、矢印だけが描かれる — 渡されていないページ数を、勝手に作り出したりはしない。