<--SyntaxHighlighter--> SyntaxHighlighter.all();

이번에는 모듈 구분을 하여 코드를 좀 다듬어보려고 합니다. 아직 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파일이 생성되므로 상관없지만, 위 예제처럼 불러오기식으로 처리하면 함께 배포해야합니다. 상황에 따라 적절히 활용하시기 바랍니다.)

 

그럼 모두 건승하시길...

 

~~끝~~

+ Recent posts