Polymer

Google Polymer 사용방법에 대해서 다룹니다.

Polymer Google Polymer 사용방법에 대해서 다룹니다.

Using elements

컴포넌트(태그)를 import하고 사용하는 기초적인 방법을 다룹니다.

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시키고 사용하는 기초적이 방법에 대해 다루었습니다.

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

 

댓글

Google Polymer 사용방법에 대해서 다룹니다.

댓글 본문
버전 관리
유종명
현재 버전
선택 버전
graphittie 자세히 보기