반응형
이번에는 모듈 구분을 하여 코드를 좀 다듬어보려고 합니다. 아직 Lorca는 예제가 많지도 않고, 튜토리얼이 있는 상태도 아니어서 혼자 여러가지 방식을 시도해 보는 중입니다. 어쨌든 목적은 Control, View와 Function을 다른 파일에 나누어 구성하는 것입니다.
1. lorca_ex.go(Control파일)
앱의 시작부분으로 Control에 해당하는 역할을 합니다. 함수 바인딩을 이곳에서 정의합니다. 그리고 index.html을 불러와서 data에 저장한 뒤 url.PathEscape메서드에 string형태의 인자로 넘겨주는 방식으로 수정해 주었습니다.
package main
import (
"io/ioutil"
"net/url"
"github.com/zserge/lorca"
)
var ui lorca.UI
func main() {
ui, _ = lorca.New("", "", 1028, 640)
defer ui.Close()
ui.Bind("helloFromGo", helloFromGo)
ui.Bind("saveFromGo", saveFromGo)
data, err := ioutil.ReadFile("./index.html")
checkError(err)
ui.Load("data:text/html," + url.PathEscape(string(data)))
<-ui.Done()
}
2. Index.html
아직 로컬 CSS를 인식하는 방법이 있는지는 잘 모르겠습니다. 사용 예제가 있는데 복잡하고 잘 이해가 안되네요. 그래서 생각해낸 방법이 Bootstrap을 CDN방식으로 불러오기. 이렇게 하면 잘 인식이 됩니다.
<!doctype html>
<html lang="ko">
<head>
<title>Lorca Sample</title>
<meta charset="UTF-8">
<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>
<script>
function helloFromJavaScript() {
return 'Hello from JavaScript!'
}
</script>
</head>
<body>
<!-- 헤 섹션 -->
<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">파일</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">서브1</a>
<a class="dropdown-item" href="#">서브2</a>
<a class="dropdown-item" href="#">서브3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">편집</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">뷰</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">정보</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- 첫번째 섹션 -->
<div class="box-padding-big bg-info">
<div class="btn-secondary" align="center">
<textarea id="content" style="width:98%" rows="18"></textarea>
</div>
</div>
<!-- 두번째 섹션 -->
<div class="box-padding-big btn-secondary" align="center">
<button onclick="helloFromGo()" class="btn btn-info btn-sm"> Click! </button>
<button onclick="saveFromGo()" class="btn btn-warning btn-sm"> Save </button>
</div>
<!-- 푸터 섹션 -->
<div class="btn-secondary" style="text-align:center vertical-align:bottom">
<div class="container text-center">
The site owner is not responsible for uploaded images. </br>
You can only upload images for which you own the copyright.
</div>
</div>
</body>
</html>
3. functions.go(Function 파일)
에러 체크함수, hello버튼 처리기, save버튼 처리기를 구현합니다.
package main
import (
"fmt"
"io/ioutil"
"os"
"reflect"
)
func checkError(err error) {
if err != nil {
fmt.Println(err)
os.Exit(1)
}
}
func helloFromGo() {
msg := ui.Eval(`helloFromJavaScript();`).String() + "<br>" + "Hello From Go!"
ui.Eval(`document.getElementById('content').innerHTML="` + msg + `";`)
}
func saveFromGo() {
msg := ui.Eval(`document.getElementById('content').value;`)
msg_text := msg.String()
fmt.Println(reflect.TypeOf(msg_text))
f1 := "./1.txt"
err := ioutil.WriteFile(f1, []byte(msg_text), 0644)
checkError(err)
}
<실행 결과>
기능은 Click을 누르면 Hello From Go를 출력하고, Save를 누르면 같은 폴더에 1.txt를 생성하며 텍스트를 저장합니다.
추가로, 배포할 때에는 html파일도 함께 배포해야 정상 작동하는 것도 주의하세요. (lorca_ex.go 파일 내부에 html을 모두 코딩하면 하나의 exe파일이 생성되므로 상관없지만, 위 예제처럼 불러오기식으로 처리하면 함께 배포해야합니다. 상황에 따라 적절히 활용하시기 바랍니다.)
그럼 모두 건승하시길...
~~끝~~
반응형
'Programming > Golang' 카테고리의 다른 글
| Go언어 - Gin Framework(3강 Article List) (0) | 2020.12.14 |
|---|---|
| Go언어 - Gin Framework (2강 HTML Template 구성) (0) | 2020.12.13 |
| Go언어 - Lorca GUI 라이브러리 (0) | 2020.12.08 |
| Go언어- Gin Framework(1강 설치) (0) | 2020.12.08 |
| Go언어 - MySQL 연동 (0) | 2020.12.06 |
