'2.마크업언어' 카테고리의 글 목록

2.마크업언어

java xml 파일을 json 으로 변환하기

깃허브

https://github.com/stleary/JSON-java

메이븐 추가

http://mvnrepository.com/artifact/org.json/json/20140107

참고 :

http://blog.naver.com/yandul83/220432077444

http://stackoverflow.com/questions/1823264/quickest-way-to-convert-xml-to-json-in-java

pom.xml 추가

1
2
3
4
5
6
7
        <!-- To convert XML File in to JSON -->
        <!-- https://mvnrepository.com/artifact/org.json/json -->
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20140107</version>
        </dependency>
Colored by Color Scripter
cs

Controller (java) 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLEncoder;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import org.json.XML;
 
@RestController
public class ActualDealController {
 
    @Value("${test.dataGoKrKey}")
    private String dataGoKrKey;
 
    //아파트매매 실거래자료
    private static final String dataGoActualDeaAptTradeUrl = "http://openapi.molit.go.kr:8081/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTrade";//?_wadl&type=xml
 
    /**
     * api 통해 실거래가 가져오기
     * @param paramMap
     * @return
     * @throws Exception
     */
    @RequestMapping("/deal/getDealPrice.do")
    public Map<String, Object> getActualDealPrice(@RequestParam Map<String, Object> paramMap) throws Exception {
        System.out.println("### getActualDealPrice paramMap=>"+paramMap);
        Map<String, Object> resultMap = new HashMap<>();
 
        try {
 
            StringBuilder urlBuilder = new StringBuilder(dataGoActualDeaAptTradeUrl);
            urlBuilder.append("?"+URLEncoder.encode("ServiceKey", "UTF-8")+"="+dataGoKrKey);
            urlBuilder.append("&"+URLEncoder.encode("DEAL_YMD", "UTF-8")+"="+URLEncoder.encode(paramMap.get("DEAL_YMD").toString(), "UTF-8"));
            urlBuilder.append("&"+URLEncoder.encode("LAWD_CD", "UTF-8")+"="+URLEncoder.encode(paramMap.get("LAWD_CD").toString(), "UTF-8"));
 
            URL url = new URL(urlBuilder.toString());
 
            System.out.println("###url=>"+url);
 
            HttpURLConnection conn = (HttpURLConnection) url.openConnection();
            conn.setRequestMethod("GET");
            conn.setRequestProperty("Content-Type", "application/json");
            System.out.println("Response Code:"+conn.getResponseCode());
 
 
            BufferedReader rd;
            if (conn.getResponseCode() >= 200 && conn.getResponseCode() <= 300) {
                rd = new BufferedReader(new InputStreamReader(conn.getInputStream()));
            } else {
                rd = new BufferedReader(new InputStreamReader(conn.getErrorStream()));
            }
 
            StringBuilder sb = new StringBuilder();
            String line;
            while ((line=rd.readLine()) != null) {
                sb.append(line);
            }
            rd.close();
            conn.disconnect();
 
            org.json.JSONObject xmlJSONObj = XML.toJSONObject(sb.toString());
            String xmlJSONObjString = xmlJSONObj.toString();
            System.out.println("### xmlJSONObjString=>"+xmlJSONObjString);
 
            ObjectMapper objectMapper = new ObjectMapper();
            Map<String, Object> map = new HashMap<>();
            map = objectMapper.readValue(xmlJSONObjString, new TypeReference<Map<String, Object>>(){});
            Map<String, Object> dataResponse = (Map<String, Object>) map.get("response");
            Map<String, Object> body = (Map<String, Object>) dataResponse.get("body");
            Map<String, Object> items = null;
            List<Map<String, Object>> itemList = null;
 
            items = (Map<String, Object>) body.get("items");
            itemList = (List<Map<String, Object>>) items.get("item");
 
            System.out.println("### map="+map);
            System.out.println("### dataResponse="+dataResponse);
            System.out.println("### body="+body);
            System.out.println("### items="+items);
            System.out.println("### itemList="+itemList);
 
            resultMap.put("Result", "0000");
            resultMap.put("numOfRows", body.get("numOfRows"));
            resultMap.put("pageNo", body.get("pageNo"));
            resultMap.put("totalCount", body.get("totalCount"));
            resultMap.put("data", itemList);
 
        } catch (Exception e) {
            e.printStackTrace();
            resultMap.clear();
            resultMap.put("Result", "0001");
        }
 
        return resultMap;
    }
}
 
