Go Windows GUI Walk examples

# Go Windows GUI Walk examples

GoでWindowsのGUIを作るときは、
`lxn/walk` というpackageを使っています。

## lxn/walk

GitHub - lxn/walk: A Windows GUI toolkit for the Go Programming Language
https://github.com/lxn/walk

上記のリポジトリ内に `examples` というフォルダがあり、
いろいろなコード例が入っています。

https://github.com/lxn/walk/tree/master/examples

```text
./examples
  ├─actions
  ├─clipboard
  ├─databinding
  ├─drawing
  ├─dropfiles
  ├─externalwidgets
  ├─filebrowser
  ├─gradientcomposite
  ├─imageicon
  ├─imageview
  ├─imageviewer
  ├─img
  ├─linklabel
  ├─listbox
  ├─listbox_ownerdrawing
  ├─logview
  ├─multiplepages
  ├─notifyicon
  ├─progressindicator
  ├─radiobutton
  ├─settings
  ├─slider
  ├─statusbar
  ├─tableview
  ├─webview
  └─webview_events
```

使いたい部品があるときは、
上記のコードを参考に作っていってます。

どのような画面になるかは、各フォルダで
`go build` すれば実行体ができて動作を確認できます。

今回は build してどのような画面ができるのか ご紹介していきます。

## 準備

インストールは、おなじみの `go get` をたたきます。

```
$ go get github.com/lxn/walk
```

上記が終わると、
`%GOPATH%\src\github.com\lxn\walk` にファイルができているはずです。

あとは examples 内の各フォルダで `go build` します。

(ちょっと時短してperlでサクッとやっちゃいます)

```
$ perl -MPath::Tiny -e "map{system qq/cd $_ & go build/} map{$_->canonpath} grep {$_->is_dir} path(q/./)->children"
can't load package: package github.com/lxn/walk/examples/img: no Go files in C:\Users\hiro\go\src\github.com\lxn\walk\examples\img
```

※`./examples/img/` 内はGUIで使う画像ファイルのみしか格納されてないので実行体はできません

これで各フォルダに ～.exe ができたはずです。1つずつ見ていきましょう。

※build: Windows 10, go: 1.13.3, lxn/walk: 55ccb3a

## actions

https://github.com/lxn/walk/blob/master/examples/actions/actions.go

![actions.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/5d3a3edb-588d-fdfd-578b-4a317d0501bc.gif)

各ボタンにアクション(処理)が割り当ててあって、
選択すると画面の表示を変更したり、ボタンを押すとダイアログが出たりします。

## clipboard

https://github.com/lxn/walk/blob/master/examples/clipboard/clipboard.go

![clipboard.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/f1a70179-d82b-fa5b-c213-37ca4384559e.gif)

ボタンを押すことでテキスト入力エリアの文字をクリップボードにコピーしたり、ペーストしたりできます。

## databinding

https://github.com/lxn/walk/blob/master/examples/databinding/databinding.go

![databinding.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/c2a0363a-1f1f-219f-7b68-1835ef9002e1.gif)

データを入力するウィンドウが出てきます。
必須な項目を強調表示してくれたり、、、いろいろできますね！

内部的な話をすると、構造体をDataBinderに渡しておくとデータ入力したあとに値を変更してくれます。
※データ入力後、animal: の下に表示されているデータが変更されているのがわかると思います

## drawing

https://github.com/lxn/walk/blob/master/examples/drawing/drawing.go

![drowing.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/f5a5cef7-60ca-fb62-02b3-bf902528fdfa.png)

線を引いたりできます！

## dropfiles

https://github.com/lxn/walk/blob/master/examples/dropfiles/dropfiles.go

![dropfiles.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/ec76249c-2d3c-b0ef-1613-2999bd819a7c.gif)

ファイルをウィンドウに落とすと、ファイルパスが表示されます。

ファイルを入力するときに便利ですね。

## externalwidgets

https://github.com/lxn/walk/blob/master/examples/externalwidgets/externalwidgets.go

![externalwidgets.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/7d19da76-2d1f-9b9c-6b98-cf404fa98c1e.png)

黄緑なボタンを押すと`yyyy/mm/dd hh:mm:ss *: WM_LBUTTONDOWN` と表示されます。
通常のボタン以外にもボタンが作れます。

## filebrowser

https://github.com/lxn/walk/blob/master/examples/filebrowser/filebrowser.go

![filebrowser.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/abcf4867-b770-d315-7857-9e7c9e1fd5df.png)

フォルダを選択すると右側に表示されます。

## gradientcomposite

https://github.com/lxn/walk/blob/master/examples/gradientcomposite/gradientcomposite.go

![gradientcomposite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/cbefe423-68e5-fc19-e4b5-b12622696446.png)

スライダーを動かすと色が変わります。

