스프링 MVC 연동에 대해서 포스팅해보도록 하겠습니다.

개발툴은 STS(Spring Tool Suite) 를 이용하겠습니다.

http://spring.io/tools/sts/all

해당 페이지로 이동하여 자신의 OS환경에 맞는 툴을 다운로드 받습니다.

저는 Windows 32bit 툴을 다운로드 받았습니다.

압축해제를 하도록 하겠습니다.

/sts-bundle/sts-3.x.x.RELEASE/

디렉토리에 들어가시면 STS 실행 프로그램이 있습니다.

실행!!!

Spring 프로젝트 진행시 인코딩을 UTF-8환경으로 진행할 예정이므로 

제일먼저 STS(이클립스) 인코딩설정을 먼저 해줍니다.

이클립스 인코딩 환경설정하기(UTF-8)

① Window -> Preferences -> General -> Workspace의 Text encoding을 UTF-8로 변경해주십니다.

    보통 Default로 MS949로 정의되어있어서 간혹가다 인코딩 문제가 발생하기 쉽기 때문입니다.

    Other를 클릭하셔서 UTF-8로 입력해주시거나 selectbox로 선택 후 Apply 버튼을 클릭합니다.

② Window -> Preferences -> General -> Web 의 CSS,HTML,JSP 3개지 설정의 Encoding을 UTF-8로 변경해주십니다.

    역시 이부분도 Apply 버튼 클릭!!

③ 마지막으로 Window -> Preferences -> General -> Contetn Types의 Text가 있습니다. 

    Text선택 후 Default encoding을 UTF-8이라고 입력 후 Update클릭합니다.

"OK" 버튼을 클릭하면 이클립스(STS)의 인코딩 설정은 마무리가 되었습니다.

본격적으로 프로젝트 생성하여 간단하게 Spring MVC 설정을 해보도록 하겠습니다.

※ Spring 프로젝트는 별도로 정의를 해주지 않아도 RESTFUL로 설정이 되어있으므로 

    "xxx.do"와 같은 확장자 지정을 해주지 않아도 됩니다.

Spring Project 생성

①  New -> Spring Project

② Project name 입력 -> Simple Projects(Simple Spring Web Maven) 선택 -> Select Spring version 선택(Default로 하여도 무관) 

    -> Finish 클릭

그럼 프로젝트 생성이 완료 되었습니다.

"Dynamic Web Project" 로 생성해도 무관하지만 

라이브러리파일들을 일일이 모두 lib 디렉토리내에 넣어줘야하는 번거로움이 있어서 

Maven으로 간편하게 라이브러리 관리 및 Spring 환경설정을 위하여  

"Spring Web Maven" 프로젝트로 진행하도록 하겠습니다.

Spring 프로젝트 생성을 하였는데 Tomcat 에 Add가 되지 않을경우

생성프로젝트 우클릭 -> Maven -> Update Project 를 해주시면 됩니다.

이어서 Spring MVC 기본 설정을 위하여 프로젝트의 설정 부분을 수정해보도록 하겠습니다.

Spring MVC 환경설정 및 실행

ⓐ  /스프링프로젝트/src/main/webapp/WEB-INF/mvc-config.xml  코드 추가

<context:component-scan base-package="com.spring"/>

ⓑ /스프링프로젝트/src/main/java/ 내에 다음과 같이 패키지 구조를 생성하였습니다.

StudyController 클래스에 다음과 같이 코드작성을 해줍니다.

StudyController.java 코드

package com.spring.study.controller;

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

@Controller
public class StudyController {
	
	@RequestMapping("/hello")
	public String hello(){
		return "hello";
	}
}

ModelAndview를 이용하여 return 페이지를 정해줄 수 있지만 String을 이용하여 return 페이지를 정의하도록 하겠습니다.

return "hello" 를 쉽게 이해해보시자면 mvc-config.xml에 정의되어있는 코드 중 

<property name="prefix" value="/WEB-INF/view/"/> 라고 정의되어있는 코드가 있는데

저 디렉토리가 WEBROOT가 되는 것입니다.

return "hello"로 정의해주었다면 /WEB-INF/view/hello.jsp 페이지로 이동한다는 것입니다.

