Clean Code that Works.

Air를 사용한 rss reader 만들어 보는중~~
이거하고 액션 스크립트도 봐야지~!


최근 자바스크립트 관련해서 ajax 공부하면서 꽤 깔끔하고 좋은 UI를 제공하는
자바스크립트 라이브러리를 발견했다.

바로 LivePipe 라는 자바 스크립트인데
프로토타입과 스크립타쿨러스를 기반으로 해서

탭, 윈도우, 스크롤바, 컨텐스트메뉴 등 약 8가지의 UI를 제공한다.

그중에서 윈도우와 탭을 현재 공부하고 있는 웹사이트에 적용해서 사용중인데
아주 깔삼해서 좋았다.

사용자 삽입 이미지

LivePipe


위 캡춰 화면과 같은 기능을 제공한다.

문법은 프로토타입을 기반으로 했기 때문에 프로토타입 사용하듯이 사용하면 된다.
API와 더불어 DOC 도 잘 정리되어 있고, 샘플도 어느정도 지원하기 때문에
샘플을 가지고도 사용할 수 있다.

결론적으로 사이트 주소는 http://livepipe.net/


프로토타입을 사용하여 AJax 프로그래밍을 할 경우 Ajax 로딩 인디케이터 컴포넌트를 사용하여 로딩중 이란 모습을 사용자에게 보여 줄 수 있다.

이것을 사용하기 위해서 Protoload.js 라는 파일이 필요한데, Prototype을 바탕으로 해서 만들어 졌기 때문에 Prototype.js 역시 필요하다.

Prototype.js 다운로드
Protoload.js 다운로드

위의 파일들을 다운로드 한 후 각각 폴더에 알맞게 위치 시킨 다음
protoload 폴더에는 protoload.js, protoload.css, bigBlackwaiting.gif, bigWaiting.gif, blackWaiting.gif, waiting.gif 파일이 있을 것이다.

protoload.css 는 css폴더로 옴겨주고 사용할 html, jsp 파일에서 임포트 하면 되고.
img 파일들도 imgs 폴더로 이동 시키고 css내에 img 파일 경로를 수정하면 사용 준비가 완료된다.

function imageSearch(fileName) {
    new Ajax.Request("imageRetrieval.action",
        {
            method : 'POST',
            parameters : { uploadFileName:fileName },
            onLoading  : function() {
                $('results').startWaiting('bigWaiting');
               },
            onSuccess : function(req) {
                viewResult(req);
            },
            onFailure : function() {
            },
            onComplete : function() {
                $('results').stopWaiting();
            }
        }
    );
}

이렇게 사용하게 되면
results 라는 id 를 가진 html 요소에 bigWaiting 이란 파일을 읽어와서 로딩 이미지를 보여주게 된다.

onLoading은 Ajax에서 요청을 실행시켰을때 실행 되는 것이고
onComplete는 Ajax 요청이 성공하던지 실패 했던지 마지막으로 실행되는 것이다.

사용자 삽입 이미지

BigWaiting.gif

사용자 삽입 이미지

waiting.gif


참고 하였던 아웃사이더님 블로그.

http://struts.apache.org/2.0.11.2/docs/tag-reference.html
스트럿츠 태그에 대한 설명이 있는 곳

설명이 약간 모자르긴 하다 .. -_-;;

jsp에서 맵을 출력해야 하는데 키와 값을 출력.
좀 헤매다가 jstl 태그에서 하는 방법을 보고 힌트를 얻었다.

<s:iterator value="mapData">
    ${key }
    ${value }
</s:iterator>
이렇게 하면 키와 값이 출력된다. 쉽자나 -_-


<s:property value="name" />
에서 property 태그는 value의 값을 OGNL로 평가한다.
#표시가 없는 OGNL 표현식 name은 루트 오브젝트의 property이다.
스트럿츠2에서 루트 오브젝트는 value stack이고 value stack 상단에 액션이 있으므로 "name"은 항상 액션의 property가 된다.
JSP EL의 ${name}과 같다.

<s:property value="#session.user" />
루트 오브젝트가 아닌 세션 맵의 user를 참조할 때는 위와 같이 "#"을 붙여서 오브젝트 이름과 프라퍼티 또는 맵의 키를 사용해서 참조한다. 루트 오브젝트의 프라퍼티만 프라퍼티 이름만으로 참조 할 수 있다.
JSP EL의 ${sessionScope.user }와 같다.

스트럿츠 2 태그에서 %{...}가 OGNL의 표현식이다. 즉 %{...}내의 텍스트는 OGNL 표현식으로 평가된다.
%{name}이라 하면 문자열 name이 아니고 name을 OGNL 표현식으로 평가한다..
따라서 %{name}은 액션의 name의 프라퍼티 값이 된다.

출처 : 차세대 MVC 스트럿츠2 프로그래밍
http://www.ognl.org/

게시판 하단 페이지 숫자 처리.

전체 갯수는 count 로 해서 구해와서 lastPage를 구한다.
한 번에 10개씩 출력한다. (제목, 글쓴이, 시간)

