Jade template for okjsp
Upcoming SlideShare
Loading in...5
×
 

Jade template for okjsp

on

  • 698 views

Jade Template Simple Desc

Jade Template Simple Desc

Statistics

Views

Total Views
698
Views on SlideShare
698
Embed Views
0

Actions

Likes
2
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jade template for okjsp Jade template for okjsp Presentation Transcript

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