## imageicon

https://github.com/lxn/walk/blob/master/examples/imageicon/main.go

![imageicon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/d3cc9b0c-0c2c-90fb-36c0-c614a7a99ff4.png)

ボタンを押すと左上のアイコンが変わります！(`002` -> `003`)

未読表示とかに使えそう！

## imageview

https://github.com/lxn/walk/blob/master/examples/imageview/imageview.go

![imageview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/d57d1bd3-e679-a9a3-3352-c319d32abe6a.png)

画像を表示するときに参考になりますね。

びよーん

## imageviewer

https://github.com/lxn/walk/blob/master/examples/imageviewer/imageviewer.go

う、、、うごかんｗ

## linklabel

https://github.com/lxn/walk/blob/master/examples/linklabel/linklabel.go

![linklabel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/bcc6ba0d-d781-9884-d358-811004228b5b.png)

ラベルにリンクが貼れます！

## listbox

https://github.com/lxn/walk/blob/master/examples/listbox/listbox.go

![listbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/dc8f0cef-e8bf-d818-e53d-f9c3c7eee16f.png)

リストボックスに環境変数名が表示されて、選択すると値がでるやつ。

## listbox_ownerdrawing

https://github.com/lxn/walk/blob/master/examples/listbox_ownerdrawing/listbox_ownerdrawing.go

![listbox_ownerdrawing.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/f494fcb5-312e-d55e-1dce-1005412ac50d.png)

2つの列が1つの行として表示される。

## logview

https://github.com/lxn/walk/blob/master/examples/logview/logviewapp.go

![logview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/d8f5bcb6-ec70-1af9-d47d-9ba2509986d4.png)

何か表示されそうでされない。。。

## multiplepages

https://github.com/lxn/walk/blob/master/examples/multiplepages/main.go

![multiplepages.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/e37e172e-991e-35f2-f96b-922a1880734d.png)

左側にあるボタンを押すと、右側が変わります。

## notifyicon

https://github.com/lxn/walk/blob/master/examples/notifyicon/notifyicon.go

![notifyicon.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/943e8413-13de-c91e-33b5-194e2abf7b7d.gif)

実行すると通知が表示されます。
※Windows 7以前では バルーン表示

タスクトレイのアイコンをクリックすると違うメッセージが表示されます。

## progressindicator

https://github.com/lxn/walk/blob/master/examples/progressindicator/pi.go

う、、、うごかんｗ

## radiobutton

https://github.com/lxn/walk/blob/master/examples/radiobutton/radiobutton.go


![radiobutton.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/bc9bba25-013d-9ab0-3aa4-0f912e142e0d.png)

複数の選択肢から1つだけ選ぶときに使うやつですね。

ラジオボタンを選択すると 左にあるラベルの有効・無効が切り替わります。

## settings

https://github.com/lxn/walk/blob/master/examples/settings/settings.go

![settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/4fdd71c0-3010-f9dc-06fd-8c38c6f49ae5.png)

setting.ini を読み書きして内容を表示するサンプル。

らしいけど、ファイルが出んのじゃ、、、

## slider

https://github.com/lxn/walk/blob/master/examples/slider/slider.go

![slider.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/17a11ca8-279f-d649-eed7-c8c33f41aab9.png)

最小(Min value)・最大(Max value)をいじってスライダーをグリグリすると、
その範囲内で値(Value)が変わります。

縦と横にあるスライダーは連動して動きます。

`Print state` ボタンを押すと `< Min value | Value | Max value >` とログに表示されます。

## statusbar

https://github.com/lxn/walk/blob/master/examples/statusbar/statusbar.go

![statusbar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/f64959bf-dd06-d11d-109b-ec2ab5637c4d.png)

ウィンドウ下部にステータスを表示するバーを追加できます。

`click` には、選択すると 表示を変える処理 が割り当てられています。

## tableview

https://github.com/lxn/walk/blob/master/examples/tableview/tableview.go

![tableview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/a89ca20e-c89a-7be5-d34c-4494d57139cd.png)

テーブルに様々なデータを表示できます。

細かく見てくといろいろやってます。

タイトル部が右寄せ(`Baz`)だったり、各行にチェックボックスがついてたり・・・。

## webview

https://github.com/lxn/walk/blob/master/examples/webview/webview.go

![webview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/c8012f41-b5d3-59e2-6101-2d5973a7993a.png)

アドレスが入っているところを変更すると、Webページが表示できます。

## webview_events

https://github.com/lxn/walk/blob/master/examples/webview_events/webview_events.go

![webview_events.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238600/fe59d554-7ebe-06b8-114c-a0b7eea32fc7.png)

WebView上でカーソルを当てたところの情報が取れるみたいですね！

## まとめ

使いたい部品が見つかったら、ソースコードを見てみてくださいね。