 | 난이도 : 초급 Edward J Pring, Senior Software Engineer, IBM
2007 년 6 월 26 일
본
시리즈에서는 Finite State Machine을 사용하여 단순한 웹 위젯에 페이드인/페이드아웃(fade in/out) 작동
같은 복잡한 작동을 디자인하는 방법을 설명합니다. 결과 코드는 간결하고, 로직은 투명하며, 그리고 애니메이션은 부하가 많은
프로세서에서도 완벽하게 작동할 것입니다. 이 글에서는 모든 대중적인 웹 브라우저에서 실행할 때 생겨나는 실질적인 문제들을 다루는
방법을 설명합니다.
Part 1에서는 Finite State Machine을 사용하여 간단한 웹 위젯에 복잡한 작동을 디자인 하는 방법을 설명했습니다. Part 2에서는 JavaScript로 작동을 구현하는 방법과 JavaScript만의 특징 Associative Array와 함수 클로저(function closure))을 활용하는 방법에 대해 다루었습니다.
여
러 해 동안 이벤트 중심 프로그램으로 복잡한 작동을 디자인 및 구현하는 사람들은 그 구성 원리로 Finite State
Machine을 사용했다. 이제 프로그래밍 방식의 웹 브라우저는 애플리케이션 생성에 새로운 이벤트 중심 환경을 개척했다. ajax에 의해 대중화 된 브라우저 기반 애플리케이션들은 점점 더 복잡해 지고 디자이너와 개발자들은 Finite State Machine이 제공하는 원리와 구조로 도움을 받고 있다.
Part 1에
서는 일반 웹 브라우저에서 제공하는 빌트인 구현 보다 정교한 작동을 하는 웹 페이지용 툴팁 위젯에 대해 설명했다.
FadingTooltip 위젯이 다양한 이벤트들에 반응할 수 있어야 한다. 가끔, 이벤트에 대한 반응은 이전 이벤트에 기반하고
있다. Finite State Machine 패턴을 사용하여 작동을 디자인 했다. 상태 그래프와 테이블 구현은 모든 상황에서 각 이벤트에 대한 응답으로서 취해질 수 있는 액션을 나타낸다. 여러분은 또한 관련 액션들을 취하기 위해 이벤트들 간 기억해야 할 변수 리스트도 컴파일 했다.
Part 2에
서는 디자인을 JavaScript로 변환하면서 함수 클로저와 Associative Array를 사용했다. 구현에는 대중적인
브라우저의 효율성이나 우아함을 유지하면서 변화를 시도했다. 세 개의 브라우저 이벤트 모델에 대한 커서 이벤트를 연결하고, 두
가지 유형의 타이머를 시작 및 취소하고, 이들의 타이머 이벤트를 연결하는 코드를 구현했다. 모든 이벤트에 대한 공통 핸들러로서
상태 테이블을 구현했고, 아울러 모든 액션과 트랜지션에 대한 함수 어레이를 구현했다. 툴팁은 상태 테이블에서 지정된 대로,
완전히 매개변수화 된 HTML Division 엘리먼트로서 커서와 타이머 이벤트에 반응하면서 움직이고 서서히 나타난다.
마
지막 글에서는, 일부 대중적인 브라우저에서 구현을 테스트 할 것이다. 일부 FadingTooltip 위젯을 구현하고 이들을
HTML 엘리먼트에 연결시키는 테스트 페이지를 만들어야 한다. 비교할 수 있도록 테스트 페이지는 빌트인 툴팁도 설명해야 한다. should-not-occur(발
생해서는 안 될) 상황을 만나게 되면 이 디자인이 어떻게 적용되는지를 볼 수 있을 것이다. 마지막으로 성능도 시험해 보고,
브라우저 기반의 애플리케이션을 위한 Finite State Machine의 향후 개발에 대한 생각들도 나눈다.
브라우저에서 애플리케이션 실행하기
이
상적으로는, 모든 실행 환경에서 애플리케이션을 테스트 해야 한다. JavaScript 애플리케이션의 경우, 브라우저가 다양하고
버전들도 다양하기 때문에 이는 어려운 일이다. FadingTooltip 위젯은 유일한 기술 데모이지만 이 시리즈에서는 사용되지
않는다. 필자는 네 개의 유명 브라우저들의 현재 버전들로만 테스트 했다.
- Netscape Navigator 8.1
- Microsoft® Internet Explorer® 6.0
- Opera 9.0
- Mozilla Firefox 1.5
이 위젯은 간단한 장치로만 테스트되었다. 실행 애플리케이션은 더욱 포괄적인 테스트가 필요하다.
간단한 테스트 장치
구
현을 테스트 할 수 있는 한 가지 간단한 방법은 HTML 웹 페이지에 삽입된 코드를 사용하는 것이다. 이 코드는 컨트스럭터로
FadingTooltip 객체들을 만들어야 하고 이들을 HTML 엘리먼트로 바인딩 해야 한다. 한 가지 간단한 방법은 웹
페이지의 HTML 헤드 엘리먼트에 정의된 함수를 사용하는 것이다. HTML 엘리먼트의 id 애트리뷰트를 사용한다. (Listing 1)
Listing 1. FadingTooltip 위젯을 만드는 JavaScript 코드
<head>
...
<script src='FadingTooltip.js' content='text/javascript'></script>
<script content='text/javascript'>
function createFadingTooltip(id, content, parameters) {
new FadingTooltip(document.getElementById(id), content, parameters);
}
</script>
...
</head>
|
createFadingTooltip
함수용 인자들은 HTML 엘리먼트 식별자, 툴팁의 콘텐트, 매개변수 연산 세트들이다. 이 함수는 엘리먼트 식별자를 포인터로
변환하고 컨스트럭터를 호출하면서 나머지 변하지 않은 인자들을 전달한다. 컨스트럭터에 의해 리턴된 객체에 대한 포인터는 선언된다.
컨스트럭터는 객체에 대한 포인터를 이것이 정의하는 이벤트 함수로 인클로즈 하기 때문이다. (Part 2의 커서 이벤트 연결하기 참조)
그런 다음에는 웹 페이지의 HTML 바디 엘리먼트에 정의된 id 애트리뷰트를 가진 HTML 엘리먼트가 필요하다. (Listing 2)
Listing 2. HTML 엘리먼트 샘플용 HTML 코드
<body>
...
<p>These elements have tooltips defined with the FadingTooltip widget:
<div id='tests' class='TestStyle'>
Here are some <span id='TestLabel'>more elaborate tooltips</span>:
<input type='text' id='TestInput' size=25>
<input type='button' id='TestButton' value='Press this button'>
</div>
...
|
마지막으로, HTML 엘리먼트용 인자들로 createFadingTooltip 함수를 호출하는 코드가 필요하다. (Listing 3)
Listing 3. FadingTooltip 위젯을 HTML 엘리먼트로 연결하는 JavaScript 코드
<body>
...
<script content='text/javascript'>
createFadingTooltip('TestLabel',
'Move your cursor a bit to the right, please ...');
createFadingTooltip('TestInput',
'Type the following, <i>please</i>:' +
'<ul compact style='margin-top: 0; margin-bottom: 0'>' +
'<li>your bank account number' +
'<li>your PIN number' +
'</ul>' +
'<i>Thank you</i> in advance.',
{ fadeinTime: 3,
fadeoutTime: 3 } );
createFadingTooltip('TestButton',
'<img src='smiley.gif' align='absmiddle'>' +
'<big>Go ahead.</big> ' +
'Press it. ' +
'<small>What's the harm? <small>Trust me.</small></small>',
{ tooltipOpacity: 1,
tooltipClass: 'AnotherTestStyle',
pauseTime: 2,
fadeinTime: 0.5,
displayTime: 0,
fadeoutTime: 10,
trace: true } );
/script>
...
|
TestLabel로 구분된 HTML 엘리먼트의 경우, 첫 번째 툴팁은 가장 간단한 인자들로 생성된다. 콘텐트는 텍스트뿐이고 매개변수 인자는 생략되었기 때문에 기본 값은 모든 매개변수에 사용될 것이다. TestInput HTML 엘리먼트의 경우, 두 번째 툴팁은 콘텐트를 일부 마크업으로 포맷하고 페이드인/페이드아웃 시간을 (초 단위로) 지정한다. TestButton HTML 엘리먼트의 경우, 세 번째 툴팁에는 포맷된 콘텐트에 이미지를 포함하고 있고, 툴팁을 스타일링 하는 Cascading Stylesheet (CSS) 클래스를 포함하여 더 많은 매개변수들을 지정한다.
Mozilla Firefox는 최신의 브라우저로서 그 무엇보다 오픈 표준에 더욱 순응하기 때문에 이것을 사용하기로 한다. (여러분이 Microsoft Internet Explorer를 사용한다면 현재의 섹션은 건너뛰고 should not occur와 fading doesn't work에 대한 두 개의 섹션을 읽고 다시 여기로 돌아오면 된다.
지금 테스트 장치를 사용해 보라.
여기에는 빌트인 툴팁이 있는 HTML 엘리먼트와 위에서 설명한 FadingTooltip 예제들이 포함되어 있기 때문에, 여러분은
이들을 비교 및 대조할 수 있다. FadingTooltip의 더욱 정교한 작동을 주목하라. 갑자기 나타났다가 사라지는 대신
밝아졌다가 서서히 어두워진다, 페이딩(fading)은 커서가 HTML 엘리먼트 위를 움직이고 HTML 엘리먼트에서 멀어질 때
방향을 바꾼다. 이들은 커서의 움직임을 따르고, 키보드 이벤트가 발생하지 않을 때 사라지지 않는다. 더욱 정교한 모양을 갖고
있다. FadingTooltip은 스타일링 되고, 텍스트는 포맷되며, 이미지를 포함할 수 있다.
이러한 차이가 향상을 가져오는지, 툴팁 위젯을 개발할 때 시간과 노력을 들일 가치가 있는지는 여러분이 결정하라. 가치가 있다면 소스 파일을 복사하고 디스크 드라이브에서 테스트 하여 매개변수, 스타일, 코드를 바꿀 수 있다. (다운로드) 여기에 고유의 웹 서버는 필요치 않다. file://... URL을 사용하여 수정된 테스트 장치를 브라우저에 로딩하라.
should-not-occur 이벤트가 발생할 때
Microsoft
Internet Explorer는 지금까지 가장 광범위하게 사용되는 브라우저이기 때문에 여러분은 이것으로 구현한 것을 테스트
해야 하고 문제를 빠르게 찾을 수 있다. 그림 1에서 보듯, FadingTooltip 위젯에서 커서가 HTML 엘리먼트 위를
지나갈 때 경고가 갑자기 생긴다.
그림 1. Internet Explorer에 생긴 예기치 않은 mousemove 이벤트
Part 1의 상태 테이블 완성하기 섹션의 상태 테이블을 참조하라. (그림 2) Inactive 상태에서 mousemove 이벤트를 예상하지 못했기 때문에, Part 2의 액션/트랜지션 테이블 만들기 섹션에서 actionTransitionFunctions 테이블 구현에서 셀을 비워두었다.
그림 2. FadingTooltip 위젯의 초기 상태 테이블
mouseover 이벤트는 mousemove 이벤트에 앞서 발생하면서, Pause 상태로 이동하게 하고 이는 mousemove 이벤트를 예상하게 한다. (Part 1의 그림 5)
Firefox에서는 여러분이 기대한 대로 작동하지만, Internet Explorer는 그렇지 않다. 커서 이벤트를 만들어 내는
Internet Explorer 내에 Finite State Machine에 버그가 있거나, 브라우저가 상태를 내부적으로 트래킹
하지 않을 수 있다. 어떤 경우, 여러분 고유의 Finite State Machine에 이러한 상황을 적용해야 한다.
다행히도, Finite State Machine 패턴을 적용하면 변경이 쉬워진다. Inactive 상태에서 mousemove 이벤트가 발생해야 한다고 생각해 보자. 액션과 트랜지션은 Inactive 상태에서 mouseover 이벤트가 같다. actionTransitionFunctions
테이블의 구현을 참조하면서, doActionTransition 메소드는 테이블에 있는 어떤 함수나 또 다른 함수의 액션과 트랜지션을 중복시킬 수 있도록 한다. 이 메소드를 사용하여 Listing 4에서 볼드체로 강조된 함수를 actionTransitionFunctions 테이블에 추가함으로써 예기치 않은 이벤트를 수용할 수 있다.
Listing 4. Inactive 상태에서 예기치 않은 mouseover 이벤트를 핸들하는 JavaScript 코드
FadingTooltip.prototype = {
...
actionTransitionFunctions: {
...
Inactive: {
mousemove: function(event) {
return this.doActionTransition('Inactive', 'mouseover', event);
},
...
|
Internet Explorer에서 테스트를 하면 비슷한 예기치 않은 또 다른 상황이 곧 드러난다. (그림 3)
그림 3. Internet Explorer에서의 예기치 않은 mouseout 이벤트
mouseover 이벤트는 mouseout
이벤트에 앞서 일어나기 때문에 mouseout 이벤트는 Inactive 상태에서는 발생하지 않는다. 다행히도, 이러한 예기치
않은 이벤트는 감당하기가 쉽다. 어떤 액션이나 트랜지션도 이러한 상황에서는 필요치 않다. Finite State Machine이
Inactive 상태에서 mouseout 이벤트를 무시하도록 하면 된다. (Listing 5)
Listing 5. Inactive 상태에서 예기치 않은 mouseout 이벤트를 핸들하는 JavaScript 코드
FadingTooltip.prototype = {
...
actionTransitionFunctions: {
...
Inactive: {
mouseout: function(event) {
return this.currentState; // do nothing
},
...
|
디자인 단계에서, mousemove나 mouseout 이벤트가 Inactive 상태에서 발생할 것이라고는 예상할 수 없었다. 하지만 mouseover
이벤트에 대해 Microsoft를 비판하기 전에, 이러한 상황에서 다른 브라우저에서는 어떤 일이 발생할 것인지를 상상해 보자.
커서가 HTML 엘리먼트 위를 움직이고, 그곳에서 꽤 오랫동안 중지하여 FadingTooltip 위젯이 뷰에 서서히 나타나고,
얼마 동안 디스플레이 된 다음, 뷰에서 사라진다. 이는 각 상태 마다 Finite State Machine의 사이클이 되고,
HTML 엘리먼트에 커서를 놓은 상태에서 Inactive 상태로 돌아온다. 커서가 움직일 때, 브라우저는 Inactive 상태에 mousemove나 mouseout 이벤트를 만들어 낸다. 이는 Firefox를 포함한 다른 브라우저에서 발생한다. Internet Explorer의 다른 버그와는 별개로 Finite State Machine에 디자인 결함이 있다. (그림 4)
그림 4. Firefox에서의 예기치 않은 mousemove 이벤트
다행히도, Internet Explorer에 이미 구현했던 Inactive 상태에 대한 변경이 이러한 상황을 올바르게 핸들하기 때문에 디자인 결함을 해결하기 위해 추가적인 변경 사항이 필요 없다.
안타깝게도 변경 후에도, 지속적인 테스트를 통해 should-not-occur 상황이 한 개 더 Internet Explorer에서 발생한다는 사실이 드러난다. Pause 상태에서의 예기치 않은 mouseover 이벤트이다.
Pause 상태에서의 mouseover 이벤트는 Inactive 상태에서의 mouseover 이벤트와 같은 액션과 트랜지션을 필요로 하기 때문에 doActionTransaction
메소드를 호출함으로써 이러한 상황을 핸들할 수 있다. 하지만, 다른 브라우저에서도 이러한 상황이 될 수 있는 비 합법적인 이벤트
시퀀스가 있기 때문에 Internet Explorer만을 위한 디자인 변경이 필요하다. (Listing 6)
Listing 6. Internet Explorer 전용으로 예기치 않은 이벤트를 핸들하는 JavaScript 코드
FadingTooltip.prototype = {
...
actionTransitionFunctions: {
...
},
...
};
if ( (window.navigator.userAgent).indexOf('MSIE')!=-1 ) {
FadingTooltip.prototype.actionTransitionFunctions["Pause"]["mouseover"] =
function(event) { return
this.doActionTransition('Inactive', 'mouseover', event);
};
}
|
브라우저가 Internet Explorer의 특정 버전이라면, FadingTooltips 프로토타입의 actionTransitionFunctions 테이블을 수정하여 Inactive 상태에서의 mouseover 이벤트와 같은 방식으로 Pause 상태에서 mouseover 이벤트를 핸들한다. JavaScript에서, Associative Array와 객체들은 동일하기 때문에 두 표기법 중 하나가 테이블을 수정하는데 사용될 수 있다.
페이딩 툴팁이 희미해지지 않을 때
불
행히도, 예기치 않은 이벤트에 대한 모든 경고들이 이전 섹션의 디자인 변경에 의해 제거된 후에도 Internet
Explorer에서 계속 테스트 하면 또 다른 문제가 드러난다. FadingTooltip 위젯으로 정의된 툴팁이 밝아졌다가
어두워지는 것이 아니라 뷰에서 나타났다가 사라진다. Internet Explorer는 표준 CSS opacity 스타일(참고자료).
Internet Explorer는 비슷한 기능을 가진 filter라고 하는 비표준 스타일을 지원하지 않는다. (참고자료) 이를 사용하려면 Listing 7에서 볼드체로 강조된 라인을 삽입함으로써 createTooltip 메소드를 수정해야 한다.
Listing 7. Internet Explorer에서 툴팁을 생성하는 추가 JavaScript 코드
FadingTooltip.prototype = {
...
createTooltip: function() {
this.tooltipDivision = document.createElement('div');
...
this.currentOpacity = this.tooltipDivision.style.opacity = 0;
if (this.tooltipDivision.filters) { // for MSIE only
this.tooltipDivision.style.filter = 'alpha(opacity=0)';
}
...
},
...
|
fadeTooltip 메소드도 삽입해야 한다. (Listing 8)
Listing 8. Internet Explorer에서 툴팁의 페이딩을 위한 추가 JavaScript 코드
FadingTooltip.prototype = {
...
fadeTooltip: function(opacityDelta) {
...
this.tooltipDivision.style.opacity = this.currentOpacity;
if (this.tooltipDivision.filters) { // for MSIE only
this.tooltipDivision.filters.item('alpha').opacity =
100*this.currentOpacity;
}
},
...
|
오페라는 브라우저로서의 인식이
제한되었지만 기술적인 측면이 우수하다. 안타깝게도, 오페라는 CSS 불투명도 스타일을 지원함에 있어서 비교적 늦었기 때문에
FadingTooltip 위젯은 9 버전 이전의 오페라 버전에서는 밝아졌다 어두워지는 대신 뷰에서 갑자기 나타났다가 사라진다.
Internet Explorer와는 달리, 초기 오페라 버전들은 투명성에 대한 대안 신택스가 없다. 유일한 솔루션은 현재
버전으로의 업그레이드이다.
성능
일
반 브라우저에서 FadingTooltip 위젯이 잘 실행된다면, 프로세서의 성능 목표에 가까이 가는 방법을 찾아야 할 때이다.
Windows에서 이를 수행하는 쉬운 방법은 위젯의 애니메이션을 실행하면서 Windows Task Manager의
Performance 패널을 보는 것이다.
대부분의 워크스테이션에서, 보통 여러 프로그램들은
백그라운드에서 조용히 실행된다. 심지어 어떤 애플리케이션도 시작하지 않았을 때도 그렇다. 이 프로그램들 중 일부는 Windows
태스크 바의 클락 가까이에 작은 아이콘들을 실행한다. 다른 것들은 시각적으로 전혀 드러나지 않는다. Windows Task
Manager의 Performance 패널은 액티비티를 보여준다. (그림 5)
그림 5. 일반적인 백그라운드 액티비티를 보여주는 Windows Task Manager
FadingTooltip
위젯을 실행하기 전에, 백그라운드 액티비티의 일부를 제거하여 위젯의 프로세서 사용을 숨긴다. 콘텍스트 메뉴에서 Windows
태스크바에 아이콘을 디스플레이 하는 대부분의 프로그램들을 닫을 수 있다. Windows Control Panel for
Services에서 다른 백그라운드 프로그램을 중지할 수 있다.
1.1GHz Intel Pentium-III 프로세서의 정지 시스템에서, FadingTooltip 위젯의 프로세서 사용은 거의 없다. (그림 6)
그림 6. 위젯 애니메이션 액티비티를 보여주는 Windows Task Manager
이 위젯의 애니메이션은 프로세서에 적은 부분을 차지하기 때문에 프로세서가 다른 액티비티로 로딩될 때 조차도 잘 실행될 것이라고 확신할 수 있다.
반드시 디자인 문서를 업데이트 하라!
테
스트를 끝마쳤다면 문서를 업데이트 하여 디자인과 구현 변경 사항을 반영해야 한다. 예기치 않은 이벤트들은 상태 테이블의 빈 셀에
해당하므로, 그러한 상황을 수용하기 위해 취했던 액션들로 셀을 업데이트(파란색으로 강조됨) 해야 한다. (그림 7)
그림 7. FadingTooltip 위젯의 상태 테이블
그림 8에서 보듯, 상태 그래프로 업데이트 역시 간단하다.
그림 8. FadingTooltip 위젯용 상태 그래프
Internet Explorer 방식의 스타일링 불투명도를 수용하기 위해 createTooltip과 fadeTooltip 메소드로 삽입했던 코드 라인은 디자인 변경 레벨까지 올라가지 않는다. 이를 문서로 작성해야 한다. (다운로드).
향후 개발
본
시리즈의 목적은 Finite State Machine 디자인 패턴을 브라우저 기반의 애플리케이션에 적용하고, JavaScript
언어의 두 가지 기능을 활용하여 고급스럽고 효율적인 프로그램을 만드는 방법을 설명하는 것이다. 결국, 여러분은 하나의 독립형
JavaScript 객체로서 FadingTooltip 위젯을 개발했다. 이 코드는 타이트 하지만 유연하지는 않다. 이 논의를
끝내기 전에 향후 개발에 필요한 방향을 제시하겠다.
다른 비주얼 위젯들은
FadingTooltip 위젯과 비슷한 모양과 작동에서 효과를 볼 수 있다. 예를 들어, 인풋 필드 타이핑 오류에 대한 신택스
에러 메시지, 복잡한 폼을 채우라는 제안, 이벤트가 명령하면 뷰에 서서히 나타나고 이벤트가 확인되면 뷰에서 사라지는 툴팁
박스에서 익숙치 않은 워크플로우에 대한 가이드라인을 디스플레이 해야 한다. 다음 개발 단계에는 FadingTooltip 코드를
리팩토링 하여 Finite State Machine의 기본 장치를 개별 객체로 이동해야 한다. 여기에는 이벤트 후크, 이벤트
핸들러, 에러 메소드, 타이머 메소드가 포함된다. 그리고 나서, FadingTooltip 위젯, 기본 객체의 데이터와 메소드를
상속 받는 개별 객체, 트랜지션 테이블, 각 위젯 유형에 필요한 액션 메소드를 포함하여 시각적 위젯을 구현해야 한다.
툴
팁 같은 위젯과 기타 비주얼 위젯은 페이딩(fading)과 비슷한 추가 애니메이션 효과에서 혜택을 볼 수 있다. 예를 들어,
툴팁은 윈도우의 가장자리에서 뷰로 들어가거나 소멸하는 부분에서 줌인을 통해 확장하거나, 아이콘에서 뷰로 펼쳐지거나, 커서가
움직일 때 Jell-O 같이 흔들 수 있다. 이러한 애니메이션 효과는 콘텍스트 메뉴, 다이얼로그 박스, 인풋 프롬프트로 큰
효과를 볼 수 있다. 또는 각 애니메이션 유형과 각 위젯 유형의 작동에 맞게 Finite State Machine을 개별 객체로
분리하여 어떤 조합이라도 특정 HTML 엘리먼트에 연결될 수 있도록 한다.
물론, 이
글에서는 키보드나 네트워크에서 발생하는 것 같은 이벤트 유형은 고려하지 않았다. 예를 들어, 텍스트 인풋 필드에 입력된 개별
문자들은 입력된 대로 값의 유효성 검사를 수행하거나, 셀렉션 리스트에 남아있는 유효 값을 디스플레이 할 수 있다. 실패하거나
종료된 네트워크 요청들은 프로토콜 그래프로서 표현된 대안 서비스들을 재시도 함으로서 핸들된다. 또 다른 개발 단계에는 다음과
같은 것들이 있다. - Finite State Machine용 프레임웍을 확장하여 키보드와 네트워크 이벤트용 후크를 포함시킨다.
- 공식 언어 문법과 네트워크 프로토콜에 대한 그래프나 테이블 표현
- 텍스트 값의 유효성 검사를 하고 네트워크 세션을 관리하는 액션
같은 프로세서에서 실행되는 다른 애플리케이션들은 이벤트를 발생시키고 브라우저에서 실행되는 프로그램과 관련된 액션들을 노출한다. 예를 들어, voice-over-IP 전화 애플리케이션은 ring-in, ring-out,
connect, disconnect 이벤트를 생성하고, call, hold, hang-up
액션들을 노출한다. 또 다른 개발 단계에는 프레임웍을 확장하여 다른 애플리케이션들에 이벤트를 연결하여 액션을 취하도록 하는 것이
포함된다. 여기에는 브라우저에서 실행되는 Finite State Machine에 접근할 수 있는 다른 프로세스에 이벤트와 액션을
만드는 일부 자바™ 플러그인이 필요하다. JavaScript는 자바 플러그인을 위한 스크립팅 언어가 될 것이다.
다운로드 하십시오
참고자료 교육
-
ajax: A New Approach to Web Applications: Jesse James Garrett.
-
JavaScript: The Definitive Guide
(David Flanagan, published repeatedly by O'Reilly Media between 1996 and 2006) -Book
-
Standard ECMA-262: ECMAScript Language Specification (Ecma International, 1999).
- W3C Cascading Style Sheets
Under Construction
- MSDN Alpha Filter
-
Document Object Model (DOM) Level 2 Events Specification (W3C, 2000).
-
Gecko DOM Reference (Mozilla)
-
HTML and DHTML Reference (Microsoft)
- Chapters
21 "Protocol Representation with Finite State Models" by Andre A. S.
Danthine, and 25 "Executable Representation and Validation of SNA" by
Gary D. Schultz, et. al. in Computer Network Architectures and Protocols (edited by Paul E. Green, Jr., Plenum Press, 1982)
- Chapter 3.5 "Finite Automata" in Compilers: Principles, Techniques, ad Tools (Alfred V. Aho et. al., Addison-Welsley, 1986)
- Chapter 5 "Behavioral Patterns" in Design Patterns: Elements of Reusable Object-Oriented Software (Erich Gamma et. al., Addison-Welsley, 1995)
- Chapter 13.25 "TCP State Machine" in Internetworking with TCP/IP (Douglas E. Comer, Simon and Schuster Company, 1995)
- Chapter 15 "State Machines" in the Unified Modeling Language 2.0 Superstructure Specification (Object Management Group, 2004)
- Chapter 15 "State Machines" in the Unified Modeling Language 2.0 Superstructure Specification (Object Management Group, 2004)
-
한국 developerWorks 웹 개발 존: 이-비즈니스와 이-커머스 웹 사이트 구현에 필요한 정보와 리소스들이 들어있습니다.
-
technology bookstore
-
developerWorks 기술 이벤트와 웹캐스트.
제품 및 기술 얻기
토론
필자소개 | 
| | Edward
Pring은 뉴욕대학교에서 컴퓨터 공학 석사 학위를, 스탠포드대학교 수학과에서 학사 학위를 받았다. IBM 연구원으로서, 운영
체계, 애플리케이션, 메인프레임용 터미널 에뮬레이터, 개인용 컴퓨터의 바이러스 보호, Digital Immune System의
네트워크 자동화, 웹 서비스의 시각화 및 성능 분석 등 다양한 IBM 제품과 기술에 기여했다.
출처 : http://www.ibm.com/developerworks/kr/library/wa-finitemach3/index.html
|
|
