98..Etc/Etc...2008. 8. 28. 11:45
반응형

무버블타입에 FCKeditor 장착 플러그인

Go to English entry


이 플러그인은 Movable Type내에서 FCKeditor라는 WYSIWYG 에디터를 쉽게, 또 간편히 커스터마이징시켜 사용할 수 있게 해주는 것입니다. 현재 많은 공개된 WYSIWYG 에디터가 존재합니다. 저는 그 중에서 HTMLArea와 FCKeditor를 조금 사용해 봤는데 둘다 매우 좋은 놈입니다. 물론 그 특성상 PC에 약간의 부하를 주긴 합니다만, 이 자체가 이의 사용여부를 가늠할 잣대로서의 비중은 점점 줄어들거라 봅니다.

alogblogMTinterface 플러그인은 매우 많은 대체 MT 템플릿을 이용합니다. 따라서 사용자가 개인적으로 W~G 에디터를 삽입하고자 하거나 혹은 이를 위한 다른 플러그인(EnhancedEntryEditing같은)을 적용하고자 할 경우에, 이런 저런 문제를 겪을 가능성이 크다 봅니다. 그래서 EnhanceEntryEditing(이는 TinyMCE라는 에디터를 달아 줍니다.)라는 같은 류의 플러그인이 존재함에도 이를 새롭게 추가하게 되었습니다.

이 FCKeditor의 가장 큰 특징/장점 중의 하나가 바로 미디어 브라우져라고 불리는 기능입니다. 이를 이용해 간편하게 이미지 등을 엔트리 작성중에 업로드하고 이 주소를 바로 엔트리 상에 삽입해주는 기능인데, TinyMCE의 경우 이 기능이 별도의 플러그인으로 제공되는데...유료더군요. 유료다보니 기능 자체는 FCKeditor의 그것보다 좀더 좋은것 같습니다만, 당연 사용해보진 못했겠죠.

현재 이 페이지가 설명하는 플러그인은 원래 alogblogMTinterface라는 MT의 기본 인터페이스를 획기적으로(^^) 세련되게 변경해주는 플러그인의 업데이트 버전일 뿐입니다. 즉 현재 이 플러그인을 설치하면 FCKeditor만 MT의 기본 인터페이스에 추가시켜주는게 아니라, alogblogMTinterface라는 제 인터페이스위에 깔리게 됩니다. 이를 현재와 같이 별도의 페이지에 설명하는 것은, 이 FCKeditor사용에 좀더 중점을 두고 설명하기 위함입니다. 인터페이스 자체에 대한 의문 등은 원 페이지를 참조하시길 바람니다.

Requirement

  • Movable Type 3.2
  • PHP, FCKeditor의 미디어 브라우져/업로더 이용시

Features

  • 일반 textarea(FCKeditor창이 아닌)창의 크기를 동적으로 변경할 수 있습니다.
  • FCKeditor창의 크기를 커스터마이징할 수 있습니다.
  • 이모티콘과 업로드한 파일을 저장할 UserFiles 폴더의 경로를 커스터마이징할 수 있습니다.
  • MT시스템의 템플릿을 이용해 FCK에디터의 템플릿 기능을 쉽게 이용할 수 있습니다.
  • MT시스템의 템플릿을 이용해 FCK에디터의 스타일 기능을 쉽게 이용할 수 있습니다.
  • alogblogMTinterface의 "classic, sky, peach" 스타일에 맞춘 FCK 스킨을 이용할 수 있습니다.
  • FCKeditor의 미디어 브라우져/업로더를 쉽게 이용할 수 있습니다.

Installation

아래 내용을 차분히 따라 하면 됩니다. 실제 FCKeditor 사용만을 위해선 1번의 설치후에 5,9번 단계의 간단한 확인 조치만 하면 가능합니다. 나머지 단계는 FCKeditor의 템플릿/스타일 기능을 MT내에서 편하게 사용할 수 있도록 하기 위한 별도의 추가 조치입니다.

  1. 이 플로그인을 받아, (mt home) 폴더 밑에서 $ tar xvfz alogblogMTinterface_fck-3.2.04.tar.gz 등과 같은 명령을 통해 풀어줍니다.
  2. (mt home) 폴더 밑에서 $ perl   tools/add-default-templates 명령을 실행합니다.
    ( *** 만약 터미널 환경에서 이 명령을 실행할 수 없는 상황인 경우엔, 직접 이 명령이 하는 일련의 과정을 수행해주면 가능합니다. )

  3. (mt home)/mt-static/FCKeditor 폴더로 가서 $ chmod -R 777 UserFiles 등의 명령으로 모든 권한을 부여합니다.

Trial for verification

FCKeditor를 디폴트로 설정
"Create New Entry"을 눌러 새 엔트리 작성 화면을 열어 봅니다. 아마 FCKeditor가 나타나지 않을 겁니다. 그건 새로운 엔트리의 "Text Formatting" 이 "Convert Line Breaks"로 디폴트로 되어 있기 때문입니다. 디폴트로 FCKeditor를 사용하길 원한다면 블로그 설정에서 "New Entry Default"탭 메뉴에서 FCKeditor를 디폴트 텍스트 포맷팅으로 정해주면 됩니다.
링크/이미지/플래시 브라우져와 업로더
링크 브라우져라는 것은 엔트리 내에 a태그 즉 링크를 삽입할 때, 그 해당 자원의 주소href의 대상을 내 블로그 서버에 있는 어떤 자원을 가리키고자 할 때 사용하는 것입니다. 이미지/플래시도 마찬가지지만 각각의 파일타입에 맞게 제한되는 것만 다릅니다.

먼저 "이미지 삽입" 메뉴버튼을 클릭해 봅니다. 그럼 팝업창이 뜹니다. 여기에서 소위 "업로더"와 "브라우져" 두가지의 조금 다른 방식으로 파일을 서버에 올릴 수 있습니다. Uploader의 경우에는 특정한 서브폴더를 지정할 수가 없고 그냥 UserFiles밑의 특정 폴더밑에만 바로 올립니다. 만약 자신의 별도로 서브폴더를 나눠서 사용하지 않는 상황에서, 이미 올린 파일이 아니라, 지금 새로 올리면서 그 파일을 링크/이미지/플래시의 주소로 이용하고자 할 경우에 편리합니다.

그 팝업창에서 "서버 보기"를 클릭하면 소위 "브라우져" 기능을 이용하는 게 됩니다. 말그대로 해당 파일타입관련한 폴더 밑에다 새로운 서브 폴더를 생성할 수도 있고, 거기에 파일을 올릴 수도 있습니다. 이때 새로운 폴더생성이 되지 않거나, 파일 업로드가 안되면 100에 98, 폴더 퍼미션 문제입니다.

이제 시험삼아 이미지 폴더에 테스트 용으로 올려놓은 cat 이미지 파일과 플래시 파일을 한번 엔트리에 삽입해 봅니다.

FCKeditor의 템플릿/스타일 기능 사용을 위한 준비
지금껏 설치하고 설정한 단계만으로도 충분히 위지윅 기능을 바탕으로 에디터를 사용할 수 있습니다. 만약 지금까지의 단계로도 머리가 조금 복잡하다면, 이하 내용은 당장에 안보셔도 전혀 상관이 없습니다. 이 에디터를 익숙해질 정도로 사용하신 후, FCKeditor의 템플릿과 스타일 기능에도 관심이 생길 때, 아래 내용을 습득하셔도 됩니다.


지금까지의 사항만으로 위지윅 기능과 미디어 브라우져/업로더를 이용하여 편리한 블로깅 환경을 만들 수 있지만, 이것만으로는 FCKeditor의 고급기능과 또 이를 뒷받침하기 위한 이 플러그인의 기능을 다 이용하는 것은 아닙니다. 템플릿과 스타일 지정을 MT의 템플릿 메뉴에서 커스터마이징할 수 있다는 점이 이 플러그인의 최대 특징입니다. 아래 내용을 따라 준비를 합니다.

  1. 먼저 System Overview 아래의 "List Weblogs" 페이지로 가서 현재 생성되어 있는 모든 블로그를 선택한 후에, "Add Default Template(s)" 액션을 실행합니다.
  2. 현재 블로그의 "List Template" 페이지로 가보면, 세 개의 FCKeditor 관련 템플릿을 볼 수 있습니다. 그 각각을 열고 Rebuild 를 해줘서 output file을 만들어 줍니다.
  3. 현재 블로그의 스타일스트 관련(styles-site.css) 템플릿을 열고 그 맨 첫줄에 @import url(fck_editorarea.css); 를 한줄 추가/리빌딩합니다.

* 어쩜 MT의 인덱스 템플릿 목록창에 난데없이 세개의 FCKeditor관련 템플릿이 있어서 의아해 하실수 있을지 모르겠습니다. 이 3개의 템플릿은 이미 설치과정에서 "디폴트" 템플릿으로 MT에 기록시켰고 또 현재 생성되어 있는 모든 블로그에 추가를 마쳤기 때문에 나타난겁니다. "디폴트" 템플릿이 되었다는 것은, 향후에 새로운 블로그를 생성시, 위의 세 템플릿도 같이 생성되어 진다는 뜻입니다. 물론 TemplateRefesh같은 액션을 적용할 수도 있게 됩니다. 이게 먼 소린지 잘 모르시면 설치과정의 2단계에서 있는 addDefaultTemplate 플러그인 페이지를 보시기 바람니다.

FCKeditor 템플릿:
FCKeditor 메뉴바에 있는 "템플릿" 버튼을 클릭해 봅니다. 나타나는 팝업창에서 "Plugin Document"을 한번 선택해 봅니다. 이 템플릿 기능을 이용하면 해당 창에 있던 기존의 내용은 사라지므로, 항상 처음에 템플릿 기능으로 사용해야 합니다. 제가 만들어놓은 플러그인 문서에 맞는 템플릿이 창에 삽입이 되어 나타나면 설정이 잘되어 있다는 뜻입니다.

일반적인 신변위주의 블로그 엔트리의 경우 특별한 문서 템플릿이 필요없지만, 현재 보고 계신 제 플러그인 페이지처럼 특정한 목적을 위해 사용할 경우 보통의 워드프로세서같은 곳에서 흔히 사용하는 템플릿 기능이 많이 요구되어 지는데, 이때 사용하는 것입니다.

만약 이 템플릿 기능을 이용해 나만의 템플릿을 만들어 사용하고 싶다면, MT의 템플릿 메뉴로 가서 "FCKeditor Templates" 라는 이름의 인덱스 템플릿을 열고, 거기에 추가/변경해서 저장/리빌딩해주면 됩니다. 이때 그 출력파일명(fcktemplates.xml)은 변경하면 안됩니다. 열어서 그 내용을 대충 보시면, 어려울건 없습니다. 그 신택스는 매우 직관적이므로 한두번 훑어보면 알 수 있으리라 봅니다.

FCKeditor 스타일
FCKeditor 등과 같은 소위 WYSIWYG에디터의 가장 큰 단점은 바로 폰트의 크기/색상/종류 등을 font태그를 이용해서 마구잡이로 엔트리 내에 하드코딩시킨다는 것입니다. 물론 초보자의 경우엔 별다른 준비없이 간단히 원하는 표현을 즉석에서 사용할 수 있다는 장점으로 작용하지만, 일반적으로는 피해야하는 작성 습관/태그라 할 수 있습니다. 만약 자신이 특정한 표현을 자주 사용한다면 그것을 스타일로 지정해두고, FCKeditor의 스타일 메뉴로 해결하는 것이 좋습니다. 이때 원하는 스타일을 담고 있는 스타일시트는 당연히 FCKeditor에서도 참조하고, 또 실제 출력된 페이지에서도 참조할 것입니다. 이 역할을 MT내에서 쉽게 할 수 있도록 이미 설치과정에서 지겨움을 참고 끝마쳤으므로 실제 사용시엔 그냥 위의 템플릿과 동일한 과정으로 MT의 템플릿 목록에서 "FCKeditor CSS" 와 "FCKeditor CSS Mapping" 템플릿을 열어서 커스터마이징하면 됩니다. 맵핑 파일의 경우에도 마찬가지로 매우 직관적이라 쉽게 그 문법을 이해할 수 있을 것입니다.


테스트 엔트리 Publishing

이 플러그인에는 HTMLArea에 포함되어 있는 작은 형태의 이모티콘도 같이 넣었습니다. 이런 저런 다양한 아이템을 엔트리에 추가해보고(반드시 하나 이상의 스타일 적용해 볼 것) 그것을 퍼블리싱합니다. 이때 결과 페이지에서 특히 스타일이 FCKeditor상에 나타난 것이랑 같게 적용이 되나를 확인합니다. 이는 설치단계의 8번이랑도 연관이 됩니다. 혹 스타일이 제대로 결과 페이지에 나타나지 않는다면... 위 설치단계를 다시 한번 확인하세요.

선택적 개인화(customization)

FCKeditor 창의 높이

FCKeditor 창의 높이도 동적으로 변경할 수 있도록 관련 API를 찾아 보았지만 없어서, 대신에 MT의 각 블로그 아래의 플러그인 설정에서 본문/확장문 각각 창의 높이를 설정할 수 있도록 했습니다. 텍스트 포맷팅을 "none이나 Convert Line Break"로 사용시엔 동적으로 변경가능합니다.

이모티콘

이모티콘은 특히 W~G에디터에선 쉽고 비교적 자주 사용하는 아이템입니다. 이 이모티콘은 그 특성상 특정한 블로그에 전용하다기 보단, MT인스턴스로 생성한 모든 블로그에 공통된 자원입니다. 일단 기본으로 위의 설치 과정을 따르면 (path/to/mt)/mt-static/FCKeditor/emoticons/ 폴더 아래에 이모티콘 파일들이 존재합니다. 만약 여러분의 MT설치 특성상 그 설치 경로가 꽤 깊거나 혹은 이미 기존의 다른 폴더를 공통의 이미지파일 폴더로 사용하고 있어서 이를 계속 유지하고 싶은 경우에 이를 설정해 줄 수 있습니다. 먼저 위 디폴트 경로 아래에 있는 파일들을 원하는 다른 곳에 옮긴 후에 그 변경된 경로를 MT의 "System Overview"내의 플러그인 설정란에서 지정해주면 됩니다.(이모티콘은 모든 블로그에 공통된 자원이기 때문에, 이 경로설정을 개개의 블로그밑이 아닌 시스템밑의 플러그인 설정란에서 하는 것입니다.)

UserFiles

"UserFiles"이라는 이름은 FCKeditor에서 디폴트로 사용하는 폴더명입니다. 이 폴더 밑에 File,Image,Flash등의 서브 폴더가 생기고 그 각각의 아래에 해당 파일들을 업로드하는 식입니다. 위의 설치과정을 따르면 이 경로가 "path/to/mt/mt-static/FCKeditor/UserFiles/"로 됩니다. 이 의미는 무엇일까요? 하나의 MT인스턴스로 생성한 모든 블로그가 공통된 저 경로밑에 파일들을 업로드하고 관리한다는 소립니다. 머 그렇게 사용할 수도 있겠지만, 또 다른 경우에는 각각의 블로그마다 각기 다른 곳(이를테면 바로 각각의 블로그 루트 경로 아래에)에 UserFiles폴더를 두고 각기 독자적으로 관리하고 싶은 경우가 왜 없겠습니까? 이럴땐 마찬가지로 원하는 폴더를 만들어 주고(꼭 UserFiles라는 이름일 필요도 당연히 없겠죠, 다만 관례상 그런 이름을 사용하면 차후에라도 이 폴더가 FCKeditor랑 관련있는 거구나...정도 할순 있겠죠) 그 경로를 MT메뉴의 플러그인 설정란에서 해주면 됩니다. 당연히 이 경로는 블로그마다 설정해주는 개념이므로 각 블로그밑의 플러그인 설정페이지로 가야 되겠죠?

FCKeditor의 툴바 등 기타 변경

이미 에디터의 툴바를 제가 적절히 커스터마이징해서 배포하고 있지만, 사람 취향이 제각각, 분명 난 다르게 툴바를 배치/선택하고 싶다!라는 생각이 없을수 없겠죠. 만약 그런 위험한(^^) 생각을 하셨다면 (mt home)/alt-tmpl/cms/header.tmpl 파일 내에서 적절한 키워드로 찾아서 수정하시면 됩니다.

예를 들면, 폰트 종류/크기 등의 메뉴를 좀더 다양하게 늘려주고 싶다는 생각은 누구나 본능적으로 하게 될거라 봅니다. 버뜨! 참으세요. 앞서 말씀드렸다시파, font태그를 지저분하게(?) 삽입하는 것은 배보다 배꼽이 더 큰 불량 엔트리로 가는 길이기 때문입니다. 가능하다면 자주 사용하는 스타일을 MT템플릿상에서 간편히 만들어 효율적으로 사용하십시요. 이 방법만이 차후에 업데이트 혹은 이런 저런 이유로 재설치시 등마다, 또 다시 FCKeditor 소스를 침투해서 방황하는 무모한 짓을 번번히 되풀이 하지 않는 유일한 길입니다. 그럼에도 불구하고(^^;;;) 초심자를 위해 폰트의 종류/크기 등을 변경하고 싶다면 그 또한 타당성이 있어보입니다. 혹 그런 경우엔 앞선 header.tmpl 파일과 (mt home)/mt-static/FCKeditor/ 폴더 밑의 소스를 뒤져서 헤쳐나가시면 됩니다.

FCKeditor의 source/config 레벨에서 좀더 특화된 customization을 감행하실 경우엔 충분한 지식을 가지고 하시길 바람니다. 또한 그로 인한 어떤 문제에 대해 저에게 도움을 요청하진 말아 주십시요.^^

Trobuleshooting

  • FCKeditor를 플러그인화하면서 종종 에디터가 나타나지 않는 등의 문제가 생겼는데 그런 원인의 대부분이 바로 클라이언트측의 브라우져 환경에 기인하는 것이었습니다. 특히 팝업 필터같은 것을 요즘엔 많이 사용하는데 이것이 FCKeditor의 생성, 미디어 브라우져의 착동 방해 등의 주요원인입니다. 혹 그런 경우에는 필터를 끄거나 혹은 예외목록등을 이용하십시요.
  • 만약 FCKeditor의 브라우져를 원할히 사용할 수 없는 경우의 태반은 앞선 UserFiles/ 폴더 이하 서브폴더 등의 생성/저장 등의 권한 부족문제입니다.
  • 혹 Firefox/Mozillar 에서 엔트리 저장시 공백 페이지만 나타나고, 원 엔트리 작성 페이지로 돌아오지 않는 경우가 생기는 재수없는(^^) 경우를 겪을 수도 있습니다. 이의 직접적인 원인제공 소스는 잘 모르지만, 확실한 것은 MT의 리다이렉션 방법 때문이라는 것입니다. 물론 디폴트 상태의 MT에서는 문제가 없습니다. 대부분이 HTTP의 Location헤더 방법으로 리다이렉션하기 때문입니다. 그런데 만약 설치한 어떤 플러그인이나 기타 원인으로 리다이렉션을 HTML의 META 태그를 이용해 하는 경우에, Firefox + FCKeditor의 환상적 조합에서 약간의 불협화음을 낸다고 합니다. 이런 재수없는 경우가 혹 발생시엔, 이런 점을 중점으로 먼저 설치한 플러그인을 불활성시켜보는 등의 방법으로 공략하십시요. 특히 제가 만든 Cool IRI라는 매우 훌륭한(?) 플러그인이 바로 그 재수없는 케이스를 발생시켰었습니다. 혹 구버전을 쓰셨던 분중에 FCKeditor를 Firefox상에서 사용하실 분들은 신버전으로 업데이트하십시요. 일반적으로 흔치 않은 에러입니다.

Notes

앞서도 약간 말씀드렸다시피 FCKeditor의 기능에 대한 문의나 그 자체의 에러 등은 제 능력 밖이라는 말씀을 드립니다. 특히나 FCKeditor를 제가 제공한 기능 외에 한층 커스터마이징을 시키는 등에서 발생하는 문제는 더더욱 그러합니다. 물론 제가 공개/배포한 범위 내에서의 문제에 대해선 얼마든지 환영입니다. 이를테면, "Entry Body에서의 FCK는 잘 작동하는데 Extended Entry의 창에서 이런 저런 놈은 저런 이런 문제를 발생시킨다. 왜 그런가? (답: 새 컴퓨터를 구입하세요)" 라는 것이 전형적인 이 플러그인 관련한 질문의 한 예일 것입니다. FCKeditor 등의 W~G 에디터 프로그램은 매우 매우 복잡한 프로그램이면서 특히나 브라우져의 특성에 매우 민감한 것입니다. 이 플러그인을 만들면서 FCKeditor의 Wiki사이트 등을 눈팅하면서 느낀 건, 그 (재수없는 경우) 발생하는 원인 모를(더우기 답은 더 잘모를) 비정상적 작동의 경우의 수가 많다는 점이었습니다. 혹 그러한 경우엔 과감히 이를 눈물을 머금고 포기하시고, EnhancedEntryEditing 과 같은 조금 저수준(^^)의 다른 플러그인를 시도해보시길 바랍니다.

FCKeditor와 Movable Type을 연결해 주는 이 작은 플러그인이 맘에 드신다면, 주변분에게 알리는 간단한 엔트리 하나 로깅하시는 센스.

License

FCKeditor follows its own copyright.
Relased under the Creative Commons License.

Version History

  • 3.2.04: FCKeditor 2.1.1 newly added. / Error "Can't call method "preferred_language"..." fixed, thanks dusl for reporting it.
  • 3.2.03: Chinese CSS version added.
  • 3.2.02: Korean/Japanese CSS version added.
  • 3.2.01: for MT 3.2
  • 1.0 : Initial but not released, for MT3.17

  • google.co.kr (91)
  • link.allblog.net (2)
  • search.naver.com (35)
  • google.com (7)
  • search.daum.net (8)
  • kr.search.yahoo.com (1)
  • search.empas.com (10)
  • web.search.naver.com (2)
  • 192.168.0.4 (1)
  • google.co.jp (1)

TrackBack

TrackBack URL: http://alogblog.com/movabletype/korean_plugins/TCode.name/49. 1284914640

QuickPost/Bookmarklet 등과 같은 자동화 도구로 트랙백을 보내시면, 귀하의 트랙백은 이 사이트의 운영자가 승인할 때까지 이 페이지에 표시되지 않습니다. 혹 자동화 방법으로 보내실 경우, 트랙백이 표시되지 않아도, 반복적으로 보내진 말아 주십시요. 감사합니다.


