Whiteship's Note


진부한 멘트는 가라... 달콤한 스윙이여 오라~



사실 스크린캐스팅의 묘미는 음성 보다는 화면입니다. blip.tv에 동영상을 올리는 이유도 고해상도 1280*1024를 지원하기 때문이죠. 요즘은 유투브도 HQ 버전이 있던데 안써봐서 모르겠습니다. 동영상 편집을 잘 하면 저해상도 동영상 서비스에서도 소스코드가 잘보이게 올릴 수 있겠지만.. 귀찮아서 원..;

아.. 주제는 그게 아니라. 멘트에 관한 것이었습니다. 사실 이해가 필요한 부분은 멘트가 필요하긴 하지만, 그 외에 간단한 것들은 멘트 없이 보는게 오히려 귀에 걸리적 거리지 않고 좋습니다. 처음 스크린 캐스팅을 찍을 때는 선풍기 소리나, 기침 소리 한 번에도 다시 찍기를 수도 없이 했었지만... 요즘은 뭐.. 중간 중간 실수를 해도 그냥 찍고 넘어가 버리는데 익숙해졌습니다.

아. 다시 또 이상한 곳으로 새는데.. 그래서. 멘트를 없애고 음악을 넣어봤습니다. 재밌더군요. 녹화도 음성없이 하니까 부담스럽지 않아서 좋았고, exporting 할 때 걸리는 시간도 줄어들었습니다. 저는 오직 맥북에서만 스크린 캐스팅을 제작하는데, 맥이 이쁘기 때문이죠. 동가면 다홍치마라잖아요. 후훗..

제가 스크린캐스팅을 제작하는 방법을 덤으로 말씀드리자면...

1. Screen Flow로 녹화 및 Export to MOV 고화질


2. VisualHub로 MOV to FLV


3. blip.tv에 업로드


이런 순서 입니다. 중간에 MOV를 FLV로 바꾸지 않고 바로 blip.tv에 올리면 blip.tv에서 자동으로 변환해주기도 하는데, 이 변환 작업이 길어지면 도중에 에러가 납니다. 유료 사용자가 아니여서 서버에서 인코딩을 다시 해주질 않습니다. 그래서 안전하게 아예 플래시 파일로 변환하는 두 번째 과정이 필요합니다.

Screen Flow에서 FLV로 export를 해주면 좋을텐데... 1.5 버전에서도 아직 안되는 듯 하네요..

그렇게 해서 만들어본 동영상 입니다.



top

Write a comment.


스프링 JSON view와 jQuery 이용하여 자동완성 기능 만들기 4

모하니?/Coding : 2009. 7. 14. 18:35


마무리로 태그 파일화 작업을 했습니다.

             <o:textwithac label="이름" id="name" size="20" maxlength="30"
                 url="/ajax/user/names.do" model="users" width="200" selectFirst="true" />

이런 태그와..

<script type="text/javascript">
function formatItem(row, i, total){
    return row[1] + " " + row[2];
}
function formatResult(row){
    return row[1];
}
function result(event, row, formatted){
    if (row){
        $("#namedetail").text(row[0] + " " + row[2]);
    }
}
</script>

자바스크립트 함수 세 개로 자동완성 기능을 사용할 수 있습니다.

속성 중에서

url="/ajax/user/names.do" model="users" width="200" selectFirst="true"

이 녀석들이 자동완성과 관련된 속성들이며..

formatItem은 자동완성 목록을 어떤 형태로 보여줄지 코드를 작성해주면 되는데, 이 때 row는 현재 데이터 row이고, i는 인덱스, total은 총 갯수 입니다.

formatResult는 자동완성 목록에서 선택했을 때 text input 박스에 최종적으로 입력할 값을 return하도록 합니다.

마지막으로 result는 자동완성 목록을 선택했을 때 후 처리 이벤트 같은 것으로, result 타입의 이벤트와, 선택한 데이터 row, 그리고 formatResult에서 input 필드에 입력되도록 포맷팅한 값입니다. 이 녀석들을 이용해서 적당하게 코딩해주면 되겠습니다. 예제에서는 namedetila이라는 엘리먼트에 부가정보를 기입해주었습니다.



top

Write a comment.


스프링 JSON view와 jQuery 이용하여 자동완성 기능 만들기 3

모하니?/Coding : 2009. 7. 14. 16:25


조금 더 개선해서, 화면에서 검색 조건을 한 글자 한 글자 입력하면, 해당 글자를 가지고 있는 모든 것들을 검색해 올지.. 아니면, 해당 글자로 시작하는 것들을 가져올지 설정할 수 있는 기능을 서버쪽과 연결 했습니다.

    $("#name").autocomplete("/ajax/user/names.do", {
        minChars: 1,
        width: 200,
        max: 100,
        model: "users",
        delay:10,
        selectFirst: true,
        formatItem: function(row, i, total) {
            return row[1] + " " + row[2];
        },
        formatResult: function(row){
            return row[1];
        }
    });

화면에서는 selectFirst의 값만 바꾸면 되지만, 저 값이 서버에서 검색을 할 때도 영향을 줘야 하기 때문에, 저 값을 서버로 보내도록 jquery autocomplete js를 수정했습니다. jqeury ajax의 getJSON 함수에 서버로 보낼 parameter 목록을 보낼 수 있기 때문에 이건 뭐 아주 간단하게 수정할 수 있었습니다.

