Javascript Dependency in Maven

Posted at 2014. 3. 19. 19:22 | Posted in JavaScript
반응형

http://www.webjars.org/


보통 메이븐을 통해서 자바 라이브러리(jar)들간의 의존 관계를 해결한다.


하지만 자바스크립트 라이브러리는 이런게 없다. 어디선가 js 파일 받아서 웹 소스에다가 놓고 써야한다.


예를 들어 "jQuery UI"를 써야 하면 jquery.ui.js 파일 받고 "jQuery UI"가 필요로 하는 jquery.js 를 구해서 넣어야한다.



<script type="text/javascript" src="js/static/jquery-1.11.0.min.js" ></script>

<script type="text/javascript" src="js/static/jquery-ui.min.js" ></script>


근데! 누군가가 메이븐으로 자바스크립트 라이브러리의 의존 관계를 관리할 수 있도록 했다.

이 기발한 원리는 이러하다. ㅋㅋ


1. /META-INF/ 안에 js 파일들을 넣은 jar 파일을 만들어서 메이븐으로 쓸 수 있도록 한다.

2. 프레임워크마다의 방법으로 classpath 안의 js 파일들을 웹상에서 쓸 수 있도록 한다.


pom.xml 에 아래와 같이 jquery-ui 를 추가하면


<dependency>

<groupId>org.webjars</groupId>

<artifactId>jquery-ui</artifactId>

<version>1.10.3</version>

</dependency>


아래와 같이 jquery 까지 다운로드 받게 된다.



실제 jar 내용을 보면 아래와 같이 js 와 관련된 파일들이 들어있다. (requireJS도? 들어있네 ㄷㄷ)



Spring 3의 mvc 네임스페이스를 이용하면 쉽게 설정 가능하다. (다른 방법은 http://www.webjars.org/documentation 참조)


<mvc:resources mapping="/js/static/**" location="classpath:/META-INF/resources/webjars/" />


html 에서는 리소스의 경로에 맞게 해주면 되겠다.


<script type="text/javascript" src="js/static/jquery/1.9.1/jquery.min.js" ></script>

<script type="text/javascript" src="js/static/jquery-ui/1.10.3/ui/minified/jquery-ui.min.js" ></script>


web-jars.war

 ↑ 소스 포함 war


web-jars.zip

 ↑ 이클립스 메이븐 프로젝트


반응형
저작자표시

'JavaScript' 카테고리의 다른 글

url 파라미터 알아내기  (5) 2010.01.15
//

jQuery UI Datepicker IE 버그 해결...

Posted at 2011. 8. 26. 14:27 | Posted in JavaScript/jQuery
반응형
jquery ui 중 Datepicker 라는 것이 있습니다. 날짜를 선택할 수 있게 해주는 UI 입니다.

요게 잘 되는 것 같지만 IE(Internet Explorer)에서는 약간의 문제가 있습니다.

사용할 수 없을 정도는 아니고 날짜를 선택 했는데 달력이 또 나오게 됩니다.




1. 해당 텍스트 입력에 포커스가 가게 됩니다.

2. 달력(datepicker)창이 열립니다.

3. 날짜를 하나 선택합니다.

4. 창이 닫힙니다.

5. 해당 텍스트 입력으로 포커스가 다시 갑니다.

2. 달력(datepicker)창이 열립니다.

이와 같이 달력 밖 영역을 클릭해서 없애지 않는한 무한 날짜 선택이 됩니다. -_-;;

그냥 냅둬도 되지만... 찜찜해서 아예 포커스를 안주게 수정 하였습니다.

    /* Update the input field with the selected date. */
    _selectDate: function(id, dateStr) {
        var target = $(id);
        var inst = this._getInst(target[0]);
        dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
        if (inst.input)
            inst.input.val(dateStr);
        this._updateAlternate(inst);
        var onSelect = this._get(inst, 'onSelect');
        
        if (onSelect)
            onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);  // trigger custom callback
        else if (inst.input)
            inst.input.trigger('change'); // fire the change event
        if (inst.inline)
            this._updateDatepicker(inst);
        else {
            this._hideDatepicker();
            this._lastInput = inst.input[0];
            // 포커스를 주지 않는다.
            // inst.input.focus(); // restore focus
            // 포커스 해제
            inst.input.blur();
            this._lastInput = null;
        }
    },



jquery.ui.datepicker.js


반응형
저작자표시

'JavaScript > jQuery' 카테고리의 다른 글

Eclipse + Aptana : jQuery Code Assist 사용하기  (12) 2010.03.25
//

Eclipse + SpketIDE = Ext JS Code Assist 사용하기

Posted at 2010. 7. 12. 09:02 | Posted in JavaScript/Ext JS
반응형
Eclipse + Apatana 를 이용하여 jQuery Code Assist를 사용하다가, Ext JS도 지원하길래 써봤는데 별로 기능이 쉬원치 않더군요...

그래서 ExtJS를 지원하는 다른 것을 찾았습니다~

http://www.spket.com/

Ext JS 외에 다른 것(jQuery, Flex, 등)도 이것저것 지원되네요.

