gxuiの極小サンプル集

gxuiの極小サンプル

制作理由
Go始めました！GUIやりたい。gxuiと出会う。サンプル見る。
サンプルデカくてシンドイ
勉強がてらもっと小さいのをつくろう！

よければGitHub/gxui_tiny_samplesでダウンロードして下さい。
以下のコードではpackageは省いてます
極小サンプル＝１プログラム１つの事
小サンプル＝１プログラム２つの事

gxuiの概要

ネイティブラッパーじゃないくOpenGLを使用してGoogleオリジナルUIの素を提供してくれるライブラリ。
ネイティブの機能を使わないのでテキストエディタとか作った時にスペルチェックとかキーボードショートカット(コピー、ペーストすら）が効かないのが辛い。
バイナリは小さい目、メモリはそんなに使ってなささげ。
それでいてクロスプラットフォームらしい（試していない）。

はじめの一歩(インストール

環境:
OSX yosemite 10.10.3
Golang 1.4.2

"~/.bash_profile"に下の２行を追加.
理由はわかりませんが".bashrc"に追加しても動きませんでした

export GOPATH=$HOME/Documents/go
export PATH=$PATH:$GOPATH/bin

ターミナルを再起動するか、下のコードを打つこ度でもリロードできます。

source ~/.bash_profile

2. gxuiのインストール

以下の順番でインストールすると良いようです。

brew install glew
go get http://code.google.com/p/freetype-go/freetype/raster
go get code.google.com/p/freetype-go/freetype/truetype
go get github.com/go-gl/gl/v3.2-core/gl
go get github.com/go-gl/glfw/v3.1/glfw
go get github.com/google/gxui

3. フォントのダウンロード

SourceCodePro

4. 付属サンプルのダウンロード

go install github.com/google/gxui/samples/...

# 公式サイトなど

gxui on GitHub
gxui/sample on GitHub
go-gl/gl on GitHub
go-gl/glfw on GitHub
go-gl/examples on GitHub

極小サンプル

一つのサンプルでは基本的に一つのことしかしていません。

ウィンドウの作成

func appMain(driver gxui.Driver) {
	// "themes.dark" テーマはダークのみ。作り方はまだ知らない
	theme := dark.CreateTheme(driver)

	// CreateWindow(幅, 高さ, タイトル文字)
	window := theme.CreateWindow(380, 100, "Empty Window")

	// 閉じた時の動作
	window.OnClose(driver.Terminate)
}

func main() {
	gl.StartDriver(appMain)
}

ラベルの作成

func appMain(driver gxui.Driver) {
	theme := dark.CreateTheme(driver)

	// ラベルを作成しテキストを挿入
	label1 := theme.CreateLabel()
	label1.SetText("Hello, world")

	window := theme.CreateWindow(380, 100, "Window for My Program")
	window.AddChild(label1)

	// when close
	window.OnClose(driver.Terminate)
}

func main() {
	gl.StartDriver(appMain)
}

リニアレイアウトの作成

ラベルの位置の変え方は、まだわかりませんがLinearLayoutに突っ込むと勝手に整理してくれます。レベル位置の指定、誰か知ってたら教えて欲しいです。

func appMain(driver gxui.Driver) {
	theme := dark.CreateTheme(driver)

	label1 := theme.CreateLabel()
	label1.SetText("Hello, world")
	label2 := theme.CreateLabel()
	label2.SetText("Hello, world again")

	layout := theme.CreateLinearLayout()
	layout.SetSizeMode(gxui.Fill)
	// 方向変更
	//layout.SetDirection(gxui.LeftToRight)
	layout.AddChild(label1)
	layout.AddChild(label2)

	window := theme.CreateWindow(380, 100, "Empty Window")
	window.AddChild(layout)
	window.OnClose(driver.Terminate)
}

func main() {
	gl.StartDriver(appMain)
}

ボタンの作成

func appMain(driver gxui.Driver) {
	theme := dark.CreateTheme(driver)

	button := theme.CreateButton()
	button.SetText("Yes!")

	window := theme.CreateWindow(380, 100, "Empty Window")
	window.AddChild(button)
	window.OnClose(driver.Terminate)
}

func main() {
	gl.StartDriver(appMain)
}

ボタンへのイベントの登録

func appMain(driver gxui.Driver) {
	theme := dark.CreateTheme(driver)

	button := theme.CreateButton()
	button.SetText("Yes!")
	// クリックイベント用の関数
	onClickFunc := func(gxui.MouseEvent) {
		if button.Text() == "Yes!" {
			button.SetText("No!")
			return
		}
		button.SetText("Yes!")
	}
	button.OnClick(onClickFunc)

	window := theme.CreateWindow(380, 100, "Empty Window")
	window.AddChild(button)
	window.OnClose(driver.Terminate)
}

func main() {
	gl.StartDriver(appMain)
}

画像エリアの作成と表示

func appMain(driver gxui.Driver) {
	theme := dark.CreateTheme(driver)
	window := theme.CreateWindow(400, 225, "CriateImage")

	// プログラムパスを取得
	path, _ := filepath.Abs(filepath.Dir(os.Args[
	// "_" で戻り値を無視
	file, _ := os.Open(path + "/cappuccino.jpg")
	// 不要になったら終了するよう予約
	defer file.Close()


	img, _, _ := image.Decode(file)
	// バッファ作成 img.Bound = イメージサイズ情報
	rgbaBuffer := image.NewRGBA(img.Bounds())

	// rgbaBufferにimgを描画
	draw.Draw(rgbaBuffer, img.Bounds(), img, image.Point{0, 0}, draw.Src)
	imgArea := theme.CreateImage()
	texture := driver.CreateTexture(rgbaBuffer, 1)
	imgArea.SetTexture(texture)

	window.AddChild(imgArea)
	window.OnClose(driver.Terminate)
}

func main() {
	gl.StartDriver(appMain)
}

リストの作成

func appMain(driver gxui.Driver) {
	theme := dark.CreateTheme(driver)
	window := theme.CreateWindow(400, 225, "CreateList")

	items := []string{
		"Orange", "Lemon", "Apple",
	}

	// リストの中身を一度アダプターに入れる必要がある
	adapter := gxui.CreateDefaultAdapter()
	adapter.SetItems(items)
	list := theme.CreateList()
	list.SetAdapter(adapter)

	window.AddChild(list)
	window.OnClose(driver.Terminate)
}

func main() {
	gl.StartDriver(appMain)
}

ドロップダウンリスト

func appMain(driver gxui.Driver) {
	theme := dark.CreateTheme(driver)
	window := theme.CreateWindow(400, 225, "CreateList")

	items := []string{
		"Orange", "Lemon", "Apple",
	}

	adapter := gxui.CreateDefaultAdapter()
	adapter.SetItems(items)

	// ドロップダウンリストはオーバーレイが必要
	overlay := theme.CreateBubbleOverlay()
	ddlist := theme.CreateDropDownList()
	ddlist.SetAdapter(adapter)
	ddlist.SetBubbleOverlay(overlay) // オーバレイをセット

	window.AddChild(ddlist)
	window.AddChild(overlay) // オーバーレイをウィンドウに追加
	window.OnClose(driver.Terminate)
}

func main() {
	gl.StartDriver(appMain)
}

タブパネル（パネルホルダー）

func appMain(driver gxui.Driver) {
	theme := dark.CreateTheme(driver)
	window := theme.CreateWindow(400, 225, "CreatePinelHolder")

	// Labels for Holder
	labelA := theme.CreateLabel()
	labelA.SetText("Label A")
	labelB := theme.CreateLabel()
	labelB.SetText("Label B")

	// CreatePinelHolder
	holder := theme.CreatePanelHolder()
	holder.AddPanel(labelA, "tab A")
	holder.AddPanel(labelB, "tab B")

	window.AddChild(holder)
	window.OnClose(driver.Terminate)
}

func main() {
	gl.StartDriver(appMain)
}

分割レイアウト（スプリットレイアウト）

func appMain(driver gxui.Driver) {
	theme := dark.CreateTheme(driver)
	window := theme.CreateWindow(400, 225, "CreatePinelHolder")

	// Labels for Holder
	labelA := theme.CreateLabel()
	labelA.SetText("Label A")
	labelB := theme.CreateLabel()
	labelB.SetText("Label B")

	// CreatePinelHolder
	holder := theme.CreatePanelHolder()
	holder.AddPanel(labelA, "tab A")
	holder.AddPanel(labelB, "tab B")

	window.AddChild(holder)
	window.OnClose(driver.Terminate)
}

func main() {
	gl.StartDriver(appMain)
}

小サンプル

一つのサンプルで基本的に二つの事しかしません。

サブウィンドウを開くボタン

func appMain(driver gxui.Driver) {
	theme := dark.CreateTheme(driver)
	// flag to check the existance of the sub window
	subWindowIsOpen := false

	button := theme.CreateButton()
	button.SetText("Open subWindow")
	// fuction for the button
	onClickFunc := func(gxui.MouseEvent) {
		// check if sub window exists
		if subWindowIsOpen == false {
			subWindow := theme.CreateWindow(200, 60, "subWindow")
			// when close sub window put the flag back to false
			subWindow.OnClose(func() {
				subWindowIsOpen = false
			})
			subWindowIsOpen = true
		}
	}
	button.OnClick(onClickFunc)

	window := theme.CreateWindow(380, 100, "Empty Window")
	window.AddChild(button)
	window.OnClose(driver.Terminate)
}

func main() {
	gl.StartDriver(appMain)
}

その他

Goの勉強がてらやっているので教えてくれる方大歓迎です。
こっちGitHubの方にはプロパティとかの変え方も少しあります。
初Git&初Qiitaなのでお手柔らかに
参考Googleが出したGoのGUIライブラリを使う