삼지창으로 스킨을 구현하는 예제입니다.
아직은 실용화하기에는 이릅니다.
HTML을 이용해서 마구마구 변화를 준다는 것이 최대 장점입니다.
※장점
1. HTML만 제작하면 스킨 제작이 끝난다.
2. 부가적으로 이미지, Flash 등등을 넣을 수 있다.
3. 자바스크립트와 여러 태그의 조합으로 비주얼적인 스킨 제작이 가능하다. (동적요소 가능)
4. 매우 유동적인 UI가 가능한다.
※단점
1. 창을 이동할 수 없다.(이 예제에서는 따로 창을 드래그 할수 있는 영역을 제공함.)>
2. 새로 고침하면 망한다...(자바스크립트를 동원하면 해결 가능하다.)
3. 창조에서 스킨을 제어하는 것이 불가능하다. (스킨에서 창조로 제공하는것은 가능하지만 창조에서 스킨을 제어하는 것은.. 아직 연구가 필요하다. 불가능한건 아니다.)
4. 드래그하면 드래그가 된다.(자바스크립트를 동원하면 해결 가능하다. 현재 이 예제에서도 자바스크립트를 이용해서 드래그가 되지 않도록 하고 있다.)
5. 보안문제(?) ... 보안문제가 발생하기 충분하다.(예를 들어 웹페이지 이동이라던가 하는 문제들 *삼지창에서 페이지 이동을 못하도록 제한하면 어느정도 해결 가능.)
6. IE의 낮은 버전에서는 호환성 문제가 발생할수 있다.
참고로 이 예제는 IE8을 기준으로 작성되었습니다. IE7이나 IE6를 사용하시는 분들은 페이지가 깨져보일수 있겠네요 ...
※구현방식
이 예제의 경우 삼지창에서 페이지 이동을 포착하여 동작을 구현합니다.
이 예제에서는
http://skin.{{action}} 의 URL 구성을 사용합니다.
(이 예제에서는 javascript에서 action 이라는 함수를 사용하여 URL을 자동구성합니다.)
1. 스킨에 따른 창크기 조절
body태그에 보시면 onload="action('size=(305,480)');" 명령이 있습니다. size=(X,Y)가 되며, (X, Y)와 같이 공백이 있으면 안됩니다. (즉, 콤마와 숫자를 붙여야 합니다.)
2. 각종 기능의 구현
이 예제는 아래의 동작만이 구현되었습니다. 물론 확장가능합니다.
action('play');
action('stop');
action('prev');
action('next');
action('exit');
아직 실용해서 사용하기에는 많은 문제점이 있습니다.
이 예제는 삼지창을 이용한 스킨구현의 아주 단순한 예제에 불과합니다.
실제로 뮤직플레이어에서 사용하려면
[프로그래스바]나 [가사창]까지 구현을 해야 하는데, 구현하려면 많은 작업이 필요할듯 합니다.
따라서 현재 구상으로는,
body에다가 onload에 progress=(X,Y,Width,Height,Color), lrcScreen=(X,Y,Width,Height,Color,bgColor) 등등의 명령어를 더 추가해서 창조에서 이를 감지하여 삼지창 객체위에다가ㅎ눈금계, ㅎ이름표 등을 올려놓아서 사용하는 방법이 있습니다. 물론 꼼수(?)입니다만..
이 방식의 최대 장점의 IE의 기능을 사용할수 있다는 겁니다.
IE7 이상이면 PNG Alpha 문제가 수정되었으므로, PNG이미지를 바로 스킨에 적용할수도 있고요.
IE에서 제공되는 CSS확장인 filter 속성을 사용하면 반투명 효과(창의 반투명 효과가 아닌 스킨의 반투명효과입니다.), 글자번짐 효과(글자 그리자효과) 등등을 사용하면 더욱 멋진 스킨 제작이 가능합니다.
