이번에는 Webview 라이브러리를 사용하면서 HTML 파일을 별도로 분리하는 방법을 알아보겠습니다. 그리고, 좀더 보기좋은 GUI 구성을 위해 부트스트랩도 함께 적용하도록 하겠습니다. 사실 이부분은...CSS 파일을 별도로 인식시켰으면 좋겠지만, 아직까지 별도의 CSS파일을 적용시키는 것은 안되는 것 같습니다.
main.go 파일에 전체 프로그램 구동을 구현합니다. 아울러, 버튼을 클릭했을 때 동작할 함수(go_hello)를 작성하고, 바인딩해줍니다. Webview라이브러리를 활용하면, go에서 javascript를 실행할 수도 있고, html파일(javascript 포함)에서 go언어를 실행할 수도 있습니다. 그러나 프로그램 가독성을 위해, Bind 한줄이 더 들어가더라도, 함수구현은 go에서 하도록 하겠습니다.
package main
import (
"fmt"
"os"
"github.com/webview/webview"
)
var w webview.WebView
func main() {
w = webview.New(true)
defer w.Destroy()
w.SetSize(600, 600, webview.HintNone) // Create a GoLang function callable from JS
w.Bind("go_hello", go_hello) // Go_hello 함수 구현과 html에서 호출하는 go_hello를 Bind해줍니다.
// Create UI with data URI
dir, _ := os.Getwd()
fmt.Println(dir)
w.Navigate("file:" + dir + "/hi.html")
w.Run()
}
// 함수 실행 시, javascript로 팝업 알람을 실행해서 데이터를 보여줍니다.
// HTML문서에서 보여주는 부분만큼은...javascript로..ㅠㅠ
func go_hello() {
name := "You"
w.Eval(`alert("Hello` + name + `");`)
}
데이터를 처리하는 것은 go 함수구현에서 할 수 있지만, 마지막으로 데이터를 HTML로 보내서 보여주는 부분은 Javascript로 할 수밖에 없겠네요..^^;;
3. hi.html
HTML로 뷰를 구현합니다. 서두에서 말했듯이 CSS 적용이 힘든 관계로 Bootstrap을 CDN으로 불러와 적용시키겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<title>My App</title>
</head>
<body>
<!--Header Section-->
<div class="box-padding-big">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" id=navbardrop" data-toggle="dropdown">File</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" onclick="go_hello()">Sub1</a>
<a class="dropdown-item" href="#">Sub2</a>
<a class="dropdown-item" href="#">Sub3</a>
</div>
</li>
<li class="hav-item">
<a class="nav-link" href="#">Edit</a>
</li>
<li class="hav-item">
<a class="nav-link" href="#">View</a>
</li>
<li class="hav-item">
<a class="nav-link" href="#">Info</a>
</li>
</ul>
</div>
</nav>
</div>
<!--Main Section-->
<div style="margin: 20px;">
<div style="font-size: 36px; color:chartreuse;font-weight:700">
<div>GO-Webview HTML View Test <br/>
with Bootstrap
</div>
</div>
<p class="text-primary" style="margin-top:20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget magna eros. Cras sit amet nulla dignissim, pretium justo sit amet, vulputate orci. Curabitur in aliquam lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi quis pulvinar nunc, sed posuere enim. In hac habitasse platea dictumst. Ut sodales augue eu elit bibendum, ut malesuada felis auctor. Sed mattis ipsum malesuada sem feugiat ultricies. Fusce ultrices vel est id pretium. Sed vel congue augue, non tincidunt tellus. Vivamus facilisis mollis tellus ac vulputate.
</p>
</div>
</body>
</html>
4. 결과
아래 명령으로 결과를 확인합니다.
go run main.go
File - Sub1을 클릭하면...
알람 팝업이 잘 나옵니다.
이상으로 webview를 이용하여 html 파일과 bootstrap을 적용하는 방법을 알아봤습니다. 너무 쉽게 구현이 가능한데, 성능은 어느정도일지, 어떤 점이 부족할지 계속 알아봐야겠습니다.
