웹마스터 팁

  2. Support
  3. 웹마스터 팁

크롬리스(Chromless) 웹어플리케이션 -6 (최종)

2003.05.30 12:31

sundew




[온라인 데모]
http://labor119.com/sundew/mpl/sundew_mplayer_packages/resources/sundew_chromeless_v0.0.3/

[데모 파일 다운로드(v0.0.3)]
http://www.labor119.com/bbs/zboard.php?id=sundew_prog&page=1&sn1=&divpage=1&category=6&sn=off&ss=on&sc=on&select_arrange=headnum&desc=asc&no=20



VI. 창밖으로 상자 날리기

* 5회에서 소개 해 드린 데모코드가 유용하셨는지 어땠는지 모르겠네요.  도움이 되셨길 바라고요, 이번 회에서는 5회의 그 데모와 MEDIOPIXEL CHROMELESS을 결합 시킨, 이른 바, 팝업모드에 관한 설명을 끝으로 이 세 개의 상자에 관한 이야기를 모두 마칠까 합니다.  
자, 그럼 또 시작 해 봅니다~!


먼저 본 데모 프로그램 패키기(v0.0.3)의 구성 내용 부터 살펴 보겠습니다.

1. 데모 패키지 구성
*v0.0.2패키지에서 추가/변경 된 내용물들만을 살펴 봅니다.

- image: 크롬리스 팝업의 크롬부분에 사용되는 버튼 이미지들이 있습니다.
- smi.htm: 크롬리스 팝업을 띄우기 위한 중간 매개체 입니다.
- sundew_chromeless_inde.htm: 크롬리스 팝업의 컨텐츠부분을 구성합니다.
- sundew_chromeless_v0.0.3.js: MEDIOPIXEL CHROMELESS의 함수와 변수 부분이 추가되었습니다.


2. 어떻게 연결되어 있는가?
크롬리스레이어와 크롬리스팝업의 연결구조를 살펴 봅니다.

먼저 브라우져창 안의 크롬리스 레이어의 정보(파라미터)들을 "팝업모드" 단추를 누르는 순간, MEDIOPIXEL CHROMELESS구동 함수인 openwin()으로 연결 시켜줘야 히겠지요.

여기서 대상이 되는 값들은, 창의 크기(viewWidth), 창의 높이(viewHeight), 컨텐츠URL(sourceURL), 그리고 마지막으로 컨텐츠가 크롬리스레이어를 위한 것인지, 아니면 크롬리스 팝업을 위한것인지를 나타내는 플래그로 isCore가 있습니다.

이 대상 파라미터를 전달해야 하는데, 여기서는 CGI없이 순수히 Javascript만을 사용하는 관계로 한 페이지에서 다른 페이지로 파라미터를 전송하는 방법으로 환경변수를 참조하는 방법을 사용 해 봅니다.


3. HTML문서간에 파라미터 전달하기
뭐 대단히 전문적으로 들리는데 사실 알고보면 다 아시거나 수없이 지나쳐 봐 오셨던 내용입니다.  다름 아니라, 웹페이지 상에서 폼을 작성하고 "o.k"나 "전송"을 누르면 폼 안에 작성된 내용이 이를 처리 해 줄 CGI나 PHP등의 프로그램, 혹은, 스크립트로 전송되게되어 우리가 이렇게 게시판에 글을 올리게도 되고 메모를 작성하게도 되는 것이죠.  여기서 이야기 할 내용은 바로 이 부분입니다.  한 웹페이지에서 Javascript를 사용하였고, 이 때 사용한 변수값들이나, 폼 작성 내용들을 다른 웹 페이지로 전달 하여 그 곳의 Javascript가 이 전달받은 정보를 참조 하기위해서는 역시 CGI나 PHP같은 수용체가 있어야 되겠지만, 우리는 지금 순수 Javascript만으로 이 목표를 달성 하려고 합니다.

간단한 예를 살펴 봅니다.  다음은 “second.htm?url=http://www.google.com&title=Google” 와 같이 파라미터(url)가 포함되어 있을 때 Javascript를 이용하여 그 파라미터를 추출해 내는 방법을 보여주는 예제 코드입니다.
아래 코드를 메모장에 복사 해 가신 후, 각각 first.htm과 second.htm이란 파일명으로 저장해 봅니다.

[first.htm 코드 내용]

<html><body>
<a href="second.htm?url=http://www.google.com&title=Google">파라미터 전달하기</a>
</body></html>


[second.htm 코드 내용]

<script language="Javascript">
mainURL = window.location.search;        
//예:----mainURL은 "파일로컬위치/second.htm?url=http://www.google.com&title=Google"

