[ jQuery ] - restful api 에서 $.ajax 사용시 data: 분을 Request Parameter 로던질지 Request Body로 던질지 구분

■■■ Develop ■■■/[ Local ]
posted by 시드라엘 2015. 12. 9. 10:30

제목 : [ jQuery ] restful api 에서  $.ajax 사용시 data: 분을 Request Parameter 로던질지 Request Body로 던질지 구분



설명 : 

restful api 에서는 body 부분을 데이타로 받기때문에 ajax 에서 문제가 발생할 수 있다.

하기 beforeSend : function(xhr) 로 헤더에 컨텐츠 타입을 지정하면 data : 부분을 바디로 받게된다. 해당부분을 삭제하면 파라메타로 받게된다.

  <script type="text/javascript">

function fn_go() {

var transacId = $('#transacId').val();

//alert( $('#requestXML').val().split("\n").join("").split("\t").join("") );

$.ajax({

    url : $('#urlText').val(),

    type : "post",

    dataType: "json",

    beforeSend : function(xhr){

       xhr.setRequestHeader("content-type" , "application/json; charset=UTF-8");

       xhr.setRequestHeader("transacId" , transacId);

       xhr.setRequestHeader("rqtSys" , "ombs");

       xhr.setRequestHeader("rqtHost" , "localhost");

       xhr.setRequestHeader("rqtSysTime" , "20130225142215434");

       xhr.setRequestHeader("motVer" , "1.0");

    },

data: $('#requestXML').val().split("\n").join("").split("\t").join(""),

    success : function(data){

     alert( " data : " + data );

     $('#responseXML').val( JSON.stringify(data) );

    }

});

}

  </script>

 



검색단어 : jQuery, ajax, data, Request Parameter, Request Body



[ 퍼블리싱 ] - 레이아웃 작업중

■■■ Develop ■■■/[ Local ]
posted by 시드라엘 2014. 7. 1. 10:23

## 레이아웃 작업중 ## - http://jsfiddle.net/

참고 : http://html.nhncorp.com/uio_factory/ui_pattern/layout/5

<!-- top start-->

  <div class="header">

    header

  </div>

<!--// top start-->

<div class="wrap">

 <div class="container">

   <div class="left">

       left

   </div>

   <div class="center">

       body

   </div>

   <div class="right">

       right

   </div>

 </div>

</div>

<!--  하단 -->

  <div class="footer">

footer

  </div>



html { _filter:expression(document.execCommand("BackgroundImageCache", false, true))}

html, body{ height:100%; }

body .header{ height:50px; border:1px solid red; text-align:center; }

.wrap{ min-height:100%; margin:-50px 0 -100px 0;}

* html .wrap { *height:100% }

.wrap .container{ width:1250px; margin:0 auto; height:100%;}

.wrap .container .left{ border:1px solid blue; float:left; min-height:200px; width:200px; margin-top:50px; }

.wrap .container .center{ border:1px solid blue; float:left; min-height:200px; width:800px; margin-top:50px; }

.wrap .container .right{ border:1px solid blue; float:left; min-height:200px; width:200px; margin-top:50px; }

body .footer{ clear: both; height:100px; border:1px solid black; text-align:center; }



[ Javascirpt ] - 월요일 기준으로 주차 구하기 [ 주차 , JAVASCRIPT , javascript , 주차구하기 ]

■■■ Develop ■■■/[ Local ]
posted by 시드라엘 2013. 9. 9. 19:33

    //월요일을 중심으로한 주차 구하기

    //차일 변수
    var minusDay = 0;

    //주차를 계산하고픈 일
    var wkDtStr = "20130901";

    //계산하고픈달 시작일 1일
    var stDtStr = wkDtStr.substring(0,6) + "01";
    var stDtCal = new Date( stDtStr.substring(0,4) , stDtStr.substring(4,6) , stDtStr.substring(6,8) );
   
    //요일 구하기
    var weekCal = new Date( wkDtStr.substring(0,4) , ( wkDtStr.substring(4,6) - 1 ) , wkDtStr.substring(6,8) );

    //주차를 계산하고픈 일 달력 생성
    var wkDtCal = new Date( wkDtStr.substring(0,4) , wkDtStr.substring(4,6) , wkDtStr.substring(6,8) );

    //매달 시작일에 따른 빼줘야 하는 값
    var week = new Array( 1, 0, 5, 4, 3, 2, 1 );

    minusDay = wkDtCal.getDate() - stDtCal.getDate() - week[ weekCal.getDay() ] ;

    //만약 2일부터 1주차인데 1일을 입력했을경우 혹은 년도가 바뀔경우
    if( ( minusDay - week[ weekCal.getDay() ] ) < 0 ){

        wkDtCal.setDate( stDtCal.getDate() - 1 );
        stDtCal.setDate( stDtCal.getDate() - wkDtCal.getDate() );

        minusDay = wkDtCal.getDate() - stDtCal.getDate();

//        alert( "변경된 시작일 : " + stDtCal.getYear() + stDtCal.getMonth() + stDtCal.getDate() + "" );
//        alert( "변경된 마지막일 : " + wkDtCal.getYear() + wkDtCal.getMonth() + wkDtCal.getDate() + "" );
//        alert( "두 날짜 차일 : " + wkDtCal.getDate() - stDtCal.getDate() );
    }
   
    var weekNm = minusDay / 7 + 1;

    //연산
    alert( wkDtCal.getYear() + "년" + wkDtCal.getMonth() + "월" + parseInt(weekNm) + " 주차 " );

 

날짜를 집어넣으면 월요일 기준으로 주차를 계산하는 함수