Comments

새 포스트를 선택하면 error loading "http://www.pdaclub.org/blog/fckstyles.xml" 이라는 팝업창이 두번 뜹니다. entry body쪽은 줄만 한줄 보이는데 선택하면 메뉴가 보이긴 합니다. Extended Entry 쪽은 FCKeditor 메뉴가 잘 보이구요. 뭘 봐야 될지 알수 있을까요?

먼저 본문은 디폴트 상태에서 FCKeditor를 줄여놓았구요, 확장문에서는 펼쳐놓았습니다. 본문 창이 상대적으로 작기때문에 설정에서 그렇게 만든겁니다. fckstyle.xml 파일은 FCKeditor의 "스타일"을 엠티의 템플릿에서 일괄적으로 만들 목적으로 있는 겁니다. 아마 에디터에서 스타일 메뉴를 보면 아무것도 안나타날겁니다. 거기에 "Yellow Pen" 같은 스타일이 나타나야 됩니다. 그 이유는 템플릿에 새로 만들어진 관련 템플릿을 각각 리빌딩하지 않았기때문일겁니다. 기본적으로 블로그 루트에 각각 생성되어 있어야합니다. 만약 스타일이나 FCKeditor의 템플릿 기능을 그리 이용할것이 아니라면, 그냥 /blog밑에 fckstyles.xml이름의 가짜 파일을 하나 두면 에러창은 없어질겁니다. 물론 절대 권하는 방법은 아니구요...

저같은 경우는 blog 폴더안의 내용을 지울수도 있을 것 같아서, 이미지 폴러는 루트의 images, 데이터 파일은 루트의 data 폴더를 만들어 이용하고 있습니다. 이 툴은 사용자가 지정한 폴더 안에 Image 같은 폴더를 생성한 후에 사용자가 원하는 폴더를 만들수 있던데요.
File,Image,Flash 라는 폴더안에 사용자가 새로 폴더를 생성하지 말고 사용자가 지정한 폴더안에 새 폴더를 만들수 있게는 안되나요?
(FCKeditor 자체기능이 이런가 싶기도 합니다.)

각 블로그의 플러그인 설정 메뉴에서 UserFiles폴더를 설정할 수 있습니다. 다만 FCK특성상 이 유저파일 폴더 밑의 Image폴더밑에 그림이 저장됩니다. 그러니까 원칙상 웹루트밑의 /images에 FCK를 이용해 그림을 저장하긴 어렵겠죠. 아니면 UserFiles밑에 있는 Images 폴더를 삭제하고 $ ln -s /.../images Images 처럼 한번 링크를 걸어보세요 혹 되는지... 즉 기존에 존재하는 이미지경로에 대한 링크로 UserFiles밑에 Image를 만드는겁니다.

영문링크(http://alogblog.com/movabletype/plugins/tagging_on_the_fly/)에 보면 태그관련 글이 있던데요. 제 생각에는 카타고리를 여러개 만드는것보다, 카타고리는 간단하게 만들고, 각가의 글들에 태그를 붙여 포스트들을 자세히 부류시키면 좋을 것 같아요. 호찬님 블로그같이 태그플러그인을 써보고 싶은데 한글태그는 안되는것 같더군요. 태그까지 영문으로 기입하는것은 제 생각에는 의미가 없는것 같은데, 혹 한글 지원되는 태그app 아시는게 있으시면 추천 좀 부탁드립니다.
http://hochan.net/archives/2006/01/11@05:09AM.html

태그는 대내적/대외적 의미로 나눠 생각해 볼 수 있는데, 대내적으로는 그 성질이 기존의 카테고리와 똑같습니다. 그럼에도 태그(Tagging)라고 별도로 나온것은, 기존의 카테고리는 새로 만들어줄때마다 사용자가 별도의 생성행위를 했어야했지만, 태그는 그냥 keyword란에 원하는 분류를 간단히 써넣기만 하면 되는 즉석생성이랄까요? 하여튼 그런 편리성때문에 생겨나고 또 인기를 얻는거라 봅니다. 어쨋든 그 내부적인 존재의미는 글을 분류하는 것이라 카테고리와 똑같죠. 말자체도 카테고리(category)보단 태그(tag)가 쉽네요. 하지만 이런 즉석 생성의 단점도 있겠죠. 바로 비슷비슷한 분류에 대해 중복적으로 태그를 만들 수있다는 점입니다. blog, blogging, blogs, Movable Type, movalbetype 이런 예에선 설마...싶을 수 있지만, 시간이 갈수록 진짜 태그구름(tag cloud, 원의미는 이것이 아니지만)처럼 유사한 태그로 산재해 나타날 가능성이 있죠. 물론 이건 실제 태그 메타사이트인 technorati등에서도 실제 발생하는 문제라면 문제이기도 합니다. 카테고리를 이용하면 그럴 염려는 없다고 봐야겠죠.

태깅을 해주는(즉 쉽게 카테고리같은 가외의 분류를 해주는) 플러그인은 그 MT 내부적인 기능상으로 두가지 종류가 있는데요, 하나는 태그를 기존의 MT카테고리와 똑같이 취급하면서 DB 의 카테고리 항목을 그대로 이용하는 놈과, 플러그인 데이터를 이용해 별도의 디비로 관리하는 놈이 있습니다. 머 이또한 일장일단이 있겠군요.

대외적 의미로는 태그메타사이트에 자신의 글에 분류를 넣어서 광고한다는 의미겠죠. 제 FCKeditor 플러그인이 Tagging on the fly는 이 목적의 플러그인입니다. 이 목적으론 기존의 카테고리는 불가하다고 봐야죠. 그 불가이유는 태그관련 메타사이트들이 rel="tag" 링크 속성만 이용하기때문입니다. 대내적인 분류목적으로는 걍 카테고리 사용하고 대외적인 광고(?)목적으로는 걍 Tagging on the fly사용하는...
http://www.sixapart.com/pronet/plugins/ 플럭인 디렉토리에서 Tagging 섹션에 보시면 관련된 놈을 몇개 보실수 있습니다. 전 사용해본적은 없지만, 그중 tagwire라는 놈이 일본분이 만드신거라 Multilingual Tagging을 지원한다고 하니 한글도 되지 않을까 싶긴 합니다.

감사합니다. 많은 도움이 될 것 같습니다. 워드프레스에서 태그를 잠깐 써봤습니다. 알록님이 언급한데로 나중에 되려 태그들로 인해 제대로 분류가 되지 않을까봐 단어선택에 많이 고민하게 되더군요. 저 나름대로 태그로 선택할 단어의 표준화를 시켜야 겠죠. 태그메타사이트에서는 개인마다 선택하는 단어가 틀릴수 있으니 어렵긴 하겠네요.

처음으로 FCKeditor를 설치하였습니다.

다른 부분은 문제없이 잘 돌아가는데
이미지 삽입시 링크를 통한 삽입중 서버보기를 실행하면
이상하게 Explorer 스크립트 에러가 발생합니다.

대충 fckimage.html소스를 살펴보니
서버보기시 실행시키는 스크립트가 함수가 LnkBrowseServer() 인듯한데
혹 어떤 문제로 일어나는 것인지 알고 계신지요?

(에러는 359라인에서 처음 발생합니다)

안녕하세요
FCKeditor의 최대(?)장점이 미디어 브라우저이기 때문에 가능하면 사용이 되도록 설정하는게 좋겠죠.
일단 많은(?) 분들이 사용하신 결과 제 플러그인 자체에는 별 문제가 없어보입니다. 가장 문제가 많이 발생하는 부분이 바로 미디어 브라우저입니다. 툴바기능중에 가장 복잡한 것중에 하나이기 때문일겁니다.
제가 보기에, 서버상의 UserFiles 내의 퍼미션이나 혹은 FCKeditor 자체 파일들의 퍼미션이 부족해서 에러가 뜨거나(일반적인 경우) 브라우저 상에서 스크립트 수행을 이런 저런 이유로 막기때문에 생기는게 가장 흔합니다.(이 경우에는 다른 브라우저, 예를 들면 파이어폭스 등에서는 되는데 IE에선 안된다.. 이러기 쉽습니다.)
가장 난해(?)한 문제는 FCKeidtor자체의 문제입니다. FCK 자체가 워낙 복잡한 프로그램이고 또 크로스 브라우징을 목표로 짠거라 모든 경우들 다 완벽하게 지원하지 못하는 경우가 생기는데, 이런 경우에 걸리면 조금 복잡해집니다. 제가 보기에 윈도 서버를 사용하면 리눅스서버 계열보다 조금더 그럴 확률이 크지 않나? 경험적으로 그리 보입니다.
정확히 어떤 원인인지 바로 알기는 어렵지만, IE는 오류 메시지가 그리 자세하지 못해서 원인을 찾아가는데 별 도움이 안되도군요. 파이어폭스나 오페라 에서는 비교적 자세한거 같습니다. 그렇게 해서 특정한 메시지 등을 발견한다면 그걸 근거로 FCKeidotr 포럼을 검색해보는게 비교적 확실한 방법같습니다.
http://sourceforge.net/forum/message.php?msg_id=3637647 하나 검색해보니 이런 비슷한 경우가 나오는데 이게 정확한 케이스인지는 물론 확신못하겠구요...
뚜렷한 해결책을 못드려 죄송합니다. 문제가 있으면 언제든지 코멘트 주세요.

메일로까지 답변을 주셔서 너무나 감사한 마음입니다.

해당 문제는 저의 경우 기본적으로 IE가 관리하는 팝업방지 보안책이
서버 스크립트를 통해 팝업을 띄우는 것을 가로막았기 때문입니다.
팝업차단 사이트에서 해제하여 주시면 사용에는 별다른 지장이 없습니다.

또는 Cookie가 new window로 전달되지 못하는 현상과도 문제가 있을 수
있다고 소스파일의 해당부분 주석에 명시되어 있으나, 이 보다는
위의 문제와 더욱 연관이 있어 보입니다.

그럼 감사한 마음으로 ^^

Posted by 1010
98..Etc/Etc...2008. 8. 27. 18:17
반응형

FCKeditor is an open source text editor for internet. It is compatible with most internet browsers which includes IE, Firefix, Mozilla and Netsacpe. On the server side, FCKeditor offers the JSP Integration Pack which makes it very easy to use FCKeditor in JSP web pages.

1. Download the JSP Integration Pack from the following URL:

http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=129511

And download FCKeditor editor from the following URL:

http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=75845

2. Install FCKeditor in a JSP environment:

Unzip the Java Integration Library, put the jar files FCKeditor-x-x.jar and commons-fileupload.jar in your webapp's WEB-INF/lib/ directory.

Unzip the FCKeditor editor zip file and put all JavaScript scripts in the /FCKeditor/ directory of your webapp.

The director structure is as follows:

/webapp
/FCKeditor
/WEB-INF
/classes
/lib
/fckeditor-x-x.jar
/commons-fileupload.jar

3. Use FCKeditor in jsp pages

1) Put this taglib definition at the top of the JSP page:

<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>

2) Use the tag in jsp:

<FCK:editor id="marketing_scope" basePath="/FCKeditor/" height="300"
skinPath="/FCKeditor/editor/skins/office2003/"
imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector">
</FCK:editor>

3) Config the File Browser Connector by adding the following piece of code in web application's web.xml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">
<description>FCKeditor Test</description>
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
</web-app>

<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
</web-app>

And put in the fckconfig.js the following line:

FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;

4) Get and set the content in the editor with javascript:

function getEditorValue( instanceName )
{
// Get the editor instance that we want to interact with.
var oEditor = FCKeditorAPI.GetInstance( instanceName ) ;

// Get the editor contents as XHTML.
return oEditor.GetXHTML( true ) ; // "true" means you want it formatted.
}

function setEditorValue( instanceName, text )
{
// Get the editor instance that we want to interact with.
var oEditor = FCKeditorAPI.GetInstance( instanceName ) ;

// Set the editor contents.
oEditor.SetHTML( text ) ;
}

4. Full example source code

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../sample.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function setEditorValue( instanceName, text )
{
// Get the editor instance that we want to interact with.
var oEditor = FCKeditorAPI.GetInstance( instanceName ) ;

// Set the editor contents.
oEditor.SetHTML( text ) ;
}

function getEditorValue( instanceName )
{
// Get the editor instance that we want to interact with.
var oEditor = FCKeditorAPI.GetInstance( instanceName ) ;

// Get the editor contents as XHTML.
return oEditor.GetXHTML( true ) ; // "true" means you want it formatted.
}
</script>

</head>
<body>

Hello World! FCKeditor