Colored by Color Scripter
cs

StringBuilder sb 출력하면 아래와 같이 xml 파일 형식이다.

이대로 java 에서 사용할 수 없기에...

org.json.JSONObject xmlJSONObj = XML.toJSONObject(sb.toString());

String xmlJSONObjString = xmlJSONObj.toString();

xml 파일 내용을 json 으로 파싱, string 으로 찍어보면 아래와 같다.

response 안에 header, body 가 있고

body 안에 items, numOfRows, pageNo, totalCount 가 있다.

items 안에 내가 얻고자 하는 "조회결과 목록=item들"이 있다.

여기서 item 들만 추출해 List<Map<String, Object>> 형식으로 담기 위해 위해 아래와 같이 작성한 것이다.

            ObjectMapper objectMapper = new ObjectMapper();

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

            map = objectMapper.readValue(xmlJSONObjString, new TypeReference<Map<String, Object>>(){});

            Map<String, Object> dataResponse = (Map<String, Object>) map.get("response");

            Map<String, Object> body = (Map<String, Object>) dataResponse.get("body");

            Map<String, Object> items = null;

            List<Map<String, Object>> itemList = null;

            items = (Map<String, Object>) body.get("items");

            itemList = (List<Map<String, Object>>) items.get("item");

저 깃허브는 찾았어도

pom.xml에 메이븐 dependency 추가하는거 찾는다고 오래걸렸다 ㅠ

JSTL 날짜형식 포맷팅 관련

JSTL API : http://java.sun.com/products/jsp/jstl/1.1/docs/tlddocs/index.html

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

- JSP 상단에 추가해야 하는 태그 라이브러리

fmt:parseDate : String 형을 받아서 워하는 포멧으로 자료형을 Date 형태로 변경 시켜 준다.

fmt:formatDate : Date 형을 받아서 원하는 포멧으로 날짜 형태를 변경시켜 준다.

ex)

<fmt:parseDate value="${applDt}" var="dateFmt" pattern="yyyyMMdd"/>

<fmt:formatDate value="${dateFmt}" pattern="yyyy-MM-dd"/>

20081113 이라는 String 형태의 날짜 데이터가 존재한다고 가정하고

이 String 형태의 날짜를 2008-11-13 으로 변경하고 싶을 경우 위의 예 처럼 사용하면 된다.

그 외에도 2008. 11. 13 이런 식으로도 변경도 가능하다. (자신의 입맛에 맛게 변경하여 사용하도록 하자.)

<fmt:parseDate value="${applDt}" var="dateFmt" pattern="yyyyMMdd"/>

formatDate 는 Date 형태의 자료형만을 받아 변경시키도록 되어 있다. 즉 String 형태의 자료를 Date 형태로

변환시켜 줘야 할 필요가 있는데 이때 사용하는 태그가 fmt:parseDate 이다.

1. value 속성에는 넘어오는 파라메터(변환하고자 하는 String)의 이름을 적고

2. var 에는 fmt:formatDate 에서 사용될 변수 이름을 적어주도록 하자.

3. pattern 에는 value 속성에 들어가는 String 형태의 자료가 어떤 형태로 포멧되어 있는것인지를 지정해야 한다.

즉, 넘어온 String 형태의 자료가 20081113 과 같이 포멧되어 있는 상태라면 yyyyMMdd 와 같이 적어준다.

2008-11-13 과 같이 포멧되어 있는 상태라면 yyyy-MM-dd 와 같이 적어주면 된다.

