이번에는 JSON 값을 RESPONSE 해주기 관련 포스팅을 진행해보도록 하겠습니다.

Spring을 제외한 다른 포스팅에 보통 json-simple 라이브러리를 이용하여 

json 구현을 했었습니다.

그러나 Spring3 에서 jackson 라이브러리와 Responsebody 어노테이션을 같이 사용하니 

엄청나게 심플하게 구현이 되는군요.

보통 JSON 객체를 생성하는 방식은 클라이언트에 JSON API 를 제공할때 주로 사용됩니다.

2가지 방식을 예로 들수 있겠는대요

Map 형식으로 response 해주는 방식과

 vo객체에 담아서 object형식으로 response해주는 

2가지 방식을 들 수 있겠습니다.

각각의 예제에 들어가기전 jackson 라이브러리 사용을 위한 설정을 해주도록 합니다.

다음 dependency 코드를 pom.xml에 추가해줍니다.

<dependency>
	<groupId>org.codehaus.jackson</groupId>
	<artifactId>jackson-mapper-asl</artifactId>
	<version>1.9.13</version>
</dependency>

이어서 mvc-config.xml 설정파일에 하단 태그를 추가해주도록 합니다.

<bean id="jacksonMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" />

위 2가지 코드를 각각의 파일에 삽입을 해주셨다면

 Jackson 라이브러리와 @ResponseBody 어노테이션을 이용하여 

간단하게 JSON API를 제작해보도록 하겠습니다.

1. Map을 이용하여 JSON API 생성하기

/**
 * Map방식을 이용한 JSON API 컨트롤러
 * @return
 */
@RequestMapping(value="/getJsonByMap")
public @ResponseBody Map<String , Object> getJsonByMap() {
	Map<String, Object> jsonObject = new HashMap<String, Object>();
	Map<String, Object> jsonSubObject = null;
	ArrayList<Map<String, Object>> jsonList = new ArrayList<Map<String, Object>>();
		
	//1번째 데이터
	jsonSubObject = new HashMap<String, Object>();
	jsonSubObject.put("idx", 1);
	jsonSubObject.put("title", "제목입니다");
	jsonSubObject.put("create_date", new Date());
	jsonList.add(jsonSubObject);
	//2번째 데이터
	jsonSubObject = new HashMap<String, Object>();
	jsonSubObject.put("idx", 2);
	jsonSubObject.put("title", "두번째제목입니다");
	jsonSubObject.put("create_date", new Date());
	jsonList.add(jsonSubObject);
		
	jsonObject.put("success", true);
	jsonObject.put("total_count", 10);
	jsonObject.put("result_list", jsonList);
		
	return jsonObject; 
}

최상단 루트 Map 객체에  다양한 종류의 map 객체들 및 list 객체들을 put 해주었습니다.

적용 후 실행을 해보도록 하겠습니다.

Map JSON API 응답결과

정상적으로 JSON 규격에 맞춰져서 API 데이터가 출력되었습니다.

2. VO을 이용하여 JSON API 생성하기

이번에는 보통 말하는 VO 객체를 사용하여 

JSON 객체를 클라이언트 페이지로 

RESPONSE 해주도록 해보겠습니다.

vo 패키지에 다음과 같은 2개의 vo 클래스를 생성합니다.

VO 클래스에 들어가는 코드를 다음과 같이 작성해주세요

ListVo.java