<%
String submit = request.getParameter("submit");
if (submit != null) {
String content = request.getParameter("content");
if (content == null) content = "";
out.println("Content: " + content);
out.println("
");
}
%>
<form method="post">
<FCK:editor id="content" basePath="/FCKeditor/" height="300"
skinPath="/FCKeditor/editor/skins/office2003/"
imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector">
</FCK:editor>


<input type="button" value="Set Value" onclick="setEditorValue('content', 'Hello World!')" />
<input type="button" value="Get Value" onclick="alert(getEditorValue('content'))" />
<input type="submit" value="Submit" name="submit" />
</form>
</body>
</html>
Posted by 1010
98..Etc/Etc...2008. 8. 27. 18:15
반응형

Index of /

      Name                    Last modified      Size  Description
Vanilla-1.1.4.zip 23-Oct-2007 16:55 385K Vanilla/ 24-Oct-2007 01:22 - drupal-6.1.tar.gz 27-Feb-2008 11:55 1.0M drupal/ 26-Dec-2007 00:46 - ichthux/ 12-Sep-2006 07:52 - latest.tar.gz 23-Oct-2006 04:56 735K lugradio/ 23-Sep-2007 07:34 - magento-0.9.17740.zip 19-Mar-2008 11:50 11M magento/ 19-Mar-2008 04:30 - mislaid/ 23-Aug-2006 06:17 - planet/ 27-Jun-2007 02:09 - testbed/ 13-Feb-2005 12:38 -

"""

FCKeditor Django Connector

Author: Nathan R. Yergler <nathan@yergler.net>
Copyright: 2006
License: GNU LGPL; see LICENSE for details.
Version: $Rev$
Updated: $Date: 2006-08-17 11:57:00 -0400 (Thu, 17 Aug 2006) $

Overview

FCKeditor is a Javascript-based rich text editor for web applications. One of the enhanced features it offers is a web-based browser for media files stored on the server. The browser relies on a server-side connector to provide XML responses for commands. FCKeditor includes connectors for many server-side technologies, including a Python CGI implementation. However, when using FCKeditor in a Django application, it is desirable to implement the connector within the Django process. This package provides a Django-based implementation of the FCKeditor server side specification.

Dependencies

The FCKeditor Connector relies on Django and ElementTree. Note that if you prefer to use lxml, you can simply modify the import at the top of views.py from:

from elementtree import ElementTree

to:

import lxml.etree as ElementTree

Usage

To use the FCKeditor Connector you must install the connector as a Django application in your project, connect the appropriate URLs, modify the admin interface to use FCKeditor and finally update the FCKeditor configuration to point to the connector.

Installing the Application

To install the application, simply place the fckeditor_connector Python package in your project directory and add fckeditor_connector to the INSTALLED_APPS setting in settings.py.

After installing the application you need to set two configuration variables found in views.py. BASE_PATH defines the base file-system path for FCKeditor-browsable files. Note that FCKeditor expects that this directory will contain sub-directories for specific file types. For example, if BASE_PATH is set to /var/www/media, FCKeditor expects that /var/www/media/Images will contain image files. See the server side specification for details on FCKeditor file paths.

BASE_URL should contain the base URL for the files served. This has only been tested with files served from the same server URL as Django (using the static files Django view for development).

Connecting the URLs

To enable the FCKeditor Connector URLs in your project, you can add something like:

...

(r'^fckeditor_connector/', include('fckeditor_connector.urls')),

...

to your project urls.py. If you want to use a different prefix, you'll need to use that instead of fckeditor_connector when configuring FCKeditor below.

Configuring FCKeditor

To enable FCKeditor to use the Django connector, you need to update fckconfig.js to point to the connector. The default FCKeditor connector configuration is based on a standard URL schema. Unfortunately this does not work with the Django connector, so we have to specify a complete URL. In fckconfig.js you will find a block on configuration parameters such as:

FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ;
FCKConfig.ImageBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ;   // 70% ;
FCKConfig.ImageBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ;  // 70% ;

Below this block add the following line:

FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=/fckeditor_connector/browser/';

Note that if you did not use the suggested URL prefix you will need to modify this line. In particular, the first portion of the Connector query string parameter should contain the base URL provided in your project's urls.py.

Using FCKeditor in the Admin interface

There are several ways to connect the FCKeditor to the Admin interface. The way we have tested with is to replace a specific textarea. To use the FCKeditor, you need to download FCKeditor and put it in a location accessible by Django. Currently we put this underneath the admin media directory. Once you have it accessible, you need to add the following information to the Admin class of the appropriate model:

class Admin:
   # javascript for fck editor
   js = ( 'underlay/fckeditor/fckeditor.js',
          'underlay/news/story.js',
          )

In this case story.js is a small Javascript file which contains the following:

window.onload = function()
{
    // create the FCK Editor and replace the specific text area with it
    var oFCKeditor = new FCKeditor( 'id_text' ) ;
    oFCKeditor.BasePath    = '/underlay/fckeditor/';
    oFCKeditor.ReplaceTextarea() ;
}

Note that id_text is the name of the TextField in your model prepended with id. The BasePath setting should reflect the absolute path you used to make the FCKeditor files available.

Known Issues

The Connector currently only implements File Browser Connector at this point. The Quick Uploader API will be implemented in the future.
Posted by 1010
98..Etc/Etc...2008. 8. 26. 13:26
반응형

##이지웍에디터 FCKEditor 설치 및 사용
# 필요성
게시판을 만들든 아니면 단순하게 디비를 이용해서 넣고, 뿌리고를 하다보면 textarea를 써야할 때가 있다.

하지만, textarea를 사용하다 보면 제한적인 기능에 실망을 감출수 없다.

그래서 알아본바 FCKEditor 를 찾아냈다.

기능도 많은 듯하고, 적용해보니 비주얼도 떨어지지는 않았다.



#설치
FCKEditor 공식 홈페이지에 방문한다. 
다운로드 페이지에서 최신 버전을 다운로드 한다. -> 상단에 최신버전의 zip 형식과 tar.gz 형식이 사이좋게 보인다.
다운받은 압축파일을 풀고, ftp로 설치를 원하는 적당한 장소에 업로드한다. 
이지웍에디터 삽입을 원하는 적당한 위치에 스크립트를 삽입한다. 
제대로 작동이 되는지 확인한다. 


# 삽입스크립트
<script type="text/javascript" src="../fckeditor/fckeditor.js"></script>
<script type="text/javascript">
 var sBasePath = '../fckeditor/';
 var oFCKeditor = new FCKeditor( 'name' ) ; // content는 내용의 속성 이름
 oFCKeditor.BasePath     = sBasePath ; // 기본Path를 잡아준다.
 oFCKeditor.Height       = 450 ; // 에디터의 세로 크기 설정
 oFCKeditor.Value        = '' ; // 수정/답변 등의 모드일 경우 value값 설정 가능
 oFCKeditor.Create() ;
</script> 
 주의
fckeditor 은 경로명을 표시... -> 자신의 서버 환경에 맞게 설정 
name 은 textarea name명 -> 자신의 개발 환경에 맞게 설정 
 450 은 보이는 대로 이지웍에디터의 높이값이다. -> 적당히 설정
 

#fckeditor로 이미지 업로드 하기
검색을 하다보니 죄다 ASP, ASP.NET, JAVA 환경에서 업로드 하기위한 설정이나 수정사항만 올라와 있었다.

좌절에 좌절을 딛고 구글링으로 결국 힌트를 하나 얻고, 몇글자 고치니 단순하게 잘 올라간다..

역시 검색은 구글~

##수정부분
파일 업로드 기능(이미지 뿐만 아니라...) /fckeditor/editor/filemanager/connectors/php/config.php 파일을 수정함으로써 사용할 수 있다.

아주 간단하다...

30라인 근처에 보면 다음과 같은 부분이 있다.

$Config['Enabled'] = true ; // 30라인
이 부분이 아마도 false로 되어 있을 것이다.특별히 수정한적이 없다면...

이부분을 true로 고쳐주는 것 만으로도 파일 업로드 기능은 사용가능하다.

보다 세밀한 설정은 아직 안해봤다 -_-;;

Posted by 1010
98..Etc/Etc...2008. 8. 25. 18:21
반응형
JVM terminated. Exit code=1073807364
C:\IBM\SDP70\jdk\jre\bin\javaw.exe
-Xquickstart
-Xms256m
-Xmx1024m
-Xgcpolicy:gencon
-Xscmx96m
-Xshareclasses:singleJVM,keep
-Xnolinenumbers
-XX:MaxPermSize=512M
-jar C:\IBM\SDP70\startup.jar
-os win32
-ws win32
-arch x86
-launcher C:\IBM\SDP70\eclipse.exe
-name Eclipse
-showsplash 600
-exitdata 488_8c
-product com.ibm.rational.rsa.product.ide
-nl en
-vm C:\IBM\SDP70\jdk\jre\bin\javaw.exe
-vmargs
-Xquickstart
-Xms256m
-Xmx1024m
-Xgcpolicy:gencon
-Xscmx96m
-Xshareclasses:singleJVM,keep
-Xnolinenumbers
-XX:MaxPermSize=512M
-jar C:\IBM\SDP70\startup.jar

왜 빨간색이 중복되었는지는 잘??

일단 RSA야.. 그나마 쓰다 전사했지만.. 웹스피어 어플리케이션 서버는 엔터프라이즈 어플리케이션 디플로이하다가 out of memory 났다.. ㅠㅜ

찾아라.. 갖고 놀 수 있는 옵션을..
Posted by 1010
98..Etc/Etc...2008. 8. 25. 18:15
반응형
D:\eclipse\eclipse.exe -vmargs -XX:MaxPermSize=128m -Xms128m -Xmx512m
Posted by 1010
98..Etc/Etc...2008. 8. 25. 16:50
반응형

실제 이미지 업로드는 정상적으로 되는데 말이죠... (파일은 올라가 있음)
계속 사용권한이 없다는 JS는 오류메시지가 나왔거든요.

그런데, 이상하게도 오류메시지 없이 정상적으로 되었다가, 안되었다 하더군요~

고고참!

그런데... 미닝님 덕분에 깔끔하게 해결 되네요~!


해당포스트:
http://choimin.net/tc/entry/17

fckeditor 2.6 다운로드: http://www.fckeditor.net/download

-------------------------------------

 

 

참말로 편한 fckeditor 2.6버전에 버그가 있다...

젠장 한참 찾았다는...

아래 파일들을 각각 수정하면 되삼...


editor/filemanager/connectors/asp/io.asp

old new  
223 223     ' Test if we can access a parent property. 
224 224     Response.Write "        try" 
225 225     Response.Write "        {" 
226       Response.Write "            var test = window.top.opener.document.domain ;"
  226     Response.Write "            var test = window.parent.OnUploadCompleted ;"
227 227     Response.Write "        break ;" 
228 228     Response.Write "    }" 
229 229     Response.Write "    catch( e ) {}" 



editor/filemanager/connectors/cfm/cf5_upload.cfm

old new  
56 56                 // Test if we can access a parent property. 
57 57 "               try"& 
58 58 "               {"& 
59   "                       var test = window.top.opener.document.domain ;"&
  59 "                       var test = window.parent.OnUploadCompleted ;"&
60 60 "                       break ;"& 
61 61 "               }"& 
62 62 "               catch( e ) {}"& 

editor/filemanager/connectors/cfm/cf_io.cfm

old new  
276 276                 // Test if we can access a parent property. 
277 277                 try 
278 278                 { 
279                           var test = window.top.opener.document.domain ;
  279                         var test = window.parent.OnUploadCompleted ;
280 280                         break ; 
281 281                 } 
282 282                 catch( e ) {} 


editor/filemanager/connectors/lasso/upload.lasso

old new  
85 85                 // Test if we can access a parent property. 
86 86                 try 
87 87                 { 
88                           var test = window.top.opener.document.domain ;
  88                         var test = window.parent.OnUploadCompleted ;
89 89                         break ; 
90 90                 } 
91 91                 catch( e ) {} 


editor/filemanager/connectors/perl/commands.pl

old new  
183 183                 // Test if we can access a parent property. 
184 184                 try 
185 185                 { 
186                           var test = window.top.opener.document.domain ;
  186                         var test = window.parent.OnUploadCompleted ;
187 187                         break ; 
188 188                 } 
189 189                 catch( e ) {} 


editor/filemanager/connectors/php/io.php

old new  
288 288                 // Test if we can access a parent property. 
289 289                 try 
290 290                 { 
291                           var test = window.top.opener.document.domain ;
  291                         var test = window.parent.OnUploadCompleted ;
292 292                         break ; 
293 293                 } 
294 294                 catch( e ) {} 


editor/filemanager/connectors/py/fckoutput.py

old new  
111 111                                         // Test if we can access a parent property. 
112 112                                         try 
113 113                                         { 
114                                                   var test = window.top.opener.document.domain ;
  114                                                 var test = window.parent.OnUploadCompleted ;
115 115                                                 break ; 
116 116                                         } 
117 117                                         catch( e ) {} 





원글 : http://link.allblog.net/11266998/http://hanvalley.tistory.com/147

Posted by 1010
98..Etc/Etc...2008. 8. 25. 16:31
반응형

웹개발시 종종 필요로 하는 웹기반 HTML에디터..

Sourceforge에 등록되어 있는 오픈소스 웹기반 HTML 에디터의 종류와 기능비교  및 미리보기

순서는 Sourceforge의 Activity 순


- FCKeditor (http://sourceforge.net/projects/fckeditor/)
  * IE의 Editor Object 를 이용하여 제작
  * jsp, php, asp에 대응하는 이미지 업로드 및, 브라우징 기능
  * 미리 정의된 3가지 형태의 툴바 형태제공
  * 간편하게 기존 소스에 추가 가능
  * 테이블 편집 기능 지원
  * 타 사이트 내용 copy&paste시 이미지 경로 변경 필요
  * 다양한 언어 지원(한글포함)

  * 완성도 높음.. 강추!
  * sample - http://pistos.pe.kr/FCKeditor/_test/test.php

- HTMLarea (http://sourceforge.net/projects/itools-htmlarea)
  * 이미지 업로드 지원 안함
  * 풀스크린 편집 지원
  * 영문메뉴만 지원
  * 타 사이트 내용 copy&paste시 이미지 경로 변경 필요 없음  
  * PHP Image Editor 지원 (http://sourceforge.net/projects/imgmngedt/)

  * 한글화 및 이미지업로드만 커스터마이징하면 FCK에 떨어지지 않을듯
  * sample - http://pistos.pe.kr/htmlArea/examples/full-page.html

 

- SPAW web-based WYSIWYG editor control (http://sourceforge.net/projects/spaw/)
  * 예쁜 디자인
  * 이미지 라이브러리 기능
  * 이미지 업로드 지원 안함  
  * 타 사이트 내용 copy&paste시 이미지 경로 변경 필요 없음

  * 디자인만 놓고 보면 최고! 그러나 이미지삽입부분이 맘에 들지 않고, 사소한 버그가 좀 있는듯.
  * sample - http://pistos.pe.kr/spaw/test.php

 

- hypertextarea (http://sourceforge.net/projects/hypertextarea/)
  * 기본적인 기능만 제공
  * 이미지 업로드 지원 안함
  * 심플한 디자인
  * 타 사이트 내용 copy&paste시 이미지 경로 변경 필요 없음

  * 바로 갖다 쓰기엔 스크립트에러의 압박이 심함..
  * sample - http://pistos.pe.kr/hypertextarea/javascript/demo.html

 

- RichText-editor (http://sourceforge.net/projects/richtext/)
  * 브라우저 언어설정이 한글인경우 문제있음(한글지원 커스터마이징 필요)
  * 이미지 업로드 지원 안함
  * 타 사이트 내용 copy&paste시 이미지 경로 변경 필요 없음

  * 한때는 꽤 잘나가는 녀석이었는데... 이제는 경쟁력이 떨어짐.. 가져다 쓰려면 고쳐야 할것도 많음.
  * sample - http://pistos.pe.kr/richtext/editor/rte/richedit.html

 

- aynHTML (http://sourceforge.net/projects/aynhtml/)
  * 이미지업로드 지원
  * 이미지 저장소 지원
  * 깔끔한 디자인
  * 타 사이트 내용 copy&paste시 이미지 경로 변경 필요 없음

  * 나름대로 깔끔함.. 소스보기시 컬러링도 해주고.. 간단히 쓰기엔 좋을듯
  * sample - http://pistos.pe.kr/aynHTML/

 

- XsDhtmlEditor (http://sourceforge.net/projects/xsdheditor/)
  * 심플한 디자인
  * 이미지 업로드 지원
  * 타 사이트 내용 copy&paste시 이미지 경로 변경 필요 없음

  * 바로 쓰기에는 버그가 좀 있음..
  * sample - http://pistos.pe.kr/XsDhtmlEditor/

 

- bpEditor ( http://sourceforge.net/projects/bpeditor/)
  * 만들다 만듯..ㅡㅡ
  * sample - http://pistos.pe.kr/bpShitEditor/bpShitEditor.php

Posted by 1010
98..Etc/Etc...2008. 8. 25. 15:59
반응형
web.config 에 아래 부분 추가해 주시고

<appSettings>    
  <add key="FCKeditor:UserFilesPath" value="/UserFiles/temp/"></add>
  <add key="FCKeditor:BasePath" value="~/FCKeditor/"></add>
</appSettings>

 

fckconfig.js 파일 열어서

var _FileBrowserLanguage    = asp ;  // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage    = asp ;  // asp | aspx | cfm | lasso | php



var _FileBrowserLanguage    = 'aspx' ;  // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage    = 'aspx' ;  // asp | aspx | cfm | lasso | php

로 바꿔주십시요.
 

자세한 내용은 wiki.fckeditor.net 을 참조하십시요.



자료출처
http://blog.naver.com/lsv400?Redirect=Log&logNo=100043893231
Posted by 1010
98..Etc/Etc...2008. 8. 20. 15:14
98..Etc/Etc...2008. 8. 19. 16:48
반응형

파일 다운로드에 관하여 여러모로 고민하다가 기본의 Struts내에서 지원하는 DownloadAction 클래스를 상속하여 Streaminfo를 받아오는 방식을 포기하고 직접 새로운 DownloadFile 메소드를 짜보았습니다. 직접 적용하여 쓰시려면 필히 DownFileException 예외클래스를 만들어주시고 MessageResource.properties속에 해당 키를 설정해주어야 합니다. 기존의 파일이 존재하지않으면(즉 파일 사이즈가 0 바이트) DownFileException을 만들어서 에러페이지로 포워딩 하는 방법을 사용하였습니다. 다양하게 스크립트를 띠우거나 다른 방식을 취하셔도 좋습니다.^^

참고로 파일 명이 깨지는 문제를 해결하기 위하여 DownloadFileAction에서 아래와 같이 미리 파일명을 처리해주었습니다.

logicalFileName = URLEncoder.encode(logicalFileName,"UTF-8");

 

 

public static void DownloadFile(HttpServletRequest request,
   HttpServletResponse response, String filePath, int maxFileSize,
   String physicalFileName, String logicalFileName) throws Exception {

  File file = new File(filePath + physicalFileName); // Realpath of
                 // file...
 
  // Primary check for whether the selected file is existed...
  if (file.length() == 0) {
   DownFileException dfe = new DownFileException();
   dfe.setMessageKey("error.board.nonexist.files.error");
   throw dfe;
  }
 
  response.setContentType("application/octet-stream");
  String Agent = request.getHeader("USER-AGENT");
  if (Agent.indexOf("MSIE") >= 0) {
   int i = Agent.indexOf('M', 2);
   String IEV = Agent.substring(i + 5, i + 8);
   if (IEV.equalsIgnoreCase("5.5")) {
    response.setHeader("Content-Disposition", "filename="
      + logicalFileName);
   } else {
    response.setHeader("Content-Disposition",
      "attachment;filename=" + logicalFileName);
   }
  } else {
   response.setHeader("Content-Disposition", "attachment;filename="
     + logicalFileName);
  }

  byte b[] = new byte[maxFileSize * 1024 * 1024];
  if (file.exists()) {
   try {
    BufferedInputStream fin = new BufferedInputStream(
      new FileInputStream(file));
    BufferedOutputStream outs = new BufferedOutputStream(response
      .getOutputStream());
    int read = 0;
    while ((read = fin.read(b)) != -1) {
     outs.write(b, 0, read);
    }
    outs.flush();
    outs.close();
    fin.close();
   } catch (Exception e) {
   }
  }
 }

Posted by 1010
98..Etc/Etc...2008. 8. 19. 16:43
반응형

Validator 속성

depends 속성

체크

에러 메세지

required 필수 체크 errors.required {0}입고 안되어 입력해 주세요
minlength 최소장 체크 errors.minlength {0}은{1}캐릭터 이상으로 입력해 주세요
maxlength 최대장 체크 errors.maxlength {0}은{1}캐릭터 이내에서 입력해 주세요
mask 정규 표현 체크 errors.invalid {0}은 올바른 형식에서 입력해 주세요
byte Byte형 체크 errors.byte {0}은 byte형으로 입력해 주세요
short Short형 체크 errors.short {0}은 short형으로 입력해 주세요
integer Integer형 체크 errors.integer {0}은 int형으로 입력해 주세요
long Long형 체크 errors.long {0}은 Long형으로 입력해 주세요
float Float형 체크 errors.float {0}은 Float형으로 입력해 주세요
double Double형 체크 errors.double {0}은 Double형으로 입력해 주세요
date 일자형 체크 errors.date {0}은 일자형으로 입력해 주세요
range 범위 체크 errors.range {0}은{1}이상{2}이하의 범위에서 입력해 주세요
intRange 범위 체크(정수) errors.range {0}은{1}이상{2}이하의 범위에서 입력해 주세요
floatRange 범위 체크(소수) errors.range {0}은{1}이상{2}이하의 범위에서 입력해 주세요
email E-Mail 포맷 체크 errors.email {0}은 올바른 형식에서 입력해 주세요


depends속성에 따른 파라미터

depends 속성

필요한 파라미터

minlength minLength
maxlength maxLength
mask mask
range max, min
intRange max, min
floatRange max, min
date datePattern(datePatternStrict)


예제

<?xml version="1.0" encoding="EUC-KR"?>
<!DOCTYPE form-validation PUBLIC
    "-//Apache Software Foundation//DTD Commons Validator Rules Configuration 1.1.3//EN"
    "http://jakarta.apache.org/commons/dtds/validator_1_1_3.dtd">

<form-validation>
 <formset>
  <form name="signon">
   <field property="user_id" depends="required, mask">
    <arg0 key="signon.user_id"/>    
    <var>
     <var-name>mask</var-name>
     <var-value>^[0-9a-zA-Z]*$</var-value>
    </var>
   </field>
   <field property="passwd" depends="required, mask">
    <arg0 key="signon.passwd"/>
    <var>
     <var-name>mask</var-name>
     <var-value>^[0-9a-zA-Z]*$</var-value>
    </var>
   </field>
  </form>
 
  <form name="commoncdMast">
   <field property="common_gb" depends="required, intRange">
    <arg0 key="code.common_gb"/>
    <arg1 key="1"/>
    <arg2 key="5"/>      
   </field>
   <field property="common_gb_nm" depends="required">
    <arg0 key="code.common_gb_nm"/>
   </field>
  </form>
 
  <form name="commoncdDtl">
   <field property="common_gb" depends="required, minlength, maxlength">
    <arg0 key="code.common_gb"/>
    <arg1 name="minlength" key="${var:minlength}" resource="false" />
    <arg1 name="maxlength" key="${var:maxlength}" resource="false" />
    <var>
     <var-name>minlength</var-name>
     <var-value>5</var-value>
    </var>
    <var>
     <var-name>maxlength</var-name>
     <var-value>5</var-value>
    </var>
   </field>
   <field property="common_cd" depends="required, minlength, maxlength">
    <arg0 key="code.common_cd"/>
    <arg1 name="minlength" key="${var:minlength}" resource="false" />
    <arg1 name="maxlength" key="${var:maxlength}" resource="false" />
    <var>
     <var-name>minlength</var-name>
     <var-value>5</var-value>
    </var>
    <var>
     <var-name>maxlength</var-name>
     <var-value>5</var-value>
    </var>
   </field>
   <field property="common_cd_nm" depends="required">
    <arg0 key="code.common_cd_nm"/>
   </field>
   <field property="common_order" depends="required, mask">
    <arg0 key="code.common_order"/>
    <var>
     <var-name>mask</var-name>
     <var-value>^[0-9]*$</var-value>
    </var>
   </field>
  </form>  
 </formset>
</form-validation>

Posted by 1010
98..Etc/Etc...2008. 8. 18. 10:55
반응형
설치형 블로그 Text Cube 설치 하기

작성자 : 김문규 (MyMK)
최초 작성일  : 2008. 6.10

언제부턴가 블로그는 이미 우리 주위에 깊숙히 자리잡은 하나의 트렌드처럼 보인다. 하지만 너무나 익숙해져버린 탓에 네XX, 티XXX, 다X에 하나씩 둥지를 틀고 모두가 비슷한 모양의 블로그에 서로 경쟁하듯이 퍼가기를 일삼고 있다. 그 결과 정보가 생산되는 참여의 공간이 아니라 단지 바이러스처럼 퍼지기만하는 해적판 CD 시장 같은 생각이 든다.

꼭있다!! 이런 군상에서 고고한 학처럼 살고자 하는 사람들... 그래서 적지 않게 설치형 개인 블로그를 운영하는 사람들이 늘고 있다. 프로그래밍 실력만 있다면 자유로운 스킨 변환, 업로드 공간의 자유로움, 특수 기능의 매쉬업 등이 기존의 대형 블로그들과는 차이점이 있기 때문이다.

그래서, 회사에서 확인해 볼 사항도 있고하여 설치형 블로그의 대표 선수인 TextCube를 설치해 보았다. 잘 아시겠지만 이전에는 Tatter Tools(태터툴즈)라는 이름으로 유명했던 웹 블로그 플랫폼이다. 또한 다음과 제휴하여 제공되고 있는 Tistory의 기반 플랫폼이기도 하다. (대단한 녀석이지만 Tistory에 적용되면서 설치형 블로그로서의 장점이 많이 사라지기도 했다.)

아마도 많은 분들이 비슷한 작업을 시도할 것으로 생각되기에 설치 시에 삽질을 줄이기 위해 성공한 방법을 정리해서 공유하고자 한다. 남는 역량을 대한민국 IT 발전을 위해 써주길 바란다. ^^

그럼 시작해 보겠다.

일단 TextCube의 수많은 장점은 아래의 링크를 통해 확인하길 바란다.
http://textcube.org/center/entry/textcube-1-7-sneak-peak

1. 웹 호스팅 서버에 설치하기
http://textcube.org/manual/entry/installing-textcube?category=5
참조 바람~

2. 본인의 PC에 설치하기
(1) APM_Setup을 설치한다.
http://www.apmsetup.com/
윈도우 경우에는 이것을 설치하면 아무런 문제가 되지 않는다.
리눅스의 경우에는 mod_rewrite를 활성화 시켜서 apache를 재컴파일 해야 한다. (필요시 해당 부분 검색!)

(2) 소스 설치
textcube-1.x.x-expansion의 압축을 풀어 tc 폴더 아래의 내용을 APMServer/htdocs 아래에 풉니다.
디렉토리를 구분해서 다중 설치할 수 있어 보입니다. 그런데 설정에 미숙해서 인지 비정상적으로 설치됩니다. 아래와 같이 설치 후 플랫폼 설정 시 다중 사용자가 지원되니 큰 문제가 되지 않습니다.
사용자 삽입 이미지

(3) TextCube 설정하기
 -
http://(ip_address)/setup.php 접속
 
 - (1단계) 한국어 선택
사용자 삽입 이미지

 - (2단계) '새로운 텍스트큐브 설정합니다' 선택
사용자 삽입 이미지
 
 - (3단계) phpMyAdmin을 이용해서 db생성 후, 그림과 같이 설정
사용자 삽입 이미지

사용자 삽입 이미지

 - (4단계) 아래와 같이 모두 OK가 떠야 함. 빨간색 글씨가 보이면 해결해야 함. (어려움 ^^)
사용자 삽입 이미지
 
 - (5단계) '하위 경로로 블로그 식별' 선택 (단일 사용자의 경우에도 여러개의 하위 주소로 운영할 수 있으면)
사용자 삽입 이미지
 
 - (6단계) 적절한 관리자 정보 입력
사용자 삽입 이미지
 
 - (7단계) 완료
Posted by 1010
98..Etc/Tomcat2008. 8. 17. 02:48
반응형

1. jdk 1.5이상이면 아래 설정을 JAVA_OPTS안에 추가한다면 YourKit을 가지고 힙덤프를 분석할 수 있다.
 -XX:+HeapDumpOnOutOfMemoryError -XX:HeapDumpPath=/logs/heapdump


 

2. Jasper 2 JSP Engine 지원을 위해 $CATALINA_BASE/conf/web.xml 설정 변경하라.
 - development : false, genStringAsCharArray : true, modificationTestInterval : true, trimSpaces : true
 - 자세한 건 여기를 참조하라.


3. 가용성 확보를 위해 Tomcat의 clustering/session replication을 사용하라.
 - 사용방법은 여기를 참조하라.


4. error pages를 작성하여 적용하라.(web.xml)
 - <error-page>
      <error-code>404</error-code>
      <location>/error/404.html</location>
   </error-page>


5. 어플리케이션에서 System.out과 System.err를 제거하고 Log4j를 사용하라.


6. application마다 같은 라이브러리는 WEB-INF/lib에서 CATALINA_HOME/shared/lib로 옮겨서 공유하라.
 - 메모리를 절약할 수 있다.


7. memory parameters를 잘 활용하라.


8. 불필요한 어플리케이션을 제거하라.


9. Manager서버의 보안을 강화하라.
 - CATALINA_HOME/conf/tomcat-users.xml
  <role rolename="manager">
   <user username="darren" password="ReallyComplexPassword" roles="manager"></user>
  </role>
 - CATALINA_HOME/conf/server.xml에 IP 블럭킹 기능도 유용하다.
  <Valve className="org.apache.catalina.valves.RemoteAddrValve" allow="192.168.1.*"></Valve>


10. server.xml을 최적화 하라.
 - 서버 환경에 맞는 CATALINA_HOME/conf/server-original.xml, CATALINA_HOME/conf/server-minimal.xml 선택하여 server.xml로 변경하라.


11. 톰켓 업그레이드는 설치디렉토리를 분리하여 적용하라.


12. Tomcat 서버는 root로 띄우지 마라.
 - 자세한 내용은 여기를 참조하라.


13. Precompile JSPs (at build time)
 - 자세한 내용은 여기를 참조하라.


14. 디렉토리 보이는 걸 막아라.
  - CATALINA_HOME/conf/web.xml
  <servlet>
   <servlet-name>default</servlet-name>
   <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
   <init-param>
   <param-name>debug</param-name>
   <param-value>0</param-value>
   </init-param>
   <init-param>
   <param-name>listings</param-name>
   <param-value>false</param-value>  <!-- make sure this is false -->
   </init-param>
   <load-on-startup>1</load-on-startup>
  </servlet>


15. 듀얼 코어 CPU를 사용할 경우 쓰레드풀을 250개 이상 설정하라.


16. Tomcat MBeans이나 다양한 모니터링 도구를 활용하여 서버를 모니터링하라.
 - 자세한 내용은 여기를 참조하라.


17. jdk1.5, 1.6이 성능이 좋다.


18. -server JVM option을 사용하라.


19. GZIP compression을 사용하라.
 - <Connector>compression="on"
   compressableMimeType="text/html,text/xml,text/plain,application/xml"
   </Connector>
 - 자세한 건 여기를 참조하라.


20. Security Manager를 잘 사용하라.
 - 자세한건 여기를 참조하라.



출처 : http://blog.paran.com/pmang/21456729
Posted by 1010
98..Etc/Anyframe2008. 8. 17. 02:32
반응형
사용자 삽입 이미지
Posted by 1010
98..Etc/Anyframe2008. 8. 17. 02:27
반응형
사용자 삽입 이미지
Posted by 1010
98..Etc/Anyframe2008. 8. 17. 01:23
반응형
  • Apache Ant 설치와 사용 (1.1 버전 기반)
  • Apache Ant는 Java기반의 빌드 도구이다.
  • Ant의 주요 기능

자바 소스파일 컴파일
jar. war. ear. zip파일 생성
javadoc을 실행하여 도움말 생성
파일이나 폴더의 이동 및 복사, 삭제
각각의 작업에 대한 의존성 설정
유닉스에서 처럼 파일이나 폴더에 퍼미션 설정
파일의 변경 날짜를 설정하는 touch 기능
외부 프로그램의 실행

  • Ant의 설치

다운로드 사이트 : http://ant.apache.org
zip파일을 적당한 디렉토리에 압축을 해제한다.
bin 디렉토리를 path에 추가합니다.
환경 변수 ANT_HOME을 Ant 인스톨된 장소의 디렉토리로 설정합니다.
추가로, 환경 변수 JAVA_HOME 을 설정합니다. 이것에는 JDK가 인스톨 된 장소의 디렉토리로 설정합니다.

  • 시스템 요구사항

Ant 는, Linux, Solaris 나 HP-UX 라고 하는 상용 Unix, Windows 9x 및 NT, Novell Netware 6 , 그리고 MacOS X 등을 포함한 수많은 플랫폼에서 잘 사용되고 있습니다. Ant를 빌드해 사용하려면, 클래스 패스에 JAXP 호환의 XML 파서가 인스톨되어 이용 가능해야 합니다.

  • PATH 설정하기

Windows OS :

      설치된 디렉토리가 c:\ant\. 로 가정했을 경우에

     set ANT_HOME=c:\ant

     set JAVA_HOME=c:\jdk1.3.1

     set PATH=%PATH%;%ANT_HOME%\bin

Unix(bash) OS :

    export ANT_HOME=/usr/local/ant

    export JAVA_HOME=/usr/local/jdk1.3.1

    export PATH=${PATH}:${ANT_HOME}/bin

---------------------------------------------------------------------------------

FreeTTS Client/Server Demo 분석 중 실행에 필요한 Ant를 설치하느라고 네이버 블로거님들이 퍼나르던 좋은 정보를 필요한 부분만 발췌하였습니다.

Posted by 1010
98..Etc/Etc...2008. 8. 12. 22:24
반응형
We Solve Password Problems

Forgot your password? Need to regain access to password-protected files or systems? Passwords list destroyed?
Passware software recovers or resets passwords for Windows, Word , Excel, QuickBooks, Access, PDF and more than 100 document types.

Windows Key
Quickly and easily reset Windows login passwords in a matter of minutes – no need to reinstall the system.
Read MoreDownloadBuy Now
 
     
Office Key
Recovers all types of passwords for MS Office documents: Excel, Word, Outlook, Access, PowerPoint and Visual Basic for Applications (VBA).
Read MoreDownloadBuy Now
 
     
Passware Kit Enterprise
A complete password recovery solution that supports more than 100 document types.
Read MoreDownloadBuy Now
Posted by 1010
98..Etc/Etc...2008. 8. 12. 15:09
반응형

준비물:

utra edit - 에디터 프로그램입니다. hex에디트까지 가능하게 해줍니다.
qpst - 꼭 qpst가 아니여도 좋습니다. 핸드폰에 파일을 다운로드, 업로드만 가능하게 해주면 됩니다.
공학계산기 - 윈도우의 계산기나 손에 들고 있는 계산기면 OK. 윈도우의 계산기일경우 보기->공학용 을 찾아서 클릭해주시면 됩니다.


1. 이론

hex란 무엇인가?

사용자 삽입 이미지

hex란 hexagonal 의 단축형으로써 16진법이라는 뜻입니다. 우리들이 흔히 쓰는 10진수는 decimal, 2진수는 binary, 8진수는 octal 이라고 표시합니다.  간단하게 축약해서 16진수-hex, 10진수-dec, 2진수는 bin, 8진수는 oct 입니다.10진수는 0부터 9까지 가 1의 자리를 나타내며, 9에서 1이 더해지는순간 십의 자리에는 1이 일의 자리에는 0이 오는 10이 됩니다. 2진수는 0과 1 뿐입니다. 1에서 1이 더해지는순간 십의 자리에 1이 오고 일의 자리에 0이 와서 10이 됩니다. 즉 0(0), 1(1), 10(2) 입니다. 괄호안은 10진수로 읽었을때입니다. 8진수도 0부터 8까지로 이루어져있습니다. 마지막으로 16진수는 0부터 F까지 이루어져 있습니다. 이는 0,1,2,3,4,5,6,7,8,9,A(10),B(11),C(12),D(13),E(14),F(15)로 이루어져 있는 것입니다. 즉 9라는 숫자에서 1이 더해져도 십의 자리에 1이 오지않고 A가 됩니다. 이후로 B, C, D, E, F로 넘어가서 F에서 1이 더해지는순간 십의 자리에 1이 오고 일의 자리에 0이 와서 10이라는 숫자가 됩니다. 컴퓨터에 데이터가 저장될때에는 2진수와 16진수로 저장이 됩니다. 우리가 2진수는 123라는 숫자를 입력하게 되면 1111011이라는 숫자로 저장이됩니다. 16진수의 경우에는 7B라는 숫자로 저장이 됩니다. 하지만 2진수는 컴퓨터가 빠르게 이해는 할지몰라도 사람이 보고 읽고 이해하기엔(이를 가독성이라고 합니다) 너무 어렵죠. 그때문에 16진수코드를 쓰게 되는겁니다.


게임에서 hex조작은 어떻게 하나?

파일을 hex코드로 열어서 해당관련 숫자를 찾아서 숫자를 바꾸어주시면됩니다. 엉뚱한 코드를 손을 대셨다가 게임이 엉망이 되는 경우도 많으니 조심하셔야합니다. 이제 실습에 들어가보겠습니다.

사용자 삽입 이미지

일단 QPST로 접속을 합니다. 그리고 원하는 게임폴더로 찾아갑니다. 저의 경우에는 제일 만만한 판타지포에버2를 예로 들겠습니다. (참고로 저는 SKT통신사며 쓰이는 핸드폰은 MS500입니다.)

사용자 삽입 이미지


게임이 저장된 forever0.db 파일을 다운받습니다.

사용자 삽입 이미지


만약 ultra edit가 hex로 열지 못한다면 편집->hex기능을 찾아서 클릭해주시면 됩니다.

그리고 게임에 접속해서 케릭터의 골드, 레벨, 경험치, 스킬포인트, 찍은 스킬 등등을 공책이나 컴퓨터의 메모장에다가 잘 적어둡니다.

저의 경우 골드가 15032216골드 입니다. 약 1500만골드군요. 이미 이전에 손을 써두었기에 저런 골드가 가능해졌습니다.

사용자 삽입 이미지


자 15032216이라는 숫자를 계산기에 입력을 합니다. 그리고 이상태로 Hex를 클릭해보세요.

사용자 삽입 이미지


E55F98이라는 숫자로 바뀝니다. 앞으로 숫자는 2개씩 끊어서 보기로 합시다.
E5 5F 98 입니다. 이숫자를 잘 기억해두었다가, 아까 ultra edit로 연 forever0.db파일에서 맞는 숫자를 찾아봅니다.

사용자 삽입 이미지


아! 찾았군요! E5 5F 98 잘보입니다. 이 숫자를 FF FF FF 로 변경하시면 금액이 변경됩니다. FFFFFF라는 숫자는 10진수로 16777215입니다. 즉 약 1600만골드입니다.

이번엔 케릭터의 레벨을 찾아가봅시다. 저의 경우 케릭터의 레벨은 81입니다. 81이라는 dec숫자를 계산기로 통해서 hex로 바꾸면 51이라는 숫자가 됩니다. 이또한 찾아봅시다.

사용자 삽입 이미지


아! 또 찾았군요! 이 숫자를 FF로 바꾸시면 255레벨로 바뀝니다. 하지만 일반적인 게임들이 보통 99레벨이 끝인것을 감안해봐서 99레벨로 바꾸기로 합시다. 99라는 dec숫자를 hex로 바꾸어보면 63입니다. 아까 찾은 51이라는 숫자 대신 63을 바꾸어 적습니다.

그리고 파일을 저장해서 다시 qpst로 핸드폰으로 저장합니다.

그리고 게임을 실행해보시면??

와우!! 놀랍네요. 전부적용이 되어있습니다. 이제 레벨노가다와 골드노가다는 안해도 되겠군요.

기타 제가 찾아서 쓰고 있는 주소들은

골드:0번     b,c,d라인 

레벨: 1번 - 200번 4
      2번 - 240번 7
      3번 - 280번 a

스킬 : 1번 - 230  0 부터 240 0 까지
       2번 - 270  3 부터 280 3 까지
       3번 - 2b0  6 부터 2c0 6

exp : 200 a b
      240 d e
      290 0 1

스킬포인트 : 240 5
            280 8
             2c0 b

입니다.

사용자 삽입 이미지


위에 제가 적은것을 보는방법은 간단합니다. hex코드에서 왼쪽 끝을 보시면 해당 00000000h 라는 주소들과 위에는 0부터 f까지 주소가 있습니다. 이것을 찾아서 보시면 됩니다. 예를 들어 골드의 경우 00000000h의 주소의 b,c,d라인에 있다는 소리입니다.

이것으로 간단한 hex조작을 해보았습니다. 여러분들도 쉽게 하실수 있기를 기대하겠습니다. 만약 내용이 어렵다면 댓글을 주시면 빠르게 확인해서 답을 드리겠습니다

Posted by 1010
98..Etc/Etc...2008. 8. 12. 13:08
반응형
1. GWT란 무엇인가?

- Java를 이용해 Rich Ajax 애플리케이션을 제작할 수 있는 오픈 소스 프레임워크.
- JavaScript/HTML 코드를 자동으로 생성해 냄.
- 모든 종류의 브라우저를 지원함.
- Pure JavaScript/DHTML at the client side.
- Pure Java at the server side.

2. GWT를 써야 하는 이유?

- No need to learn/use JavaScript language -> Leverage existing Java skills.
- No need to handle browser incompatibilities -> GWT handles them for you.
- No need to learn/use DOM APIs -> Use pure Java APIs.
- No need to handle forward/backward buttons -> GWT handles this for you.
- No need to build commonly used widgets -> GWT provides most of them.

3. GWT의 단점

- Java 1.4 버전까지만 지원.
- GWT로 자동 생성된 HTML과 JavaScript 코드는 꽤 무거움.
- Hosted 모드에서는 실행 속도가 느림.
- 다양한 Widget을 제공하지 않음.
- 동기식(Synchronization) RPC(Remote Procedure Call)를 지원하지 않음.
- Modal 대화창 개발에는 적합하지 않음.
- 클라이언트는 client 폴더의 하위 폴더에만 접근할 수 있음.
- 쓸만한 무료 UI 디자이너 툴을 제공하지 않음.
- 한글 처리 문제.

* 출처
- http://www.ibm.com/developerworks/kr/library/os-ad-gwt1/index.html
- http://www.ibm.com/developerworks/kr/library/os-ad-gwt2/index.html
- http://www.ibm.com/developerworks/kr/library/os-ad-gwt3/index.html
- http://www.devbg.org/seminars/seminar-GWT-26-september-2007/AJAX-Applications-with-Google-Web-Toolkit-Nakov-v1.0.pdf
- http://blog.dev.daewoobrenic.co.kr/tc/jcfblog/entry/Google-Web-ToolkiGWT-%EB%8B%A8%EC%A0%90-%EB%B0%8F-%EC%B0%B8%EC%A1%B0-%EB%A7%81%ED%81%AC
- http://factorystories.springnote.com/pages/1089916
- http://naucika.tistory.com/15



출처 : http://chocodonut.tistory.com/248
Posted by 1010
98..Etc/Etc...2008. 8. 12. 13:07
반응형

Google Web Toolkit, Apache Derby, Eclipse를 사용하여 Ajax 애플리케이션 구현하기, Part 1: 환상적인 프론트엔드 (한글)

자바 프레임웍에서 Ajax 애플리케이션 구현을 위한 Google Web Toolkit

developerWorks
문서 옵션
수평출력으로 설정

이 페이지 출력

이 페이지를 이메일로 보내기

이 페이지를 이메일로 보내기


제안 및 의견
피드백

난이도 : 중급

Noel Rappin, Senior Software Engineer, Motorola, Inc.

2007 년 2 월 06 일

Google Web Toolkit (GWT)은 동적 Java™Script의 생성에 혁신을 가져왔습니다. GWT를 사용하면, 개발자들은 익숙한 자바 기술을 사용하여 사용자 인터페이스(UI)와 이벤트 모델을 디자인하고 대다수의 브라우저에 익숙한 코드를 만드는 일을 하게 됩니다. 이 글을 통해, GWT의 기초를 설명하고, GWT에서 Asynchronous JavaScript + XML (Ajax) 애플리케이션을 만드는 방법과, 자바 언어로 코드를 작성하는 방법을 설명합니다. 또한 온라인에서 피자를 판매하는 Slicr라고 하는 Web 2.0 비즈니스 샘플을 가지고, GWT 애플리케이션을 생성 및 실행하는 방법을 설명합니다.

GWT를 사용하여, 전통적인 자바 GUI 인터페이스를 구현하는 것 보다 훨씬 더 쉽게, 더욱 풍부한 Ajax 브라우저 클라이언트 인터페이스를 구현할 수 있다. GWT가 매우 놀랍기는 하지만, 전체 웹 애플리케이션을 이것 하나로 만들 수는 없다. 서버에 데이터 스토어가 있어야 하고, 데이터를 자바 객체로 변환하여, GWT가 서버에서 클라이언트로 전달할 수 있도록 하는 프레임웍이 있어야 한다. 본 기술자료 시리즈에서, 100% 순수 자바 데이터베이스인 Apache Derby를 사용하는 방법을 설명한다.

이 글에서는 GWT에 대한 중점적인 설명과 더불어, GWT를 설정하는 방법과 사용자 액션에 반응하는 간단한 클라이언트 인터페이스를 구현하는 방법을 설명한다. 후속 기술자료에서는 Derby 데이터베이스를 설치하고, GWT 프론트엔드를 Derby 기반 백엔드에 연결하는 방법을 설명한다. 마지막으로, 개발 환경 밖에서 시스템을 전개하는 방법도 배운다.

Ajax 리소스 센터에서는 Ajax 프로그래밍 모델과 관련한 기술자료, 튜토리얼, 포럼, 블로그, wiki, 이벤트, 뉴스 등이 제공된다.

Google Web Toolkit이란 무엇인가?

GWT를 사용하여, 자바 프로그래밍 언어로 Ajax 애플리케이션을 개발할 수 있다. Ajax 애플리케이션의 장점은 전통적인 UI 애플리케이션과 연결되는 풍부한 인터랙티브 환경일 것이다. 그림 1은 샘플 GWT 인터페이스로서 데스크탑 이메일 애플리케이션이다. 이 데모는 GWT 웹 사이트에서 볼 수 있다.


그림 1. GWT 이메일 데모
A GWT e-mail demonstration

GWT의 가장 고유한 기능은 Ajax 애플리케이션을 만들 수 있고, 자바 언어로 코드를 작성할 수 있다는 점이다. 선호하는 자바 통합 개발 환경(IDE)을 사용하여, 클라이언트를 디버깅 할 수도 있다. 자바 객체를 사용하여 클라이언트와 서버간 통신도 가능하고, 모든 것이 자바 애플릿 보다 가볍다.

GWT는 기본적으로 컴파일러이다. GWT는 자바 코드를 HTML 페이지에 삽입되어 실행될 수 있는 JavaScript 코드로 변환하여 클라이언트 측 애플리케이션을 실행하는데 사용된다. JavaScript 코드는 거의 모든 브라우저에서 지원되므로 여러분은 프로그램의 인터페이스와 인터랙션에 집중할 수 있다.

물론, GWT가 컴파일러일 뿐이라면, 거론하지 않았을 것이다. 다행히도, 그 이상의 기능을 한다. GWT는 컴파일러 메커니즘 뿐 만 아니라, 아래와 같은 부가적인 특징이 있다.

  • 표준 UI 위젯은 유연하고, 거의 모든 주요 브라우저에서 실행된다. (Safari와 Opera 포함)
  • 클라이언트 측의 이벤트를 포착하고 응답하는 이벤트 메커니즘.
  • 웹 애플리케이션과 서버 간 비동기식 호출을 관리하는 프레임웍.
  • Ajax 애플리케이션이 예상 Back 버튼 작동에 관여하지 않도록 하는, STATEFUL 브라우저 히스토리를 만드는 메커니즘.
  • JUnit을 사용하여 클라이언트 애플리케이션용 단위 테스트를 작성하는 테스트 프레임웍.

본 시리즈에서는 이러한 기능들을 설명할 것이다. 하지만 먼저, GWT를 다운로드 및 설치해야 한다.

GWT 설치하기

이 글을 쓰고 있는 현재, GWT 최신 버전은 1.2이다. (참고자료) GWT는 Microsoft® Windows® XP, Windows 2000, Linux® 그리고, Mac OS X에서 실행되는 GTK+ 2.2.1 또는 그 이후 버전에서 완벽히 지원된다.

다운로드 한 압축 파일을 원하는 디렉토리에 압축을 푼다. 버전들마다 약간 다르지만, 기본 엘리먼트는 다음과 같다.

  • 세 개의 .jar 파일: gwt-user.jar 에는 프로젝트 classpath에 필요한 사용자 클래스들이 포함되어 있다. gwt-dev-windows.jar 또는 gwt-dev-linux.jar에는 컴파일러 코드가 포함되어 있다. 세 번째 파일, gwt-servlet.jar는 전개(deploy)에 사용된다.
  • 세 개의 명령행 유틸리티: applicationCreator, junitCreator, projectCreator. (Windows에서는, .cmd가 붙는다.)
  • 샘플 코드 디렉토리

GWT를 사용할 때, 일부 파일들은 임시 파일들을 관리하기 위해 GWT 홈 디렉토리에 놓인다.

프로젝트 만들기

다운로드를 마치면, 가장 먼저 프로젝트를 만들어야 한다. 온라인에서 피자를 파는, Slicr라고 하는 새로운 Web 2.0 비즈니스의 온라인 사이트를 구축할 것이다. GWT 프로젝트를 설정하는 방법들은 IDE를 사용할 것인지의 여부에 따라 다르다. 여기에서는 GWT 명령행 유틸리티의 지원도 받는 무료 Eclipse를 사용하도록 하자.

명령행 유틸리티를 사용하여 Eclipse 프로젝트를 만든다.

  1. 하드 드라이브의 적당한 곳에 slicr라고 하는 새로운 디렉토리를 만든다.
  2. 새로운 slicr 디렉토리에 명령어 프롬프트를 연다.
  3. 다음 명령어를 입력한다. (슬래시와 그 외 것들을 각자 운영 체계에 맞게 변환한다.)

<GWT_HOME>/projectCreator -eclipse slicr

이 명령어로는 GWT 프로젝트에 필요한 최소한의 것만 만든다. 새로운 src 하위 디렉토리와 새로운 .project와 .classpath 파일이 생겼다.

지금 바로 프로젝트로 시작할 수 있지만, GWT는 그 이상의 구조를 기대한다. 다음 명령어를 사용하여 설정할 수 있다.


<GWT_HOME>/applicationCreator -eclipse slicr com.ibm.examples.client.Slicr

-eclipse slicr 인자는 Eclipse 프로젝트의 이름이고, projectCreator에서 사용했던 것과 같아야 한다. (그렇지 않으면, Eclipse 내에서 GWT 애플리케이션을 시작하는데 문제가 생긴다.) 마지막 인자는 애플리케이션의 메인 클래스가 될 클래스 풀네임(fullname)이다. 이때, 패키지명의 마지막은 의미상 client로 정하기로 하고, client 이전의 부모 패키지 이름은 여러분이 알아서 작성하도록 한다. (일단, 'com.ibm.examples'로 부모 패키지 이름을 정하였다.)

이 명령어는 몇 가지 파일을 생성한다. .java 파일은 메인 클래스이고, 해당 클래스에 동반된 패키지 명에 부합되게 부모 디렉토리 들이 생성된다. 여러분은 최하위 디렉토리에는 clientpublic이 생성되어 있는 것을 확인 할 수 있다. 앞에서 거론한 public 디렉토리에는 Slicr.html와 Slicr.gwt.xml을 확인 할 수 있다. 또한, GWT는 eclipse가 사용하게 될 Slicr.launch파일과 두 개의 셀 스크립트 파일을 생성 한다.




위로


Eclipse로 옮기기

이제 프로젝트를 Eclipse로 옮긴다.

  1. Eclipse를 열고, File > Import를 클릭한다.
  2. 새로운 창에서, General 트리를 확장하여 Existing Projects into Workspace를 선택한다.
  3. Next를 클릭한 다음 Browse를 클릭하여 slicr 루트 디렉토리를 선택한다.
  4. 프로젝트를 선택하고, Copy projects into workspace 옵션이 설정되지 않도록 한다. (프로젝트를 옮기지 않을 것이기 때문이다.)

이 프로세스를 통해, 코드를 Eclipse로 옮겨서 볼 수 있다. GWT는 세 개의 중요한 파일들을 만들었다. 첫 번째가 com.ibm.examples 패키지에 있는 slicr.gwt.xml 파일이다. Listing 1은 XML 설정 파일이다.


Listing 1. slicr.gwt.xml
                
<module>
    <inherits name='com.google.gwt.user.User'/>
    <entry-point class='com.ibm.examples.client.Slicr'/>
</module>

여기에서 GWT 애플리케이션에 대한 모듈을 정의할 수 있다. 모듈(module)은 GWT 코드의 기본 단위이고, 클라이언트가 사용하는 HTML 페이지가 참조한다.

두 번째 파일은 퍼블릭 디렉토리에서 만들어진 Slicr.html 파일이다. 이것은 웹 애플리케이션의 프론트 페이지로서 클라이언트로 보내지는 .html 파일이다. 실제로 필요하지 않는 많은 코멘트들이 들어있다. Listing 2는 파일의 핵심 부분이다.


Listing 2. Slicr.html
                
<html>
    <head>
        <title>Wrapper HTML for Slicr</title>
        <meta name='gwt:module' 
            content='com.ibm.examples.Slicr'>
    </head>
    <body>
        <script language="javascript" 
            src="gwt.js"></script>
        <iframe id="__gwt_historyFrame" 
            style="width:0;height:0;border:0"></iframe>
        <h1>Slicr</h1>
        <p>
            This is an example of a host page for 
            the Slicr application. 
        </p>
        <table align=center>
            <tr>
                <td id="slot1"></td>
                <td id="slot2"></td>
            </tr>
        </table>
    </body>
</html>

가장 중요한 것은 바로 위의 .html 파일이다. 원하는 어떤 HTML이라도 추가할 수 있다. 가장 중요한 것은 HTML 파일에 원하는 어떤 내용이라도 추가 및 변형 할 수 있다는 것이다. 단지, GWT는 아래 네 가지 엘리먼트에 의해서 실행된다.

  • meta 태그: name 애트리뷰트와 content 애트리뷰트는 모듈의 완전한 형식을 갖춘 논리적 이름이다. (XML 모듈 파일과, 확장자 없는 XML의 파일 이름을 포함하고 있는 패키지이다.) 이 태그는 HTML 페이지를 특정 모듈로 연결시킨다. 페이지를 호출하면 모듈이 시작된다. (특히, 모듈에 있는 모든 엔트리 포인트들이 초기화 된다.)
  • script 태그: 이 태그는, GWT 자바 코드를 JavaScript 코드로 변환할 때 생성된 파일 중 하나인 gwt.js라고 하는 파일을 로딩한다. 이 파일은 모든 클라이언트 코드의 로딩을 제어하기 때문에, 프로그램을 실행하는 것 보다 이를 포함시키는 것이 더 중요하다.
  • iframe 태그: 이 태그를 쓰여진 대로 정확히 사용하면 웹 애플리케이션은 히스토리와 상태를 기억할 수 있다. GWT 애플리케이션에서 Back 버튼을 실행 불가로 만들 필요가 없다.
  • td 태그: 특정 .html 파일에 있는 이 태그에는 JavaScript 식별자들이 포함된다. 특별한 것은 없지만, GWT는 이 식별자를 엘리먼트를 배치할 장소로서 사용한다.

자바 시작 클래스

GWT는 재사용이 가능한(boilerplate) 자바 시작 클래스도 Listing 3과 같이 만든다.


Listing 3. 자바 시작 클래스
                
public class Slicr implements EntryPoint {

  public void onModuleLoad() {
    final Button button = new Button("Click me");
    final Label label = new Label();
    button.addClickListener(new ClickListener() {
      public void onClick(Widget sender) {
        if (label.getText().equals(""))
          label.setText("Hello World!");
        else
          label.setText("");
      }
    });
    RootPanel.get("slot1").add(button);
    RootPanel.get("slot2").add(label);
  }
}

위의 자바 클래스는 client 패키지에 있고, 이로 인하여 GWT는 해당 코드를 JavaScript로 컴파일 할 것이다. 이것은 파일에 해당 특정 제한이 있는 것 같지만, 코드 내부를 보면 기본적인 Java 1.4 코드일 뿐이다.EntryPoint 인터페이스는 onModuleLoad()만을 정의하였으며, GWT는 이 모듈을 참조하는 HTML 페이지가 로딩되면 이 메소드를 자동으로 호출하게 되는 것이다.

위의 코드는 단순하다고 할 수 있다. 처음 두 라인에 버튼과 레이블을 정의한다. 그 다음 두 라인에서는, RootPanel.get() 메소드를 사용하여, 이 위젯들을 HTML 페이지의 특정 엘리먼트로 연결시킨다. 이 메소드에 대한 인자는 HTML 페이지에 정의된 엘리먼트의 JavaScript ID이다.

위의 코드 라인들 사이에 Swing에서와 같이 이벤트를 묶는데 사용하는 것과 비슷한 방식을 사용하여 이벤트 리스너(eventListner)를 정의한다. 위의 경우, 버튼을 클릭하면 ClickListener가 호출된다.




위로


GWT 프로그램 실행하기

GWT가 만든 샘플 프로그램을 실행해 보자. GWT 프로그램을 실행하는 두 가지 방법이 있다. 바로 웹 모드(Web mode)와 호스트 모드(hosted mode)이다. 웹 모드는 완전한 전개 모드로서, GWT 프로그램을 JavaScript 코드로 컴파일 한 후에 실행한다.

호스트 모드는 개발하는 동안 사용된다. 호스트 모드란, 클라이언트와 서버 코드를 한번에 시뮬레이트 하면서, 개발하는 동안 전개를 단순화 시키는 일종의 에뮬레이터이다. (호스트 모드는 Mac OS X에서는 불가능하다.) 디버거와 함께 IDE를 사용한다면, 호스트 모드에서 GWT 프로그램을 실행할 수 있으며, JavaScript로 컴파일 될 코드 부분에서 중단점(breakpoint)을 지정하고 그의 변수(variable)의 변경사항을 알아낼 수 있다. 이러한 부분은 개발 시 매우 유용하며, GWT로 작업하게 되면, 대부분 호스트 모드를 사용하게 된다.

또한, 여러 가지 방법들로 호스트 모드를 실행할 수 있다. 이전에 실행했던 applicationCreator 스크립트는 명령행에서 호출할 수 있는 Slicr-shell 스크립트를 만들어서 호스트 모드를 실행할 수 있도록 하였다. 또한, 이 글 초반에, GWT 프로젝트를 Eclipse로 반입하는 방법을 설명했다. Eclipse 프로젝트에서, Run 메뉴 또는 툴바에서 Debug 또는 Run을 선택할 수 있다. 생성된 창을 통해서는 Java Application을 클릭하여 Slicr 옵션을 볼 수 있다. 이 옵션은 GWT가 만들었고, 나머지 프로젝트와 함께 Eclipse로 반입했던 Slicr.launch 파일에서 사용할 수 있다.


그림 2. 호스트 모드 호출하기
Invoking hosted mode

호스트 모드에서 실행할 때, 두 개의 창이 나타난다. (처음 실행할 경우, 호스트 모드 설정이 초기화되는 동안 1분여의 시간이 걸린다.) 그림 3에서 보이는 첫 번째 창의 이름은 Google Web Toolkit Development Shell / Port 8888.이다. 여기에는 GWT의 에러와 로그 메시지들이 들어있다. 툴바를 사용하여, 새로운 호스트 브라우저를 열 수 있고, 스크린상의 로그를 확장, 축소, 삭제할 수 있다.


그림 3. 호스트 모드 쉘 윈도우
Hosted mode shell window

그림 4에 보이는 두 번째 창은 브라우저 모습이다. 보다시피, slicr.html 페이지에서 생성된 정적 HTML과 Slicr.java EntryPoint 클래스에서 생성된 버튼 위젯이 있다. 버튼을 클릭하면 레이블이 선택된다. 설정 단계에서 오류가 있었다면, 이 창을 볼 수 없고 대신 쉘에 에러 메시지가 나타난다. 모든 이름들이 정확한지를 확인하라. (특히, .launch 파일에서, 정확한 프로젝트 디렉토리가 지정되었는지를 확인한다.)


그림 4. 호스트 모드 브라우저
Hosted mode simulated browser

클라이언트 설정하기

이 글에서는 스크린상에서 위젯을 실행시키는 것에 초점을 맞추겠다. 그림 5에 보이는 스크린은 매우 단순해 보이지만, 꽤나 기능적이다.


그림 5. Slicr
Slicr

페이지가 로딩될 때 이러한 위젯들을 생성시키려면, EntryPoint 클래스의 onModuleLoad() 메소드에 코드를 넣어야 한다. Listing 4는 두개의 데이터를 정의하고, 각 패널을 구현하기 위해 헬퍼를 호출하는 메소드를 정의하고 있다. 이 코드가 실행되려면, slicr ID로 HTML 페이지에 엘리먼트를 삽입해야 한다. 이렇게 하면 리스팅의 RootPanel.get() 명령어가 그 페이지의 엘리먼트를 찾을 수 있다. 가장 쉬운 방법은 이전 HTML 리스팅의 테이블을 >div id="slicr" /<로 대체하는 것이다.


Listing 4. 모듈 로드 이벤트 핸들러
                
private DockPanel panel;
private List clearables;

public void onModuleLoad() {
    clearables = new ArrayList();
    initDockPanel();
    panel.add(buildActionPanel(), DockPanel.SOUTH);
    panel.add(buildPizzaTypePanel(), DockPanel.WEST);
    panel.add(buildToppingPanel(), DockPanel.EAST);
    RootPanel.get("slicr").add(panel);
}

위젯 설정하기

DockPanel에 모든 위젯을 설정하도록 한다. GWT에서의 DockPanel이란, Swing에서 BorderLayout을 사용하는 Panel에 해당한다. Swing에서는 한 개의 panel 클래스와 여러 개의 레이아웃 매니저가 있는 반면, GWT에는 여러 Panel 서브클래스가 있고, 각각 자식 위젯을 전개하는 고유의 알고리즘이 있다. 다른 패널 클래스로는 SimplePanel, HTMLTable, FlowPanel, StackPanel 등이 있다. DockPanel을 만드는 것은 어렵지 않다. 아래 Listing 5에서와 같이 세터(setter)가 이 일을 대신한다.


Listing 5. 메인 패널 초기화 하기
                
private void initDockPanel() {
    panel = new DockPanel();
    panel.setBorderWidth(1);
    panel.setSpacing(5);
}

SOUTH 패널(button) 생성하기

DockPanel의 선착순 원리를 따르기 때문에, 먼저 하단부 패널을 정의한다. 이런 방식으로, SOUTH 위젯은 전체 패널에서 실행한다. 아래 Listing 6과 같이 HorizontalPanel을 액션 패널로서 정의한다. (GWT의 HorizontalPanel이란, Swing에서의 box와 비슷하다고 보면 된다.)


Listing 6. SOUTH (buttons) 패널
                
public HorizontalPanel buildActionPanel() {
    HorizontalPanel actions = new HorizontalPanel();
    actions.setSpacing(10);
    Button clear = new Button("Clear");
    clear.addClickListener(new ClearClickListener());
    Button newPizza = new Button("Another Pizza");
    Button submitOrder = new Button("Submit");
    actions.add(clear);
    actions.add(newPizza);
    actions.add(submitOrder);
    return actions;
}

GWT Button 위젯을 사용하여 세 개의 버튼을 만든 다음, 패널에 추가한다. 또한, 나중에 정의하게 될 Clear 버튼에 ClickListener를 만든다. GWT는 이벤트 리스너들을 Swing과는 다르게 나눈다. ClickListener는 마우스 클릭만 리스닝한다. (종종, 인라인 클래스로서 정의된 리스너를 보곤 하는데, 이 스타일은 읽고 테스트 하기 까다롭기 때문에 네임드 클래스를 만들었다.)

WEST 패널(pizza type) 생성하기

pizza type 의 패널은 Listing 7과 같이 복잡하지 않다. GWT RadioButton 위젯을 사용하면 된다.


Listing 7. WEST (pizza types) 패널
                
public static final String[] PIZZA_TYPES = new String[] {
    "Thin Crust Medium", "Thin Crust Large", 
    "Thin Crust X-Large", "Thick Crust Medium", 
    "Thick Crust Large"
};

private VerticalPanel buildPizzaTypePanel() {
    VerticalPanel pizzaTypes = new VerticalPanel();
    HTML label = new HTML("<h2>Pizza</h2>");
    pizzaTypes.add(label);
    for (int i = 0; i < PIZZA_TYPES.length; i++) {
        RadioButton radio = new RadioButton("pizzaGroup", 
            PIZZA_TYPES[i]);
        clearables.add(radio);
        pizzaTypes.add(radio);
    }
    return pizzaTypes;
}

HTML을 실행하는 레이블인 HTML 위젯을 사용할 것이다. HTML 위젯은 결국 HTML상의 <span> 태그 주위의 래퍼(Wrapper)로서 역할을 한다. RadioButton 컨스트럭터(constructor)는 두 개의 인자들을 취한다. 첫 번째는 라디오 버튼용 스트링 레이블이고, 두 번째는 텍스트 레이블이다. 각 버튼을 패널과 인스턴스 리스트에 추가하면 이 리스너들 중 한 곳에서 사용하게 될 것이다.


EAST 패널 (toppings) 만들기

topping 패널은 Listing 8처럼 좀더 복잡하다. 사용자가 다양한 토핑을 가진 피자를 만들 수 있도록 해야 한다. 토핑 버튼을 클릭하면 두 쪽 모두 체크되지만, 한 쪽만 체크되거나, 개별적으로 삭제될 수 있다. 모든 것의 줄을 맞춰야 하기 때문에 Grid를 사용한다.


Listing 8. 토핑 그리드
                
public static final String[] TOPPINGS = new String[] {
    "Anchovy", "Gardineria", "Garlic", 
    "Green Pepper", "Mushrooms", "Olives", 
    "Onions", "Pepperoni", "Pineapple", 
    "Sausage", "Spinach"
};

private VerticalPanel buildToppingPanel() {
    VerticalPanel toppings = new VerticalPanel();
    toppings.add(new HTML("<h2>Toppings</h2>"));
    Grid topGrid = new Grid(TOPPINGS.length + 1, 3);
    topGrid.setText(0, 0, "Topping");
    topGrid.setText(0, 1, "Left");
    topGrid.setText(0, 2, "Right");
    for (int i = 0; i < TOPPINGS.length; i++) {
        Button button = new Button(TOPPINGS[i]);
        CheckBox leftCheckBox = new CheckBox();
        CheckBox rightCheckBox = new CheckBox();
        clearables.add(leftCheckBox);
        clearables.add(rightCheckBox);
        button.addClickListener(new ToppingButtonListener(
                leftCheckBox, rightCheckBox));
        topGrid.setWidget(i + 1, 0, button);	
        topGrid.setWidget(i + 1, 1, leftCheckBox);
        topGrid.setWidget(i + 1, 2, rightCheckBox);
    }
    toppings.add(topGrid);
    return toppings;
}

VerticalPanelHTML 위젯을 사용한다. GWT Grid에 모든 것을 놓기 때문에, 그리드의 크기를 설정해야 한다. 그리드의 각 셀에는 플레인 텍스트나, 또 다른 GWT 위젯을 포함시킬 수 있다. 각 행(row)에, 버튼과 두 개의 체크 박스를 만들고, 이들을 셀에 맞춰 정렬한다. 버튼용 리스너를 추가하고, 체크 박스를 clearable 리스트에 놓는다.

리스너 정의

위젯을 설정했다면, 두 개의 정의된 리스너를 보자. 두 개 중 더 단순한 것이 Clear 버튼에 대한 것이다. Listing 9와 같이 이 버튼은 clearable 리스트에서 실행되고, 모든 것을 지운다.


Listing 9. Clear 버튼에 정의된 리스너
                
private class ClearClickListener implements ClickListener {
    public void onClick(Widget sender) {
    for (Iterator iter = clearables.iterator(); iter.hasNext();) {
            CheckBox cb = (CheckBox) iter.next();
            cb.setChecked(false);
        }
    }
}

주: GWT에서, RadioButton은 실제로 CheckBox의 서브클래스이다. 따라서 위 코드는 class cast exception을 트리거(trigger)하지 않는다.

토핑 버튼용 리스너는 더 복잡하다. 제휴 체크 박스들 중 어떤 것도 선택되지 않으면, 이 리스너는 두 개의 체크 박스 모두를 선택한다. 다른 상황에서는, 두 가지 모두를 지운다. Listing 10은 그 예이다.


Listing 10. 버튼에 정의된 리스너
                
private class ToppingButtonListener implements ClickListener {

    private CheckBox cb1;
    private CheckBox cb2;

    public ToppingButtonListener(CheckBox cb1, CheckBox cb2) {
        this.cb1 = cb1;
        this.cb2 = cb2;
    }

    public void onClick(Widget sender) {
        boolean unchecked = !cb1.isChecked() && !cb2.isChecked();
        cb1.setChecked(unchecked);
        cb2.setChecked(unchecked);
    }
}

공유 사이트...

digg Digg
del.icio.us del.icio.us
Slashdot Slashdot

예고

이번 글에서는 slicr 클라이언트를 구현해 보았다. 다음 글에서는 Derby 데이터베이스를 사용하여 서버 측에서 데이터 레이어를 구현하고, 데이터베이스에서 온 데이터를 GWT 클라이언트로 보내질 수 있는 자바 객체들로 변환하는 방법을 설명하겠다. 서버와 클라이언트를 연결하는 원격 프로시저 아키텍처도 설명한다.

서버 측이 개별적으로 실행되어야 한다면, 개발 및 실행 환경에 이를 전개하는 방법을 고려해야 한다. 또한, 인터페이스를 보기 좋은 모양으로 만드는 방법도 배울 것이다. 그 전에 GWT 다운로드 사이트에 가서 직접 실행해 보기 바란다.

기사의 원문보기



참고자료

교육

제품 및 기술 얻기

토론


필자소개

Noel Rappin 박사는 Georgia Institute of Technology의 Graphics, Visualization, and Usability Center 소속이며, Motorola의 소프트웨어 엔지니어이다. wxPython in Action and Jython Essentials를 공동 집필했다.

Posted by 1010
98..Etc/Anyframe2008. 8. 8. 16:06
반응형
Posted by 1010
98..Etc/Anyframe2008. 8. 8. 15:56
반응형

anyframe(http://www.anyframejava.org)의 등장..

옆에서 기자분이 열심히 어디론가 전화를 하고 있다.

그런데 spring이 나오고 오픈 소스가 나온다..

그러더니 기사가 나오기 시작했다.

http://www.zdnet.co.kr/news/enterprise/si/0,39031197,39169880,00.htm
http://www.zdnet.co.kr/news/enterprise/si/0,39031197,39169940,00.htm
http://www.zdnet.co.kr/news/enterprise/si/0,39031197,39168226,00.htm

왠지 반가운 느낌이 더 많이 든다.

앞으로 SI들이 통일된 프레임웍을 통해서 개발될 확률이 많아 졌고,

그리고 오픈 소스라는 점에서 이 프레임웍이 많은 발전을 이룰것이며,,

또한 삼성 SDS 라는 점도 이를 더 뒷받침하지 않을까 한다.

이 프레임웍은 스프링을 기반으로 하기에 왠지 더 정감이 간당..ㅋㅋ (요즘 열공중..)

물론 앞으로 좀 더 지켜봐야겠지만...

이런 시도들이 좀 더 나왔으면 한다.


출처 : http://rrwr.tistory.com/76?srchid=BR1http%3A%2F%2Frrwr.tistory.com%2F76

Posted by 1010
98..Etc/Etc...2008. 8. 8. 09:59
반응형
 cclskin.net
start.com
del.icio.us
craigslist: san francisco bay area classifieds for jobs, apartments, personals, for sale, services, community, and events
Rollyo: Roll Your Own Search Engine
TechCrunch
Etsy - Your place to buy and sell all things handmade
Protopage v2 released - free AJAX start pages now with RSS news feeds, sticky notes and bookmarks
meebo.com
Google
Windows Live Local
43 Things
Where do you want to go? | 43 Places
Welcome to Flickr - Photo Sharing
CEITON technologies
야후! 허브 - 태그로 세상을 담는다!
Kiko - A New Kind of Online Calendar
Netvibes
TagWorld
Google Base
Windows Live
Google Local
Google Maps API
BlinkList | Your personal start page and social bookmarking engine
Google Transit
Ning | Home: Front Page
smugmug - The ultimate in photo sharing. Online photo albums, photo sharing, photo hosting and photo storage.
YouTube - Broadcast Yourself.

?

Social Bookmarking/Search/Invitation:
Simpy
Goovite
Furl
Spurl
Rollyo
Squidoo
StumbleUpon
RawSugar
Kopikol
SurfTail

Content Filtering
Techtiki
ScoopGo
Filangy

To Do Lists
GooTodo
Listal

Online Calendars
HipCal
AirSet
zEvents
EventSniper

Web Site/Blog Analytics:
Measure Map
Google Analytics

Peer Production Content (News/Music/Listings)
Shoutwire
Millions of Games
Rojo
Last.fm
Pandora
WikiCompany
Glypho
Yazai
BlockRocker
Wists
SpinSpy
NowPublic
Odeo
WebJay
180 Degree News
Quimble
Riffs
ButterFly
Bandnews

Mash-Ups
Ning
FlickrMap
LivePlasma
CoverPop
Qube
Kayak
toEat
AlexaDex

Aggregators
Google Reader
SuprGlu
PBwiki
Attensa
fluctu8
NewsMob
Blummy
Fluxiom
MeFeedia

Start Pages
PageFlakes
Google Ig

Team Planning, Organization, Coordination, & Project Management
Planzo
Backpack
Zimbra
ProjectPlace
Doodle
ZohoPlanner

E-Mail and Communication
Meebo
GMail
myemail
Tempinbox
Citadel

Online Storage
Avvenu
SendSpace
eSnips
StreamLoad

Image Storage, Search, & Sharing
Fotolia
iStockPhoto
Riya
PhotoBucket

Mapping
Google Maps
Yahoo! Maps
MSN Maps
Wayfaring

Word Processing & Note Taking
JotSpot Live
Webnote

Web 2.0 Parts
TinyMCE
RSS2PDF
ZohoChallenge

Grassroots Web 2.0
Knowmore.org

Online Business Software
2ndSite
NetWorthIQ
ThinkFree
CampaignMonitor

Web 2.0 Social Communities
MySpace
Orkut
LinkedIn

Web 2.0 Command Line
YubNub
Ambedo

Web 2.0 Humor
Web 2.0 Validator

?

?

?

부록2. 시맨틱웹(웹2.0) 관련 사이트

시맨틱웹 또는 웹2.0을 좀더 잘 이해하려면 관련 사이트를 직접 둘러보는 것이 좋다. 이 책에서 미처 소개하지 못한 곳을 포함해 관련 사이트를 정리해봤다. 시간이 나는대로 차례대로 방문해보거나 검색엔진을 통해 아래 소개된 사이트에 대한 정보를 찾아보기 바란다.

(2006.01.25 최종 수정. 사이트 주소는 수시로 바뀝니다.)


43things(www.43things.com) : 꼬리표 기술을 적극 활용하는 소셜 네트워크 기반의 블로그 커뮤니티

A9(www.a9.com) : 아마존의 검색엔진으로 Ajax를 도입한 것이 특징이다. 일단 일반 검색이 아닌 전자상거래 검색 분야로 좁혀 전문적인 검색시장부터 노리고 있다.

Browsr : social directory manager 사이트. 쉽게 설명하자면 웹사이트를 주제별로 구분했던 야후 디렉토리 서비스를 사용자들이 구분하는 사이트다. 사회적책갈피(소셜북마크)의 한 종류로 볼 수 있는데, 각종 사이트 링크를 사용자들이 평가하고 분류한다는 점이 특징이다. 물론 꼬리표 적용은 필수.

BudgetTracker(http://budgettracker.com/login.php) : 무료로 사용할 수 있는 웹 회계, 일정관리 서비스.

Bunchball(www.bunchball.com) : 플래시 기반의 온라인 게임 서비스. 개발자들이 직접 게임 개발에 참여할 수 있는 것이 특징이다.

DrawSWF(http://drawswf.sourceforge.net/) : 웹 상에서 그림을 그릴 수 있다. Java2를 이용한 것이 특징이며 SVG 형식을 활용해 그린 그림을 플래시 애니메이션 파일로 저장할 수 있는 점이 독특하다.

Flock(www.flock.com) : 불여우 기반의 오픈소스 소셜 브라우저 공식 사이트. 즐겨찾기, 방문기록, 블로깅 등의 활동을 브라우저 차원에서 제공해준다.


?

JotSpot(www.jotspot.com) : 개인용 위키 응용프로그램 제공 사이트

KnowNow(www.knownow.com) : RSS 알리미(alert) 시스템 사이트로 기업에서 필요한 정보를 모아서 제공하는 솔류션을 발표했다.

MS 라이브로컬(http://local.live.com) : 미국 주요 지역의 정밀항공사진 지도서비스를 포함한 지역정보 종합서비스

MS 라이브닷컴(www.live.com) : 마이크로소프트가 선보인 라이브 소프트웨어를 제공하는 사이트

MS 스타트닷컴(www.start.com) : 마이크로소프트의 개인화 서비스 사이트

MSN 버추얼 어스(virtualearth.msn.com) : 마이크로소프트의 위성지도 서비스

MSN 샌드박스(sandbox.msn.com) : 마이크로소프트가 진행 중인 프로젝트를 보여주는 사이트

MusicBrainz(http://musicbrainz.org) : 음악 관련 자료를 RDF 문법을 이용해 제공하는 사이트

Oddpost(www.oddpost.com) : 웹기반 이메일 업체로 DHTML을 이용하여 브라우저에서 아웃룩과 거의 같은 인터페이스를 구현하여 주목받은 회사. 야후가 인수했다.

Orb(www.orb.com) : 웹과 연동해 동영상 사진 화상캠 등을 통해 집안을 관리하거나 각종 알리미 기능을 이용할 수 있는 홈관리 시스템 사이트.

Podscope(www.podscope.com) : 파드캐스팅 자료를 검색해주는 검색엔진으로 숨은자료(meta data)를 활용한 검색엔진이라는 특징이 있다.

Pubsub(www.pubsub.com) : RSS와 블로그 전문 검색엔진. 구조화된 블로깅(Structured Blogging) 기술을 선보였다.

Real Travel(http://realtravel.com/) : 여행을 주제로 한 소셜 네트워크. 블로그 형식과 지도 연계 정보가 특징이다.

Rico(www.openrico.org) : 자바스크립트를 이용한 RIA기술 사이트. Ajax 기술을 사용한 개발 사이트.

SAGE(sage.mozdev.org) : 불여우 브라우저의 탭브라우징 기능과 접목해 사용하는 불여우 브라우저용 RSS 구독기 확장기능 사이트

W3C(www.w3.org) : 웹표준을 만들고 웹을 주관하는 공식기관. 시맨틱웹에 관한 자료도 이곳에 있다.

ZDNET RSS 공급 페이지(http://www.zdnet.co.kr/etc/feeds/xml/) : 다양한 형식의 RSS를 주제별로 제공해주고 있는 사례를 볼 수 있다.

Zvents(www.zvents.com) : 지역의 각종 행사(이벤트) 검색 서비스. 현재 샌프란시스코 지역의 행사를 검색해주며, 구글맵과 연동되어 장소를 소개한다.

개버(http://www.gabbr.com/) : 사용자가 덧글을 다는 것을 주요 특징으로 내세우는 뉴스 사이트. 덧글 수가 대문의 주요 뉴스에 표시됨으로써 사용자들의 관심도를 측정할 수 있다.

구글 개인화 홈페이지(http://www.google.co.kr/ig) : 구글의 개인화 홈페이지 사이트. 아작스를 도입해 옮기려는 영역을 마우스로 끌어다놓으면 원하는 위치로 바로 재배치되는 것을 볼 수 있다.

구글 라이드파인더(http://labs.google.com/ridefinder) : 구글의 Ride Finder는 검색 지역의 수송수단을 찾아주는 로컬 서비스로, 지도 서비스와 연동되는 서비스다.

구글 리더(http://www.google.com/reader/) : 구글의 RSS 웹구독 서비스. 지메일과 비슷한 화면을 가지고 있으며 검색과 연동된 점이 특징이다.

구글 베이스(http://base.google.com) : 구글이 내놓은 무료 알맹이(content) 검색 서비스

구글 비디오검색(http://video.google.com/) : 구글의 멀티미디어 검색 서비스

구글 야후 교통 날씨 지도(traffic.poly9.com) : '구글맵 + 야후 교통정보 + 월드웨더(worldweather) 날씨정보'를 결합하여 지도를 통해 교통상황과 날씨를 함께 확인할 수 있는 서비스. 그레그 새더츠키(Greg Sadetsky)가 개발했다.

구글 오컷(www.orkut.com) : 사회적 네트워크(Social Network)의 대명사처럼 인식되는 사이트로 평판 시스템과 검색 기능이 특징이다.

구글 지메일(www.gmail.com) : 구글의 웹메일 서비스. 기존의 폴더 방식이 아닌 레이블(lable, 찌종이) 방식으로 편지를 관리하고 있으며 아작스 등을 도입한 점, 2기가바이트가 넘는 용량이 특징이다.

구글 트랜지트 여행 플래너(Google Transit Trip Planner, http://www.google.com/transit) : 구글이 선보인 교통 안내 서비스. 미국 포틀랜드(Portland) 지역에 한정적으로 공개되었다.

구글(www.google.com) : 상장 1년 만에 미국 20대 기업에 들고 100조가 넘는 기업으로 성장한 세계 최고의 검색엔진 기업. 웹2.0 기술을 가장 잘 활용하는 곳이다.

구글 어스(Google Earth, http://earth.google.com) : 구글의 위성지도 서비스

구글 지도(http://maps.google.com/) : 아작스를 도입한 구글의 지도 서비스 사이트

그리스몽키(Greasemonkey, http://greasemonkey.mozdev.org/) : 아론 부드맨이 2004년 12월에 친구를 위해 개발한 불여우 브라우저용 확장 기능의 하나로 자신이 보는 페이지를 재정의해서 볼 수 있다.

나우퍼블릭(http://www.nowpublic.com/) : 사용자들이 기사를 작성할 수 있는 뉴스 사이트로 꼬리표를 적용하고 있다.

넘섬(http://www.numsum.com) : Ajax로 구현한 웹스프레드시트 사이트.

넷바이브스(http://www.netvibes.com/) : Ajax로 구현한 개인이 설정할 수 있는 개인화 페이지.

넷플릭스(www.netflix.com) : 미국의 DVD 대여 사이트로 아작스를 도입해 마우스를 올려놓기만 해도 상자가 뜨면서 DVD 요약 내용이 나온다.

뉴스게이터(www.newsgator.com) : 사용자가 좋아하는 뉴스, 사이트, 블로그를 한 자리에서 볼 수 있게 해주는 서비스. 아웃룩이나 피드데몬을 이용할 수도 있다.

다음 RSS넷(rss.daum.net) : 국내 포탈로는 처음 선보인 RSS웹구독기.

닷지볼(www.dodgeball.com) : 휴대전화 소셜 네트워킹 애플리케이션. 구글이 인수했다.

델리셔스(http://del.icio.us) : 조슈아 샤흐터(Joshua Schachter)가 만든 소셜 북마크 공유 서비스. 웹2.0 시대에 플릭커와 함께 양대 스타로 떠오른 사이트로 야후에 인수되었다. 30만 사용자들이 1000만개 즐겨찾기(북마크)를 공유했다.

디그(www.digg.com) : 슬래시(slashdot.org)와 같은 뉴스 포럼 사이트. 2006년 초부터 슬래시의 트래픽을 따라잡을만큼 급성장했다. 슬래시는 편집진에 의해 주제가 선정되지만 디그는 사용자의 투표(digg it)를 통해 선정되는 점이 다르다. 네티즌의 자발적 참여가 성장에 어떤 역할을 하는지 보여주는 사례.

라에드는 어디에(http://dear_raed.blogspot.com) : 블로그의 매체성을 가장 잘 보여준 살람팍스의 블로그

라이브마크스(http://sandbox.sourcelabs.com/livemarks/) : Ajax로 구현한, 델리셔스(del.icio.us)의 새로 추가된 북마크 실시간 보기 사이트.

라이트리(www.writely.com) : 웹 기반의 워드프로세서. 웹에서 문서를 작성한 후 컴퓨터에 Word, HTML, ZIP 형식으로 저장할 수 있고 공유도 가능한 점이 특징이다. 어디서나 사용할 수 있다는 점 때문에 최근 주목받는 사이트.

로조닷컴(www.rojo.com) : 블로그라인스와 같은 웹 기반의 RSS 구독기. 포크소노미 기술로 꼬리표에 가중치를 부여해 구성원들이 체계화시키고 있다.

롤요(www.rollyo.com) : 사용자가 원하는 사이트를 묶어두면 해당 사이트만을 대상으로 검색해주는 개인화 검색엔진. 데이브 펠이 만들었다.

리멤버더밀크(http://www.rememberthemilk.com) : Ajax를 적용한 할일 목록 관리 사이트. 메신저로 수신이 가능한 점이 특징이다.

리야닷컴(http://riya.com) : 인공지능 사진 검색엔진

마요미(www.mayomi.com) : 브라우저 상에서 사용 가능한 웹 마인드맵 서비스.

마이스페이스(www.myspace.com) : 미국 10대들이 주로 사용하는 커뮤니티 사이트

마이웹2.0(http://myweb.yahoo.com) : 야후가 내세우는 소셜 검색엔진(social search engine)

모든블로그(www.modenblog.com) : 휴대전화를 이용해 RSS를 구독할 수 있는 한국 사이트

모질라(www.mozilla.org) : 불여우(Firefox) 브라우저와 천둥새 편지 프로그램을 등을 배포하는 사이트. 오픈소스와 플랫폼 기반의 프로그램 흐름을 파악할 수 있다.

미보(http://www.meebo.com) : Ajax로 구현한 웹메신저. 당연히 프로그램 설치 없이 웹에서 바로 사용할 수 있는 메신저다. MSN 메신저 외에 야후, ICQ, 구글토크 등과도 연결된다.

믹시(www.mixi.co.jp) : 일본의 사회적 네트워크 사이트로 한국의 싸이월드와 구글을 섞은 것 같은 사이트다.

백베이스(www.backbase.com) : 아작스 기반의 응용 프로그램 개발 사이트

보잉보잉(http://boingboing.net) : 해외의 블로그 사이트. 방문객들의 불여우 브라우저 사용자가 IE 사용자를 추월하는 일이 나타나 화제를 모았다.

블로거닷컴(www.blogger.com) : 가입형 블로그 서비스. 구글이 인수했다.

블로그라인스(www.bloglines.com) : 전문 RSS웹서비스로 가장 유명한 곳. 해외 사이트지만 사용하기 편리하다는 이유로 한국 네티즌도 많이 사용한다. 애스크지브스에 인수된 후 IAC로 넘어갔다.

블로그펄스(www.blogpulse.com) : 블로그 검색엔진

샤프리더(www.sharpreader.net) : RSS구독기인 샤프리더 배포 사이트

세이바로직(www.ceiva.com) : 디지털액자 판매 기업으로 가족들이 사진을 인터넷에 올려놓기만 하면 다음 날 액자를 통해 새롭게 올라온 가족사진을 감상할 수 있는 서비스를 제공한다.

소셜텍스트(www.socialtext.com) : 기업용 위키 제품 사이트

스카이프(www.skype.com) : VoIP 서비스의 대표 사이트로 이베이(eBay)에 최대 41억 달러라는 천문학적인 돈을 받고 인수되었다.

스퀘어프리 HTML에디트(http://www.squarefree.com/htmledit/) : Ajax로 구현한 실시간 HTML 편집기

시맨틱웹 커뮤니티 포탈(www.semanticweb.org) : 시맨틱웹 관련 정보를 얻을 수 있는 포탈. 시맨틱웹에 관한 행사나 다양한 정보가 올라오며 시맨틱웹 컨퍼런스인 ISWC 정보도 여기에 올라온다.

싱잉피시(www.singingfish.com) : AOL 검색기에서 선보인 멀티미디어 검색 사이트

썸원뉴(www.someonenew.com) : 스카이프를 플랫폼으로 이용하고 있는 데이트 사이트

아이스로켓(www.icerocket.com) : 블로그 검색엔진

애스크지브스(www.ask.com) : 검색 엔진. 블로그라인스를 인수했으나 애스크지브스 자체가 IAC로 인수되었다.

애플 아이튠즈(http://www.apple.com/itunes/) : 애플의 온라인 뮤직 스토어인 아이튠즈는 고객이 자신의 마음에 들도록 RSS 공급 내용을 설정할 수 있다.

야후 360(http://360.yahoo.com) : 야후에서 만든 블로그와 소셜 네트워크를 혼합한 서비스

야후 앤서즈(Yahoo Answers, http://answers.yahoo.com) : 네이버 지식인과 비슷한 문답형 커뮤니티

야후 위젯(http://kr.widget.yahoo.com) : 야후가 인수한 콘파뷸레이터를 위젯이라는 이름으로 배포하는 사이트

야후 피플링(http://kr.ring.yahoo.com) : 구독하는 RSS를 테마별로 공유하는 커뮤니티 성격의 사이트

어댑티브패스(www.adaptivepath.com) : 웹 디자인 회사로 Ajax라는 이름을 만든 Jesse James Garrett의 에세이를 볼 수 있다.

업커밍(www.upcoming.org) : 트래킹 서비스 사이트. 야후가 인수했다.

에트시(http://www.etsy.com) : 다양한 기술을 적용한 쇼핑몰. 색깔 별 재질 별로 상품을 볼 수 있고, 상품 색을 바꿔볼 수 있고, RSS로 상품 목록 지원에 꼬리표를 사용한 꼬리표구름 목록까지. 그외 다양한 웹2.0 기술을 사용하는 쇼핑몰.

엑스파이더(www.xpyder.co.kr) : RSS구독기인 엑스파이더 배포 사이트

오데오(http://odeo.com/) : 파드캐스팅 포털 사이트.

오디오블로그닷컴(www.audioblog.com) : 파드캐스팅과 비디오 블로그 서비스 사이트.

오라일리 미디어(www.oreilly.com) : 미국의 미디어기업으로 국내에는 IT전문 출판사로 더 유명하다. 웹2.0 컨퍼런스를 주최하며 웹2.0이라는 낱말을 만들고 전파시켰다.

오버추어(www.overture.com) : 한국에서도 검색광고의 절반 정도를 차지하는 세계 검색광고 시장의 강자. 야후에 인수되었다.

올블로그(www.allblog.net) : 한국의 대표적인 메타사이트로 등록된 블로그 사이트의 RSS를 모아서 보여준다.

워크스팟(www.workspot.com) : 브라우저 상에서 리눅스를 사용할 수 있다. 현재 설치된 것은 Red Hat 8 & Mandrake 9.1 remote desktops.

웨이백머신(www.archive.org) : 인터넷의 과거 정보를 저장하고 검색할 수 있는 사이트로 웹사이트 문서 저장에서 텔레비젼 프로그램 저장까지 다양한 정보를 기록하고 있다.

웹2.0컨퍼런스(www.web2con.com) : 오라일리가 주최해 2004년 10월 5일부터 일주일 동안 미국 샌프란시스코에서 열린 웹2.0 컨퍼런스의 공식 사이트

위키피디아(www.wikipedia.org) : 전세계 네티즌이 참여해 만드는 공용백과사전

윙크(www.wink.com) : 마이클 태니(Michael Tanne)의 태그 기반 검색엔진. 태그랭크(TagRank)을 이용한 필터링을 통해 최고의 검색 결과를 제공하고 검색 결과를 발행하는 기능이 특징이다. 스팸이 없는 깨끗한 검색결과도 특징이다.

이글루스(www.egloos.com) : 한국의 블로그 전문 사이트. '이글루스 가든'이라는 꼬리표를 적용한 새로운 커뮤니티를 선보였다.

잉키보드(http://www.cfcassidy.com/InkyBoard/) : 태블릿PC(Tablet PC)를 위한 칠판(Whiteboard). 인터넷 상에서 칠판 대용으로 사용할 수 있다는 것이 특징이다.

인트라V뉴스(www.intravnews.com) : 아웃룩 플러그인 방식의 구독기 배포 사이트

자쿠바(www.jacuba.com) : 철자 검사 사이트. 브라우저나 사용환경에 상관 없이 동작한다는 점이 특징이다. 윈도 사용 환경이 아닌 경우 유용.

조이엔트(Joyent, www.joyent.com) : 개인의 편지나 일정, 주소록 등을 관리하는 PIMS 서비스로 기존 서비스와 다른 점은 꼬리표를 이용해 분류를 하고, 아작스, 주소록의 구글지도 연동과 같은 시맨틱웹 기술을 이용하는 점이다.

지오뉴스(Geonews, http://www.wereporters.com/geonews.htm) : 구글 뉴스와 구글 맵을 혼합한 서비스로 하우징맵, 지오블로거와 함께 혼합(mash-up) 서비스의 한 종류로 주목받고 있다.

지오블로거(www.geobloggers.com) : 세계 주요 도시에서 찍은 사진들을 구글 지도에 표시해주는 사이트. 네티즌이 플릭커에 올린 해당 도시 사진에 지오블로거를 이용해 도시이름 꼬리표를 붙여주면 구글의 지도를 선택할 경우 관련 사진이 뜨는 서비스다.

짐브라(Zimbra, www.zimbra.com) : 개인일정 서비스로 아작스와 RSS, 스카이프, 구글지도 연동이라는 특징을 가지고 있다.

칼렌다허브(http://www.calendarhub.com) : Ajax로 구현된 일정관리 사이트.

콘파뷸레이터(www.konfabulator.com) : 콘파뷸레이터라는 대시보드 프로그램 개발사. 콘파뷸레이터도 XML과 자바스크립트를 이용하기 때문에 위젯이라는 확장 프로그램을 사용자들이 개발하기 쉽다. 야후에 인수된 후 야후 위젯(http://kr.widget.yahoo.com)으로 다시 태어났다.

클립마크스(www.clipmarks.com) : 신문 잡지의 일부를 찢어서 보관하는 것처럼 웹에서도 일부분을 보관할 수 있도록 하라는 사이트. 웹페이지 전체가 아니라 부분만 찢어서 보관할 수 있도록 해주는 사이트로, 웹 상의 페이지 일부 클립(스크랩)은 물론 소셜클립마크를 지향하고 있는 사이트다.

클립폴리오(klipfolio, www.serence.com) : 작은 크기의 RSS 구독기 프로그램인 클립폴리오 배포 사이트

키코(http://www.kiko.com) : Ajax로 구현된 일정관리 사이트. 드래그 앤 드롭 인터페이스와 찌종이(레이블)를 지원한다.

타이프테스터(http://typetester.maratz.com) : Ajax로 구현한 글꼴(font) 비교하기 사이트

태그클라우드(www.tagcloud.com) : 꼬리표 낱말의 크기가 모두 달라 꼬리표가 구름모양으로 표시된다는 꼬리표구름. 꼬리표 기술을 알아보려면 들러야 할 곳이다.

태터센터(www.tattertools.com) : 블로그 프로그램인 태터툴즈를 만들어 제공하는 곳. 최근 꼬리표 기술을 적용해 커뮤니티 사이트로 변화중이다.

테일랭크(http://www.tailrank.com/) : 수 천 개 블로그 중에서 최고의 알맹이만을 골라서 보여준다는 사이트. 사용자들이 직접 기사를 수정하는 것이 특징이다.

테크노라티(www.technorati.com) : 2천만 개의 블로그가 등록된 꼬리표(tag) 기반의 블로그 전문 검색엔진. 구글보다 빨리 블로그를 검색해준다는 이유로 스타가 되었다.

토크디거(www.talkdigger.com) : 메타링크 검색엔진. 자신이 알고 있는 URL을 입력하면 해당 URL을 인용한 사이트를 찾아준다. 즉 특정 URL을 화제로 삼은 사이트를 찾아주는 검색엔진.

토픽스넷(www.topix.net) : 우편번호를 입력하면 30만 주제의 뉴스를 찾아주는 서비스

트라이루비(http://tryruby.hobix.com/) : 아작스로 구현한 루비 사이트. ruby 인터프리터쉘을 웹에서 사용 할 수가 있다.

파드캐스트(www.podcast.co.kr) : 파드캐스팅을 지원하는 국내 사이트

파인도리(http://www.findory.com/) : 뉴스와 블로그를 결합시켜 뉴스를 읽고 배우고 개인화시키는 서비스. 인공지능형 뉴스 사이트라는 점이 특징이다.

판도(www.pando.com/) : 누구나 무료로 어떤 크기의 파일이나 폴더라도 이메일로 전송하는 응용 프로그램.

패닉닷컴 쇼핑몰(http://panic.com/goods/) : Ajax를 이용한 쇼핑카트의 예를 볼 수 있다.

페이스북(http://facebook.com/) : 미국 대학생들이 많이 사용하는 커뮤니티 사이트

프로토페이지(www.protopage.com) : 개인화된 뉴스, 쪽지(sticky notes), 즐겨 찾기, 그외 각종 웹페이지를 하나의 페이지에서 볼 수 있게 만든 개인화 홈페이지 서비스 중 하나. 아작스(Ajax)를 이용하는 것이 특징이다.

플란조(http://www.planzo.com) : 일정관리 사이트로 다른 사람들과 일정 공유로 커뮤니티 일정 관리 가능. Ajax를 이용하여 드래그 앤 드롭 인터페이스 지원. RSS 공급 지원.

플릭커(www.flickr.com) : 꼬리표 기반의 사진 사이트. 웹2.0을 대표하는 사이트로 각종 상을 휩쓸다가 야후에 인수되었다.

피드데몬(http://www.bradsoft.com/feeddemon) : 가장 대표적인 RSS 구독기 프로그램인 피드데몬 배포 사이트

피드버너(www.feedburner.com) : 개인 블로그의 트래픽 부담을 덜기 위해 RSS 트래픽을 대신 떠안는 서비스.

피드스터(http://feedster.com) : 미국 샌프란시스코에 위치한 검색 엔진과 XML 웹 컨텐트 신디케이션 기업.

피카사(http://picasa.google.com/) : 웹 기반의 사진 관리 편집 사이트. 구글에 인수되었다.

하우징맵(www.housingmaps.com) : 폴 레이드매처(Paul Rademacher)라는 디자이너가 개발한 부동산 서비스로 구글지도에 크레이그리스트(craigslist)의 부동산 정보를 결합했다.

<!-- //포스팅 -->

출처 : [기타] 인터넷 : http://webperse.com

Posted by 1010
98..Etc/Etc...2008. 8. 8. 09:08
반응형

블로그를 보다 zzony님의 포스팅을 찾았다.

 

웹페이지를 하나의 그림이나 파일로 저장해줍니다」라는 글이다.

 

서비스를 제공하는 사이트는 thumbalizr.com인데 네이버로 테스트 해봤다.

 

홈페이지에 접속하여 이미지로 만들 사이트의 주소를 적으면 다음과 같이 간단한 섬네일과 해상도를 표시한다.

 

    

 

해상도를 선택하면 그 해상도에 맞는 페이지를 깔끔하게 이미지로 저장하여 보여준다.

다음은 800 해상도를 선택했을 때의 그림이다.

 

 

 

이 서비스를 사용해보면서 블로그에서의 문제가 되는 스크랩기능을 이렇게 이미지로 제공하면 어떨까 라는 생각을 해본다.

 

컨텐츠의 스크랩에 있어서 문제가 되는 것이 대부분 스크랩을 지원하는 사이트의 경우 스크랩 후에 그 컨텐츠의 내용을 수정할 수 있다는 점이다.

 

즉 양질의 컨텐츠라해도 복사&붙여넣기나 스크랩 버튼 클릭하나로 다른 사람의 것으로 쉽게 보여질 수 있는 것이다.

 

물론 이렇게 이미지로 제공하는 것이 스크린 캡쳐나 내용을 다시 작성하는 것 등의 방법으로 컨텐츠의 불법스크랩을 할 수 있다고 해도 지금처럼의 무분별한 펌질이나 수정을 어느정도 막을 수 있지 않을까 생각한다.

 

그리고 스크랩을 수행할때 이미지를 배경에 저작자와 서비스 제공자의 워터마크를 추가하면 본 저작자의 저작권 보호와 불법 스크랩을 근절한다는 서비스 업체의 이미지에도 도움이 될 것 같다.

Posted by 1010
98..Etc/Etc...2008. 8. 7. 15:43
반응형
How to deploy EJB component




자바스터디 네트워크 [www.javastudy.co.kr]

조대협 [bcho_N_O_SPAM@j2eestudy.co.kr]




1. WebLogic Class Loader


EJB와 웹애플리케이션을 디플로이하기 위해서는 효과적인 패키징이 필요하다. 효과적인 패키징을 위해서는 먼저 WAS의 ClassLoader의 구조에 대해서 알필요가 있는데, 먼저 WebLogic의 ClassLoader에 대해서 살펴보도록 하자.

○ Class Loader란?

Class Loader란 자바의 큰장점중의 하나로, Compile Time이 아닌 Run Time에 Class를 로딩할 수 있게 해주는 기술이다. 예를 들어, ClassA = new ClassA(); 라는 코드를 최초로 실행할때, JVM은 ClassA라는 Class를 Class Loader를 통해서, ClassA.class의 바이트 코드를 최초로 메모리에 로드하게 된다. Class Loader는 이처럼, Class의 바이트 코드를 FileSystem이나,Jar와 같은 Archieve또는, network socket(Applet and RMI)를 통해서 동적으로 로딩할 수 있도록 지원해준다.

이 Class Loader는 기술적으로 몇가지 특징을 가지고 있는데 그 내용을 살펴보면 다음과 같다.

   - Hierarchical
     : Class Loader는 Hierarchical 하게 생성이 가능하다. Parent class loader에서, child class loader를 갖는것과 같이 Class Loader간의 계층형 구조를 갖게 되며, 최상위의 Class Loader는 "bootstrap" Class Loader가 위치하게 된다.

   - Delegate load request
     : 위와 같이 Class Loader가 계층형 구조를 가지고 있기 때문에, Class 로딩상에 몇가지 규칙이 필요한데, 일정 시점에 Class Loading 요청을 받았을때, 상위 Class Loader가 Loading한 Class가 그 우선권을 가진다.
     예를 들어 설명하면, Class Loader가 parent부터, CL1-CL2-CL3 순서로 생성되어 있다고 가정하자, 애플리케이션이 Class Loader CL3로 Class를 요청하면, CL3는 그 요청을 CL2로, CL2는 CL1으로 요청을 전달한다. 즉, Class 로딩의 우선 순위는 parent class가 가지고 있고, 만약에 요청받은 Class가 없을 경우에만 아래 레벌 Class Loader가 Class를 로딩하게 된다.

   - Have visibility constraint
     : 상위 Class Loader를 먼저 참조하는것에 이어서, Class Loader는 일종의 scope rule을 제공하는데, Child Class Loader는 Parent Class Loader의 Class를 Delegation load request를 이용하여 찾을 수 있지만, 그 반대로 Parent가 Child가 Loading한 Class를 사용할 수 는 없다. 또한 Parent의 같은 Level의 Child Class Loader는 서로 로딩한 Class를 사용할 수 없게 되어 있다.

   - Cannot unload classes
     : Class Loader에 의해서 Loading된 Class들은, unload될 수 없다.. Class Loader에는 Class Unloading기능이 없다. 그래서 이 unloading 기능을 우회적으로 구현하는 방법은 Class를 로드한 Class Loader 자체를 삭제하고, 새로운 Class Loader를 만들어서 다시Class 를 로드하면, reload되는 것처럼 작동하는것이 된다.

내용이 좀 어려울 수 도 있겠지만, WLS의 뒤에 나올Class Loader의 내용을 읽어보면 이해가 될것이다. Deploy 개념을 이해하는데 중요한 내용이니 이해하도록 하자.

○ WebLogic의 Class Loader

그럼 이제 WebLogic의 Class Loader에 대해서 알아보도록 하자. 이 feature는 단지 WebLogic뿐 아니라, J2EE 표준을 따르는 WAS는 모두 준수하고 있는 내용이다.

일단 WebLogic이 기동되면 JVM Level의 Class Loader가 Loading된 후에, WebLogic의 Application에 따라 각각의 Class Loader가 그 Child로 Loading된다.

JVM Class Loader

먼저 JVM이 가동될때, Loading되는 Class Loader는 parent부터 순서대로, Bootstrap, Extensions, System Class Loader가 올라가게 된다. 그 내용을 살펴보자

   - Bootstrap Class Loader
     : JVM이 실행될때 맨 처음 실행되는 Class Loader로, 가장 기본적인 JAVA실행에 필요한 가장 기본적인 Class들을 (rt.jar, i18n.jar 와 같은 기본적인 Archieve) 로딩한다.

   - Extensions Class Loader
     : BootStrap Loading후, 기본적으로 Loading되는 Class로 $JAVA_HOME/lib/ext에 있는 Class들이 Loading된다. 이 Class들은 별도로 classpath에 잡혀 있지 않아도 Loading된다.

   - System Class Loader
     : 다음으로, CLASSPATH에 정의되거나 JVM option에서 -cp, -classpath에 지정된 Class들이 로딩된다.

기본적으로 WebLogic은 이 JVM Level의 Class Loader에서 작동을 하게 되고, Application을 Deploy할때 마다 별도의 Class Loader를 System Class Loader의 Child로 Invoke하게 된다.

JVM Class Loader

WebLogic에서 Invoke되는 Class Loader는 종류에 따라 EJB-JAR,WAR,EAR 3가지로 구분이 된다. 각자의 Class Loader에 대해서 체크해야할 사항을 짚고 너머가 보자.

   - EJB-JAR
     : 각 EJB-JAR 파일은 디플로이가 되면, JAR파일당 각각의 Class Loader를 생성하게 된다. 그래서, 다른 JAR파일에 있는 Class들은 참조를 할 수 가 없고, 오로지 Parent Class Loader인, JVM Level의 CLASSPATH에 적용된 CLASS들만 참조를 할 수 있다. 그래서, 다른 EJB JAR파일내에 있는 EJB를 사용하기 위해서는 그 EJB의 Client class들(Remote Interface,Home Interace)을 같이 JAR로 묶어주어야 한다.물론 같은 JAR파일내에 있는 EJB나 다른 Class를 사용하는 것은 같은 Class Loader상에 Load된것이기 때문에, 가능하다.

   - WAR
     : Servlet이나 JSP를 패키징하는 WAR파일 역시 EJB-JAR와 같은 특성을 갖는데, 집고 넘어가야할점은 웹로직에서는 WAR에 대해서 우선순위 변경이 가능한데,일반적인 Class Loader의 우선순위를 따르는것 이외에, WEB-INF/classes와, WEB-INF/lib 디렉토리가 우선순위를 갖것이 가능하다. 이 디렉토리안에 class가 있을 경우에는 parent class loader에 load된 Class보다 우선순위를 갖게 설정할 수 있다.이설정은 웹로직 콘솔에서 PreferWebInfClasses 라는 옵션을 true로 설정(default는 false이다.)을 하면 가능하며, 자세한 내용은 (http://e-docs.bea.com/wls/docs61/programming/packaging.html 에Using PreferWebInfClasses in J2EE Applications 부분을 참고하기 바란다.)

   - EAR
     : 위의 EJB-JAR와 WAR는 각각 하나의 Class Loader를 갖는데 반해서, EAR을 두개의 Class Loader를 갖게 된다. EJB-JAR를 위한 Class Loader와 WAR를 위한 Class Loader 두개가 Invoke되고, 그 관계는 EJB-JAR Class Loader가 WAR Class Loader의 Parent관계가 되서, Servet/JSP는 당연히 EJB Class를 참조해서 사용이 가능해지게 되는것이다. (JSP는 WAR Class Loader에 의해 Loading되었기 때문에, 그 Parent인 EJB-WAR Class Loader에 의해 Loading된 EJB Class를 사용할 수 있게 되는것이다.)


<그림 1. WebLogic Class Loader 구조>


그럼 <그림 1>을 보자. 그림 1의 EJB JAR5는 EAR1이나 WAR4, EAR2의 Class Loader와 다른 Class를 사용하기 때문에, 다른 패키지의 Class를 참조할 수 없다.

EAR1의 WAR1은, EAR로 같은 Class Loader상에 있는 EJB JAR1,EJB JAR2,EJB JAR3에 있는 Class를 참조할 수 있다. 그러나 EAR2의 Class는 참조할 수 없다. 그러나 역으로, EJB Class Loader가 WAR Class Loader의 Parent이기 때문에, EJB JAR 1.2.3는 WAR1,2의 Class를 참고할 수 없다.

여기서 한가지 집고 넘어가야할것은 모든 EJB JAR가 참조하는 Class들은 CLASSPATH내에 있는 Class가 우선시 된다. (JVM Class Loader가 모든 WebLogic Class Loader의 parent이기 때문에.) 그래서, EJB의 Client Class나, Common Class들을 CLASSPATH와 JAR양쪽에 넣으면 CLASSPATH내에 있는 CLASS가 참조가 된다. (이런식의 패키징은 권장하지 않는다. 상세한 내용은 다음에 나올 EJB 패키징 부분에서 알아보도록 하자)

※ WLS 8.1에서부터는 개발환경을 위해서 Class Loader의 계층구조를 임의로 지정할 수 있게 되어 있다. 자세한 내용은 (http://e-docs.bea.com/wls/docs81/programming/classloading.html#1083313) 를 참고하기 바란다.

JVM Class Loader

J2EE에서, WAS가 하나의 Class Loader를 이용하지 않고, 각 WAR,EJB-JAR,EAR별로 별도의 Class Loader를 사용하는것은 다음과 같은 이유를 가지고 있다.

   - Isolation
     : 개발그룹 A가 Application app-A에 대해서 개발과 deploy를 할때, 다른 Application에 대해서 신경쓸 필요없이 작업 수행이 가능하게 된다. 만약 모든 Applilcation이 하나의 Class Loader를 사용하게 된다면, 하나의 애플리케이션을 deploy할때마다, Class Loader가 restruct되는등 영향을 받을 수 있다.

   - Singleton
     : 이렇게 Class Loader를 따로 사용하기 때문에, Application 별로, 당연히 Singleton Pattern이 따로 적용된다. 만약 Class Loader가 전역적으로 하나만 사용되었다면, 다른 Application에 의해서, Singleton이 오작동할 수 도 있을것이다. (Singleton은 GoF의 Design Pattern중의 하나이다. 자세한 내용은 Design Patterns-Addison Wesley를 참고하기 바란다.)

   - Namespace
     : Namespace의 확장도 가능하게 되는데, webApp1.war와 webApp2.war 파일에 똑같이 index.jsp 라는 파일이 있을때, WAS는 각 Class의 Name space를 Class Loader + File Name이라는 Namespace를 사용하기 때문에, 다른 Application안의 컴포넌트들을, 어떻게 naming 하느냐는 것은 문제가 되지 않는다.

   - Hotdeploy
     : Hotdeploy는 J2EE의 중요한 feature중의 하나인데, WAS가 가동중에, 컴포넌트를 redeploy할 수 있는 기능을 Hotdeploy라고 한다. 위에서도 설명했듯이, redeploy를 하는 기능은 Class Loader에는 없기 때문에, redeploy를 하기 위해서는 기존의 Class Loader를 unload하는 동시에, 새로운 Class Loader를 Loading하여, Class 를 reloading하게 된다. 이렇게 Class Loader를 나누어 놓음으로써, 효과적이고 빠르게 redeploy가 가능하게 된다.

   - Deploy
     : Application의 배포역시, Application 단위로, Class Loader를 이용하기 때문에, Application 단위로 배포가 가능해진다. Class Loader를 하나만 사용했다면, 일부만 변경이되더라도 Application 전체를 redeploy해야 됐을것이다.

이제까지, 간단하나마, JVM Class Loader와, WebLogic Class Loader의 내용에 대해서 살펴보았다. 그러면 이 특성에 따라서 각각의 애플리케이션과 컴포넌트들을 어떤식으로 패키징하는가에 대해서 알아보도록 하자.


2.Packaging Component


J2EE 패키징을 하는데 있어서 가장 큰 이슈는 EJB의 Client Class(Home Interface,Remote Interface)와, Common Class들일 것이다.. 이 Class들을 Deploy하는 방법이 어떤것이 있는지, 그리고 그 장단점에 대해서 알아보도록 하자.

○ WEB-INF/classes

Servlet,JSP에서 사용하는 EJB Client Class와, Common Class를 classes 디렉토리에 풀어서 배포하는 방법인데, 수정과 삭제가 편하다는 장점은 있으나, Web Application 마다, classes 디렉토리에 배포를 해야하기 때문에, Version 관리 문제나 Sync 문제가 발생할 수 있고, 파일단위로 관리하기때문에, 번거롭다. 소규모가 Application이 아닌경우에는 권장하기 어려운 방법

○ WEB-INF/lib

Servlet,JSP에서 사용하는 EJB Client Class와, Common Class를 jar로 묶어서, lib 디렉토리에 위치시킬 수 있다. Jar단위로 묶어서 패키징하기 때문에, 관리가 간편하다는 장점이 있다. 단점은 WEB-INF/classes에 배포하는것과 같다.

○ Class files within EJB JAR

EJB에서 사용하는 Common Class와, 참고하고 있는 외부 EJB-JAR의 EJB Client Class를 하나의 jar파일에 패키징하는 방법. 이 방법은 EJB-JAR 파일 단위로,독립성이 뛰어나고 핸들링하기 편하다는 장점은 있으나, 각각의 EJB-JAR에 Class들이 직접 패키지되기 때문에, 변경 사항이 있을때마다 다시 패키징을 해야한다.

○ Class files on system CLASSPATH

EJB Client Class와, Common Class들을 아예 System CLASSPATH에 넣어버리는 방법도 있다. 이렇게 할경우에는 CLASS를 사용하는것이 매우 간편해지기는 해지고, common class의 경우에는 중복하여 배포할 염려없이, CLASSPATH내에 있는 것만 바꾸면 되기 때문에, 일관성을 유지하기가 좋다
그러나 그 CLASS들을 바꾸거나 할경우에는 WAS를 restart해야하는 제약 사항이 따르게 되구. Hotdeploy와 같은 기능을 사용하는것은 불가능하게 된다

○ jar on system CLASSPATH

바로 앞의 방법에 Class files을 jar로 묶어서 CLASSPATH에 배포하는 방식으로, 위와 같은 단점을 가지지만, jar 단위로 묶어서 관리를 하기 때문에, 앞의 방법보다는 Class 관리가 편리하다.

○ jar in EAR

가장 일반적인 배포 방법으로client class와 common class을 jar로 묶어서, Application ear 안에 함께 묶어서 배포하는 방식으로, ear단위로 application 관리와 배포가 가능해진다.
그러나 두개 이상의 application이 공통된 common class 파일들을 참조하는 경우에는 각각의 ear에 common class를 넣어서 패키징해야 하기 때문에, 이런 경우에는 일관성의 문제가 발생할 수 도 있다.

○ MANIFEST.MF

JDK1.2의 "extension mechanism" 이라는 이름으로 등장한 기능으로, JAR파일이 다른 JAR파일의 Class들을 참조할 수 있게 해주는 기능이다.일단 사용법부터 살펴보면

/META-INF/MANIFEST.MF 라는 파일로 정의가 되고
Manifest-Version: 1.0
Class-Path: commonclasses.jar ./account/account_ejb_client.jar
./com/bea/

식으로 사용된다.
이렇게 정의되어 패키징된 jar파일내의 Class들은 commonclasses.jar와./account/account_ejb_client.jar 그리고./com/bea/ 에 있는 Class들을 사용할 수 있게 된다.

여기서 꼭 주의해야할 점은 Class-Path의 디렉토리 경로는 상대 경로만 지정이 가능하며, 이 상대경로의 기준 디렉토리는 해당 JAR파일의 Class들이 실행되는 디렉토리 이다. 그런데, 이 실행디렉토리라는 것이, WAS에 디플로이된 jar파일의 경로가 아니다.WLS의 경우 해당 jar가 $WLS_HOME/config/mydomain/applications에 위치하고 있더라도, 그 디렉토리를 기준으로 하지 않는다는 이야기이다. 대부분의 WAS가 실행시에, 그 jar를 컴파일하거나 캐슁해서 사용하는 staging 디렉토리에 그 class들을 위치해놓고 수행을 하기 때문에, staging 디렉토리가 어디가 될지는 WAS의 종류와 환경에 따라서 다르다.

이런 이유로 MANIFEST.MF를 사용하는 경우는 EAR안에 같이 패키징된 JAR파일간의 reference를 결정하는데만 사용해야하며, 그중에서도 deploy order를 정의하는데 사용된다. 즉jar in EAR 의 경우, common class가 그 Class를 사용하는 EJB보다 늦게 deploy가 되면 Class NotFound 상태가 될 수 있기 때문에, common class를 먼저 deploy 시킬때, 그 common class를 사용하는 EJB의 EJB-JAR에 MANIFEST.MF를 이용하여, common class가 먼저 로딩되게하는데 사용을 한다.

꼭 기억해야 할것은 위와 같은 이유로 MANIFEST.MF는 EAR안에서만 사용해야 한다는 것이다.

지금까지 common class와, ejb-client-class들을 패키징하는 몇가지 정책에 대해서 알아보았다. 어떤것이 절대적으로 좋고 나쁘다는 정석은 없다. 개발 상황과, 정책에 따라서 알맞은 패키징 정책을 선택하는 것이 올바른 길일것이다. 단. 패키징 정책을 결정하지 않고, 개발을 진행하다가는 추후에 낭패를 볼 수 있으니, 패키징 전략을 수립한후에, 개발을 진행하도록 하자.

○ APP-INF/lib or APP-INF/classes (WLS 8.1 이상)

WLS 8.1부터 새로 등장한 방법으로, common class들을 APP-INF/classes나, lib 디렉토리에 배치하면, 그 ear안에서 자유롭게 사용할 수 있게 된다

NOTE!

좀더 효율적인 패키징 전략 수립을 위해서는 Component간의 Dependency와 패키징 구조를 파악하는 것이 중요한데, 이는 UML을 이용한 OOAD(Objected Oriented Analysis and Design) 단계에서 Class 간의 Dependency Diagram을 통해서 파악하고, 이를 Deployment Diagram을 통해서 형상화 하면 좀더 논리적이고 체계적으로 패키징 전략을 수립하는것이 가능하다.

※ Call by reference and Call by value.

잘알고 있겠지만, Java의 Call 방식에는 Call by reference와, Call by value 두가지 방법이 있다. 당연히 Call by reference가 속도나 효율면에서는 뛰어나겠지만, EJB와 같은 Remote Call의 경우에는 사용되는 Object나, Call Method의 인자전달을Call by value를 사용한다.
WLS 에서는 같은 EAR안에 패키징을 할경우에는 WLS가 RMI call을 optimize하여, call by reference로 하도록 조정해주고, local interface를 사용할 경우에도, call by refrerence를 사용하도록 한다.
이런 이유로, 같은 EJB를 어떤식으로 Packaging하느냐에 따라서도 Performance차이가 날 수 있다는것을 참고하도록 하자.


3. EJB Packaging Order


지금까지는 Application이 어떻게 패키징 되는지, 패키징 된 Class들이 어떤 방식으로 Loading되는지 알아보았다. 그럼 WebLogic Server에서, 어떤 과정을 거쳐서, EJB를 Packaging 하여 war,jar,ear등을 만들어내는지에 대해서 알아보도록 하자

○ MANIFEST.MF

1) develop ejb component

2) compile ejb component
개발한 EJB를 class로 컴파일 한다.

3) define EJB deployment descriptor
WebLogic에서는 3개의 Deployment descriptor를 필요로한다.
ejb-jar.xml
weblogic-ejb-jar.xml
weblogic-cmp-rdbms-jar.xml (optional, for CMP only)

EJB의 Deployment Descriptor를 만들어야 되는데, 이 부분은 WebLogic에서 어느정도 자동화가 가능하다.
EJB class가 있는 디렉토리에서 다음 명령어를 이용하면, Deployment Descriptor (ejb-jar.xml weblogic-xxx.xml) 파일을 자동으로 생성해준다.

WLS6.1
(EJB 1.1) java weblogic.ant.taskdefs.ejb.DDInit [dir]
(EJB 2.0) java weblogic.ant.taskdefs.ejb20.DDInit [dir]
(Web App) java weblogic.ant.taskdefs.war.DDInit [dir]
(App) java weblogic.ant.taskdefs.ear.DDInit [dir]

WLS 7.0
(EJB) java weblogic.marathon.ddinit.EJBInit [dir]
(App) java weblogic.marathon.ddinit.EarInit [dir]
(Web App) java weblogic.marathon.ddinit.WebInit [dir]

이를 통해서 생성된 EJB DD들은 완전한것이 아니기 때문에, 직접 에디터를 통해서 수정하도록 하자.

아래 그림은 각각의 EJB deployment descriptor가 어떻게 시스템과 맵핑이 되는지를 나타내주는 그림이다.



4) packaging EJB to jar file
이렇게 개발된 EJB class파일들과, deployment descriptor를 jar 유틸리티를 이용해서 jar파일로 패키징 한다.

5) generate EJB stub (* important !!)
4)단계까지는 대부분의 사용자가 잘 진행을 하지만, 시중의 많은 서적이나, 초보 가이드 문서에 빠져있는 부분이 EJB stub을 만드는 부분이다.



우리가 코딩하는 EJB 부분은 EJB의 로직부분이다. EJB는 분산객체이기 때문에, 아랫단에서 네트워크 환경을 위한 RMI 등의 통신 메커니즘을 제공하는데, 이 통신 메커니즘에 해당하는 부분이 EJB의 stub class들이다. 요즘의 WAS들은 이 stub Class들을 EJB deploy과정에서 자동으로 생성해주는 경우가 많은데, 이 과정은 server에 upload되는 순간에, EJB의 내용을 분석하여, stub의 java source 파일을 생성하고, javac 컴파일러를 invoke하여, stub class를 generation 하게 된다. 이 기능은 개발시에 매우 편리하니, 개발과정에서 사용하도록 하자.

그러나 운영시에는 deploy하는 과정에 많은 EJB stub을 만들고 컴파일하는데 많은 resource가 소요된다. 결과적으로, 한꺼번에 많은 EJB를 deploy할때는 이 stub을 생성하는 과정에서 동시에 많은 resource가 사용되서 시스템이 느려지거나, boot up 시간에 영향을 주는 경우가 많다.

이런 이유로, ejb를 서버에 deploy하기 위해서, ejb stub을 미리 생성해서 패키징하여 deploy하는것이 좋다. 다음과 같은 방법으로, ejb stub을 포함한 jar파일을 생성할 수 있다.

% java weblogic.ejbc [ejb-jar-file-name] [result-file-name]

example)

% java weblogic.ejbc account_manager.jar account_manager_stub.jar

여기까지 진행하면, deploy를 하기 위한 하나의 완벽한 ejb-jar 파일이 작성된것이다.

6) packaing EJBs into ear files

앞에서 작성한 ejb-jar파일과 war파일들을 적정한 디렉토리에 배치하고, META-INF/application.xml 파일을 작성한후 jar 유틸리티를 이용하여 ear로 생성하면 최종 deploy를 위한 준비가 끝난것이다.

○ Specifying ejb-client.jar
EJB를 클라이언트에서 사용하려면 위에서 설명하였듯이, ejb client class들이 필요하다.

EJB Client class들은 EJB Home Interface,Remote Interface,Primary Class Interface나, 기타 인자가 되는 Class들로 구성이 되는데, 이 Class들만 묶어서, 해당 EJB를 사용하기 위한 jar파일로 구성하게 된다.

(※ 이때, EJB Implementation Class들과, stub Class들을 같이 묶는 경우가 있는데, 이는 deploy 방법이나 CLASSPATH 설정등에 따라서 심각한 문제를 발생시킬 수 있으니, 절대로 같이 패키징하지 말자.)

이 파일들을 일일이 골라내서 패키징하는것도 여간 번거로운 작업이 아닐 수 없다. 이것을 좀 더 편리하게 하기 위해서, J2EE spec에서는 자동으로 ejb-client.jar Class를 생성해주는 기능을 제공하는데, 간단하게 ejb-jar.xml을 수정하고, java weblogic.ejbc xxx를 실행해주면된다.

구체적인 순서는 다음과 같다.

   - ejb-jar.xml에 ejb-client-class.jar 라는 엘리먼트를 추가한다.
   - ejb-jar 파일을 java weblogic.ejbc [ejb-jar-file-name] [result-file-name] 를 실행하면, 해당 디렉토리에 ejb-client-class.jar라는 파일 이름으로, client Class만 추출되어진 jar파일이 생성된다.

이렇게 생성된 jar파일들은, Servlet/JSP에서 사용할 경우 WEB-INF/lib 에 위치하거나, Client Application의 classpath내에 적용되어 사용된다.

○ Deploying Pinned EJB

특히 Cluster에 EJB를 Deploy할때는 특별한 주의가 필요한데, Cluster의 경우에는 EJB를 하나의 서버에만 deploy하고, targeting을 통하여, Cluster내의 다른 서버에, EJB를 배포할 수 있다.
이경우, ejbc를 거치지 않은 EJB의 경우에는 upload한 서버의 경우에는 자동으로 ejbc를 실행하여, stub을 생성하지만, targeting에 의해 ejb가 복제된 다른 서버의 경우에는 stub이 없는 파일이 복제 되기 때문에, client에서 그 EJB를 호출할 경우, RMI Layer에서 Assertion error가 발생하게 된다.

○ Ant utility

지금까지 EJB를 배포하기 위한 패키지를 생성하는 순서에 대해서 살펴보았다. 과정이 길고 복잡하기 때문에, 개발도중 매번 일일이 실행하기에는 매우 복잡하기 때문에, J2EE에서는 예전 Unix시절의 make와 같은 유틸리티를 제공한다. Ant라는 이름의 유틸리티로, build.xml이라는 스크립트를 만들어서 위의 과정을 자동화할 수 있다. 거의 EJB 개발에서는 표준으로 사용하고 있는 유틸리티이니 한번 체크해놓도록 하자.
좀더 자세한 정보는http://ant.apache.org/ 를 참고하시 바란다.


4. EJB deploy in WebLogic Server


이렇게 만들어진 Archieve file들(war,ear,jar)을 WebLogic에서 EJB를 Deploy하는 방법은 크게 3가지 방법이 있다.

   - Console deploy
   - Command line deploy
   - Auto deploy

○ Console deploy

WebLogic 콘솔을 이용하여, 웹브라우져에서 디플로이 하는 방법이다. 간단한 방법이므로 본 문서에서는 따로 설명하지 않는다. http://edocs.bea.com 의 WLS deploy 문서를 참고하기 바란다.

○ Command line deploy

웹브라우져를 사용할 수 없는 command line 환경에서 사용할 수 있는 방법이다.

%java weblogic.deploy ?port port_number ?host host_name deploy password name source

example)
%java weblogic.deploy ?port 7001 ?host localhost deploy weblogicpassword CMP_example c:\weblogic\CMP_example\
%java weblogic.deploy ?port 7001 ?host localhost deploy weblogicpassword bean_jar c:\weblogic\bean.jar

source 부분에는 EJB Beans의 jar 파일의 Full 경로가 들어가거나 또는 Directory 명이 들어간다.

○ Auto deploy

WebLogic의 $WL_HOME/config/$DOMAIN_NAME/applications (WLS6.1 기준) 디렉토리에 jar 파일이나, EJB 디렉토리를 복사해놓으면, WebLogic이 Boot up시에, 자동으로 디플로이되거나 또는 그 EJB의 내용이 변경되었을때, 자동으로 redeploy를 한다.
Boot up시에 deploy되는 기능은 언제나 사용이 가능하지만, WebLogic 기동중에, ejb-jar 파일을 바꿔서 redeploy하는 기능은, WebLogic을 Development Mode로 부팅했을때만 가능하다. Development Mode로 WebLogic을 부팅하는 방법은 startWebLogic.sh 에서 java 옵션에, -Dweblogic.ProductiobModeEnabled=false 로 해주면 Development로 부팅이 된다.

○ Partial upgrade (only WLS 8.1 이상)

WLS8.1에서는 Class Loader모델이 변경되어, 좀더 향상된 deploy가 가능하다. EJB는 Interface를 통해서 호출이 되기때문에, Interface가 변경되지 않은 상태에서, implemtation class 하나만 변경하여 redeploy하는 기능이 추가되었다.

이는 예전버전에서는 각각의 application 단위로, EJB Class를 Loading하였다. (JAR 파일의 경우, 하나의 Application Class Loader가, JAR안의 모든 EJB를 Loadinig했고, EAR의 경우에도, 하나의 Application Class Loader가 모든 EJB Class를 Loading했었다.) 그러나, 8.1 에서부터는 아래 그림과 같이 각각의 Application Class Loader아래에, 각각의 EJB Implemetation Class마다 별도의 Class Loader가 가동되게 됨으로써 가능해진 기능이다.

각각의 EJB Implementation Class를 redeploy하기 위해서는

java weblogic.Deployer ?adminurl url ?user user ?password password ?name myapp ?redeploy myejb/foo.class

을 해주게 되면, myapp application의 myejb jar 패키지에서 foo.class라는 EJB implementation file만 redeploy를 해준다.



여러개의 파일들을 한꺼번에 업데이트 할 수 도 있는데, 이는, redeploy 옵션뒤에, 다음과 같이 파일명들을 정의해주면 된다.

java weblogic.Deployer ?adminurl url ?user user ?password password ?name myapp ?redeploy myejb/foo.class mywar anotherejb

위의 명령의 경우에는 myapp의 myejb jar의 foo.class, 그리고 mywar.war 웹애플리케이션과, anotherejb EJB 패키지를 redeploy를 해준다. 이때, 이 3개의 파일로 인해서 redeploy를 해줘야하는 dependency 관계가 있는 다른 컴포넌트들도 자동으로 redeploy를 해주게 된다.


5. Programming Tip


이번 기사를 정리하는 기분으로, 한가지 Class Loader의 팁을 소개한다.

해당 Class가 어느 Class Loader를 통해서 Loading 됐는지를 쉽게알 수가 있다.

해당 CLASS에 다음과 같은 코드를 삽입하면 된다.

   ClassLoader loader = null;
   loader = this.getClass().getClassLoader();
   System.out.println("This class is :"+this.getClass().getName());
   while(loader != null){
      System.out.println(loader.getClass().getName());
      loader = loader.getParent();
   }//while

(EJB Class 안에 넣고 이 코드를 수행했을때 수행결과는 다음과 같다. WLS6.1 기준.)

   This class is :com.bea.examples.simpleEJB.AccountManagerEJB_fsrjh9_Impl
   weblogic.utils.classloaders.GenericClassLoader
   sun.misc.Launcher$AppClassLoader
   sun.misc.Launcher$ExtClassLoader


[참고 자료]

http://java.sun.com/docs/books/tutorial/ext/basics/load.html
http://e-docs.bea.com/wls/docs61/ejb/EJB_deployover.html#1011066
http://e-docs.bea.com/wls/docs81/programming/classloading.html#1083313
http://dev2dev.bea.com/articles/musser.jsp

Posted by 1010
98..Etc/Etc...2008. 8. 7. 15:20
반응형

<ul>, <li> 를 사용해서 좌측메뉴 만들기


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Statz">
<META NAME="Keywords" CONTENT="CSS연습,웹표준2.0,기본메뉴 만들기">
<META NAME="Description" CONTENT="">
<style type="text/css">
#menu{
 list-style: none;
 padding-left: 10px;
 margin: 0;
 font-size: 12px;
 /* background-color: #EFEFEF */
}
#menu li{
 background: url(./images/arrow_01.gif) no-repeat 0 50%;
 padding-left: 17px; /* 아이콘만큼 떼고 글자위치*/
}
</style>
</HEAD>

<BODY>
<ul id="menu">
<li>회사소개</li>
<li>연혁/조직도</li>
<li>인증현황</li>
<li>찾아오시는 길</li>
</ul>
</BODY>
</HTML>

Posted by 1010
98..Etc/Etc...2008. 8. 7. 15:15
반응형

JSP Tips http://www.okjsp.pe.kr/seq/77154


웹표준 준수사항 몇가지

조건 :  HTML 4.01 Transitional

1) 자바스크립트 지시자나 스타일시트 지시자에 타입정보가 꼭 필요하다.
<script language="JavaScript" type="text/javascript">
<style type="text/css">

2) img,  map 태그등에 모두 alt 속성이 필요하다.

3) td는 background 속성을 지원하지 않으므로 스타일 시트형태로 표현한다.
<td style="background-image:url('/img/img.gif');"></td>

4) table은 height 속성을 지원하지 않는다.
<table height="100%"> <-- 에러

5) tr은 colspan, height 속성을 지원하지 않는다.
<tr height="30" colspan="2"> <-- 에러

6) body태그는 2개이상있으면 안된다.
body에 onLoad때문이라면 body태그대신
<script language="JavaScript" type="text/javascript">
window.onload = funcName(arg1,arg2);
</script>
형식으로 한다.

7) 스타일시트 font-family 에 한글 parsing이 안되는 문제가 있다
font-family:돋움 의경우 font-family:Dotum 으로 변경한다.

8) 스타일시트 선언은 <head> 안에서 해줘야한다. <body> 안에서 선언하면 에러 -_-
<head>
<link href="./style.css" rel=stylesheet type='text/css'>
</head>

9) html 안에 bgcolor나 width,height값을 %단위로 속성 삽입시 코텐션빠지면 에러
<td height="1" colspan="2" bgcolor="#ffffff"></td>
<table width="100%">
위와같이 "" 또는 '' 로 감싸줘야한다.

10) form 태그가 table 안에 있으면 에러 table을 감싸고 있어야한다. table 안에 있으면 에러
<form>
<table><tr><td></td></tr></table>
</form>
또한 form태그안에는 name속성과 action 속성이 모두 존재해야한다.
<map 태그역시 table 바깥에 위치해야함

11) 이미지서브밋에 width, height, border 속성을 쓰면 에러.
<input type="image" src="images/button_search.gif" align="bottom">
위와같이 align 속성은 쓸수 있음

13) url 쿼리스트링의 경우 & 기호는 다음과같이 인코드해주어야한다.
& + amp; (html 에디터에서는 안보이네요 -_-)

& a m p ; (띄어쓰기 붙혀서..)
<a href="/dir/file.php?id=111& a m p ;pwd=222">xxxxxxxx</a>

14) img태그나 기타 태그 속성중에 align="absmiddle" 는 비표준 middle 로 수정

15) 스타일을 표현할때 width, height 값에 px 안붙이면 에러, 색상코드에 # 안붙이면 에러
style="width:10px;height:20px;#FFFFFF;"

16) hidden 태그경우 <table 안에 들어있으면 에러.. 즉 form 안에 table 밖에 위치
즉 form태그 안에 table태그 밖에 위치해야함

17) body태그에 leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" 부분 있으면 에러
style="margin:0px;" 형태로 바꿔준다.

18) 자바스크립트 변수에 html 닫힘태그 쓸때는 escape문자로 표현한다.
<a href='url'>url<\/a>

19) 플래쉬 삽입
<object type="application/x-shockwave-flash" data="<?=$IndexImg?>/index_main.swf" width="260" height="487">
    <param name="movie" value="<?=$IndexImg?>/index_main.swf">
    <param name="quality" value="high">
</object>
플래쉬 태그에 classid나 codebase를 쓰면 에러. 다만 js형태로 밖으로 빼놓으면 에러 못찾음 -_-;;

20) 주석에 + 기호달면 에러
<!-- ----------- + ---------------- -->
위의 형태 에러남..

21) DocType를 페이지 맨상단(html태그 밖)에 정의해야함
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

22) TEXT-DECORATION 의 스타일 표현형태
TEXT-DECORATION: none
TEXT-DECORATION: yes(x) -> TEXT-DECORATION: underline

Posted by 1010
98..Etc/Etc...2008. 8. 7. 15:14
반응형

1. window.status

window.status 코드가 인터넷 영역에서 실행되지 않습니다

function test() {

    window.status = 'Hi!';

}

단 로컬에서는 됩니다 즉 로컬에 저장된 html을 실행하면 window.status가 먹지만

인터넷에 있는 window.status는 실행되지 않네요

개인적으로 js 디버깅시 자주 사용하곤 했는데 아쉬운 부분입니다 ㅠ.ㅠ



2. <base>태그

HTML3.2 스펙에 따라 <base>태그는 반드시 <head></head>에 위치해야 합니다

그렇지 않으면 인식하지 않는다네요

예전엔 base태그를 간간히 썼지만 요즘은 frame 을 잘 사용하지 않아서인지 거의 사용하진 않죠



3. window.close()

window.close()시 나타나는 프롬프트를 회피하기 위해 window.opener 를 사용했었는데

더이상 아래 코드는 먹지 않고 창을 닫겠냐는 프롬프트가 뜨게 됩니다


window.opener=top;

window.close();

or

self.opener = self;
window.close();



4. _search

_search를 통해 검색창을 더이상 열지 못합니다

<a href="">Test Sidebar</a>




5. window.prompt()

디폴트로 block 됩니다


 



6. 제한되는 메쏘드들


execCommand

clipboardData.getData()

clipboardData.setData()

clipboardData.clearData()

클립보드 저장, 및 클립보드 데이터 가져오기등의 메쏘드들이 제한됩니다

해보니 보안경고창이 뜨더군요

MS에서는 clipboardData 객체 사용을 권고하지 않습니다



7. Modal 및 Modeless Dialog 크기가 변경!


 

한마디로 크기가 커집니다 -0- (짜증)

사이즈를 지정하면 content 크기를 의미합니다



8. 새창으로 뜰때 주소줄 보임

더이상 새창을 window.open 의 property 특성으로 조절할 수 없습니다

무조건 주소창이 나타납니다 아주~ 짜증 이빠십니다 ㅠ.ㅠ


 



9. window.resizeTo()

window.resiztTo 함수는 에러가 발생하거나 차단됩니다

function changeSize(){
    window.resizeTo(1024,768);
}

*사진 보기 팝업 창등 팝업창 내에서의 resizeTo() 함수는 정상적으로 실행됩니다.

(ex: <script>resizeTo(550,600);</script>)

 

그리고 페이지에서 iframe을 이용해 게시판 삽입등을 했을 경우 가끔 resizeTo함수로 iframe의 세로 높이를

조절하는 소스들을 본적이 있는데, 이때는 스타일로 iframe의 id.style.height로 조절하면 됩니다.


10. HTTP, HTTPS 혼합된 인터넷 영역에서 보안 경고가 발생합니다



11. SELECT가 windowed element로 개선

이전까지는 SELECT Element가 Windowsed Element였기 때문에 다른 element와 달리 별도의 MSHTML pane에서 rendering되었습니다

즉 SELECT가 그림과 같이 layer들을 다 먹어버렸었는데, 이젠 그렇지 않다는거죠

요거 하나는 좋아졌네요 -0-



12. 스크립트 차단

6.0 까지는 아래 코드가 실행되어 보안에 매우 취약했었습니다 (XSS)

 <img src="javascrip t:alert('a')">

7.0 부터는 아예 실해이 안되네요

FF 2.0 도 실행이 안되는군요 ^^



13. CSS

100%는 아니지만 CSS2.1 표준 구현 강화가 되었습니다

또한 <a> 태그에서만 가능했던 :hover나 background-attachment: 가 모든 태그에서 사용가능해 졌습니다



11월 18일에 한글판 IE7이 배포되며 3주후에는 자동 업데이트를 통해 IE7가 설치가 된다고 합니다

슬슬 준비하셔야 할겁니다


위에 열거한 사항들은 대부분 인터넷 옵션의 "보안"항목에서 수정할 수 있지만

중요한점은 이 사항들이 기본빵이라는점이겠죠 -0-


이밖에도 알려진 버그로는 "신뢰할수 있는 사이트"에 추가를 했는데도, 보안창이 뜬다든가,

flash에서 _blank로 새창을 열면 자기 자신창에서 열린다든가 하는 버그가 있다고 합니다


내년에 왼도 비스타가 나오면 한번더 보안관련된 사항들이 많이 나올듯 합니다.

Posted by 1010
98..Etc/Etc...2008. 8. 7. 15:12
반응형

사용방법 예)

<tr>

   <td>아이디 : <input type=text name=name tabindex=1></td>

</tr>

<tr>

   <td>패스워드 : <input type=password name=passwd tabindex=2></td>

</tr>


<script language="javascript">

//입력한 tabIndex로 객체리턴
function GetObjectByTabIndex(index)
{
for (i = 0; i < document.forms[0].length; i++)
{
  tmp = document.forms[0].elements[i];
  if (tmp.tabIndex == index)
  {
   return tmp;
  }
}
return null;
}



//엔터키 입력시 다음탭인덱스로 포커스이동

function KeyDownFocus(obj)
{  
if (event.keyCode == 13) {      
  tmp = GetObjectByTabIndex(obj.tabIndex+1);    
  if (tmp == null) tmp = GetObjectByTabIndex(1);    
  if (tmp != null) tmp.focus();
}    
}  
</script>



accesskey와 tabindex 사용하기

#1 accesskey : alt + value 기능 (단축키)

아마 각종 메신져 쓰는 사람들에게 제일 익숙한 기능중의 하나가 Alt - S 일거라고 생각합니다. 

Send 기능을 하는 키조합인데요, IE에서는 accesskey="s" 라고 하면 되거든요. 

즉 글쓰기나 코멘트의 submit 버튼에다가 다음과 같이만 하면 됩니다

ex) accesskey = "s" 또는 accesskey = "d"

<input type=submit value="글을 올립니다" accesskey="s"> 

<input type="text" name="txtName" value="" accesskey="d"> 

 

 

#2 tabindex : TAB 키를 통하여 이동순서 지정

 

tabindex  는 html code 에서 폼 요소를 이동할때 키보드 탭(TAB)을 눌렀을때의 이동 순서를 정하는 사용되는 속성으로 인터넷 익스플로서 4이상에서 사용된다.

사용할 수 있는 html tag는 예로 a, area, button, input, object, select, textarea.. etc

 

tabindex 값은 1부터 시작 -1 일경우 포커스가 위치하지 않음


ex) tablindex = "1"

<input tabindex="1" name="_a" type="text" size="5" style="" value="0">

<input tabindex="3" name="_c" type="text" size="5" style="" value="0">

<input tabindex="2" name="_b" type="text" size="5" style="" value="0">

 : _a에서 탭키를 눌렀을때 다음 tabindex로 이동. 그러므로 _b로 이동한다.

 


onkeyup


http://www.mensakorea.org/bbs/data/quiz/PlanarityExperimental.swf

Posted by 1010