<fmt:formatDate value="${dateFmt}" pattern="yyyy-MM-dd"/>

1. value 에는 parseDate 에서 var 속성뒤 적은 변수명을 적어주도록 한다.

2. pattern 에는 자신이 원하는 포멧 형식을 적어주면 된다. (yyyy년 MM월 dd일 과 같이도 사용이 가능하다.)

[출처] JSTL 날짜 형식 바꾸기 (fmt:parseDate & fmt:formatDate)|작성자 lbiryu

http://lbiryu.blog.me/30037958388

<참고 추가>

https://www.tutorialspoint.com/jsp/jsp_standard_tag_library.htm

https://www.tutorialspoint.com/jsp/jstl_format_formatdate_tag.htm

https://www.tutorialspoint.com/jsp/jstl_format_parsedate_tag.htm

부트스트랩 modal 다른 페이지 내용 불러오기

아.. 모달 옵션 중 remote 가 부트스트랩 버전에 따라 사용이 불가능해지면서 jQuery.load 를 쓰라고 나와있어 검색을 엄청 해봤는데ㅠ

<a> 태그 href=url 은 스프링 프레임워크 url 로 호출해야 하고...

jsp화면 뿌리는건 또 Tiles로 이루어져 있어서...

엄청 헤매고 헤매다 시간만 하루가 멀다하고 허비하는 바람에 거의 포기 하고 있었는데...

이제서야 ㅠ 원하는대로 됐다...

어떻게 보면 엄청 간단한건데 기초가 부실하니 의미없는 타이핑과 새로고침만 하고 있었음..

참고 : http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=modal-with-remote-url

핵심은...

모달을 부르는 원래페이지에서는 .modal-content 까지만 선언하고...

서브페이지에는 .modal-head, .modal-body, .modal-footer 만 있으면 된다는거.

모달 부르는 jsp

1
2
3
4
5
6
7
8
9
10
11

<a data-toggle="modal" href="testForm.do" data-target="#modal-testNew" role="button" data-backdrop="static">
 <span class="btn btn-xs btn-success">테스트 등록</span>
</a>
 
 
<div id="modal-testNew" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="테스트정보 등록" aria-describedby="테스트 모달">
    <div class="modal-dialog" style="width:1200px;height:700px">
        <div class="modal-content">
        </div>
    </div>
</div>
Colored by Color Scripter

cs

모달 본체 jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">×</button>
    <h3 class="smaller lighter blue no-margin modal-title">검수정보 등록</h3>
</div>
 
<div class="modal-body">
    테스트입니다.                     
</div>
 
<div class="modal-footer">
    <span class="btn btn-sm btn-warning" id="testDel">
        전체삭제<i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
    </span>
    <span class="btn btn-sm btn-success" id="testSave">
        저장<i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
    </span>
    <button class="btn btn-sm btn-danger pull-right" data-dismiss="modal" id="btnClose">
        <i class="ace-icon fa fa-times"></i>닫기
    </button>
</div>
Colored by Color Scripter

cs

스프링 프레임워크 java

1
2
3
4
5
6
7
8
9

@RequestMapping(value="/testForm", method=RequestMethod.GET)
public String testForm(HttpServletRequest request, @RequestParam Map<String, Object> param, Model model) throws Exception {
    if (!adminMemberService.isPermit(AdminMember.WEB)) {
        return "/admin/permission.noTiles";
    } else {
        model.addAttribute("permission", adminMemberService.getPermission());
    }
    return "/admin/sale/testForm.noTiles";
}
Colored by Color Scripter

cs

'2.마크업언어' 카테고리의 다른 글

부트스트랩 modal 사용하기 (1)	2016.07.07

부트스트랩 modal 사용하기

w3schools나 bootstrap 공식홈페이지를 잘 참고하고 있지만, 매번 까먹어서 이참에 정리를 해본다.

1. 모달 띄우는 방법

모달에 트리거를 거는 방법은 두 가지가 있다.

