SoftLeaf JS Render 시작하기

Restful 방식의 백그라운드 가 갖추어 졌을때 Data Mapping 을 위한 Javascript Renderer 단순 반복 작업의 간소화와 제각각의 코드의 형식을 통일 하기위한 의도로 제작 되었다.

On this page

기본 설정

HTML 페이지의 헤드에 필요한 태그를 수동으로 포함한 다음 스크립트를 초기화할 수 있습니다 .

먼저 softleaf render 의 최신 버전을 다운받아 주십시오 [릴리즈 바로가기]

그리고 , 다음 초기화 코드를 작성합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Softleaf JS Render Demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

소스코드에 Softelaf JS 파일 과 Jquery 파일을 포함합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Softleaf JS Render Demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.softleaf.renderer.js"></script>
  </body>
</html>

이제 Renderer를 사용할 기본준비가 끝났습니다.

다음 단계

Renderer 를 적용할 화면에 따라 사용할 랜더러를 선택합니다.
listRender 는 리스트 화면을 구성하는데 적합합니다. 페이징 기능을 포함하고 있습니다.
detailRender 는 수정, 상세, 추가 화면을 구성함에 있어 One Page로 구성할수 있게 도와줍니다.
자유도를 보장하기 위해 리스트 내부 혹은 등록폼의 세세한 기능은 별도로 선언하여 제작할수 있습니다.
Data Mapping 이 주된 목적이기 때문에 URL 값이 필수로 필요합니다.

listRender

listRender 는 API 데이터가 list 형식으로 넘어왔을때 페이징 부터 테이블(리스트) html 형식으로 그려주는 역활을 한다.

목적

데이터 매핑 부터 화면 그리기 까지 단순 반복작업을 피하기 위함 이다. 다만 이것을 수행하기 위한 전제 조건으로서는 Rest API 의 Response 값의 형태를 지정할 필요가 있다.

데이터 샘플

{
    "result" : {
      "list" : [  //화면에 표기할 데이터 리스트
        {
          "first": "경환",
          "last" : "성",
          "handle" : "softleaf"
        },
        {
          "first": "병일",
          "last" : "이",
          "handle" : "hslbi"
        },
        {
          "first": "현철",
          "last" : "박",
          "handle" : "hc.park"
        },
        {
          "first": "만석",
          "last" : "김",
          "handle" : "manpro"
        }
      ],
      "totalCount" : 4      //페이징 처리를 위한 필수 값 전체 게시물 수
    }
}

기능

listRender 함수 정의서

function	Access modifier	return value	Description
init	private void	null	initialize 초기화 listRender 호출시 자동 실행
searchParam	public	object	검색 폼 지정시 검색값 호출 가능
makeHead	private void	null	테이블 헤드 만들기
getList	private void	null	option값에 설정된 URL 호출
requestResult	public	object	URL 호출 시 response 값
pagingParam	private	object	Paging 처리시 필요 한 값 저장
pagingUtil	private	function	Util로 분리 되어있던 기능 통합

옵션

Depth 1	Depth 2	Depth 3	Value	Description
url			TEXT	데이터를 호출할 URL
class			TEXT	리스트 table class
searchFrm			TEXT	페이징 검색어 값 연동 을 위한 아이디 값
searchBtn			TEXT	버튼 클릭시 화면 재검색을 위한 버튼 아이디 값
emptyText			TEXT	테이블에 데이터가 없을 경우 노출할 문구
columns			array	데이터 키값
	object	name	TEXT	데이터 키값
		text	TEXT	테이블 컬럼명이 될 문구
		linkfunc	Function	테이블 칸에 기능 넣기 해당 옵션값에 펑션 매핑 가능
		nformat	Bool	숫자 포멧 true:false 값 true 설정시 천단위 콤마 표기
		class	TEXT	테이블 헤더 값에 css 클래스 지정
		href	TEXT	데이터 row에 링크 지정 ex) /example/detail?idx={idx} {}값에 들어가는 부분은 데이터 키값으로 지정
		text_templet	TEXT	표기될 텍스트 값에 대한 템플릿 지정 ex) <button type='button' data-idx='{idx}'>수정</button> {}값에 들어가는 부분은 데이터 키값으로 지정
tableHead	class		TEXT	테이블 헤드에 들어갈 클래스 지정
	innerTag		TEXT	테이블 헤드에 들어갈 내용이 있다면