Installation

Eclipse Galileo 에서 설치하였습니다.

일단 Ext JS 라이브러리가 어딘가에 있어야 합니다.


Help - Install New Software...



Add 클릭



http://www.spket.com/update/ 등록

Spket IDE 선택



Next



Finish



플러그인 설치 후 이클립스를 재시작 합니다.

WIndow - Preferences



Spket - JavaScript Profiles

New... 클릭



Name 입력



추가한 이름(ExtJS) 선택 후 Add Library 클릭



Library를 ExtJS로 선택합니다.



추가된 라이브러리 선택 후 Add FIle 클릭



Ext JS 라이브러리 파일들 중에 ext.jsb2 파일을 선택합니다.



잘 등록 되었습니다.



ExtJS를 선택 하고 Default를 클릭하여 기본 프로파일이 되게 하니다.



General - Editors - File Associations 에서 *.js 파일의 편집기를 Spket JavaScript Editor로 설정합니다.



이제 js 파일을 작성해봅시다.

만족할 만큼 Code Assist 기능이 작동 하는군요 ㅎㅎ



API 문서 번갈아서 볼 수고는 좀 덜었네요 ㅎㅎ



반응형
저작자표시
//

Eclipse + Aptana : jQuery Code Assist 사용하기

Posted at 2010. 3. 25. 23:12 | Posted in JavaScript/jQuery
반응형
Introduction

jQuery 공부를 시작하기에 앞서 툴을 세팅합시다.. -_-v

Eclipse Galileo + Apatna 를 사용하여 jQuery Code Assist를 사용해 봅시다.

http://www.aptana.org


Installation Plugin

Help - Install New Software 클릭




http://download.aptana.org/tools/studio/plugin/install/studio 를 등록 후 Aptana Studio 를 선택합니다.




Next 클릭




라이센스 수락 후 Finish 클릭




경고가 나오는군요... 깔끔하게 패스!




이클리스를 재시작 합니다.




파이어폭스가 필요하다네요...




Install Aptana Features

Aptana 플러그인을 설치했다고 바로 되는게 아닙니다.

jQuery 를 지원하기 위해 플러그인 설치해야 합니다.

도구 모음에 보면 Aptana Studio 관련 아이콘이 몇 개 생겼습니다.

Install Aptna Features 를 클릭합니다.




여러가지 라이브러리를 많이 지원하네요!

Ajax Libraries - jQuery Support 를 선택 후 Install 버튼을 클릭합니다.




플러그인 설치 화면으로 넘어갑니다.

Ajax Frameworks - Aptana Support for jQuery 선택 후 Next 버튼을 클릭합니다.




Finish 클릭




플러그인 설치 - 이클립스 재시작 후 WIndow - Preferences 클릭




Aptana - Editors - JavaScript - Code Assist 메뉴에서 jQuery를 선택합니다.




js 파일을 편집하면 편집기가 Aptana 편집기인 것을 확인할 수 있습니다.

잘 되는군요 ㅎㅎㅎ




만약 편집기가 설치 전의 그냥 보통 편집기일 경우 설정에서 변경해줘야 합니다.




사용해본 결과(jQuery, ExtJS) 생각보다는 그렇게 잘 Code Assist 가 되지는 않는것 같네요.. 특히 ExtJs... ㅠ_ㅠ
반응형
저작자표시

'JavaScript > jQuery' 카테고리의 다른 글

jQuery UI Datepicker IE 버그 해결...  (1) 2011.08.26
//

url 파라미터 알아내기

Posted at 2010. 1. 15. 23:32 | Posted in JavaScript
반응형
wGET 방식으로 넘오어는 url 에서 파라미터를 뽑아내주는 스크립트입니다.

원리는 현재 페이지의 url 을 짜르고 돌리고 짜르고 해서 하나의 배열에 담아주는 겁니다.. ^^;

function getParams() {
    // 파라미터가 담길 배열
    var param = new Array();
 
    // 현재 페이지의 url
    var url = decodeURIComponent(location.href);
    // url이 encodeURIComponent 로 인코딩 되었을때는 다시 디코딩 해준다.
    url = decodeURIComponent(url);
 
    var params;
    // url에서 '?' 문자 이후의 파라미터 문자열까지 자르기
    params = url.substring( url.indexOf('?')+1, url.length );
    // 파라미터 구분자("&") 로 분리
    params = params.split("&");

    // params 배열을 다시 "=" 구분자로 분리하여 param 배열에 key = value 로 담는다.
    var size = params.length;
    var key, value;
    for(var i=0 ; i < size ; i++) {
        key = params[i].split("=")[0];
        value = params[i].split("=")[1];

        param[key] = value;
    }

    return param;
}


사용법은 음....

// 현재 url: http://[domain]/exam.jsp?page=1&title=antop&sid=orcl

var p = getParams();
alert(p["title"]);    // antop
alert(p["page"])   // 1

반응형
저작자표시

'JavaScript' 카테고리의 다른 글

Javascript Dependency in Maven  (0) 2014.03.19
//

티스토리툴바