조선일보 사절 It's better to burn out than to fade away

출처 : http://mattberseth.com/blog/2007/05/ajaxnet_example_using_an_updat.html
데모보기 : http://mattberseth2.com/progress_indicator/

참고 : ajax.net Animation Reference


검색버튼을 누르면 리스트가 희미해지고 정 중앙에 로딩중을 표시하는 gif 애니메이션 이미지가 올라온다.
검색결과가 리턴되고 업데이트 판넬이 새로 랜더링되면 리스트는 원래의 투명도로 돌아오고 로딩이미지는 사라진다.

이것을 구성하기위해 updatepanel,grid-view,updatepanelAnimationExtender(upax) 를 사용한다.

1. updatepanel 의 트리거 이벤트 발생
2. upax 의 OnUpdating 처리
    - <parallel> 은 각 애니메이션이 각각의 타이머를 갖고 독립적으로 수행된다는 것임(동시실행)
    - duration=0 은 애니메이션 처리가 즉각 발생한다는 것임,시간을 지정하면 그 시간동안 천천히 애미메이션됨.
    - 즉 , onUpdating 이란 스크립트의 호출 , btnSearch 버튼의 비활성화, updatePanel1 의 투명도를 50% 로 하는 애니메이션을 동시에 수행함.
    - onUpdating 스크립트는 중앙에 로딩 이미지를 위치시키는 역할을 함.

3. btnSearch 의 클릭 이벤트 처리로 그리드뷰가 새로 바인딩
4. updatePanel1 의 refresh(update)
5. upax 의 OnUpdated 처리
   - 투명도 Fade-In
   - btnSearch 활성화
   - onUpdated 스크립트 call - 로딩중 이미지 감추기

여기서..

function onUpdating(){
        // get the update progress div
        var updateProgressDiv = $get('updateProgressDiv');
        // make it visible
        updateProgressDiv.style.display = '';

        //  get the gridview element       
        var gridView = $get('<%= this.gvCustomers.ClientID %>');
       
        // get the bounds of both the gridview and the progress div
        var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
        var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
       
        //    do the math to figure out where to position the element (the center of the gridview)
        var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
        var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
       
        //    set the progress element to this position
        Sys.UI.DomElement.setLocation (updateProgressDiv, x, y);       
    }

AJAX.Net 도 스크립트로 직접 핸들링할 수 있는 방법을 제공하고 있음을 알 수 있다.
하지만 YUI 보다는 왠지 답답함을 느낀다.

출처 : http://mattberseth.com/blog/2007/06/quick_ajax_tip_provide_a_bette.html

데모보기 : http://mattberseth2.com/ajaxified_wizard/

앞에 포스팅한 http://mattberseth.com/blog/2007/05/ajaxnet_example_using_an_updat.html 의 응용되겠다.

출처 :http://www.codeproject.com/KB/ajax/DelayedContentLoading.aspx

updatepanel,timer,multi-view,rss-toolkit 를 사용한 좋은 예제인 것 같다.

멀티뷰와 업데이트 판낼을 사용해 비동기 요청의 상태를 변화시키는 것은 좋은 생각인듯

출처 :http://blog.markerstudio.com/archives/450


updatepanel 의 트리거로 지정된 컨트롤(링크버튼 같은...)의 포스백 스크립트를 호출해서
강제로 업데이트판넬을 refresh 할 수 있다.

보통 트리거인 컨트롤의 이벤트 발생시 __doPostBack('컨트롤아이디') 함수가 호출되는 것을 볼 수 있다.
즉 이 포스트백 스크립트를 호출해서 트리거 컨트롤의 포스백을 유도하고 이에 연결된 업데이트판넬의 업데이트를 유도하는 것이다.

정리하면,

1. 버튼을 하나 둔다.css 로 보이지 않게 숨긴다.
2. 버튼을 업데이트판넬의 트리거로 지정한다.
3. 필요한 스크립트에서 __doPostBack(버튼아이디) 호출한다.

이렇게 한다는 것이다.

http://mattberseth.com/blog/2007/12/data_navigation_with_the_listv.html

마침 딱 구현하려고 했던 놈을 누군가 구현해 두었다. 신난다.
슬라이드 컨트롤로 페이징이 되게 하는 것인데..

asp.net 3.5 로 만들어졌다.

