Using elements

위의 영상대로 환경을 만드셨다면.

http://www.polymer-project.org/docs/start/usingelements.html

위의 링크에서 zip파일로 다운 core 와 paper elements를 받습니다.

압축을 풀면 bower -components 폴더안에 있는 폴더들을

제가 만든 polymer maker/components 폴더안에 위치 시켜주시면 됩니다.

그럼 <paper-button>을 한번 만들어 보겠습니다.

명령어를 입력하여 컴포넌트를 만듭니다.

그럼 현재 파일들이 이렇게 있습니다.

test-button 폴더에 들어가서 test-button.html 파일을 에디터로 엽니다.

윗부분이 이렇게 되어있습니다.

<link rel="import" href="../components/polymer/polymer.html">

이 태그는 polymer.html 을 import시키는 링크입니다.

이 html소스에 컴포넌트를 쓰기 위해서는 이렇게 import를 선언 해주어야 합니다.

<link rel="import" href="../components/paper-button/paper-button.html">

이렇게 입력한 후

template 태그 안에 paper-button 태그 적고 label 속성으로 버튼에 들어갈 텍스트를 적습니다.

<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/paper-button/paper-button.html">


<polymer-element name="test-button">
<template>
<style>
    div{
		width: 100px;
		height: 100px;
		background-color: blue;
	}
</style>
	<div></div>
	<paper-button label="test"></paper-button>
</template>
<script>
(function(){
	Polymer('test-button',{
		// life cycle
		// created: function() { ... },
  // ready: function() { ... },
  // attached: function () { ... },
  // domReady: function() { ... },
  // detached: function() { ... },
  // attributeChanged: function(attrName, oldVal, newVal) {
  //   //var newVal = this.getAttribute(attrName);
  //   console.log(attrName, 'old: ' + oldVal, 'new:', newVal);
  // },
	});
})();
	
</script>
</polymer-element>

결과적으로 이러한 형태가 됩니다.

이제 상위폴더에서 testserver.go 스크립트를 실행합니다.

go run testserver.go

그리고 웹브라우져에서 주소창에 127.0.0.1주소를 입력합니다.

여기서 test-buttonDemo를 실행하면

이러한 화면이 나옵니다.

컴포넌트(태그)를 import시키고 사용하는 기초적이 방법에 대해 다루었습니다.

다음엔 컴포넌트를 디테일하게 사용하는 방법을 다루겠습니다.

Using elements

Using elements

댓글