manual for developer

IINN STUDIO

Manual for developer

인앤 스튜디오 개발자 매뉴얼

http://www.iinnsoft.com

2018-02-15

경기 하남시 미사강변동로 73

노블레스 빌딩 1023호 인앤소프트 Copyright © 2015 IINN Soft. All right reserved

http://www.iinnsoft.com/

http://www.iinnsoft.com IINN STUDIO

2 / 114

목차

1. 설치와 실행 방법 .............................................................................................................................................................. 6

1.1. IINNStudio.zip 파일의 압축 해제 .............................................................................................................. 6

1.2. IINNStudio.exe 실행 ......................................................................................................................................... 6

1.2.1. 신규 가입 ............................................................................................................................................................... 6

1.3. 로그인 ...................................................................................................................................................................... 7

1.4. 정상 실행 화면 ................................................................................................................................................... 7

2. 환경 설정............................................................................................................................................................................... 8

2.1. Local path 설정 .................................................................................................................................................. 8

2.2. Server path 설정 ............................................................................................................................................. 10

2.3. Jsp Header 설정 .............................................................................................................................................. 16

2.4. Jsp Add tag 설정 ............................................................................................................................................ 17

3. 컴포넌트 실습 .................................................................................................................................................................. 18

3.1. 컴포넌트 생성 ................................................................................................................................................... 19

3.2. 컴포넌트 배치 ................................................................................................................................................... 20

3.3. 프로퍼티 매니저 .............................................................................................................................................. 21

3.4. 주요 컴포넌트 프로퍼티 설정 .................................................................................................................. 23

3.4.1. img tag ........................................................................................................................................................... 23

3.4.2. userTag ............................................................................................................................................................ 25

3.4.3. userCode ........................................................................................................................................................ 26

3.4.4. dummy ............................................................................................................................................................ 27

3.4.5. input component ....................................................................................................................................... 28

3.4.5.1. Attributes 설정 ............................................................................................................................................ 28

3.4.5.2. UserBeginScript 설정 ............................................................................................................................... 28

3.4.5.3. userEndScript ............................................................................................................................................... 29

3.4.5.4. dataAdapter 설정 ...................................................................................................................................... 29

3.4.5.5. properties of input 설정 ........................................................................................................................ 33

3.4.5.6. validatorRules 설정 ................................................................................................................................... 34

3.5. source 파일 생성 ............................................................................................................................................ 35

3.5.1. java, xml(mybatis), jsp 소스 파일 생성 ........................................................................................... 35

3.5.2. only jsp 소스 파일 생성 ........................................................................................................................ 35

3.6. 인앤스튜디오 팁 모음 .................................................................................................................................. 36

3.6.1. 변수형식 값 설정 ....................................................................................................................................... 36

4. 인앤 공통함수 .................................................................................................................................................................. 37

4.1. global variable .................................................................................................................................................. 37

4.2. trace ...................................................................................................................................................................... 37

4.3. iinn custom function ..................................................................................................................................... 37


3 / 114

4.3.1. addRow ........................................................................................................................................................... 38

4.3.2. deleteRow ...................................................................................................................................................... 38

4.3.3. exportChart ................................................................................................................................................... 39

4.3.4. getModifyData ............................................................................................................................................ 39

4.3.5. getAllData ...................................................................................................................................................... 40

4.3.6. chkRequired .................................................................................................................................................. 40

4.3.7. lockRow .......................................................................................................................................................... 41

4.3.8. isLockRow ...................................................................................................................................................... 42

4.3.9. headerCheck................................................................................................................................................. 42

4.3.10. exportExcel .................................................................................................................................................... 42

4.3.11. mergeByRow ................................................................................................................................................ 43

4.3.12. mergeByCol .................................................................................................................................................. 43

4.4. ifn_setAddRowStatus ..................................................................................................................................... 44

4.5. ifn_setDeleteRowStatus ................................................................................................................................ 44

4.6. ifn_setUpdateRowStatus ............................................................................................................................... 44

4.7. ifn_tran ................................................................................................................................................................. 45

4.8. ifn_grdHeadercheckboxRenderer , ifn_grdHeadercheckboxRendered .................................... 46

5. jqxGrid 활용 ...................................................................................................................................................................... 47

5.1. dataSource ......................................................................................................................................................... 47

5.2. headerGroup ..................................................................................................................................................... 48

5.3. cellsrenderer ...................................................................................................................................................... 49

5.4. cellsformat .......................................................................................................................................................... 49

5.5. column type ...................................................................................................................................................... 50

5.5.1. checkbox ........................................................................................................................................................ 50

5.5.2. dropdownlist ................................................................................................................................................ 51

5.5.3. combobox ..................................................................................................................................................... 52

5.5.4. datetimeinput .............................................................................................................................................. 54

5.6. internal page ..................................................................................................................................................... 54

5.7. server page ........................................................................................................................................................ 55

5.8. localdata .............................................................................................................................................................. 56

5.9. grid editing ........................................................................................................................................................ 58

5.9.1. basic editing ................................................................................................................................................. 58

6. jqxDataTable 활용 .......................................................................................................................................................... 67

6.1. column type ...................................................................................................................................................... 67

6.1.1. checkbox ........................................................................................................................................................ 67

6.1.2. dropdownlist ................................................................................................................................................ 69

6.1.3. datetimeinput .............................................................................................................................................. 71

6.2. server page ........................................................................................................................................................ 72


4 / 114

6.3. merge cells ......................................................................................................................................................... 73

6.4. dataTable edit ................................................................................................................................................... 74

6.5. localdata .............................................................................................................................................................. 76

7. jqxChart 활용 ................................................................................................................................................................... 78

7.1. Line Series .......................................................................................................................................................... 78

7.2. Chart color function ...................................................................................................................................... 80

7.3. Crosshairs enable ............................................................................................................................................ 81

7.4. Area Series ......................................................................................................................................................... 82

7.5. Line and Area Series ...................................................................................................................................... 83

7.6. Column and Line Series ............................................................................................................................... 84

7.7. Stacked Column Series ................................................................................................................................. 85

7.8. 100% Stacked Column Series .................................................................................................................... 86

7.9. ColorFunction ................................................................................................................................................... 87

7.10. Column Range Series .................................................................................................................................... 88

7.11. 가로바 형식 ....................................................................................................................................................... 89

7.12. Pie Series ............................................................................................................................................................. 90

7.13. Pie Series with Legend ................................................................................................................................. 91

7.14. Partial Pie Series .............................................................................................................................................. 92

7.15. Donut Series ...................................................................................................................................................... 93

7.16. Candle and zoom Series .............................................................................................................................. 94

7.17. Line and zoom Series ................................................................................................................................... 95

7.18. Spider Series...................................................................................................................................................... 96

7.19. Sample Spider Series..................................................................................................................................... 97

7.20. Color band ......................................................................................................................................................... 98

7.21. Chart annotations ........................................................................................................................................... 99

8. jqxTabs 활용 .................................................................................................................................................................... 100

8.1. tabs 생성 .......................................................................................................................................................... 100

8.2. tabs 헤더 .......................................................................................................................................................... 102

8.3. tabs 컨텐츠 ...................................................................................................................................................... 104

9. jqxTree 활용 .................................................................................................................................................................... 105

9.1. tree 생성 ........................................................................................................................................................... 105

9.2. tree 확장(expand)/축소(collapse) .......................................................................................................... 106

9.3. tree with checkbox ....................................................................................................................................... 107

9.4. tree with context menu .............................................................................................................................. 108

9.5. Load on Demand with Ajax ..................................................................................................................... 110

9.6. Drop down tree ............................................................................................................................................. 111

10. jqxEditor 활용 ................................................................................................................................................................ 112

10.1. editor 생성 ....................................................................................................................................................... 112


5 / 114

10.2. inline editor ..................................................................................................................................................... 112

10.3. tools Customization ..................................................................................................................................... 113


6 / 114

화면 설계서 엑셀 저장용 폴더 Ex) D:\IINN\DesignDescription\jkSoft\A01\Grid.xlsx

인앤 스튜디오에서 생성한 xml 저장용 폴더 Ex) D:\IINN\SavedFiles\jkSoft\A01\Grid.xml

화면 설계서용 미리보기 화면 캡처 저장 폴더 Ex) D:\IINN\ScreenCapture\jkSoft\A01\Grid.jpg

Browser Emulation 모드의 버전을 설정하는 레지스트리 파일 ☞ 참조링크

인앤 스튜디오 실행 파일 입니다.

1. 설치와 실행 방법

인앤 스튜디오는 PE 포맷(Portable Executable) 지원으로 인스톨 과정이 필요 없습니다.

1.1. IINNStudio.zip 파일의 압축 해제

IINNStudio.zip 파일의 압축 해제 후 폴더 구조 입니다.

1.2. IINNStudio.exe 실행

1.2.1. 신규 가입

Register 버튼을 통해 http://www.iinnsoft.com에 신규 가입 합니다.

① 사용자명을 입력 합니다.

② 이메일을 입력합니다.

③ 회원가입 버튼을 클릭합니다.

④ 인앤 소프트로부터 메일이 발송됩니다.

⑤ 메일 내용 중 비밀번호 설정 링크를 클릭합니다.

①

②

③

회원가입 메일을 스팸메

일로 처리하는 경우가 있

으므로 스팸메일함도 확

인해주세요.

④

⑤

이메일과 비밀번호 입력란 우측의

체크박스를 체크해두면 이메일과

비밀번호를 저장해 둡니다.

https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/general-info/ee330730(v=vs.85)#browser_emulation

http://www.iinnsoft.com/


7 / 114

1.3. 로그인

E-mail과 비밀번호를 입력하고 로그인 합니다.(네트워크 사용 불가의 경우 별도 서비스가

가능하므로 연락 주세요)

1.4. 정상 실행 화면

