Jade template for okjsp

1,761 views

Published on

Jade Template Simple Desc

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,761
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Jade template for okjsp

  1. 1. Jade Template javarouka@gmail.com
  2. 2. 말할거리 ● ● ● ● HTML Template Template Jade Template 예제
  3. 3. HTML Template? ● ● ● ● JSP, Freemarker, Apache-Tiles, Thymeleaf... {{Mustache}}, Underscore, jQuery Template... Jade, EJS, dust.js… HTML Template Engine
  4. 4. Template 추세 ● ● ● ● View Only Logic-less Light-Weight Client Side Template
  5. 5. Jade Template #1 ● Haml 문법에 많은 영향을 받은 템플릿 엔진 ● 본래는 node.js 용으로 제작되었다
  6. 6. Jade Template #2 ● ● ● ● http://jade-lang.com/ Client, Server 컴파일 둘 다 지원 Logicless Template 다양한 언어 구현체 ○ Scala, Java, Ruby, PHP...
  7. 7. Basic ● 태그 기술은 <> 를 제외한 태그 이름만을 적는다. ● 자식 노드의 기술은 줄바꿈과 들여쓰기로 표현한다. <ul> ul li 사과 li 바나나 <li>사과</li> <li>바나나</li> </ul>
  8. 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. 9. Attribute ● 속성명은 (속성명=”속성값”) 의 형식으로 표현한다. label(for=”user-name”) 유저 input#user-name(type=”text”) <label for=”user-name”>유저</label> <input id=”user-name” type=”text”>
  10. 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. 11. Jade4J ● Jade의 자바 버전 ● node.js 의 jade와는 차이점이 다소 있다 ○ jade template 안에 javascript 사용 불가 ○ type 체크가 엄격함 ○ Server Complie Only ● Map = {} ● List = []
  12. 12. Play ● http://javarouka.github.io/jade/ ● http://jade-lang.com/demo/ ● http://naltatis.github.io/jade-syntax-docs/
  13. 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. 14. 부록~ http://garann.github.io/template-chooser/
  15. 15. 감사합니다.

×