쉽게 말해서 2013 년 10월 7일은  2013 년 10 월 1주차 로 계산됨 ( 2주차가 아님 )

무조건 월요일이 지나가야 1주차가 된다.

별거아닌거 짜면서 골 깨지는줄 알았음.. ㅋㅋ

[ HTML ] - 한번의 커넥션으로 이미지 모두 전송하는 방법

■■■ Develop ■■■/[ Local ]
posted by 시드라엘 2012. 12. 5. 11:44 
(BASE64로 인코딩한 이미지 data를 직접 HTML 문서에 추가하는 방법)

- 작성자 : san2(at)linuxchannel.net
- 작성일 : 2002.05.07
- 수  준 : 초중급
- 내  용 : HTML/PHP

http://www.linuxchannel.net/docs/img-src-base64.txt

이 문서는 이미지를 전송하는 과정에서 여러번의 커넥션
없이 한번으로 모두 전송하는 방법을 소개합니다.

*주의)
서로의 장단점을 정확히 습득함을 요합니다.

reference : http://www.faqs.org/rfcs/rfc2397.html

1. 배경 및 개요
2. "data" URL scheme
3. IMG 태그 형태
4. 이미지 파일을 모두 BASE64로 인코딩 하기
  4-1. 커맨드라인에서 작업하기(파이썬 base64.py)
  4-2. PHP로 인코딩해 보기
5. 인코딩된 data를 HTML에 추가하기
  5-1. 단순 HTML만을 사용할 경우
  5-2. PHP를 사용할 경우
6. 벤치마크(속도대결)
7. 결론
8. 후기

---------------------------------------------------

*문맥상 간혹 경어를 생략했습니다. 양해해 주시길 바랍니다.


1. 배경 및 개요

클라이언트(이하 '웹브라우저')가 특정 HTML문서(new document)를
요청시 맨처음 한번의 커넥션이 이루어지고, 그 다음 HTML문서안에
<IMG> 태그가 만약 10개 있다면, 이는 추가적으로 10번의
재커넥션이 이루어질 수 있다는 점에서 초점을 맞추어 봅니다.

일반적으로 속도를 높이기 위해서 서버에서는 KeepAlive 기능을
사용하지만 상당히 바쁜 서버일 경우는 keepAlive를 off 하는것이
더 효과적입니다(리소스 문제).

이와같이 이미지를 모두 전송받기 위해서 웹브라우저는 추가적인
커넥션을 시도하는데, HTTP 상태코드가 302일 경우는 웹브라우저는
서버에서 이미지를 전송받지 않고 디스크 캐쉬나 메모리캐쉬에서
이미지를 가져와 출력합니다. 반면 302 코드가 아닐 경우는 직접
서버에서 이미지를 전송받습니다.

문제는 후자와 같이 직접 이미지를 전송받는 과정에서 여러번의
커넥션이 이루어지는데, 서버의 부하나 네트워크 장애 등등의
원인으로 상당히 지연되는 경우를 경험했을 겁니다.

이 문서는 이와 같이 이미지를 전송하는 과정에서 여러번의 커넥션
없이 한번으로 모두 전송하는 방법을 소개합니다.

  <IMG ... SRC='" URL scheme

RFC 2397에 의하면,

  data:[<mediatype>][;base64],<data>

'[' 와 ']'으로 감싸인 부분은 옵션입니다.

"data:"
일부 어플리케이션에서는 URLs길이 제한이 있으므로 주의함.
(RFC 1866)

<mediatype>
data의 media type(옵션).
만약 이 옵션이 없다면 기본값으로 text/plain;charset=US-ASCII
을 사용함.

";base64"
BASE64로 인코딩되어 있다는 의미(역시 옵션).
이 옵션이 없다면 ASCII, URL 표준 %xx hex 인코딩으로 대체된다.

예: data:,A%20brief%20note
    <A HREF='data:,A%20brief%20note'>test</A>

<data>
실제로 BASE64로 인코딩된 data가 위치하거나 URL hex 인코딩된 문자열이
들어감.


그 외 참고사항,
  dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data
  mediatype  := [ type "/" subtype ] *( ";" parameter )
  data       := *urlchar
  parameter  := attribute "=" value


3. IMG 태그 형태

  <IMG ... SRC='"https://t1.daumcdn.net/cfile/tistory/26795C4956E6996227">
<BR>

뭐가 나오나요?


4. 이미지 파일을 모두 BASE64로 인코딩 하기

이미지 파일을 BASE64로 인코딩하면 약간 파일이 커짐에
주의하도록 합니다(약 30%이상 커짐).


4-1. 커맨드라인에서 작업하기(파이썬 base64.py)

다른 툴이 있는지 모르겠지만 필자는 커맨드라인에서
다음의 파이썬 스크립트를 이용한다.

/usr/lib/python1.5/base64.py

$ alias base64='/usr/lib/python1.5/base64.py'

BASE64로 인코딩하려면 ?
(옵션이 없거나 -e 옵션 사용)

$ base64 -e foobar.gif > foobar.gif.enc

디코딩하려면?
(-d 옵션 사용)

$ base64 -e foobar.gif.enc > foobar.gif

다음과 같은 간단한 쉘스크립트를 이용해서 파일끝에 .enc를
붙여 인코딩 파일을 생성합니다.

-- img2base64.sh -------------------------------
#!/bin/sh
#
fpath=$1
BASE64='/usr/lib/python1.5/base64.py'
OIFS=$IFS
IFS='
'
[ ! -d "$fpath" ] && exit 0
[ ! -s "$BASE64" ] && exit 0

for f in `find $fpath -type f 2>/dev/null` ; do
  echo $f
  $BASE64 -e $f > $f.enc