public class ListVo {
	private int idx;
	private String title;
	private String create_date;
	public int getIdx() {
		return idx;
	}
	public void setIdx(int idx) {
		this.idx = idx;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getCreate_date() {
		return create_date;
	}
	public void setCreate_date(String create_date) {
		this.create_date = create_date;
	}
}

ObjectVo.java

public class ObjectVo {
	private boolean success;
	private ArrayList<ListVo> list;
	private int total_count;
	public boolean isSuccess() {
		return success;
	}
	public void setSuccess(boolean success) {
		this.success = success;
	}
	public ArrayList<ListVo> getList() {
		return list;
	}
	public void setList(ArrayList<ListVo> list) {
		this.list = list;
	}
	public int getTotal_count() {
		return total_count;
	}
	public void setTotal_count(int total_count) {
		this.total_count = total_count;
	}
}

구조는 기존 Map 방식의 JSON 구조와 동일한 형식입니다.

마지막으로 Controller 부분 코드입니다.

/**
 * VO방식을 이용한 JSON API 컨트롤러
 * @return
 */
@RequestMapping(value="/getJsonByVO")
public @ResponseBody ObjectVo getJsonByVO() {
	Calendar cal = Calendar.getInstance( );
	ArrayList<ListVo> list = new ArrayList<ListVo>();
	ListVo vo = null;
	ObjectVo objectVO = new ObjectVo();
	//1번째 데이터
	vo = new ListVo();
	vo.setIdx(1);
	vo.setTitle("VO방식의 제목입니다");
	vo.setCreate_date(cal.get(Calendar.YEAR)+"-"+(cal.get(Calendar.MONTH) + 1)+"-"+cal.get(Calendar.DAY_OF_MONTH));
	list.add(vo);
	//2번째 데이터
	vo = new ListVo();
	vo.setIdx(1);
	vo.setTitle("VO방식의 제목입니다2");
	vo.setCreate_date(cal.get(Calendar.YEAR)+"-"+(cal.get(Calendar.MONTH) + 1)+"-"+cal.get(Calendar.DAY_OF_MONTH));
	list.add(vo);
		
	objectVO.setList(list);
	objectVO.setSuccess(true);
	objectVO.setTotal_count(10);
	return objectVO; 
}

위 코드 역시 임의의 데이터를 담아서 RESPONSE 결과를 

확인하기 위하여 SET을 해준것입니다.

만약 ibatis 혹은 mybatis를 사용하시게 된다면 

해당 SET 코드를 하실 필요는 없겠죠?

실행을 해보도록 하겠습니다.

VO 결과 역시 정상적으로 JSON 결과값을 출력하였습니다.

Spring3 을 이용하여 JSON API 작업을 할때 사용하시면 좋을 거 같습니다.

by 개발로짜

이번포스팅은 jqGrid를 다운로드하여 연동 및 그리드 목록에 

데이터 출력시키는 방법에 대하여 알아보고자 합니다.

jqGrid의 경우 jQueryUI의 테마를 사용하기 때문에

 jQueryUI를 다운 및 연동을 우선적으로 연동한 후에

jqGrid 다운을 받도록 합니다.

2014/11/04 - [웹개발강좌/jQueryUI] - jQueryUI 1장 - 테마선택하여 다운로드 후 간단하게 버튼태그에 UI 적용하기

jQueryUI에 대한 연동이 완료되었다면 

jqGrid 플러그인을 다운로드 받도록 합니다.

http://www.trirand.com/blog/?page_id=6

URL 접속 후 Download버튼을 클릭하여 jqGrid 압축파일을 다운받습니다.

스크롤을 내리면 하단과 같은 버튼이 존재 할 겁니다.

다운로드 파일을 압축 해제 후 존재하는 css/js/plugins/src 디렉토리를 

자신의 웹프로젝트에 "jqgrid" 디렉토리 생성 후 복사+붙여넣기를 합니다.

위에 파란줄친게 jqueryui관련 플러그인 include파일이고

