Javascript Dependency in Maven

Posted at 2014.03.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' 카테고리의 다른 글

Javascript Dependency in Maven  (0) 2014.03.19
url 파라미터 알아내기  (5) 2010.01.15

댓글 (Comment)

Name*

Password*

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

jQuery UI Datepicker IE 버그 해결...

Posted at 2011.08.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;
        }
    },




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

jQuery UI Datepicker IE 버그 해결...  (1) 2011.08.26
Eclipse + Aptana : jQuery Code Assist 사용하기  (12) 2010.03.25
  1. 도움받은이
    좋은 정보 감사합니다.
    해결 포인트를 찾는데 도움이 되었습니다.
    행복하세요~

댓글 (Comment)

Name*

Password*

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

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 문서 번갈아서 볼 수고는 좀 덜었네요 ㅎㅎ



'JavaScript > Ext JS' 카테고리의 다른 글

Eclipse + SpketIDE = Ext JS Code Assist 사용하기  (2) 2010.07.12
  1. 웹앱공부하면서 js코드힌트 어떻게 안되는 건가 고민했는데
    덕분에 수월하게 볼 수 있을 거 같습니다.
    좋은 정보 감사합니다^^
  2. 조성민
    좋은 정보 감사합니다~
    그런데 이렇게 사용할 경우 ExtJS관련 Code Assist 는 만족할 만 하지만
    alert와 같은 기본 스크립트(?) 등은 assist가 안되네요.. 혹시 방법 없을까요??

댓글 (Comment)

Name*

Password*

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

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
Eclipse + Aptana : jQuery Code Assist 사용하기  (12) 2010.03.25
  1. Lu
    감사합니다. 요즘 업무적으로 jQuery가 많은 부분 거론 되는 중이라..좋은 정보 담습니다.
  2. tpholic
    필요한정보 감사합니다.
  3. 13412
    흐흠 Ajax Libraies 가 ==> JavaScript Libraies 영역으로 넘어갔나보네요~

    이거 때문에 한참 망설이다가 설치하니 그 다음부터는 같네요 ㅎㅎ
  4. 엮인글 제블로그에 남길께여

    제가검색한여러블로그중에서 가장 깔끔하게나와있는듯 ㅋ
  5. sunnyKim
    많은 도움이 되었습니다. 감사합니다. ^^
  6. 구리구리
    깔끔하게 정리하셨네요, 블로그에 퍼갈께요~
  7. joys
    정말 좋은 정보네요~~감사합니다(__꾸벅)
  8. 이 게시물은 웹 프로그래머와 관련된 모든 새 개인 홈 페이지의 지원에 좋은 결실이며 그들이 연구하고 연습을 수행해야합니다.
  9. agapeuni
    좋은글 출처를 표시하고 블로그에 담아갑니다. ^^
  10. 아판타가 인스톨이 안될때 , 이 주소를 써보세요~

    http://download.aptana.com/studio3/plugin/install

    아판타 홈페이지에서 인스톨 실패했을 때 업뎃주소가 오래되면 인스톨이 안된다고 하네요~

댓글 (Comment)

Name*

Password*

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

url 파라미터 알아내기

Posted at 2010.01.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
url 파라미터 알아내기  (5) 2010.01.15
  1. 이고르
    좋은 정보 감사합니다.
  2. 아...뭔가 따로 함수가 있는줄 알고 검색하고 있었는데, 일일이 잘라줘야 하군요 ㅎㅎ
    고맙습니다 ^^
  3. agapeuni
    좋은글 출처를 표시하고 블로그에 담아갑니다. ^^
  4. KeyMuz
    감사합니다~~!!
  5. 출처를 밟히고 좋은 글을 담아갑니다..

댓글 (Comment)

Name*

Password*

Link (Your Website)

Comment

SECRET | 비밀글로 남기기