티스토리 페이지 처리 처럼 구현.
전체 페이지 갯수가 1보다 작으면, 이전 페이지, 다음페이지 비활성화.
전체 페이지 갯수가 1보다 크면, 이전 페이지만 비 활성화, 마지막 페이지 도착하면 다음페이지 비활성화전체 페이지 갯수가 5보다 크면
이전 페이지 | 1 | 2 | 3 | 4 | 5 | ...마지막페이지 | 다음페이지.
이런 형식으로 시작.
다음페이지 이동으로 페이지 갯수가 늘어나면 보여주는 페이지 갯수를 한개씩 늘려주고
이전 페이지 | 1 ... | 2 ~~~~ 10 | ...마지막페이지 | 다음페이지
이런 형식으로 작성 하도록 한다.

스트럿츠2 태그로 작성하기 위해 노력중.


사용할 자바 스크립트 파일.
ajax.js = 최범균님의 Ajax 프로그래밍에 있는 파일(ajax 연결 관련 및 이벤트 처리).
log.js = 로그 출력용 파일.

시나리오
text영역에 keyup 이벤트가 발생 했을 경우
text.value를 얻어 와서 ajax를 통해 실행 후 데이터베이스에 id 값이 있는지 없는지 비교.
window.onload = function() {
    var id = document.getElementById("id");
    // 특정 요소에 keyup 리스너를 등록
    ajax.Event.addListener(id, "keyup", idHandler, false);
}
// keyup이벤트가 발생하면 아래 메서드가 실행된다.
function idHandler(event) {
    //log(document.regist.id.value);
    var params = "id=" + document.regist.id.value;
    new ajax.xhr.Request("registIdCheck.action", params, viewInfo, "GET");
}
//idHandler에서 실행된 결과를 idCheck란 id를 가진 요소에 출력해준다.
function viewInfo(req) {
    if(req.readyState == 4) {
        if(req.status == 200) {
            var idCheck = document.getElementById("idCheck");
            idCheck.innerHTML = req.responseText;
        }
    }
}

스트럿츠2 + iBatis를 해서 개발중.

iBatis 소스
<select id="selectCheckUserId" parameterClass="string" resultClass="string">
        SELECT id FROM member WHERE id = #id#
</select>
이렇게 해서 sqlMap.queryForObjec("selectCheckUserId", param);
실행하게되면 반환 값으로 select 한 id 값을 얻어 올 수 있다.

struts2 소스
@Override
    public String execute() throws Exception {
        if (registerService.selectCheckUserId(id) == true)
            return SUCCESS;
        return INPUT;
    }

반환 값이 없으면 null 이 return 되기 때문에 이를 가지고 반환 값이 없으면 success를
반환값이 있으면 input을 리턴해서

<action name="registIdCheck" class="net.DBLab.www.register.action.RegistIdCheck">
            <result name="success">../html/register/idCheckOK.jsp</result>
            <result name="input">../html/register/idCheck.jsp</result>
</action>
각각 result에 매핑된 경로 대로 이동해서 값을 출력한다.
idCheckOK는 아이디를 사용 할 수 있습니다.
idCheck는 아이디를 사용할 수 없습니다를 각각 출력한다.

사용자 삽입 이미지

사용할 수 없을 경우

사용자 삽입 이미지

사용할 수 있을 경우



개발 툴 : Eclipse 3.3

사용 언어 : jsp, java, css, javascript.

사용 프레임 워크 :
Struts2, Struts_spring(Plug-in) 요거....인터셉터와 ServiceAware를 안만들어도 되니까. DI(Dependency Injection)이 가능. 사실 좀 햇갈림 .ㅋㅋ
디비 연결은 iBatis로 해서 사용.

중요 사항 : 디비설계 제대로 할것.

요구 사항 정리 -> 디비 설계 -> ui 구성 -> 디렉토리 구성 -> 패키지 정리
환경 설정 -> 구현 시작.

주의 사항 :
문서 잘 만들어 놓을 것.
되도록 테스트 주도 개발.
배운것 써먹을려고 신경쓸것.
코드 중복 배제.
디자인 패턴 사용할것.

개발 기간 : 최대 한달.
8월 전까지 완성 할것.

XPATH 로 검색하면.

속성값은 정확히 일치 하는것을 찾을 수 있고.
내용값은 검색어를 포함한 것을 찾을 수 있다.

예제 추가는 나중에 ㅋ

JSTM의 xml 태그 라이브러리를 이용해서 xml 문서를 파싱 하는 중에 발생한 에러.

java.lang.NoClassDefFoundError: org/apache/xpath/VariableStack

위와 같은 에러가 발생하였다. 구글링을 하여 찾아 보니깐 xalan.jar 파일이 없어서 그렇다구 한다.










[다운로드] <- 여기 사이트에 방문에서 xalan-j_2_7_0-bin-2jars.zip 파일을 다운로드 받은후 압축을 풀면
xalan.jar 파일이 보인데. 그런데 sax 파서에서 사용했던 xercesImpl.jar, xml-apis.jar 파일도 볼수가 있다
음.. -_-;;
일단 xalan을 WEB-INF/lib 폴더에 복사를 해서 문제를 해결 하긴 했으나..
xalan 하고 xerces는 머가 틀린거지 --;
xalan 파일 압축 푼 파일을 보니 xsltc.jar 파일도 있는데.. xstl 변환할때 쓰는건가 ㄱ-.
잘 모르겠다 --;