Comment on page
🖼
나만의 UI 만들기
- 1.ZEP 캔버스 위에 내가 원하는 형태의 UI를 그릴 수 있습니다. ZEP에서는 HTML 을 통해 UI를 표현할 수 있습니다.
- 2.
App.showWidget()함수를 통해, HTML 파일을 특정 위치에 불러올 수 있습니다. 이 때 인자로 파일명, 정렬, 위젯의 가로와 세로 크기를 정해줍니다. 정렬에 들어가는 값은 ScriptApp에서 Methods를 참고해주세요. - 3.생성한 변수에
sendMessage()메소드를 통해, 원하는 값을 HTML 파일에 전달할 수 있습니다. - 4.main.js에서 전달 받은 값을 사용하려면, HTML 문법에 맞게 작성한 다음
addEventListener를 통해 message 타입을 아래 예시와 같이 값을 받아올 수 있습니다.
- main.js
//UI가 노출될 위치(정렬, 가로, 세로) 값을 변수로 사전에 제작
let postion = 'middle';
let width = 400;
let height = 400;
// my.html로 state라는 태그를 만들어 hello라는 값을 전달
let _widget = App.showWidget('my.html', position, width, height);
_widget.sendMessage({
state: "hello",
});
- my.html
<html>
<div id="test">-</div>
<script type="text/javascript">
**window**.**addEventListener**('message', function(e) {
// state라는 태그 밸류를 보냈으니 아래 형태로 받는다
var state = e.data.state;
// 위의 id test 라는 곳의 텍 스트로 적용한다
document.getElementById("test").innerText = state;
})
</script>
</html>
참고
- 튜토리얼의 App type은 installable App을 권장합니다.
- .js파일의 파일이름은 반드시 main 이어야 합니다. main.js 파일을 준비합니다.
Last modified 2mo ago