done

IFS=$OIFS
exit 0
------------------------------------------------

사용법 :

$ sh img2base64.sh /path/to/images/directory


4-2. PHP로 인코딩해 보기

PHP를 사용할 경우 base64_encode()함수를 사용한다.
예:

------------------------------------------------
<?php
fucntion get_file($file)
{
  if($fp = @fopen($file,r)) {
    $content = fread($fp,filesize($file));
    fclose($fp);
  }
  return $content;
}

$imgfile = get_file('foobar.gif');
$imgfile = base64_encode($imgfile);

echo $imgfile;
echo "\n<BR>\n<IMG SRC='data:base64,$imgfile'>\n";
?>
------------------------------------------------


5. 인코딩된 data를 HTML에 추가하기

각각의 이미지 파일마다 BASE64로 인코딩된 파일을 생성했다는
가정입니다.

5-1. 단순 HTML만을 사용할 경우

앞의 IMG 태그 예제와 같이 직접 BASE64로 인코딩하여 그 data를
IMG 태그안에 손수 집어넣어야 합니다.
(상당한 중노동이 필요할 듯......^.^)


5-2. PHP를 사용할 경우

------------------------------------------------
<?php
function get_file($file)
{
  if($fp = @fopen($file,r)) {
    $content = fread($fp,filesize($file));
    fclose($fp);
  }
  return $content;
}

function img_src($imgfile, $border=0, $argument='')
{
  $base64data = get_file('$imgfile.enc'); // encoded img file
  return "<IMG BORDER=$border $argument SRC='data:base64,$base64data'>";
}

echo img_src('images/foobar.gif');
echo "\n<BR>\n";
echo img_src('images/foobar2.gif',1);
echo "\n<BR>\n";
echo img_src('images/foobar3.gif",0,'WIDTH=200 HEIGHT=1');
echo "\n<BR>\n";
echo img_src('images/foobar4.gif',0,"ALT='foobar4'");
?>
------------------------------------------------

위와 같이 직접 이미지 data를 전송하면 재 커넥션 없이 한번의
커넥션만 이루어집니다.
비교적 파일크기가 작고 여러번의 커넥션이 이루어진 홈페이지라면
상당히 유용할 겁니다.
용량이 큰 파일일 경우는 오히려 역효과가 날 수 있습니다.

참고로,
아파치 로그파일에서 이미지 파일에 접근 기록이 없어야
정상입니다.

다만, 주의할 점은
웹서버나 다른 어플리케이션에서 BODY의 길이를 제한하면
에러를 낼 수 있습니다.
또한 다른 장애(?)도 발생할 수 있습니다.

직접 테스트해 보시고
장점과 단점을 서로 비교해 보세요.


6. 벤치마크(속도대결)

start_time :
(1)클라이언트에서 문서 요청 -->
(2)웹서버 처리 -->
(3)클라이언트에게 전송 -->
(4)웹브라우저에서 문서 출력
end_time :

여기에서는, 실제로 웹브라우저가 출력하는데까지의 시간 측정은
상당히 어려우므로(?) (4)번 과정은 제외하고 (1)-(3)번까지의
과정을 wget 과 time으로 시간을 측정해 봅니다.
(wget 이 가져온 결과를 /dev/null로 보냄)

주의할 점은 일반 HTML 문서에는 실제로 링크된 이미지 모두를
가져오는데 까지 시간을 측정해야 합니다.

- 크고 작은 이미지를 여러개 준비합니다
  준비한 이미지를 모두 BASE64로 인코딩합니다.
  (5개 이상으로 자신의 홈페이지 기준).

- 문서1(tmp.html)
  비교기준이 되는 일반 문서를 작성합니다.
  예: <IMG SRC='images/foobar.gif'> 와 같은 형식

- 문서2(tmp.php)
  PHP를 이용해서 한번의 커넥션이 이루어지도록 작성합니다.
  예: <IMG SRC='data:base64,$base64data'>

- 문서3(tmp.enc.html)
  인코딩된 data를 직접 HTML 문서에 추가합니다.
  예: <IMG SRC='data:base64,R0lGODdhMQAiAPcA...>
  하나하나씩 작성하기 힘드므로 문서2에서의 결과를
  저장합니다.

다음과 같은 쉘스크립트를 작성해서 테스트해 봅니다.
가능한 같은 네트워크의 다른 PC에서 테스트해 보세요.

-------------------------------------------------
#!/bin/sh
file=$1
i=0
time {
  while [ $i -lt 100 ] ; do
    wget -q -r -O /dev/null http://www.yourdomain.com/tmp/$file
    i=$(($i+1))
  done
}
exit 0
-------------------------------------------------
$ sh this_script.sh tmp.html
$ sh this_script.sh tmp.php
$ sh this_script.sh tmp.enc.html

아마 결과는 그리 만족하지 않을 겁니다. T.T


7. 결론

먼저 결론을 내리기 전에 필자는 이 문서를 작성해 놓고 상당히
고민했습니다.
이유는, 테스트에 대한 그 객관성이 상당히 결여되어 있고, 또한
당연한 결과인줄 알면서도 무모하게 도전한(?) 아둔한 생각 때문에
...


굳지 결론을 내리자면,

 1) 일반적인 홈페이지일 경우 이 방법은 필요없습니다.

 2) 다만, 웹서버와 웹브라우저 간의 커넥션이 빈번하게 이루어지고
    비교적 이미지가 자주 바뀌는 경우에 유용.

 3) 커넥션 수를 줄여서 그 효과를 볼 수 있는 경우.

 4) 양자를 혼용했을 경우 그 효과를 볼 수 있는 경우.

 5) 특별하게 따로 이미지 파일을 만들고 싶지 않을 경우(하나의
    문서로 제공할경우).