 빨간줄을 jqgrid 관련 플러그인 include파일입니다.

index.html 이란 파일을 생성 후 연동을 해보도록 하겠습니다.

jqGrid 연동을 위한 include 코드

<link rel="stylesheet" type="text/css" media="screen" href="/jqueryui/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/jqgrid/css/ui.jqgrid.css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/jqueryui/jquery-ui.js"></script>
<script src="/jqgrid/js/jquery.jqGrid.src.js"></script>

경로는 다를 수 있으니 자신의 경로에 맞춰서 include 해주세요

include를 해주셨다면 body 태그 사이에 그리드 출력을 위한 태그를 삽입해주세요

<table id="list"></table>

※ jqGrid를 이용하여 그리드 목록 출력시, table 태그를 이용해주어야 합니다.

로컬데이터를 그리드에 출력을 위한 스크립트코드

$(function(){
		//가상의 local json data
		var gridData = [{seq:"1",create_date:"2007-10-01",create_name:"test",title:"note",hitnum:"11"},
		      		  {seq:"2",create_date:"2007-10-02",create_name:"test2",title:"note2",hitnum:"22"}];
		
		//jqGrid껍데기 생성
		$("#list").jqGrid({
			//로컬그리드이용
			datatype: "local",
			//그리드 높이
			height: 250,
			//컬럼명들
		   	colNames:['시퀀스','제목', '등록일', '등록자명','조회수'],
		   	//컬럼모델
		   	colModel:[
		   		{name:'seq'},
		   		{name:'title'},
		   		{name:'create_date'},
		   		{name:'create_name'},
		   		{name:'hitnum'}		
		   	],
		   	//그리드타이틀
		   	caption: "그리드 목록"
		});
		
		// 스크립트 변수에 담겨있는 json데이터의 길이만큼 
		for(var i=0;i<=gridData.length;i++){
				//jqgrid의 addRowData를 이용하여 각각의 row에 gridData변수의 데이터를 add한다
				$("#list").jqGrid('addRowData',i+1,gridData[i]);
		}
})

위 처럼 정상적으로 그리드내에 데이터가 출력된 것을 확인할 수 있습니다.

이어서 서버통신으로 그리드 데이터 호출을 해보도록 하겠습니다.

json 파싱하는부분은 저는 json-simple 라이브러리를 이용하여 예를 들도록 하겠습니다.

2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기

기존 코드는 동일하고 스크립트 코드를 변경해보도록 하겠습니다.

Ajax 통신으로 그리드 데이터출력관련 스크립트

$(function(){
	$("#list").jqGrid({  
		//ajax 호출할 페이지
		url:'/result.jsp',
		//로딩중일때 출력시킬 로딩내용
		loadtext : '로딩중..',
		//응답값
		datatype: "json",
		height: 250,
	   	colNames:['시퀀스','제목', '등록일', '등록자명','조회수'],
	   	colModel:[
	   		{name:'seq'},
	   		{name:'title'},
	   		{name:'create_date'},
	   		{name:'create_name'},
	   		{name:'hitnum'}		
	   	],
	   	caption: "그리드 목록"
	});
})

일괄적으로 페이징 처리 없이 서버에서 

응답받은 데이터를 한꺼번에 출력시키는 방식입니다.

호출하는방식이 $.ajax와 흡사합니다.

그럼 jqGrid 속성중 url에 정의한 jsp페이지에서 json 파싱작업을 하도록 하겠습니다.

result.jsp 서버페이지 코드

	JSONObject jsonObj = new JSONObject();
	JSONObject jsonObj2 = null;
	JSONArray jsonArray = new JSONArray();
	
	//1번째 데이터
	jsonObj2 = new JSONObject();
	jsonObj2.put("seq", "1");
	jsonObj2.put("title", "제목");
	jsonObj2.put("create_date", "2014-11-11");
	jsonObj2.put("create_name", "개발로짜");
	jsonObj2.put("hitnum", "1");
	jsonArray.add(jsonObj2);
	
	//2번째 데이터
	jsonObj2 = new JSONObject();
	jsonObj2.put("seq", "2");
	jsonObj2.put("title", "제목222");
	jsonObj2.put("create_date", "2014-11-11");
	jsonObj2.put("create_name", "개발로짜2323");
	jsonObj2.put("hitnum", "10");
	jsonArray.add(jsonObj2);
	
	PrintWriter pw = response.getWriter();
	pw.print(jsonArray);
	pw.flush();
	pw.close();

