script.aculo.us의 Combination Effects 사용하기에 대해서 포스팅을 한 적이 있었는데 오늘 OKJSP에 놀러갔다가 콜백함수에 대해서 질문을 하는 글을 보았다. 많이는 아니지만 약간 만져본 부분이기도 했고 콜백 함수는 앞으로 script.aculo.us를 만지게 되면 반드시 만나게 될것 같은 이슈라서 이것저것 찾아보면서 테스트를 해봤다.
안가본 사이에 script.aculo.us사이트가 많이 달라졌다. API 문서도 좀더 충실해졌고.... 이펙트가 필요하면 Combination Effects를 주로 사용하지만 이것은 기본직인 Core Effects를 조합해 놨기 때문에 기본적인 것은 Core Effects를 따른다. Core Effects에 대한 레퍼런스를 보니까 callback함수에 대한 부분에 대한 정리가 잘 되어 있었다.
다음과 같은 4가지의 callback을 지원한다.
beforeStart : Called before the main effects rendering loop is started.
beforeUpdate: Called on each iteration of the effects rendering loop, before the redraw takes place.
afterUpdate : Called on each iteration of the effects rendering loop, after the redraw takes place.
afterFinish : Called after the last redraw of the effect was made.
Fade를 예로 설명하면 다음과 같이 사용하면 된다.
function startEffect() {
$("contentPlace").fade({
duration:3.0,
beforeStart:function(){alert("BeforeStart");},
//beforeUpdate:function(){alert("BeforeUpdate");},
//afterUpdate:function(){alert("AfterUpdate");},
afterFinish:showMessage
});
}
function showMessage() {
alert("AfterFinish");
}
combination Effects를 사용하면서 JSON형태로 옵션 파라미터를 넘길때 callback에 대한 부분을 같이 넘겨주면 된다. 직접 function형태로 써주어도 되고 다른 펑션을 불러오면 된다.
beforeStart과 afterFinish는 해당의 시작과 전에 발생하기 때문에 해당 부분에 원하는 동작을 넣어주면 된다. beforeUpdate와 afterUpdate은 이벤트의 각 렌더링 루프의 시작과 끝에 발생한다.라고 API문서에 나와 있는데 여기서 렌더링루프라는 정확한 개념을 모르겠다.
위의 Fade에서는 Update가 2번 일어난다. 시작하자마자 beforeUpdate와 afterUpdate가 각 한번씩 일어나고 beforeUpdate가 발생하면서 페이드가 시작되고 페이드가 끝나고 afterUpdate발생한다. fade의 내부 구동에서 렌더링 이터레이션의 영향을 받는 것 같다. 이부분은 주석을 빼면 확인은 되는데 alert때문에 Effect효과가 제대로 먹지 않아서 주석처리를 했다.
덧) Textcube 1.5.4 Fermata를 계속 사용하다가 어제 왠지 업그래이드를 하고 싶어서 최신버전인 1.7.3 Risoluto로 넘어왔다. 어제 오늘 약간 어긋낫 셋팅을 맞추느라 고생을... ㅎ 이상하게 이전에 쓰던 후리자님의 소스코드 하이라이터가 돌아가지 않아서 Gendoh님의 Code HighLighter로 옮겨왔다. 파폭3에서는 줄번호까지 같이 복사되는 문제가 있어서 Syntax Highlight를 한번 바꾸려고 생각하고 있었는데 이것저것 봤는데 이게 제일 나은듯... 스타일 좀 먹여주니까 보기에도 괜찮아보이는듯...
Comments