안타까운건...3.5 부터 ajax.net 이 기본으로 asp.net 에 포함되어 있다는 것이다.
YUI 로 할 생각이였는데...어쩔수 없이 ajax.net 을 써야한다는 것이다.
오버해드를 줄일 방법을 찾아야 겠다.

암튼 머리 아플일이 줄었다.

yui : http://developer.yahoo.com/yui/
ajax.net : http://ajax.asp.net/

asp.net 으로 프로젝트를 진행중인데...

1년전에 했던 것은 atlas(ajax.net beta 의 코드명)를 사용 했었다.
asp.net 엔 당연히 아틀라스가 궁합이 맞을 것이란 생각에서다.
아틀라스는 나름 훌륭한 툴이였다. 개발자가 웹표준이니 ajax 에 대한 이해도가 없어도 쉽게 ajax 기능을 추가 할 수 있었다. 게다가 비주얼 스튜디오에서 컨트롤을 다루듯 코딩하는 일관성을 유지해 주었다. 지금은 정식 1.0 이 나오면서 더 많은 발전이 있었다.

아틀라스의 가장 큰 장점은 웹메소드 호출 기능일 것이다. cs 파일에 정의한 메소드를 매우 간단한 코딩으로 클라이언트에서 호출할 수 있게 해주는 것이다. 비동기 통신에 대한 아무런 이해가 없어도 가능하다.
또한 http://ajax.asp.net/ajaxtoolkit/ 에 셈플로 제공하는 툴킷은 멋진 화면 연출을 도와준다.
이렇게 게으른 asp.net 개발자에게 아틀라스는 매우 좋은 툴이된다.
ajax.net 은 asp.net 개발자에게 주로 포커싱된 것이라고 보면 되겠다.(아틀라스 베타에서는 다른 플랫폼에서도 쓸수있는 정보를 주었는데...1.0 에서는 못찾았다.) 자바스크립트 라이브러리가 아니라 자바스크립트 제너레이터에 가까운 것 같다.

반면 YUI (Yahoo! User Interface Library) 는 완전히 클라이언트용 자바스크립트 라이브러리다.
현재 하는 진행중인 프로젝트에서는 yui 를 사용중이다.
asp.net 으로 하면서 yui 를 채용한 이유는 자유도 때문이다. ajax.net 은 커스터마이징 하기가 너무 어려웠다. 툴킷에 있는 것을 사용하기에는 편리햇지만 그것을 내가 수정해서 쓰기가 힘들었다.
반면 yui 는 친숙한 자바스크립트면서 조각조각 잘 쪼개서 정리되어 있어서 커스터 마이징 해서 쓰기가 개인적으로 편리했다.

자바스크립트에 자신있는 경우라면 yui 가 좀 더 편하지 싶다. 반면 서버사이드 코딩에 더 친숙한 사람이라면 ajax.net 더 낫다고 판단하지 않을까 싶다.
ajax.net 의 웹메소드와 업데이트판넬을 포기하는 것이 쉽지 않았지만, yui 에 꽤 만족하고 있다.

난생 처음 출판 작업에 참여한 책이 나왔다.(나온지 좀 오래 됐다..ㅎㅎ)

블로그를 통해 베타 리더 모집 광고를 보고 참여해서 베타리딩을 한것이 거의 1년전의 일이다.

그 당시 ajax.net 의 코드명인 altas 로 프로젝트를 진행중이였다.

프로젝트를 진행하면서 베타리딩을 하는 것은 꽤 부담되면서도 몰랐던 것을 발견하게 되는 기회도 되었다.

실전에서 ajax 를 처음 써보는 입장에서 아틀라스는 구세주 같았다.

하지만 베타라서 그런지..버그가 좀 있었고 내가 미쳐 알지 못해 실수를 범한 것도 있고 해서 꽤 고생을 했던 기억이 있다.

지금은 내가 베타리딩 할때와 상당히 달라졌다. 베타리더 모임에서 저자인 이광수 씨도 책이 나오지전에 정식버젼이 나오는 바람에 부랴부랴 내용을 수정하고 추가하느라 고생했다고 한다.

어쨋거나 처음으로 이름이 들어간 책이라 개인적으로 으미있는 책이다.
추천하고 싶은지 물어본다면...ajax.net 에 매력을 느낀 분이면 읽어볼만 하다고 생각한다.
하지만 요즘 ajax 라이브러리가 많이 나와서...꼭 ajax.net 을 고집할 이유는 없다고 본다.