정상으로 실행된 경우 에러 없는 초기 화면을 보여 줍니다.

⑥ 사용하고자 하는 비밀번호를 입력 합니다.

⑦ 비밀번호 초기화 버튼을 통해 신규 가입 처리를

완료 합니다.

☞ 비밀번호는 암호화 되어 관리되므로 관리자도

알 수 없습니다.

⑥

⑦

①

②

③

④

컴포넌트 뷰

① 메뉴바 입니다. (신규, 저장, 환경설정, 라이선스 등)

② 기본 툴바 입니다. (신규, 열기, 저장, 소스생성, 설계서생성, 미리보기 등)

③ 컴포넌트바 입니다. (div, input, button, combo, tabs, grid, chart 등)

④ 컴포넌트 뷰 입니다. (활성창의 컴포넌트를 트리 형식으로 보여줍니다.)

⑤ 프로퍼티 매니저 입니다. (선택된 컴포넌트의 Attribute, Property, Script, Event

등을 관리 할 수 있습니다.)

⑤

프로퍼티 매니저


8 / 114

2. 환경 설정

인앤 스튜디오에 eclipse project 정보를 설정합니다. (도구 > 환경설정)

2.1. Local path 설정

프로젝트 명 : 아래 그림과 같이 jsp, java, xml의 root 폴더 이름을 설정합니다.

=> jsp, java, xml의 root 폴더는 모두 동일 이름이어야 합니다.

=>인앤 스튜디오에서 생성하는 디자인 xml 파일을 저장 할 때도 프로젝트 명 이하의 폴

더에 저장해야 합니다.

Ex) 디자인 xml : D:\LatestVersion\SavedFiles\jkSoft\A01\Grid.xml

jsp : D:\work\jkSoft.tab\src\main\webapp\WEB-INF\jsp\jkSoft\A01\Grid.jsp

java : D:\work\jkSoft.tab\src\main\java\jkSoft\A01\web\GridController.java

쿼리 xml : D:\work\jkSoft.tab\src\main\resources\jkSoft\sqlmap\A01_Query.xml

자동

생성


9 / 114

프로젝트 기본경로 : 아래 그림과 같이 프로젝트 기본경로를 full path로 설정합니다.

Ex) D:\eGovFrameDev-3.5.1-64bit\workspace\jkSoft.tab

Jsp 기본경로 : 아래 그림과 같이 프로젝트 기본경로 이후의 jsp경로를 설정합니다.

Ex) src\main\webapp\WEB-INF\jsp

Java 기본경로 : 아래 그림과 같이 프로젝트 기본 경로 이후의 java경로를 설정합니다.

Ex) src\main\java

쿼리 xml 기본경로 : 아래 그림과 같이 프로젝트 기본 경로 이후의 쿼리 xml경로를 설정

합니다.

Ex) src\main\resources


10 / 114

2.2. Server path 설정

인앤 스튜디오에 서버 경로를 설정합니다.

서버 url : 로컬 웹 서버 url을 설정합니다.

Ex) http://localhost:8080/tab/

http://localhost:8080/tab/


11 / 114

배포기본 경로 : 아래 그림과 같이 Server Locations 의 Server Path를 설정합니다. Ex) D:\eGovFrameDev-3.5.1-64bit\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp1\wtpwebapps\jkSoft.tab\WEB-INF

Help jsp 경로 : help assist 파일의 배포 서버 경로를 설정합니다. Ex) D:\eGovFrameDev-3.5.1-64bit\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp1\wtpwebapps\jkSoft.tab\WEB-

INF\jsp\jkSoft\com\ManualHelp.jsp


12 / 114

help assist 관련 참조 파일

D:\eGovFrameDev-3.5.1-64bit\workspace\jkSoft.tab\src\main\webapp\WEB-INF\jsp\jkSoft\com\ManualHelp.jsp

<%--

/******************************************************************************

* 시스템명 : 대한민국 시스템

* 업 무 명 :

* 프로그램 아이디 : ManualHelp.jsp

* 프로그램 이름 :

* 프로그램 개요 :

* ---------------------- ---------- -------------------------------------------

* 수정일 수정자 수정내역

*

******************************************************************************/

--%>

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <!DOCTYPE html>

<html lang="kr"> <head>

<title></title>

<%@ include file="/inc/incFiles.jsp" %> <style>

_from_css_

</style>

<script type="text/javascript">

$(document).ready(function () {

_from_javascript_

try {

$("#popWinModal").jqxWindow({

autoOpen: false,

height: 400,

width: 700,

theme: 'energyblue',

isModal: true,

closeButtonAction: 'hide'

});

} catch(e) {

alert(e.message);

}

try {

$('#preLoader').jqxLoader({

theme: 'energyblue',

isModal: true,

text: "조회 또는 저장중....",

width: 100,

height: 70

});

} catch(e) {

alert(e.message);

}

});

</script>

</head>

<body class='default'> _from_html_

<div id="popWinModal">


13 / 114

<div>header</div>

<div>contents</div>

</div>

<div id='preLoader'></div> </body>

</html>

D:\eGovFrameDev-3.5.1-64bit\workspace\jkSoft.tab\src\main\java\jkSoft\com\web\ManualHelpController.java

package jkSoft.com.web;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;

import org.springframework.ui.ModelMap;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseBody;

import jkSoft.com.service.ManualHelpService;

/**

*

* @author 홍길동

* @since 2017-10-11

* @version 1.0

* @see

*

* <pre>

* << 개정이력(Modification Information) >>

*

* 수정일 수정자 수정내용

* -------- -------- ---------------------------

* 2017-10-11 홍길동 최초 생성

*

* </pre>

*/

@Controller

public class ManualHelpController {

@Resource(name = "manualHelpService")

private ManualHelpService manualHelpService;

/**

*

* @param model

* @return path

* @exception Exception

*/

@RequestMapping(value = "com_ManualHelp.do")

public String manualHelp(ModelMap model) throws Exception {

Map<String, Object> rmap = new HashMap<String, Object>();

//화면 전달 정보를 rmap에 설정합니다.

rmap.put("test", "test");

model.addAttribute("rmap", rmap);

return "com/ManualHelp";

}

}

D:\eGovFrameDev-3.5.1-64bit\workspace\jkSoft.tab\src\main\java\jkSoft\com\service\ManualHelpService.java

package jkSoft.com.service;



14 / 114


/**

*

* @author 홍길동

* @since 2017-10-11

* @version 1.0

* @see

*

* <pre>


*


* -------- -------- ---------------------------

* 2017-10-11 홍길동 최초 생성

*

* </pre>

*/

public interface ManualHelpService {

}

D:\eGovFrameDev-3.5.1-

64bit\workspace\jkSoft.tab\src\main\java\jkSoft\com\service\impl\ManualHelpServiceImpl.java

package jkSoft.com.service.impl;

import java.util.HashMap;



import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import egovframework.rte.fdl.cmmn.EgovAbstractServiceImpl;

import jkSoft.utils.ComUtil;

import jkSoft.com.service.ManualHelpService;

/**

*

* @author 홍길동

* @since 2017-10-11

* @version 1.0

* @see

*

* <pre>


*


* -------- -------- ---------------------------

* 2017-10-11 홍길동 최초 생성

*

* </pre>

*/

@Service("manualHelpService")

public class ManualHelpServiceImpl extends EgovAbstractServiceImpl implements ManualHelpService {

@Resource(name="manualHelpDAO")

private ManualHelpDAO manualHelpDAO;

}

D:\eGovFrameDev-3.5.1-64bit\workspace\jkSoft.tab\src\main\java\jkSoft\com\service\impl\ManualHelpDAO.java

package jkSoft.com.service.impl;


15 / 114



import org.springframework.stereotype.Repository;

import egovframework.rte.psl.dataaccess.EgovAbstractDAO;

/**

*

* @author 홍길동

* @since 2017-10-11

* @version 1.0

* @see

*

* <pre>


*


* -------- -------- ---------------------------

* 2017-10-11 홍길동 최초 생성

*

* </pre>

*/

@Repository("manualHelpDAO")

public class ManualHelpDAO extends EgovAbstractDAO {

}


16 / 114

2.3. Jsp Header 설정

아래 그림과 같이 jsp 소스의 헤더를 설정합니다.

<html> tag 선언 전에 include 내용과 <head> tag 내부의 include 내용을

각각 설정합니다.

환경설정의

내용이

자동

생성된

소스에

반영된

이미지


17 / 114

2.4. Jsp Add tag 설정

<body> tag 와 <script> tag 내부의 공통 추가 코드를 설정합니다.

◆◆◆ tip ◆◆◆

개발자가 인앤 스튜디오 디자인 창에서

페이지 별로 컴포넌트를 생성하지 않고

도 항상 공통으로 생성 해야 하는 컴포

넌트의 경우 사용하면 좋습니다.

또한 <body>와 <script> 각각의 가장

마지막에 소스 코드의 추가가 필요한 경

우 사용 하는 것도 가능 합니다.

</body>가 닫히기 직전에

추가 html이 위치 합니다.

</script>가 닫히기 직전에

추가 script가 위치 합니다.


18 / 114

3. 컴포넌트 실습

아래 그림과 같이 신규화면을 생성합니다.

신규 화면이 아래와 같

이 보여집니다.

마우스 드래그를 통해

화면 사이즈를 조절 할

수 있습니다.

시스템명이 자동설정 됩니다.

업무명을 기입 합니다.

업무 영문명을 기입합니다. 즉, Java package 입니다.=> 미사용

저장 파일명으로 화면 아이디가 자동설정 됩니다.

화면명을 기입 합니다.

설계서 문서 번호를 기입 합니다. (설계서 탭에서도 기입 가능)

설계서 작성자를 기입 합니다. (설계서 탭에서도 기입 가능)

소스 버전을 설정합니다. (설계서 탭에서도 기입 가능)

