Jade Template Simple Desc

1. Jade Template
javarouka@gmail.com

2. 말할거리
●
●
●
●
HTML Template
Template
Jade Template
예제

3. HTML Template?
●
●
●
●
JSP, Freemarker, Apache-Tiles, Thymeleaf...
{{Mustache}}, Underscore, jQuery Template...
Jade, EJS, dust.js…
HTML Template Engine

4. Template 추세
●
●
●
●
View Only
Logic-less
Light-Weight
Client Side Template

5. Jade Template #1
● Haml 문법에 많은 영향을 받은 템플릿 엔진
● 본래는 node.js 용으로 제작되었다

6. Jade Template #2
●
●
●
●
http://jade-lang.com/
Client, Server 컴파일 둘 다 지원
Logicless Template
다양한 언어 구현체
○ Scala, Java, Ruby, PHP...

7. Basic
● 태그 기술은 <> 를 제외한 태그 이름만을 적는다.
● 자식 노드의 기술은 줄바꿈과 들여쓰기로 표현한다.
<ul>
ul
li 사과
li 바나나
<li>사과</li>
<li>바나나</li>
</ul>

8. Id, Class
● CSS 셀렉터의 문법 표현과 유사하다.
● 태그명#아이디, 태그명.클래스. 태그명 생략 가능
#title 데이터
table#data-table.table
tbody
tr.row.col
td 데이터
<div id=”title”>데이터</div>
<table id=”data-table” class=”table”>
<tbody>
<tr class=”row col”>
<td>데이터</td>
</tr>
</tbody>
</table>

9. Attribute
● 속성명은 (속성명=”속성값”) 의 형식으로 표현한다.
label(for=”user-name”) 유저
input#user-name(type=”text”)
<label for=”user-name”>유저</label>
<input id=”user-name” type=”text”>

10. Model-Binding
●
●
●
#{key} 이스케이프 표현
!{key} html 특수문자를 escape 하지 않음. 위험
tagname=key 단순한 값 표현. 태그명 바로 다음에만 사용가능
{ “name”: “<이항희>” }
h1 Hello #{name}
h1 Hello !{name}
h1= name
<h1>Hello &lt;이항희&gt;</h1>
<h1>Hello <이항희></h1>
<h1>&lt;이항희&gt;</h1>

11. Jade4J
● Jade의 자바 버전
● node.js 의 jade와는 차이점이 다소 있다
○ jade template 안에 javascript 사용 불가
○ type 체크가 엄격함
○ Server Complie Only
● Map = {}
● List = []

12. Play
● http://javarouka.github.io/jade/
● http://jade-lang.com/demo/
● http://naltatis.github.io/jade-syntax-docs/

13. 참고
● 공식 사이트
○
http://jade-lang.com/
● jade Github
○
https://github.com/visionmedia/jade
● jade4j - Jade Java 버전
○
https://github.com/neuland/jade4j
● Eclipse Jade Intent 플러그인
○
https://github.com/aulphar/Jade-syntax-highlight-HRC

14. 부록~
http://garann.github.io/template-chooser/

15. 감사합니다.