VUIを使ってみた

公開日:2019-04-21
最終更新:2019-04-21
※この記事は外部サイト(https://qiita.com/uki00a/items/57847e72e4a...)からのクロス投稿です

VUIとは

VUI

Vim上でテキストベースのUIを構築するためのライブラリです。

確認環境

  • Neovim v0.3.1

インストール

dein.vim

[[plugins]]  
repo = 'waldson/vui'  

使い方

let screen = vui#screen#new()  

function! screen.on_before_render(screen) abort  
  let panel = vui#component#panel#new('@my-tasks', winwidth(0), winheight(0))  
  let vcontainer = vui#component#vcontainer#new()  

  for item in ['hoge', 'fuga', 'piyo']  
    let text = vui#component#text#new(item)  
    call vcontainer.add_child(text)  
  endfor  

  call panel.get_content_component().add_child(vcontainer)  
  call a:screen.set_root_component(panel)  
endfunction  

call screen.show()  

Screenを作成する

Screenは入力イベントの処理やコンポーネントの表示等を行います。

let screen = vui#screen#new()  

Screenにコンポーネントを登録する

on_before_renderを設定しておくと、描画前に実行されるので、この中でコンポーネントを登録します。

function! screen.on_before_render(screen) abort  
  let panel = vui#component#panel#new('Title', winwidth(0), winheight(0))  
  let vcontainer = vui#component#vcontainer#new()  

  for item in ['hoge', 'fuga', 'piyo']  
    let text = vui#component#text#new(item)  
    call vcontainer.add_child(text)  
  endfor  

  call panel.get_content_component().add_child(vcontainer)  
  call a:screen.set_root_component(panel)  
endfunction  

コンポーネントを描画する

call screen.show()  

コンポーネント

panel

let panel = vui#component#panel#new('Title', width, height)  
let container = panel.get_content_component()  

call container.add_child(child1)  
call container.add_child(child2)  

タイトルを持つボックス
子コンポーネントを登録する際は、get_content_componentでコンテナを取得する必要があります。

vcontainer

let vcontainer = vui#component#vcontainer#new()  

let child1 = vui#component#text#new('a')  
let child2 = vui#component#text#new('b')  
call vcontainer.add_child(child1)  
call vcontainer.add_child(child2)  

子要素に合わせて、動的に高さが調節されます。

toggle

let screen = vui#screen#new()  
let screen.state = { 'checked': 1 }  

function! screen.on_before_render(screen) abort  
  let state = a:screen.state  
  let toggle = vui#component#toggle#new('text')  
  call toggle.set_checked(state.checked)  

  function! toggle.on_change(toggle) abort  
    let b:screen.state.checked = !b:screen.state.checked  
  endfunction  

  call a:screen.set_root_component(toggle)  
endfunction  

call screen.show()  

チェックボックスです。

チェックボックス上でEnterを押すと、on_change関数が実行されます。
on_changeの実行後に再描画が行われているようなので、この中で状態を更新しておく必要があります。

button

let screen = vui#screen#new()  
let screen.state = 0  

function! screen.on_before_render(screen) abort  
  let container = vui#component#vcontainer#new()  
  let button = vui#component#button#new('+')  
  let count = vui#component#text#new(string(a:screen.state))  

  function! button.on_action(button) abort  
    let b:screen.state += 1  
  endfunction  

  call container.add_child(button)  
  call container.add_child(count)  
  call a:screen.set_root_component(container)  
endfunction  

call screen.show()  

キーマッピング

function! screen.add_task() abort  
  call s:do_something()  
endfunction  

function! screen.delete_item() abort  
  let element = self.get_focused_element()   
  call s:do_something_with_element(element)  
endfunction  


call screen.map('t', 'add_task') " `t`が入力されたら、`screen.add_task`を実行する。  
call screen.map('dd', 'delete_item') " `dd`が入力されたら、`screen.delete_item`を実行する。  
call screen.show()  

screen.mapでキーマッピングをカスタマイズできます。

screen.mapで登録したハンドラが実行される際は自動的に再描画が行われるようなので、
ハンドラ内でscreen.showを実行する必要はありません。

taskbook-vim

実際にVUIを使ってTaskbookをインタラクティブに操作するためのプラグインを作ってみました。

taskbook-vim

参考

https://github.com/waldson/vui

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@uki00aの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする