RIFE 시작하기(3) - Number Guess 어플리케이션 (2/3)

- Templates
데이터와 프레젠테이션층을 분리하기 위해 RIFE는 템플릿(template)을 사용한다. 템플릿은 일반적인 HTML파일과 함께 웹어플리케이션을 위한 구조화된 특별한 마크업(markup)을 사용한다. 여기엔 특별한 스크립팅언어가 포함되지 않으며 어떠한 로직도 포함시킬 수 없다. 템플릿은 단지 컨텐츠(값)를 위한 블럭과 위치지정만 가능할 뿐이다. 로직은 element에 있다.블럭은 생성되며 컨텐츠는 위치지정자 내부에 할당되거나 생성된다. block과 value태그는 브라우저로 보내지기 직전에 생성된 출력값으로 변환된다.

이것이 RIFE템플릿이 다른 솔루션들과의 차이점이다. JSP를 예를 들면, 페이지들은 어떤 HTML에디터에서난 편집될 수 있다. 왜냐하면 이 파일들은 올바른 HTML형식이기 때문이다. 이것은 당연히 전체 어플리케이션을 실행하지 않고도 쉽게 브라우저에서 확인해 볼수 있다.

Hello World 예제에서 모든 컨텐츠는 자바클래스 구현의 processElement메소드로부터 직접 출력되어 졌다. 만약 모든 컨텐츠가 이러한 방식으로 생성되어야 한다면 매우 성가신 일이 될것이다. 템플릿은 이보다 손쉬운 방법을 제시한다.

숫자맞추기 게임에는 두개의 템플릿이 있다. 하나는 맞추기 페이지(guess page)이고 다른 하나는 성공 페이지(success page)이다. guess템플릿의 일부를 빨리 보자.

-----------------------------------------------------------------
맞추기 페이지 템플릿
-----------------------------------------------------------------
<p>Guess a number from 0 to 100</p>
<!--V 'warning'--><!--/V-->
<!--B 'invalid'-->
<p><font color="#990000">The guess is invalid.</font></p>
<!--/B-->
<p><i><!--V 'indication'--><!--/V--></i></p>
<!--B 'lower'-->The answer is lower.<!--/B-->
<!--B 'higher'-->The answer is higher.<!--/B-->
-----------------------------------------------------------------

보시다시피, RIFE는 일반적인 HTML 주석을 사용한다. 여기에서, 템플릿 태그를 위한 다른 문법을 표현하는 V 와 B 두개의 태그를 볼 수 있다. V 는 값(value)을 위한 위치지정자이고 B 는 구역(block)을 정의한다. 자바 요소코드에서 문자열을 값(value)태그에 삽입하기 위해서는 다음과 같이 코딩한다.

-----------------------------------------------------------------
template.setValue("warning", "The answer is lower.");
-----------------------------------------------------------------
이 예제에서, 우리는 B 태그와 함께 정의한 block을 사용하고 컨텐츠의 값으로 이것들 중 하나를 값에 삽입했다.

-----------------------------------------------------------------
template.setBlock("indication", "lower");
-----------------------------------------------------------------

이 방식으로 우리는 한줄의 HTML코드도 자바코드에 포함시키지 않았으며 템플릿에는 어떤 로직도 포함되지 않았다. 이런 명확한 컨텐츠와 로직의 분리가 RIFE의 대단한 능력중 하나이다.