 |
|
첫 번째 가젯
시작해 보자. Listing 1에 있는 짧은 코드 블록이 여러분의 첫 번째 가젯이다.
Listing 1. 첫 번째 가젯 XML
1 <?xml version="1.0" encoding="UTF-8" ?>
2 <Module>
3 <ModulePrefs title="IBM developerWorks!" height="150" author="Your name here" />
4 <Content type="html">
5 <![CDATA[
6 <script type="text/javascript">
7 <!--
8 function popup_windows()
9 {
10 window.open( "http://www.ibm.com/developerWorks", "myWindow",
11 "status = 1, height = 800, width = 600, toolbar = 1, resizable = 1")
12 }
13 //-->
14 </script>
15 <body>
16 <br>
17 <form>
18 <input type="button" onClick="popup_windows()" value="Visit IBM.com!">
19 </form>
20 <p onClick="popup_windows()">Click this text to visit IBM.com!</p>
21 </body>
22 ]]>
23 </Content>
24 </Module>
|
XML 한 줄 한 줄 살펴보기e
단지 24줄짜리지만 이 짧은 가젯은 상당히 많은 기능을 제공한다. 지금부터 여러분이 가젯의 내부 동작원리에 대해 더 많이 배울 수 있도록 안내하겠다.
1번 행: 이 줄은 파일의 내용을 XML로 지정한다.
2번 행:
<Module> 태그를 사용하여 이 XML 파일에 가젯이 들어있음을 나타낸다.
3번 행: 이름이 암시하듯이 <ModulePrefs> 태그를 이용해 개발자와 관련된 다양한 환경설정들을 기술할 수 있다.
4번 행:
<Content type="html"> 태그를 사용하여 콘텐츠 유형을 HTML로 선택한다.
5-22번 행: 이 가젯의 콘텐츠 유형을 HTML로 지정하였기 때문에 <![CDATA[>를 사용하여 HTML 코드(또는 HTML 안의 자바스크립트 같은 스크립트 언어)의 시작을 알려준다.
23, 24번 행: 이 두 줄에 있는 태그로 그것들과 관련된 태그의 끝을 표시한다.
코드 작성하기
Listing 2는 줄 번호를 없앤 첫 번째 가젯을 다시 보여준다. 이 코드를 텍스트 편집기에 복사하여 붙여 넣고 파일 이름을 gadget-1.xml로 저장한다.
Listing 2. 줄 번호를 뺀 XML
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="IBM developerWorks!" height="150" author="Your name here" />
<Content type="html">
<![CDATA[
<script type="text/javascript">
<!--
function popup_windows()
{
window.open( "http://www.ibm.com/developerWorks", "myWindow",
"status = 1, height = 800, width = 600, toolbar = 1, resizable = 1")
}
//-->
</script>
<body>
<br>
<form>
<input type="button" onClick="popup_windows()" value="Visit IBM.com!">
</form>
<p onClick="popup_windows()">Click this text to visit IBM.com!</p>
</body>
]]>
</Content>
</Module>
|
코드 업로드하기
가젯을 여러분의 홈페이지에 추가하기 전에 방금 생성한 XML 파일을 인터넷을 통해 접근할 수 있는 웹 서버에 올려야 한다. 다음 절에서 개인화 홈페이지에 가젯을 추가할 때 위치를 참조할 수 있도록 파일을 업로드한 곳을 기록해 둔다. 예를 들어 http://www.your-web-server.com/uploads에 업로드하면 파일을 참조하기 위한 전체 경로는 http://www.your-web-server.com/uploads/gadgets-1.xml이 된다.
접근할 서버를 갖고 있지 않다면 이 튜토리얼에서 만든 XML 파일을 Google Page Creator 계정을 통해 사용할 수 있다. Google Page Creator에서는 웹 사이트를 만들 수 있는 도구들을 제공한다. 이 방식을 사용하려면 http://technical.tutorial.googlepages.com/gadget-1.xml 링크를 복사해 두고 개인화 홈페이지에 가젯을 추가할 때 임시로 사용하면 된다.
홈페이지에 가젯 추가하기
이제 인터넷을 통해 가젯에 접근할 수 있기 때문에 여러분의 개인화 홈페이지에 이것을 추가할 수 있다. 구글 개인화 홈을 방문해 필요하면 Sign in을 한 뒤 Add stuff 링크를 클릭한다(그림 4).
그림 4. 여러분의 개인화 홈페이지
"Add stuff" 페이지에서 URL을 사용하여 여러분의 가젯을 추가할 수 있다. 화면 오른쪽 위 구석에 있는 Add by URL을 클릭한다(그림 5).
그림 5. URL로 추가하기
이제 거의 다했다. Google Page Creator 계정에 있는 가젯을 사용한다면 이전에 복사해둔 URL을 그림 6처럼 붙여 넣는다. 만약 여러분의 웹 서버에 가젯을 올렸다면 가젯의 전체 경로를 입력한다.
그림 6. 가젯 URL 입력하기
구글은 그림 7처럼 경고 메시지를 팝업 창으로 띄워 구글에서 만들지 않은 것을 여러분의 홈페이지에 추가할 것인지 확인한다. 설치하고 있는 가젯 출처를 알고 있기 때문에 OK를 클릭하고 계속 진행한다.
그림 7. 구글 경고
홈페이지로 돌아가(Back to homepage라는 링크를 클릭하여), 그림 8처럼 새로운 가젯이 추가된 것을 확인할 수 있다. 가젯에 보이는 버튼 또는 텍스트를 클릭하면 새로운 브라우저 창이 뜨고 IBM 웹 사이트로 이동할 것이다.
그림 8. 구글 가젯
| 