<a>태그나 <button>, 혹은 다른 element 에 data-toggle, data-target 옵션을 걸어 띄우거나

자바스크립트를 직접 작성하여 띄울 수 있다.

먼저 id="myModal"은 아래와 같고,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
Colored by Color Scripter

cs

myModal을 띄우는 두 가지 방법은 아래에서 좀 더 자세하게 알아보자.

<a>태그나 <button>, 혹은 다른 element 에 data-* 속성 사용해서 모달 띄우기 (출처: w3schools)

1
2
3
4
5
6
7
8

<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
 
<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>
 
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>

cs

이때, data-toggle 옵션은 항상 필요하며

<a>태그의 경우에만 data-target 대신 href 를 사용할 수 있다.

만약 배경을 클릭해도 모달이 닫히지 않게 하려면 data-backdrop="static" 같은 옵션을 이 때 써도 된다.

별도의 자바스크립트는 필요하지 않다.

자바스크립트로 띄우기 (출처: w3schools)

html

1

<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>

cs

별도의 data-* 속성들은 사용하지 않는다.

JavaScript

1
2
3
4
5
6
7

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal();
    });
});
</script>

cs

2. 모달 작성하기

모달은 아래 클래스들의 div영역들이 모여서 만들어진다.

.modal

.modal-dialog

.modal-content

.modal-header
.modal-body
.modal-footer

.modal

여러 div가 모여 이뤄진 모달에서 부모div이다.

모달들간 구별을 위해 id를 지어줘야 한다. 이 id는 트리거영역의 data-target에 오는 id이다. (예. myModal)

화면에서 focus를 가져오는 역할을 한다. 따라서 모달을 닫을때 애니메이션 효과를 주는 클래스 .fade 를 넣을 수 있다.

화면을 보는사람들에게 좀더 접근을 쉽게 하기 위해 role="dialog" 속성을 줄 수 있다.

(출처: bootstrapk.com)

1

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

cs

role="dialog", aria-labelledby="myModalLabel" -> 모달 제목을 알린다

aria-hidden="true" -> 모달의 DOM 요소를 건너뛰는 것을 보조 공학에게 전달하기 위해
aria-describedby -> 모달 다이얼로그의 설명을 넣을 수 있다

.modal-dialog

모달의 width, height 가로세로 크기를 결정한다.

모달의 크기를 조절하는 클래스는 .modal-sm, .modal-lg 가 있다. (Default는 medium 사이즈다.)

(출처: w3schools)

1

<div class="modal-dialog modal-sm">

cs

1

<div class="modal-dialog" role="document">

role="document" -> 무슨 역할인지...

.modal-content

모달의 스타일(border, background-color 등)을 결정한다.

.modal-content 안에는 모달의 헤더, 바디, 푸터가 온다.

.modal-header

1
2
3
4
5

<div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">×</span></button>
 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
Colored by Color Scripter

cs

class="close" -> x 버튼 스타일 결정

data-dismiss="modal" -> x아이콘을 클릭하면 모달이 닫히도록 한다

class="modal-title" -> 헤더에 적당한 line-height 스타일을 결정

.modal-body

마크업언어를 자유롭게 쓸 수 있다.

부트스트랩 그리드를 이용하려면 .row 를 사용하면 된다.

(출처: getbootstrap.com)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="modal-body">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
  </div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  </div>
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-xs-8 col-sm-6">
          Level 2: .col-xs-8 .col-sm-6
        </div>
        <div class="col-xs-4 col-sm-6">
          Level 2: .col-xs-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>
Colored by Color Scripter

cs

.modal-footer

오른쪽 정렬이 기본이다.

modal 전체 소스 (출처: bootstrapk.com)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
 
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
Colored by Color Scripter

cs

3. 모달 옵션 및 메소드

'2.마크업언어' 카테고리의 다른 글

부트스트랩 modal 다른 페이지 내용 불러오기 (0)	2016.07.07

PREV 1 NEXT

깨순이네

Menu

Category

Notice

Recent comments

Links