Whiteship's Note


[jQuery] 날짜 선택하기

View/JavaScript : 2009. 7. 8. 20:33


jQuery UI 위젯이 제공하는 기본 달력은 다음과 같습니다.


흠.. 이것까진 간단했습니다. 이 것을 이용한 태그 파일 두개를 만들었습니다. 하나는 검색 필드용 하나는 폼 필드용. 검색 필드는 get 방식으로 url뒤에 줄줄이 붙여서 가져올 것이고 폼 필드는 post 방식에서 사용하여 model의 특정 속성에 바로 바인딩 할 겁니다. 둘 다.. 자바스크립트 코드 부분은 다음과 같습니다.

    $(function() {
        $("#${id}").datepicker({
            dateFormat: 'yy/mm/dd',
            changeMonth: true,
            changeYear: true,
            yearRange: '${fromNS}:${toNS}'
         });
    });

적당한 포맷을 설정하고, 연도와 달을 좀 더 변경하기 쉽게 드랍다운으로 설정했고, 연도 범위를 설정했는데, 이 값은 태그에 전달해준 값을 쓰기로 했습니다. 값을 전달해 주지 않으면 기본값을 쓰도록 했지요.

복잡한건, 날짜 범위를 선택하는 것인데, 이건 Ajaxian에서 10가지 date picker중 하나로 선정된 filament group의 daterangepricker를 이용했습니다.


    $(function() {
        $("#${id}").daterangepicker({
            dateFormat: 'yy/mm/dd',
            datepickerOptions: {
                changeMonth: true,
                changeYear: true,
                yearRange: '${fromNS}:${toNS}'
            }
        });
    });

대충 이렇게 보여집니다. 옵션이 다양해서 이 녀석을 써봤습니다. 문제는 하나의 필드에 두 개 날짜 값을 넣어주고 있어서 DateRange라는 클래스를 만들고, DateRangePropertyEditor도 만들어줬습니다. DateRange 클래스는 테스트를 통해서 문자열 값을 생성자에 넣어줬을 때 제대로 동작하는지 확인을 해보았고, DRPE를 등록해서 돌아가는지 웹에서 확인도 해봤습니다.

이 녀석은 검색용 태그파일만 만들었는데.. 만들고 보니 날짜를 한 개만 받는 녀석이랑 용도가 겹치더군요. Today랑 Specific Date는 메뉴에서 빼고 싶어서 옵션들을 살펴봤는데 영~~ 시원찮네요. 흠.. 뺄 수 있을텐데 말이죠.


top

Write a comment.


스프링 WebContentGenerator로 자바스크립트 캐싱하기4

모하니?/Coding : 2009. 7. 8. 14:42


이번엔 정말 마지막이라는 느낌입니다.

스프링 ResourceEditor라는 PropertyEditor가 있었군요. ResourceEditor는 ResoruceLoader를 사용해서 Resource 인스턴스를 만드는데, 이 때 resourcePath의 prefix에 맞게 적절한 Resource 인스턴스를 만들어 줍니다. ResourceLoader가 읽어들이는 기본 prefix는 레퍼런스에 잘 설명이 되어 있으니 참고해 보시기 바랍니다. file:, classpath:, http: 입니다.

재미있는건, prefix가 붙어있지 않을 때 인데, 이 때는 applicationContext 객체의 타입을 보고서 기본 Resource 타입을 결정짓습니다. ClassPathApplicationContext인 경우에는 ClassPathResource로 보는거죠. WebApplicationContext인 경우에는 ServletContextResource로 봅니다. 따라서...

이전에 만든 컨트롤러에 전부 Stirng 타입 목록을 받고 type 또한 String으로 받아서 Resource를 판단하는 작업까지 했었다면, 이제 그 작업들은 전부 스프링이 기본으로 제공하는 ResourceEditor로 넘기고 List<Resource>를 받으면 끝납니다. 그렇다고 해서 xml에 별도로 등록해줘야 할 빈이 있는 것도 아니고, 이로인해 좀 더 유연한 설정이 가능해졌고, 설정이 짧아졌으며, 컨트롤러 코드도 줄어들었습니다.

    <bean name="/js.do" class="koma.base.main.JavaScriptController" p:cacheSeconds="300">
        <property name="jsResources">
            <list>
                <value>js/koma.js</value>
                <value>file:c:/springsource/workspace/koma/webapp/js/jquery-1.3.2.min.js</value>
                <value>js/jquery-ui-1.7.2.min.js</value>
            </list>
        </property>
    </bean>

테스트 삼아 이렇게 등록해 보았는데 잘 동작합니다. 이젠 정말 끝인 것 같다는 느낌이네요. 후훗