URLparts = mainURL.split('?');
//”?”기호를 기준으로 재료(mainURL)를 조각 내서 URLparts라는 배열변수의 항목으로 넣습니다.
//예:----URLparts[0]는 "파일로컬위치/second.htm"
//예:----URLparts[1]는 "url=http://www.google.com&title=Google"

Arguments = URLparts[1].split('&');
//파라미터 부분(URLparts[1])을 다시 "&"기호 기준으로 조각내어 역시 Arguments라는 배열변수의 항목으로 넣습니다.
//예:----Arguments[0]는 "url=http://www.google.com"
//예:----Arguments[1]는 "title=Google"

for (i in Arguments) {                   //Arguments배열 항목 수 만큼 반복합니다.
    pair = Arguments[i].split('=');   //각 Arguments배열 항목을 다시 "="기호로 잘라 pair(배열변수)에 넣습니다.

//예:----"url=http://www.google.com"의 경우, pair[0]는 "url", pair[1]은 "http://www.google.com"

    switch (pair[0]) {                   //파라미터 이름과 그에 해당하는 값을 앞으로 사용할 변수값으로 지정합니다.
        case "url" :
            sourceURL = pair[1];
            break;
        case "title" :
            sourceTitle = pair[1];
            break;
        default :
            alert("경고:  전달 하신 파라미터 중 "+pair[0]+"는 무시 됩니다.");
    };
}

alert("sourceURL="+sourceURL+", sourceTitle="+sourceTitle);
</script>


이 방법을 통해 CGI나 PHP도움없이 html문서 간에 파라미터를 전달하며 우리의 데모코드에서는 크롬리스레이어를 포함 한 페이지가 크롬리스팝업을 생성할 패이지로 그 구성정보를 전달하는데 사용됐습니다.  크롬리스레이어의 구성정보들은 smi.htm이라는 파일로 옮겨지고 이 smi.htm파일은 MEDIOPIXEL CHROMELESS를 만들어 내는 openwin()함수를 호출하고, 다시 이 함수는 전달 받은 파라미터값들을 바탕으로 크롬리스레이어과 같은 크기와 컨텐츠를 담은 크롬리스팝업을 띄우게 됩니다.


4. 본 데모의 한계
- 참조하는 환경변수의 한계.
현재 이 크롬리스레이어-크롬리스팝업간의 모드 전환은 환경변수(location.search)의 참조한계로 파일이 온라인에 있을 때만 사용이 가능합니다.  이를 해결하기위한 두 가지 대안이 있을 수 있겠는데, 첫째로는 전체 함수/속성 선언을 클레스화해서 다루는 방법이겠고, 두번쨰는 앞서 MEDIOPIXEL CHROMELESS의 코드특성을 살펴 볼 때 3겹 Javascript라는 점을 언급 했었는데 여기서 한단계 더 덧 쒸워 4겹 Javascript(즉, Javascript안의 Javascript안의 Javascript안의 Javascript. 휴~)로 제어부분을 한번 더 감싸는 방법입니다.  다시 장황하게 논의 될 이 주제는 본 내용의 촛점과는 거리가 있으므로 여기서는 생략하도록 합니다.  관심 있으신 분은 구체적인 내용과 함께 개인적인 연락 바랍니다.

- 작업내용이 이어지지 않는다.
현재의 데모프로그램은 단순히 크롬리스레이어에 포함되어 있던 컨텐츠URL을 크롬리스팝업으로 옮겨주는 것입니다.  그렇기 때문에 예를 들어 메모장 웹어플리케이션을 열어 놓고 크롬리스레이어에서 내용을 작성하고, 크롬리스 팝업을 띄우게되면 물론 같은 메모장 웹어플리케이션이 열리기는 하지만 작업중의 내용은 사라지게 됩니다.  

하지만 이를 해결하는 방법들도 다양하게 존재합니다.  대상 정보가 2Kbyte미만의 경우라면 cookie를 사용하는 방법이 있겠습니다.  즉, 사용자가 크롬리스팝업을 띄우는 순간에 현재 작업내용을 쿠키로 저장하고 새롭게 뜨는 크롬리스팝업은 컨텐츠를 띄우는 과정에서 정해진 이 쿠키를 읽어 들임으로써 작업내용을 보존하면서 크롬리스를 창밖으로 날려 보낼 수 있습니다.  이 경우에는 물론, 사용자 브라우져셋팅이 쿠키를 받아 주도록 되어 있어야하는 제한이 있습니다.

또 다른 방법으로는 역시 파라미터로 전달하는 방법이 있겠습니다.  위에서 smi.htm, 즉, 크롬리스팝업을 띄우기 위한 매개체로 파라미터를 전달 할 때, 단순한 컨텐츠 URL만을 전달하는것이 아닌 현재 작업내용까지 같이 전달하게 되면 역시 마찬가지로 두 크롬리스간의 정보를 동기화 시킬 수 있겠습니다.