isPaging			Bool	페이징 사용여부 true false
table			TEXT	테이블 태그설정
thead			TEXT	테이블내 헤드 태그 설정
tr			TEXT	테이블 로우(줄) 설정
td			TEXT	테이블 내 칸 설정
th			TEXT	테이블내 머리글 칸 설정
tbody			TEXT	테이블 내 본문이 들어갈 태그 설정
paging			object	페이징 처리를 위한 옵션값 설정
	target		TEXT	페이징 표기를 위한 대상 설정
	style		TEXT	default 1/10 형식과 1,2,3,4,5 형식의 스타일 설정 (default/spread)
	pageLimit		number	페이지내 표기할 게시물 수 결정

옵션 값을 선언 하는 부분은 DEMO 를 참고할것

detailRender

detailRender는 listRender와는 다르게 화면을 직접적으로 그리지는 않는다. DataMapping에 최적화 되어있다.

목적

데이터 매핑을 최소화 하며 상세 및 수정,등록의 모양이 같을 경우 html 코딩을 최소화 하여 하나의 view 파일로 사용할수 있게 한다.

데이터 샘플

{
  "result": {
    "idx": 70,
    "select_test": 5,
    "check1": "N",
    "check2": "Y",
    "subject": "제목",
    "contents": "TEXTAREA 내용 입니다",
    "just_text" : "단순 문자열",
    "number": 10000,
    "time": "2024-08-28 11:04:38",
    "user_name": "SoftLeaf",
    "array_data": [
      {
        "arr": "https://wemakeprice.com"
      },
      {
        "arr": "https://coupang.com"
      }
    ]
  }
}

기능

detailRender 함수 정의서

function	Access modifier	return value	Description
init	private void	null	initialize 초기화 detailRender 호출시 자동 실행
getData	private void	null	option값에 설정된 URL 호출
dataMapping	private void	null	모드에 따른 분기처리
editMode	private void	null	수정 모드
viewMode	private void	null	상세 모드
addMode	private void	null	입력 모드
customSelect	private void	null	커스텀 셀렉트 적용시 버튼 이벤트 처리
requestResult	public	object	URL 호출 시 response 값
그외			.detail_remove 클래스 적용시 상세모드 에서 감춰진다. .add_remove 클래스 적용시 입력모드 에서 감춰진다. .edit_remove 클래스 적용시 수정모드 에서 감춰진다.

옵션

Depth 1	Depth 2	Depth 3	Depth 4	Value	Description
url				TEXT	데이터를 호출할 URL
mode				TEXT	세가지 모드를 지원 수정 , 상세 , 추가
customSelect				Bool	커스텀 셀렉트 적용 여부 true , false (소프트리프 퍼블리싱 외 테스트 되지 않음)
columns				array	input 타입 속성 정의
	object	name		text	데이터 키값 이자 input type 의 name 값 대상 지정용 기본 값으로 input 타입을 자동으로 인식하고 별도 옵션이 필요한 경우 값을 입력한다.
		data		array	SELECT박스 데이터
		nformat		Bool	숫자 포멧 true:false 값 true 설정시 천단위 콤마 표기
		id		TEXT	name 대체 타겟 지정
		viewmode		Bool	edit 모드 및 add 모드 에서 텍스트 노출이 필요한경우 true , false
		key		TEXT	data key 지정
		is_array		Bool	데이터가 배열 일 경우 true : false
		row_target		TEXT	Jquery Selector 대상 지정 class : .class id : #id 배열일경우 대상 지정
		add_class		TEXT	배열의 경우 추가 버튼 지정을 해야 한다.
		remove_class		TEXT	배열의 경우 삭제 버튼 지정을 해야 한다.
		text_templet		TEXT	표기될 텍스트 값에 대한 템플릿 지정 ex) <button type='button' data-idx='{idx}'>수정</button> {}값에 들어가는 부분은 데이터 키값으로 지정
		colums		array	배열 내부의 input type 및 키 지정
			object	name	데이터 키값 이자 input type 의 name 값 대상 지정용 자동 지정은 없으며 name만 지원한다.
				type	현재 지정 지원 타입은 link 배열내 URL 의 경우 상세 화면 에서 링크 형식으로 보여줌을 시사한다.