 json array 객체를 클라이언트 페이지로 넘겨 주었습니다.

맨처음 진행한 local 타입에 사용했던 json 변수와 동일한 구조로 넘겨준것 뿐입니다.

즉, gridData 변수의 담겨있던 json 데이터를 result.jsp 페이지로 이동(?) 된 것 뿐입니다.

추가로 그리드 페이징에 대하여 진행하겠습니다.

페이징UI 적용을 위한 DIV 태그를 추가하도록 합니다.

<div id="page"></div>

다음으로 스크립트 코드를 작성해보았습니다.

$(function(){
	 $("#list").jqGrid({  
		url:'/result.jsp',
		datatype: "json",
                loadtext : '로딩중..',
		height : 250,
		//한페이지에 출력할 데이터 갯수
		rowNum : 2,
		//페이징UI적용을 위한 속성
		pager: '#page',
	   	colNames:['시퀀스','제목', '등록일', '등록자명','조회수'],
	   	colModel:[
	   		{name:'seq'},
	   		{name:'title'},
	   		{name:'create_date'},
	   		{name:'create_name'},
	   		{name:'hitnum'}		
	   	],
	   	caption: "그리드 목록"
	});
})

기존 ajax 코드에서 2가지(rowNum,pager) 속성이 추가되었습니다.

rowNum : 한페이지당 몇개의 데이터를 출력할지

pager : 페이징UI 적용할 셀렉터

이어서 result.jsp 서버 코드를 변경해보도록 하겠습니다.

페이징처리 예를들기위한 result.jsp 샘플코드

//현재페이지
String current_page = request.getParameter("page");
//한페이지에 최대 몇개의 row 출력(mysql의 limit에 속하는데이터)
String numper_page = request.getParameter("rows");
JSONObject jsonObj = new JSONObject();
JSONObject jsonObj2 = null;
JSONArray jsonArray = new JSONArray();
	
if(current_page.equals("1")) {
	jsonObj2 = new JSONObject();
	jsonObj2.put("seq", "1");
	jsonObj2.put("title", "제목");
	jsonObj2.put("create_date", "2014-11-11");
	jsonObj2.put("create_name", "개발로짜");
	jsonObj2.put("hitnum", "1");
	jsonArray.add(jsonObj2);
	
	jsonObj2 = new JSONObject();
	jsonObj2.put("seq", "2");
	jsonObj2.put("title", "제목2");
	jsonObj2.put("create_date", "2014-11-15");
	jsonObj2.put("create_name", "개발로짜");
	jsonObj2.put("hitnum", "20");
	jsonArray.add(jsonObj2);
} else if(current_page.equals("2")) {
	jsonObj2 = new JSONObject();
	jsonObj2.put("seq", "3");
	jsonObj2.put("title", "제목33");
	jsonObj2.put("create_date", "2014-11-11");
	jsonObj2.put("create_name", "개발로짜33");
	jsonObj2.put("hitnum", "8");
	jsonArray.add(jsonObj2);
	
	jsonObj2 = new JSONObject();
	jsonObj2.put("seq", "4");
	jsonObj2.put("title", "제목4444");
	jsonObj2.put("create_date", "2014-11-15");
	jsonObj2.put("create_name", "개발로짜12");
	jsonObj2.put("hitnum", "2");
	jsonArray.add(jsonObj2);
}

//현재페이지의 목록데이터
jsonObj.put("rows", jsonArray);
//현재페이지
jsonObj.put("page", current_page);
//총페이지수
jsonObj.put("total", 2);
//총글목록수
jsonObj.put("records", 4);
PrintWriter pw = response.getWriter();
pw.print(jsonObj);
pw.flush();
pw.close();

위 코드는 db처리 없이 임의로 current_page값 구분으로 

가상의 페이징처리로 데이터를 파싱 하였습니다.

그리고 페이징 처리시 데이터 목록의 json array 의 경우 rows 키에 담겨져야 하며

현재페이지(page), 총페이지수(total), 총글목록 카운트(records) 에 담아서 

클라이언트 페이지에 response 해주어야 합니다.

실행을 해보도록 하겠습니다.

위와같이 데이터 출력을 되었으나 로딩문구가 계속 출력되며 

하단 페이징화면도 제대로 나타나지 않습니다.

F12 를 눌러서 오류 메시지를 확인해 보았는데

"Uncaught TypeError: Cannot read property 'integer' of undefined"

라는 메시지 출력이 되었습니다.

페이징 처리를 위해서 LOCALE 설정을 잡아주지 않아서입니다.

jqgrid -> src 0> i18n 디렉토리 내에 자신의 원하고자 하는 locale 파일을 include 해주도록 합니다.

저같은 경우는 한글 locale 설정을 하므로 "grid.locale-kr.js" 파일을 include하였습니다.

<script src="/jqgrid/src/i18n/grid.locale-kr.js"></script>

다시 실행을 해보도록 하겠습니다.

그리드 1페이지 결과

그리드 2페이지 결과

실행결과 정상적으로 출력되네요 

다음에 시간이 되면 컬럼 수정 및 기타 추가 기능에 대하여 포스팅 해보도록 하겠습니다.

by 개발로짜

이전 레이아웃 포스팅을 하면서 탭레이아웃 관련 내용을 다루었던 적이 있습니다.

2014/10/20 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Card,Tab,Fit,HBox/VBox)