화면의 개요를 기입 합니다. (설계서 탭에서도 기입 가능)

화면의 상세 설명을 기입 합니다. (설계서 탭에서도 기입 가능)

수정이력을 입력 합니다.

화면의 타이틀을 설정합니다.

팝업의 경우 화면 너비(폭)을 설정합니다.

팝업의 경우 화면 높이를 설정합니다.

화면의 오픈종류를 설정합니다.

컨트롤키를 누른 상태로

마우스 오버가 되면 설

명이 표시 됩니다.

선택된 컴포넌트가 없는 경우 화면 속성 정보가 표시


19 / 114

3.1. 컴포넌트 생성

컴포넌트 바의 tags를 클릭하면 왼쪽 그림과 같이 자주 사용

하는 html tag가 표시 됩니다.

생성할 컴포넌트를 클릭하고 디자인 창으로 커서가 이동되면

아래와 같은 모양으로 커서가 변경됩니다.

원하는 위치에서 드래그 드롭으로 컴포넌트를 생성 합니다.

아래 그림과 같이 아이디 입력창이 표시 됩니다.

입력한 아이디는 html element id가 됩니다.

적당한 ID를 입력하고 확인 버

튼을 클릭 합니다.

컴포넌트 생성이 완료 되었습니

다.

컴포넌트를 생성하면 생성한

컴포넌트가 선택 상태가 되고

프로퍼티 매니저를 통해 각각

의 프로퍼티 값을 설정하는 것

으로 컴포넌트를 완성 시킵니

다.

프로퍼티 매니저


20 / 114

3.2. 컴포넌트 배치

컴포넌트는 그룹 컴포넌트와 단일 컴포넌트로 분류되고 단일 컴포넌트는 그룹 컴포넌트

하위로만 배치가 가능합니다.

복수개의 컴포넌트를 선택해서 아래와 같이 정렬, 간격, 사이즈 조절이 가능합니다.

브라우저에서 보여질때는 프로퍼티에서 설정한 Style(CSS) 또는 class 에 따라 인앤

스튜디오와 다르게 보여질 수 있습니다.

동일 컴포넌트를 복수개 선택한 경우는 선택한 복수개의 컴포넌트의 프로퍼티 값을

한꺼번에 변경 할 수 있습니다.

기준이 되는 컴포넌트의 선택

영역은 노란색 입니다.


21 / 114

3.3. 프로퍼티 매니저

프로퍼티 매니저에서 직접 텍스트를 입력해서 값을 설정 합니다.

미리 정의된 값을 콤보박스로부터 선택해서 값을 설정 합니다.

팝업 입력창을 오픈 해서 값을 입력 합니다.

미리 정의된 하위 객체 속성을 팝업 객체속성 편집기를 오픈 해서 값을 설정 합니다.


22 / 114

하위 객체 속성 팝업은 아래와 같이 다시 하위 객체 속성을 펼쳐서 설정 할 수 있습니다.


23 / 114

3.4. 주요 컴포넌트 프로퍼티 설정

주요 컴포넌트에 대해 디자인부터 소스 생성 까지 실습해 봅니다.

3.4.1. img tag

컴포넌트 생성시에 스크립트 정보

도 함께 생성 하고 copy & paste

시에도 스크립트도 포함해서 copy

& paste 합니다.


24 / 114

컴포넌트 배치와 프로퍼티 설정이 완료되

면 로컬영역에 소스생성 버튼을 실행합니

다.

자바 소스 생성이 필요한 경우 자바 소스 생성이 불 필요한 경우

아래의 경우는 서버호출 정보가 없으므로

단순 class 파일만 생성된다.

인앤 스튜디오의 소스생성에 의해 생성된

jsp 프로그램 소스 입니다. (옵션에서 설정한

폴더에 생성)

프로퍼티에 설정한 값과 생성된 소스를 비교

해 보면 프로퍼티 설정값의 의미를 알기 쉽

습니다.


25 / 114

3.4.2. userTag

user tag는 사용자 정의 태그로 html5에서 지원하는 태그를 property의 tagName에 입력

하는 것으로 태그를 생성 합니다. 또한 userAttr를 통해 tag Attributes를 설정 합니다.

userTag를 활용해서 각종 object를 생성 할

수 있습니다. tagName

26 / 114

3.4.3. userCode

아무런 제한 이나 형식 없이 사용자가 입력한 그대로 화면에 표시하는 컴포넌트 입니다.

이하의 예제는 특정 html 영역을 주석 처리하는 예제 입니다.

본 컴포넌트 이하부터 주석으로 인식 되도

록  으로 종료 하고 있습니다.

주석의 마지막임을 설정합니다.

주석의 시작임을 설정합니다.


27 / 114

3.4.4. dummy

jsp 소스로 생성되지 않는 컴포넌트 입니다. 단, 소속된 내부 컴포넌트는 영향 받지 않고

소스로 생성 됩니다.

인앤 스튜디오에서 컴포넌트는 그룹 컴포넌트와 단일 컴포넌트로 분류되고 단일

컴포넌트는 그룹 컴포넌트 하위로만 배치가 가능 하기 때문에 그룹 컴포넌트 없이 단일

컴포넌트만 배치해야 할 필요가 있을 때 사용 하는 컴포넌트 입니다.

Ex) iframe 또는 jsp 를 include 하는데 그룹 컴포넌트 없이 단일 컴포넌트만 배치 해야

하는 경우 사용 하면 좋습니다.

인앤 스튜디오의 소스생성에 의해 생성된

jsp 소스 코드 입니다. => userCode에 의해

주석처리 되고 있습니다.

button은 dummy의 하위 컴포넌트이지만

생성된 jsp소스에서 dummy는 없습니다.


28 / 114

3.4.5. input component

그룹 컴포넌트 하위에 단일 컴포넌트인 input 컴포넌트를 생성 합니다.

3.4.5.1. Attributes 설정

3.4.5.2. UserBeginScript 설정

컴포넌트를 정의 하기 전에 사용자 코드 블록을 설정 할 수 있습니다.

self invoking function expression을 통해 수행할 코드를 설정 할 수 있습니다.

onclick, onblur등의 이벤트 또는 다른 함수 에서 콜하는 함수를 정의 할 수 있습니다.

Attributes 설정은 tags 설정과 유사 합니다.

클래스명 설정을 통해 컴포넌트의 스타일을 적용합니다.

초기값을 설정합니다. Ex) <%=sawon%>

컴포넌트 정의 영역

첫번째 상태로 생성한

jsp 소스코드 입니다.


29 / 114

3.4.5.3. userEndScript

컴포넌트를 정의 한 후에 사용자 코드 블록을 설정 할 수 있습니다.

3.4.5.4. dataAdapter 설정

로컬 또는 서버 등으로부터 데이터 취득이 필요한 경우 사용 합니다.

I. commonFunction : 공통 함수 등에서 미리 정의해둔 함수를 호출해서 데이터를 수신/

바인딩 하는 경우 사용 합니다.

II. dataSource : 함수 호출 방식을 사용하지 않고 서버 등으로부터 데이터를 수신/바인딩

하는 경우 사용 합니다.

미리 정의한 (공통)함수가 아닌 직접 Ajax호출이

필요한 경우 dataSource를 사용 해야 합니다.

dataAdapter의 commonFunction 또는 dataSource

를 설정한 경우 Properties의 source를 항상 설정

해야 합니다.

……

인앤 스튜디오에 의해 생성된

jsp 소스 코드 입니다..


30 / 114

dataSource의 property 상세는

다음 페이지의 dataSource

Properties 참조해 주세요.


31 / 114

dataSource Properties

# property 설명

1 type 네트워크 전송방식을 설정합니다. Ex) GET, POST

2 datatype 서버로 부터 받아오는 데이터 형태를 설정합니다.

Ex) xml, json, jsonp, tsv, csv, local, array, observablearray

3 url 서버로 요청(request)보낼 서버 주소를 설정합니다.

Ex) com/getAllAcno_list_select.do

4 data 서버에 전달하는 json 형식의 파라메터를 설정합니다.

5 datafields 서버로 부터 수신되는 데이터의 name, type 등을 설정합니다.

6 pagenum 초기 페이지를 지정합니다.

지정하지 않으면 첫번째 페이지를 보여줍니다.

7 pagesize 한 페이지에 표시할 그리드 건수를 의미 합니다.

8 pager 페이지나 페이지 사이즈가 변경되면 호출되는 callback 함수 입니다.

9 sortcolumn 정렬 기준이되는 datafield 를 설정합니다.

10 sortdirection 오름차순 또는 내림차순을 결정합니다. Ex) asc, desc

11 sort 정렬 기준컬럼 또는 정렬순서가 변경되면 호출되는 callback 함수 입니다.

12 filter 필터가 적용되거나 변경되면 호출되는 callback 함수 입니다.

13 addrow 그리드의 행이 추가되면 호출되는 callback 함수 입니다.

14 deleterow 그리드의 행이 삭제되면 호출되는 callback 함수 입니다.

15 updaterow 그리드의 행의 셀값이 변경되면 호출되는 callback 함수 입니다.

16 processdata 서버에 전달하는 파라메터를 추가로 설정할수 있습니다.

17 formatdata 데이터가 서버로 전달되기 전에 전달하는 데이터의 포맷을 변경해서

전달할수 있습니다.

18 async 동기 / 비동기로 데이터를 요청합니다. Ex) true, false

19 hierarchy 트리그리드 등에서 계층을 나타낼때 사용 합니다.

20 columnDelimiter datatype 이 csv 등의 경우 컬럼 구분자를 설정합니다.

21 rowDelimiter datatype 이 csv 등의 경우 행(row) 구분자를 설정합니다.

22 id datafields 의 고유 아이디를 설정합니다.

23 localdata javascript 의 array 등을 데이터로 사용하는 경우 설정합니다.

서버로 부터 데이터를 받아 올때는 url 을 사용합니다.

