RIFE Framework: RIFE 시작하기(5)

http://rifers.org 에서 발췌한 내용을 번역 하였습니다.
번역: 이원찬(wonchan.lee@gmail.com)
-------------------------------------------------------

Templates

앞장에서 템플릿에 관해 조금 살펴 보았다. 하지만 이 부분은 매우 중요한 부분이므로 지금부터 더 깊이 알아볼 것이다. 먼저 이전의 숫자맞추기 템플릿을 다시 보자:
-----------------------------------------------------------------
guess.html
-----------------------------------------------------------------
<html>
<head><title>Perform a guess</title></head>
<body>
<p>Guess a number from 0 to 100</p>


<p><font color="#990000">The guess is invalid.</font></p>

<p><i></i></p>
The answer is lower.
The answer is higher.
<form action="[!V 'SUBMISSION:FORM:performGuess'/]" method="post">

<input type="text" name="guess"
value="[!V 'PARAM:guess'][!/V]" /><br />
<input type="submit" value="Guess" /><br />
</form>
<script language="javascript">document.forms[0].guess.focus();</script>
</body>
</html>
-----------------------------------------------------------------

이 HTML템플릿에서는 V 와 B 두개의 템플릿 태그가 사용되었다. 앞장을 보면 값(value)태그와 구역(block)태그에 관한 간단한 설명을 볼 수 있다.

- The block tag
B태그는 구역(block)을 정의한다. 이제부터 단지 block태그라 부르겠다. block은 완전히 제거되어 생성된 HTML상에는 나타나지 않는다. 하지만 이 컨텐츠는 value태그에 할당될 수 있다. 이것은 자바 코드상에서 setBlock을 호출하여 작동한다. 다시말해, block은 빌딩블럭처럼 생각할 수 있으며 이것은 나중에 페이지생성시에 사용된다. guess템플릿에는 몇개의 block이 정의되어 있지만 실행시에는 하나만 사용된다.

-----------------------------------------------------------------
Guess.java에서 setBlock()의 사용예
-----------------------------------------------------------------
if (game.getAnswer() < guess)
{
mTemplate.setBlock("indication", "lower");
}
else if (game.getAnswer() > guess)
{
mTemplate.setBlock("indication", "higher");
}
-----------------------------------------------------------------

이 자바구현체의 코드조각은 guess요소가 어떻게 lower와 higher block을 value위치지정자에 사용하는지를 보여준다. block의 컨텐츠는 값에 할당되었을 때에만 나타난다는 것을 기억해라.

- The value tag
value 태그(V)는 어디에 컨텐츠가 위치할지를 지정하는데 사용된다. 따라서, 이것은 단순히 위치만 지정할 뿐 무언가가 보여지고 난다음에는 보여지지 않는다. 숫자맞추기 템플릿에서는 warning과 indication 위치지정자가 정의되었다. 이들은 나중에 form ubmission의 결과에 따라 값을 설정하는데 사용되어 졌다. value태그는 다음과 같이 사용된다:

-----------------------------------------------------------------
Default Value
-----------------------------------------------------------------

숫자맞추기 예제에서는 단순히 빈기본값을 가졌었다. 이것은 값이 설정되기 전에는 아무것도 표현하지 않는다는 것을 의미한다. 만약 기본값을 설정하게 되면 이것은 값이 변경되기 전까지 사용되어 진다. 그런 예는 다음 섹션에서 보게 될것이다. 값은 자바코드의 setValue를 호출함으로서도 설정될 수 있다.

아래는 짧은 사용 예이다. 이것은 기본값을 가지지 않는다.
-----------------------------------------------------------------

-----------------------------------------------------------------
이처럼 아무값도 설정되지 않은 태그는 단지 정확한 결과만 출력해줄 뿐이다. 이것은 값의 명확한 위치를 표시하고 다른 처리는 하지 않는다.

- Overriding the default value

value태그의 기본값은 템플릿내에서 스스로 설정될 수 있다. 이것은 BV태그를 사용한다. 이것은 컨텐츠가 같은 이름을 사용하는 value태그에 자동으로 기본값 설정이 된다는것만 제외하면 일반적인 block태그와 같은 속성을 가지고 있다. 물론 모든 block태그의 기능들을 여기에서도 사용할 수 있다.

-----------------------------------------------------------------

No warnings!
-----------------------------------------------------------------

이렇게 바꾸면 warning의 기본값은 "No warning!"이 된다. 새로운 기본값은 자바코드에서 값이 설정되지 않았을때 사용되어 진다.

위의 템플릿 코드는 아래와 같이 쓰여질 수 도 있으며 같은 결과를 출려한다:

-----------------------------------------------------------------
No warnings!
No warnings!
-----------------------------------------------------------------

하지만, 진짜 BV태그의 장점은 include태그와 함께 사용했을때 나타난다. 다음 섹션에서 자세히 다룰 것이다.

- The include tag
지금까지 한번도 다루지 않았던 " I 태그 "라는 것이 있다. 이것은 현재 페이지에 다른 템플릿을 포함시키고자 할때 사용된다. 이 태그는 예를들어 사이트 전체에 공통적으로 사용하는 표준 페이지가 있을때 매우 유용하다. 예제에서, page템플릿은 공통헤더와 푸터, 메인메뉴를 정의한다.

-----------------------------------------------------------------
page.html 표준페이지로 사용될 템플릿
-----------------------------------------------------------------
<html>
<head>
<title>the window title</title>
<link rel="stylesheet" type="text/css" href="/style/site.css"/>
</head>

<body>

<div id="menu">

<a class="[!V 'menu_home']inactive[!/V]"
href="[!V 'EXIT:QUERY:home'/]">HOME</a>

<a class="[!V 'menu_other']inactive[!/V]"
href="[!V 'EXIT:QUERY:other'/]"OTHER</a>

</div>

content goes here

</body>
</html>
-----------------------------------------------------------------

"Home" 과 "Other"라는 서로 다른 페이지가 있고 우리는 현재 메뉴명이 하이라이트 되기를 원한다. 이것은 사용자가 사이트를 둘러보기 쉽게한다. 다른 CSS class를 메뉴에 사용하여 메뉴아이템에 시각효과를 정의할 것이다.

위의 템플릿에서 menu_home 과 menu_other 에 메뉴링크의 CSS class속성을 제어하기 위해 value태그를 사용했다. 그것은 active이거나 inactive일 수 있다.

기본값은 "inactive"로 설정되어 있어 페이지가 보여지지 않음을 의미한다.

우리는 이 표준페이지를 다른 두 페이지에서 포함하길 원한다. 언급했던대로, 이것은 I태그를 써서 해결할 수 있다.

-----------------------------------------------------------------
home.html I태그를 사용해 다른 페이지를 포함하기
-----------------------------------------------------------------


active


My content on the Home page

-----------------------------------------------------------------

I 태그를 사용해 "page"템플릿을 포함시켰다. 그리고, menu_home의 기본값을 "active"로, page_content를 "My content on the Home page"로 설정했다. 이런 접근법으로 많은 페이지를 이용해 사이트를 쉽게 구축할 수 있게 되었다.

이제 템플릿에 관한 모든것을 알게 되었으므로 friends database application을 시작할 준비가 되었다.

RIFE Framework

2008년 2월 1일 금요일

RIFE 시작하기(5) - Templates

댓글 없음:

블로그 보관함

태그

검색

Newest RIFERS blogs entries

다른 블로그들

프로필

저작권 정보