깐지꾼지파파 개발&정보 블로그

프론트앤드 이야기/HTML

[HTML] 웹 템플릿 Handlebars 사용

한희성 2019. 5. 20.
반응형

사실 일찍 정리를 했어야 했는데 이제서야 정리를 하는 나는..


2016년도 당시 프로젝트에 사용하던 기술로 3년이 지난 이제서야 정리를 하게된다.


지금은 검색해도 2017년도 이후로의 블로그를 작성한 사람은 없을정도로 도태된 기술이다.


글쓴이는 왜 작성하는지? 는 그냥 단순 정리하면서 한번 더 보고 지나가려는 의미~입니다.


https://handlebarsjs.com/ 는 공식 홈페이지 이니 참고 ~하세요.


테스트 코드 환경


JAVA : jdk1.8.0_152

STS : Version: 3.9.4.RELEASE

Spring Boot : version '2.1.5.RELEASE'


 build.gradle


//for handlebars

compile('pl.allegro.tech.boot:handlebars-spring-boot-starter:0.3.0')


application.properties


#HandleBars

handlebars.enabled: true

handlebars.prefix: classpath:/templates/

handlebars.suffix: .html

handlebars.cache: false

handlebars.registerMessageHelper: true

handlebars.failOnMissingFile: false

handlebars.prettyPrint: false


defaultLayout.html 


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<div id="bodyWrap">

<div id="leftMenu">

<!-- left -->

{{> layout/leftMenu }}

</div> 

    <div id="contentsWarp">

{{#block "contents"}}{{/block}}

    </div>

    <div id="footerWarp">

<!-- footer -->

{{> layout/footer }}

</div>

</div>

<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

{{#block "addScript"}}{{/block}}

</body>

</html>


 leftMenu.html


<div>

왼쪽 메뉴입니다.

</div>


footer.html


<div>

푸터 입니다.

</div>


 main.html


{{#> layout/defaultLayout}}

{{#partial "contents"}}

<div>내용</div>

{{/partial}}


{{#partial "addScript"}}

<script>

alert(2);

</script>

{{/partial}}

{{/layout/defaultLayout}}



CustomHandlbarsHelper.JAVA

@HandlebarsHelper
public class CustomHandlbarsHelper {

   @Autowired
   private Resource resource;

   public  String DateFormat(String date) throws ParseException {
        SimpleDateFormat transFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm");
        Date date2= transFormat.parse(date);
        return transFormat.format(date2);
   }
   
   public CharSequence stringEquals(final Object obj1, final Options options) throws IOException {
        Object obj2 = options.param(0);
        return obj1.toString().equals(obj2.toString()) ? options.fn() : options.inverse();
    }
   
   public String isEquals(String data1, String data2){
      if(data1.equals(data2))    return "true";
      else return "false";
   }
   
   
   public String pageNavigaterOn(int data1, int data2){
      //log.debug("pageNavigaterOn:{}:{}",data1,data2);
      if(data1==data2)   return "class='on'";
      else return "";
   }
   
   public String pageNavigaterActive(int data1, int data2){
      //log.debug("pageNavigaterOn:{}:{}",data1,data2);
      if(data1==data2)   return "class='active'";
      else return "";
   }
   
   public String adminChannelPrintUl(int index, int size, List<Object> list, String mode){
      //log.debug("adminChannelPrintUl:{}:{}:{}:{}:{}",index,size,list.size(),index%size,mode);
      if(index%size==1 && mode.equals("start")) return "<ul>" ;
      else if(mode.equals("end") &&  (index%size==0 || index==list.size())) return "</ul>";
      else return "";
   }

   //{{/printKoreaFormat}}
   public String printKoreaFormat(Date date){
      if (date ==null) return null;
      SimpleDateFormat format1 = new SimpleDateFormat("yyyy년 MM월 dd일  HH시 mm분");
      String result = format1.format(date);
      return result; 
      
   }
      
   public String printDate(Date date, String mode){
      if (date ==null) return null;
      SimpleDateFormat format1 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
      SimpleDateFormat format2 = new SimpleDateFormat("yyyy-MM-dd hh:mm a",new Locale("en", "US"));
      String result = format1.format(date);
      String result2 = format2.format(date);
      switch (mode){
      case "yyyy-MM-dd" : return result.substring(0, 10); 
      case "HH:mm" : return result.substring(11, 16); 
      case "HH:mm:ss" : return result.substring(11, 19);
      case "hh:mm a" : return result2.substring(11, 19);
      case "HH:mm a" : return result2.substring(11, 19);
      case "yyyy" : return result.substring(0, 4); 
      case "MM" : return result.substring(5, 7); 
      case "dd" : return result.substring(8, 10); 
      case "HH" : return result.substring(11, 13); 
      case "mm" : return result.substring(14, 16); 
      case "ss" : return result.substring(17, 19); 
      default : return result; 
      }
   }
   
   
   public CharSequence equals(final Object obj1, final Options options) throws IOException {
      Object obj2 = options.param(0);
      //log.debug("equals:obj1:{},obj2:{}", obj1, obj2);
      if(obj1 != null && obj2 != null){
       return Objects.equal(obj1.toString(), obj2.toString()) ? options.fn() : options.inverse();
      }
      return Objects.equal(obj1, obj2) ? options.fn() : options.inverse(); 
  }
   
   
   public CharSequence compare(final Object obj1, final Options options) throws IOException {
      Object obj2 = options.param(0);
      int data1 = (int)obj1;
      int data2 = (int)obj2;
      return  data1 > data2 ? options.fn() : options.inverse();
  }

   
   
   public CharSequence isLanguagesLengthMoreOne(final List<String> languaes, final Options options) throws IOException {
      return    languaes !=null && languaes.size() > 1  ? options.fn() : options.inverse();  
  }
   
   public String getListSize(List<Object> list)  {
      if(list == null ) return "0";
      return    String.valueOf(list.size()); 
  }

   public String resourceBundle(Object code, Options options){
//    String obj2 = options.param(0);
      String title="";
      if (code == null) return "";
      if(code instanceof String){
         title = resource.getResource(code.toString());
      }else if (code.getClass().isEnum()){
         title = resource.getResource((Enum<?>) code);
      }
      return title;
   }
}


귀찮아서 복붙..


간단사용법은 아래와같다 


{{resourceBundle "Software"}} 

{{#equals accountUser.authority 'Admin'}}{{/equals}}

{{#if fileName1}}{{fileName1}}">{{fileName1}}{{else}}{{/if}}

{{#each softwares}}{{/each}}




반응형
저작자표시 비영리

'프론트앤드 이야기 > HTML' 카테고리의 다른 글

[HTML] Layer popup + dimmed 처리 소스  (0) 2019.04.18
[html5] HTML5 테그  (0) 2018.09.26
[HTML] 추석!! 블록 요소 vs 인라인 요  (0) 2018.09.24
[HTML] 추석!! HTML 태그 정리  (0) 2018.09.24
태그먹이기  (0) 2018.04.23

볼 만한 글

댓글

💲 추천 글

티스토리툴바