view디렉토리 경로에  hello.jsp페이지를 생성해보도록 하겠습니다.

default로 생성시 showMessage.jsp 가 존재하는데 삭제하셔도 됩니다.

hello.jsp를 생성하셨다면 body태그 부분에 테스트를 위하여 하단 코드를 작성합니다.

hello.jsp 코드

<h3>HELLO WORLD!!</h3>

톰캣을 실행 후 브라우저로 접속하기 전

server.xml 의 context path를 root경로로 잡아주도록 합니다.

앞으로 context root 기준으로 진행하도록 하겠습니다.

server.xml 변경 전

<Context docBase="spring_mvc" path="/spring_mvc" reloadable="true" source="org.eclipse.jst.jee.server:spring_mvc"/></Host>

server.xml 변경 후

<Context docBase="spring_mvc" path="/" reloadable="true" source="org.eclipse.jst.jee.server:spring_mvc"/></Host>

위 설정 까지 변경하셨다면 톰캣 서버를 실행 후 브라우저에 다음과 같이 입력합니다.

http://localhost:8080/hello

실행화면에서는 7070 포트로  호출을 하였는데 포트는 본인이 정한 포트로 실행하시면 되겠습니다.

정상적으로 결과가 출력되었습니다.

다음장에서는 spring mvc의 UTF-8 인코딩 설정을 해보도록 하겠습니다.

by 개발로짜

jQueryUI에서 지원하는 기능 중 "자동완성"에 대하여 포스팅 해보도록 하겠습니다.

자동완성기능은 구글이나 네이버,다음과 같은 검색포털서비스에서 

볼수 있는 기능입니다.

우선 자바스크립트 배열에 문자열 값을 몇가지 넣고 간단하게 자동완성 기능을 구현해보도록 하겠습니다.

<h2>자동완성기능</h2>
<input id="autocomplete" type="text" />

일반 text 태그의 입력 값에 따라 배열에 정의된 

문구들 중 매칭시켜 목록 출력시켜주기 위한

스크립트 코드는 다음과 같습니다.

$(function(){
	var autocomplete_text = ["자동완성기능","Autocomplete","개발로짜","국이"];
         $("#autocomplete").autocomplete({
         	source: autocomplete_text
         });
})

autocomplete() 함수내에 source속성은 저장공간이랑 비슷한 개념입니다.

HTML/JAVASCRIPT 코드를 작성을 하셨다면 실행을 해보도록 하겠습니다.

한/영 구분없이 정상적으로 목록이 출력된 것을 확인하였습니다.

이번에는 ajax통신을 하여 자동완성을 구현해보겠습니다.

통신을 하여 자동완성을 구현해보기 위해서

 JSON 타입으로 파싱하여 응답하는 방식으로 진행하겠습니다.

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

JSON-SIMPLE 라이브러리를 이용하여 JSON 데이터를 만들도록 하겠습니다.

우선은 기존 html태그는 놔두고 스크립트 코드만 변경해보도록 하겠습니다.

$(function(){
	$( "#autocomplete" ).autocomplete({
		source : function( request, response ) {
		     $.ajax({
		       	    type: 'post',
		            url: "/autocomplete.jsp",
		            dataType: "json",
		            //request.term = $("#autocomplete").val()
		            data: { value : request.term },
		            success: function(data) {
		            	//서버에서 json 데이터 response 후 목록에 뿌려주기 위함
		                response( 
		                	$.map(data, function(item) {
		               			return {
		               				label: item.data,
		               				value: item.data
		              			}
		              		})
		              	);
		            }
		       });
	        },
		//조회를 위한 최소글자수
		minLength: 2,
		select: function( event, ui ) {
			// 만약 검색리스트에서 선택하였을때 선택한 데이터에 의한 이벤트발생
		}
	});
})

코드가 길어진것 같지만

 $.ajax 사용해신 분이시라면 익숙하실겁니다.

다음은 서버 페이지(autocomplete.jsp)에 대한 코드를 확인해보겠습니다.