8. 후기

생략(필자의 습관상 붙이는 단원)

__EOF__

 
출처 : http://linuxchannel.net/docs/img-src-base64.txt

[ jQuery ][ AJAX ] - Ajax/jQuery플러그인을 이용하여 multipart/form-data 인코딩 방식으로 파일+문자열 전송하기

■■■ Develop ■■■/[ Local ]
posted by 시드라엘 2012. 10. 23. 11:43

Ajax/jQuery플러그인을 이용하여 multipart/form-data 인코딩 방식으로 파일+문자열 전송하기

Ajax / jQuery / JavaScript/기타 구현코드 2012/05/24 19:23


참고 ::

 http://warmz.tistory.com/731


위 방식과 유사하다. 그러나 위 링크의 방식은 파일을 업로드 후 현재 페이지가 이동해버리기 때문에

이걸 원치 않는 사람들에겐 적합하지 않다. 그래서 Ajax와 jQueryForm 플러그인을 사용하면 페이지를 이동하지 않고도

파일을 업로드하고 결과를 수신받을 수 있다.


플러그인 ::

 - jquery-1.x.x.js   (1.7.x 버전대에는 결과를 받지 못하는 버그가 존재한다.)

 - jquery.form.js

 - json2.js


라이브러리 ::

 - cos.jar

 - json-simple-x.x.x.jar


files.zip






참고 사이트 ::
 http://jquery.malsup.com/form/ 


uploader.html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.form.js"></script>
<script type="text/javascript" src="./js/json2.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$('#upload').ajaxForm({
                // 반환할 데이터의 타입. 'json'으로 하면 IE 에서만 제대로 동작하고 크롬, FF에서는 응답을 수신하지
                // 못하는 문제점을 발견하였다. dataType을 정의하지 않을 경우 기본 값은 null 이다.
                dataType : 'text', 
beforeSerialize: function() {
// form을 직렬화하기전 엘레먼트의 속성을 수정할 수도 있다.
$('#data').attr('value', '야호');
},
beforeSubmit : function() {
$('#result').html('uploading...');
},
success : function(data) {
// 크롬, FF에서 반환되는 데이터(String)에는 pre 태그가 쌓여있으므로
// 정규식으로 태그 제거. IE의 경우 정상적으로 값이 반환된다.
data = data.replace(/[<][^>]*[>]/gi, '');
// JSON 객체로 변환
var jData = JSON.parse(data);
$('#result').html('Success - ' + jData.result);
}
});
});
</script>
<body>
<form id="upload" action="upload" method="POST" enctype="multipart/form-data">
파일 : <input type="file" name="file" /><br>
이름 : <input type="text" name="name" /><br>
                <input type="hidden" id="data" name="data"/>
<input type="submit" value="Upload" /><br>
</form>
<hr><br>
<b>결과 : </b>
<div id="result"></div>
</body>
</html>

* 크롬, 파이어폭에서는 반환되는 데이터 타입은 JSON을 사용하지 못한다! (IE는 정상적으로 반환된다.)

 서버로부터 리턴되는 문자열 데이터에는 아래와 같이 <pre>데이터</pre> 태그가 쌓여서 오기때문이다. 


서버 - upload.java (Servlet)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
protected void doPost(HttpServletRequest request, HttpServletResponse response) 
                throws ServletException, IOException {
    request.setCharacterEncoding("UTF-8");
    response.setCharacterEncoding("UTF-8");
  
    MultipartRequest mRequest = new MultipartRequest(
                                    request, "D:/", 10 * 1024 * 1024, "UTF-8");
          
    // 값 추출
    System.out.println("이름 : " + mRequest.getParameter("name"));
    System.out.println("data : " + mRequest.getParameter("data"));
          
    JSONObject result = new JSONObject();
    result.put("result", "오케이");
  
    PrintWriter out = response.getWriter();
    out.write(result.toString());
    out.flush();
    out.close();
}


결과

     


Submit Option

 전송하기 전에 여러가지 옵션을 추가할 수 있다. 아래 사이트 참고

 http://jquery.malsup.com/form/#options-object


[ JavaScript ][ JSON ] - json.js json2.js json_parse.js json_parse_state.js

■■■ Develop ■■■/[ Local ]
posted by 시드라엘 2012. 10. 17. 15:13

json 관련 이전 버전의 IE 에서 내장하고있지 않는 객체에 대해 기능을 지원하는 JS 다운로드 홈페이지 URL


URL : https://github.com/douglascrockford/JSON-js



json.js


json2.js


json_parse.js


json_parse_state.js


cycle.js

혹시몰라서 첨부도 해둠

[ jQuery ][ datepicker ] - 함수