그런 다음 컨트롤러에서 이 값을 받아서 Serivce -> Dao 로 쭉쭉쭉 보내면 되는데.. 

public ModelAndView userNames(ModelMap map, String keyword, Boolean selectFirst)

이런 시그너처 만으로도 바인딩이 된다는 건 스프링 MVC 유저라면 당연히 아시리라 생각합니다. 문제는 저게 계속 길어질 우려가 있다는 거죠. 그래서 AjaxParams라는 클래스를 만들고 자바빈 스펙에 맞게 게터, 세터를 추가해준 다음 컨트롤러의 메서드 시그너처를 다음과 같이 바꿨습니다.

public ModelAndView userNames(ModelMap map, AjaxParams ajaxParams)

짜잔... 이렇게 해도 스프링 MVC는 똑똑해서 자동으로 바인딩 해줍니다. 그럼 이제 service랑 dao에는 ajaxParam을 넘겨주고 저기서 값을 꺼내서 검색해오면 되겠습니다.

이정도면.. 이제 대충 쓸만하게는 만든 것 같습니다.
혹시 모르죠. 뭔가 또 빠져서 다시 손을 대야할지도..


top

Write a comment.


스프링 JSON view와 jQuery 이용하여 자동완성 기능 만들기 2

모하니?/Coding : 2009. 7. 14. 15:32


jQuery 플러그인 중에 autocomplete가 있는데, 이 녀석은 배열을 사용하기 때문에 URL에서 넘어온 JSON 데이터를 제대로 인식하지 못할 뿐더러, JSON을 인식한다쳐도 스프링 JSONView가 만들어주는 JSON에서 모델이름으로 값을 꺼내와야 하는데, 그런 장치가 전혀 없기 때문에... 뜯어 고쳤습니다.

새로운 option을 추가하고, Ajax 요청을 보내는 부분을 고치고, Ajax로 받아온 데이터를 파싱하는 부분을 수정했더니 잘 동작했습니다. 스프링 JsonView에 특화된 jQuery 자동완성 플러긴으로 보면 되겠군요.


목록에 보여줄 형태를 옵션으로 지정해 줄 수 있어서 이름 + " " + 이메일 형태를 보여주도록 설정했습니다. 넓이도 조정할 수 있으니.. 글자가 잘리지 않게 너비를 조정할 수도 있겠네요.

자세한 옵션은 http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

여러가지 사용 예제는 http://jquery.bassistance.de/autocomplete/demo/

모든 옵션을 확인하진 않았지만, 대부분의 옵션(목록 갯수 설정, 검색할 때 필요한 최소 글자 수, 등등등)이 제대로 동작했습니다.

기본으로 화살표 이동도 되고, 캐싱도 지원해주니.. 이 정도면 썩 괜찮으 듯 합니다. 선택이 했을 때는 선택한 데이터 row를 가지고 function을 실행할 수 있게 해주는데, 그걸 이용해서 입력한 값 주변에 기타 정보를 출력하도록 만들 수 있었습니다.

그러나 한글값을 넘겨봤더니 깨지더군요. 그래서 encodeURIComponent()로 값을 감싸서 UTF-8로 보냈습니다. 그런 다음 컨트롤러에서 받아서 디코딩을 했죠.

keyword = URLDecoder.decode(keyword,"UTF-8");

디코딩 하는 방법은 성윤이가 도와줬습니다. 흠.. 사부님 말씀으로는 이렇게 UTF-8로 인코딩/디코딩 하지 않고도 처리할 수 있는 방법이 있는 것 같은데.. 일단 거기까진 신경쓰지 않기로 했습니다. 지금도 충분히 어지러우니까요. @_@

라이선스가 GPL하고 mit 라이선스던데 소스를 공개해야 라이선스를 위반하지 않는거 아닌지 모르겠네요. 대충 고친건데.. 흠..

이젠 테스트 데이터를 왕창 넣고 확인해 봐야겠습니다.
top

  1. Favicon of http://starplatina.tistory.com BlogIcon reperion 2009.07.28 16:13 PERM. MOD/DEL REPLY

    jquery가 기본적으로 파라미터를 보낼 때 encodeURIComponent()로 싸서 보내게 되어 있습니다.
    jquery.js 파일 param: 으로 검색 해 보시면 확인하실 수 있는데요.

    저같은 경우는 web.xml에 인코딩 필더를 euc-kr에서 utf-8로 바꿔 주니깐 잘 동작 하더라구요.
    만약 euc-kr로 인코딩 필터를 계속 쓸려면
    자바스크립트에선 utf-8로 보내 주고 필터에서 euc-kr로 변경 하니깐 euc-kr로 디코딩한 다음에
    다시 utf-8로 디코딩 하면 될려나..요? 에고 -,.-

    여튼 다른거 없어 인코딩 필터만 utf-8로 하니깐 잘 됬습니다.
    FF에서는 인코딩 필터 변경없이 잘 되지만 IE8에서는 필터 변경해야 되네요.
    IE 참 -,.-

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2009.07.28 21:09 신고 PERM MOD/DEL

    엇.. 그렇군요.

    어차피 태그파일로 만들어 둬서 한 군대만 수정하면 되는데.. 한 번 encodeURIComponent() 이거 빼고 보내봐야겠네요.

    감사합니다~

Write a comment.