---
id: 974f36e12dfcece861bfda1af9303980
author: Yunjin Lee
title: 'CGo bez Go Tcl/Tk (modernc.org/tk9.0) implementácia GUI: balenie widgetov a vykresľovanie obrázkov'
description: Implementácia vytvárania okien, rozmiestňovania widgetov tlačidiel a panelov s ponukami a vykresľovania obrázkov SVG/PNG/ICO v jazyku Go pomocou multiplatformnej knižnice modernc.org/tk9.0, ktorá nevyžaduje závislosti na CGo.
language: sk
date: 2024-10-22T11:51:27.614782351Z
path: /blog/posts/creating-a-gui-with-tk-in-go-z004dd008
category: gui
lang_canonical:
ko: https://blog.naver.com/bugaku/223629101405
---
Python má štandardne zabudované GUI knižnice, ako je Tkinter.
Nedávno bola na podporu používania Tcl/Tk v jazyku Go vyvinutá [CGo-Free, Cross Platform Tk knižnica](https://pkg.go.dev/modernc.org/tk9.0). Dnes si preberieme jej základné použitie.
## Vytvorenie Hello, Tk
Začneme jednoduchým príkladom 'Hello, TK!'.
```go
package main
import tk "modernc.org/tk9.0"
func main() {
tk.Pack(
tk.TButton(
tk.Txt("Hello, TK!"),
tk.Command(func() {
tk.Destroy(tk.App)
})),
tk.Ipadx(10), tk.Ipady(5), tk.Padx(15), tk.Pady(10),
)
tk.App.Wait()
}
```
---
Pozrime sa podrobnejšie na uvedený príklad kódu a jeho výsledok.
Ak ste už používali Tk v Pythone, budete rozumieť štruktúre, v ktorej sa widgety umiestňujú (pack) do okna alebo priamo pod okno. Podľa typu widgetu sa do nich môžu zahrnúť aj štítky (label) a podobne.
_Ipadx a Ipady sú skratky pre Internal padding, ktoré upravujú vnútorné odsadenie widgetov. V tomto príklade sa upravuje odsadenie tlačidla._
Táto knižnica obsahuje štruktúru Window a premenná App spravuje hlavné okno. Je preddefinovaná priamo v knižnici. Funkcia tk.App.Destroy(), ktorá ukončuje tk.App.Wait(), preto zatvára hlavné okno.
Teraz sa pozrieme na niekoľko príkladov zo zložky \_examples v GitLab.
## Spracovanie súborov SVG
Nasledujúci príklad zobrazuje súbor SVG v widgete štítku.
```go
package main
import . "modernc.org/tk9.0"
// https://en.wikipedia.org/wiki/SVG
const svg = `
`
func main() {
Pack(Label(Image(NewPhoto(Data(svg)))),
TExit(),
Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m"))
App.Center().Wait()
}
```
Spracovanie SVG v tejto knižnici prebieha takto:
1. Obsah súboru SVG sa načíta ako reťazec (alebo sa priamo vloží, ako v uvedenom príklade).
2. Tento obsah sa odovzdá funkcii Data, ktorá ho prevedie na reťazec obsahujúci option (option -data).
3. Prevedené bajtové hodnoty sa odovzdajú funkcii NewPhoto, ktorá vráti ukazovateľ na štruktúru Img reprezentujúcu obrázok Tcl/Tk.
4. Pri prechode funkciou Image sa ukazovateľ na štruktúru Img prevedie na reťazec s pridaným option -Image.
5. Dôvodom prevodu na reťazec obsahujúci surovú hodnotu štruktúry je vytvorenie widgetu Label.
Súbory ICO a PNG sa spracúvajú podobným spôsobom.
## Spracovanie súborov PNG
```go
package main
import _ "embed"
import . "modernc.org/tk9.0"
//go:embed gopher.png
var gopher []byte
func main() {
Pack(Label(Image(NewPhoto(Data(gopher)))),
TExit(),
Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m"))
App.Center().Wait()
}
```
Postup spracovania súboru PNG je takýto:
1. Vložený súbor gopher.png sa prevedie na typ reťazca obsahujúceho option.
2. Funkciou NewPhoto sa prevedie na typ \*Img.
3. Po prechode funkciou Image sa prevedie na surový reťazec a následne sa vytvorí ako widget štítku.
Súbor ICO sa spracúva rovnakým spôsobom a jediný rozdiel oproti formátu SVG spočíva vo vnútornom spracovaní vo funkcii Data.
Teraz sa pozrime na podstatu „reťazca obsahujúceho option“:
```go
type rawOption string
```
Reťazec obsahujúci option, o ktorom bola reč, je jednoducho naformátovaný reťazec.
```go
func (w *Window) optionString(_ *Window) string {
return w.String()
}
```
Metóda optionString je metóda pre ukazovateľ Window a vracia reťazec.
Nakoniec si stručne pozrieme vnútornú štruktúru funkcie Data:
```go
func Data(val any) Opt {
switch x := val.(type) {
case []byte:
switch {
case bytes.HasPrefix(x, pngSig):
// ok
case bytes.HasPrefix(x, icoSig):
b := bytes.NewBuffer(x)
img, err := ico.Decode(bytes.NewReader(x))
if err != nil {
fail(err)
return rawOption("")
}
b.Reset()
if err := png.Encode(b, img); err != nil {
fail(err)
return rawOption("")
}
val = b.Bytes()
}
}
return rawOption(fmt.Sprintf(`-data %s`, optionString(val)))
}
```
Z kódu vyplýva, že v prípade súborov ICO alebo PNG je potrebný proces kódovania/dekódovania.
V ostatných prípadoch sa bez osobitnej konverzie k reťazcu prevedenému na bajty pridá iba option -data, ktorým sa označí, že ide o výsledok funkcie Data.
### Načítanie obrázka pomocou widgetu ponuky
Ak k predchádzajúcim cvičným príkladom na načítanie PNG a ICO pridáme widget ponuky, môžeme vytvoriť aplikáciu, ktorá zobrazuje požadovaný obrázok.
Najprv sa pozrime na jednoduchý príklad widgetu ponuky.
```go
package main
import (
"fmt"
. "modernc.org/tk9.0"
"runtime"
)
func main() {
menubar := Menu()
fileMenu := menubar.Menu()
fileMenu.AddCommand(Lbl("New"), Underline(0), Accelerator("Ctrl+N"))
fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(func() { GetOpenFile() }))
Bind(App, "", Command(func() { fileMenu.Invoke(1) }))
fileMenu.AddCommand(Lbl("Save As..."), Underline(5))
fileMenu.AddSeparator()
fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler())
Bind(App, "", Command(func() { fileMenu.Invoke(4) }))
menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu))
App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS))
App.Configure(Mnu(menubar), Width("8c"), Height("6c")).Wait()
}
```
V tomto príklade sme vyskúšali vytvorenie panela ponuky a ponúk, zvýraznenie písmena, option Command, väzbu klávesových skratiek a nastavenie počiatočnej veľkosti okna aplikácie.
Teraz upravíme funkciu Command určenú pre GetOpenFile tak, aby sme vytvorili program, ktorý načíta a zobrazí obrázok.
Plán tvorby programu je takýto:
1. Obmedzenie otvárania len na súbory PNG a ICO
2. Spracovanie súboru vybraného v dialógu na výber súboru
3. Implementácia widgetu na zobrazenie obrázka
Nasleduje kód, ktorý zohľadňuje tento plán:
```go
package main
import (
"fmt"
"log"
"os"
"runtime"
"strings"
. "modernc.org/tk9.0"
)
func handleFileOpen() {
s := GetOpenFile()
for _, photo := range s {
formatCheck := strings.Split(photo, ".")
format := formatCheck[len(formatCheck)-1]
if (strings.Compare(format, "png") == 0) || (strings.Compare(format, "ico") == 0) {
picFile, err := os.Open(photo)
if err != nil {
log.Println("Error while opening photo, error is: ", err)
}
pictureRawData := make([]byte, 10000*10000)
picFile.Read(pictureRawData)
imageLabel := Label(Image(NewPhoto(Data(pictureRawData))))
Pack(imageLabel,
TExit(),
Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m"))
}
picFile.Close()
}
}
func main() {
menubar := Menu()
fileMenu := menubar.Menu()
fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(handleFileOpen))
Bind(App, "", Command(func() { fileMenu.Invoke(0) }))
fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler())
Bind(App, "", Command(func() { fileMenu.Invoke(1) }))
menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu))
App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS))
App.Configure(Mnu(menubar), Width("10c"), Height("10c")).Wait()
}
```
Uvedený kód funguje takto:
1. Pomocou funkcie na porovnávanie reťazcov z balíka strings sa overuje prípona súboru.
2. Pomocou balíka os sa súbor otvorí, prečíta a následne zatvorí.
3. Načítaný obrázok sa zobrazí v widgete štítku.
## Zhrnutie
V tomto článku sme s použitím knižnice Tcl/Tk pre jazyk Go preberali tieto témy:
1. Základná štruktúra aplikácie s GUI
2. Spracovanie rôznych formátov obrázkov, ako sú SVG, PNG a ICO
3. Umiestňovanie widgetov a správa rozloženia
4. Štruktúra spracovania dát obrázkov
5. Väzba klávesových skratiek a príkazy widgetov
Spojením jazyka Go a Tcl/Tk je možné vytvárať jednoduché, no praktické programy s GUI. Na tomto základe odporúčame, aby ste sa pustili do vývoja zložitejších aplikácií s GUI.