■■■ Develop ■■■/[ Local ]
posted by 시드라엘 2012. 6. 13. 20:56

 $(".datepicker").datepicker({

  showOn: "both", // 버튼과 텍스트 필드 모두 캘린더를 보여준다.

  buttonImage: "/application/db/jquery/images/calendar.gif", // 버튼 이미지

  buttonImageOnly: true, // 버튼에 있는 이미지만 표시한다.

  changeMonth: true, // 월을 바꿀수 있는 셀렉트 박스를 표시한다.

  changeYear: true, // 년을 바꿀 수 있는 셀렉트 박스를 표시한다.

  minDate: '-100y', // 현재날짜로부터 100년이전까지 년을 표시한다.

  nextText: '다음 달', // next 아이콘의 툴팁.

  prevText: '이전 달', // prev 아이콘의 툴팁.

  numberOfMonths: [1,1], // 한번에 얼마나 많은 월을 표시할것인가. [2,3] 일 경우, 2(행) x 3(열) = 6개의 월을 표시한다.

  stepMonths: 3, // next, prev 버튼을 클릭했을때 얼마나 많은 월을 이동하여 표시하는가. 

  yearRange: 'c-100:c+10', // 년도 선택 셀렉트박스를 현재 년도에서 이전, 이후로 얼마의 범위를 표시할것인가.

  showButtonPanel: true, // 캘린더 하단에 버튼 패널을 표시한다. 

  currentText: '오늘 날짜' , // 오늘 날짜로 이동하는 버튼 패널

  closeText: '닫기',  // 닫기 버튼 패널

  dateFormat: "yy-mm-dd", // 텍스트 필드에 입력되는 날짜 형식.

  showAnim: "slide", //애니메이션을 적용한다.

  showMonthAfterYear: true , // 월, 년순의 셀렉트 박스를 년,월 순으로 바꿔준다. 

  dayNamesMin: ['월', '화', '수', '목', '금', '토', '일'], // 요일의 한글 형식.

  monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] // 월의 한글 형식.

 });

어디선가 펌


[ HTML ] - MIME-TYPE

■■■ Develop ■■■/[ Local ]
posted by 시드라엘 2012. 4. 4. 17:59

There are 8 main types: 
 application
 audio
 image
 message
 model
 multipart
 text
 video

MIME type File extension Remark
application/activemessage    
application/andrew-inset .ez  
application/applefile    
application/atom+xml    
application/atomicmail    
application/batch-SMTP    
application/beep+xml    
application/cals-1840    
application/ccxml+xml    
application/cnrp+xml    
application/commonground    
application/conference-info+xml    
application/cpl+xml    
application/csta+xml    
application/CSTAdata+xml    
application/cybercash    
application/dca-rft    
application/dec-dx    
application/dialog-info+xml    
application/dicom .dcm  
application/dns .soa, .zone  
application/dvcs .dvc  
application/ecmascript    
application/EDI-Consent    
application/EDIFACT    
application/EDI-X12    
application/epp+xml .xml  
application/eshop    
application/fastinfoset .finf  
application/fastsoap    
application/fits .fits  
application/font-tdpfr .pfr  
application/http    
application/hyperstudio    
application/iges   superseded by model/iges
application/im-iscomposing+xml    
application/index    
application/index.cmd    
application/index.obj    
application/index.response    
application/index.vnd    
application/iotp    
application/ipp    
application/isup    
application/javascript    
application/kpml-request+xml    
application/kpml-response+xml    
application/mac-binhex40 .hqx  
application/macwriteii    
application/marc .mrc  
application/mathematica .nb,.ma,.mb  
application/mbox    
application/mikey    
application/mpeg4-generic    
application/mpeg4-iod    
application/mpeg4-iod-xmt    
application/mp4    
application/msword .doc  
application/news-message-id    
application/news-transmission    
application/nss    
application/ocsp-request .orq  
application/ocsp-response .orq  
application/octet-stream .bin, .dms, .lha, .lzh, .exe, .class, .so, .dll  
application/oda .oda  
application/ogg .ogg  
application/parityfec    
application/pdf .pdf  
application/pgp-encrypted    
application/pgp-keys    
application/pgp-signature    
application/pidf+xml    
application/pkcs10 .p10  
application/pkcs7-mime .p7m, .p7c .p7m = (signedData, envelopedData), .p7c=(degenerate signedData "certs-only" message)
application/pkcs7-signature .p7s  
application/pkix-cert .cer  
application/pkixcmp .pki  
application/pkix-crl .cer  
application/pkix-pkipath    
application/pls+xml    
application/poc-settings+xml    
application/postscript .ai, .eps, .ps  
application/prs.alvestrand.titrax-sheet    
application/prs.cww .cw, .cww  
application/prs.nprend .rnd, .rct  
application/prs.plucker    
application/rdf+xml .rdf  
application/qsig    
application/reginfo+xml    
application/remote-printing    
application/resource-lists+xml    
application/riscos    
application/rlmi+xml    
application/rls-services+xml    
application/rtf .rtf  
application/rtx    
application/samlassertion+xml    
application/samlmetadata+xml    
application/sbml+xml    
application/sdp    
application/set-payment    
application/set-payment-initiation    
application/set-registration    
application/set-registration-initiation    
application/sgml    
application/sgml-open-catalog    
application/shf+xml .shf  
application/sieve .siv  
application/simple-filter+xml    
application/simple-message-summary    
application/slate    
application/soap+fastinfoset    
application/soap+xml    
application/spirits-event+xml    
application/srgs    
application/srgs+xml    
application/ssml+xml    
application/timestamp-query .tsq  
application/timestamp-reply .tsr  
application/tve-trigger    
application/vemmi    
application/vnd.3gpp.pic-bw-large .plb  
application/vnd.3gpp.pic-bw-small .psb  
application/vnd.3gpp.pic-bw-var .pvb  
application/vnd.3gpp.sms .sms  
application/vnd.3M.Post-it-Notes .pwn  
application/vnd.accpac.simply.aso .aso  
application/vnd.accpac.simply.imp .imp  
application/vnd.acucobol .acu  
application/vnd.acucorp .atc, .acutc  
application/vnd.adobe.xfdf .xfdf  
application/vnd.aether.imp .ami  
application/vnd.amiga.ami .cii  
application/vnd.anser-web-certificate-issue-initiation    
application/vnd.apple.installer+xml .dist, .distz, .pkg, .mpkg  
application/vnd.audiograph .aep  
application/vnd.autopackage .package  
application/vnd.blueice.multipass .mpm  
application/vnd.bmi .bmi  
application/vnd.businessobjects .rep  
application/vnd.canon-cpdl    
application/vnd.canon-lips    
application/vnd.cinderella .cdy  
application/vnd.claymore .cla  
application/vnd.commerce-battelle .ica, .icf, .icd, .icc, .ic# where # is an integer such that -1<#<9.  
application/vnd.commonspace .csp, .cst  
application/vnd.cosmocaller .cmc  
application/vnd.contact.cmsg .cdbcmsg  
application/vnd.criticaltools.wbs+xml .wbs  
application/vnd.ctc-posml .pml  
application/vnd.cups-postscript    
application/vnd.cups-raster    
application/vnd.cups-raw    
application/vnd.curl .curl  