위 레이아웃 종류들중에서 탭패널을 동적으로 추가해보고자 합니다.

기존 탭패널 컴포넌트와 추가로 툴바에 버튼 하나를 생성을 해보도록 하겠습니다.

이번포스팅은 간단해서 내용이 짧으며 이해하시기도 쉬우실겁니다 ^^

탭패널컴포넌트 생성코드

Ext.onReady(function(){
	Ext.create("Ext.tab.Panel",{
		renderTo : Ext.getBody(),
		width: 500,
	    height: 400,
	    items:[
	           {
	               title: '1page',
	               html: '1페이지'
	           }
	     ],
	     fbar : [{
	    	 xtype : 'button',
	    	 text : '탭추가',
	    	 handler : function(btn){
	    		 //code here
	    	 }
	     }]
	});
})

실행해보면 다음과 같은 화면으로 컴포넌트 생성이 될겁니다.

위처럼 최초컴포넌트에는 1개의 탭만 존재합니다.

이제부터 툴바에 존재하는 "탭추가"버튼을 클릭하여 

동적으로 탭을 생성해보도록 하겠습니다.

상단 코드의 //code here 다음라인에 하단 코드를 추가해주세요

동적탭 추가기능을 위한 스크립트코드

var tab_count = btn.up("tabpanel").items.items.length+1;
var dynamictab = btn.up("tabpanel").add({
       title: tab_count+'page',
       html: tab_count+'페이지',
       closable : true,
})
 btn.up("tabpanel").setActiveTab(dynamictab);

스크립트 코드를 작성하였는데 각각에 대하여 설명을 드리겠습니다.

① tab_count :    셀렉터를 이용하여 탭패널객체를 찾은 후 현재 존재하는 탭패널갯수에 +1을 합니다

                        탭패널의 타이틀과 html영역부분에 숫자를 적용해보고자 샘플로 제작하였습니다.

② dynamictab : 탭패널객체.add() 함수는 탭내에 패널을 추가한다는 것입니다.

                        title/html은 아시겠고 closable 속성을 true로 주게 되면 탭에 X 표시가 같이 나오며 클릭시 

                       삭제기능을 제공합니다.

③ setActiveTab() : 마지막으로 추가한 패널에 포커스를 잡아주는 함수입니다.

다시한번 실행해보겠습니다.

위처럼 동적으로 생성되면 탭영역의 X버튼클릭하면 해당 탭이 삭제되는 기능까지 확인 할 수 있습니다.

by 개발로짜