24 mapChar 매핑문자를 설정합니다.

Ex) class:{num:"123",name:"홍길동"}의 경우 class>name

25 root datatype 이 xml 의 경우 rootNode 를 설정합니다.

26 record 특정 레코드에 대한 정보를 설명하는 문자열


32 / 114

III. dataSettings : Server와 Ajax 통신시에 필요한 추가 옵션 Property를 설정 합니다. 설

정하지 않는 경우 초기값 common_dataSettings를 자동으로 설정 합니다.

common_dataSettings 예제

dataSettings Properties

# property 설명

1 async 서버로 요청(request)보낼때 비동기 여부를 결정합니다. Ex) true, false

2 autoBind dataAdapter가 초기화 될때 dataBind의 호출 여부를 결정합니다.

Ex) true, false

3 beforeSend

XMLHttpRequest를 이용하는 pre-request callback function으로 문서를 특정한

content type으로 강제 하는 등의 경우 설정합니다.

Ex) function( jqXHR, settings) {}

4 beforeLoadComplete 데이터가 완전히 로드 하기전(일부만 로딩) 호출하는 callback function를 설정

합니다. Ex) function (records) {}

5 contentType HTTP Header Field의 Content-Type을 설정합니다.

초기값 : application/x-www-form-urlencoded

6 formatData data object가 서버로 전달되기 전에 호출하는 콜백함수 입니다.

Ex) function(data) {}

7 loadError 서버 요청(request)이 실패하는 경우 호출하는 콜백함수 입니다.

Ex) loadError( jqXHR, status, error) {}

8 loadComplete 데이터를 완전히 로드한 경우 호출하는 콜백함수 입니다.


9 loadServerData ajax 호출을 수동으로 처리하는 콜백함수 입니다.

Ex) function(serverdata, source, callback) {}

10 processData 서버로 보내는data object를 수정할 수 있는 콜백 함수 입니다.


common_dataSettings 내용을 공통 javascript등에

정의 해야 합니다.


33 / 114

IV. dataScript : dataAdapter를 통해 데이터 수신후 데이터 조작등 스크립트가 필요한 경

우 설정합니다.단, 동기 통신(dataSettings의 async가 flase의 경우)만 유효 합니다.

3.4.5.5. properties of input 설정

# property 설명

1 disabled 컴포넌트 비활성 여부를 결정합니다.

2 dropDownWidth auto-suggest 드롭다운 리스트 박스가 열릴때의 너비(폭)를 설정합니다.

3 displayMember item의 displayMember를 설정합니다.valueMember와 함께 사용합니다.

dataAdapter의 dataSource에 정의된 이름을 사용합니다.

4 height 인풋박스의 높이를 설정합니다.

5 items 드롭다운된 리스트 박스에 보여질 항목을 개수를 설정합니다.

6 minLength auto-suggest가 보여지기 위한 최소한의 글자수를 설정합니다.

7 maxLength 인풋박스의 입력 가능한 최대길이를 설정합니다.

8 opened auto-suggest 드롭다운 리스트 박스의 (열림/닫힘)상태를 설정합니다.

9 placeHolder placeHolder에 표시할 문자열을 입력합니다.

10 popupZIndex 서치 모드에서 사용하는 드롭다운 리스트박스의 z-index를 설정합니다.

11 query 입력된 문자열

12 renderer 인풋박스의 렌더링 함수를 구현 할수 있습니다.

설정값이 없으면 기본 렌더링 함수를 사용합니다.

13 rtl 오른쪽에서 왼쪽으로 표시 여부를 결정합니다.

14 searchMode 자동완성 기능이 활성일때 검색하는 방식을 선택합니다.

15 source 인풋의 소스를 설정합니다.

16 theme 기본 테마를 설정하거나 사용자 정의 테마 설정을 통해 스타일을 적용합니

다.

17 valueMember item의 valueMember를 설정합니다.displayMember와 함께 사용합니다.

dataAdapter의 dataSource에 정의된 이름을 사용합니다.

18 width 인풋 컴포넌트 너비(폭)를 설정합니다. Ex) 300, 90%


34 / 114

3.4.5.6. validatorRules 설정

필수 체크등 검증 룰을 설정 합니다. 코드 작성 없이 기본적인 검증 체크가 가능합니다.

3.4.5.7. events

change, keyup등의 이벤트 발생시 수행할 코드를 설정 합니다.

action : validator 동작 계

기를 의미 합니다. 여러

개 지정 할수 있습니다.

Ex) blur -> 포커스를 잃을

때 validator가 동작 합니

다.

message : rule에 위배될 때 표시할 toast 메시지 내용을 입력합니다.

position : 특정 위치(left, right등)로부터 x,y좌표 만큼 이동해 메시지가 표시됩니다.

설정하지 않으면 기본위치 입니다.

rule : provideRule 또는 userValidFunction을 사용하는 경우로 구분 됩니다.

provideRule>required : param1과 param2의 설정이 필요 없습니다.

provideRule>maxLength : param1에 최대값을 설정 합니다.

provideRule>minLength : param1에 최소값을 설정 합니다.

provideRule>length : param1에 최소값, param2에 최대값을 설정 합니다.

provideRule>email : param1과 param2의 설정이 필요 없습니다.

userValidFunction : 사용자 정의 함수를 호출 합니다.

이벤트 내용 입력을 위해 팝업을 오픈 하면 함수의 기본

형태가 설정된 상태로 보여지게 됩니다.


35 / 114

3.5. source 파일 생성

인앤 스튜디오에서 소스 생성은 두가지로 구분합니다.

3.5.1. java, xml(mybatis), jsp 소스 파일 생성

▶기본 툴바의 소스생성 아이콘을 확장해서 Includes Java를 선

택 하거나 단축키 + +G 를 통해 소스 파일 생성

창을 오픈 합니다.

☞ 내문서에 java, xml을 백업 하고 있습니다.

3.5.2. only jsp 소스 파일 생성

▶기본 툴바의 소스생성 아이콘을 클릭 하거나

단축키 +g 를 통해 jsp파일을 생성 합니다.

Ctrl Shift

생성되는 파일의 경로, 파일명

을 확인 합니다.

요청하는 url이 모두 표시되고 DML

종류, map/list구분등을 확인합니다

확인: java, xml(mybatis) 파일을 생성 하고 jsp 파일도 생성 합니다.

취소: java, xml(mybatis) 파일 생성을 취소 합니다. 단, jsp는 생성 합니다.

Ctrl

소스 생성이 완료된 경우 좌기와

같은 메시지 창을 표시 합니다.

혹시 소스 생성 중 오류가 발생

한 경우 오류 메시지 창을 표시

합니다.


36 / 114

3.6. 인앤스튜디오 팁 모음

3.6.1. 변수형식 값 설정

▶인앤 스튜디오 속성정보 입력시에 쿼테이션(따옴표) 없이 생