top

  1. Favicon of https://helols.tistory.com BlogIcon is윤군 2009.07.08 17:24 신고 PERM. MOD/DEL REPLY

    어려운 내용이라 태클은 pass ㅋㅋ
    수고했어요 ~~ㅋㅋㅋ

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2009.07.08 20:35 신고 PERM MOD/DEL

    스프링 Resource를 발표하고 싶다는거구나.
    잘해봐 파이팅!

    Favicon of https://helols.tistory.com BlogIcon is윤군 2009.07.08 22:27 신고 PERM MOD/DEL

    그러게요 ;;; 하음.. 발표 한번 해야 하는데;; 게을러 져버렸네요ㅠ ㄷㄷㄷ;; 계획~ ㄱㄱㅆ~

    Favicon of http://whiteship.tistory.com BlogIcon 기선 2009.07.08 23:22 PERM MOD/DEL

    스프링 Resource와 PropertyEditor까지 같이 발표하면 되겠네~
    고맙다. 잘 들을께!ㅋㅋ

Write a comment.


스프링 WebContentGenerator로 자바스크립트 캐싱하기3

모하니?/Coding : 2009. 7. 8. 13:04


2차 작업이 끝인 줄 알았으나... 컨트롤러에 직접 속성으로 js 리소스 위치 목록과 리소스 타입을 알려도록 설정할 수 있는 기능을 추가했습니다.

    <bean name="/js.do" class="koma.base.main.JavaScriptController" p:cacheSeconds="300">
        <property name="resourceType" value="servlet"/>
        <property name="jsResourceNames">
            <list>
                <value>js/koma.js</value>
                <value>js/jquery-1.3.2.min.js</value>
                <value>js/jquery-ui-1.7.2.min.js</value>
            </list>
        </property>
    </bean>

2차까지의 기능도 유효하고 위와 같이 컨트롤러에 리소스 타입과 리소스 path 목록을 넘겨주면 리소스 타입에 따라 적절한 스프링 Resource를 사용해서 파일들을 읽어줍니다.

이렇게 하면 성윤이가 2차 작업에서 말한대로 js가 여러 곳에 분산되어 있을 경우에 resourceType을 url로 설정하고, value에 js 리소스를 나타내는 url 목록을 주면 되겠습니다.

(흠... map 형태로 가야 하는 건가... 이 리소스는 이 타입 저 리소스는 저 타입... 설정하기도 귀찮을 테니 그냥 한 타입으로 가도록 하죠. 일단은.)

url 뒤에 붙이던 것 중에 고정적으로 사용하는 js의 경우 위와같이 컨트롤러에 설정해주고, 페이지에 따라 사용하고 안 하고 하는 것은 url 뒤에 붙여주면 되겠습니다.

기본 js만 사용하는 페이지에서는 이렇게..

<script language="JavaScript" src="/js.do"></script>

부가적인 js까지 사용하는 페이지에서는 이렇게..

<script language="JavaScript" src="/js.do?name=springsprout.js"></script>


top

Write a comment.


스프링 WebContentGenerator로 자바스크립트 캐싱하기2

모하니?/Coding : 2009. 7. 8. 11:12


어제의 문제들을 해결했습니다.

문제1 해결: 파일 경로 문제는 스프링 Resource를 이용해서 해결했습니다. 스프링이 제공하는 Resource 중에 ServletContextResource가 있는데, 웹 루트를 기준으로 리소스를 가져올 수 있도록 해주는 편리한 클래스입니다.

Resource jsFolderResource = new ServletContextResource(getServletContext(), getJsFolder());

이런식으로 사용하면 되는데 여기서 ServletContext 객체는 reqeust -> session -> servletRequest로 쭉쭉 타고가서 가져와도 되지만, AbstractController가 상속받은 WebContentGenerator가 상속받은 WebApplicationObjectSupport가 스프링의 ServletContextAware 인터페이스를 구현했기 때문에, 위와같이 getServletContext()만 호출하면 가져다 쓸 수 있습니다.

문제2 해결: 뷰에서 js를 요청할 때 사용하는 URL 중에서 프로토콜과 서버명을 빼고 리소스 부분만 보냈습니다.

        <script language="JavaScript" src="http://localhost:8080/js.do?name=koma.js&name=jquery-1.3.2.js">
        </script>

이상태에서

        <script language="JavaScript" src="js.do?name=koma.js&name=jquery-1.3.2.js">
        </script>

이렇게 말이죠. 잘 동작합니다~ 캬캬캬

아.. cacheSeconds 속성에 입력한 값은 밀리초가 아니라 정말 '초' 단위더군요. 자칫하면 예상보다 너무 오래 캐시를 유지하는 일이 발생할 수도 있습니다. 주의하세요~

자바스크립트 캐싱하기 끝!
top

  1. Favicon of https://helols.tistory.com BlogIcon is윤군 2009.07.08 12:38 신고 PERM. MOD/DEL REPLY

    js 파일이 다른 장비에 나누어져서 포팅되었을경우는 못쓰는거잖아요 ;;ㅋㅋ
    머 그런거 고려 안 한다면 PASS 영원히~ㅋㅋ

    Favicon of http://whiteship.me BlogIcon 기선 2009.07.08 12:56 PERM MOD/DEL

    3차 수정 들어갔다.

Write a comment.