TemplateSyntax

Template Syntax

XE 템플릿은 PHP 문법에 기초하며, 문법을 간소화하고 HTML 태그와 잘 어우러지도록 만들었습니다.

기본 문법

XE 템플릿은 크게 세 가지 형태입니다. 중괄호({}), HTML 주석(<!-- -->) 그리고 HTML 속성으로 지정할 수 있습니다.

중괄호는 변수의 값을 출력하거나 할당할 때 사용하며, HTML 주석 형태는 if, foreach와 같은 조건문이나 반복문으로 사용됩니다. 또한, 제어문 등은 HTML의 속성이나 태그의 형태로 사용되기도 합니다.

{$var}
{@ $is_logged = true}
<!--@if($is_logged)--> ... <!--@endif-->
<!--@foreach($arr as $val)--> ... <!--@endforeach-->
<div cond="$is_logged"> ... </div>
<load target="./css/style.css" />

주석

HTML 주석과 동일하지만 웹페이지에는 출력하고싶지 않은 내용을 담을 때 사용할 수 있습니다.

감추고 싶은 주석은 <!--// --> 이처럼 주석을 여는 구문에 //를 추가하면 됩니다.

<!--// 로그인 폼 시작 -->
<form>
  ...
  <!-- 로그인 버튼 -->
  <!--// 큰 버튼으로 표시하려면 'large' class를 추가하면 됨 -->
  <button class="btn-login">로그인</button>
</form>
<!--// 로그인 폼 끝 -->

위 템플릿은 다음과 같이 <!--// -->코드를 제거 후 출력됩니다.

<form>
  ...
  <!-- 로그인 버튼 -->
  <button class="btn-login">로그인</button>
</form>

변수

변수 출력

{$변수이름}과 같은 형태로 템플릿을 작성하면 변수를 화면에 출력할 수 있습니다. 단, 이름이 언더스코어 두 개(__)나 숫자, 공백, 언더스코어 문자 이외의 특수 문자로 시작하는 변수는 사용할 수 없습니다. 변수 대신 함수를 실행하고 반환하는 값을 출력할 수도 있습니다.

// 올바름
{$varname}
{$_var2name}
{substr($varname, 0, 5)}
{$varname.'suffix'}
{className::$property}
{className::getProperty()}

// 올바르지 않음
{$123number}
{$__two_underscore}

변수 할당

{@ ... } 문법은 사용하면 중괄호 안의 내용을 출력하지 않고, 변수에 값을 할당할 때 사용할 수 있습니다. 변수의 값이나 함수의 실행 결과를 출력하지 않고 실행만 할 때 사용합니다.

{@ $cms = 'xe'}
{@ $now = date()}

변수 이스케이프

자바스크립트 등에서 중괄호를 사용할 때 문제가 발생하지 않도록 하기 위해 중괄호 문법을 다음과 같이 이스케이프할 수 있습니다.