성하기 위해서는 문자열 시작을 `(키보드 좌상단 물결)부터 시

작한다.


37 / 114

4. 인앤 공통함수

4.1. global variable

IINN_GV_INCLUDE_CHILD - jqxTreeGrid에서 행 삭제시 하위행 포함 여부를 의미합니다. 기

본값은 true 이고 하위행을 포함합니다.

4.2. trace

브라우저의 console창으로 설정 내용을 출력하는 함수이고 객체와 문자열등을 파라메터로

전달 할수 있습니다.

☞ ex) trace.d(“debug sample”);

I. trace.d() console.log에 바인딩 하는 함수 입니다.

II. trace.e() console.error에 바인딩 하는 함수 입니다.

III. trace.w() console.warn에 바인딩 하는 함수 입니다.

IV. trace.l() console.log에 바인딩 하는 함수 입니다.

4.3. iinn custom function

iinn custom 함수의 정의 및 사용법을 설명 합니다.

☞ ex) $(“#grd_list”).iinn(“getModifyData”, true, false, false);

함수별로 정의 하는 custom 함수 이름을 설정합니다.

인앤에서 제공하는 함수를 의미하는 함수의 이름 입니다.

Custom 함수의 선택자이고 반드시 컴포넌트의 아이디를 설정해야 합니다.

함수에 따라 각 파라메터를 설정합니다.


38 / 114

4.3.1. addRow

I. 정의

행을 추가 하는 함수 입니다. jqxGrid, jqxScheduler, jqxDataTable, jqxTreeGrid 컴

포넌트에 대해 사용 할수 있습니다. jqx에서 제공 기본 addrow 함수가 있지만

인앤함수를 통해 현재 선택행의 다음행으로 행을 추가 하고자 하는 경우 활

용하면 좋습니다.

II. 파라미터

key Row Key/ID - String - unique ID which identifies the row.

data Row Data - Object - Object with Key/Value pairs. To add an

empty row, pass {}.

position Row Position - String/Number - "last", "first" or row index. 기

본값은 현재선택행의 다음행

isTop isTop - boolean - treeGrid 에서만 유효하며, true 의 경우 최

상단 루트에 추가한다. option-기본값=false

keyField keyField - child information about the parent-child

relationships. option-기본값=null

parentField parentField - parent information about the parent-child

relationships. option-기본값=null

III. Return 새롭게 추가된 행의 RowId(행 인덱스와는 다른값이고 행마다 고유한 키가 되는

값)를 리턴합니다.

IV. Example

var datarow = {};

datarow.VALID_START_DATE = new Date(2013,5,1);

var editRowIdx = $("#grd_list").iinn("addRow", null, datarow);

4.3.2. deleteRow

I. 정의

현재 선택된 행을 삭제 하는 함수 입니다. jqxGrid, jqxScheduler, jqxDataTable,

jqxTreeGrid 컴포넌트에 대해 사용 할수 있습니다. jqx에서 제공 기본 deleterow

함수가 있지만 인앤함수를 통해 현재 선택행을 삭제 하고자 하는 경우 활용

하면 좋습니다. 또 jqxTreeGrid의 경우 하위 레벨행을 포함해서 삭제 할수 있습

니다.

II. 파라미터 includeChild

jqxTreeGrid에서 삭제행을 서버로 전달할 때 하위 행의 포함 여

부를 결정합니다.

option-기본값=true

III. Return 삭제된 행의 행수를 리턴 합니다.

IV. Example

$("#btn_delaRow").on("click", function (event) {

$("#myTreeGrid").iinn('deleteRow', false);

});


39 / 114

4.3.3. exportChart

I. 정의 jqxChart를 export 합니다. 지원 하는 형식은 jpg, png, pdf 입니다.

파일명 설정시에 확장자에 따라 형식을 결정합니다.

II. 파라미터 fileNm(*) jqxChart에서 export 할 파일이름을 설정합니다.

반드시 확장자가 있어야 합니다.

III. Return 삭제된 행의 행수를 리턴 합니다.

IV. Example

$("#btn_png").on("click", function (event) {

$("#myChart").iinn("exportChart", "myChartAsPng.png");

});

(*) 은 필수 입니다.

4.3.4. getModifyData

I. 정의 삽입, 수정, 삭제된 row(record)정보를 json 형태로 취득합니다.

ifn_tran() 함수를 사용해 서버로 변경정보를 전송할 때 사용하면 좋습니다.

II. 파라미터

isInsert true – insert 행 정보를 취득, false – insert 행 정보 미취득

isUpdate true – update 행 정보를 취득, false – update 행 정보 미취득

isDelete true – delete 행 정보를 취득, false – delete 행 정보 미취득

III. Return

json 형태의 수정된 데이터를 리턴합니다.

Ex)

{grd_list:

updList: {

COMPANY_NAME: "(주)남진",

LOCATION: "강원도",

ADDR: "강원 강릉시, …}

}

}

IV. Example

var p1 = $("#grd_list").iinn("getModifyData");

if(p1){

if(!confirm("저장 하시겠습니까?")){

return;

}

} else {

alert("저장할 데이터가 없습니다.");

return;

}

var param = {};

param.data = p1;

param.url = "/iinn/S1020M010/save_grd_list_list_inupdel.do";

param.callbackfunc = tranCallback;

param.callbackParams = {"sKind":"save"};

ifn_tran(param);


40 / 114

4.3.5. getAllData

I. 정의 화면상의 모든 row(record)정보를 json 형태로 취득합니다.

II. 파라미터 없음

III. Return json 형태의 모든 데이터를 리턴합니다.

IV. Example var p1 = $("#grd_list").iinn("getAllData");

4.3.6. chkRequired

I. 정의

grid(dataTable, treeGrid) 컬럼의 datafield 중 필수 체크가 필요한 경우 사용하는

함수 입니다.

서버로 변경정보를 보내기전에 필수 체크로 사용하면 좋습니다.

II. 파라미터

cols (*) grid(dataTable, treeGrid) 컬럼의 datafield 중 필수 체크 하고

자 하는 datafield를 배열 형태로 설정

colNms (*) 필수 체크 하고자 하는 datafield 에 해당하는 헤더 타이틀등

메세지에 표시할 문자열을 배열 형태로 설정

colorCss 필수 체크에서 발견된 셀의 글자 색깔 css class 이름 => 기

본값: cellYellow

bkColorCss 필수 체크에서 발견된 셀의 배경 색깔 css class 이름 => 기

본값: cellBkRed

insFlg insert 행에 대한 필수 체크 수행 가부 플래그 => 기본값

true(필수 체크 수행)

updFlg update 행에 대한 필수 체크 수행 가부 플래그 => 기본값

true(필수 체크 수행)

delFlg delete 행에 대한 필수 체크 수행 가부 플래그 => 기본값

false(필수 체크 수행 하지 않음)

norFlg

insert/update/delete 가 발생하지 않은행 즉 조회 상태에서

변경 없는 행에 대한 필수 체크 수행 가부 플래그 => 기본

값 false(필수 체크 수행 하지 않음)

III. Return [colNm, 행인덱스] 형태의 배열을 리턴합니다.

IV. Example

var cols = ["CODE_GRP", "CODE", "VALID_START_DATE"];

var colNms = ["코드그룹", "코드","시작일자"];

var rtnStr = $("#grd_list").iinn("chkRequired", cols, colNms, "cellYellow", "cellBkRed"); if(rtnStr.length > 0) {

setTimeout(function() {alert("그리드 셀 값을 확인해 주세요.\n" + "컬럼명,행번호\n" +

rtnStr);}, 200);

return; }



41 / 114

4.3.7. lockRow

I. 정의

grid에서 rowId에 해당하는 행에 대해 잠금(해제)설정을 수행 합니다.

☞ 본 함수 사용을 위해 이하의 설정이 필요합니다.

인앤 공통함수(ifn_lockRowReadyForGrid) 설정

datafields(IINN_LOCKED) 설정

columns(IINN_LOCKED) 설정

II. 파라미터 rowId(*) gird rowid를 설정합니다.

Kind(*) true : 잠금 설정 false : 잠금 해제

III. Return 없음

IV. Example

if(datafield == "IINN_DEL_CHECK") {

$("#grd_list").iinn("lockRow", rowId, true);

}


jqxGrid > behavior > ready

=> ifn_lockRowReadyForGrid

jqxGrid > dataAdapter > dataSource > datafields

IINN_LOCKED 필드 bool 형식으로 추가

jqxGrid > behavior > columns

IINN_LOCKED 필드 hidden 으로 추가


42 / 114

4.3.8. isLockRow

I. 정의 rowId에 해당하는 row(record)의 잠김 여부를 취득합니다.

II. 파라미터 rowId(*) gird rowid를 설정합니다.

III. Return true : 잠김 false : 해제

IV. Example var isLock = $("#grd_list").iinn("isLockRow", 3);


4.3.9. headerCheck

I. 정의 datafield에 해당하는 컬럼의 헤더 체크 여부를 설정합니다.

II. 파라미터 datafield(*) Datafield(컬럼)이름을 설정합니다.

kind(*) true : check false : uncheck

III. Return 없음

IV. Example var isLock = $("#grd_list").iinn("headerCheck ", “empName”, true);


4.3.10. exportExcel

I. 정의 조회된 그리드를 엑셀 파일로 출력 합니다.

II. 파라미터

fileNm 출력 파일명을 설정합니다.

title 엑셀 상단 중앙에 표시할 타이틀을 설정합니다.

searchCond 엑셀 상단 우측에 표시할 조회 조건을 설정합니다.

III. Return 없음

IV. Example

on("click", function (event) {

var searchCond = "회사명 : " + $("#COMPANY_NAME").val();

var param = {

fileNm: "grid",

title: document.title,

searchCond: searchCond

};

$("#grd_list").iinn("exportExcel", param);

}


43 / 114

4.3.11. mergeByRow

I. 정의 row 단위로 셀 값이 동일한 경우 셀 머지를 수행 합니다.

dataTable에서만 유효합니다.

II. 파라미터

rowStartIndex 시작하는 행 인덱스를 설정합니다. 기본값은 0 입니다..

colStartIndex 시작하는 열 인덱스를 설정 합니다. 기본값은 0 입니다.

colEndIndex 종료하는 열 인덱스를 설정 합니다. 기본값은 -1 입니다.

III. Return 없음

IV. Example

$("#tbl_list").on("bindingComplete", function (event) {

$("#tbl_list").iinn("mergeByRow");

});

4.3.12. mergeByCol

I. 정의 column 단위로 셀 값이 동일한 경우 셀 머지를 수행 합니다.

dataTable에서만 유효합니다.

II. 파라미터

rowStartIndex 시작하는 행 인덱스를 설정합니다. 기본값은 0 입니다..

colStartIndex 시작하는 열 인덱스를 설정 합니다. 기본값은 0 입니다.

colEndIndex 종료하는 열 인덱스를 설정 합니다. 기본값은 -1 입니다.

III. Return 없음

IV. Example

$("#tbl_list").on("bindingComplete", function (event) {

$("#tbl_list").iinn("mergeByCol");

});


44 / 114

4.4. ifn_setAddRowStatus

grid, dataTable, treeGrid의 행 추가에 대한 callback 함수 입니다.

dataSource > addrow에 ifn_setAddRowStatus 을 설정 합니다.

4.5. ifn_setDeleteRowStatus

grid, dataTable, treeGrid의 행 삭제에 대한 callback 함수 입니다.

dataSource > deleterow에 ifn_setDeleteRowStatus 을 설정 합니다.

4.6. ifn_setUpdateRowStatus

grid, dataTable, treeGrid의 행 수정에 대한 callback 함수 입니다.

dataSource > addrow에 ifn_setUpdateRowStatus 을 설정 합니다.


45 / 114

4.7. ifn_tran

I. 정의 AJAX(asynchronous HTTP) request를 서버로 보낼때 사용하는 함수 입니다.

II. 파라미터

url(*) 서버 url

data 서버에 전달할 data

async true(default) : 비동기 , false : 동기

type post(default) , get

dataType json(default) , xml, array, csv, tsv

callbackfunc 트랜잭션 처리가 정상 완료의 경우 호출 하는

callback 함수의 함수명

preloader true(default) : preloader 표시 , false : preloader

표시안함

preloaderString 조회중..(default)

callbackParams 트랜잭션 처리가 정상 완료의 경우 호출 하는

callback 함수를 호출시 전달할 파라메터

III. Return 없음

IV. Example

var tranCallback = function(param) {

var sKind = param.sKind;

var rMap = param.rmap;

switch (sKind) {

case "save" :

alert("저장이 완료 되었습니다.\n" + "insert 건수: " + rMap.insCnt + "\n"

+ "update 건수: " + rMap.updCnt + "\n" + "delete 건수: " + rMap.delCnt +

"\n");

break;

}

}

$("#saveBT").on("click", function (event) {

var p1 = $("#grd_list").iinn("getModifyData");

if(!p1){

alert("저장할 데이터가 없습니다.");

return;

}

var param = {};

param.data = p1;

param.url = "/iinn/S1020M010/save_grd_list_list_inupdel.do";

param.callbackfunc = tranCallback;

param.callbackParams = {"sKind":"save"};

ifn_tran(param);



46 / 114

4.8. ifn_grdHeadercheckboxRenderer , ifn_grdHeadercheckboxRendered

그리드 헤더에 전체 선택/해제 기능을 하는 체크박스를 렌더링 합니다. grid, dataTable,

treeGrid에서 활용 할수 있습니다.

ifn_grdHeadercheckboxRenderer 와 ifn_grdHeadercheckboxRendered는 실과 바늘 같은 존

재로 항상 함께 사용해야 합니다.

columns > renderer 에 ifn_grdHeadercheckboxRenderer를 설정하고 columns > rendered

에 ifn_grdHeadercheckboxRendered를 설정합니다.

☞ 참고로 헤더가 아닌 그리드 셀에대한 렌더링이 필요한 경우 cellsrenderer를 활용

상기 설정 후 브라우저 렌더링 예제 입니다.


47 / 114

5. jqxGrid 활용

5.1. dataSource

그리드에 설정할 dataField를 설정 합니다. 보통 sql select 항목과 동일 합니다.

☞ columns의 datafield 와 displayfield에는 datasource의 datafields 값만 설정 가능합니다.


48 / 114

5.2. headerGroup

columngroups를 활용해서 그룹정보를 설정합니다.

◆◆◆ tip ◆◆◆

Properties가 핑크의 경우 jqx의 초기값과 다름을 의미합니다.

columns를 활용해서 해당 컬럼의 그룹 name을 설정합니다.


부모그룹이 존재하면 부모그룹

의 name을 설정합니다.

columns, columngroups

상기 두개의 속성을 설정

하는 것으로 헤더그룹을

완성 합니다.


49 / 114

5.3. cellsrenderer

columns > cellsrenderer를 활용해서 해당 컬럼의 컬러, 표시형식등을 설정 합니다.

5.4. cellsformat

column type에 따라 표시 형식이 달라집니다.

Ⅰ. column type 이 number의 경우

"d" - decimal numbers.

"f" - floating-point numbers.

"n" - integer numbers.

"c" - currency numbers. Ex) "c3" => $25.256 (통화이고 소수이하3자리)

"p" - percentage numbers.

Ⅱ. column type 이 date의 경우 Ex) yyyy-MM-dd HH:mm:ss

"d" – 1~31 day of month. "H" – 0~23 hour. "s" – 0~59 second.

"dd" – 01~31 day of month. "HH" – 00~23 hour. "ss" – 00~59 second.

"ddd"– 단축 요일 Ex) 수 "m" – 0~59 minute. "y" – 0~99 year.

"ddd"– 요일 Ex) 수요일 "mm" – 00~59 minute. "yy" – 00~99 year.

"h" – 1~12 hour. "M" – 0~12 month. "yyyy" – 4자리 year.

"hh" – 01~12 hour. "MM" – 00~12 month.

본 함수는 각 행의 셀들을 표시하기 직전에 호출되는 callback 함수 입니다.

row : 행 인덱스를 의미합니다.

columnfield : 컬럼 name을 의미합니다.

value : 셀의 값을 의미합니다.

defaulthtml : 현재 설정된 html tag를 의미 합니다. Ex) <div>50</div>

columnproperties : 컬럼의 align, hidden, pinned 등의 속성정보를 갖습니다.

☞ background-color는 텍스트의 배경을

변경합니다. Ex) 5,000

포맷이 따로 없는 경우 값

설정이 불필요 합니다.


50 / 114

5.5. column type

주요 column type(checkbox, dropdownlist, combobox, datetimeinput)에 대한 IINN

STUDIO 설정 방법을 설명 합니다.

5.5.1. checkbox

dataSource > datafields의 type는 bool로 설정합니다.

columns > columntype은 checkbox로 설정합니다.

그리드 헤더의 전체선택 체크박스를 설정 하는 경우 renderer와 rendered를 설정 합니다.

헤더의 전체선택 체크박스가 불필요한 경우 renderer와 rendered 설정이 필요 없습니다.

☞ 『ifn_~』함수는 IINN STUDIO에서 제공하는 인앤 함수 입니다.

renderer rendered

『ifn_~』 인앤 함수를 적용한 그리드의 브라우저 렌터링 예제 입니다.

헤더의 전체선택 체크박스

가 불필요한 경우 좌기 설

정 만으로 체크박스 설정

이 완료 됩니다.


51 / 114

5.5.2. dropdownlist

dataSource > datafields > values의 source, value, name을 설정합니다.

columns의 columntype을 dropdownlist로 설정하고 createeditor를 설정 합니다.

상기 데이터로 조회시 브라우저 렌더링 예제 입니다.

etcList를 grid 생성전에 설정해 둡니다.

dataSource > datafields,

columns > columntype,

columns > createeditor

상기 속성을 설정하고 하기와

같이 데이터를 조회 합니다.


52 / 114

5.5.3. combobox

Ⅰ. Checkbox가 없는 경우.

columns의 columntype을 combobox로 설정하고 createeditor를 설정 합니다.

.

Ⅱ. Checkbox가 있는 경우.

columns의 columntype을 combobox로 설정하고 initeditor, createeditor, geteditorvalue를

설정 합니다.

상기/하기 각 함수의 내용은

다음장을 참조 해 주세요.


53 / 114


54 / 114

5.5.4. datetimeinput

dataSource > datafields > type을 date로 설정합니다.

columns의 columntype을 datetimeinput으로 설정하고 cellsformat을 설정 합니다.

5.6. internal page

server로부터 모든 데이터를 다 취득 했지만 화면에 표시만 페이징해서 보여준다.

pageable 을 true로 설정 하는것으로 완료 합니다.

문자열 형식의 값을 날짜 형식의

값으로 변환하는 역할을 합니다.

pagermode가 default일 때 브라

우저 렌더링 예제 입니다.

pagermode가 simple일 때 브라

우저 렌더링 예제 입니다.


55 / 114

5.7. server page

페이지가 변경될때마다 서버로부터 데이터를 수신한다.

① Data 조회시에 dataSource.totalrecords 에 전체 건수를 설정한다.

② pageable=true

③ virtualmode=true

④ rendergridrows

⑤ pagermode는 default 또는 simple을 선택합니다.

params.data가 서버로

전달 되고 #{pagenum }

#{pagesize} 포함.

Sql sample


56 / 114

5.8. localdata

datasource의 url 설정을 통해 그리드에 직접 data를 설정하는 방식이 아니고 datasource

의 localdata에 취득한 데이터를 설정하는 방식 입니다. 예를 들면 동시에 2개 이상의 그

리드 데이터 취득시 한번의 트랜잭션 발행으로 2개 이상의 그리드 데이터를 동시에 취득

할수 있습니다. (☞ url 방식으로 2개 이상의 그리드 데이터 취득시는 각각의 그리드 마다

트랜잭션을 순차적으로 발행 해야 합니다.)

아래와 샘플과 같은 수순으로 localdata 취득 처리를 수행 할수 있습니다.

① Screen Info의 userBeginScript에 화면 공통함수를 정의 합니다.

② 『조회』등의 버튼을 생성하고 객체(버튼)의 userBeginScript에 관련 함수를 정의 합니다.

③ 객체(버튼)의 click event를 정의 합니다.

인앤 공통함수


57 / 114

④ 아래와 같이 두개의 그리드를 생성 하고 id와 source를 설정 합니다.

⑤ 아래는 java controller source 입니다.

⑥ 아래는 mybatis select 구문 입니다.

id : grd_list1 id : grd_list2

source : ds_list1 source : ds_list2

좌기와 같이 service 이름

등을 수정 합니다.


58 / 114

5.9. grid editing

그리드의 추가/삭제/편집을 통해 서버로 변경된 데이터를 전달하고 database에 저장하는

일련의 과정을 설명 합니다.

5.9.1. basic editing

그리드의 기본적인 조회, 추가/삭제/수정 방법 입니다.

☞ 폼 속성정보 설정을 설명하고 아래의 원문자(번호) 순서로 각각의 컴포넌트 생성 방법

을 설명 합니다.

① ② ③

⑥ ⑤ ⑦ ④

⑧

① ② ③

⑥ ⑤ ⑦ ④

⑧

위와 같은 인앤 파일이 아래와 같이

브라우저에서 렌더링 된 결과 입니다.


59 / 114

※ 폼 속성정보 설정 입니다.

controller

ifn_tran 함수의 callback 함수를

정의해 둡니다.


60 / 114

① 페이지 네비게이션

span tag를 생성하고 공통함수(gfn_setNavi)를 통해 text로 변환 합니다.

② 조회 버튼

버튼 컴포넌트를 생성하고 함수(fn_search)를 정의 합니다.

버튼 Events에 click event를 아래와 같은 내용으로 추가 합니다.


61 / 114

③ 저장 버튼

버튼 컴포넌트를 생성하고 버튼 Events에 click event를 아래와 같은 내용으로 추가 합

니다.

☞ 참고로 아래 소스는 인앤 스튜디오에 의해 자동 생성된 그대로의 상태 입니다.

service implement

폼 속성정보 설정의 userBeginScript

에서 설정한 tranCallback 함수를 호

출합니다.


62 / 114

④ serch box

조회 조건 관련 컴포넌트를 배치하는 영역 입니다. 불필요한 경우 생성하지 않습니다.

⑤ 행 삭제 버튼

버튼 컴포넌트를 생성하고 버튼 Events에 click event를 아래와 같은 내용으로 추가 합니다.

⑥ 행 추가 버튼


⑦ 엑셀 다운 버튼



63 / 114

⑧ 그리드

그리드 컴포넌트를 생성하고 userBeginScript의 필요여부에 따라 userBeginScript를 설

정합니다.

dataAdapter > dataSource > datafields를 설정합니다.

userBeginScript 는

컴포넌트 생성전에

수행하는 javascript

영역 입니다.

combobox 편집을 위해

values를 설정합니다.

앞 페이지 ‘폼 속성정보 설정’

에 정의된 전역번수를 사용

한다.


64 / 114

dataAdapter > dataSource > addrow에 ifn_setAddRowStatus 를 설정합니다.

dataAdapter > dataSource > deleterow에 ifn_setDeleteRowStatus 를 설정합니다.

dataAdapter > dataSource > updaterow에 ifn_setUpdateRowStatus 를 설정합니다.

☞ ifn_~ 함수는 인앤소프트에서 제공하는 인앤함수 입니다.

behavior > columns를 설정합니다.

비고의 createeditor의

설정 내용 입니다.


65 / 114

behavior > columns > cellsrenderer의 컬럼별 설정은 아래와 같습니다.

behavior > columns > cellsrenderer > 번호의 설정 내용은 아래와 같습니다.

behavior > columns > cellsrenderer > 자본금의 설정 내용은 아래와 같습니다.

behavior > columns > cellsrenderer > 실명번호의 설정 내용은 아래와 같습니다.

behavior > columns > cellsrenderer > 휴대폰번호의 설정 내용은 아래와 같습니다.


66 / 114

behavior의 주요 설정 사항은 아래와 같습니다.

editable : true 를 통해 그리드의 편집 여부를 결정합니다.

editmode : click, dblclick등 편집모드를 설정합니다.

source : dataAdapter 정보를 설정해 두는 변수 입니다.

var ds_list = new $.jqx.dataAdapter(grd_list_dataSource, common_dataSettings);

☞ 참고로 서버에서 데이터를 취득한 source 의 설정 내용은 아래와 같습니다.

……

인앤 스튜디오를 통해

생성된 jsp 형태


67 / 114

6. jqxDataTable 활용

6.1. column type

주요 column type(checkbox, dropdownlist, combobox, datetimeinput)에 대한 IINN

STUDIO 설정 방법을 설명 합니다.

6.1.1. checkbox

dataSource > datafields의 type는 bool로 설정합니다.

columns > cellRenderer의 script와 columns > columnType은 template로 설정합니다.

헤더의 전체선택 체크박스가 불필요한 경우 상기의 datafield 설정과 columns>cellRenderer ,

columns > columnType 설정으로 체크박스 설정이 완료 됩니다.

☞ 참고로 gfn_cellsRendererCheckbox함수는 IINN STUDIO에서 제공하는 인앤 함수 입니다


68 / 114

데이터테이블 헤더의 전체선택 체크박스를 설정 하는 경우 renderer와 rendered를 설정

합니다. 단, 헤더의 전체선택 체크박스가 불필요한 경우 renderer와 rendered 설정이 필요

없습니다.

☞ 『ifn_~』함수는 IINN STUDIO에서 제공하는 인앤 함수 입니다.

renderer rendered

『ifn_~』 인앤 함수를 적용한 그리드의 브라우저 렌터링 예제 입니다.


69 / 114

6.1.2. dropdownlist

dataSource > datafields > values의 source, value, name을 설정합니다.

etcList를 dataTable생성전에 설정해 둡니다.


70 / 114

columns의 columntype을 template로 설정하고 initEditor, createEditor, getEditorValue를

설정 합니다.

속성 Script 내용

initEditor gfn_customDropdownlistInit

createEditor function (row, cellValue, editor, cellText, width, height) {

var opt = {source: etcList}

gfn_customDropdownlistCreate(row, cellValue, editor,

cellText, width, height, opt);

}

getEditorValue gfn_customDropdownlistGetValue


dataSource > datafields,

columns > columntype,

columns > initEditor,

columns > createEditor,

columns > getEditorValue

위와 같이 속성을 설정하고 하

기와 같이 데이터를 조회 합니

다.


71 / 114

6.1.3. datetimeinput

dataSource > datafields > type을 date로 설정합니다.

columns의 columntype을 template로 설정하고 initEditor, createEditor, getEditorValue를

설정 합니다. 또 cellsFormat을 설정합니다.


initEditor gfn_customDateTimeInputInit

createEditor gfn_customDateTimeInputCreate

getEditorValue gfn_customDateTimeInputGetValue


문자열 형식의 값을 날짜 형식의

값으로 변환하는 역할을 합니다.

더블클릭에 의한 편집모드.

로 진입했을 때 입니다.


72 / 114

6.2. server page

페이지가 변경될때마다 서버로부터 데이터를 수신한다.

① Data 조회시에 dataSource.totalrecords 에 전체 건수를 설정한다.

② pageable=true

③ serverProcessing=true

④ pagermode는 default 또는 simple을 선택합니다.

Sql sample


73 / 114

6.3. merge cells

셀에 동일한 값이 설정 되어있는 경우 셀을 병합해서 표시한다.


bindingComplete $("#tbl_list").iinn("mergeByRow"); //행 병합

$("#tbl_list").iinn("mergeByCol"); //열 병합 columnResized

상기 설정으로 조회시 브라우저 렌더링 예제 입니다.

머지 기능은 인앤 함수를 통해 구현

되는 기능이고 jqxDataTable에서만

유효하다.

iinn 함수에 대한 자세한 설명은

4.3.11, 4.3.12를 참조


74 / 114

6.4. dataTable edit

기본적으로 grid와 흡사합니다. 단, combobox, dropdownlist, dateTimeInput에 대해서는 서

버로 전달하는 변수를 별도 설정해야 합니다. 왜나하면 combobox, dropdownlist는 화면에

label을 표시 하고 서버로 전달시 value를 전달해야 하기 때문이고 dateTimeInput의 경우

date format이 아닌 문자열로 변환된 값을 전달하기 위함 입니다. (참고로 grid에서는 자

동 설정되므로 변수를 별도 설정할 필요가 없습니다.)

dataSource를 아래와 같이 설정합니다.

columns를 아래와 같이 설정합니다.


75 / 114

☞ 『IINN_~STR』, 『IINN_~STR2』, 『IINN_~VAL』의 규칙으로 설정해야 합니다.

물론 YYYYMMDDhhmmss 형식이 불필요한 경우 IINN_~_STR2는 설정할 필요 없음.

또 combobox, dropdownlist가 label 없이 value자체가 label로 사용되는 경우 IINN_~_VAL

는 설정할 필요 없음.

종류 사용자 정의 변수 서버전달용변수 서버 전달 형식

date

VALID_START_DATE IINN_VALID_START_DATE_STR YYYYMMDD

IINN_VALID_START_DATE_STR2 YYYYMMDDhhmmss

VALID_END_DATE IINN_VALID_END_DATE_STR YYYYMMDD

IINN_VALID_END_DATE_STR2 YYYYMMDDhhmmss

combobox ETC IINN_ETC_VAL 설정 value


76 / 114

6.5. localdata

datasource의 url 설정을 통해 그리드에 직접 data를 설정하는 방식이 아니고 datasource

의 localdata에 취득한 데이터를 설정하는 방식 입니다. 예를 들면 동시에 2개 이상의

dataTable 데이터 취득시 한번의 트랜잭션 발행으로 2개 이상의 dataTable 데이터를 동시

에 취득 할수 있습니다. (☞ url 방식으로 2개 이상의 dataTable 데이터 취득시는 각각의

dataTable 마다 트랜잭션을 순차적으로 발행 해야 합니다.)

아래와 샘플과 같은 수순으로 localdata 취득 처리를 수행 할수 있습니다.

① Screen Info의 userBeginScript에 화면 공통함수를 정의 합니다.

② 『조회』등의 버튼을 생성하고 객체(버튼)의 userBeginScript에 관련 함수를 정의 합니다.

③ 객체(버튼)의 click event를 정의 합니다.


77 / 114

④ 아래와 같이 두개의 dataTable를 생성 하고 id와 source를 설정 합니다.

⑤ 아래는 java controller source 입니다.

id : tbl_list1 id : tbl_list2

source : ds_list1 source : ds_list2

좌기와 같이 service 이름

등을 수정 합니다.


78 / 114

7. jqxChart 활용

7.1. Line Series

아래와 같은 수순으로 Line Series chart를 완성 합니다.

① dataSource > datafields 설정(x축과 데이터)

② seriesGroups > series 설정(데이터 관련정보 설정)

③ valueAxis (Y축 설정)

④ xAxis (X축 설정)

X축 데이터 이름

차트 데이터 이름(본 샘플은 데이터가 두개)

X축

DATA2

DATA1

SELECT '1月' AS "DATE",DBMS_RANDOM.VALUE(1000, 10000) AS DATA1,DBMS_RANDOM.VALUE(1000, 10000) AS

DATA2 FROM DUAL UNION ALL

SELECT '2月' AS "DATE",DBMS_RANDOM.VALUE(1000, 10000) AS DATA1,DBMS_RANDOM.VALUE(1000, 10000) AS

DATA2 FROM DUAL UNION ALL

……

SELECT '12월' AS "DATE",DBMS_RANDOM.VALUE(1000, 10000) AS DATA1,DBMS_RANDOM.VALUE(1000, 10000) AS

DATA2 FROM DUAL

seriesGroups>series>label

s

square circle

property>title

property>description


79 / 114

data 설정

Y축 설정

X축 설정

X축 레이블 기울기


80 / 114

7.2. Chart color function

특정 조건에 만족하는 경우만 차트 표시 컬러를 변경 할수 있습니다.


81 / 114

7.3. Crosshairs enable

마우스가 데이터 포인트 위로 이동 하면 표시되는 십자 기호 점선의 화면 표시 여부를 결

정합니다.

chart>Properties>crosshairsDashStyle

☞ 십자 기호 점선 스타일을 설정합니다. [줄길이, 공백길이]

chart>Properties>crosshairsLineWidth

☞ 십자 기호 점선 너비를 설정합니다.

chart>Properties>crosshairsColor

☞ 십자 기호 점선의 컬러를 설정합니다.

chart>Properties>enableCrosshairs

☞ 십자 기호 점선의 화면 표시 여부를 설정합니다.


82 / 114

7.4. Area Series

area chart이고 더 큰값을 먼저 그리고 상대적으로 작은 값을 나중에 표시합니다.

seriesGroups > series > dataField 에 data 필드명을 설정합니다.


83 / 114

7.5. Line and Area Series

Line 과 Area을 동시에 표현 합니다.

다음페이지

Y축 타이틀 설정


84 / 114

7.6. Column and Line Series

Y축 타이틀 설정

seriesGroups>valueAxis>position : right


85 / 114

7.7. Stacked Column Series

복수개의 항목의 구성을 표현 하는 누적바 차트 입니다.


86 / 114

7.8. 100% Stacked Column Series

100%형 누적바 차트로 Y축 레이블을 비율로 표시합니다.


87 / 114

7.9. ColorFunction

seriesGroups > series > colorFunction 을 이용해서 음수등 조건에 따른 그래프 색상을 설

정 합니다.


88 / 114

7.10. Column Range Series

컬럼 타입 으로 MIN - MAX 를 표시하고 라인타입으로 평균값을 표시 합니다.


89 / 114

7.11. 가로바 형식

바 형식을 가로 형태로 표현 합니다.

valueAxis > flip 을 통해 좌에서 우로(true) 또는 우에서 좌로(false)표시 합니다.

seriesGroups > orientation을 통해 가로/세로을 결정 합니다. 기본은 vertical(세로)


90 / 114

7.12. Pie Series

기본 파이 차트 설정 입니다.

레이블 설정시 formatSettings를 활용 합니다.


91 / 114

7.13. Pie Series with Legend

범례가 표시되는 기본 파이 차트 입니다.

레이블 설정시 formatFunction을 활용 합니다.


92 / 114

7.14. Partial Pie Series

파이 차트 부분으로 차트를 표현합니다.


93 / 114

7.15. Donut Series

도넛 차트를 표현 합니다. radius(반지름) 크기를 설정해서 2중 표현이 가능합니다.


94 / 114

7.16. Candle and zoom Series

Candle 차트를 표현하고 차트 하단에 rangeSelector를 통해 줌(zoom) 표현이 가능합니다.


95 / 114

7.17. Line and zoom Series

line차트를 표현하고 차트 하단에 rangeSelector를 통해 줌(zoom) 표현이 가능합니다.


96 / 114

7.18. Spider Series

스파이더 차트를 표현하고 차트속성을 사용자가 변경 가능하도록 옵션을 표현 합니다.


97 / 114

7.19. Sample Spider Series

또다른 형식의 스파이더 차트를 표현 합니다.


98 / 114

7.20. Color band

Bands 설정을 통해 밴드(컬러, 라인사이즈등)를 설정 합니다.

seriesGroup>xAxis 를 통해 x 축 값 밴드 설정 seriesGroup>valueAxis 를 통해 y 축 값 밴드 설정


99 / 114

7.21. Chart annotations

차트상에 주석 설정을 통해 경고선등을 표현 합니다.


100 / 114

8. jqxTabs 활용

8.1. tabs 생성

아래와 같은 수순으로 tabs 컴포넌트를 완성 합니다.

① tabs 컴포넌트를 상단 메뉴를 통해 생성 합니다.

② tabs 컴포넌트가 선택된 상태에서 좌상단의 선택이미지 위에서 우클릭을 통해 컨텍스

트 메뉴를 표시 합니다.

③ 탭속성을 클릭해서 탭 서식 팝업을 오픈 합니다.

④ 탭 항목명을 클릭해서 항목 이름을 변경 하거나 버튼 기능을 활용해 탭 항목 추가/삭

제, 탭 위치를 설정 합니다.

tabs 컴포넌트에 다른 컴포넌트를 추가 하기 위해 탭 항목별 컨텐츠 영역을 <div>태그

로 선언합니다.

<div></div>

tabs 헤더

tabs 컨텐츠


101 / 114

각 탭 항목별 컨텐츠 초기화를 수행합니다. 탭 항목이 최초로 활성될때만 수행합니다.

각 탭 항목별 컨텐츠 초기화 함수명 생성 규칙은 아래와 같습니다.

tabs 컴포넌트 ID + ‘_init’ + tab item index

◆◆◆ tip ◆◆◆

tabs 컴포넌트의 컨텐츠는 탭 항목별

함수 형태로 묶여서 생성되고 탭항목

이 최초 활성시 수행되어 초기화 되어

야 합니다. 즉 initTabContent 함수에

서 각 탭 인덱스 별로 초기화 함수를

호출 해야 합니다.

인앤 스튜디오에 의해 생성된 소스


102 / 114

8.2. tabs 헤더

tabs 헤더 좌측 여백 설정

tabs 생성후 기본 형태는 아래와 같고 속성 설정을 통해 다양한 형태로 표현 할 수

있습니다.

<div id="wizardTab" jqx_comp-nm="C_tabs">

<ul style="margin-left: 20px;">

<li>Step 1</li>

<li>Step 2</li>

<li>Step 3</li>

</ul>

<div id="tab2div1" jqx_comp-nm="div">

</div>


</div>


</div>

</div>

☞ tabItem > itemHtml 설정을 통해<li></li>의

컨텐츠를 설정 합니다.

☞ tabItem > itemAttr 설정을 통해<li>의 속성

을 설정 합니다.

style="margin-left: 20px;"


103 / 114

tabs 헤더 컨텐츠 사용자 설정(이미지등 표현)

① tabItem > itemHtml은 탭 항목명을 html 로 표현합니다.

② tabItem > itemAttr은 탭 항목의 속성을 설정합니다.

◆◆◆ tip ◆◆◆

canselect : 해당 탭 항목은 선택

여부를 true/false로 설정 합니

다.

hasclosebutton : 해당 탭 항목

의 닫기버튼의 표시 여부를 설정

합니다.


104 / 114

8.3. tabs 컨텐츠

tab 컨텐츠에 iframe 을 통한 url 활용

tab 컨텐츠에 다른 컴포넌트들의 활용


105 / 114

9. jqxTree 활용

9.1. tree 생성

아래와 같은 수순으로 tree 컴포넌트를 완성 합니다.

① tree 컴포넌트를 상단 메뉴를 통해 생성 합니다.

② userBeginScript를 활용해서 server로부터 data를 취득 합니다.

③ 취득한 데이터를 계층(hierarchy) 형태로 변경합니다.

☞ var records = adapter.getRecordsHierarchy('ID', 'PARENTID', 'items', [{ name: "label", map: "label"}]);

④ 계층(hierarchy) 형태의 데이터를 tree의 소스에 설정 합니다.


106 / 114

9.2. tree 확장(expand)/축소(collapse)

확장 축소 기본 이미지를 변경 할수 있습니다.

☞ jqxTree 제공 기본 이미지 ☞ 사용자 변경 이미지


107 / 114

확장 축소 이벤트 발생시 이미지등을 변경 할수 있습니다.

9.3. tree with checkbox

properties > checkboxes에 true 설정을 통해 체크박스를 갖는 트리를 생성할수 있습니다.


108 / 114

9.4. tree with context menu

mousedown 이벤트를 활용해서 우클릭 메뉴를 활용할수 있습니다.

① menu 컴포넌트를 상단 메뉴를 통해 생성 합니다.

② C_menu > Event > itemclick 이벤트를 설정합니다.

Menu 컴포넌트

Tree 컴포넌트


109 / 114

③ C_tree > Event > mousedown 이벤트를 설정합니다.



110 / 114

9.5. Load on Demand with Ajax

트리 항목이 펼쳐질때 서버로 부터 받은 json 형태의 트리 항목을 동적으로 트리에 추가

할수 있습니다.

Event > expand 를 아래와 같이 설정 합니다.


111 / 114

9.6. Drop down tree

드롭다운 버튼 클릭을 통해 펼쳐지는 형태의 트리를 표현 할수 있습니다.

① 상단 메뉴의 DrpDn > dropdownbutton 컴포넌트를 상단 메뉴를 통해 생성 합니다.

② C_dropdownbutton > script > userEndScript에 초기값을 설정합니다.

③ C_dropdownbutton > properties > initContent 에 초기화 함수명을 설정합니다.

☞ C_dropdownbutton 의 컨텐츠 초기화 함수명 생성 규칙은 아래와 같습니다.

드롭다운버튼 컴포넌트 ID + ‘_init’

④ C_tree > Event > select 에 아래와 같은 설정을 통해 트리 항목 선택 시 드롭다운버튼

의 컨텐츠를 설정 합니다.


112 / 114

10. jqxEditor 활용

10.1. editor 생성

상단 메뉴를 통해 editor 컴포넌트를 생성 하는 것으로 기본기능을 갖는 에디터 생성이

가능합니다.

에디터 생성 후 브라우저 렌더링 예제 입니다.

10.2. inline editor

포커스를 갖기 전 까지 툴바 없이 textArea와 같은 형식에서 포커스를 얻으면 레이어 툴

바가 나타나는 에디터를 생성 할수 있습니다.

에디터 생성 후 브라우저 렌더링 예제 입니다.


114 / 114

jqxEditor 에서 제공하지 않는 기능을 새롭게 추가 하는 경우

① properties > tools를 통해 커맨드 레이블을 정의 합니다.

② properties > createCommand를 통해 커맨드를 정의 합니다.

브라우저 렌더링 예제 입니다

manual for developer

Documents