application/vnd.cybank    
application/vnd.data-vision.rdz .rdz  
application/vnd.dna .dna  
application/vnd.dpgraph .dpg .mwc .dpgraph  
application/vnd.dreamfactory .dfac  
application/vnd.dxr .dxr  
application/vnd.ecdis-update    
application/vnd.ecowin.chart .mag  
application/vnd.ecowin.filerequest    
application/vnd.ecowin.fileupdate    
application/vnd.ecowin.series    
application/vnd.ecowin.seriesrequest    
application/vnd.ecowin.seriesupdate    
application/vnd.enliven .nml  
application/vnd.epson.esf .esf  
application/vnd.epson.msf .msf  
application/vnd.epson.quickanime .qam  
application/vnd.epson.salt .slt  
application/vnd.epson.ssf .ssf  
application/vnd.ericsson.quickcall .qcall, .qca  
application/vnd.eudora.data    
application/vnd.fdf    
application/vnd.ffsns    
application/vnd.fints .hbci and .hbc; .kom, .upa, .pkd and .bpd for special purpose  
application/vnd.FloGraphIt .gph  
application/vnd.fluxtime.clip .ftc  
application/vnd.framemaker    
application/vnd.fsc.weblaunch .fsc  
application/vnd.fujitsu.oasys .oas  
application/vnd.fujitsu.oasys2 .oa2  
application/vnd.fujitsu.oasys3 .oa3  
application/vnd.fujitsu.oasysgp .fg5  
application/vnd.fujitsu.oasysprs .bh2  
application/vnd.fujixerox.ddd .ddd  
application/vnd.fujixerox.docuworks .xdw  
application/vnd.fujixerox.docuworks.binder .xbd  
application/vnd.fut-misnet    
application/vnd.genomatix.tuxedo .txd  
application/vnd.grafeq .gqf, .gqs  
application/vnd.groove-account .gac  
application/vnd.groove-help .ghf  
application/vnd.groove-identity-message .gim  
application/vnd.groove-injector .grv  
application/vnd.groove-tool-message .gtm  
application/vnd.groove-tool-template .tpl  
application/vnd.groove-vcard .vcg  
application/vnd.hbci .hbci and .hbc; .kom, .upa, .pkd an .bpd for special purpose  
application/vnd.hcl-bireports .rep  
application/vnd.hhe.lesson-player .les  
application/vnd.hp-HPGL    
application/vnd.hp-hpid .hpi, .hpid  
application/vnd.hp-hps .hps  
application/vnd.hp-PCL    
application/vnd.hp-PCLXL    
application/vnd.httphone    
application/vnd.hzn-3d-crossword .x3d  
application/vnd.ibm.afplinedata    
application/vnd.ibm.electronic-media .emm  
application/vnd.ibm.MiniPay .mpy  
application/vnd.ibm.modcap .list3820, .listafp, .afp, .pseg3820  
application/vnd.ibm.rights-management .irm  
application/vnd.ibm.secure-container .sc  
application/vnd.informix-visionary .vis  
application/vnd.intercon.formnet .xpw, .xpx  
application/vnd.intertrust.digibox    
application/vnd.intertrust.nncp    
application/vnd.intu.qbo .qbo  
application/vnd.intu.qfx .qfx  
application/vnd.ipunplugged.rcprofile .rcprofile  
application/vnd.irepository.package+xml .irp  
application/vnd.is-xpr .xpr  
application/vnd.japannet-directory-service    
application/vnd.japannet-jpnstore-wakeup    
application/vnd.japannet-payment-wakeup    
application/vnd.japannet-registration    
application/vnd.japannet-registration-wakeup    
application/vnd.japannet-setstore-wakeup    
application/vnd.japannet-verification    
application/vnd.japannet-verification-wakeup    
application/vnd.jisp .jisp  
application/vnd.kahootz .ktz, .ktr  
application/vnd.kde.karbon .karbon  
application/vnd.kde.kchart .chrt  
application/vnd.kde.kformula .kfo  
application/vnd.kde.kivio .flw  
application/vnd.kde.kontour .kon  
application/vnd.kde.kpresenter .kpr, .kpt  
application/vnd.kde.kspread .ksp  
application/vnd.kde.kword .kwt, .kwd  
application/vnd.kenameaapp .htke  
application/vnd.kidspiration .kia  
application/vnd.Kinar .kne, .knp, .sdf  
application/vnd.koan .skp, .skd, .skm, .skt  
application/vnd.liberty-request+xml    
application/vnd.llamagraphics.life-balance.desktop .lbd  
application/vnd.llamagraphics.life-balance.exchange+xml .lbe  
application/vnd.lotus-1-2-3 .123  
application/vnd.lotus-approach .apr  
application/vnd.lotus-freelance .prz  
application/vnd.lotus-notes .nsf  
application/vnd.lotus-organizer .or3, .or2 (older form), .org (older form)  
application/vnd.lotus-screencam .scm  
application/vnd.lotus-wordpro .lwp  
application/vnd.marlin.drm.mdcf .mdc  
application/vnd.mcd .mcd  
application/vnd.mediastation.cdkey .cdkey  
application/vnd.meridian-slingshot    
application/vnd.mfmp .mfm  
application/vnd.micrografx.flo .flo  
application/vnd.micrografx.igx .igx  
application/vnd.mif .mif  
application/vnd.minisoft-hp3000-save    
application/vnd.mitsubishi.misty-guard.trustweb .any  
application/vnd.Mobius.DAF .daf  
application/vnd.Mobius.DIS .dis  
application/vnd.Mobius.MBK .mbk  
application/vnd.Mobius.MQY .mqy  
application/vnd.Mobius.MSL .msl  
application/vnd.Mobius.PLC .plc  
application/vnd.Mobius.TXF .txf  
application/vnd.mophun.application .mpn  
application/vnd.mophun.certificate .mpc  
application/vnd.motorola.flexsuite    
application/vnd.motorola.flexsuite.adsi    
application/vnd.motorola.flexsuite.fis    
application/vnd.motorola.flexsuite.gotap    
application/vnd.motorola.flexsuite.kmr    
application/vnd.motorola.flexsuite.ttc    
application/vnd.motorola.flexsuite.wem    
application/vnd.mozilla.xul+xml .xul  
application/vnd.ms-artgalry .cil  
application/vnd.ms-asf .asf  
application/vnd.ms-cab-compressed .cab  
application/vnd.mseq .mseq  
application/vnd.ms-excel .xls  
application/vnd.ms-fontobject .eot  
application/vnd.msign .ims  
application/vnd.ms-ims .ims  
application/vnd.ms-irm .irm  
application/vnd.ms-powerpoint .ppt  
application/vnd.ms-project    
application/vnd.ms-tnef    
application/vnd.ms-works    
application/vnd.ms-wpl .wpl  
application/vnd.musician .mus  
application/vnd.music-niff    
application/vnd.nervana .ent, .entity, .req, .request, .bkm, .kcm  
application/vnd.netfpx .fpx  
application/vnd.noblenet-directory .nnd  
application/vnd.noblenet-sealer .nns  
application/vnd.noblenet-web .nnw  
application/vnd.nokia.landmark+xml    
application/vnd.nokia.landmark+wbxml    
application/vnd.nokia.landmarkcollection+xml    
application/vnd.nokia.radio-preset .rpst  
application/vnd.nokia.radio-presets .rpss  
application/vnd.novadigm.EDM .edm  
application/vnd.novadigm.EDX .edx  
application/vnd.novadigm.EXT .ext  
application/vnd.obn .ndc  
application/vnd.omads-email+xml    
application/vnd.omads-file+xml    
application/vnd.omads-folder+xml    
application/vnd.osa.netdeploy    
application/vnd.osgi.dp .dp  
application/vnd.palm .prc, .pdb, .pqa, .oprc  
application/vnd.paos.xml    
application/vnd.pg.format .str  
application/vnd.pg.osasli .ei6  
application/vnd.piaccess.application-licence .pil  
application/vnd.picsel .efif  
application/vnd.powerbuilder6 .pbd  
application/vnd.powerbuilder6-s .pbd  
application/vnd.powerbuilder7 .pbd  
application/vnd.powerbuilder75 .pbd  
application/vnd.powerbuilder75-s .pbd  
application/vnd.powerbuilder7-s .pbd  
application/vnd.preminet .preminet  
application/vnd.previewsystems.box .box, .vbox  
application/vnd.proteus.magazine .mgz  
application/vnd.publishare-delta-tree .qps  
application/vnd.pvi.ptid1 .pti, .ptid  
application/vnd.pwg-multiplexed .mht  
application/vnd.pwg-xhtml-print+xml .xhtml, .xhtm  
application/vnd.Quark.QuarkXPress .qxd, .qxt, .qwd, .qwt, .qxl, .qxb  
application/vnd.rapid    
application/vnd.RenLearn.rlprint    
application/vnd.ruckus.download    
application/vnd.s3sms    
application/vnd.sealed.doc .sdoc, .sdo, .s1w  
application/vnd.sealed.eml .seml, .sem  
application/vnd.sealed.mht .smht, .smh  
application/vnd.sealed.net    
application/vnd.sealed.ppt .sppt, .spp, .s1p  
application/vnd.sealed.xls .sxls, .sxl, .s1e  
application/vnd.sealedmedia.softseal.html .stml, .stm, .s1h  
application/vnd.sealedmedia.softseal.pdf .spdf, .spd, .s1a  
application/vnd.seemail .see  
application/vnd.sema .sema  
application/vnd.shana.informed.formdata .ifm  
application/vnd.shana.informed.formtemplate .itp  
application/vnd.shana.informed.interchange .iif  
application/vnd.shana.informed.package .ipk  
application/vnd.smaf .mmf  
application/vnd.sss-cod    
application/vnd.sss-dtf    
application/vnd.sss-ntf    
application/vnd.street-stream    
application/vnd.sus-calendar .sus, .susp  
application/vnd.svd    
application/vnd.swiftview-ics    
application/vnd.syncml.ds.notification    
application/vnd.syncml.+xml .xsm  
application/vnd.triscape.mxs .mxs  
application/vnd.trueapp .tra  
application/vnd.truedoc    
application/vnd.ufdl .ufdl, .ufd, .frm  
application/vnd.uiq.theme .utz  
application/vnd.uplanet.alert    
application/vnd.uplanet.alert-wbxml    
application/vnd.uplanet.bearer-choice    
application/vnd.uplanet.bearer-choice-wbxml    
application/vnd.uplanet.cacheop    
application/vnd.uplanet.cacheop-wbxml    
application/vnd.uplanet.channel    
application/vnd.uplanet.channel-wbxml    
application/vnd.uplanet.list    
application/vnd.uplanet.listcmd    
application/vnd.uplanet.listcmd-wbxml    
application/vnd.uplanet.list-wbxml    
application/vnd.uplanet.signal    
application/vnd.vcx .vcx  
application/vnd.vectorworks .mcd  
application/vnd.vidsoft.vidconference .vsc  
application/vnd.visio .vsd, .vst, .vsw, .vss  
application/vnd.visionary .vis  
application/vnd.vividence.scriptfile .vsc  
application/vnd.vsf .vsf  
application/vnd.wap.sic .sic .wbxml  
application/vnd.wap.slc .slc .wbxml  
application/vnd.wap.wbxml .wbxml  
application/vnd.wap.wmlc .wmlc  
application/vnd.wap.wmlscriptc .wmlsc  
application/vnd.webturbo .wtb  
application/vnd.wordperfect .wpd  
application/vnd.wqd .wqd  
application/vnd.wrq-hp3000-labelled    
application/vnd.wt.stf .stf  
application/vnd.wv.csp+xml    
application/vnd.wv.csp+wbxml .wv  
application/vnd.wv.ssp+xml    
application/vnd.xara .xar  
application/vnd.xfdl .xfdl, .xfd, .frm  
application/vnd.yamaha.hv-dic .hvd  
application/vnd.yamaha.hv-script .hvs  
application/vnd.yamaha.hv-voice .hvp  
application/vnd.yamaha.smaf-audio .saf  
application/vnd.yamaha.smaf-phrase .spf  
application/vnd.yellowriver-custom-menu .cmp  
application/vnd.zzazz.deck+xml .zaz  
application/voicexml+xml    
application/watcherinfo+xml .wif, .xml  
application/whoispp-query    
application/whoispp-response    
application/wita    
application/wordperfect5.1    
application/x400-bp    
application/xcap-att+xml    
application/xcap-caps+xml    
application/xcap-el+xml    
application/xcap-error+xml    
application/xhtml-voice+xml (Obsolete)    
application/xhtml+xml .xht, .xhtml, .html  
application/xml .xml  
application/xml-dtd .dtd, .mod  
application/xml-external-parsed-entity .xml, .ent  
application/xmpp+xml    
application/xop+xml .xop  
application/xv+xml    
application/zip .zip

