4.2 Toolbar

Toolbar

Toolbarは、WindowにOS標準のコマンドボタンを追加します。通常のボタン、トグルボタン、区切り線、アイコン、ツールチップ、および複数の表示モードを利用できます。

Toolbarはkojix2/libui-ng固有の実験的な機能であり、今後変更される可能性があります。

表示例

実行例

require "uing"
require "base64"
require "compress/zlib"

NEW_ICON  = "eNpjYKAcePRc+k8OprV+GBgp+okFtNI/0sN/oNL/KBi4MoxacTdq/9CyH1eZOGr/qP2j9g99+6kNRu0fWvaP5r9R+0ftH7V/tP07MuwfqQAAcYgRdg=="
OPEN_ICON = "eNrtlsENACEIBK3wSrnCbNJ73dOosIQQZxKfm0EhxNb8PP0dlhOd/yF/lp9x4l9lI+rfJSqfNf+Qt8NUvcNfy7+z3/Djx4+/ut+K8v5Kt/X9VW5P/xVu7/x53RXmXw3+Wn7+v3f5b+UD4HmCow=="
PIN_ICON  = "eNrtlksOABAMRN3KOR3RSdjaiKLU503S5XjBZHBuXjH4NDLafqlW+cupeaT7t/CfdH7leqP5ud0vzT+y6zCtu4N/Fl9b8O/itzpdytHOP3z4O/j0D/3Xk8Pd7z98+PDt+K/9/39VBiV4ujY="
HELP_ICON = "eNpjYKAcTMzc958cTGv9MDBQ+ke6/4e6/oGOP2L1j4KBK8OoFXej9g8t+9HBqP0jy/7R/Dea/0fz36j9o/aP2j9a/43WP6P2D237RyoAAGYovgE="

def decode_icon(data : String) : Bytes
  compressed = Base64.decode(data)
  io = IO::Memory.new(compressed)

  Compress::Zlib::Reader.open(io) do |zlib|
    zlib.getb_to_end
  end
end

def new_icon(data : String) : UIng::Image
  pixels = decode_icon(data)

  UIng::Image.new(16, 16) do
    append(pixels[0, 1024], 16, 16, 64)
    append(pixels[1024, 4096], 32, 32, 128)
  end
end

UIng.init

icons = [
  new_icon(NEW_ICON),
  new_icon(OPEN_ICON),
  new_icon(PIN_ICON),
  new_icon(HELP_ICON),
]

window = UIng::Window.new("Toolbar", 400, 100)
window.toolbar do
  UIng::Toolbar.new do |bar|
    bar.display_mode = UIng::Toolbar::DisplayMode::IconAndTextVertical

    append_button("New", icons[0]) do |item|
      item.tooltip = "New document"
      on_clicked { puts "New clicked" }
    end

    append_button("Open", icons[1]) do |item|
      item.tooltip = "Open document"
      on_clicked { puts "Open clicked" }
    end

    append_separator

    append_toggle_button("Pinned", icons[2]) do |item|
      item.tooltip = "Pin document"
      on_clicked { |clicked| puts "Pinned: #{clicked.checked? ? "yes" : "no"}" }
    end

    append_separator

    append_button("Help", icons[3]) do |item|
      item.tooltip = "Show help"
      on_clicked { puts "Help clicked" }
    end
  end
end
toolbar = window.toolbar || raise "Toolbar was not attached"
icons.each &.free

display_modes = UIng::Toolbar::DisplayMode.values
mode_selector = UIng::Combobox.new([
  "Icons only",
  "Icons and text (horizontal)",
  "Icons and text (vertical)",
  "Text only",
])
mode_selector.selected = 2
mode_selector.on_selected { |index| toolbar.display_mode = display_modes[index] }
window.child = mode_selector
window.margined = true

window.on_closing do
  UIng.quit
  true
end

window.show
UIng.main
UIng.uninit

使い方

Toolbar.newで項目を構築し、window.toolbarのブロックが返すToolbarをWindowへ取り付けられます。Window側のブロックでは受け手を切り替えません。

window.toolbar do
  UIng::Toolbar.new do
    append_button("Open") do |item|
      item.tooltip = "Open document"
      on_clicked { |_clicked| puts "Open clicked" }
    end
    append_toggle_button("Pinned") do |item|
      item.checked = true
    end
  end
end

項目の設定ブロックではToolbarItemのメソッドを直接呼べます。代入には|item|を使います。Toolbar.newは生成したToolbar、append_buttonとappend_toggle_buttonは生成したToolbarItemを返します。CrImageのアイコンを指定する形式でも同じ設定ブロックが使えます。

Toolbar.newのブロックが例外終了すると、取り付け済みならWindowから外してToolbarと項目を解放し、元の例外を再送出します。既存Toolbarへの項目追加ブロックだけが例外終了した場合、その項目は追加済みのまま残ります。

すべての項目は、ToolbarをWindowへ初めて取り付ける前に追加します。一度取り付けた後は、取り外しても項目を追加できません。
display_modeは取り付け後も変更できます。変更時には、既存の項目、クリック時のコールバック、有効・無効状態、トグルの選択状態が維持されます。
Toolbarは一度に1つのWindowにのみ取り付けられます。Windowを破棄すると、取り付け中のToolbarも解放されます。Toolbarを再利用する場合は、Windowの破棄前にwindow.toolbarへnilを代入してください。取り外したToolbarは引き続きfreeが必要です。
Toolbarの項目は、後からicon=で設定したものを含め、画像をコピーします。渡したImageはすぐに解放でき、Toolbarは自身のコピーを解放します。取り付け中のToolbarをtoolbar.freeで解放する場合は、先に取り外してください。
コピーに備えてImageは元の画素データを保持するため、大きな画像ではメモリ使用量が増えます。
checked?とchecked=は、append_toggle_buttonで作成した項目でのみ利用できます。
macOSでは、IconAndTextHorizontalも縦方向に表示されます。

取り付けたToolbarの表示モードは、次のように切り替えられます。Galleryの実行例でも、選択ボックスから切り替えられます。

window.toolbar = toolbar
toolbar.display_mode = UIng::Toolbar::DisplayMode::TextOnly
toolbar.display_mode = UIng::Toolbar::DisplayMode::IconOnly
toolbar.display_mode = UIng::Toolbar::DisplayMode::IconAndTextVertical

Toolbar API · ToolbarItem API · Galleryソース