request.setCharacterEncoding("UTF-8");
	String value = request.getParameter("value");
	JSONArray list = new JSONArray();
    JSONObject object = null;
    
    if(value.indexOf("개발") > -1) {
    	object = new JSONObject();
		object.put("data", "개발자");
		list.add(object);
		object = new JSONObject();
		object.put("data", "개발로짜");
		list.add(object);
		object = new JSONObject();
		object.put("data", "개발이 어려워요");
		list.add(object);
		object = new JSONObject();
		object.put("data", "개발이란?");
		list.add(object);
    }else if(value.indexOf("블로") > -1) {
    	object = new JSONObject();
		object.put("data", "블로그꾸미기");
		list.add(object);    	
		object = new JSONObject();
		object.put("data", "블로그누락");
		list.add(object);
		object = new JSONObject();
		object.put("data", "개발로짜의블로그");
		list.add(object);
		object = new JSONObject();
		object.put("data", "블로장생");
		list.add(object);
    }
		
    PrintWriter pw = response.getWriter();
    pw.print(list);
    pw.flush();
    pw.close();

코드를 설명을 해보자면

 텍스트박스에 검색 2글자 입력을 할경우 

"개발" 혹은 "블로" 라는 문자열이 입력될경우에만 

검색목록이 나오게 하는 샘플코드입니다.

DB에서 LIKE절을 사용하여 조회한다고 가정하고 임의로 작성한 서버코드입니다.

그럼 실행을 한번 해보겠습니다.

초기화면에 나타나는 태그는 작업을 별도로 하지 않았으므로 기본 태그입니다.

이제 "개발"이란 단어를 입력해보겠습니다.

개발이라고 입력하니 json으로 임의로 담았던 4개의 검색결과가 출력이 되었네요 ㅋ 

그럼 원하는 결과값 선택!

정상적으로 담겼습니다.

다음으로 "블로"라는 단어를 입력 해보겠습니다.

이번값 역시 잘 출력이 됩니다.

역시 원하는 결과값 클릭!

ajax 비동기 방식으로도 자동완성기능을 간단하게나마 구현해보았습니다

다음은 "sortable" 기능을 이용하여  리스트 목록의 순서를 드래그앤드롭으로 변경해보는 내용을 포스팅하도록 하겠습니다.

by 개발로짜

이번장에서는 jQueryUI에서 제공하는 레이아웃UI를 적용해보고자 합니다.

레이아웃의 종류로는 어코디언/탭/레이어팝업(일명 : 모달창)을 각각 적용해보도록 하겠습니다.

첫번째로는 어코디언(Accordion) 레이아웃에 대해서 설명을 해보겠습니다.

어코디언은 항상 제목/내용이 한묶음으로 이루어져야 하며 

여러개의 제목/내용에 대한 레이아웃을 감싸는 부모태그가 존재하여야 합니다.

jQueryUI의 예제 코드는 다음처럼 작성되어있습니다.

<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
	<h3>First</h3>
	<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
	<h3>Second</h3>
	<div>Phasellus mattis tincidunt nibh.</div>
	<h3>Third</h3>
	<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>

위에 보면 h3태그를 이용하여 제목영역을 지정하고 

하단에 div태그를 이용하여 내용에 대한 영역을 지정한 후 

모든 제목/내용을 감싸주는 accordion이라는 아이디값을 가진 div태그로 감싸주었습니다.

상단 태그위주로 어코디언을 적용하실 필요가 없습니다.

아까 말씀드렸다시피 부모태그(제목태그/내용태그) 로만 나누어 지는것이 가능만 하면 어떠한 태그이건 상관이 없습니다.

하단 코드를 보시면

<h2>아코디언</h2>
<div id="accordionLayout">
	<p>첫번째아코디언</p>
	<div>
		<p>첫번째 내용은 별거 없습니다..</p>
	</div>
	<p>두번째아코디언</p>
	<div>
		<p>아코디언은 매력적인 UI입니다</p>
	</div>
	<p>마지막아코디언</p>
	<div>
		<p>맨 마직막에 위치한 아코디언의 내용입니다.</p>
	</div>
</div>

위와같이 제목부분인 h3태그를 p태그로 변경을 해보았습니다.

어코디언 UI를 적용하고 싶으시다면 하단코드처럼 호출해주시면 되겠습니다.

$(function(){
        //$("어코디언적용할부모태그셀렉터").accordion();
	$("#accordionLayout").accordion();
});

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

각각의 타이틀을 클릭할때마다 정상적으로 해당 내용들이 출력이 되었습니다.

다음으로는 탭레이아웃을 알아보겠습니다.

어코디언레이아웃을 가로로 나타내는것과 유사한 구조입니다.

탭구조를 위한 HTML 태그를 작성해보도록 하겠습니다.

<h2>탭</h2>
<div id="tabLayout">
	<ul>
		<!-- 탭 타이틀에 해당되는 부분  -->
		<li><a href="#tab1">최초탭</a></li>
		<li><a href="#tab2">두번째탭</a></li>
	</ul>
	<!-- 첫번째 탭내용 -->
	<div id="tab1">탭기능은 아코디언을 가로로 만든거 같네요</div>
	<!-- 두번째 탭내용 -->
	<div id="tab2">탭이나 아코디언을 사용하면 내용을 구분하여 출력하는것이 가능합니다.</div>
</div>

탭 제목과 제목에 해당되는 내용을 연동하기 위해서는 

탭 영역의 id값을 탭 타이틀의 href값에 #내용아이디를 정의해주어서 

맵핑을 시키면 되겠습니다.

탭 적용을 위한 호출 스크립트는 다음과 같습니다.

$(function(){
	 $("#tabLayout").tabs();
});

HTML태그와 스크립트코드를 작성하였다면 실행을 한번 해보도록 하겠습니다.

마지막으로 레이어팝업을 버튼 클릭이벤트를 이용하여 띄워보도록 하겠습니다.

버튼UI를 적용하는데 A태그/INPUT BUTTON태그/BUTTON태그를 적용이 가능한거 알고 계시죠?

2014/11/04 - [웹개발강좌/jQueryUI] - jQueryUI 2장 - 다양한 입력태그에 달력,스피너,슬라이더 등 각종 UI 적용해보기

다이얼로그창을 띄우기 위한 HTML 태그를 먼저 작성해보도록 하겠습니다.

<h2>레이어팝업</h2>
<!--버튼UI적용을 위한 A태그 -->
<p><a href="#" id="dialog_button">모달띄우기</a></p>
<!-- 클릭이벤트 발생시 다이얼로그창에 띄워줄 레이어-->
<div id="dialogLayout" title="모달 제목영역에 들어갈 내용입니다.">
	<p>심플하고 깔끔하게 지원되는 jQueryUI의 다이얼로그 레이아웃입니다. 깔끔하고 드래그 기능도 지원이 되네요 ^^</p>
</div>

위의 작성한 태그를 이용하기 위해서는 다음의 작업이 필요합니다.

1. A태그에 버튼UI적용

//클릭이벤트를 위한 a 태그에 버튼UI 적용
$("#dialog_button").button();

2. ID가 dialogLayout에 다이얼로그 UI적용

//dialogLayout레이아웃을 다이얼로그라고 정의
$("#dialogLayout").dialog({
	//이벤트발생시 open해주기 위하여 false 로 지정
	autoOpen: false,
	//다이얼로그의 넓이지정
	width: 400,
	//버튼 설정
	buttons: [{
			text: "확인",
			click: function() {
				$(this).dialog("close");
			}
	},{
		text: "취소",
		click: function() {
			$(this).dialog("close");
		}
	}]
});

3. A태그 클릭이벤트 발생 후 다이얼로그 화면에 출력

 //버튼 클릭시
$("#dialog_button").click(function(e) {
	//dialogLayout 레이아웃내에 정의된 내용을 다이얼로그를 이용하여 OPEN
	$("#dialogLayout").dialog("open");
	e.preventDefault();
});

1/2/3 스크립트코드들을 $(document).ready(function(){}) 내에 작성해주시면 되겠습니다.

3번코드를 보시면 e.preventDefault() 함수가 적용되었는데

 이부분은 A태그에 대한 이벤트를 막기위함이므로 

BUTTON 태그 혹은 INPUT BUTTON 태그일경우는 생략해주셔도 될거같습니다.

지금까지 jQueryUI를 이용하여 레이아웃을 출력 해보았습니다.

다음에는 간단하게 jQueryUI에서 지원하는 기능들에 대해서 알아보도록 하겠습니다.

by 개발로짜