• 여는 중괄호 { 와 닫는 중괄호 }를 서로 다른 줄에 입력한다.
• 또는, 여는 중괄호 { 뒤에 공백을 입력한다. 또는, 주석문(/**/)을 사용할 수도 있습니다.

function () {
  return true;
}
function () { return true; }
function () {/**/return true;}

외부 파일 다루기

JavaScript, CSS 파일을 불러들이거나 제거하려면 load 또는 unload 문법을 사용할 수 있고, 다른 파일을 내용을 출력하려면 include 문법을 사용할 수 있습니다. 이 문법은 유효한 XML 노드여야 하고 자기 자신을 바로 닫는 태그(self-closing tag)이므로 > 기호 앞에 반드시 슬래시(/)를 포함해야 합니다.

assets 불러오기

JavaScript, CSS 등의 외부 파일을 페이지에 로드하려면 load 태그를 사용합니다. target 속성으로 지정한 파일의 확장자에 따라 동작이 달라지므로 자바스크립트 파일은 반드시 .js를, CSS 파일은 반드시 .css를 확장자로 사용해야 합니다. target에 지정하는 파일은 템플릿 파일의 위치를 기준으로 상대 경로로 지정할 수 있습니다.

<load target="path/to/style.css" />
<load target="path/to/script.js" />

load 태그에 사용할 수 있는 속성은 다음과 같다.

• target : 파일의 경로. 현재 템플릿 파일의 경로를 기준으로 함
• media : (CSS 전용) CSS의 media 속성. 기본값은 "all"이다.
• type : (JS 전용) 자바스크립트를 출력할 위치를 정한다. head(기본값) 또는 body를 사용할 수 있다. body를 입력하면 닫는 </body> 태그 바로 위에 등록된 순서대로 출력된다.
• targetie : IE의 조건부 주석을 사용할 때 설정한다. 조건부 주석에 입력하는 문자열과 같이 IE 6, gt IE 6 등으로 값을 입력한다.
• index : 우선 순위를 설정한다. 특별한 문제가 없다면 사용하지 않는 편이 좋다.

load 태그는 언어 파일을 불러올 때도 사용할 수 있다. target 속성에 lang.xml 파일의 경로를 입력하면 해당하는 언어를 읽어들인다.

<load target="../lang/lang.xml" />

템플릿 포함하기

PHP에서 사용하는 include 문과 비슷한 역할을 하며. 설정한 템플릿 파일을 읽어들여 해석하고 화면에 출력합니다. include 태그를 사용하고, target 속성에 읽어들인 파일을 입력하면 된다. 읽어들일 파일의 경로는 현재 템플릿 파일을 기준으로 한다.

<include target="header.html" />

제거하기

unload 태그는 load로 읽어들인 파일을 제거할 때 사용한다. load를 사용할 때와 같은 속성을 입력하면 읽어들인 파일을 제거할 수 있다.

<unload target="path/to/style.css" media="all" />

unload 태그에 사용할 수 있는 속성은 다음과 같다.

• target : 읽어들인 파일의 경로
• media : (CSS 전용) CSS의 media 속성
• type : (JS 전용) 자바스크립트를 출력할 위치
• targetie : IE의 조건부 주석

DOM 제어문

HTML 요소와 함께 사용하는 형태의 문법이다. 블럭 문법과 달리 별도의 시작/끝을 별도로 지정하지 않으며, 문법이 적용된 DOM을 대상으로 한다. 예를 들어, 다음은 간단한 조건문의 한 예이다.

<img src="img.jpg" alt="Sample image" cond="$cond" />

cond문의 유효 범위는 문장이 적용된 DOM 요소 <img>이다. 따라서 이 템플릿은 다음과 같은 PHP 코드로 변환된다.

<?php if($cond){ ?><img src="img.jpg" alt="Sample image" /><?php } ?>

이 밖에 속성과 함께 사용하는 속성 조건문도 있다.

속성 조건문

다른 문법이 DOM 요소에 작용하는 반면, 속성 조건문은 특정 속성에만 작용한다. 특정 속성 뒤에 파이프 문자(|)와 cond="$cond" 문법을 사용하면 조건을 만족할 때만 속성을 출력한다. 다음은 $isActive의 값이 true일 때만 class="active" 속성을 출력하는 템플릿 예제이다.

<a href="http://localhost" class="active"|cond="$isActive">Go</a>

위 템플릿을 실행하면 $active의 결과에 따라 서로 다른 결과를 출력한다.

// $isActive = true 일 때
<a href="http://localhost" class="active">Go</a>

// $isActive = false 일 때
<a href="http://localhost">Go</a>

함수를 호출할 수도 있습니다

<a href="http://localhost" class="active"|cond="$obj->isActivated()">Go</a>

조건문

특정 조건을 만족할 때만 DOM 요소를 출력하도록 한다. 조건문을 적용할 DOM 노드에 cond 속성을 다음과 같이 사용하면 된다.

<img src="img.jpg" alt="Sample image" cond="$cond" />

이 템플릿은 다음과 같은 PHP 문법으로 변경된다.

<?php if($cond){ ?><img src="img.jpg" alt="Sample image" /><?php } ?>

자식 요소를 포함한 DOM에도 적용할 수 있다.

<div class="buttons" cond="$showButtons">
    <button type="button">Save</button>
    <button type="button">Reset</button>
</div>

이 템플릿은 다음과 같은 PHP 문법으로 변경된다.

<?php if($showButtons){ ?>
<div class="buttons">
    <button type="button">Save</button>
    <button type="button">Reset</button>
</div>
<?php } ?>

반복문

특정 DOM 요소를 주어진 조건에 따라 반복 출력한다. 반복문을 적용할 DOM 노드에 loop 속성을 사용하면 된다. 다음은 $arr 배열의 항목 갯수만큼 반복해서 출력하는 템플릿 예제이다.

// 템플릿
<ul>
  <li loop="$arr=>$val">Item : {$val}</li>
</ul>

// PHP
<ul>
  <?php foreach($arr as $val){ ?>
  <li>Item : <?php echo $val ?></li>
  <?php } ?>
</ul>

배열의 인덱스나 연관 배열의 키 이름을 사용하려면 다음과 같이 템플릿을 작성할 수 있다.

// 템플릿
<ul>
  <li loop="$arr=>$key,$val">Item {$key} : {$val}</li>
</ul>

// PHP
<ul>
  <?php foreach($arr as $key=>$val){ ?>
  <li>Item <?php echo $key ?>: <?php echo $val ?></li>
  <?php } ?>
</ul>

일정 횟수를 반복할 때 사용하는 for 문법도 사용할 수 있다.

// 템플릿
<ul>
  <li loop="$i=0; $i < count($arr); $i++">Item : {$arr[$i]}</li>
</ul>

// PHP
<ul>
  <?php for($i=0; $i < count($arr); $i++){ ?>
  <li>Item : <?php echo $i ?></li>
  <?php } ?>
</ul>

예를 들어 $arr이 1,2,3,4,5 다섯 개의 숫자를 저장한 배열이라면 이 템플릿은 다음과 같이 출력된다.

<ul>
  <li>Item : 1</li>
  <li>Item : 2</li>
  <li>Item : 3</li>
  <li>Item : 4</li>
  <li>Item : 5</li>
</ul>

특정 조건을 만족하는 동안 계속 반복하는 while 문법은 다음과 같이 사용한다. while 문법의 표현식은 반드시 변수에 값을 할당하는 형태여야 한다.

// 템플릿
<ul>
  <li loop="$item=get_item()">Item : {$item}</li>
</ul>

// PHP
<ul>
  <?php while($item=get_item()){ ?>
  <li>Item : <?php echo $item ?></li>
  <?php } ?>
</ul>

가상 노드

여러 개의 DOM을 한꺼번에 다루어야 하는 등 한 개의 DOM만 다뤄서 원하는 결과를 얻기 어려울 때는 가상 노드 <block>을 사용할 수 있다. 가상 노드 <block>은 실제로 화면에 출력되지는 않지만 cond나 loop를 속성으로 사용할 수 있다. 다음 템플릿 구문을 보자.

<block cond="$cond">
  <a href="link1.html">Link1</a>
  <a href="link2.html">Link2</a>
</block>

이 코드를 PHP 코드로 변환하면 다음과 같은 형태가 된다.

<?php if($cond){ ?>
    <a href="link1.html">Link1</a>
    <a href="link2.html">Link2</a>
<?php } ?>

가상 노드는 템플릿 파일 안에 있는 다른 HTML 요소와 동등하게 하나의 완전한 노드로 취급되어야 한다. 다시 말해 다음과 같이 노드를 기술할 때 가상 노드를 사용할 수 없다.

// 잘못된 사용법
<a href="link.html" <block cond="$style">style="{$style}"</block> class="link">Link</a>

블럭 제어문

블럭 문법은 @로 시작하는 HTML 주석 형식으로 작성한다.

조건문

조건문에는 if, else, elseif가 있고 if로 시작한 구문을 닫을 때는 endif를 사용한다.

if 문

조건을 비교하여 조건에 맞으면 블럭 안의 템플릿을 출력한다. if로 시작하고 endif로 블럭을 마치며, elseif와 else 등을 블럭 안에서 사용할 수 있다(elseif에 공백이 없음에 주의). 다음은 가장 간단한 if문 예제이다.

<!--@if($var)-->Is this printed?<!--@endif-->

다음 예제처럼 else 또는 elseif 문을 추가해 다양한 조건을 비교할 수도 있다.

<!--@if($var)-->
  I am the first!
<!--@elseif($another_var)-->
  Second. Not bad.
<!--@else-->
  Oops. I am the last.
<!--@endif-->

반복문

배열이나 객체 등 값을 나열할 수 있는(enumerable) 객체에 대해 반복문을 실행한다. for, foreach, while로 시작하고 각각 endfor, endforeach, endwhile로 블럭을 마친다.

for 문

for로 시작하고 endfor로 마치는 반복문이다. 반복 횟수가 정해진 경우에 유용하다.

<!--@for($i = 0; $i < 10; $i++)-->
  <span>Number : {$i}</span>
<!--@endfor-->

foreach 문

foreach로 시작하고 endforeach로 마치는 반복문이다. 배열이나 객체를 처음부터 끝까지 반복할 때 유용하다.

<!--@foreach($arr as $key=>$name)-->
  <span>Item {$key} : {$name}</span>
<!--@endforeach-->

while 문

while로 시작하고 endwhile로 마치는 반복문이다. 반복 횟수를 알 수 없을 때 유용하다.

<!--@while($item=get_item())-->
  <span>Item : {$item}</span>
<!--@endwhile-->