[ Tiles(타일즈) ] - Spring 연동하기

■■■ Develop ■■■/[ Local ]
posted by 시드라엘 2011. 11. 23. 11:39

[ Tiles(타일즈) ] - 설명및 세팅 방법.

■■■ Develop ■■■/[ Local ]
posted by 시드라엘 2011. 11. 23. 11:36


============================================================================================================
타일즈(Tiles) 사용하기
============================================================================================================
--> 타일즈란? 한 화면 안에 여러개의 문서를 넣는 작업 (include와 유사한 기능이다.)

작업순서
1. web.xml 파일에 타일즈를 사용할 수 있도록 파라메터 정의

 <init-param>
  <param-name>chainConfig</param-name>
  <param-value>
   org/apache/struts/tiles/chain-config.xml
  </param-value>
 </init-param>

 등록한다.

2. 화면 구성 xml 파일을 작성한다.

 <tiles-definitions>
  <definition name="?1?" path="?2?">
   ?1? 요청 이름
   ?2? 보여줄 문서(메인 화면을 꾸며놓은 jsp 문서이름)
   <put name="?3?" value="?4?"/>
    ?3? 각 요소에 부여하는 적당한 이름
    ?4? 그 요소에 들어갈 내용이나 문서
     (직접 내용을 입력할 수도 있고, 다른 문서를 끼워넣을수도 있다.)
  </definition>
 </tiles-definitions>

 <tiles-definitions>
  <definition name="layout-main" path="layout.jsp">
   <put name="title" value="타일즈 사용"/>
   <put name="body" value="/body.jsp"/>
   <put name="header" value="/header.jsp"/>
   <put name="menu" value="/menu.jsp"/>
   <put name="footer" value="/footer.jsp"/>
  </definition>
 </tiles-definitions>

 저장위치는 항상 WEB-INF 밑에 저장해야 한다.

3. struts-config.xml 파일에 지금 만든 tiles 구성 xml 을 등록을 한다.

 <plug-in className="org.apache.struts.tiles.TilesPlugin">
  <set-property property="definitions-config" value="/WEB-INF/tiles-defs.xml"/>
  <set-property property="definitions-debug value="2"/>
  <set-property property="definitions-parser-details" value="2"/>
  <set-property property="definitions-parser-validate" value="true"/>
 </plug-in>

4. action 등록을 한다.

 <action path="요청방식" forward="사용할 타일즈이름"/>

 <action path="tiles-defs"
  forward="/main.jsp">
 </action>

5. 메인 문서를 꾸민다.
 이때 반드시 tiles 를 사용하기 위한 태그 라이브러리를 선언해줘야 한다.

 보통 문서와 똑같이 꾸미면 된다.
 단, 각 영역에는
  <tiles:getAsString  name="title" />
  ==> 타일즈 선언시 내용을 입력한 경우
  <tiles:insert   attribute="header"/>
  ==> 타일즈 선언시 문서를 입력한경우
 둘 중 하나를 이용해서 꾸미면 된다.

티스토리툴바