자, 이렇게 해서 창(Window) 안의 크롬리스(레이어)를 창 밖으로 던져 내는 이야기를 모두 해 보았습니다.
앞에서, 단순한 예제 코드에서 시작 해서 다양한 가능성들을 생각해 보고, 이 가능성들을 추가기능으로 그 처음의 예제코드에 첨부하며 연습하는 방법이 좋다고 말씀드렸었습니다.  이 번 예제에도 이 같은 접근법으로 많은 연습과 실패들을 경험 하시기를 권해 드리며, 이 것으로 6회 마지막 이야기를 마치겠습니다.




[닫는 글]


그 동안 "크롬리스 웹어플리케이션"이라는 이 한가지 주제에 관한 이야기를 6회까지 해 오면서 적지 않은 후회와 아쉬움이 남습니다.  무엇보다 본 게시판에 본의 아닌 “크롬리스” 도배를 하게되어 이 주제에 관심없으셨을 다른 많은 분들께는 죄송한 마음이 듭니다.  하지만, 1회의 "시작하는 글"에서 말씀 드렸듯이 "크롬리스"는 단지 떠오른 발상을 재현 해 보는데 사용한 재료/테마일 뿐이고 정작 중요한 것은 이 주재을 통해 Javascript의 유연성을 실험 해 보고, 또, 활용 해 보는 것이 주 목표였습니다.

혹시, 데모 예제에 관한 것이나 각 회에서 너무 세부적이어서 건너 뛰었던 사항들에 관한 궁금점이 생기신다면, 부족합니다만 엠플( http://m-player.wo.to )의 "크롬리스 웹어플리케이션 포럼"을 통해 물어봐 주셨으면 합니다.  또 한가지, 본 1회에서 6회까지의 모든 게시물들은 그 내용이 수시로 보충/보완되고 있습니다. (현재 이 줄을 쓰고 있는 시점도 6월7일입니다.)  관심있으신 분은 이따금씩 확인 해 보셔서 보완된 부분을 확인해 보시면 도움이 되리라 생각합니다.

이 부족한 내용의 글에 그 동안 관심을 가져 주셨던 모든 분들의 가정에 평안함이 항상 넘치시기를 기도 드리면서, 이 것으로 본 "크롬리스(Chromeless) 웹어플리케이션" 시리즈를 마칩니다.

감사합니다.



*이 게시물에서 다루는 내용의 예제는 아래주소에서 보실 수 있습니다.
http://m-player.wo.to
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
상태바에 2개의 메세지가 뜨는 태그 김주형 2003.07.03
마우스 오른쪽 버튼 누르면 원하는 메뉴 뜨게 만들기(다른사이트) [3] 김주형 2003.07.03
아이프레임으로 나타낸 문서를 크기에 맞게 자동으로 사이즈 조절 [3] DODGE 2003.06.28
웹에서그림그리기 [5] 카이저 2003.06.27
손쉬운 롤오버 이미지 자동생성 [15] 행복한고니 2003.06.16
[스크립트] 메뉴에 마우슬 데면 서브 메뉴가 나온다 [2] 처절초보 2003.06.16
[스크립트]오른쪽 버튼 누르면 메뉴나오기^^ [1] 처절초보 2003.06.16
Top, Back 함께사용하기 file sharim 2003.06.11
자바스크립트로 두개 이상의 페이지 동시에 열기. [4] 이성헌 2003.06.08
엔터키 걸러내고 코멘트 무조건 10자이상으로 하게하는 자바스크립트 소스 [9] 교행사랑 2003.06.06
오른쪽마우스 클릭금지,드래그금지,하단주소 숨기기 한꺼번에~ [8] 한길 2003.06.03
크롬리스(Chromless) 웹어플리케이션 -6 (최종) [4] sundew 2003.05.30
메뉴 옆에서 화살표가 스크롤되는.. [2] 힘찬연못 2003.05.29
크롬리스(Chromless) 웹어플리케이션 -5 [3] sundew 2003.05.28
스크롤되는 레이어 나두 갖구 싶어서 ^^; 맹글어 봤습니다. [10] M@xPond 2003.05.28
오른쪽 버튼 클릭시 북마크창 띄우기(1석2조 방식) [4] RedEye(rinja) 2003.05.23
크롬리스(Chromless) 웹어플리케이션 -4 [4] sundew 2003.05.23
손님컴퓨터에 내홈피 즐겨찾기 원클릭으로추가시키기 [5] 호호짱 2003.05.23
크롬리스(Chromless) 웹어플리케이션 -3 [5] sundew 2003.05.21
오늘 날짜와 시간 [3] Brown 2003.05.20
태그 쓰기