'2008/07'에 해당되는 글 222건

  1. 2008/07/30 인터넷사용시 전화기 않되는 현상 해결방법
  2. 2008/07/26 웹개발시 도움이 되는 도구들
  3. 2008/07/26 Microsoft Office Binary (doc, xls, ppt) File Formats
  4. 2008/07/26 프로그래밍 라이브러리 및 도구
  5. 2008/07/26 KicoEditor ( 아이콘제작 프로그램 )
  6. 2008/07/26 액티브X 넘어라
  7. 2008/07/26 ANT를 이용하여 FTP와 Telnet 작업 진행하기
  8. 2008/07/26 Ruby on Rails를 아십니까?
  9. 2008/07/26 Internet Explorer 에서 Javascript 코드 디버깅 쉽게 하기
  10. 2008/07/26 Flex 3 DataGrid Footers
  11. 2008/07/26 Image Gallery Component - ImageRail
  12. 2008/07/26 순수자바기반 무료레포팅툴 iReport
  13. 2008/07/26 JDK 7 Project
  14. 2008/07/26 Ajax 마스터하기, Part 1:Ajax 소개
  15. 2008/07/25 휴지통복구프로그램
  16. 2008/07/25 개발시 유용한 글 모음
  17. 2008/07/25 꼭 봐야하는 것들...
  18. 2008/07/25 MS Window에서 CVS(2.0.58d)설치후 eclipse와 연동하기
  19. 2008/07/25 JSTL 기초, Part 2: core 분석 (한글)
  20. 2008/07/25 JSTL 기초, Part 1: Expression Language (한글)
  21. 2008/07/25 prototype.js를 위한 개발자 노트
  22. 2008/07/25 Prototype.js를 제대로 사용하는 방법
  23. 2008/07/25 빠른 시간내 Prototype을 사용하기 위한 가이드 문서
  24. 2008/07/25 <JDBC 연결을 위한 DB서버 정보 세팅>
  25. 2008/07/25 Hibernate 첫 번째 예제 - 튜토리얼
  26. 2008/07/24 Mozilla Developer Center contents
  27. 2008/07/24 자바로 썸네일 빈즈를
  28. 2008/07/24 IWebMvc Milestone 3 releasedDomainDemoProject
  29. 2008/07/24 IWebMvc 설치해보기DomainDemoProject
  30. 2008/07/24 mstsc에서 ctrl+alt+del키 보내기
 벽 단자까지 오는 랜선 내부에 있는 8가닦의 선중 전화로 사용되는 선까지
공유기에 연결되어 발생하는 문제입니다.

전화와 인터넷은 하나의 단자에서 사용하시려면 병행하여 사용하실 방의 벽 단자에서 나온  
인터넷 라인과 공유기의 WAN 사이에 연결된 랜선을 개조하는 것 입니다.

* 벽 단자와 공유기WAN 사이의 랜선 피복을 살짝 벗겨주시면 8가닦의 각기 다른 선이
있습니다.
이중에 '흰갈색, 갈색, 흰파랑, 파랑'의 네개의 선을 잘라주시면 됩니다.

다시말해 벽단자와 공유기WAN을 연결한 랜선에서 '흰주황, 주황, 흰녹색, 녹색'의 네개의
선은 인터넷을 위한 선이므로 두시고  전화와 예비로 사용하는 '흰갈색, 갈색, 흰파랑,
파랑'의 네개의 선을 잘라주시면 됩니다.

Posted by WebProgrammer 1010
98..Etc/Etc...2008/07/26 17:20

브라우저에 붙여서 웹 개발시 도움이 될만한 툴이 다음처럼 몇가지 있습니다.

# Explorer용
1. IE Developer Toolbar
2. IE HTTP Analyzer

# Firefox용
3. Firebug
4. Web Developer Extension

1. IE Developer Toolbar
마이크로 소프트에서 배포하는 툴바입니다. beta2의 경우 툴바에 붙었는데.. 어찌된일인지.. beta3에는 툴바에 붙지 않네요.. 아무래도. 우리나라의 경우 많은 개발자들이 explorer를 기준으로 개발을 하다보니.. 이것저것 기능 설명을 해드리면 좋겠지만. 한번 써보세요.. 헉. 하실껍니다.
저는 주로 브라우저 resize와 color picker, outline및 DOM explorer기능을 정말 많이 사용합니다.

2. IE HTTP Analyzer
상용 소프트웨어입니다.

3. Firebug
웹 페이지 디버그및 CSS, HTML, JavaScript 모니터링을 위해 사용한다고 하네요.

4. Web Developer Extension
IE Developer Toolbar와 비슷한 기능을 담당하는 것 같습니다. 화면 보시고.. 일단 한번 사용해보세요.. ^^

출처 : Tong - BlueSky_08님의 개발업무통

Posted by WebProgrammer 1010
98..Etc/Etc...2008/07/26 17:17

Microsoft Office Binary (doc, xls, ppt) File Formats

Published: February 15, 2008 | Updated: February 15, 2008

The documents listed below are covered by the Microsoft Open Specification Promise.

On This Page
Microsoft Word Microsoft Word
Microsoft PowerPoint Microsoft PowerPoint
Microsoft Excel Microsoft Excel
Office Drawing Office Drawing
Supporting Technologies Supporting Technologies

Microsoft Word

Word 97-2007 Binary File Format (.doc) Specification PDF | XPS

Microsoft PowerPoint

PowerPoint 97-2007 Binary File Format (.ppt) Specification PDF | XPS

Microsoft Excel

Excel 97-2007 Binary File Format (.xls) Specification PDF | XPS

Excel 2007 Binary File Format (.xlsb) Specification PDF | XPS

Office Drawing

Office Drawing 97-2007 Binary Format Specification PDF | XPS

Supporting Technologies

See Supporting Technologies


출처 : Tong - BlueSky_08님의 개발업무통

Posted by WebProgrammer 1010
98..Etc/Etc...2008/07/26 17:15

출처 : Tong - BlueSky_08님의 개발업무통

Posted by WebProgrammer 1010
98..Etc/Etc...2008/07/26 17:14
2008.03.01 version 1.0.1
    ---------------------------------------------------------------------------------------
    Added Res format.
    When You work Resource File, After modify -  doing "Update Area" in Manager Menu.
    And do Save Resource.
    Added Capture Function.

    2008.03.21 version 1.0.2
    ---------------------------------------------------------------------------------------
    KicoEditor is Freeware, by Romeo.
    Added Supporting ICL (New Execute, Portable Execute) Format.
    Added Supporting PNG Format.
    KicoEditor Icon created by KicoEditor.(C:\Program Files\KicoEditor\05 배포\Binary\Test)
    Keditor Icon Group created by KicoEditor.
    Added Extra - KImageResizer 1.0  - PNG(Testing),
                                                            JPG, BMP, GIF(No Tested)






출처 : Tong - BlueSky_08님의 개발업무통

Posted by WebProgrammer 1010
98..Etc/Etc...2008/07/26 17:13
파이어폭스 사용자가 늘어나면서 한국 모질라 커뮤니티에서는 사이트 접근성에 대한 논란을 심심치 않게 볼 수 있다. 대부분 XX 사이트에서 XX 기능이 안되더라”, “인터넷 뱅킹을 할 수 없다” 등이었다. 이는 해당 웹 페이지들이 액티브X 컨트롤을 사용하기 때문이다.

특히 국내는 액티브X 컨트롤을 사용하는 웹 페이지가 상당히 많기 때문에 파이어폭스와 같은 비 인터넷 익스플로러 계열의 웹 브라우저에서는 해당 페이지의 접근성이 현저하게 떨어지기 마련이다. 여기서는 액티브 X에 대응하기 위한 모질라 진영 대안과 XPCOM 플러그인을 살펴보고, 간단한 예제를 통해 웹 사이트 접근성을 높일 수 있는 방안을 모색해 본다.

1995년 넷스케이프는 웹 브라우저와 외부 프로그램과의 통신에 있어 좀 더 다이내믹한 인터넷 경험을 제공하기 위해 플러그인이라는 기술을 선보였다. 그러나 MS는 인터넷 익스플로러(이하 IE)를 시장에 도입하면서 이에 대응하는 액티브X 기술을 발표하게 된다.

액티브X는 윈도우의 COM/DCOM 환경에서 인터넷을 자유자재로 사용할 수 있는 기술 플랫폼으로 IE에 임베딩되어 실행 가능하다. 이후 IE와 윈도우가 브라우저와 운영체제를 독점하게 됨에 따라 윈도우 환경에서는 자바 애플릿이나 넷스케이프 플러그인 기술을 대체하게 되었다

IE가 웹 브라우저 시장 독점체제를 구축하는 동안 국내에서는 세계에서도 유래를 찾아 볼 수 없을 정도로 급속한 인터넷 환경을 갖추게 되었다. 이러한 성장 이면에는 몇 가지 문제점이 발견됐는데 바로 특정 운영체제와 플랫폼에 종속성이 심화된 것이다.

웹 페이지를 만들 때도 현재의 W3C에서 발표한 웹 표준 스펙을 이용하지 않고, 당시 넷스케이프와 IE에서 경쟁적으로 내놓은 비표준 태그와 MS 표준을 기반으로 한 문서 객체(Document Object Model)만 사용하려는 행태가 현재에도 고쳐지지 않고 있다(IE도 최소한의 W3C 표준을 지키고 있어 표준을 따르기만 하면 쉽게 모든 브라우저를 지원하게 된다).

또한, 플러그인 사용에 있어 액티브X 종속성이 더 심화되어 비 윈도우, 비 IE 환경에서는 사용이 거의 불가능하다는 것이다.

액티브X 종속성은 외국에 비해 국내의 경우 매우 심각하다. 액티브X 컨트롤을 배포할 때 사용하는 코드사인(Codesign) 인증서의 경우, 베리사인으로부터 국내에 공급되는 양은 거의 800여 개가 된다. 인증서 하나를 하나의 회사에서 사용한다고 본다면 적어도 800개의 업체에서 800개의 액티브X 컨트롤이 배포되고 있다는 것을 의미한다. 이는 세계에서 최대 규모이며 적어도 코드사인 인증서의 경우 세계 최대 시장이라고 들었다. 필자도 윈도우에 최소로 액티브X를 설치하는 데도 30여 개 정도가 설치되어 있다.

왜 액티브X가 문제인가?
액티브X를 국내에서 급속도로 쓸 수밖에 없었던 이유는 몇 가지 있다. 첫 번째는 초고속 인터넷의 급속한 확대이다. 플러그인이 구동되기 위해서는 별도의 프로그램을 다운받아 설치해야 하는데 크기가 큰 것은 모뎀 수준의 연결 속도에서는 다운받을 때까지 기다릴 수 없다. 이런 이유로 아직 외국에서는 액티브X 같은 플러그인 기술을 사용하는 웹사이트가 거의 드물다. 플래시와 윈도우 미디어, 리얼플레이어 등과 어도비 아크로뱃 리더처럼 설치시 제공하는 플러그인 정도가 대부분이다.

이에 반해 국내는 로그인, 채팅, 파일 첨부, 광고, 카드 결제, 인터넷 뱅킹, 사이버 트레이딩, 게임, 심지어 정부 민원 업무까지 그야말로 쓰이지 않는 곳이 거의 없을 지경이다. 초고속망 국가로 빨리 진입한 것이 플러그인을 부담 없이 사용하게 한 원인이다.

두 번째는 웹과 애플리케이션의 구별이 모호하다는 것이다. 웹은 정보의 자유로운 공유라는 측면에서 발전되어 왔다. 하지만 국내에서는 웹을 애플리케이션이 하는 기능의 연장선상에서 바라보고 있으며, 그에 따라 부가 기능들이 계속적으로 필요로 하게 된 것이다. 소프트웨어의 모든 기능을 웹이 할 수 있다는 생각에 여러 기능들이 덕지덕지 붙어 결국 웹도 애플리케이션도 아닌 어중간한 웹사이트들이 만들어진 것이다.

세 번째는 국가 차원에서 플러그인 기술 장려를 들 수 있다. 국내에서 플러그인 기술이 가장 먼저 도입된 것도 인터넷 뱅킹과 공인 인증 기술에 있다. 1999년 당시 128비트 암호화가 탑재된 웹 브라우저가 미국 밖으로 수출이 안 되고 있는 사이, 우리나라에서는 128비트 암호화가 가능한 SEED라는 알고리즘을 개발했고, 이를 국가 인증 기술로 탑재하는 과정에서 플러그인 기술을 사용하게 된 것이다. 당시에는 넷스케이프와 IE 양쪽에 모두 포팅 했으나 브라우저 점유율 확대에 따라 지금은 액티브X만 남게 되었다.

플러그인은 자신의 PC에 다른 프로그램을 설치하는 것으로 보안 때문이라도 신중하게 설치 여부를 검토해야 한다. 하지만 인터넷 뱅킹, 사이버 트레이딩, 공인 인증 등 액티브X 프로그램을 보안 경고창의 ‘예’ 버튼 한번으로 설치했던 경험때문에 일반인들에게 거부감 없이 받아들여지고 있다(최근 IE의 보안 이슈와 악성 플러그인이 범람함에 따라 좀 더 신중하게 액티브X를 설치하는 사람들이 늘어나고 있기는 하지만).

대안 없는 무분별한 액티브X 사용은 그것이 자랑할만한 독자 기술이었다 해도 다시 특정 기술 플랫폼 종속적이 될 수밖에 없다는 실례를 국내의 공인 인증 기술에서 찾아볼 수 있다. 99%가 사용하고 있으니 그것만 지원하는 것이 효율적이라는 생각에는 종속성이 커짐에 따라 증대하는 관성과 더딘 기술의 진보, 그리고 상상할 수 없는 비용의 증가를 예고하는 것이다.

얼마 전 윈도우 XP 서비스팩 2 출시에 따른 액티브X 설치 방법의 변경으로 인해 생긴 문제 때문에 국내만 서비스팩 2 출시를 몇달 간 연기하고서 모든 웹사이트들이 이 문제에 매달렸던 것만 봐도 알 수 있다. 그래서 운영체제나 디바이스 플랫폼에 독립적인 데다 오픈소스이기도 한 모질라 플랫폼에서 제공하는 대안 기술을 주목해야 하는 것이다.

대안 1. 액티브X 플러그인 기술
많은 사람들이 파이어폭스가 액티브X를 지원하면 많은 문제가 해결되는데 왜 그렇게 하지 않는지 의문을 가진다. 액티브X는 윈도우 종속적인 기술이고 모질라는 크로스 플랫폼을 지향하는 특성상 그렇게 할 수가 없다. 그러나 같은 기능을 두 가지로 개발하는 비용을 들이는데 비해 우선 사용자 층이 두터운 윈도우 플랫폼에서 액티브X를 사용할 수 있게 한다면 또한 윈도우 개발자들도 모질라 플랫폼을 쉽게 가져다 쓸 수 있다면 서로를 이해하고 접근 하는데 더 용이하지 않을까?

그래서 시작된 것이 바로 모질라 액티브X 프로젝트(
http://www.iol.ie/~locka/mozilla/mozilla.htm)이다. 이 프로젝트는 성격상 모질라의 공식 프로젝트는 아니지만 자원봉사로 꾸준히 업데이트되고 있다.

이 프로젝트의 결과물은 크게 두 가지 부분으로 나눠진다. 그 첫 번째는 액티브X 플러그인(Plug-in For ActiveX controls) 기술이다. 이것은 기존의 모질라 플러그인 기술을 사용하여 윈도우에 설치된 액티브X를 감지하고 실행해 주는 플러그인이다. 즉, 파이어폭스에서 액티브X를 실행할 수 있게 해준다.

이를 위해서는 먼저 IE와 파이어폭스가 플러그인을 인식하는 방법을 맞출 필요가 있다. 똑같이 표준 태그인 <object>를 사용하고 있지만 그 속성을 인식할 때 IE는 classid="CLSID:XXXX...", 파이어폭스는 type="application/x-oleobject" 등과 같은 방법을 사용한다.

액티브X 플러그인은 일단 classid를 인식하게 해준다. 그리고 clsid에 해당하는 액티브X를 호스팅하여 실행한다. 만약 비표준 자바스크립트나 VBScript로 액티브X를 제어하면 제대로 동작하지 않겠지만, 그렇지 않은 경우 대부분 잘 동작한다.

<화면 1> 파이어폭스에서 윈도우 미디어 플레이어 액티브X가 실행되는 모습

이 프로그램에 모든 액티브X가 실행되는 것은 아니다. 만약 실행하고 싶은 액티브X가 있으면 파이어폭스 디렉토리 내에 activex.js 파일에 클래스 ID를 추가해줘야 한다.

pref("general.useragent.vendorComment", "ax");
pref("security.xpconnect.activex.global.hosting_flags", 9);
pref("security.classID.allowByDefault", false);
pref("capability.policy.default.ClassID.CID6BF52A52-394A-11D3-B153-00C04F79FAA6", "AllAccess");
pref("capability.policy.default.ClassID.CID22D6F312-B0F6-11D0-94AB-0080C74C7E95", "AllAccess");

이렇게 하는 이유는 보안상의 문제로 사용자가 실행할 액티브X를 결정할 수 있도록 하기 위해서이다. 아직 테스트 프로젝트이므로 편리한 인터페이스가 필요하다는 생각이 든다.

두 번째는 플러그인 액티브X(ActiveX hosting Plugin in IE)이다. 이 액티브X 컨트롤은 IE에서 넷스케이프 플러그인을 실행할 수 있도록 해 준다. MS가 IE 5.5 SP2부터 넷스케이프 플러그인에 대한 지원을 없애 버렸기 때문에 이 기능을 이용하면 넷스케이프 플러그인 개발자에게는 유용한 방식이다.

만약 넷스케이프 플러그인 만으로 구현 가능한 기술이라면, 액티브X 컨트롤을 중복해서 만들지 않더라도 모든 브라우저에서도 지원할 수 있다는 것을 의미한다. 이 방법을 테스트 해볼 수 있는 예제는
lxr.mozilla.org/seamonkey/ 에서 얻을 수 있다.

이렇듯 액티브X와 모질라 플랫폼 연결 고리가 가능하게 되자 이 프로젝트에서는 모질라 액티브X 컨트롤(
http://www.iol.ie/~locka/mozilla/control.htm)이라는 것을 구현하고 있다. 윈도우 개발자들은 IWebBrowser 같은 객체를 통해 IE를 간단하게 임베딩하여 프로그램에 사용할 수 있다.

<화면 2> 비주얼 베이직으로 모질라를 임베딩한 예제 실행 화면

이 모질라 액티브X도 마찬가지로 VC++, VB, 델파이, 닷넷 등에서 모질라를 간단하게 임베딩하여 코드를 사용할 수 있다. 간단한 예제를 만들어 실행하는 방법과 소스코드는 이 웹 페이지나 모질라 액티브X 소스코드 트리(lxr.mozilla.org/seamonkey/)를 참고하면 된다.

대안 2. XPCOM 플러그인 기술
액티브X와 모질라를 이어주는 플러그인 기술은 그 자체로서 크로스 플랫폼을 지원하지 않기 때문에 매우 불안정한 대안이라고 밖에 볼 수 없다. 모질라가 가지고 있는 근본적인 대안은 XPCOM(Cross-Platform Component Object Model)을 이용하여 모든 플랫폼을 동시에 지원하면서 XUL, 자바스크립트, CSS 등을 통해 리치 인터넷 애플리케이션(Rich Internet Application)을 만드는 기술의 확대를 꾀하는 것이다. 예전 플러그인이 수행했던 외부와의 통신 기능도 XML-RPC, SOAP, XMLHTTP 등의 기술로서 이미 해결되었기 때문에 확장 기능 등에서 활용도는 매우 높아지고 있다.

그러나 그밖에 외부 기술을 도입하고자 한다면 모질라 내부에 구현해야 한다. XPCOM 플러그인 기술은 XPIDL로 정의한 인터페이스를 구현한 플러그인 API와 이를 호출하는 XUL 및 자바스크립트로 구성되어 자유자재로 구현 가능하다. 각 API의 경우 각 운영체제별로 고려하고 컴파일하는 수고를 제외하고는 크로스 플랫폼에서 훌륭하게 돌아갈 수 있다. 글의 뒤 부분에서 XPCOM 플러그인을 활용한 구현 방법과 사례가 자세히 다뤄질 것이다.

대안 3. 새로운 표준 활동 WHATWG
그간 웹 표준화 기구인 W3C(
www.w3.org)를 통해 수많은 웹 표준들이 제정됐음에도 불구하고 플러그인 기술 즉 웹 애플리케이션 기술에 대한 표준은 만들어지지 못했다. 표준은 상호운용성과 개방성 측면에서 매우 중요하며, 공정한 경쟁을 유도할 수 있는 제도적 장치이다. 이러한 필요성에 따라 W3C는 2004년 4월 웹 애플리케이션에 대한 워크샵을 개최하고 이에 대한 의견을 나누었다.

이 워크샵에서 가장 큰 쟁점은 MS와 오페라/모질라 재단 연합이 발표한 웹 애플리케이션 방향에 대한 것이다. MS는 XAML/아발론 등으로 대별되는 롱혼(Longhorn) 전략과 자사가 제안한 CSS3에 대한 이야기만 한 반면, 오페라/모질라 연합은 기존의 웹 표준 기술을 활용한 중간 단계의 웹 애플리케이션 표준을 빨리 만들자는 제안을 했다.

이에 대해 많은 참석자들은 부정적인 반응을 나타냈다. 이런 문제를 다룰 워킹그룹이 아직 존재하지 않는다는 이유를 달았지만 이미 W3C는 데스크탑 환경에서 웹 표준 문제보다는 오히려 모바일 같은 비 PC 디바이스에서 상호운용성에 관심을 가진 사람들이 많았으며 그곳에 초점을 두고 있었기 때문이다.

이에 2004년 6월 오페라와 모질라의 이안 힉슨과 데이비드 바론, 애플의 데이비드 하야트 등이 주축이 되어 W3C와 별도로 표준안을 만들기 위한 웹 애플리케이션 기술 워킹그룹(Web Hypertext Application Techology Working Group,
http://whatwg.org)을 조직하고 활동에 들어갔다. 이 워킹그룹은 W3C 형식에 준하는 표준안 작업을 한 후 향후 IETF나 W3C에 기초안(draft)를 제안할 예정이다.

이 워킹그룹이 작업 중인 표준안은 크게 세 가지 영역으로 나눠져 있다. 그 중 가장 관심을 끄는 웹 애플리케이션 1.0은 애플리케이션 개발을 하기 위해 기존의 HTML을 확장하는 것이다. 흔히 HTML5라고 불리는 이 표준안은 XUL의 경험을 기초로 복잡한 XML을 사용하기보다는 기존의 HTML을 확장하여 UI를 만드는 것을 목표로 하는 것으로 기존의 파이어폭스 확장 기능보다도 더 쉽게 웹 애플리케이션을 만드는 방법을 제안할 것이다.

예를 들어 메뉴바를 만들기 위해서 다음과 같이 우리에게 익숙한 HTML 태그와 그 확장 태그를 쓰겠다는 것이다.

<menubar>
 <li>
  <a href="#file">File</a>
  <menu id="file">
   <li><button type="button" onclick="fnew()">New...</button></li>
   <li><button type="button" onclick="fopen()">Open...</button></li>
   <li><button type="button" onclick="fsave()" id="save">Save</button></li>
   <li><button type="button" onclick="fsaveas()">Save as...</button></li>
  </menu>
 </li>
</menubar>

이 표준안은 XHTML, CSS 같은 기존 표준안과는 연동되지만, XUL/XAML과는 독립적으로 구성하겠다는 뜻을 가지고 있어 웹 표준으로서 기술을 주도하겠다는 생각을 가지고 있다. 웹 폼 2.0(Web Forms 2.0)은 HTML 4.01의 폼 부분의 기능을 확장하는 작업으로 웹 애플리케이션에서 사용하는 데이터 입력 및 출력 그리고 추가 등을 위해 기초적으로 필요한 작업이다. 따라서 이 표준안 작업은 꽤 많이 진척되어 2004년 연말까지 거의 완성되었다.

W3C에는 이와 유사한, IBM이 제안하여 표준안이 된 XForm이 있다. XForm은 기계들 간의 데이터 교환 표준으로 삼고, WebForm은 사용자 인터페이스에 사용하게 하여 애플리케이션 개발자들이 이해하기 쉽도록 하자는 것이 이 표준안의 취지이다. 이 표준안이 W3C나 IETF에 받아들여진다면 비 MS 진영의 브라우저 애플리케이션 개발에 획기적인 플랫폼이 만들어질 것으로 예상된다.

<그림 1> XForm과 WebForm의 관계도

마지막으로 웹 컨트롤 1.0(Web Controls 1.0)은 새로운 WebForm과 UI에 대한 컨트롤과 외양 표시가 가능하도록 DOM과 CSS의 기존 표준을 확장하는 작업이다. 이 부분은 기존의 DOM/CSS의 객체 사용 방법이 어느 정도 성숙되어 있기 때문에 제일 마지막에 할 작업이 될 것이다.

표준은 표준으로만 존재하는 것이 아니라 구현됐을 때 빛을 발하게 된다. 모질라와 오페라, 애플이 만드는 새로운 표준은 웹 개방성과 상호운용성 문제를 해결할 수 있는 중요한 시발점이 될 것이다. 표준이 되더라도 과연 MS가 이를 수용할지 여부는 알 수 없지만 검증된 개발 방법론을 기초로 대안을 제시할 수 있다고 생각한다.

액티브X 넘어서기, XPCOM 구현
현재 모든 플랫폼에서 모질라 계열 웹 브라우저와 오페라, 매킨토시의 사파리(Safari) 등은 공통적으로 XPCOM 플러그인을 지원한다. 이 연합은 MS를 제외시켜 IE는 게코 플러그인이 지원하지 않는 유일한 웹 브라우저이다(인터넷 뱅킹을 할 때 <화면 3>과 같은 오류 메시지가 뜨는 것도 이 때문이다. 재미있는 것은 매킨토시용 익스플로러는 XPCOM 플러그인을 지원한다는 사실이다).

<화면 3> 파이어폭스로 은행 인터넷 뱅킹 접속시 출력 화면

넷스케이프 플러그인 기반, 라이브커넥트  
모질라 진영에서는 넷스케이프 4.x 시절부터 엑티브X에 대한 실질적인 대안을 준비해 왔다. 바로 라이브커넥트(LiveConnect)로, 웹 브라우저가 HTML에 종속된 한 가지 기술로만 개발되던 것에서 더 다양한 기술을 웹에 접목시키기 위해 도입된 기술이다. 내장된 JVM에서 자바 애플릿을 수행하고 NPAPI 1.1을 이용해 플러그인을 연동할 수 있는 것이 특징이다.

현재의 파이어폭스 XPCOM 아키텍처에는 이 라이브커넥트의 개념이 고스란히 담겨 있다(기존에 개발한 플러그인은 더 이상 4.x 시절의 라이브커넥트를 지원하지 않는다. 이전의 플러그인을 지원하려면 프로그램을 일부 수정해야 한다). 모든 플러그인은 XPConnect를 통해 자바스크립트에서 접근할 수 있으며 모질라에서 제공하는 게코 SDK의 NPAPI 2.0으로 모든 플랫폼에서 구현할 수 있다.

자바에 대한 의존성도 완전히 사라졌다. 4.x 시절 자바 1.1의 보안 모델에 전적으로 의존했지만 현재의 파이어폭스는 자체적인 보안 매니저가 있으며 자바도 플러그인으로 처리하여 플랫폼별로 최적의 JVM을 OJI(Open Java Interface)를 통해 접근할 수 있게 됐다.

국내 웹사이트의 현실을 볼 때 액티브X를 지원하지 않는 파이어폭스를 메인 웹 브라우저로 사용한다는 것은 여간 힘든 일이 아니다. 물론 IE 뷰 확장이나, 액티브X 호스팅 플러그인이 있지만 어디까지나 윈도우에서 파이어폭스를 사용하는 경우에 한정돼 있으며 근본적인 해결책이라 보기도 힘들다.

이런 점에서 앞서 언급한 넷스케이프의 다중 플랫폼 플러그인 지원 정책은 주목할 만하다. 국내의 경우 국가적으로 비 윈도우 운영체제에서의 웹 사이트 접근성을 높이려는 방안 등이 모색되고 있어 더욱 의미가 있다. 물론 액티브X가 이미 수많은 웹 사이트에 만연(?)해 있어, 일부 중복 개발의 우려가 있는 것도 사실이다. 그러나 플러그인 하나를 개발해 다양한 플랫폼에서 (IE를 제외한) 다양한 웹 브라우저를 지원할 수 있다는 점은 이런 우려를 불식시키기에 충분해 보인다.

파이어폭스의 XPCOM 플러그인은 XPCOM의 컴포넌트로 분류돼 플랫폼에 독립적인 공통 인터페이스를 제공한다. 넷스케이프 게코 플러그인 SDK를 이용해 개발하는데, SDK에 포함된 XPIDL로 플러그인에 접근하기 위한 타입 라이브러리를 만들고, 자바스크립트를 통해 스크립터블(scriptable : 호스트 오브젝트를 IDL을 통해 스크립트처럼 사용함을 말함)하게 접근할 수 있는 인터페이스를 만드는 것이다.

플러그인의 내부는 플러그인 측면(Plug-in side) API, 브라우저 측면(Browser side) API(동작 원리에서 설명), XPIDL에서 선언한 인터페이스들을 구현함으로써 완성된다. 이 때 한번 작성된 IDL(Interface Definition Language)과 플러그인은 플랫폼 독립적으로 유지, 보수할 수 있는 것이 특징이다(이 부분은 <그림 2>을 참조하면 이해가 쉽다). 빌드가 끝난 플러그인은 다음과 같이 각 플랫폼에 적절한 동적 라이브러리 형식을 취하게 된다.

◆ MS 윈도우 : Dynamic Link Library(.dll)
◆ 유닉스 : Share Object(.so 혹은 .dso)
◆ Mac OS : PPC Shared Library(.dylib)

이는 표준 인터페이스를 이용해 플랫폼 변화에 유연하게 대처할 수 있다는 장점이 있다. 플랫폼에 유연하다는 것 자체가 액티브 X에서는 불가능했던 개념으로, 플랫폼마다 최적의 네이티브 코드(native code)를 플러그인에 접목시켜 각 플랫폼의 특성에 맞게 작성할 수 있다. 그러나 각 플랫폼마다의 네이티브 코드를 고려해야 하고, 빌드를 따로 해야 하는 번거로움이 있다.

<그림 2> 넷스케이프 플러그인의 구조

플러그인 동작 원리
파이어폭스용 넷스케이프 플러그인은 기본적으로 다음 과정을 거쳐서 실행된다.

[1] MIME 타입에 해당하는 플러그인의 유무 검사
[2] 플러그인이 존재한다면 해당 플러그인을 메모리에 로드
[3] 플러그인 초기화
[4] 해당 플러그인의 인스턴스 생성

로딩된 플러그인 인스턴스는 다른 파이어폭스 브라우저 창에서 동시에 접속할 경우 인스턴스가 각각 생성되며 사용자가 해당 웹 페이지를 닫으면 소멸된다. 플러그인 오브젝트와 관련된 API는 플러그인 측면 API로 분류돼 브라우저가 콜백 함수처럼 호출한다. 브라우저 측면 API는 플러그인에서 호출하는 함수로, 메모리, 스트림, URL 제어 관련 함수들이 포함되며, 플러그인 측면 API처럼 플랫폼에 따라 적절하게 구현할 수 있다(양 측면 API 모두 사용자가 플랫폼의 특성을 고려하여 적절하게 구현할 수 있다). 모질라 웹 사이트(lxr.mozilla.org/)에 접속하면 다양한 플러그인 예제들을 볼 수 있다.

파이어폭스 플러그인 개발
그럼, 리눅스, 파이어폭스 환경에서 스크립터블하게 플러그인을 작성하는 예제를 본격적으로 살펴보자. 먼저 <리스트 1>과 같이 XPIDL을 정의한다.

 <리스트 1> XPIDL 정의

// 인터페이스 고유의 id를 할당하기 위해 uuidgen을 이용하여 생성된 uuid를 입력
[scriptable, uuid(bfcc113e-9a18-47ec-a441-5e1d6d05eeb9)]

// 부모 인터페이스 상속
interface nsIXecurePlugin : nsIParentClass {

// 변수 선언
attribute long val1;

// 함수 인터페이스 선언
void foo1();
void foo2();

};
%{C++
/* 생성될 헤더 파일에 포함시킬 요소를 C++ 형식으로 선언할 수 있다. */
%}

이 때 XPIDL 내에서 사용할 수 있는 데이터 타입과 플러그인 내부에서 매치되는 타입은 <표 1>과 같다.

<표 1> XPIDL 타입과 플러그인에서 사용되는 타입간 관계

wstring(플러그 인 타입 PRUnichar*에 해당하는) 타입은 UTF-16이며, 리눅스 glibc에서 사용하는 wchar* 타입은 UTF-32이므로 타입 사용에 있어 혼동하지 않기 바란다. 아울러 처리하게 될 문자들이 모두 ASCII로 이뤄지지 않는 이상 반드시 wstring을 선언해서 구현해야 한다. 이제 플러그인에서 include하는 헤더를 생성한다. -m header는 IDL에 대한 헤더를 출력하는 옵션으로 확장자가 .h로 생성된다.

xpidl -I /home/hkyang/gecko-sdk/xpcom/idl -m header nsIXecurePlugin.idl

생성된 헤더 파일의 내용은 다음과 같다. 함수의 첫 글자가 모두 대문자로 바뀐다는 사실에 유의하자. 각 함수에 대한 코멘트(comment)는 자동으로 생성된다. GetVal, SetVal는 선언한 long 타입의 attribute val 변수의 값을 설정하고 얻어올 수 있는 함수이다. attribute마다 한 쌍의 getter, setter 함수가 존재한다.

class NS_NO_VTABLE nsIXecurePlugin : public nsParentClass {

/* void foo1 (); */
NS_IMETHOD Foo1(void) = 0;
/* void foo2 (); */
NS_IMETHOD Foo2(void) = 0;

}

이 때 함수의 반환형은 NS_IMETHOD로 선언되며 플러그인 내부에서 NS_IMETHODIMP 타입으로 구현된다. NS_IMETHODIMP 타입은 플러그인 함수 호출에 대한 성공 여부, 실패 시 상태 값을 가진다. 자세한 내용은 SDK의 xpcom/nsError.h 파일을 참조하기 바란다. 함수 반환 값은 void로 선언하지 않은 이상 모든 경우에서 함수의 마지막 인자로 _retval 변수의 해당 타입에 해당하는 포인터로 선언된다. 이제 파이어폭스와 플러그인 사이의 인터페이스용 타입 라이브러리를 만들 차례다. -m typelib 옵션을 통해 생성하며 확장자가 .xpt로 생성된다.

xpidl -I /home/hkyang/gecko-sdk/xpcom/idl
-m typelib nsIXecurePlugin.idl

이제 플러그인 측면 API를 구현한다. 예제 사이트에 보면 각 플랫폼 별로 구현돼 있어 수정할 일이 거의 없지만 디버깅할 일이 있을지도 모르니 한번 다뤄보는 것도 좋다.

 <리스트 2> 플러그인 측면 API 구현

// MIME 타입과 플러그인의 정보를 입력한다.
#define MIME_TYPES_HANDLED "application/xecure-plugin"
#define PLUGIN_NAME "XecureWeb Plugin for Mozilla"
#define MIME_TYPES_DESCRIPTION MIME_TYPES_HANDLED"::"PLUGIN_NAME
#define PLUGIN_VERSION "1.0.0.1"
#define PLUGIN_DESCRIPTION PLUGIN_NAME " (for UNIX)" "::"PLUGIN_VERSION

/* 사이트에서 이동하거나 브라우저 창을 닫을 때 객체를 소멸시키는 NPP_Destroy 함수 */
NPError NPP_Destroy (NPP instance, NPSavedData** save)
{
    if(instance == NULL)
        return NPERR_INVALID_INSTANCE_ERROR;

    NPError rv = NPERR_NO_ERROR;

    // 플러그인 객체의 포인터를 할당 받은 후 객체를 소멸시킨다.
    nsPluginInstanceBase * plugin = (nsPluginInstanceBase *)
    instance->pdata;
    if(plugin != NULL) {
        plugin->shut();
        NS_DestroyPluginInstance(plugin);
        plugin = NULL;
    }
    return rv;
}


이제 플러그인 헤더를 정의한다. 플러그인이 스크립터블하기 위해서는 nsIClassInfo 클래스를 상속받아 구현해야 한다. nsIClassInfo 클래스는 모질라 시큐리티 매니저(mozilla security manage)가 자바스크립트의 해당 플러그인에 접근하도록 허가한다. IDL 인터페이스에서 선언한 nsIXecurePlugin 클래스와 플러그인을 스크립터블하게 접근하기 위해 상속받은 nsClassInfoMixin 클래스를 다중 상속받아 nsScriptablePeer를 선언한다.

class nsClassInfoMixin : public nsIClassInfo
{

}

class nsScriptablePeer : public nsIXecurePlugin,
public nsClassInfoMixin
{

}

이제 앞에서 선언한 nsScriptablePeer 클래스의 내부를 구현한다. IDL 파일에서 선언한 Foo1(), Foo2() 인터페이스의 내용을 구현해주면 된다.

NS_IMETHODIMP nsScriptablePeer::Foo1()
{

return NS_OK; // 플러그인이 정상적으로 호출되었음을 나타낸다.
}

이제 테스트에 사용할 html 페이지를 만들어 보자. 액티브 X와 XPCOM 플러그인 모두를 지원하며, 여기서는 EMBED invokeURLs=false 태그를 사용했지만 OBJECT 태그를 사용할 것을 권장한다. EMBED invokeURLs=false 태그는 파이어폭스에서 지원하기는 하나, 표준이 아니며 어디까지나 호환성을 위해 지원하는 것이다.

 <리스트 3> 테스트 html 페이지 작성

<script>
// 자세하게 구분할 수도 있으나 편의상 넷스케이프, 오폐라로 구분한다.
if(navigator.appName == 'Netscape' || (navigator.userAgent).indexOf("Opera") > 0)
{
    document.write("<EMBED invokeURLs=false type='application/xecure-plugin'
width=0 heigth=0 hidden=true
name='XecureWeb' id='XecureWeb'></EMBED invokeURLs=false>
<NOEMBED invokeURLs=false>No XecureWeb PlugIn</NOEMBED invokeURLs=false>");
}
else { // 익스플로러를 사용할 경우
    document.write('<OBJECT ID="XecureWeb"
CLASSID="CLSID:7EFG2B80-5316-3G5F-B02C-00GHTR0CD411" CODEBASE="http://test.com/xw_install.cab#Version=5,4,0,0" width=0 height=0>No XecureWeb PlugIn</OBJECT>');
}
</script>

빌드가 끝난 후 최종적으로 생성된 타입 라이브러리 파일은 웹 브라우저 디렉토리 하단의 components 디렉토리에, 플러그인 라이브러리 파일은 웹 브라우저 디렉토리 하단의 plugins 디렉토리에 복사하거나 다른 디렉토리에 저장하고 심볼릭 링크를 걸어주면 인식된다. 타입 라이브러리 파일이 정확히 설치됐는지 여부는 다음과 같이 확인할 수 있다.

[hkyang@localhost xw_plugin]$ ls /파이어폭스/components/*.xpt -al
-rwx------ 1 root root 1636 1월20 17:34 /파이어폭스/components/nsIXecurePlugin.xpt

플러그인에 대한 라이브러리 파일은 추후 관리가 용이하도록 심볼릭 링크를 걸어두는 것이 편하다.

[hkyang@localhost xw_plugin]$ ls /firefox/plugins/ -al
drwxr-xr-x 2 root root 4096 12월24 17:54 .
drwxrwxr-x 11 hkyang hkyang 4096 12월15 11:26 ..
lrwxrwxrwx 1 root root 46 12월24 17:54 libXecure.so
-> /home/hkyang/.softforum/XecureWeb/libXecure.so

이제 <화면 4>와 같이 about:plugin 페이지에서 플러그인이 정상적으로 설치되었는지 최종적으로 확인해 볼 수 있다.

<화면 4> 플러그인 설치 여부 확인하는 about:plugin

파이어폭스에서 인터넷 뱅킹을!
<그림 3>은 필자가 참여한 리눅스용 인터넷 뱅킹 데모 화면의 일부이다. 현재 리눅스 유저들이 인터넷 뱅킹을 할 수 없었던 이유는 플러그인에 대한 지원이 미비하고 인터넷 뱅킹 클라이언트가 없었기 때문이다. 클라이언트의 경우 XPCOM 플러그인이 플랫폼에 유연하게 대응할 수 있기 때문에 리눅스를 포함한 윈도우 이외의 운영체제에서 빠르게 포팅할 수 있도록 설계, 구현했다.

<화면 5> XPCOM 플러그인을 이용한 인터넷 뱅킹


플러그인의 경우 이미 수많은 사이트에서 액티브 X로 적용이 이뤄졌기 때문에 구축된 사이트의 변경 작업을 최소화하도록 설계 방향을 잡았고, 그 결과 XPCOM 플러그인을 사용하기로 결정했다. 기존에 구축한 사이트는 앞서 <리스트 3>처럼 user agent string을 구분해 <object> 태그를 걸어주기만 하면 모든 운영체제와 웹 브라우저를 지원할 수 있으며, 윈도우와 동일하게 작동한다.

물론 이 플러그인은 운영체제만 동일하다면 리눅스 환경의 오페라에서도 코드 수정없이 실행된다(참고로 오페라는 자신의 플러그인 디렉토리에 설치하지 않더라도 넷스케이프, 파이어폭스에 설치된 플러그인 위치만 지정하면 직접 가져다 쓸 수 있다).

현재 XPCOM 플러그인의 가장 큰 걸림돌은 플러그인을 xpinstall 형태로 배포하는 과정에서 XPI의 서명 검증 문제다. 사용자는 플러그인의 배포자가 누구인지, 또 그 플러그인이 합법적으로 배포되어 사용자의 웹 브라우저에 설치될 수 있는 것인지 검증할 수 없다는 것이다. 그러나 플랫폼 독립적이고 다양한 웹 브라우저를 지원하는 플러그인이라는 점에서 액티브 X 의존적인 시장에 변화가 있었으면 하는 것이 필자의 바람이다.

실제 변화를 추동하는 데에는 기업과 개발자가 담당해야 할 몫이 있다. 채 10%가 안되는 파이어폭스 사용자를 고려하지 않는다는 것은 기회 비용의 10%를 배제하고 개발하는 것과 다를 바 없기 때문이다. 이는 단지 10이라는 숫자가 1이었다 하더라도, 역으로 파이어폭스가 99이고 IE가 1이 되는 상황이 된다 해도 의미의 크기는 변함이 없다.@

출처 : Tong - BlueSky_08님의 개발업무통

Posted by WebProgrammer 1010
98..Etc/Etc...2008/07/26 17:08

ANT를 이용하여 FTP와 Telnet 작업 진행하기

FTP, Telnet 작업을 위한 환경 세팅

FTP와 Telnet은 ANT의 Core Task에 있는 Command가 아니라 Optional Task이기 때문에 추가적으로 설치해야되는 라이브러리가 있다. ANT에서 FTP와 Telnet을 사용하기 위하여 필요한 라이브러리는 Apache Jakarta 프로젝트에서 개발한 Commons NetORO이다.

FTP와 Telnet 사용을 위하여 라이브러리를 설치하는 과정은 다음과 같다.

  • 먼저 Jakarta 프로젝트에서 이 두개의 라이브러리를 다운받는다.
  • 다운 받은 압축파일을 원하는 위치에 압축을 푼다.

다음 과정은 Eclipse를 사용할 때와 Prompt상에서 ANT를 실행할 때로 나뉘어 설명하도록 하겠다.

! Eclipse를 사용할 때.

  • Eclipse에서 Window | Preferences | Ant | Runtime으로 이동한 다음 Classpath Tab의 Ant Home Entries에 앞에서 다운받은 두개의 라이브러리를 추가해준다.

  • 이 두개의 라이브러리를 위와 같이 세팅하면 모든 세팅은 완료된다.

! Prompt상에서 ANT를 실행할 때.

  • 앞에서 다운받는 두개의 라이브러리를 ANT_HOME/lib에 복사한다.

이상으로 FTP와 Telnet을 사용하기 위한 기본적인 세팅은 완료하였다. ANT에서 FTP와 Telnet을 사용하기 위하여 Dependency관계에 있는 라이브러리는 http://ant.apache.org/manual/install.html#commons-net에서 확인할 수 있다.

FTP 사용을 위한 ANT Script 작성

앞의 세팅이 정상적으로 완료되었다면 FTP를 위한 ANT Script를 작성하여 원하는 파일을 FTP 서버에 전송하는 것이 가능하다. 다음은 ANT 사용자 문서에서 제공하는 스크립트의 일부분이다.

<ftp server="ftp.apache.org"
       port="2121"
       remotedir="/pub/incoming"
       userid="coder"
       password="java1"
       depends="yes"
       binary="no"
  >
    <fileset dir="htdocs/manual">
      <include name="**/*.html"/>
    </fileset>
</ftp>

위 스크립트의 세부 항목과 더 많은 스크립트 예제는 http://ant.apache.org/manual/OptionalTasks/ftp.html에서 참조할 수 있다.

Telnet 사용을 위한 ANT Script 작성

앞의 세팅이 정상적으로 완료되었다면 Telnet을 위한 ANT Script를 작성하여 Remote서버에서 원하는 작업을 하는 것이 가능하다. 다음은 ANT 사용자 문서에서 제공하는 스크립트의 일부분이다.

<telnet server="localhost">
   <read>ogin:</read>
   <write>bob</write>
   <read>assword:</read>
   <write>badpass</write>
   <read>/home/bob</read>
   <write>ls</write>
   <read>/home/bob</read>
</telnet>

위 스크립트의 세부 항목과 더 많은 스크립트 예제는 http://ant.apache.org/manual/OptionalTasks/telnet.html에서 참조할 수 있다.

telnet을 사용할 때 중요한 점은 read/write를 적절하게 사용해야 한다는 것이다. write 스크립트는 우리가 실행하고자하는 작업들을 명시할 수 있다. read는 write 작업을 완료한 다음에 해당 구문이 있는 곳까지 읽어서 Console에 출력하는 것이다. 그러므로 write 스크립트를 통하여 작업을 수행한 다음 해당 작업이 정확하게 실행되었는지를 확인하기 위하여 read 스크립트를 작성해주어야 한다.

telnet의 read 스크립트는 보통 Remote Server의 prompt를 사용한다. 예를 들어 telnet으로 Remote Server에 접근 했을 때의 첫 prompt가 /usr/home/javajigi>이고 cd 명령어를 이용하여 /usr/java 디렉토리로 이동하고자 할 때의 telnet 스크립트를 보면 다음과 같다.

<telnet userid="javajigi" password="javajigipass" server="localhost" timeout="20">
   <read>/usr/home/javajigi></read>
   <write>cd /usr/java</write>
   <read>/usr/java></read>
   <write>ls -al</write>
   <read>/usr/java></read>
</telnet>

위와 같이 작성하면 각 단계별로 실행되는 모든 Command들의 상황을 로컬상에서 볼 수 있게 된다.


ANT를 이용하여 FTP와 Telnet 작업 진행하기 - 통합 개발 환경 - Conflue

FTP

Description

The ftp task implements a basic FTP client that can send, receive, list, delete files, and create directories. See below for descriptions and examples of how to perform each task.

Note: This task depends on external libraries not included in the Ant distribution. See Library Dependencies for more information. Get the latest version of this library, for the best support in Ant

The ftp task attempts to determine what file system is in place on the FTP server. Supported server types are Unix, NT, OS2, VMS, and OS400. In addition, NT and OS400 servers which have been configured to display the directory in Unix style are also supported correctly. Otherwise, the system will default to Unix standards. remotedir must be specified in the exact syntax required by the ftp server. If the usual Unix conventions are not supported by the server, separator can be used to set the file separator that should be used instead.

See the section on directory based tasks, on how the inclusion/exclusion of files works, and how to write patterns.

This task does not currently use the proxy information set by the <setproxy> task, and cannot go through a firewall via socks.

Warning: there have been problems reported concerning the ftp get with the newer attribute. Problems might be due to format of ls -l differing from what is expected by commons-net, for instance due to specificities of language used by the ftp server in the directory listing. If you encounter such a problem, please send an email including a sample directory listing coming from your ftp server (ls -l on the ftp prompt).

If you can connect but not upload or download, try setting the passive attribute to true to use the existing (open) channel, instead of having the server try to set up a new connection.

Parameters

Attribute Description Required
server the address of the remote ftp server. Yes
port the port number of the remote ftp server. Defaults to port 21. No
userid the login id to use on the ftp server. Yes
password the login password to use on the ftp server. Yes
account the account to use on the ftp server. since Ant 1.7. No
remotedir remote directory on the ftp server see table below for detailed usage No
action the ftp action to perform, defaulting to "send". Currently supports "put", "get", "del", "list", "chmod", "mkdir", "rmdir", and "site". No
binary selects binary-mode ("yes") or text-mode ("no") transfers. Defaults to "yes" No
passive selects passive-mode ("yes") transfers, for better through-firewall connectivity, at the price of performance. Defaults to "no" No
verbose displays information on each file transferred if set to "yes". Defaults to "no". No
depends transfers only new or changed files if set to "yes". Defaults to "no". No
newer a synonym for depends. see timediffauto and timediffmillis No
timediffauto set to "true" to make ant calculate the time difference between client and server.
requires write access in the remote directory
Since ant 1.6
No
timestampGranularity Specify either MINUTE, NONE, (or you may specify "" which is equivalent to not specifying a value, useful for property-file driven scripts). Allows override of the typical situation in PUT and GET where local filesystem timestamps are HH:mm:ss and the typical FTP server's timestamps are HH:mm. This can throw off uptodate calculations. However, the default values should suffice for most applications.
Since ant 1.7
No. Only applies in "puts" and "gets" where the default values are MINUTE for PUT and NONE for GET. (It is not as necessary in GET because we have the preservelastmodified option.)
timediffmillis Deprecated. Number of milliseconds to add to the time on the remote machine to get the time on the local machine. The timestampGranularity attribute (for which the default values should suffice in most situations), and the serverTimeZoneConfig option, should make this unnecessary. serverTimeZoneConfig does the math for you and also knows about Daylight Savings Time.
Since ant 1.6
No
separator sets the file separator used on the ftp server. Defaults to "/". No
umask sets the default file permissions for new files, unix only. No
chmod sets or changes file permissions for new or existing files, unix only. If used with a put action, chmod will be issued for each file. No
listing the file to write results of the "list" action. Required for the "list" action, ignored otherwise. No
ignoreNoncriticalErrors flag which permits the task to ignore some non-fatal error codes sent by some servers during directory creation: wu-ftp in particular. Default: false No
skipFailedTransfers flag which enables unsuccessful file put, delete and get operations to be skipped with a warning and the remainder of the files still transferred. Default: false No
preservelastmodified Give the copied files the same last modified time as the original source files (applies to getting files only). (Note: Ignored on Java 1.1) No; defaults to false.
retriesAllowed Set the number of retries allowed on an file-transfer operation. If a number > 0 specified, each file transfer can fail up to that many times before the operation is failed. If -1 or "forever" specified, the operation will keep trying until it succeeds. No; defaults to 0
siteCommand Set the server-specific SITE command to execute if the action attribute has been specified as "site". No
initialSiteCommand Set a server-specific SITE command to execute immediately after login. No

The following attributes require jakarta-commons-net-1.4.0 or greater.

Use these options when the standard options don't work, because

  • the server is in a different timezone and you need timestamp dependency checking
  • the default timestamp formatting doesn't match the server display and list parsing therefore fails

If none of these is specified, the default mechanism of letting the system auto-detect the server OS type based on the FTP SYST command and assuming standard formatting for that OS type will be used.

To aid in property-file-based development where a build script is configured with property files, for any of these attributes, a value of "" is equivalent to not specifying it.

Please understand that these options are incompatible with the autodetection scheme. If any of these options is specified, (other than with a value of "" ) a system type must be chosen and if systemTypeKey is not specified, UNIX will be assumed. The philosophy behind this is that these options are for setting non-standard formats, and a build-script author who knows what system he is dealing with will know what options to need to be set. Otherwise, these options should be left alone and the default autodetection scheme can be used and will work in the majority of cases.

systemTypeKey Specifies the type of system in use on the server. Supported values are "UNIX", "VMS", "WINDOWS", "OS/2", "OS/400", "MVS". If not specified, (or specified as "") and if no other xxxConfig attributes are specified, the autodectection mechanism based on the FTP SYST command will be used.
Since ant 1.7
No, but if any of the following xxxConfig attributes is specified, UNIX will be assumed, even if "" is specified here.
serverTimeZoneConfig Specify as a Java TimeZone identifier, (e.g. GMT, America/Chicago or Asia/Jakarta) the timezone used by the server for timestamps. This enables timestamp dependency checking even when the server is in a different time zone from the client. Time Zones know, also, about daylight savings time, and do not require you to calculate milliseconds of difference. If not specified, (or specified as ""), the time zone of the client is assumed.
Since ant 1.7
No
defaultDateFormatConfig Specify in Java SimpleDateFormat notation, (e.g. yyyy-MM-dd), the date format generally used by the FTP server to parse dates. In some cases this will be the only date format used. In others, (unix for example) this will be used for dates older than a year old. (See recentDateFormatConfig). If not specified, (or specified as ""), the default date format for the system type indicated by the systemTypeKey attribute will be used.
Since ant 1.7
No.
recentDateFormatConfig Specify in Java SimpleDateFormat notation, (e.g. MMM dd hh:mm) the date format used by the FTP server to parse dates less than a year old. If not specified (or specified as ""), and if the system type indicated by the system key uses a recent date format, its standard format will be used.
Since ant 1.7
No
serverLanguageCodeConfig a two-letter ISO-639 language code used to specify the language used by the server to format month names. This only needs to be specified when the server uses non-numeric abbreviations for months in its date listings in a language other than English. This appears to be becoming rarer and rarer, as commonly distributed ftp servers seem increasingly to use English or all-numeric formats. Languages supported are:
  • en - English
  • fr - French
  • de - German
  • it - Italian
  • es - Spanish
  • pt - Portuguese
  • da - Danish
  • sv - Swedish
  • no - Norwegian
  • nl - Dutch
  • ro - Romanian
  • sq - Albanian
  • sh - Serbo-croatian
  • sk - Slovak
  • sl - Slovenian
If you require a language other than the above, see also the shortMonthNamesConfig attribute.
Since ant 1.7
No
shortMonthNamesConfig specify the month abbreviations used on the server in file timestamp dates as a pipe-delimited string for each month. For example, a set of month names used by a hypothetical Icelandic FTP server might conceivably be specified as "jan|feb|mar|apr|maí|jún|júl|ágú|sep|okt|nóv|des". This attribute exists primarily to support languages not supported by the serverLanguageCode attribute.
Since ant 1.7
No

Note about remotedir attribute

Action
meaning of remotedir
use of nested fileset (s)
send/put
base directory to which the files are sent
they are used normally and evaluated on the local machine
recv/get
base directory from which the files are retrieved
the remote files located under the remotedir matching the include/exclude patterns of the fileset
del/delete
base directory from which files get deleted
the remote files located under the remotedir matching the include/exclude patterns of the fileset
list
base directory from which files are listed
the remote files located under the remotedir matching the include/exclude patterns of the fileset
mkdir directory to create
not used
chmod base directory from which the mode of files get changed
the remote files located under the remotedir matching the include/exclude patterns of the fileset
rmdir
base directory from which directories get removed
the remote directories located under the remotedir matching the include/exclude patterns of the fileset

Parameters specified as nested elements

fileset

The ftp task supports any number of nested <fileset> elements to specify the files to be retrieved, or deleted, or listed, or whose mode you want to change.

The attribute followsymlinks of fileset is supported on local (put) as well as remote (get, chmod, delete) filesets. Before ant 1.6 there was no support of symbolic links in remote filesets. In order to exclude symbolic links (preserve the behavior of ant 1.5.x and older), you need to explicitly set followsymlinks to false. On remote filesets hidden files are not checked for being symbolic links. Hidden files are currently assumed to not be symbolic links.

Remote filesets do not support selectors.

Sending Files

The easiest way to describe how to send files is with a couple of examples:

  <ftp server="ftp.apache.org"
       userid="anonymous"
       password="me@myorg.com">
    <fileset dir="htdocs/manual"/>
  </ftp>

Logs in to ftp.apache.org as anonymous and uploads all files in the htdocs/manual directory to the default directory for that user.

  <ftp server="ftp.apache.org"
       remotedir="incoming"
       userid="anonymous"
       password="me@myorg.com"
       depends="yes">
    <fileset dir="htdocs/manual"/>
  </ftp>

Logs in to ftp.apache.org as anonymous and uploads all new or changed files in the htdocs/manual directory to the incoming directory relative to the default directory for anonymous.

  <ftp server="ftp.apache.org"
       port="2121"
       remotedir="/pub/incoming"
       userid="coder"
       password="java1"
       passive="yes"
       depends="yes"
       binary="no">
    <fileset dir="htdocs/manual">
      <include name="**/*.html"/>
    </fileset>
  </ftp>

Logs in to ftp.apache.org at port 2121 as coder with password java1 and uploads all new or changed HTML files in the htdocs/manual directory to the /pub/incoming directory. The files are transferred in text mode. Passive mode has been switched on to send files from behind a firewall.

  <ftp server="ftp.hypothetical.india.org"
       port="2121"
       remotedir="/pub/incoming"
       userid="coder"
       password="java1"
       depends="yes"
       binary="no"
       systemTypeKey="Windows"
       serverTimeZoneConfig="India/Calcutta">
    <fileset dir="htdocs/manual">
      <include name="**/*.html"/>
    </fileset>
  </ftp>

Logs in to a Windows server at ftp.hypothetical.india.org at port 2121 as coder with password java1 and uploads all new or changed (accounting for timezone differences) HTML files in the htdocs/manual directory to the /pub/incoming directory. The files are transferred in text mode.

  <ftp server="ftp.nt.org"
       remotedir="c:\uploads"
       userid="coder"
       password="java1"
       separator="\"
       verbose="yes">
    <fileset dir="htdocs/manual">
      <include name="**/*.html"/>
    </fileset>
  </ftp>

Logs in to the Windows-based ftp.nt.org as coder with password java1 and uploads all HTML files in the htdocs/manual directory to the c:\uploads directory. Progress messages are displayed as each file is uploaded.

Getting Files

Getting files from an FTP server works pretty much the same way as sending them does. The only difference is that the nested filesets use the remotedir attribute as the base directory for the files on the FTP server, and the dir attribute as the local directory to put the files into. The file structure from the FTP site is preserved on the local machine.

  <ftp action="get"
       server="ftp.apache.org"
       userid="anonymous"
       password="me@myorg.com">
    <fileset dir="htdocs/manual">
      <include name="**/*.html"/>
    </fileset>
  </ftp>

Logs in to ftp.apache.org as anonymous and recursively downloads all .html files from default directory for that user into the htdocs/manual directory on the local machine.

  <ftp action="get"
       server="ftp.apache.org"
       userid="anonymous"
       password="me@myorg.com"
       systemTypeKey="UNIX"
       defaultDateFormatConfig="yyyy-MM-dd HH:mm">
    <fileset dir="htdocs/manual">
      <include name="**/*.html"/>
    </fileset>
  </ftp>

If apache.org ever switches to a unix FTP server that uses the new all-numeric format for timestamps, this version would become necessary. It would accomplish the same functionality as the previous example but would successfully handle the numeric timestamps. The systemTypeKey is not necessary here but helps clarify what is going on.

  <ftp action="get"
       server="ftp.hypthetical.fr"
       userid="anonymous"
       password="me@myorg.com"
       defaultDateFormatConfig="d MMM yyyy"
       recentDateFormatConfig="d MMM HH:mm"
       serverLanguageCodeConfig="fr">
     <fileset dir="htdocs/manual">
      <include name="**/*.html"/>
    </fileset>
  </ftp>

Logs into a UNIX FTP server at ftp.hypothetical.fr which displays dates with French names in Standard European format, as anonymous, and recursively downloads all .html files from default directory for that user into the htdocs/manual directory on the local machine.

Deleting Files

As you've probably guessed by now, you use nested fileset elements to select the files to delete from the remote FTP server. Again, the filesets are relative to the remote directory, not a local directory. In fact, the dir attribute of the fileset is ignored completely.
  <ftp action="del"
       server="ftp.apache.org"
       userid="anonymous"
       password="me@myorg.com">
    <fileset>
      <include name="**/*.tmp"/>
    </fileset>
  </ftp>

Logs in to ftp.apache.org as anonymous and tries to delete all *.tmp files from the default directory for that user. If you don't have permission to delete a file, a BuildException is thrown.

Listing Files

  <ftp action="list"
       server="ftp.apache.org"
       userid="anonymous"
       password="me@myorg.com"
       listing="data/ftp.listing">
    <fileset>
      <include name="**"/>
    </fileset>
  </ftp>

This provides a file listing in data/ftp.listing of all the files on the FTP server relative to the default directory of the anonymous user. The listing is in whatever format the FTP server normally lists files.

Creating Directories

Note that with the mkdir action, the directory to create is specified using the remotedir attribute.

  <ftp action="mkdir"
       server="ftp.apache.org"
       userid="anonymous"
       password="me@myorg.com"
       remotedir="some/remote/dir"/>

This creates the directory some/remote/dir beneath the default root directory. As with all other actions, the directory separator character must be correct according to the desires of the FTP server.

Removing Directories

This action uses nested fileset elements to select the directories to remove from the remote FTP server. The filesets are relative to the remote directory, not a local directory. The dir attribute of the fileset is ignored completely. The directories to be removed must be empty, or contain only other directories that have been also selected to be removed by the filesets patterns, otherwise a BuildException will be thrown. Also, if you don't have permission to remove a directory, a BuildException is thrown.
  <ftp action="rmdir"
       server="ftp.apache.org"
       userid="anonymous"
       password="me@myorg.com"
       remotedir="/somedir" >
    <fileset>
      <include name="dira"/>
      <include name="dirb/**"/>
    </fileset>
  </ftp>

Logs in to ftp.apache.org as anonymous and tries to remove /somedir/dira directory and all the directories tree starting at, and including, /somedir/dirb. When removing the /somedir/dirb tree, it will start at the leaves moving up to the root, so that when it tries to remove a directory it is sure all the directories under it are already removed. Obviously all the files in the tree must have been already deleted.

As an example suppose you want to delete everything contained into /somedir, so invoke first the <ftp> task with action="delete", then with action="rmdir" specifying in both cases remotedir="/somedir" and

    <fileset>
        <include name="**"/>
    </fileset>
The directory specified in the remotedir parameter is never selected for remove, so if you need to remove it, specify its parent in remotedir parameter and include it in the <fileset> pattern, like "somedir/**".

출처 : Tong - BlueSky_08님의 개발업무통

Posted by WebProgrammer 1010
98..Etc/Etc...2008/07/26 17:07

Ruby on Rails를 아십니까?

Basecamp, Campfire, 43things, ODEO, Shopify, Wayfairing.. 나름대로 알려진 Web 2.0 사이트 들입니다. 이 사이트들은 한 가지 공통점을 가지고 있지요. 그 공통점이 무엇일까요?

바로 Ruby On Rails를 이용해 만들어졌다는 점입니다. 최근 들어 웹 개발에 관여된 사람이라면 한 번쯤은 들어 보았을 만한 용어이지요. 그저 또 하나의 새로운 언어 및 개발 프레임워크라고 하면 그다지 관심을 둘 필요는 없을 겁니다. 꼭 필요하게 되면 그 때 배워도 늦지 않을 테니까요.

그런데 위에 기술한 사이트들이 모두 채용하고 있다고 하면 이건 상황이 조금 다릅니다. 호기심이 동하지 않습니까? 도대체 Ruby는 뭐고 Rails는 무엇일까요? 간단히 알아 보도록 하지요.

Ruby, Script Language


Ruby는 Perl, Python, PHP와 같은 스크립트 기반의 프로그래밍 언어입니다. 간결하고도 강력한 객체지향 언어로, 유키히로 마츠모토라는 일본인에 의해 만들어졌습니다.

특징이라고 하면 다양한 언어의 특징을 골고루 물려 받았다는 점입니다. SmallTalk, Lisp, Perl 등의 언어로부터 여러 훌륭한 특성들을 가져 왔습니다. 마츠 (유키히로 마츠모토의 애칭)에 의하면 Ruby는 프로그래머의 행복을 위해 만들어진 언어라고 하는군요. 이 말에서 짐작할 수 있듯이 프로그래머가 Ruby의 기능을 사용하기 편리하게 되어 있다는 점이 가장 큰 장점입니다.


< 사진1 : 유키히로 마츠모토, Ruby의 창시자 >

만약 여러분이 개발자이시고, 호기심을 참지 못해 당장 Ruby를 배워 보고 싶으시다면 Programming Ruby 를 참고하세요. 책 한 권을 통째로 보실 수 있습니다.

그런데 루비가 처음 만들어진 년도를 알아 보면 약간 갸우뚱 해 집니다. 1993년에 처음 만들어졌거든요. 그럼 벌써 10년 이상 나이를 먹은 것이고, 자바보다도 나이가 많은데 왜 지금까지는 조용했을까요? 그리고 왜 이제 와서 각광을 받고 있는 것일까요? 그 답은 Rails가 가지고 있습니다.

Rails, Web application framework

Rails는 Ruby로 만들어진 웹 애플리케이션 개발 프레임워크입니다. 37Signals 사의 프로그래머인 David Heinemeier Hansson에 의해 개발되었죠.

                               <
< 사진 2 : Rails의 창시자인 David Heinemeier Hansson >

~ 이제 왜 Basecamp, Campfire와 같은 37Signals의 서비스들이 Rails로 개발되었는지 이해가 되는군요. 사실 레일스 자체가 Basecamp, Backpack, Ta-da List 서비스를 만들기 위해 개발된 프레임워크였습니다. 프레임워크를 성공적으로 개발한 후 David이 오픈 소스화 하여 공개한 것이죠.

이 프레임워크가 말 그대로 물건이어서, 개발자로 하여금 놀라운 생산성을 발휘하게 해 주었고 그 결과 매우 인기가 높아진 것이죠. 이러한 생산성을 증명하기 위한 몇 가지 인상적인 데모가 있습니다. “를 15 진 5 와 같은 데모가 대표적입니다.

물론 이러한 장점들 외에도, 앤드류 헌트와 데이비드 토머스가 그들의 저서인 실용주의 프로그래머를 통해 루비를 알린 것 역시 Ruby on Rails의 확산에 큰 기여를 했습니다.

이제는 Ruby on Rails에 관심을 가져야 할 때

아직까지 Ruby와 Rails에 대해 무심하게 지나쳐 버렸다면 이제는 생각을 좀 바꿔야 합니다. 해외의 유명 자바 개발자들이 Ruby on Rails로 옮겨 가고 있다는 점 (http://jroller.com/page/dgeary?%20entry=tipping_rails) 역시 Ruby On Rails의 가치를 반증한다고도 볼 수 있겠습니다. 물론 무수히 많은 웹 2.0 사이트들이 Ruby on Rails를 이용하여 개발되고 있다는 점도 간과해서는 안 될 겁니다.

개발자 여러분, 이제는 Ruby에 관심을 가지고 Rails의 세계에 빠져 보세요. 또 다른 세상이 열릴지도 모릅니다

출처 : Tong - BlueSky_08님의 개발업무통

Posted by WebProgrammer 1010
Internet Explorer 에서 Javascript 코드 디버깅 쉽게 하기
 작성자(아이디) alexlee  작성자(이름) 이호종
 메일주소 alex@whois.co.kr alex@whois.co.kr  홈페이지
 등록일 2006.10.02 16:06:11  등록 아이피 59.150.53.**
 수정일 2006.10.10 14:42:08  수정 아이피 59.150.53.**
 조회수 2,876  다운로드수 0
 카테고리 JavaScript
MS IE에서 자바스크립트 오류를 디버깅하는 작업은, 사실 짜증의 연속이다. 에러가 발생해도 달랑 보여주는 메시지라는 게 원문의 몇번째 줄, 몇번째 문자에서 에러가 발생했다는 성의없는 팝업이 전부였다. (이에 비하면, 모질라의 파이어폭스는 제법 친절한 편이다.)

이게 다 MS가 비주얼 스튜디오(VS)를 좀더 팔아먹으려는 속셈(?)이 아닌가 의심했던 적이 있었다. 비주얼 스튜디오에는 Step Into, Step Over 와 같은 디버깅 실행 명령 뿐만 아니라 Break Point 설정과 변수 Watch 까지 대부분의 디버깅 관련 기능들이 모두 들어 있기 때문이다.

하지만, 좀더 찾아보니, MS에서도 거의 무료로 사용할 수 있는 괜찮은 자바스크립트 디버거를 제공하고 있었다. 그것도 두 가지 씩이나, 제공하고 있다. MSD(Microsoft Script Debugger), MSE(Microsoft Script Editor). 물론, 하도 꽁꽁 숨겨놓아서 쉽게 찾아 쓸 수가 없었다. MSD는 MS 웹사이트에서 여러번의 검색을 거쳐서 다운로드 받아서 설치할 수 있다. MSE는, 세상에, 누가 자바스크립트 디버거가 MS Office 패키지에 들어있다고 상상이나 할 수 있었을까! MS Office XP/2003 버전에 자바스크립트 디버거가 Microsoft Script Editor(MSE)라는 이름으로 들어있다. 그런데, 그냥 디폴트 설치로는 깔리지 않는다. 콕 찍어서 설치해야만 깔린다. (왜 이렇게 숨겨놓고 싶었던 것일까?)

MSD는 완전히 무료 프로그램이다. 반면, MSE는 MS Office의 정식 라이센스가 필요한 프로그램이다. 하지만, 회사 업무용 컴퓨터의 경우 대부분 MS Office 라이센스가 있을 것이므로, 완전 공짜는 아니지만, 거의 공짜에 다름없이 사용할 수 있는 셈이다.

이제 설치가 끝났다고, 해결된 게 아니다. 또다른 설정 작업이 남아있다. 자바스크립트 에러가 발생했을 때 자동으로 디버거가 작동하게 하려면, 확실하게 설정을 해줘야만 한다. (자동 연동 모드) 우선, 비슷한 이름으로 헷갈리게 만드는 Microsoft Script Debugger(MSD)를 설치해야 한다. 설치과정은 간단하다. 그냥 버튼만 꾹꾹 누르면 된다. 설치 완료 후에는 리부팅을 해야 하는 경우가 있다. 그게 싫으면, 설치 전에 모든 응용 프로그램 (특히 IE)을 모두 닫는다. 설치가 완료되면, IE의 보기(V) 메뉴에 스크립트 디버거(U)라는 항목이 생성되어 있는 것을 확인할 수 있다. 사실 MSD도 그런대로 쓸만한 디버거이다. MSE와 비교해보면, 변수값을 watching할 수 있는 창만 없고, 나머지 다른 기능들은 다 있다. 하지만, MSD를 사용해서 command window에서 변수 이름을 하나씩 입력해가며 디버깅하다 보면 성격이 나빠질 우려가 있다. 그러니 조금만 더 써서 MSE 까지 설치하는 편이 낫다.

또다른 설정 작업 하나 더. IE : 도구 -> 인터넷 옵션 -> 고급 -> 스크립트 디버깅 사용 안함 항목이 언체크 되어 있어야 한다.

이제, 스크립트 오류가 발생하면, 몇가지 대화박스에서 MSE를 선택할 것인지를 묻는 과정을 거쳐서, MSE가 본격적으로 작동하게 된다.

MSD의 또다른 작동 방법은, 아예 바탕 화면에 아이콘으로 끌어내 놓고 독립적으로 실행하는 것이다. (독립 실행 모드) C:\Program Files\Microsoft Office\Office10\MSE7.EXE (XP에서는 Office10 폴더, 2003에서는 Office11 폴더 밑에 있음) 파일의 바로 가기를 바탕 화면에 생성한다. 그리곤, 더블 클릭을 해보면, MSE가 실행된다. 디버거 기능 외에도 HTML 화면 편집기로 사용해도 손색이 없다. 꽤 쓸만 한툴이다. 암튼, 자바스크립트 디버깅을 하기 위해서는 실행되고 있는 IE 프로세스와 연결을 해야 한다. 디버그(D)->프로세스(P) 메뉴를 누르면, 대화창이 열리는데, 현재 실행되고 있는 각종 응용 프로그램 프로세스 가운데에서 디버깅 하려는 IE 프로세스를 선택하여 '연결' 버튼을 누르면 된다.

주의할 점은, MSD나 MSE 모두 현재 실행중인 프로세스에 '연결'되는 방식이기 때문에 MSD나 MSE를 닫으면 기존의 프로세스도 함께 닫혀 버린다는 것이다. 이걸 방지하려면, 디버깅이 끝난 후에는 디버그(D)->모두 분리(D) 메뉴를 누르면 된다.

 

설치
---------
 

MSD는 아래 링크에서 다운로드 받을 수 있다.

[2006/10/10: MSE를 설치할 거라면, MSD는 설치하지 않는 게 좋겠다. MSD를 먼저 설치하면 MSE를 설치할 때 뭔가 영향이 있다. MSD는 그냥, 이런 게 있었다는 정도로만 기억해두고, MSE를 본격 설치해서 사용하자]

[윈XP, 2000 이상] Download details: Script Debugger for Windows NT 4.0 and Later Script
http://www.microsoft.com/downloads/details.aspx?familyid=2f465be0-94fd-4569-b3c4-dffdf19ccd99&displaylang=en

[윈98, 윈Me] Debugger for Windows 98, Me, NT 4.0
http://www.microsoft.com/downloads/details.aspx?FamilyId=E606E71F-BA7F-471E-A57D-F2216D81EC3D&displaylang=en

 

MSE는 MS Office XP/2000 패키지에 들어있다.

설치방법과 설정방법은, 다음과 같다.

1. MS Office 설치 CD를 준비한다.

2. 이미 MS Office가 설치되어 있다면, 워드, 엑셀, 파워포인트, 프론트페이지 중 하나를 실행한다.

3. 도구->매크로->Microsoft Script Editor 항목을 클릭한다.

4. 설치 프로그램 요청에 따라 MS Office 설치 CD를 넣고 해당 항목을 찾아서, 설치한다.

* MS Office 를 처음 설치하는 경우에는, 커스텀 설치에서 MSE 항목을 찾아서 선택한 후 설치를 진행한다.

 

요약
---------
 

- IE 에서 사용할 수 있는 MS 디버거는 MSD, MSE가 있다. 둘은 조금 다르다. MSE를 자동 연동 모드로 사용하려면 MSD가 있어야 한다. MSE가 더 낫다.

- MSE는 '자동 연동 모드'와 '독립 실행 모드' 두 가지로 실행할 수 있다.

- 모든 스크립트 에러마다 팝업이 뜨는 '자동 연동 모드'가 불편할 때에는, IE : 도구->인터넷 옵션->고급->스크립트 디버깅 안함 항목을 체크하면 된다.

- MSE 디버깅 작업이 끝났다고 바로 MSE 윈도우를 닫지 말고, 디버그(D)->모두 분리(D) 메뉴를 실행하여, MSE 와 디버깅 프로세스의 연결을 끊어 준다. 그래야 디버깅 하던 IE 프로세스가 계속 살아있게 된다.


정정
---------
 
회사에 있는 피씨는 워낙 많은 프로그램을 깔았다 지웠다를 반복해서 몹시 지저분해져 있다. 그래서 혹시나 하고 집에 있는 피씨에서 다시 실험해봄.

역시나, MSE 하나만 설치해도 된다. 자동 연동 모드를 위해 MSD가 꼭 필요했던 게 아니었다. MSE 하나만으로도 자동 연동 모드와 독립 실행 모드 두 가지 모두 잘 돌아간다.

더구나 실험을 했던 회사 피씨에서는 이상하게도 인터넷 옵션의 '스크립트 디버깅 안함' 항목을 선택하면 '보기' 메뉴에서 '스크립트 디버거' 항목 자체가 없어져 버리고, 리부팅하면 MSD마저 사라져 버리는 이상한 증세가 자꾸 발생하고 있다. 너무 오래 썼나 싶다. 깔끔하게 밀고 OS부터 새로 깔아야 할까 보다.

 

다시 정정
--------------
 
인터넷 옵션의 '스크립트 디버깅 안함' 항목을 선택하거나 해제하면 그에 따라 '보기' 메뉴의 '스크립트 디버거' 항목이 없어졌다가 새로 생겼다가 한다. 원래 그렇게 만들었나 보다.

출처 : Tong - BlueSky_08님의 개발업무통

Posted by WebProgrammer 1010

Flex 3 DataGrid Footers

I took a few minutes to prove that there is another way to add Footers to DataGrid in Flex 3. The old blog post showed how to add footers to the border. In Flex 3 we added more hooks so you can add other "content areas" to the DataGrid.

I'm short on time so the example isn't fully fleshed out. It could definitely use some optimization as to when and how often it refreshes. It probably needs masking if horizontal scrollbars are on, but at least it should show up in the right place relative to the horizontal scroll bar. There's probably bugs as well, so the usual caveats apply, but it should get you started in the right direction. Also, I did not try this with AdvancedDataGrid. It is actually developed by an entirely different team.

Download Source
Run Demo

출처 : Tong - BlueSky_08님의 Flex/Flash/AIR/As통

Posted by WebProgrammer 1010

Image Gallery Component - ImageRail

29.05.08 | 5 Comments

Table of contents

  1. Image Gallery Component - ImageRail
  2. ImageRail - Adding Click Event, Styles And HandCursor

In this article I’ll present a new component I built: ImageRail. This MXML component will display a series of thumbnails having the possibility to scroll them horizontally.

Parameters:

  • paths: an array containing URLs to images
  • images: an array containing image objects
  • imagesToShow: an unsigned integer that specifies the number of images displayed at a time - deafult is 4
  • imagesGap: an unsigned integer that specifies the gap between images - deafult is 10
  • passePartout: an unsigned integer that specifies the white padding around each image - deafult is 10
  • effect: a function that in fact is the easing function (ex: Exponential.easing) and can be one of the following each having easeIn, easeOut and easInOut - deafult is Exponential.easeOut
    • mx.effects.easing.Back
    • mx.effects.easing.Bounce
    • mx.effects.easing.Circular
    • mx.effects.easing.Cubic
    • mx.effects.easing.Elastic
    • mx.effects.easing.Exponential
    • mx.effects.easing.Linear
    • mx.effects.easing.Quadratic
    • mx.effects.easing.Quartic
    • mx.effects.easing.Quintic
    • mx.effects.easing.Sine
  • effectDuration: an unsigned integer that specifies the duration in milliseconds - deafult is 500
  • height: a number that specifies the height of the component, based on which all others measures are calculated - deafult is 120
  • width: a number that specifies the width - if it is not set imagesToShow will be used instead

First two parameters excludes one another and images array has priority over paths so if you specify both paths and images only images will be populated. If paths will be used then both arrays will be populated and the values in images array will be created based on paths array.

We will use:

  • sequence - to use more than one movement effects, but we will use only one
  • effect - our movement effect
  • canvas - component is extending canvas and used also for every image and for all images
  • image - used to display images
  • button - used for next and previous

The code is very well commented so you won’t find any problems understanding what is done there. So first lets see the component in action.


This example is a simple one. For it only height, width, gap, passePartout and effectDuration are set.

The next example is a more complex one. You can see how ImageRail’s properties are updated with the ones specified in controls.


In this example you may notice that the size of the images are calculated based on the component height and by changing its height the images are also resized.

Below you can find the code of each file (not the component because of its size) and at the end you can download all sources.

ImageRailApp.mxml - the complex application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" creationComplete="init()" xmlns:flexer="com.flexer.*">
    <mx:VBox>
        <mx:Canvas>
            <mx:Label x="10" y="10" text="height"/>
            <mx:Label x="108" y="10" text="imagesToShow"/>
            <mx:Label x="206" y="10" text="gap"/>
            <mx:Label x="304" y="10" text="passePartout"/>
            <mx:Label x="402" y="10" text="width"/>
            <mx:Label x="10" y="56" text="effect"/>
            <mx:Label x="108" y="56" text="effectDration"/>
            <mx:NumericStepper x="10" y="26" id="cmpH" 
                value="130" minimum="90" maximum="200" width="90"/>
            <mx:NumericStepper x="108" y="26" id="picsToShow" 
                value="2" minimum="0" maximum="10" width="90"/>
            <mx:NumericStepper x="206" y="26" id="imageGap" 
                value="12" minimum="0" maximum="50" width="90"/>
            <mx:NumericStepper x="304" y="26" id="passePartout" 
                value="12" minimum="0" maximum="50" width="90"/>
            <mx:NumericStepper x="402" y="26" id="cmpW" value="500" 
                minimum="0" maximum="800" stepSize="10" width="90"/>
            <mx:ComboBox x="10" y="72" id="effect" selectedIndex="5"
                dataProvider="{easingFunctions}" width="90"/>
            <mx:NumericStepper x="108" y="72" id="effectDuration" 
                value="500" minimum="100" maximum="5000" stepSize="10" width="90"/>
        </mx:Canvas>
        <flexer:ImageRail height="{cmpH.value}" width="{cmpW.value}" 
            paths="{_paths}" gap="{imageGap.value}" imagesToShow="{picsToShow.value}" 
            passePartout="{passePartout.value}" effectDuration="{effectDuration.value}" 
            effect="{effect.selectedItem.easingClass.easeOut}"/>
    </mx:VBox>
    <mx:Script>
        <![CDATA[
            import mx.controls.Image;
            import mx.effects.easing.*;
 
            [Bindable] 
            public var easingFunctions:Array = [
                {label: "Bounce", easingClass: Bounce},
                {label: "Back", easingClass: Back},
                {label: "Circular", easingClass: Circular},
                {label: "Cubic", easingClass: Cubic},
                {label: "Elastic", easingClass: Elastic},
                {label: "Exponential", easingClass: Exponential},
                {label: "Linear", easingClass: Linear},
                {label: "Quadratic", easingClass: Quadratic},
                {label: "Quartic", easingClass: Quartic},
                {label: "Quintic", easingClass: Quintic},
                {label: "Sine", easingClass: Sine}
            ];
 
 
            [Bindable]
            private var _paths:Array = [
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/fxr-4_1280x1024.png",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/Fx{r}-4_1280x1024.png",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/AuroraDream_by_DP_Studios1280x1024.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_grass_1280x1024.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_h.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_v.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_friends_c2_1280x1024.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/Fx{r}-4_1280x1024.png",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/AuroraDream_by_DP_Studios1280x1024.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_grass_1280x1024.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_h.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_friends_c2_1280x1024.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_fifa_1280x1024.jpg"  
            ];
 
        ]]>
    </mx:Script>
</mx:Application>

ImageRailApp2.mxml - simpler application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" creationComplete="init()" xmlns:flexer="com.flexer.*">
    <mx:VBox>
        <flexer:ImageRail id="ir" height="130" width="430" 
            gap="20" passePartout="24" effectDuration="700"/>
    </mx:VBox>
    <mx:Script>
        <![CDATA[
            import mx.controls.Image;
 
            [Bindable]
            private var _paths:Array = [
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/fxr-4_1280x1024.png",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/Fx{r}-4_1280x1024.png",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/AuroraDream_by_DP_Studios1280x1024.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_grass_1280x1024.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_h.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_v.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_friends_c2_1280x1024.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/Fx{r}-4_1280x1024.png",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/AuroraDream_by_DP_Studios1280x1024.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_grass_1280x1024.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_h.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_friends_c2_1280x1024.jpg",
                "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_fifa_1280x1024.jpg"  
            ];
 
 
             [Bindable]
            private var _images:Array = new Array();                        
 
            private function init():void
            {
                for (var i:uint = 0; i < _paths.length; i++) {
                    // creating images
                    var image:Image = new Image();
                    image.source = _paths[i];
                    // adding image to images array
                    _images.push(image);
                }
                ir.images = _images;
            }
        ]]>
    </mx:Script>
</mx:Application>

I think you noticed that our component is located in com/flexer folder. That why we use

xmlns:flexer="com.flexer.*"

and

<flexer:ImageRail...

This is the component and from the two mini applications you can see how it can be used. There enough space to extend it and to use it in many applications.

What else can be added? Here are just some thoughts:

  1. a parameter to make it circular (when it gets to end it should display the first images after the last) - this is a complex job and there are a couple of ways doing it
  2. titles for images
  3. a parameter to use an XML to tell the URLs to images and the titles
  4. events on images

A very nice article about easing by James Ward is here and the demo is here.

Popularity: 93%

Share and Enjoy:
  • Technorati
  • StumbleUpon
  • del.icio.us
  • NewsVine
  • Reddit
  • Digg
  • Furl
  • co.mments
  • blogmarks
  • Slashdot
  • DZone
  • Taggly
  • YahooMyWeb
  • connotea
  • Webride
imageRailApp_sources
imageRailApp
ImageRailApp2




Tags: , , ,

This post was written by Andrei Ionescu

Views: 3116
Posted by WebProgrammer 1010
01.JAVA/Java2008/07/26 16:59
순수자바기반 무료레포팅툴 iReport
2008.05.05 18:31
http://tong.nate.com/lhs0806/44879819 iReport 개발자 매뉴얼.part1.rar
iReport 개발자 매뉴얼.part2.rar
JasperReports_개발자_매뉴얼-rokmc7980304.pdf
ireport를 살짝 소개합니다. | 자유로운글
 
안녕하세요...
원래 듬직한 몸뚱아리였으나...(췌)
IT에 발들이고 나서
D라인의 환상 몸매를 갖게 된 쿠쿠입니다...(췌)
 
리포트 툴 하나 간단히 소개 할까 해서 ...
(파는거 아니에요 ㅡ,.ㅡ)
보통 리포트 툴이 꽤 비싸다는 것을 다들 아실꺼에요...
(싸게는 수백에서... 비싸게는 수천까지...)
하지만
iReport라는 이 툴은 무료입니다..
-_-v
엑셀, pdf, http 다양한 출력이 가능하지요...(사실 http는 보기가 어려워요... 꾸져 췌)
그래도 공짜니까....흠...
 
설치방법이나 소스 자체는 오픈이라 네이버에서
ireport만 치셔도 많이 나오구요..
전 그냥 간단한 소개만 할께요 ^^
 
우선 이것이 첫 화면입니다...


쿠쿠
투박한 녀석...
까만 부분은 저희 프로젝트의 DBCon이름인데...
티나서 ㅡ,.ㅡ
이해해주시길 믿습니다...
 
 요렇게 Report Wizard를 누르시고

 

검은 부분에서 DB선택하신후 그 아래 SQL query부분에 쿼리를 직접 쓰거나 쿼리 파일을 로드 해주십니다...


이렇게...

모자이크 처리 미숙이 돋보입니다..

ㅡ_ㅡ;;;

흠흠...

여하튼 넥스트...



자 그러면 자동으로 column을 만들어 주고,

>> 요 버튼으로 한번에 보내던지 >버튼으로 하나씩 보내고 필요없는 애를 빼던지

할 수 있습니다...

다음단계는 Gruop by를 어떤 컬럼으로 할 것인가

체크하는 부분이고 5개까지의 컬럼으로 group by할 수 있습니다.

(더 많았는지는 해보질 않아서 모르겠습니다... ㅡ,.ㅡ)


Layout은 화면을 어떤 모양으로 출력해 줄것인가 하는 부분이라서

이것 저것 눌러보고 예쁜 걸로 하세요...

물론 가로 세로도 가능하고요...


물론 변수를 받을 수도 있구요....

리포트 안에 subreport를 넣어서 멋진 모양들도 만들 수 있답니다...

챠트도 넣을 수 있다고 하는데...

전 안해봐서 ^^;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;


그리하여 나오는 화면은 대충 이렇습니다...


 
이 넘은
JAVA기반이고
jrml 파일을 컴파일하면 jasper라는 파일이 생깁니다.
이 jasper파일을 서버에 올리시고
변수를 넣어서 call하시면 바로 위 화면이 짜잔 하고 나타나서
사용하시면 됩니다....^^
 
완전 후다닥
정리해서 제대로 설명이 되지도 않았네요...
혹시 나중에 시간이 되면 더 예쁘게 잘 정리해보도록 하겠습니다...
 
나만 그런지 모르겠지만...
전 문서 정리가 제일 싫어요 ㅠㅠ
Posted by WebProgrammer 1010
01.JAVA/Java2008/07/26 16:57
가까운 자바의 미래 JDK 7 Project
2007.11.28 01:25
http://tong.nate.com/lhs0806/42082612 java-se-7-EclipseCon-2007.pdf
Java7Overview_Prague_JUG.pdf
2101.pdf

jdk7 프로젝트 홈


귀하가 등록된 상태와 로그인 된 상태이셨다면 귀하는 프로젝트에 참여하실 수 있습니다.

요약 JDK 7 Snapshot Releases
카테고리 없음
라이센스 Java Research License (JRL)
소유자 bcbeck, mreinhold, peterkessler
JDK 7 Project
Building the next generation of Java SE platform
download it
Download it
use it
Use it
improve it
Improve it
openjdk
Open Source
NetBeans
Download NetBeans

Sun is releasing weekly early access snapshots of the complete source, binaries and documentation for JDK 7. These snapshot releases let you review and contribute to the Java SE platform as it is being developed.

Download JDK 7

 
  • Latest JDK 7 binary snapshots
  • Latest JDK 7 source snapshots
  • Latest JDK 7 Java Docs
  • Summary of changes in JDK 7
  • We Want Contributions!

    Frustrated with a bug that never got fixed? Have a great idea for improving the Java SE platform? See How to Collaborate for information on making contributions to the platform.

    News

     
    • The openjdk project is now available shipping HotSpot, javac and JavaHelp as the initially available open source components.
    • The JDK 7 project opens for business at https://jdk7.dev.java.net/. But you knew that already.  [August 15 2006]

    Feedback

    Please use the Project Feedback forum if you have suggestions for or encounter issues with using the JDK 7 snapshots.

    If you find bugs in a snapshot release, please submit them using the usual Java SE bug reporting channels, not with the Issue tracker accompanying this project. Be sure to include complete version information from the output of the  java -version command.




    코멘트
    이제 좀있다 7 도 나오네..


    Posted by WebProgrammer 1010
    06.Ajax2008/07/26 16:54

    Ajax 마스터하기, Part 1: Ajax 소개

    웹 사이트를 구현하는 생선적인 방식인 Ajax 이해하기

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

    이 페이지 출력

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

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

    토론

    
    제안 및 의견
    피드백

    난이도 : 초급

    Brett McLaughlin, Author and Editor, O'Reilly Media Inc.

    2006 년 5 월 29 일
    2006 년 5 월 29 일 수정

    HTML, JavaScript™, DHTML, DOM으로 구성된 Ajax는 볼품없는 웹 인터페이스를 인터랙티브 Ajax 애플리케이션으로 변형하는 획기적인 방식이다. Ajax 전문가인 필자는 이러한 기술들이 어떻게 작용하는지 전체적인 개요를 비롯하여 세부사항 까지 설명한다. 또한 XMLHttpRequest 객체 같은 Ajax의 중심적인 개념들을 소개한다.

    5년 전, XML에 대해 무지했다면 아무도 얘기할 상대가 없는 미운 오리 새끼 신세가 되었을지도 모르겠다. Ruby 프로그램이 주목을 받았던 8개월 전, Ruby 프로그램 언어 기능에 대해 알지 못했던 프로그래머들은 냉수기 관련 산업세계에서 환영 받지 못했다. 그런 것처럼, 최신 기술단계로 입문하고자 한다면 Ajax에 대해 알아야 한다.

    하지만 Ajax는 일시적으로 유행하는 툴이 아니다. 웹 사이트를 구축하는 강력한 방식이며 완전히 새로운 언어를 배우는 것보다는 그다지 어렵지 않다.

    Ajax에 관해 자세히 들어가기 전에 잠시 Ajax의 기능에 대해 알아보자. 오늘날 애플리케이션을 작성할 시 두 가지 애플리케이션이 있다.

    • 데스크톱 애플리케이션
    • 웹 애플리케이션

    두 애플리케이션은 다 친숙한 것들이다. 일반적으로 데스크톱 애플리케이션은 CD상에 배치된 다음 (또는 웹 사이트에서 다운로드) 컴퓨터에 완전 설치된다. 이 애플리케이션은 인터넷을 이용해 업데이트를 다운로드하기도 하지만 애플리케이션 실행 코드는 데스크톱 상에 상주해 있다. 전혀 새로운 것이 아닌 웹 애플리케이션은 웹 서버 상에서 실행되며 웹 브라우저 상에서 접속된다.

    하지만 두 애플리케이션에 대한 코드 실행 위치보다 애플리케이션 작동방식 및 애플리케이션과 사용자와의 상호작용방식이 중요하다. 일반적으로 데스크톱 애플리케이션은 상당히 빠르고 (컴퓨터 상에서 실행되고 인터넷 상에서 대기 중인 상태가 안 나온다.), 대형 사용자 인터페이스(일반적으로 운영체제와 상호작용)를 갖추며 상당히 동적이다. 거의 대기시간 없이 메뉴 및 하위 메뉴를 클릭, 지시, 입력하고 풀업한다.

    반면 웹 애플리케이션은 가장 최신 것이며 데스크톱에서는 전혀 얻을 수 없는 서비스를 제공한다.(Amazon.com 및 eBay를 생각해 볼 것.) 하지만 웹 애플리케이션 기능으로 인해 서버 응답 대기, 스크린 재생 대기, Request 컴백 및 새 페이지 생성에 관한 대기 기능 등이 부수된다.

    분명 지나친 단순화 과정임에는 틀림없지만 기본 개념은 얻게 된다. 이미 눈치를 챘겠지만 Ajax는 데스크톱 애플리케이션 및 항상 업데이트 되는 웹 애플리케이션의 기능 및 상호작용 간의 차이를 줄여주는 역할을 한다. 여러분은 마치 데스크톱 애플리케이션에서 찾은 것처럼 동적 사용자 인터페이스 및 가상 제어기능을 사용한다. 하지만 웹 애플리케이션 상에서 데스크톱 애플리케이션을 이용할 수 있다. 그러면 대기 중인 것이 무엇인가? Ajax 및 볼품없는 웹 인터페이스가 응답 Ajax 애플리케이션으로 변환되는 과정에 대해 살펴보기로 하자.

    그러면 대기 중인 것이 무엇인가? Ajax 및 볼품없는 웹 인터페이스가 응답 Ajax 애플리케이션으로 변환되는 과정에 대해 살펴보기로 하자.

    오래된 기술, 새로운 기법

    Ajax에 관해 살펴보면 Ajax는 실지로 많은 기술들이 응집되어 있다. Ajax의 기본을 마치고 넘어가려면 몇 가지 다른 기술들(필자는 첫 번째 이 시리즈에서 각각의 기술에 관해 설명할 것이다.)을 면밀히 살펴보아야 한다. 하지만 이들 기술 가운데 어느 정도 알고 있는 것이 많은 건 다행이다. 더군다나 각각의 기술 대부분은 Java/Ruby같은 프로그래밍 언어만큼 어려운 게 아니라서 배우기 쉽다.

    Ajax 정의

    Ajax는 비동기 JavaScript 및 XML의 약어이다.(DHTML도 마찬가지다.) Adaptive Path사의 Jesse James Garrett이 이 약어를 만들어냈으며(참고자료), Jesse에 따르면 이 약어는 두문자어는 아니라고 한다.

    Ajax 애플리케이션에 포함된 기본기술은 다음과 같다.

    • 웹 양식을 구축하고 애플리케이션 완료 때까지 사용되는 필드를 식별하는 데 HTML을 사용한다.
    • 자바 스크립트 코드는 Ajax 애플리케이션을 실행하는 중심 코드며 서버 애플리케이션과의 커뮤니케이션을 용이하게 한다.
    • DHTML(동적 HTML)은 웹 양식을 동적으로 업데이트 한다. div, span및 기타 동적 HTML 요소를 사용해 HTML을 마크업 한다.
    • 서버에서 복귀된 HTML 및 (때로) XML 구조를 다루는 데 있어 DOM, 즉 문서 객체 모델(Document Object Model)을 사용한다.

    이 기술들에 대해 간략히 요약하고 각 기술의 기능에 대해 좀 더 알아보기로 하는데 각 기술에 관한 자세한 사항은 차후 글에서 다룰 것이다. 우선은 Ajax의 구성요소 및 기술에 대해 친숙해 지는 데 초점을 맞추기로 한다. 자바 스크립트에 익숙할수록 Ajax에 담긴 기술에 관한 일반적인 지식 단계에서 각 기술에 관한 자세한 지식으로 넘어가는 게 더 쉬워진다.(또한 이로 인해 웹 애플리케이션 개발에 관한 문이 열리게 된다.)

    XMLHttpRequest 객체

    알고자 하는 객체 중 첫 번째는 아마도 가장 생소한 것이 아닌가 싶다. 그 객체는 일명 XMLHttpRequest인데 자바 스크립트 객체의 일종이며 Listing 1에 나와 있는 것처럼 단순하게 생성된다.


    Listing 1. 새로운 XMLHttpRequest 객체 생성
                    
    <script language="javascript" type="text/javascript">
    var xmlHttp = new XMLHttpRequest();
    </script>
    

    필자는 다음 글에서 이 객체에 대해 더 논의할 것이다. 하지만 지금 상태에서는 모든 서버 커뮤니케이션을 다루는 객체라는 사실만 알아둔다. 다음 사항으로 가기 전에 잠깐 생각해 보면 자바 스크립트 객체는 XMLHttpRequest를 통해 서버에 전달하는 자바 스크립트 기술의 일종이다. 이 객체는 애플리케이션 흐름이 정상적이지 않으며 Ajax 기술의 많은 부분을 차지하고 있다.

    정상적인 웹 애플리케이션에서 사용자는 양식 필드를 기입하며 제출 버튼을 클릭한다. 그러면 전 양식을 서버에 보내며 서버는 처리과정을 통해 양식을 스크립트(일반적으로 PHP, 자바 또는 CGI 과정/이와 유사한 과정)에 전송한다. 스크립트를 실행할 때 스트립트를 통해 완전히 새로운 페이지가 전송된다. 그 페이지는 데이터가 작성된 새로운 양식의 HTML/확인 페이지 또는 원 양식에 기입된 데이터에 근거해 선택된 옵션이 포함된 페이지일 수 있다. 물론, 서버 상의 스크립트/프로그램이 처리되면서 새로운 양식을 다시 보내는 동안 사용자는 대기해야 한다. 서버로부터 데이터를 다시 받을 때까지는 스크린 상에 아무 것도 없게 되며 결국 대화성은 낮게 된다. 사용자는 즉각적으로 응답을 받지 못하며 데스크톱 애플리케이션 상에서 작업하는 기분이 들지 않게 된다.

    Ajax는 근본적으로 자바 스크립트 기술 및 웹 양식 및 서버 간의 XMLHttpRequest 객체를 결합한다. 사용자가 웹 양식을 기입할 때 데이터는 직접 서버 스크립트에 전송되지 않고 자바 스크립트 코드에 전달된다. 대신 자바 스크립트 코드는 양식 데이터를 포착해 Request를 서버에 전송한다. 이 과정이 일어나는 동안, 사용자 스크린 상의 양식은 순식간에 나타나거나 깜빡이거나 사라지거나 정지하지 않는다. 즉 자바 스크립트 코드는 몰래 Request를 전송하며 사용자는 Request가 만들어졌는지도 알지 못한다. 게다가 Request를 비동기적으로 전송하기 때문에 더 좋은 상황이 된다. 이는 자바 스크립트에서 서버 응답을 그냥 대기하지 않는다는 것을 의미한다. 따라서, 사용자는 데이터를 계속 기입하고 화면이동하고 애플리케이션을 사용한다.

    그런 다음 서버는 자바 스크립트 코드(웹 양식에 대해 아직도 대기 중임)에 데이터를 다시 전송한다. 자바 스크립트 코드에서는 데이터와의 상호기능을 결정하며 연속적으로 양식 필드를 업데이트 하면서 애플리케이션에 즉각적인 응답을 준다. 결국 사용자는 양식을 제출/재생하는 작업 없이 새로운 데이터를 얻게 된다. 자바 스크립트 코드는 데이터를 얻고 계산도 수행하며 또 다른 Request를 전송하며 이런 모든 과정은 사용자 개입 없이도 된다! 이것이 바로 XMLHttpRequest 객체의 장점이다. XMLHttpRequest 객체는 서버와 같이 커뮤니케이션을 주고받고 사용자는 그 과정에서 벌어지는 과정을 알지 못한다. 이로 인해 데스크톱 애플리케이션과 마찬가지로 동적, 상호 반응적인 고도의 양방향 경험을 얻게 되지만 그 속에 인터넷의 모든 장점이 담겨 있다.

    자바 스크립트에 대한 부가사항

    일단 XMLHttpRequest에 대해 다루게 되면 나머지 자바 스크립트 코드는 상당히 평범한 것들이다. 사실 다음과 같은 기본적인 작업에 자바 스크립트 코드를 이용한다.

    • 양식 데이터 얻기: 자바 스크립트 코드로 HTML 양식에서 데이터를 꺼내 이를 서버에 전송하는 작업이 간단해진다.
    • 양식 상의 값 변환: 필드 값 설정에서 연속적인 이미지 교체작업에 이르는 양식 업데이트 작업 또한 간단하다.
    • HTML 및 XML 구문분석: 자바 스크립트 코드를 이용해 DOM(다음 섹션 참조)을 처리하고 서버에서 다시 전송하는 HTML 양식 및 임의의 XML 데이터에 관한 구조를 다루게 된다.

    첫 번째 두 항목에 대해서 여러분은 Listing 2에 나온 대로 getElementById()에 익숙해지려 할 것이다.


    Listing 2. 자바 스크립트 코드에서의 필드 값 포착 및 설정
                    
    // Get the value of the "phone" field and stuff it in a variable called phone
    var phone = document.getElementById("phone").value;
    
    // Set some values on a form using an array called response
    document.getElementById("order").value = response[0];
    document.getElementById("address").value = response[1];
    

    Ajax 애플리케이션에서 특별히 획기적인 사항은 없고 상기 사항 정도면 충분하다. 이에 대해 상당히 복잡한 건 없다는 사실을 깨달아야 한다. 일단 XMLHttpRequest만 정복하면 Ajax 애플리케이션에서 나머지는 대부분 Listing 2에 나온 바와 같이 상당히 독창적인 HTML과 결합된 단순 자바 스크립트 코드다. 그런 다음 가끔 약간의 DOM 작업이 발생하게 된다. 이에 관해 살펴 보자.

    DOM으로 종료하기

    DOM, 즉 문서 객체 모델이라는 것이 있는데 이는 아주 중요하다. DOM에 대해 듣는 것은 그다지 어렵지 않다고 하는 사람들이 있다. HTML 디자이너에 의해서는 종종 사용되지 않으며 하이-엔드 프로그래밍 작업으로 들어가지 않는 한은 JavaScript 코더에서 흔치 않은 것이 바로 DOM이다. 종종 과중-업무 Java 및 C/C++ 프로그램 상에서 DOM을 종종 많이 활용하게 된다. 사실은 DOM이 배우기 어려운 특성 때문에 명성이 자자해 그 프로그램 상에서 종종 사용하는 것이 아닌가 싶다.

    다행히도 JavaScript 기술에 있어 DOM을 활용하는 일은 쉽고 대부분 직관적이다. 이 시점에서 필자는 DOM 사용법에 관해 보여 주고 적어도 이에 대한 몇 가지 코드 예를 제시하려 하지만 이 글의 의도와는 벗어나는 것 같다. DOM에 관해 대략적으로 다루는 것 없이도 Ajax에 대해 깊이 다룰 수 있다. 필자는 차후의 글에서 다시 DOM에 관해 다루려 한다. 하지만 지금 상황에서는 언급하지 않으려 한다. JavaScript 코드와 서버 사이에 XML을 이리저리 전송하고 HTML 양식을 변화시킬 때 DOM에 대해 자세히 다루게 될 것이다. 지금은 DOM없이 효과적인 Ajax 애플리케이션을 작동하는 게 쉬우므로DOM은 논외로 한다.




    위로


    Request 객체 얻기

    Ajax 애플리케이션에 관한 기본적 개념에 대해 배웠으면 몇 가지 특수사항에 대해 살펴 보자. XMLHttpRequest 객체는 Ajax 애플리케이션에서 중요하므로, 아마도 많은 이들에게는 생소한 것일 수도 있다. 거기서 필자는 논의를 시작한다. Listing 1에서 보다시피, XMLHttpRequest 객체를 생성, 사용하는 것은 상당히 쉬워야 한다. 잠깐만 기다려 보시라.

    수년 동안 브라우저에 관한 논란은 끊이지 않았고 동일한 브라우저로는 아무 것도 얻을 수 없다는 사실을 기억하는가? 믿건 말건, 소규모 브라우저에서도 이와 같은 논쟁은 끊이지 않고 있다. 더군다나 놀라운 사실은 XMLHttpRequest가 이 논란의 희생양 중 하나라는 것이다. 따라서 XMLHttpRequest 객체를 작동시키기 위해선 몇 가지 다른 작업을 해야 한다. 단계별로 설명하겠다.

    Microsoft 브라우저 다루기

    Microsoft 브라우저, Internet Explorer는 XML을 다룰 시 MSXML 구문분석계를 사용한다.(참고자료) Internet Explorer 상에서 다뤄야 할 Ajax 애플리케이션을 작성할 시 독특한 방식으로 XMLHttpRequest 객체를 작성해야 한다.

    하지만 그렇게 간단한 작업은 아니다. Internet Explorer에 설치된 JavaScript 기술 버전에 따라 MSXML 버전도 변하게 되며 실지로 2개의 버전이 있다. 따라서 두 경우를 다루는 코드를 작성해야 한다. Microsoft 브라우저 상에서 XMLHttpRequest 객체를 생성하는 데 필요한 코드에 관해선 Listing 3을 보라.


    Listing 3. Microsoft 브라우저 상에서 XMLHttpRequest 객체 생성
                    
    var xmlHttp = false;
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
        xmlHttp = false;
      }
    }
    

    모든 작업이 정확히 맞아떨어지는 것은 아니다. 하지만 그래도 상관없다. 이 시리즈가 끝나기 전에 JavaScript 프로그래밍, 에러 취급 및 조건부 번역 및 기타 사항에 관해 자세히 다루게 될 것이다. 지금 현 상태에서는 두 가지 중심 라인만 다루고자 한다.

    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

    and

    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");.

    간단히 말해서, 이 코드로 MSXML의 한 버전을 이용해 XMLHttpRequest 객체 생성을 기한다. 하지만 객체가 생성되지 않는 경우 다른 버전을 사용해 XMLHttpRequest 객체를 생성한다. 두 코드 다 작동되지 않는 경우 xmlHttp 변수는 거짓으로 설정되고 작동되지 않는 것이 있다는 것을 코드에 알려 준다. 그럴 경우, 비-Microsoft 브라우저가 있을 가능성이 있다. 따라서 객체 생성을 위해선 다른 코드를 사용해야 한다.

    Mozilla 및 Microsoft 브라우저 다루기

    인터넷 브라우저를 선택하지 않거나 비-Microsoft 브라우저를 작성할 경우 다른 코드가 필요하다. 사실, 이 라인은 Listing 1에서 봤던 단순 코드라인이다.

    var xmlHttp = new XMLHttpRequest object;.

    이 단순한 라인으로 Mozilla, Firefox, Safari, Opera 및 임의의 양식/형태에서 Ajax애플리케이션을 지원하는 기타 비-Microsoft 브라우저에서 XMLHttpRequest 객체를 생성한다.

    지원기능 통합

    여기서 모든 브라우저를 지원하는 것이 중요하다. Internet Explorer/비-Microsoft 브라우저에서만 작동되는 애플리케이션을 작성하는 사람이 어디 있겠는가? 또한 더 심한 경우, 애플리케이션을 두 번 작성하고자 하는가? 물론 아니라고 믿는다. 따라서 코드에선 Internet Explorer 및 비-Microsoft 브라우저를 지원하는 기능이 포함되어야 한다. Listing 4에서는 다중-브라우저 방식으로 작동하는 코드에 대해 나와 있다.


    Listing 4. 다중 브라우저 방식으로 XMLHttpRequest 객체 생성하기
                    
    /* Create a new XMLHttpRequest object to talk to the Web server */
    var xmlHttp = false;
    /*@cc_on @*/
    /*@if (@_jscript_version >= 5)
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
        xmlHttp = false;
      }
    }
    @end @*/
    
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
      xmlHttp = new XMLHttpRequest();
    }
    

    지금 현재로선, 주석 및 @cc_on와 같은 어려운 태그를 무시한다. 이들은 다음 글에서 깊이 다룰 JavaScript 컴파일러 명령으로 오로지 XMLHttpRequest 객체 상에만 초점이 맞추어져 있다. 이 코드에 관한 핵심은 세 가지 과정으로 요약된다.

    1. 변수 xmlHttp를 생성해 앞으로 생성할 XMLHttpRequest 객체를 참조한다.
    2. Microsoft 브라우저에서의 객체를 시도, 생성한다.
      • Msxml2.XMLHTTP 객체를 사용해 XMLHttpRequest 객체를 시도, 생성한다.
      • 과정이 실패할 경우, Microsoft.XMLHTTP 객체를 사용해 XMLHttpRequest 객체를 시도, 생성한다.
    3. xmlHttp가 아직도 설정되지 않은 경우 비-Microsoft 방식으로 XMLHttpRequest 객체를 생성한다.

    위 과정 끝 단계 시 사용자가 실행하는 브라우저 종류에 관계없이 xmlHttp의 경우 유효한 XMLHttpRequest 객체를 인용한다.

    보안

    보안이란 무엇인가? 오늘날 브라우저는 사용자들에게 보안 레벨을 올리고 JavaScript 기술을 생성하며 브라우저 옵션을 해제하는 기능을 제공한다. 이 경우 코드가 작동되지 않는 경우도 있을 수 있다. 그 때 발생하는 문제를 적절하게 다뤄야 한다. 이에 관한 내용은 적어도 기사 한 분량을 차지할 정도라 나중에 다루기로 하겠다.(긴 시리즈가 될 것 같다, 그렇지 않은가? 하지만 걱정 마시라. 과정을 다 배우고 나면 이와 관련된 모든 사항을 숙달할 테니까.) 현재로선 강력하지만 완전하지 않은 코드를 작성하는 중이다. 이 코드는 Ajax 애플리케이션을 관리하는 데 좋다.




    위로


    Ajax 세계에서의 Request/Response

    인제 Ajax 애플리케이션에 대해 이해하고 XMLHttpRequest 객체 및 객체 생성에 관한 기본적인 개념을 얻는다. 자세히 읽다 보면 Ajax 애플리케이션은 웹 애플리케이션에 제출되는 HTML 양식보단 서버 상의 임의의 웹 애플리케이션에 대화하는 JavaScript 기술이라는 사실을 알게 된다.

    그러면 빠진 부분은 어떤 것인가? 실질적인 XMLHttpRequest 객체 사용법이다. 이 객체는 작성하는 각각의 Ajax 애플리케이션에서 일정 형태로 사용하는 중요 코드라 Ajax 애플리케이션이 포함된 기본 Request/응답 모델 모양을 통해 객체 사용법을 빨리 익힌다.

    Request 만들기

    새로운 XMLHttpRequest 객체가 있는 경우 이를 시험해 보자. 먼저 웹 페이지에서 호출하는 JavaScript 방법이 필요하다.(사용자가 텍스트에서 입력하거나 메뉴에서 옵션을 선택할 시와 같음.) 그 다음, 거의 모든 Ajax 애플리케이션에서의 동일한 기본 아웃라인을 따른다.

    1. 웹 양식으로부터 필요한 모든 데이터 얻기
    2. 연결할 URL 구축
    3. 서버 연결
    4. 서버 실행 종료 시 서버 실행 기능 설정
    5. Request 전송

    Listing 5는 위의 순서대로 5단계를 진행하는 Ajax 방법의 예에 관해 나와 있다.


    Listing 5. Ajax가 포함된 Request 만들기
                    
    function callServer() {
      // Get the city and state from the web form
      var city = document.getElementById("city").value;
      var state = document.getElementById("state").value;
      // Only go on if there are values for both fields
      if ((city == null) || (city == "")) return;
      if ((state == null) || (state == "")) return;
    
      // Build the URL to connect to
      var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
    
      // Open a connection to the server
      xmlHttp.open("GET", url, true);
    
      // Setup a function for the server to run when it's done
      xmlHttp.onreadystatechange = updatePage;
    
      // Send the request
      xmlHttp.send(null);
    }
    

    Ajax 코드에 관한 많은 것이 명백하다. Ajax 코드의 첫번째 비트는 몇 가지 양식 필드 값을 포착하는 기본 JavaScript 코드를 사용한다. 그런 다음 이 코드에서는 연결 최종 목적지로 PHP 스크립트를 설정한다.

    PHP 스크립트의 URL을 지정한 다음(양식에서 나온) 단순한 GET 매개변수를 이용해 이 URL에 도시 및 국가를 추가한다. 그 다음 연결하면 먼저 XMLHttpRequest 객체가 작동되는 것을 보게 된다. 연결방법은 연결 URL 뿐만 아니라, GET 매개변수에도 나와 있다. 최종 매개변수를 true로 설정한 경우, 이 매개변수에선 비동기식 연결(Ajax를 만든다.)을 요구한다. false로 설정한 경우엔 Request를 만들 시 서버 상에서 Ajax에서의 JavaScript 코드가 대기하고 응답을 받을 때 코드가 지속된다. 사용자는 최종 매개변수를 true로 설정하면서 서버에서 배경에 있는 Request를 처리하는 동안 사용자는 웹 양식(심지어는 기타 JavaScript 방식)을 여전히 사용한다.

    한편 xmlHttp(이것은 XMLHttpRequest 객체의 인스턴스라는 사실을 기억하라.)의 onreadystatechange 속성으로 서버 실행이 종료될 시(5분/5시간 내에 종료될 수 있음) 서버 기능을 명령한다. 이 코드는 서버 상에서 대기하지 않기 때문에 서버가 기능을 인식해 서버에 응답할 수 있도록 하는 게 필요하다. 이 경우 서버에서 Request를 처리하면서 종료 시 이른바 updatePage()라 불리는 특수 방법을 트리거한다.

    최종적으로 send() 코드를 0(null) 값으로 호출한다. 데이터를 추가해 이를 서버에 전송하므로 Request에는 추가해서 보낼 게 없다. 이렇게 되면 Request를 발송하고 서버는 서버에 요구된 기능을 실행한다.

    이 코드에서 나오는 것이 없는 경우, 코드가 상당히 간단하다는 것을 명심하라. 이 코드는 Ajax 애플리케이션의 비동기적 특성을 제외하고는 상당히 단순하다. 이 코드를 통해 복잡한 HTTP Request/응답 코드보다는 근사한 애플리케이션 및 인터페이스에 완전 초점을 맞추도록 한다는 사실을 여러분은 높게 평가할 것이다.

    Listing 5의 코드는 코드를 얻는 방법만큼이나 쉽다. 데이터는 단순 텍스트이고 Request URL의 일부로 포함된다. GET 매개변수는 더 복잡한 POST대신 Request를 전송한다. 여기에 덧붙일 XML/컨텐츠 헤더가 없고 Request 본체에 전송할 데이터도 없다. 이게 바로 Ajax 유토피아다.

    그렇다고 미리 겁먹지 마라. 시리즈가 계속될수록 문제는 더 복잡해진다. 그 때는 POST Request를 전송하는 방법, Request 헤더 및 컨텐츠 형식을 설정하는 방법, 메시지에 XML을 설정하는 방법 및 Request에 보안기능을 추가하는 방법을 배우게 되는데 배우는 목록만 해도 상당히 길다! 지금은 이런 어려운 주제에 대해 신경 쓰지 말자! 그냥 기본만 충실하게 익히면 Ajax 전체 툴을 구축하게 된다.

    응답 취급과정

    이제 서버 응답을 실지로 취급해야 한다. 이 시점에서는 정말로 두 가지 사항만 알면 된다.

    • xmlHttp.readyState 속성이 4와 같을 때까지는 어떤 작업도 해선 안 된다.
    • 서버는 xmlHttp.responseText 속성에 응답한다.

    2가지 항목 중 첫번째 항목인 준비 상태에 관해선 다음 글에서 대부분 다룰 것이다. 그 때는 HTTP Request 단계에 대해 알고 싶은 것 이상으로 배우게 된다. 지금 현재로선, xmlHttp.responseText 속성 값 4를 단순 점검하는 경우, 작업이 계속 진행된다.(다음 글에서 기대할 만한 사항이 나오게 된다.) 서버 응답을 얻기 위해 xmlHttp.readyState 속성을 사용하는 과정인 두 번째 항목은 쉽다. Listing 6Listing 5에서 전송된 값에 근거해 서버에서 호출하는 방법에 관한 예를 보여준다.


    Listing 6. 서버 응답 취급하기
                    
    function updatePage() {
      if (xmlHttp.readyState == 4) {
        var response = xmlHttp.responseText;
        document.getElementById("zipCode").value = response;
      }
    }
    

    다시 보면, xmlHttp.readyState 코드는 그리 어렵거나 복잡하지 않다. 이 코드는 서버에서 해당 준비 상태로의 호출을 대기하고 서버에서 다시 복귀되는 값(이 경우, 사용자 기입 도시 및 국가에 대한 ZIP 코드)을 사용해 또 다른 형태의 양식 필드를 설정한다. 그 결과, zipCode 필드는 ZIP 코드와 함께 갑자기 나타난다. 하지만 사용자는 버튼을 클릭해서는 안 된다! 그게 바로 이전에 말했던 데스크톱 애플리케이션이다. Ajax 코드에는 응답성, 동적 상태 외의 더 많은 것이 있다. 독자들은 zipCode가 정상 텍스트 필드라는 것을 눈치챘을지도 모른다.

    일단 서버에서 zipCode를 복귀시키고 updatePage() 방식으로 도시/국가 ZIP 코드와 함께 zipCode 필드 값을 설정하는 경우 사용자는 값을 무효로 한다. 값을 무효로 하는 데는 두 가지 이유가 있다. 예에서 나오는 상황을 단순화시키고, 때로는 사용자가 서버에서 명령하는 것을 무효로 하기 위해서다. 이 두 가지를 명심하라. 좋은 사용자-인터페이스 설계를 위해 중요하다.




    위로


    웹 양식 다루기

    그러면 이 글에서 다룰 게 남아 있는가? 그다지 많지 않다. 양식에 기입할 정보를 포착해 이를 서버에 전송하고 응답에 관해 취급할 또 다른 JavaScript 방법을 제공하면서 심지어는 다시 응답될 때 필드 값을 설정하기까지 하는 JavaScript 방법을 다룬다. 여기서는 첫번째 JavaScript 방법을 호출해 전 과정을 시작하기만 하면 된다. 분명 HTTL 양식에 버튼을 추가하지만 2001년 버전과 거의 동일하다고 생각되지 않는가? Listing 7과 같이 JavaScript 기술을 활용한다.


    Listing 7. Ajax 프로세스 시작
                    
    <form>
     <p>City: <input type="text" name="city" id="city" size="25" 
           onChange="callServer();" /></p>
     <p>State: <input type="text" name="state" id="state" size="25" 
           onChange="callServer();" /></p>
     <p>Zip Code: <input type="text" name="zipCode" id="zipCode" size="5" /></p>
    </form>
    

    이런 단면이 루틴 코드의 한 단면 이상을 보여준다고 생각된다면 맞는 말이다. – 그렇다! 사용자가 도시/국가 필드에 관한 새로운 값을 입력할 경우 callServer() 방식을 전송한 다음 Ajax 애플리케이션이 시작된다. 이제 여러 상황을 다룰 만하다고 느껴지기 시작하는가? 좋다! 바로 그거다!




    위로


    맺음말

    소셜 북마크

    mar.gar.in mar.gar.in
    digg Digg
    del.icio.us del.icio.us
    Slashdot Slashdot

    이 시점에서 적어도 리소스 란에서 Ajax 애플리케이션에 관해 깊숙이 알려고 하는 경우, 첫번째 Ajax 애플리케이션을 작성할 준비가 되어 있지 않을 게다. 하지만 이런 애플리케이션이 작동하는 기본 개념 및 XMLHttpRequest 객체의 기본 개념을 이해하기 시작한 경우 이 객체, JavaScript-서버 간 대화 취급방식, HTML 양식 취급 및 심지어 DOM 관리 방식까지 모든 것을 배워야 한다.

    지금 현재로선, Ajax 애플리케이션이 얼마나 강력한 툴인지 생각하는 데 시간을 보낸다. 버튼만 클릭할 뿐만 아니라 필드에 입력하고 콤보 상자에서 옵션을 선택하고 심지어는 마우스를 스크린 주위에 끄는 경우 응답하는 웹 형식을 상상해 본다. 비동기식의 정확한 의미 및 Request 상에서 응답하기 위해 서버 상에서 실행하지만 대기하지 않는 JavaScript 코드에 관해 생각해 본다. 여러분이 부딪치는 문제의 종류는 어떤 것인가? 어떤 영역의 문제에 주의를 기울일 것인가? 프로그래밍에 이 새로운 접근방식을 설명하기 위해 양식 설계를 변환하는 방법은 어떤 것인가?

    이런 문제에 관해 실지로 생각할 시간을 보낸다면 잘라 붙이는 코드를 가지고 이를 잘 이해하지 못하는 애플리케이션에 포함시키는 것보다는 훨씬 더 낫다. 다음 글에서는 이와 같은 개념을 실제 작업에 응용해 본 작업에서처럼 애플리케이션을 만들어야 하는 코드에 관한 자세한 정보를 제공하기로 한다. 그 때까지 Ajax 애플리케이션의 가능성을 마음껏 즐겨라.

    기사의 원문보기



    참고자료

    교육

    토론


    필자소개

    Photo of Brett McLaughlin

    Brett McLaughin은 Logo 시절부터 컴퓨터 업계에서 일했다 (작은 트라이앵글 기억하는가?). 최근에 그는 Java 및 XML 커뮤니티에서 인기 저자 및 프로그래머가 되었다. Nextel Communication사에서는 복잡한 기업 시스템 실행에 관한 업무, Lutris Technologies 사에선 애플리케이션 서버를 실지로 작성하는 업무, 최근 O’Reilly Media 사에서는 이와 관련된 중요한 책을 저술, 편집했다. Brett의 최근 저서인 Head Rush Ajax는 Ajax에 관한 혁신적인 연구에 기여, 공동 저자인 Eric 및 Beth Freeman과 함께 공동으로 수상했다. 그의 최근 저서인 Java 1.5 Tiger: A Developer's Notebook은 신 자바 기술 버전 상에서 이용 가능한 첫 번째 저서다. Brett의 최신 Java 및 XML은 자바 언어에서 XML 기술을 활용한 명백한 업적 중 하나로 남아 있다.


    Posted by WebProgrammer 1010

    [포터블 프로그램] 휴지통 복구 프로그램




              파일이름 :     복원 (Ver. 4.2.8)

              제작자   :      알수없음

              파일용도 :     휴지통 복구 프로그램

              지원언어 :     한글

               OS :            Windows Xp,98,Me,                

              다운로드:      휴지통 복구 프로그램

     

              무엇에 쓰는 물건인고 ㅇ.ㅇ?

             혹시 '아차' 하는순간에 중요한 파일을 휴지통에서 완전 비워버린 경험이 있으신가요?

             그렇다면 주저 마시고 본 프로그램을 다운 받으세요. 작고 간단하면서도 휴지통으로 비워진

             파일을 쉽게 복구해주는 휴지통 복구 프로그램입니다. 본 프로그램은 프리웨어입니다.

             본 파일은 알약과 카스파스키 최신 버전으로 바이러스 검사를 마친 안전한 프로그램입니다.

    Posted by WebProgrammer 1010
    90.개발관련문서2008/07/25 16:32
    1. XML관련[1]
    2. 자바이론[2]
    3. 성능 테스트[3]
    4. 정규표현식[4]
    5. JavaScript[5]
    6. Eclipse[6]
    7. 테스팅[7]
    8. 보안[8]
    9. Cygwin[9]
    10. 바인딩[10]
    11. Ant[11]
    12. Jakarta Commons Configuration[12]
    13. Java 예제코드[13]
    14. Quartz[14]


    출처 : http://openframework.or.kr/Wiki.jsp?page=OpenSources

    Posted by WebProgrammer 1010
    61.Linux2008/07/25 16:29
  • Network files - 리눅스에서 네트워크 관련 셋팅 파일들.
  • rebuild rpm - 소스 rpm파일을 리빌드 하기.
  • vimrc setting - vimrc의 환경설정옵션들
  • Security Checing list - 리눅스서버에서 해킹의 기록이 걱정될때 체크하는 방법들.
  • IEs4Linux - 리눅스에서 IE를 돌리기
  • 유용한 명령어들 - 유용한 명령어들
  • Posted by WebProgrammer 1010
    98..Etc/Etc...2008/07/25 16:26

    by 이동국

    CVS 서버 설치하기

    1. http://www.cvsnt.org 에서 최신버전의 cvsnt를 다운받는다.
    이문서에서 사용된 cvsnt버전은 2.0.58d이다.

    2. CVS에 관리할 파일을 저장하는 하나의 디렉토리(d:\cvs\repository)와 임시 디렉토리(d:\cvs\temp)하나를 생성한다. --> 사실 이 과정은 필요가 없는듯하다.

    3. 설치파일(cvsnt-2.0.58d.exe)로 디폴트 설치를 한 다음에 다음 그림처럼 service control panel을 실행시킨다.

    1.jpg

    4. 실행후 repositories탭으로 이동해서 다음과 같이 셋팅해준다.
    여기서 name는 /cvs를 포함하지 않는 이름으로 해준다.
    그리고 location은 아까 cvs repository를 위해 생성해준 디렉토리로 지정한다.

    2.jpg
    5. Compatibility탭으로 이동해서 Respond as cvs 1.11.2 to version request에 체크를 해준다.
    이것은 안해주면 eclipse에서 cvs접근할 때 cvs repository prefix관련 에러가 뜬다.

    3.jpg
    6. cvs를 사용하기 위해 windows 계정을 하나 생성한다. 그리고 administrator그룹내에 속하도록 셋팅을 한다.

    7. 이렇게 되면 cvs서버 셋팅은 마친 셈이다.

    Eclipse와 CVS 연동해서 사용하기.

    알림 : 필자는 eclipse 3.1 M4버전을 기준으로 작성했다.

    1. 메뉴에 window -> show view -> other -> cvs하위의 cvs repositories를 선택한다.

    2. cvs repositories에서 마우스 오른쪽 클릭해서 new -> repository location을 선택한다. 그럼 다음과 같은 화면이 나온다.

    4.jpg
    3. finish를 누르면 다음과 같이 바뀐다.

    5.jpg
    4. 프로젝트를 생성하고 다음처럼 cvs에 연결을 시도한다.

    6.jpg
    5. 다음과 같이 추가된 cvs repository가 화면에 표시된다.

    7.jpg
    6. next를 누르면 프로젝트 관련 셋팅 화면이 뜨고 다시 누르면 다음과 같은 화면이 나온다.

    8.jpg
    7. finish 를 누르면 cvs와의 연결이 완료가 되었다는 노란색 막대기들이 보인다.

    9.jpg

    남기는 말
    설정상에서 화면 UI등이 바뀌고 cvs서버에서 Respond as cvs 1.11.2 to version request에 체크를 안해주면 eclipse에서 cvs연결시 repository prefix관련 에러가 발생하는거 말고는 기존의 cvs서버 셋팅과 크게 바뀐게 없다. 사용에 관련해서는 사실 UI자체도 별로 바뀐게 없기 때문에 기존의 문서를 참조하길 바란다. }

    Posted by WebProgrammer 1010
    05.JSP2008/07/25 16:24

    JSTL 기초, Part 2: core 분석 (한글)

    커스텀 태그를 이용한 플로우 제어와 URL 관리

    developerWorks
    문서 옵션
    이 페이지를 이메일로 보내기

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

    
    제안 및 의견
    피드백

    난이도 : 초급

    Mark Kolb, 소프트웨어 엔지니어

    2003 년 3 월 18 일
    2003 년 8 월 08 일 수정

    SP Standard Tag Library (JSTL) core 라이브러리는 이름이 말해주듯이, 범위(scoped) 변수를 관리하고 URL과 인터랙팅하는 등의 기본 기능과, 반복과 조건화 같은 근본적인 작동에 필요한 커스텀 태그를 제공한다. 이러한 태그들은 페이지 작성자가 직접 사용하기도 하지만 다른 JSTL 라이브러리와 함께 복잡한 표현 로직에 대한 토대를 제공한다.

    이 시리즈의 첫 번째 글에서 JSTL을 처음 보았을 것이다. 거기에서 데이터에 액세스 하고 작동하기 위해 expression language (EL)의 사용법을 설명했다. 여러분이 배운 것 처럼 EL은 JSTL 커스텀 태그의 애트리뷰트에 동적 값을 할당하는데 사용된다. 따라서 빌트인 액션과 기타 커스텀 태그 라이브러리용 요청 시간 애트리뷰트 값을 지정하는 JSP 식과 같은 역할을 한다.

    EL의 사용법을 설명하기 위해, core 라이브러리에서 세 개의 태그 (<c:set>, <c:remove>, <c:out>)를 소개했었다. <c:set><c:remove>는 범위 변수를 관리하는데 사용된다. <c:out>은 특별히 EL을 사용하여 계산된 값인 데이터 디스플레이에 사용된다. 기초 학습을 토대로 이제는 core 라이브러리의 나머지 태그를 볼 것이다. 두 가지 주요 카테고리로 나뉜다: 플로우 제어(플로우 제어)와 URL 관리.

    예제 애플리케이션

    JSTL 태그를 설명하기 위해서 실제 애플리케이션 예제를 사용할 것이다. 대중성과 인지도가 높아졌기 때문에 간단한 자바 기반의 Weblog를 사용할 것이다. (참고자료에서 JSP 페이지와 소스 코드를 다운로드 한다.) Weblog (blog)은 웹 기반 저널로서 Weblog의 작성자가 흥미를 가질만한 주제들에 대한 짧은 주석이다. 일반적으로 웹 상의 아티클이나 토의가 있는 곳 어디든 연결된다. 그림 1은 실행 중인 애플리케이션의 모습이다.


    그림 1. Weblog 애플리케이션
    Screenshot of the Weblog 예제 애플리케이션

    스무 개 정도의 자바 클래스가 전체 구현에 필요하지만 Weblog 애플리케이션 클래스에서는 단 두개(EntryUserBean)만이 프리젠테이션 레이어에 사용된다. JSTL 예제를 이해하려면 이들 두 개의 클래스가 필요하다. 그림 2는 EntryUserBean의 클래스 다이어그램이다.


    그림 2. Weblog 애플리케이션(클래스 다이어그램)
    Class diagram for Weblog 예제 애플리케이션

    Entry 클래스는 Weblog 내의 날짜가 나와있는 엔트리를 나타낸다. 이것의 id 애트리뷰트는 데이터베이스 내의 엔트리를 저장하고 검색하는데 사용된다. 반면 titletext 애트리뷰트는 엔트리의 실제 콘텐트를 나타낸다. 자바 Date 클래스 중 두 개의 인스턴스는 createdlastModified 애트리뷰트에 의해 레퍼런스되며 엔트리가 처음으로 만들어지고 마지막으로 편집 될 때 나타난다. author 애트리뷰트는 UserBean 인스턴스를 참조하면서 엔트리를 만든 사람을 나타낸다.

    The UserBean 클래스는 애플리케이션의 권한이 있는 사용자 정보(사용자 이름, 성명, 이메일 주소)를 저장한다. 이 클래스에는 관련 데이터베이스와 인터랙팅하기 위한 id 애트리뷰트도 포함되어 있다. 마지막 애트리뷰트인 rolesString 값 리스트를 참조하면서 애플리케이션 역할과 이에 상응하는 사용자를 구분한다. Weblog 애플리케이션의 경우 일반적인 역할은 "User" (모든 일반적인 애플리케이션 사용자 역할)와 "Author" (Weblog 엔트리를 만들고 편집할 수 있는 사용자를 지정하는 역할) 이다.

    이 기사의 다른 시리즈

    Part 1, "expression language" (2003년 2월)
    Part 3, "보여지는 것도 중요하다!" (2007년 3월)
    Part 4, "SQL과 XML 콘텐트에 액세스 하기" (2007년 4월)




    위로


    플로우 제어(Flow control)

    동적 애트리뷰트 값을 지정하는데 JSP 식 대용으로 EL이 사용될 수 있기 때문에 스크립팅 엘리먼트를 사용할 필요가 줄어들었다. 스크립팅 엘리먼트는 JSP 페이지에서 중요한 소스가 될 수 있기 때문에 간단한 대안을 제공한다는 것은 JSTL에 있어서 큰 이점이다.

    EL은 JSP 컨테이너에서 데이터를 검색하고 객체 계층을 오가며 간단한 작동을 수행한다. 데이터에 접근하여 조작하는 것 외에도 JSP 스크립팅 엘리먼트의 또 다른 사용 측면은 플로우 제어이다. 특히, 페이지 작성자가 반복되거나 조건적인 콘텐트를 구현하기 위해서 스크립틀릿을 의존한다는 것은 일반적인 일이다. 하지만 그와 같은 작동은 EL의 기능을 넘어서기 때문에, core 라이브러리는 반복, 조건화, 예외 처리 등의 형태로 플로우 제어를 관리 할 다양한 사용자 액션을 제공한다.

    반복

    웹 애플리케이션의 측면에서, 반복(iteration)은 데이터의 모음을 가져다가 디스플레이 하는데 주로 사용된다. 주로 테이블에 리스트나 열(row) 시퀀스의 형태로 나타난다. 반복 콘텐트를 구현하는 JSTL의 기본 액션은 <c:forEach> 커스텀 태그이다. 이 태그는 두 개의 다른 유형의 반복을 지원한다: 정수 범위내의 반복(이를 테면, 자바의 for 문)과 컬렉션 내의 반복(자바의 IteratorEnumeration 클래스).

    정수 범위 내에서 반복하려면 <c:forEach>(Listing 1)의 커스텀 태그의 신택스가 사용된다. beginend 애트리뷰트는 정적 정수 값 또는 정수 값을 계산하는 수식이 되어야한다. 이들은 각각 반복을 위한 인덱스의 초기 값과 반복이 멈추는 지점의 인덱스 값을 지정한다. <c:forEach>를 사용하여 정수 범위에서 반복할 때, 이 두개의 애트리뷰트가 필요하며 다른 모든 것들은 선택사항이다.


    Listing 1. <c:forEach> 액션을 통한 반복 신택스
    <c:forEach var="name" varStatus="name"
    begin="expression" end="expression" step="expression">
    body content
    </c:forEach>
    
    		

    step 애트리뷰트 또한 정수 값을 갖고 있어야한다. 매번 반복한 후에 인덱스에 추가될 양(amount)을 정한다. 따라서 반복 인덱스는 begin 애트리뷰트 값에서 시작하고 step 애트리뷰트의 값에 의해 증가하며 end 애트리뷰트의 값을 초과할 때 정지한다. step 애트리뷰트가 생략되면 step 크기는 1로 초기화된다.

    var 애트리뷰트가 지정되면 지정된 이름을 가진 범위 변수가 만들어지고 인덱스의 현재 값으로 할당된다. 이 범위 변수는 <c:forEach> 태그의 바디 내에서 액세스 될 수 있다. Listing 2는 <c:forEach> 액션의 예제이다.


    Listing 2. <c:forEach> 태그
    <table>
    <tr><th>Value</th>
        <th>Square</th></tr>
    <c:forEach var="x" begin="0" end="10" step="2">
      <tr><td><c:out value="${x}"/></td>
          <td><c:out value="${x * x}"/></td></tr>
    </c:forEach>
    </table>
    
    		

    이 예제 코드는 다섯 개 짝수의 제곱을 테이블로 만들었다. 그림 3이 그 결과이다 .


    그림 3. Listing 2의 결과
    Output of Listing 2

    컬렉션의 멤버들 사이를 반복할 때 <c:forEach> 태그의 추가 애트리뷰트인 items 애트리뷰트가 사용된다. (Listing 3). 이러한 형식의 <c:forEach> 태그를 사용할 때, items 애트리뷰트는 유일하게 필요한 애트리뷰트이다.


    >Listing 3. <c:forEach> 액션을 통한 반복 신택스
    <c:forEach var="name" items="expression" varStatus="name"
     begin="expression" end="expression" step="expression">
      body content
    </c:forEach>			
    		

    자바 플랫폼에서 제공되는 표준 컬렉션 타입은 <c:forEach> 태그에 의해 지원된다. 어레이 엘리먼트를 통해 반복할 때 이 액션을 사용할 수 있다. 표 1은 items 애트리뷰트에 의해 지원되는 값들의 리스트이다. 테이블의 마지막 열이 표시될 때, JSTL은 이것의 인터페이스(javax.servlet.jsp.jstl.sql.Result)를 정의한다.

    표 1. <c:forEach> 태그의 items 애트리뷰트에서 지원되는 컬렉션

    items item 값의 결과
    java.util.Collection 호출에서 iterator()까지의 엘리먼트
    java.util.Map java.util.Map.Entry의 인스턴스
    java.util.Iterator Iterator 엘리먼트
    java.util.Enumeration Enumeration 엘리먼트
    Object 인스턴스 어레이 Array 엘리먼트
    초기 값들의 어레이 래핑된 어레이 엘리먼트
    콤마로 나뉘어진 String 서브스트링
    javax.servlet.jsp.jstl.sql.Result SQL 쿼리의 열(row)

    Listing 4는 컬렉션을 통한 반복에 사용되는 <c:forEach> 태그이다. entryList 라는 범위 변수가 Entry 객체의 리스트로 설정되었다. <c:forEach> 태그가 이 리스트의 각 엘리먼트를 처리한다. blogEntry 라는 범위 변수로 이것을 할당하고 두 개의 테이블 열을 만든다. 하나는 Weblog 엔트리의 title 이고 다른 하나는 이것의 text이다. 이 속성들은 한 쌍의 <c:out> 액션과 이에 상응하는 EL 식을 통해 blogEntry 변수에서 검색된다. Weblog 엔트리의 타이틀과 텍스트에 HTML이 포함되어있기 때문에 <c:out>escapeXml 애트리뷰트는 false로 설정된다. (그림 4).


    Listing 4. <c:forEach> 태그를 사용하여 Weblog 엔트리 디스플레이 하기
    <table>
      <c:forEach items="${entryList}" var="blogEntry">
        <tr><td align="left" class="blogTitle">
          <c:out value="${blogEntry.title}" escapeXml="false"/>
        </td></tr>
        <tr><td align="left" class="blogText">
          <c:out value="${blogEntry.text}" escapeXml="false"/>
        </td></tr>
      </c:forEach>
    </table>
    		


    그림 4. Listing 4의 결과
    Output of Listing 4

    남아있는 <c:forEach> 애트리뷰트인 varStatus는 정수 범위의 반복이나 컬렉션 범위의 반복에서 똑같은 역할을 한다. var 애트리뷰트와 마찬가지로, varStatus는 범위 변수를 만드는데 사용된다. 현재 인덱스 값이나 현재 엘리먼트를 저장하는 대신에 이 변수는 javax.servlet.jsp.jstl.core.LoopTagStatus 의 인스턴스로 할당된다. 이 클래스는 일련의 속성을 정의한다. (표 2).

    표 2. LoopTagStatus 객체의 속성

    속성 Getter Description
    current getCurrent() 현재 반복 라운드 아이템
    index getIndex() 현재 반복 라운드의 제로 기반(zero-based) 인덱스
    count getCount() 현재 반복 라운드의 1 기반(one-based) 인덱스
    first isFirst() 현재 라운드가 반복을 통한 첫 번째 패스임을 나타내는 플래그
    last isLast() 반복현재 라운드가 반복을 통한 마지막 패스임을 나타내는 플래그
    begin getBegin() begin 애트리뷰트의 값
    end getEnd() end 애트리뷰트의 값
    step getStep() step 애트리뷰트의 값

    Listing 5는 varStatus 애트리뷰트가 사용되는 방법을 나타낸 예제이다. Listing 4의 코드를 수정하여 Weblog 엔트리의 숫자세기를 타이틀을 디스플레이하는 테이블 열에 추가한다. 이것은 varStatus 애트리뷰트의 값을 지정하고 결과 범위 변수의 카운트 속성에 액세스 하면 된다. 결과는 그림 5 이다.


    Listing 5. varStatus 애트리뷰트를 사용하여 Weblog 엔트리의 카운트 디스플레이하기
    <table>
      <c:forEach items=
        "${entryList}" var="blogEntry" varStatus="status">
        <tr><td align="left" class="blogTitle">
          <c:out value="${status.count}"/>.
          <c:out value="${blogEntry.title}" escapeXml="false"/>
        </td></tr>
        <tr><td align="left" class="blogText">
          <c:out value="${blogEntry.text}" escapeXml="false"/>
        </td></tr>
      </c:forEach>
    </table>
    
    		


    그림 5. Listing 5의 결과
    Output of Listing 5

    <c:forEach> 이외에도, core 라이브러리는 두 번째 반복 태그인 <c:forTokens>를 제공한다. 이것의 액션은 자바의 StringTokenizer 클래스의 JSTL 이다. <c:forTokens> 태그(Listing 6)는 컬렉션 지향 버전의 <c:forEach>와 같은 애트리뷰트를 갖고 있다. <c:forTokens>의 경우 토큰화 될 스트링은 items 애트리뷰트를 통해 지정되는 반면 토큰을 만드는데 사용되는 지정자(deliniter)는 delims 애트리뷰트를 통해 제공된다. <c:forEach> 경우와 마찬가지로, begin, end, step애트리뷰트를 사용하여 토큰이 상응하는 인덱스 값들과 매칭되는 것에 프로세스 되도록 제한 할 수 있다.


    Listing 6. <c:forTokens> 액션
    <c:forTokens var="name" items="expression"
        delims="expression" varStatus="name"
        begin="expression" end="expression" step="expression">
      body content
    </c:forTokens>
    
    		

    조건화

    동적 콘텐트를 포함하고 있는 웹 페이지라면 다양한 형식의 콘텐트를 볼 수 있는 다양한 사용자 카테고리가 필요할 것이다. Weblog에서 방문자들은 엔트리를 읽고 피드백을 제출 할 뿐만 아니라 권한을 받은 사용자는 새로운 엔트리를 게시하거나 기존 콘텐트를 편집할 수 있어야 한다.

    JSP 페이지 내에 그러한 기능을 구현하고 리퀘스트 기반으로 디스플레이 하고자하는 것을 제어하도록 조건 로직을 사용함으로서 가용성과 소프트웨어 관리는 향상된다. core 라이브러리는 두 개의 다른 조건화 태그인 <c:if><c:choose>를 제공하는데 다음의 기능들을 구현한다.

    이 두 가지 액션 중 좀더 단순한 <c:if>는 간단한 테스트 식을 계산한 다음 식이 true로 되었을 때만 바디 콘텐트를 처리한다. 그렇지 않다면 태그의 바디 콘텐트는 무시된다. Listing 7에서 보듯, <c:if>는 테스트의 결과를 varscope 애트리뷰트를 통해 범위 변수로 할당할 수 있다. 이 기능은 테스트 비용이 비쌀 경우 유용하다. 결과는 범위 변수에 캐시되고 <c:if>나 다른 JSTL 태그로의 연속 호출시에 검색된다.


    Listing 7. <c:if> 조건 액션 신택스
    <c:if test="expression" var="name" scope="scope">
      body content
    </c:if>
    
    		

    Listing 8은 <c:forEach> 태그의 LoopTagStatus 객체의 first 속성으로 사용된 <c:if> 를 보여준다. 이 경우, 그림 6 에서 보듯, Weblog 엔트리의 구현 날짜는 첫 번째 엔트리 위에 디스플레이 된다. 하지만 다른 엔트리 앞에 반복되지 않는다.


    Listing 8. <c:if>를 사용하여 Weblog 엔트리 날짜 디스플레이 하기
    <table>
    <c:forEach items=
    "${entryList}" var="blogEntry" varStatus="status">
    <c:if test="${status.first}">
    <tr><td align="left" class="blogDate">
    <c:out value="${blogEntry.created}"/>
    </td></tr>
    </c:if>
    <tr><td align="left" class="blogTitle">
    <c:out value="${blogEntry.title}" escapeXml="false"/>
     </td></tr>
    <tr><td align="left" class="blogText">
    <c:out value="${blogEntry.text}" escapeXml="false"/>
    </td></tr>
    </c:forEach>
    </table>
    
    		


    그림 6. Listing 8의 결과
    Output of Listing 8

    Listing 8 처럼, <c:if> 태그는 조건화된 콘텐트에 대해 매우 간략한 노트를 제공한다. 디스플레이 되어야하는 콘텐트가 무엇인지를 결정해야하는 중립적인 테스트가 필요할 경우, JSTL core 라이브러리는 <c:choose> 액션을 제공한다. <c:choose> 신택스는 Listing 9와 같다.


    Listing 9. <c:choose> 액션 신택스
    <c:choose>
      <c:when test="expression">
        body content
      </c:when>
      ...
      <c:otherwise>
        body content
      </c:otherwise>
    </c:choose>
    
    		

    테스트 되는 각 조건은 상응하는 <c:when> 태그에 의해 나타난다. testtrue로 평가된 첫 번째 <c:when> 태그의 콘텐트만 프로세스된다. 어떤 <c:when> 테스트도 true로 리턴되지 않으면 <c:otherwise> 태그의 바디 콘텐트가 프로세스 된다. <c:otherwise> 태그가 선택적이라는 것을 주목하라. <c:choose> 태그는 최대 한 개의 중첩 <c:otherwise> 태그를 가질 수 있다. 모든 <c:when> 테스트가 false가 되고 어떤 <c:otherwise> 액션도 나타나지 않으면 <c:choose> 바디 콘텐트는 프로세스 되지 않는다.

    Listing 10은 <c:choose> 태그의 실행 예제이다. 여기에서 프로토콜 정보는 리퀘스트 객체에서 검색되고 간단한 스트링 비교를 사용하여 테스트된다. 테스트 결과에 따라 상응하는 텍스트 메시지가 디스플레이된다.


    Listing 10. <c:choose>를 이용한 콘텐트 조건화
    <c:choose>
      <c:when test="${pageContext.request.scheme eq 'http'}">
        This is an insecure Web session.
      </c:when>
      <c:when test="${pageContext.request.scheme eq 'https'}">
        This is a secure Web session.
      </c:when>
      <c:otherwise>
        You are using an unrecognized Web protocol. How did this happen?!
      </c:otherwise>
    </c:choose>
    		

    예외 처리

    마지막 플로우 제어 태그는 <c:catch>이다. 이것은 JSP 페이지 내에서 기본적인 예외처리를 담당한다. 좀더 구체적으로 말하면 이 태그의 바디 콘텐트 내에서 발생하는 모든 예외가 잡히면 무시된다. 하지만 예외가 발생하고 <c:catch> 태그의 선택적인 var 애트리뷰트가 지정되면 예외는 지정된 변수로 할당되어 페이지 자체 내에서 에러 처리를 할 수 있다. Listing 11은 <c:catch>의 신택스이다. (예제는 Listing 18이다)


    Listing 11. <c:catch> 실행 신택스
    <c:catch var="name">
      body content
    </c:catch>
    		




    위로


    URL 작동

    JSTL core 라이브러리의 나머지 태그는 URL에 초점을 맞춘다. 이 중 첫 번째는 <c:url> 태그인데 URL 생성에 사용된다. 특히, <c:url>은 J2EE 웹 애플리케이션용 URL을 구현할 때 중요하게 쓰이는 세 가지 엘리먼트를 제공한다:

    • 현재 서블릿 콘텍스트 이름이 됨
    • 세션 관리를 위한 URL 재작성
    • 요청 매개변수 이름과 값의 URL 인코딩

    value 애트리뷰트가 사용되었다. 기본 URL을 지정하기 위해서. 태그는 필요할 경우 변형한다. 이 기본 URL이 포워드 슬래시로 시작하면 서블릿 콘텍스트 이름이 만들어진다. 구체적인 콘텍스트 이름은 context 애트리뷰트를 사용하여 제공될 수 있다. 이 애트리뷰트가 생략되면 현재 서블릿 콘텍스트 이름이 사용된다. 서블릿 콘텍스트 이름이 개발 보다는 전개 시에 결정될 때 유용하다.


    isting 12. <c:url> 작동 신택스
    <c:url value="expression" context="expression"
        var="name" scope="scope">
      <c:param name="expression" value="expression"/>
      ...
    </c:url>
    
    		

    URL 재작성은 <c:url> 작동에 의해 자동적으로 수행된다. JSP 컨테이너가 사용자의 현재 세션 아이디를 저장하고 있는 쿠키를 검사하면 재작성은 필요없다. 쿠키가 존재하지 않으면 <c:url>로 만들어진 모든 URL은 재작성되어 세션 아이디를 인코딩한다. 계속되는 요청에도 적절한 쿠키가 존재하지 않으면 <c:url>은 이 아이디를 포함하기 위한 URL 재작성을 멈춘다.

    var 애트리뷰트를 위해 값이 제공되면 생성된 URL은 특정 범위 변수의 값으로 할당된다. 그렇지 않다면 결과 URL은 현제 JspWriter를 사용하여 아웃풋이 된다. 결과를 직접 산출하는 기능은 <c:url> 태그가 값으로서 나타날 수 있도록 한다. 예를들어 HTML의 <a> 태그의 href 애트리뷰트와 같다.


    Listing 13. HTML 태그용 애트리뷰트 값으로 URL 생성하기
    <a href="<c:url value='/content/sitemap.jsp'/>">View sitemap</a>
    
    		

    마지막으로 모든 요청 매개변수가 중첩된 <c:param> 태그를 통해 지정되면 그들의 이름과 값은 HTTP GET 요청용 표준 표기법을 사용하여 생성된 URL에 붙여진다. 또한 URL 인코딩이 수행된다. 유효 URL을 만들어내기 위해 변형되어야하는 매개변수의 이름 또는 값에 나타나는 모든 문자는 적절히 변환된다.


    Listing 14. 요청 매개변수를 가진 URL 만들기
    <c:url value="/content/search.jsp">
      <c:param name="keyword" value="${searchTerm}"/>
      <c:param name="month" value="02/2003"/>
    </c:url>
    
    		

    Listing 14의 JSP 코드는 blog이라는 이름의 서블릿 콘텍스트에 전개되었다. 범위 변수 searchTerm의 값은 "core library"로 설정되었다. 세션 쿠키가 탐지되면 Listing 14에서 만들어진 URL은 Listing 15와 같다.


    Listing 15. 세션 쿠키가 있는 상태에서 만들어진 URL
    /blog/content/search.jsp?keyword=foo+bar&month=02%2F2003
    
    		

    어떤 세션 쿠키도 없으면 Listing 16의 URL이 그 결과이다. 서블릿 콘텍스트가 프리펜드 되었고 URL 인코딩이된 요청 매개변수가 붙었다.


    Listing 16. 세션 쿠키 없이 만들어진 URL
    /blog/content/search.jsp;jsessionid=233379C7CD2D0ED2E9F3963906DB4290
      ?keyword=foo+bar&month=02%2F2003
    		




    위로


    중요한 콘텐트

    JSP는 두 개의 빌트인 메커니즘을 갖고 있어 다른 URL에서 온 콘텐트를 JSP 페이지로 만든다. 그것이 바로 include 지시문과 <jsp:include> 작동이다. 두 경우 모두, 포함되어야 하는 콘텐트가 페이지로서 같은 웹 애플리케이션의 부분이 되어야 한다. 두 가지 태그의 주요 차이점은 include 지시문은 페이지가 컴파일하는 동안 포함된 콘텐트를 결합하고 <jsp:include> 액션은 JSP 페이지의 요청 프로세스 동안 작동한다는 것이다.

    core 라이브러리의 <c:import> 액션은 더욱 일반적이면서 강력한 버전의 <jsp:include>라 할 수 있다. <jsp:include> 처럼, <c:import>는 요청 시간 작동이고 기본 태스크는 다른 웹 리소스의 콘텐트를 JSP 페이지에 삽입하는 것이다.


    >Listing 17. <c:import>작동 신택스
    <c:import url="expression" context="expression"
        charEncoding="expression" var="name" scope="scope">
      <c:param name="expression" value="expression"/>
      ...
    </c:import>
    
    		

    임포트 되어야하는 콘텐트용 URL은 url 애트리뷰트를 통해 지정된다. 관련 URL이 허용되고 현재 페이지의 URL에 대비하여 분해된다. url 애트리뷰트의 값은 포워드 슬래시로 시작한다. 하지만 로컬 JSP 컨테이너 내에서는 절대 URL로서 인터프리팅된다. context 애트리뷰트 값 없이는 그와 같은 절대 URL은 현재 서블릿 콘텍스트에서 리소스를 참조하는 것으로 간주된다. 명확한 콘텍스트가 context 애트리뷰트를 통해 지정되면 절대(로컬) URL은 이름을 가진 서블릿 콘텍스트에 대해 분해된다.

    <c:import> 액션은 로컬 콘텐트 접근에만 제한되지 않는다. 프로토콜과 호스트 이름을 포함한 전체 URI는 url 애트리뷰트의 값으로 지정될 수 있다. 사실 프로토콜은 HTTP로 제한되지 않는다. java.net.URL 클래스로 지원되는 모든 프로토콜은 <c:import>url 애트리뷰트용 값에서 사용된다. (Listing 18).

    <c:import> 액션은 FTP 프로토콜을 통해 액세스 되는 문서의 콘텐트를 포함하는데 사용된다. <c:catch> 액션은 FTP 파일 전송 동안 발생하는 모든 에러를 처리하기 위해 사용된다. <c:catch>var 변수를 사용하여 예외용 범위 변수를 지정하고 <c:if>를 사용하여 값을 검사하면 된다. 예외가 발생하면 범위 변수로의 할당이 발생한다.


    Listing 18. <c:import>와 <c:catch>의 결합 예제
    <c:catch var="exception">
      <c:import url="ftp://ftp.example.com/package/README"/>
    </c:catch>
    <c:if test="${not empty exception}">
      Sorry, the remote content is not currently available.
    </c:if>
    		

    <c:import> 액션의 마지막 두 개의 애트리뷰트는 varscope이다. var 애트리뷰트는 지정된 유알엘에서 가져온 콘텐트가 현재의 JSP 페이지에 포함되도록 하는 것이 아니라 변수에 저장되도록 한다. scope 애트리뷰트는 이 변수의 범위 지정을 제어하고 페이지 범위를 초기화한다.




    위로


    요청 리다이렉션(redirection)

    마지막 core 라이브러리 태그는 <c:redirect>이다. 이 액션은 HTTP 리다이렉트 응답을 사용자 브라우저로 보내는데 사용되며, JSTL의 javax.servlet.http.HttpServletResponsesendRedirect() 메소드와 같다. 이 태그의 urlcontext 애트리뷰트 (Listing 19) 작동은 <c:import>urlcontext 애트리뷰트와 같다.


    Listing 19. <c:redirect>action
    <c:redirect url="expression" context="expression">
      <c:param name="expression" value="expression"/>
      ...
    </c:redirect>
    
    		

    Listing 20은 <c:redirect> 작동 모습이다. Listing 18의 에러 메시지를 지정된 에러 페이지 리다이렉트로 대체한다. 이 예제에서 <c:redirect> 태그는 표준 <jsp:forward> 작동과 비슷한 방식으로 사용된다. 요청 디스패쳐를 통한 포워딩은 서버쪽에서 구현되지만 리다이렉트는 브라우저에서 수행된다. 개발자의 관점에서 보면 포워딩은 리다이렉팅보다 효율적이다. 하지만 <c:redirect> 액션이 좀더 유연하다. <jsp:forward>는 현재 서블릿 콘텍스트 내에서 다른 JSP 페이지로만 디스패치 할 수 있기 때문이다.


    Listing 20. 예외에 대한 응답으로 리다이렉팅
    <c:catch var="exception">
      <c:import url="ftp://ftp.example.com/package/README"/>
    </c:catch>
    <c:if test="${not empty exception}">
      <c:redirect url="/errors/remote.jsp"/>
    </c:if>
    
    		

    소셜 북마크

    mar.gar.in mar.gar.in
    digg Digg
    del.icio.us del.icio.us
    Slashdot Slashdot

    사용자 관점과의 주요 차이점은 리다이렉트가 브라우저로 디스플레이된 URL을 업데이트하고 북마크 설정에 영향을 미친다는 것이다. 반면 포워딩은 엔드유저에게 투명하다. <c:redirect><jsp:forward> 중의 선택은 사용자 경험에 따라 달라진다.



    참고자료



    필자소개

    Mark Kolb는소프트웨어 엔지니어이며 Web Development with JavaServer Pages, 2nd Edition의 공동 저자이다.

    Posted by WebProgrammer 1010
    05.JSP2008/07/25 16:22

    JSTL 기초, Part 1: Expression Language (한글)

    JSP 애플리케이션용 MA 단순화하기

    developerWorks
    문서 옵션
    이 페이지를 이메일로 보내기

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

    
    제안 및 의견
    피드백

    난이도 : 초급

    Mark A. Kolb, 소프트웨어 엔지니어

    2003 년 2 월 11 일
    2003 년 11 월 18 일 수정

    JSP Standard Tag Library (JSTL)은 일반적인 웹 애플리케이션 기능(반복(iteration)과 조건, 데이터 관리 포맷, XML 조작, 데이터베이스 액세스)을 구현하는 커스텀 태그 라이브러리 모음이다. 소프트웨어 엔지니어인 Mark Kolb은 JSTL 태그의 사용방법을 설명한다. 표현층(presentation layer)에서 소스 코드를 제거하여 소프트웨어 관리를 단순화시키는 방법도 설명한다. 이외에도 JSTL의 단순화된 Expression Language에 대한 설명도 포함되어 있다.

    JavaServer Pages (JSP)는 J2EE 플랫폼을 위한 표준 표현 레이어(presentation-layer) 이다. JSP는 페이지 콘텐트를 동적으로 생성할 수 있는 전산을 수행 할 수 있는 스크립팅 엘리먼트와 액션을 제공한다. 스크립팅 엘리먼트는 프로그램 소스 코드가 JSP 코드에 포함될 수 있도록 한다. 페이지가 사용자 요청에 대한 응답으로 렌더링 될 때 실행할 목적이다. 액션(actions)은 전산 작동을 JSP 페이지의 템플릿 텍스트를 구성하고 있는 HTML 이나 XML과 거의 흡사하게하는 태그로 인캡슐한다. JSP 스팩에 표준으로 정의된 몇 가지의 액션들이 있다. 하지만 JSP 1.1 부터 개발자들은 커스텀 태그 라이브러리 형태로 자신만의 액션들을 만들 수 있다.

    JSP Standard Tag Library (JSTL)는 JSP 1.2 커스텀 태그 라이브러리 모음으로서 광범위한 서버측 자바 애플리케이션에 일반적으로 쓰이는 기본 기능들을 구현한다. JSTL은 데이터 포맷, 반복 콘텐트 또는 조건 콘텐트 같은 전형적인 표현 레이어를 위한 표준 구현을 제공하기 때문에, JSP 작성자들이 애플리케이션 개발에 집중하는데 도움이 된다.

    물론, 스크립틀릿, 익스프레션, 선언 같은 JSP 스크립팅 엘리먼트를 사용하는 태스크를 구현할 수 있다. 예를 들어 조건 콘텐트(conditional content)는 세 개의 스크립틀릿(Listing 1의 하이라이트 부분)을 사용하여 구현될 수 있다. 페이지 내에 프로그램 소스 코드를 임베딩하는 것에 의존하기 때문에 스크립팅 엘리먼트가 소프트웨어 관리 태스크를 매우 복잡하게 하는 경향이있더라도 JSP 페이지는 그들을 사용한다. Listing 1의 스크립틀릿 예제는 브레이스들의 적절한 매칭에 매우 의존한다. 조건화된 콘텐트 내에 추가 스크립틀릿을 중첩하는 것은 신택스 에러가 갑자기 일어났다면 페이지가 JSP 콘테이너에 의해 컴파일 될 때 결과 에러 메시지를 합리화하는 것은 도전이 될 수 있다.


    Listing 1. 스크립틀릿을 통해 조건 콘텐트 구현하기
      <% if (user.getRole() == "member")) { %>
        <p>Welcome, member!</p>
    <% } else { %>
        <p>Welcome, guest!</p>
    <% } %>
    

    그와 같은 프로그램을 해결하는데에는 프로그래밍 경험이 많이 필요하다. JSP 페이지의 마크업이 페이지 레이아웃과 그래픽 디자인에 익숙한 디자이너에 의해 개발 및 관리되는데 반해 그와 같은 페이지 내의 스크립팅 엘리먼트는 문제가 생길 때 프로그래머가 개입해야한다. 하나의 파일안에 있는 코드에 대한 책임을 공유하는 것은 JSP 페이지의 개발, 디버깅, 향상을 성가신일로 만든다. JSTL은 일반적인 기능을 커스텀 태그 라이브러리의 표준 세트로 패키징했기 때문에 JSP 작성자들이 스크립팅 엘리먼트에 대한 필요를 줄이고 관련된 관리 비용을 피할 수 있도록 한다.

    이 기사의 다른 시리즈

    Part 2, "core 분석" (2003년 3월)
    Part 3, "보여지는 것도 중요하다!" (2007년 3월)
    Part 4, "SQL과 XML 콘텐트에 액세스 하기" (2007년 4월)




    위로


    JSTL 1.0

    02년 6월에 릴리스된 JSTL 1.0은 네 개의 커스텀 태그 라이브러리(core, format, xml, sql)와 두 개의 범용 태그 라이브러리 밸리데이터(ScriptFreeTLV & PermittedTaglibsTLV)로 구성되어 있다. core 태그 라이브러리는 커스텀 액션을 제공하여 범위 변수를 통해 데이터를 관리할 수 있도록하며 페이지 콘텐트의 반복과 조건화를 수행할 수 있도록 한다. 또한 URL에서 생성 및 작동할 수 있는 태그도 제공한다. format 태그 라이브러리는 이름이 시사하는 바와 같이 데이터 특히 숫자와 날짜를 포맷하는 액션을 정의한다. 국지화 된 리소스 번들을 사용하여 JSP 페이지의 국제화도 지원한다. xml 라이브러리에는 XML을 통해 표현된 데이터를 조작할 수 있는 테그가 포함되어 있다. sql 라이브러리는 관계형 데이터베이스를 쿼리하는 액션을 정의한다.

    두 개의 JSTL 태그 라이브러리 밸리데이터는 개발자들이 JSP 애플리케이션 내에서 표준을 코딩하도록 한다. ScriptFreeTLV 밸리데이터를 설정하여 JSP 페이지 내에 있는 다양한 스크립팅 엘리먼트(스크립틀릿, 표현, 선언)의 다양한 유형을 사용하는 것을 막는다. 이와 비슷하게 PermittedTaglibsTLV 밸리데이터는 애플리케이션의 JSP 페이지들에 의해 액세스된 커스텀 태그 라이브러리(JSTL 태그 라이브러리 포함)을 제한한다.

    JSTL은 J2EE 플랫폼에 필요한 컴포넌트가 될 것이지만 적은 수의 애플리케이션 서버들만이 이를 포함하고 있는 것이 현실이다. JSTL 1.0의 레퍼런스 구현은 Apache Software Foundation의 Jakarta Taglibs 프로젝트의 일부로서 사용할 수 있다. (참고자료). 레퍼런스 구현에 있는 커스텀 태그 라이브러리는 JSTL 지원을 추가하기 위해 JSP 1.2와 Servlet 2.3 이상 스팩을 지원하는 모든 애플리케이션 서버에 통합될 수 있다.




    위로


    Expression language

    JSP 1.2에서 JSP 액션의 애트리뷰트는 정적 캐릭터 스트링이나 익스프레션을 사용하여 지정된다. 예를 들어 Listing 2의 경우 정적 값들은 <jsp:setProperty> 액션의 nameproperty 애트리뷰트를 위해 지정된다. 반면 익스프레션은 이것의 값 애트리뷰트를 지정하는데 사용된다. 이 액션은 요청 매개변수의 현재 값을 이름이 붙여진 빈 속성으로 할당하는 효과를 갖고 있다. 이러한 방식으로 사용된 익스프레션은 request-time attribute values이라 일컬어지며 애트리뷰트 값을 동적으로 지정하기위한 JSP 스팩에 내장된 유일한 메커니즘이다.


    Listing 2. request-time attribute value을 결합하는 JSP 액션
    <jsp:setProperty name="user" property="timezonePref"
              value='<%= request.getParameter("timezone") %>'/>
    
    

    request-time attribute values가 익스프레션을 사용하여 지정되기 때문에 다른 스크립팅 엘리먼트와 같은 소프트웨어 관리 문제가 일어날 수 있다. 이런 이유로 인해 JSTL 커스텀 태그는 동적 애트리뷰트 값을 지정하기 위한 대안 메커니즘을 지원한다. JSP 익스프레션을 사용하는 것 보다 JSTL 액션용 애트리뷰트 값이 단순화 된 expression language (EL)를 사용하여 지정될 수 있다. EL은 JSP 컨테이너에 있는 데이터를 검색 및 조작할 식별자, 접근자, 연산자를 제공한다. EL은 EcmaScript(참고자료)와 XML Path Language (XPath)에 약간 의존하기 때문에 신택스는 페이지 디자이너와 프로그래머 모두 에게 익숙하다. EL은 객체와 속성들을 검색하면서 간단한 작동을 수행한다. 이것은 프로그래밍 언어도 스크립팅 언어도 아니다. JSTL 태그와 결합하면 간단하고 편리한 표기를 사용하여 복잡한 작동이 표현될 수 있다. EL 익스프레션은 달러 표시($)와 중괄호 ({})를 앞에 붙여 사용하여 범위를 정한다.(Listing 3)


    Listing 3. JSTL 액션: EL 익스프레션 범위 지정
    <c:out value="${user.firstName}"/>
    
    

    여러개의 익스프레션들과 정적 텍스트를 결합하여 스트링 연결을 통해 동적 애트리뷰트 값을 만들 수 있다.(Listing 4). 개별 익스프레션들은 식별자, 접근자, 리터럴, 연산자로 구성되어 있다. 식별자는 데이터 센터에 저장된 데이터 객체를 참조하는데 사용된다. EL은 11 개의 식별자를 보유하고 있다. 11 개의 EL 내장 객체에 상응하는 것들이다. 다른 모든 식별자들은 범위 변수를 참조하는 것으로 간주된다. 접근자는 객체의 속성 또는 컬렉션의 엘리먼트를 검색하는데 사용된다. 리터럴은 고정된 값들(숫자, 문자, 스트링, 부울, null)을 나타낸다. 연산자는 데이터와 리터럴이 결합 및 비교될 수 있도록 한다.


    Listing 4. 정적 텍스트와 여러 EL 익스프레션을 결합하여 동적 애트리뷰트 값 지정하기
    <c:out value="Hello ${user.firstName} ${user.lastName}"/>
    
    




    위로


    범위 변수(Scoped variables)

    <jsp:useBean> 액션을 통한 JSP 에이피아이는 데이터가 저장될 수 있도록 하며 JSP 컨테이너 내에 네 개의 다른 범위에서 데이터가 검색될 수 있도록 한다. JSTL은 이러한 범위 내에 객체를 할당하고 제거할 추가 액션을 제공한다. 더욱이, EL은 범위 변수 같은 객체들을 검색하는 빌트인 지원을 제공한다. 특히 EL의 내장 객체 중 하나라도 상응하지 않는 EL 익스프레션에 있는 식별자는 네 개의 JSP 스콥 중 하나에 저장된 객체를 참조하는 것으로 자동 간주된다:

    • 페이지 범위
    • 요청 범위
    • 세션 범위
    • 애플리케이션 범위

    페이지 범위에 저장된 객체들은 특정 요청에 대한 페이지가 프로세스 되는 동안 검색될 수 있다. 요청 범위 내에 저장된 객체들은 요청 프로세스에 참여한 모든 페이지들이 프로세스 하는 동안 검색될 수 있다. 객체가 세션 범위에 저장되어있다면 웹 애플리케이션과의 단일 인터랙트브 세션 동안 사용자가 액세스 한 페이지로 검색될 수 있다. 웹 애플리케이션이 언로드(unload) 될 때 까지 애플리케이션 범위에 저장된 객체는 모든 페이지에서 접근가능하며 모든 사용자들이 접근할 수 있다.

    캐릭터 스트링을 희망하는 범위에 있는 객체로 매핑하여 범위안에 객체를 저장할 수 있다. 이러한 경우에는 같은 캐릭터 스트링을 제공하여 범위에서 객체를 검색할 수도 있다. 스트링은 범위 매핑 중 검색되고 매핑된 객체는 리턴된다. Servlet API 내에서 그와 같은 객체들은 상응하는 범위의 애트리뷰트로서 언급된다. EL의 경우 애트리뷰트와 관련된 캐릭터 스트링은 변수 이름으로 간주될 수도 있다.

    EL에서 내장 객체들과 관련이 없는 식별자들은 JSP 범위에 저장된 객체들을 명명하는 것으로 간주된다. 그와 같은 식별자는 페이지 범위를 검사하고 그 다음에는 요청 범위, 세션 범위, 애플리케이션 범위 순으로 검사한다. 식별자의 이름이 그 범위에 저장된 객체 이름과 매칭되는지의 여부가 테스트된다. 첫 번째 매치는 EL 식별자의 값으로 리턴된다. EL 식별자는 범위 변수를 참조하는 것으로 간주될 수 있다.

    기술적인 관점에서 보면 내장 객체로 매핑하지 않는 식별자는 PageContext 인스턴스의 findAttribute() 메소드를 사용하여 평가되면서 현재 핸들되는 요청에 대해 익스프레션이 발생하는 페이지의 프로세싱을 나타낸다. 식별자의 이름은 이 메소드에 대한 인자로서 전달된다. 이것은 같은 이름을 가진 애트리뷰트에 대한 네 개의 범위를 검색한다. 발견된 첫 번째 매치는 findAttribute() 메소드 값으로 리턴된다. 그와 같은 애트리뷰트가 네 개의 범위 중에 없으면 null이 리턴된다.

    궁극적으로 범위 변수는 네 개의 EL 식별자로서 사용될 수 있는 이름을 가진 JSP 범위의 에트리뷰트라고 할 수 있다. 영숫자 이름으로 할당되는 한 범위 변수는 JSP 에 존재하는 모든 메커니즘으로 만들어져 애트리뷰트를 설정할 수 있다. 여기에는 빌트인 <jsp:useBean> 액션은 물론 setAttribute() 메소드가 포함된다. 게다가 네 개의 JSTL 라이브러리에서 정의된 많은 커스텀 태그들은 스스로 범위 변수로서 애트리뷰트 값을 설정할 수 있다.




    위로


    내장 객체(Implicit objects)

    11 개의 EL 내장 객체용 식별자는 표 1과 같다. JSP 내장 객체와 혼동하지 말것!

    표 1. EL 내장 객체

    Category 식별자 설명
    JSP pageContext 현재 페이지의 프로세싱과 상응하는 PageContext 인스턴스
    범위 pageScope 페이지 범위 애트리뷰트 이름과 값과 관련된 Map
    requestScope 요청 범위 애트리뷰트 이름과 값과 관련된 Map
    sessionScope 세션 범위 애트리뷰트 이름과 값과 관련된 Map
    applicationScope 애플리케이션 범위 애트리뷰트 이름과 값과 관련된 Map
    요청 매개변수 param 요청 매개변수의 기본 값을 이름으로 저장하는 Map
    paramValues 요청 매개변수의 모든 값을 String 어레이로서 저장하는 Map
    요청 헤더 header 요청 헤더의 기본 값을 이름으로 저장하는 Map
    headerValues 요청 헤더의 모든 값을 String 어레이로서 저장하는 Map
    쿠키 cookie 요청에 수반되는 쿠키들을 이름으로 저장하는 Map
    초기화 매개변수 initParam 웹 애플리케이션의 콘텍스트 초기화 매개변수를 이릉으로 저장하는 Map

    JSP와 EL 내장 객체가 일반적인 하나의 객체를 갖는 반면(pageContext) 다른 JSP 내장 객체는 EL에서 접근 가능하다. 페이지콘텍스트가 다른 8 개의 JSP 내장 객체 모두에 액세스 할 수 있는 속성을 갖고 있기 때문이다.

    남아있는 모든 EL 내장 객체들은 맵(map)이다. 이름에 상응하는 객체들을 탐색한다. 첫 번째 네 개의 맵은 이전에 언급한 다양한 애트리뷰트 범위를 나타낸다. 특정 범위 내의 식별자들을 검색하는데 사용될 수 있다. EL이 기본적으로 사용하는 순차적인 탐색 프로세스에 의존하지 않는다.

    다음 네 개의 맵은 요청 매개변수와 헤더의 값을 반입하는 용도이다. HPPT 프로토콜이 요청 매개변수와 헤더가 다중 값을 가질 수 있도록 하기 때문에 각각 한 쌍의 맵이 있다. 각 쌍 중에서 첫 번째 맵은 요청 매개변수 또는 헤더에 대한 기본 값을 리턴한다. 실제 요청 시 첫 번째로 지정된 값이 무엇이든 상관없다. 두 번째 맵은 매개변수나 헤더의 값 모두 검색될 수 있도록 한다. 이 맵의 핵심은 매개변수 또는 헤더의 이름이다. 값들은 String 객체의 어레이이다.

    쿠키 내장 객체는 요청으로 설정된 쿠키에 대한 접근을 제공한다. 이 객체는 요청과 관련된 모든 쿠키들의 이름을 Cookie 객체들로 매핑하면서 쿠키들의 속성을 나타낸다.

    마지막 EL 내장 객체인 initParam은 웹 애플리케이션과 관련된 모든 콘텍스트 초기와 매개변수의 이름과 값을 저장하는 맵이다. 초기화 매개변수들은애플리케이션의 WEB-INF 디렉토리에 있는 web.xml 전개 디스크립터 파일을 통해 정의된다.




    위로


    접근자(Accessors)

    EL 식별자는 내장 객체 또는 범위 변수로서 설명될 수 있기 때문에 자바 객체로 평가해야한다. EL은 상응하는 자바 클래스에서 프리머티브를 래핑/언래핑한다. 하지만 대부분의 경우 식별자들은 자바 객체에 대한 포인터가 된다.

    결과적으로 이러한 객체들의 속성이나, 어레이와 컬렉션의 경우 그들의 엘리먼트에 액세스하는 것이 바람직하다. 이를 위해 EL은 두 개의 다른 접근자를 제공한다. 닷(dot) 오퍼레이터(.)와 브래킷 오퍼레이터([])이다. 이들은 속성과 엘리먼트들이 EL을 통해 연산될 수 있도록 한다.

    닷 연산자는 객체의 프로퍼티에 접근하는데 사용된다. ${user.firstName} 익스프레션에서 닷 연산자는 user 식별자에 의해 참조된 객체 중 firstName이라는 이름을 가진 속성에 액세스 한다. EL은 자바 빈 규정을 사용하여 객체 속성에 접근하기 때문에 이 속성에 대한 게터(일반적으로 getFirstName())는 이 익스프레션이 정확히 계산하기 위해서 반드시 정의되어야 한다. 액세스되는 속성이 객체일 때 닷 연산자는 재귀적으로 적용될 수 있다. 예를 들어 가상의 user 객체가 자바 객체로서 구현된 address 속성을 갖고 있다면 닷 연산자는 이 객체의 속성에 액세스 하기 위해 사용될 수도 있다. ${user.address.city} 익스프레션은 이 address 객체 중 중첩된 city 속성을 리턴한다.

    브래킷 연산자는 어레이와 컬렉션의 엘리먼트를 검색하는데 사용된다. 어레이와 컬렉션(java.util.List를 구현하는 컬렉션)의 경우 검색될 엘리먼트 인덱스는 브래킷 안에 나타난다. 예를 들어 ${urls[3]} 익스프레션은 이 urls 식별자에 의해 참조된 어레이 또는 컬렉션의 네 번째 엘리먼트를 리턴한다.

    java.util.Map 인터페이스를 구현하는 컬렉션의 경우 브래킷 연산자는 관련 키를 사용하여 맵에 저장된 값을 찾는다. 이 키는 브래킷 내에서 지정되고 상응하는 값은 익스프레션 값으로 리턴된다. 예를 들어 ${commands["dir"]} 익스프레션은 commands 식별자에 의해 참조된 Map"dir" 키와 관련된 값을 리턴한다.

    익스프레션이 브래킷안에 나타날 수 있다. 중첩된 익스프레션의 계산 결과는 컬렉션이나 어레이의 적절한 엘리먼트를 검색하는 인덱스 또는 키로 작용한다. 닷 연산자가 true라면, 브래킷 연산자도 재귀적으로 적용될 수 있다. 이는 EL이 다차원 어레이, 중첩 컬렉션, 또는 둘의 결합에서 엘리먼트를 검색 할 수 있도록 한다. 더욱이 닷 연산자와 브래킷 연산자는 상호운용성이 있다. 예를들어 한 어레이의 엘리먼트가 객체라면 브래킷 연산자는 그 어레이의 엘리먼트를 검색하는데 사용될 수 있고 닷 연산자와 결합하여 엘리먼트 속성 중 하나를 검색할 수 있다. (예를 들어 ${urls[3].protocol}).

    EL이 동적 애트리뷰트 값을 정의하는 간한한 언어로서 작용한다고 볼 때, 자바 접근자와는 다른 EL 접근자의 재미있는 특성 중 하나는 null에 적용될 때 예외를 던지지 않는다는 점이다. EL 접근자가 적용되는 객체(예를 들어 ${foo.bar}${foo["bar"]}foo 식별자)가 null이면 접근자 적용 결과 역시 null이다. 이는 대부분의 경우, 도움이 되는 일이다.

    마지막으로 닷 연산자와 브래킷 연산자는 상호 교환될 수 있다. 예를 들어 ${user["firstName"]}user 객체의 firstName 속성을 검색하는데 사용될 수 있다. ${commands.dir}commands 맵에서 "dir" 키와 관련된 값을 반입하는데 사용될 수 있는것과 같은 이치이다.




    위로


    연산자(Operators)

    식별자와 접근자를 사용하여 EL은 애플리케이션 데이터(범위 변수를 통해 노출) 또는 환경 관련 정보(EL 내장 객체를 통해 노출)를 포함하고 있는 객체 계층을 트래버스 할 수 있다. 그와 같은 데이터에 간단히 접근하는 것은 많은 JSP 애플리케이션에 필요한 표현 로직을 구현하는데 종종 부적합하다.

    EL에는 EL 익스프레션으로 접근된 데이터를 조작 및 비교할 여러 연산자를 포함하고 있다. 이러한 연산자들을 표 2에 요약했다.

    표 2. EL 연산자

    Category 연산자
    산술 +, -, *, / (or div), % (or mod)
    관계형 == (or eq), != (or ne), < (or lt), > (or gt), <= (or le), >= (or ge)
    논리 && (or and), || (or or), ! (or not)
    타당성검사 empty

    산술 연산자는 더하기, 빼기, 나누기를 지원한다. 다른 연산자들도 제공된다. 나누기와 나머지 연산자들은 비 상징 이름들이라는 대안을 갖고 있다. 산술 연산자의 사용법을 설명하는 예제 익스프레션은 Listing 5에 설명되어 있다. 산술 연산자를 한 쌍의 EL 익스프레션에 적용한 결과는 그러한 익스프레션에 의해 리턴된 숫자 값에 대한 연산자에 적용한 결과이다.


    Listing 5. 산술 연산자를 사용하는 EL 익스프레션
    ${item.price * (1 + taxRate[user.address.zipcode])}
    

    관계형 연산자는 숫자 또는 텍스트 데이터를 비교할 수 있도록 한다. 비교 결과는 부울 값으로서 리턴된다. 논리적 연산자는 부울 값이 결합될 수 있도록 하며 새로운 부울 값을 리턴한다. EL 논리적 연산자는 중첩된 관계형 연산자 또는 논리적 연산자의 결과에 적용될 수 있다. (Listing 6).


    Listing 6. 관계형 연산자 및 논리적 연산자를 사용하는 EL 익스프레션
    ${(x >= min) && (x <= max)}
    

    EL 연산자는 empty 이다. 데이터의 타당성 검사에 특히 유용하다. empty 연산자는 하나의 익스프레션을 인자로 취한다.(${empty input}). 그리고 익스프레션이 empty 값으로 계산했는지의 여부를 나타내는 부울 값을 리턴한다. null로 계산한 익스프레션은 empty로 간주된다. 어떤 엘리먼트도 없는 컬렉션이나 어레이와 같다. empty 연산자는 인자가 길이가 0인 String으로 계산했다면 true로 리턴한다.

    EL 연산자의 우선순위는 표 3에 정리되어 있다. Listing 5와 6에 제안된 것 처럼 괄호는 그룹 익스프레션에 사용되고 일반적인 우선순위를 따른다.

    표 3. EL 연산자 우선순위 (위->아래, 왼쪽->오른쪽)

    [], .
    ()
    unary -, not, !, empty
    *, /, div, %, mod
    +, binary -
    () <, >, <=, >=, lt, gt, le, ge
    ==, !=, eq, ne
    &&, and
    ||, or




    위로


    리터럴(Literals)

    숫자, 캐릭터 스트링, 부울, null은 EL 익스프레션에서 리터럴 값으로 지정될 수 있다. 캐릭터 스트링은 싱글 쿼트 또는 더블 쿼트로 범위가 지정된다. 부울 값은 truefalse로 계산된다.




    위로


    Taglib 지시문

    앞서 언급했지만 JSTL 1.0에는 네 개의 커스텀 태그 라이브러리가 포함되어 있다. 익스프레션 언어로 JSTL 태그의 인터랙션을 설명하기 위해 JSTL core 라이브러리에서 여러 태그들을 검토할 것이다. 모든 JSP 커스텀 태그 라이브러리로 true가 된다면 taglib 지시문은 이 라이브러리 태그를 사용할 수 있는 페이지에 포함되어야한다. 이 특정 라이브러리에 대한 지시문은 Listing 7에 나타나있다.


    Listing 7. JSTL core 라이브러리의 EL 버전용 테그립 지시문
    <%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
    

    실제로 JSTL core 라이브러리에 상응하는 두 개의 Taglib 지시문이 있다. JSTL텐에서 EL은 옵션이기 때문이다. JSTL 1.0 의 네 개의 커스텀 태그 라이브러리들은 동적 애트리뷰트 값을 지정할 때 EL 대신 JSP 익스프레션을 사용하는 대안 버전을 갖고있다. 이러한 대안 라이브러리는 JSP의 전통적인 요청시간 애트리뷰트 값에 의존하기 때문에 RT 라이브러리로 일컬어진다. 반면 익스프레션 언어를 사용하는 것은 EL 라이브러리라고 한다. 개발자들은 대안 Taglib 지시문을 사용하는 각각의 라이브러리의 버전들을 구별한다. RT 버전의 코어 라이브러리를 사용하기 위한 지시문은 Listing 8에 나와있다. 하지만 지금은 EL에 집중해야 하기 때문에 지금 필요한 것은 이 지시문들 중 첫 번째 것이다.


    Listing 8. RT 버전의 JSTL core 라이브러리용 태그립 지시문
    <%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c_rt" %>
    




    위로


    변수 태그

    첫 번째 JSTL 커스텀 태그는 <c:set> 액션이다. 이미 언급했듯이 범위 변수는 JSTL에서 핵심적인 역할을 하고 <c:set> 액션은 태그 기반의 매커니즘을 제공하여 범위 변수의 생성 및 설정에 쓰인다. 이 액션의 신택스는 Listing 9와 같다. var 애트리뷰트는 범위 변수 이름을 정하고 scope 애트리뷰트는 변수가 머물게 될 범위를 나타내고, value 애트리뷰트는 변수가 될 값을 지정한다. 지정된 변수가 이미 존재하면 지시된 값으로 할당된다. 그렇지 않다면 새로운 범위 변수가 만들어지고 그 값으로 초기화된다.


    Listing 9. <c:set> 액션 신택스
    <c:set var="name" scope="scope" value="expression"/>
    
    

    scope 애트리뷰트는 선택적이며 page로 기본 설정되어 있다.

    <c:set>의 두 예제는 Lisitng 10에 설명되어 있다. 첫 번째 예제에서 세션 범위 변수는 String 값으로 설정된다. 두 번째에서는 익스프레션은 숫자 값을 설정하는데 사용된다. square라는 페이지 범위 변수는 x 라는 요청 매개변수 값을 배가시킨 결과로 할당된다.


    Listing 10. <c:set> 액션 예제
    <c:set var="timezone" scope="session" value="CST"/>
    <c:set var="square" value="${param['x'] * param['x']}"/>
    
    
    

    애트리뷰트를 사용하는 대신 범위 변수용 값을 <c:set> 액션의 바디 콘텐트로 설정할 수 있다. 이러한 접근방식을 사용하여 Listing 10의 첫 번째 예제를 Listing 11과 같이 재작성할 수 있다. 더욱이 <c:set> 태그의 바디 콘텐트가 커스텀 태그를 적용하는 것도 가능하다. <c:set>의 바디 안에서 만들어진 모든 콘텐트는 String 값 같이 지정된 변수에 할당된다..


    Listing 11. 바디 콘텐트를 통해 <c:set> 액션용 값 지정하기
    <c:set var="timezone" scope="session">CST</c:set>
    

    JSTL core 라이브러리에는 범위 변수를 관리하는 두 번째 태그(<c:remove>)가 포함되어 있다. 이름에서 시사되는 바와 같이 <c:remove> 액션은 범위 변수를 지우는데 사용되고 두 개의 애트리뷰트를 취한다. var 애트리뷰트는 제거될 변수를 명명하고 선택적인 scope 애트리뷰트는 제거되어야 할 범위를 나타낸다. (Listing 12).


    Listing 12. <c:remove> 액션 예제
    <c:remove var="timezone" scope="session"/>
    




    위로


    아웃풋

    <c:set> 액션은 익스프레션의 결과가 범위 변수로 할당될 수 있도록 하는 반면 개발자들은 익스프레션 값을 저장하는 대신 간단히 디스플레이하기를 원한다. 이는 JSTL의 <c:out> 커스텀 태그의 몫이다. (Listing 13). 이 태그는 value 애트리뷰트에서 지정된 익스프레션을 계산한다. 그런다음 결과를 프린트한다. 선택적 default 애트리뷰트가 지정되면 value 애트리뷰트의 익스프레션이 null 또는 비어있는 String으로 계산될 때 <c:out> 액션은 값을 프린트한다.


    Listing 13. <c:out> 액션 신택스
    <c:out value="expression" default="expression" escapeXml="boolean"/>
    

    escapeXml 애트리뷰트 또한 선택사항이다. "<", ">", "&" 같은 캐릭터가 <c:out> 태그에 의해 아웃풋 될 때 종료되는지의 여부를 제어한다. escapeXml이 true로 설정되어 있다면 이 캐릭터들은 상응하는 XML 인터티(<, >, &)로 바뀐다.

    예를 들어, user라는 세션 범위 변수가 있다고 가정해보자. 이것은 사용자에 대한 usernamecompany라는 두 개의 속성들을 정의하는 클래스의 인스턴스이다. 이 객체는 사용자가 사이트에 접근할 때마다 세션에 할당된다. 하지만 이 두 개의 속성들은 사용자가 실제로 로그인하기 전까지 설정되지 않는다. (Listing 14). 일단 사용자가 로그인하면 "Hello"가 디스플레이 되고 뒤따라서 사용자 이름과 감탄부호가 나온다. 사용자가 로그인하기 전에 여기에서 생긴 콘텐트는 "Hello Guest!" 라는 구(phrase)가 된다. 이 경우 username 속성이 초기화되지 않았기 때문에 <c:out> 태그는 default 애트리뷰트 값을 프린트한다.


    Listing 14. <c:out> 액션 예제 (디폴트 콘텐트)
    Hello <c:out value="${user.username}" default=="Guest"/>!
    
    

    <c:out> 태그의 escapeXml 애트리뷰트를 사용하는 Listing 15를 보자. company 속성이 자바 String 값인 "Flynn & Sons"으로 설정되었다면 이 액션에서 생긴 콘텐트는 Flynn & Sons이 된다. 이 액션이 HTML 또는 XML 콘텐트를 만드는 JSP 페이지의 일부라면 이 캐릭터의 스트링 중간에 있는 앰퍼샌트 부호는 HTML 또는 XML이 문자를 제어하고 이 콘텐트의 렌더링 또는 파싱을 방해하는것으로 해석하고 끝난다. escapeXml 애트리뷰트의 값이 true로 설정되면 생성된 콘텐트는 Flynn & Sons이 된다. 이 콘텐트를 만나는 브라우저 또는 파서는 인터프리테이션에 아무 문제가 없다. HTML과 XML이 JSP 애플리케이션에서 가장 일반적인 콘텐트 유형이라면 escapeXml 애트리뷰트의 디폴트 값이 true라는 것은 놀라운 일이 아니다.


    Listing 15. <c:out> 액션 예제)
    <c:out value="${user.company}" escapeXml=="false"/>
    
    




    위로


    디폴트 값으로 변수 설정하기

    동적 데이터를 단순하게 하는 것 외에도 디폴트 값을 지정하는 <c:out>의 기능은 <c:set>을 통해 변수 값을 설정할 때에도 유용하다. 범위 변수에 할당된 값이 <c:set> 태그의 바디 콘텐트로 지정될수 있고 value 애트리뷰트로서도 가능하다. <c:out> 액션을 <c:set> 태그의 바디 콘텐트에 중첩하여 변수 할당은 이것의 디폴트 값을 이용할 수 있다. (Listing 11).

    이러한 접근 방식은 Listing 16에도 설명되어 있다. 외부 <c:set> 태그의 작동은 단순하다.


    Listing 16. <c:set>과 <c:out> 결합: 디폴트 변수 값 제공
    <c:set var="timezone" scope=="session">
       <c:out value="${cookie['tzPref'].value}" default=="CST"/>
    </c:set>
    

    소셜 북마크

    mar.gar.in mar.gar.in
    digg Digg
    del.icio.us del.icio.us
    Slashdot Slashdot

    요청에 제공된 tzPref 라는 이름의 쿠키가 없다. 내장 객체를 사용한 검색은 null이 된다는 것을 의미한다. 익스프레션은 전체적으로 null을 리턴한다. value 애트리뷰트를 계산한 값이 null 이기 때문에 <c:out> 태그는 default 애트리뷰트를 계산한 결과를 아웃풋한다.



    참고자료

    Posted by WebProgrammer 1010
     
     

    prototype.js를 위한 개발자 노트

    1.5.0버전을 다룸

    Sergio Pereira에 의해 작성됨
    이동국에 의해 번역됨
    최근 업데이트: 2007년 3월 4일

    목차

    Prototype은 무엇인가.?

    prototype.jsSam Stephenson에 의해 작성된 자바스크립트 라이브러리이다. 이 놀랍도록 멋진 생각과 표준에 의해 잘 작성된 코드의 일부는 웹2.0의 특성을 나타내는 풍부하고 상호작용하는 웹페이지와 많은 연관을 가진다.

    만약 당신이 최근 이 라이브러리를 사용하기 시작했다면, 당신은 아마도 이 문서가 가장 좋은 지시사항중에 하나는 아니라는것을 알아차렸을것이다. 나 이전에 다른 많은 개발자들처럼, 나는 소스코드와 이것을 사용한 경험에서 prototype.js에 대한 지식을 가지게 되었다. 나는 모든 이가 배우고 공유하는 동안 좀더 많은 정보를 얻게 되는게 가장 좋은 것이라고 생각한다.

    나는 objects, classes, functions, 그리고 이 라이브러리에 의해 제공되는 확장을 위한 비공식적인 참조문서 또한 제공한다.

    당신이 예제와 참조문서를 읽었을때, Ruby프로그래밍 언어에 친숙한 개발자는 Ruby의 내장 클래스와 이 라이브러리에 의해 구현된 많은 확장 사이의 의도적인 유사성을 알아차리게 될것이다.

    toc

    관련글

    고급 자바스크립트 가이드

    toc

    유틸리티 함수들

    라이브러리는 미리 정의된 많은 수의 객체와 유틸리티 함수를 가진다. 이 알기쉬운 함수들의 목적은 반복적인 타이핑과 어구를 많이 줄이는데 있다.

    toc

    $() 함수 사용하기

    $()함수는 가장 많이 사용되는 DOM의 document.getElementById()함수에 대한 편리한 단축키이다. DOM함수처럼, 이것은 인자로 던져진 id를 가진 요소를 하나 반환한다.

    DOM함수와는 달리 이 함수는 더 많은 작업을 수행한다. 반환된 element객체는 몇가지 추가적인 작업을 하게 될것이다. element를 숨기거나 보여주고 크기를 알아내며 element에 대해 스크롤을 하는 것과 같은 추가적인 많은 작업을 간단하게 만든다. Element 객체를 위한 참조문서에서 반환된 element객체에 추가된 메소드 목록을 얻을수 있다.

    <html>
    <head>
    <title> Test Page </title>
    <script src="prototype.js"></script>
    
    <script>
    	function test(){
    		var d = $('myDiv');
    		alert(d.innerHTML);
    		d.hide();
    		d.show();
    		d.addClassName('active');
    	}
    </script>
    </head>
    
    <body>
    	<div id="myDiv">
    		<p>This is a paragraph</p>
    	</div>
    	<div id="myOtherDiv">
    		<p>This is another paragraph</p>
    	</div>
    
    	<input type="button" value="Test $()" onclick="test();"/><br/> 
    
    </body>
    </html>

    이 함수의 좋은 점은 이것은 인자형태를 가질수 있는 다른 함수를 생성할때 매우 유용하도록 만들어주는 id문자열이나 요소객체 자체를 던질수 있다는 것이다.

    toc

    $$() 함수 사용하기

    $$() 함수는 내용물에서 CSS를 일관되게 분리할때 많이 도와줄것이다. 하나 이상의 CSS필터링 표현식을 파싱한다면, CSS 룰을 정의하기 위해 사용되는 것과 유사하고 이러한 필터에 일치하는 요소를 반환한다.

    이 함수는 터무니 없을 정도로 사용하기가 쉽다. 체크해보라.

    <script>
    function test$$(){
    	/*
    	  in case CSS is not your forte, the expression below says
    	  'find all the INPUT elements that are inside 
    	  elements with class=field that are inside a DIV
    	  with id equal to loginForm.'
    	*/
    	var f = $$('div#loginForm .field input');
    	var s = '';
    	for(var i=0; i<f.length; i++){
    		s += f[i].value + '/';
    	}
    	alert(s); // shows: "joedoe1/secret/"
    	
    	//now passing more than one expression
    	f = $$('div#loginForm .field input', 'div#loginForm .fieldName');
    	s = '';
    	for(var i=0; i<f.length; i++){
    		s += ( f[i].value ? f[i].value : f[i].innerHTML ) + '/';
    	}
    	alert(s); //shows: "joedoe1/secret/User name:/Password:/"
    }
    
    
    </script>
    
    <div id='loginForm'>
    	<div class='field'>
    		<span class='fieldName'>User name:</span>
    		<input type='text' id='txtName' value='joedoe1'/>
    	</div>
    	<div class='field'>
    		<span class='fieldName'>Password:</span>
    		<input type='password' id='txtPass' value='secret' />
    	</div>
    	<input type='submit' value='login' />
    </div> 
    <input type=button value='test $$()' onclick='test$$();' />
    			

    성능에 대한 빠른 노트. prototype.js에서 $$() 함수의 현재 구현체는 특별히 효과적으로 여겨지지 않는다. 이 함수를 자주 사용하여 복잡한 HTML문서를 처리하고자 계힉중이라면, 가능한 $$()함수 자체를 대체하는 다른 구현체를 고려하고자 할것이다.

    toc

    $F() 함수 사용하기

    $F() 함수는 다른 단축키이다. 이것은 텍스트 박스나 드랍다운 리스트와 같은 어떤 필드의 입력 컨트롤의 값을 반환한다. 이 함수는 요소 id나 요소객체 자체를 인자로 가질수 있다.

    <script>
    	function test3()
    	{
    		alert(  $F('userName')  );
    	}
    </script>
    
    <input type="text" id="userName" value="Joe Doe"><br/> 
    <input type="button" value="Test3" onclick="test3();"><br/> 
    			

    toc

    $A() 함수 사용하기

    $A() 함수는 이것을 받아들이는 하나의 인자를 Array객체로 변환한다.

    Array 클래스를 위한 확장과 조합된 이 함수는 열거가능한 리스트를 Array 객체로 변환하거나 복사하는 것을 더욱 쉽게 만든다. 예를 들면, 작성한 함수는 인자의 수를 유연하게 받아들인다. 여기서 추천되는 사용법은 DOM NodeLists를 좀더 효과적으로 처리할수 있도록 일반적인 배열로 변환하기 위해 사용하는 것이다. 아래의 예제를 보라.

    <script>
    
    	function showOptions(){
    		var someNodeList = $('lstEmployees').getElementsByTagName('option');
    		var nodes = $A(someNodeList);
    
    		nodes.each(function(node){
    				alert(node.nodeName + ': ' + node.innerHTML);
    			});
    	}
    </script>
    
    <select id="lstEmployees" size="10" >
    	<option value="5">Buchanan, Steven</option>
    	<option value="8">Callahan, Laura</option>
    	<option value="1">Davolio, Nancy</option>
    </select>
    
    <input type="button" value="Show the options" onclick="showOptions();" > 
    			

    toc

    $H() 함수 사용하기

    $H() 함수는 객체를 결합된 배열을 열거하는 Hash객체로 변환한다.

    <script>
    	function testHash()
    	{
    		//let's create the object
    		var a = {
    			first: 10,
    			second: 20,
    			third: 30
    			};
    
    		//now transform it into a hash
    		var h = $H(a);
    		alert(h.toQueryString()); //displays: first=10&second=20&third=30
    	}
    
    </script>
    			

    toc

    $R() 함수 사용하기

    $R() 함수는 new ObjectRange(lowerBound, upperBound, excludeBounds)를 작성하기 위한 짧은 형태이다.

    이 클래스의 완전한 설명을 보기 위해 ObjectRange 클래스 문서를 보라. each 메소드를 통해 반복(iterators)의 사용법을 보여주는 간단한 예제를 보자. 더 많은 메소드는 Enumerable 클래스 문서에서 볼수 있을것이다.

    <script>
    	function demoDollar_R(){
    		var range = $R(10, 20, false);
    		range.each(function(value, index){
    			alert(value);
    		});
    	}
    
    </script>
    
    <input type="button" value="Sample Count" onclick="demoDollar_R();" /> 
    			

    toc

    Try.these() 함수 사용하기

    Try.these() 함수는 인자처럼 많은 수의 함수를 가지고 그것들을 순서대로 차례차례 호출하도록 해준다. 이것은 함수중에 하나씩 수행하고 성공적인 함수호출의 결과를 반환할때까지 순차적으로 수행된다.

    아래의 예제에서 xmlNode.text 함수는 몇몇 브라우저에서 작동하고 xmlNode.textContent는 다른 브라우저에서 작동한다. Try.these()함수를 사용하면 당신은 작동하는 것 중 하나를 반환할수 있다.

    <script>
    function getXmlNodeValue(xmlNode){
    	return Try.these(
    		function() {return xmlNode.text;},
    		function() {return xmlNode.textContent;}
    		);
    }
    </script>
    			

    toc

    String을 향상시키기

    String은 강력한 객체이다. Prototype.js는 그 강력함을 가지고 있으며 다른 방법으로 그 강력함을 향상시킨다.

    문자열 대체

    문자열 대체를 사용할때 자바스크립트는 이미 String.Replace와 같은 메소드를 제공하고 있다. 정규표현식으로 작동하지만 prototype.js에서 소개한 대체 함수만큼 유연하지는 않다.

    새로운 String.gsub 메소드를 사용해보라. 이 메소드를 사용하면 고정 문자열이나 정규 표현식 패턴을 찾고 변경할수 있을 뿐 아니라 교체를 넘어서는 더 많은 제어를 하게 된다. 예를 들어 찾은 요소를 변형하고자 하는 방법을 메소드에 지시하도록 문자열 템플릿을 사용할수 있다.

    아래의 예제는 't'를 포함하는 단어를 찾고 그 위치에 'tizzle' 로 변경하는 것이다. 이 예제의 경우 명확하게 설명되지는 않는다. 우리가 선택한 정규 표현식인 괄호안의 \w+은 그룹 선언을 가져온다. 대체 템플릿 문자열로 #{1}를 사용하여 이 그룹에 의해 해당되는 값을 가져올수 있다.

    예제에서 우리는 't'앞의 문자들을 가져와서 'tizzle'를 뒤에 붙인다. 정규 표현식으로 더 많은 찾을 수 있다면, #{2}, #{3} 등등을 사용하여 값을 가져올것이다.

    <script>
    function talkLikeYouKnowSomething(){
    	var s = 'prototype string extensions can help you';
    	var snoopdogfy = /\b(\w+)t\w+\b/;
    	var snooptalk = s.gsub(snoopdogfy, '#{1}tizzle' );
    	alert(snooptalk); // shows: "prototizzle stizzle extizzle can help you"				
    }
    </script>
    			

    여기서 멈추지 말자. 우리가 만든 대체기능은 패턴에 일치하면 대체하는데 제한되기 때문에 그다지 강력하다고 보기 힘들다. 그렇다면 원하는 대체 값을 만들기 위해 사용자 정의 로직에 일치하는 작업을 할수 있을까.? gsub에 두번째 인자로 함수를 넘길수 있다면 그렇게 할수 있을것이다. 여기서 인자로 넘기는 함수는 일치하는 텍스트를 가진 배열(인덱스값이 0)을 받고 어떤 그룹값(인덱스값이 1에서 N)을 가져올것이다.

    <script>
    function scamCustomers(){
    	var prices = 'book1 $12.5, magazine $5.50, pencil $1.20';
    	var priceFinder = /\$([0-9\.]+)/;
    	var r = prices.gsub(priceFinder, jackUp);
    	alert(r);//shows: "book1 $13.75, magazine $6.05, pencil $1.32"
    }
    	
    function jackUp(matches){
    	//increases the prices by 10%
    	var price = parseFloat(matches[1]);
       	return '$' + Math.round(110 * price)/100;
    }
    </script>
    			

    문자열 템플릿

    애플리케이션에 자바스크립트 코드의 양이 증가하는 만큼, increasingly you'll find yourself with collections of objects of the same type and that you need to list or present in a formatted way.

    애플리케이션에서 객체 리스트를 통해 루프를 처리하고 객체 프라퍼티와 몇가지 고정된 형태의 요소에 기초하여 문자열을 만드는 코드를 찾는것이 드물게 발생하지는 않는다. Prototype.js는 이러한 타입의 시나리오를 다루는데 도움을 주는 Template class를 가진다.

    아래의 예제는 다중 HTML라인에서 장바구니에 있는 항목 리스트를 형상화하는 방법을 보여준다.

    <script>
    function printCart(){
    	//creating a sample cart
    	var cart = new Object();
    	cart.items = [ ];
    	//putting some sample items in the cart
    	cart.items.push({product: 'Book 123', price: 24.50, quantity: 1});
    	cart.items.push({product: 'Set of Pens', price: 5.44, quantity: 3});
    	cart.items.push({product: 'Gift Card', price: 10.00, quantity: 4});
    	
    	//here we create our template for formatting each item
    	var itemFormat = new Template(
    			'You are ordering #{quantity} units ' + 
    			'of #{product} at $#{price} each'
    			);
    	var formatted = '';
    	
    	for(var i=0; i<cart.items.length; i++){
    		var cartItem = cart.items[i];
    		formatted += itemFormat.evaluate(cartItem) + '<br/>\n';
    	}
    	
    	alert(formatted);
    	/* SHOWS:
    	You are ordering 1 units of Book 123 at $24.5 each<br/>
    	You are ordering 3 units of Set of Pens at $5.44 each<br/>
    	You are ordering 4 units of Gift Card at $10 each<br/>
    	*/
    }
    </script>
    			

    새로운 메소드 목록에 대한 좀더 완전한 정보를 보기 위해서는 문자열 확장 참조를 보라.

    toc

    Ajax 객체

    위에서 언급된 유틸리티 함수들은 좋다. 하지만 다시 보자. 그것들은 대부분 고급(advanced) 형태는 아니다. 당신은 스스로 이것들을 만들수 있고 당신 자신만의 스크립트에 유사한 함수를 이미 가지고 있을수도 있다. 하지만 이러한 함수들은 단지 일부분에 해당되는 팁일뿐이다.

    나는 prototype.js에 대한 당신의 관심이 대부분의 AJAX기능을 다룰수 있다는 것이라고 확신한다. 그래서 당신이 AJAX로직을 수행할 필요가 있을때 좀더 쉽게 사용하도록 도와주는 라이브러리를 사용하는 방법을 살펴보자.

    AJAX객체는 AJAX함수를 작성할 때 포함되는 트릭성격의 코드를 포장하고 단순화하기 위한 라이브러리에 의해 생성된 미리-정의된 객체이다. 이 객체는 캡슐화된 AJAX로직을 제공하는 많은 수의 클래스를 포함한다. 그 클래스중에 몇개를 살펴보자.

    toc

    Ajax.Request 클래스 사용하기

    만약 당신이 어떠한 헬퍼(helper) 라이브러리도 사용하지 않는다면, 당신은 XMLHttpRequest객체를 생성하기 위한 많은 코드를 작성할 것이고 단계를 비동기적으로 수행할것이다. 그리고나서 응답을 뽑아내고 이것을 처리한다. 그리고나서는 한가지 이상의 브라우저를 지원하지 않는다면 스스로 행운이라고 생각할 것이다.

    AJAX기능을 지원하기 위해, 라이브러리는 Ajax.Request클래스를 정의한다.

    당신이 다음처럼 XML응답을 반환하는 http://yourserver/app/get_sales?empID=1234&year=1998 url을 통해 서버와 통신할수 있는 애플리케이션을 가지고 있다고 해보자.

    <?xml version="1.0" encoding="utf-8" ?> 
    <ajax-response>
    	<response type="object" id="productDetails">
    		<monthly-sales>
    			<employee-sales>
    				<employee-id>1234</employee-id> 
    				<year-month>1998-01</year-month> 
    				<sales>$8,115.36</sales> 
    			</employee-sales>
    			<employee-sales>
    				<employee-id>1234</employee-id> 
    				<year-month>1998-02</year-month> 
    				<sales>$11,147.51</sales> 
    			</employee-sales>
    		</monthly-sales>
    	</response>
    </ajax-response>			
    			

    XML을 가져오기 위해 서버와 통신하는 것은 Ajax.Request객체를 사용하면 매우 간단하다. 아래의 샘플은 이것을 수행하는 방법을 보여준다.

    <script>
    	function searchSales()
    	{
    		var empID = $F('lstEmployees');
    		var y = $F('lstYears');
    		var url = 'http://yourserver/app/get_sales';
    		var pars = 'empID=' + empID + '&year=' + y;
    		
    		var myAjax = new Ajax.Request(
    			url, 
    			{
    				method: 'get', 
    				parameters: pars, 
    				onComplete: showResponse
    			});
    		
    	}
    
    	function showResponse(originalRequest)
    	{
    		//put returned XML in the textarea
    		$('result').value = originalRequest.responseText;
    	}
    </script>
    
    <select id="lstEmployees" size="10" onchange="searchSales()">
    	<option value="5">Buchanan, Steven</option>
    	<option value="8">Callahan, Laura</option>
    	<option value="1">Davolio, Nancy</option>
    </select>
    <select id="lstYears" size="3" onchange="searchSales()">
    	<option selected="selected" value="1996">1996</option>
    	<option value="1997">1997</option>
    	<option value="1998">1998</option>
    </select>
    <br/><textarea id="result" cols=60 rows=10 ></textarea>
    			

    Ajax.Request객체 생성자의 두번째 파라미터를 알아보겠는가.? {method: 'get', parameters: pars, onComplete: showResponse} 파라미터는 문자적 표기법으로 익명 객체를 나타낸다. 이것이 의미하는 것은 'get' 문자열을 포함하는 명명된 메소드(method)의 프라퍼티, HTTP요청 문자열을 포함하는 명명된 파라미터(parameter)라는 프라퍼티, 그리고 함수 showResponse를 포함하는 onComplete 프라퍼티/메소드를 가지는 객체를 전달한다는 것이다.

    당신이 AJAX를 비동기적으로(asynchronous) 서버에 호출할지를 결정하고 truefalse값으로 셋팅할수 있는 asynchronous(디폴트 값은 true이다.)와 같은 이 객체내 정의하고 활성화시킬수 있는 다른 프라퍼티가 몇개 있다.

    이 파라미터는 AJAX호출을 위한 옵션을 정의한다. 샘플에서, 우리는 HTTP GET명령을 통해 첫번째 인자에서 url을 호출한다. 변수 pars내 포함된 조회문자열(querystring)을 전달하고 Ajax.Request객체는 응답을 받아들이는 작업을 마칠때 showResponse함수를 호출할 것이다.

    당신이 아는것처럼, XMLHttpRequest는 HTTP호출을 하는 동안 진행과정을 보고한다. 이 진행과정은 4가지의 단계(Loading, Loaded, Interactive, 또는 Complete)를 알릴수 있다. 당신은 이러한 단계중에서 Ajax.Request객체 호출을 사용자정의 함수로 만들수 있다. Complete는 가장 공통적인 단계이다. 함수를 객체에게 알리기 위해, 우리 예제의 onComplete처럼 요청옵션내 onXXXXX로 명명된 프라퍼티/메소드를 간단히 제공하라. 당신이 전달하는 이 함수는 XMLHttpRequest객체 자체가 될 하나의 인자를 가진 객체에 의해 호출될것이다. 당신은 반환 데이터를 얻기 위해 이 객체를 사용할수 있고 아마도 호출의 HTTP결과 코드를 포함할 상태(status) 프라퍼티를 체크할것이다. 몇가지 스크립트나 JSON형태의 데이터를 반환하고자 한다면 X-JSON 헤더가 유용하다.

    두개의 다른 흥미로운 옵션은 결과를 처리하기 위해 사용될수 있다. 우리는 AJAX호출이 에러없이 수행될때 호출될 함수처럼 onSuccess옵션을 명시할수 있다. onFailure옵션은 서버에러가 발생할때 호출될 함수가 될수 있다. onXXXXX의 선택적인 함수처럼, 이 두가지는 AJAX호출을 옮기고 X-JSON헤더를 체크하는 XMLHttpRequest를 전달하도록 호출될 것이다.

    우리의 샘플은 흥미로운 방법으로 XML응답을 처리하지는 않았다. 우리는 textarea내 XML을 집어넣었다. 응답의 전형적인 사용법은 XML내부에서 바라는 정보를 찾고자 할것이고 몇몇 페이지 요소나 페이지내 HTML을 만드는 몇가지의 XSLT변형을 업데이트할것이다.

    1.4.0 버전에서, 이벤트 콜랙 핸들링의 새로운 형태가 소개되었다. 만약 당신이 AJAX호출이 발생하는데도 불구하고 특정 이벤트를 위해 수행되어야 하는 코드를 가지고 있다면, 당신은 새로운 Ajax.Responders 객체를 사용할수 있다.

    당신이 AJAX호출이 진행중이라는 시각적 표시를 보여주길 원한다고 해보자. 당신은 두개의 전역 이벤트 핸들러를 사용할수 있다. 하나는 첫번째 호출이 시작되었을때 아이콘을 보여주는것이고 다른 하나는 적어도 하나가 끝났을때 아이콘을 숨기는 것이다. 아래의 예제를 보자.

    <script>
    	var myGlobalHandlers = {
    		onCreate: function(){
    			Element.show('systemWorking');
    		},
    
    		onComplete: function() {
    			if(Ajax.activeRequestCount == 0){
    				Element.hide('systemWorking');
    			}
    		}
    	};
    
    	Ajax.Responders.register(myGlobalHandlers);
    </script>
    
    <div id='systemWorking'><img src='spinner.gif'>Loading...</div>
    	

    좀더 완전한 설명을 보기 위해서, Ajax.Request 참조options 참조를 보라..

    toc

    Ajax.Updater 클래스 사용하기

    만약 당신이 HTML로 이미 포맷팅된 정보를 반환할수 있는 서버 종료점(endpoint)을 가진다면, 라이브러리는 당신이 Ajax.Updater클래스를 사용하는것을 좀더 쉽게 만들어준다. 이것으로 당신은 어느 요소가 AJAX호출로부터 반환된 HTML을 채우는지 알리게 된다. 예제는 내가 글로 표현하는 것보다 당신을 좀더 쉽게 이해하도록 도와줄것이다.

    <script>
    	function getHTML()
    	{
    		var url = 'http://yourserver/app/getSomeHTML';
    		var pars = 'someParameter=ABC';
    		
    		var myAjax = new Ajax.Updater(
    			'placeholder', 
    			url, 
    			{
    				method: 'get', 
    				parameters: pars
    			});
    		
    	}
    </script>
    
    <input type="button" value="GetHtml" onclick="getHTML()"/>
    <div id="placeholder"></div>
    			

    당신이 보는것처럼, 코드는 onComplete함수와 생성자에 전달된 요소 id를 제외하고 이전예제에 비해서 매우 간단하다. 클라이언트에서 서버 에러들을 다루는 것이 어떻게 가능한지 보기 위해 코드를 조금 변경해 보자.

    우리는 호출을 위해 더 많은 옵션을 추가하고 에러 상황을 뽑아내기 위해 함수를 명시한다. 이것은 onFailure옵션을 사용하여 수행한다. 우리는 성공적인 작동의 경우에만 활성화될 묶음자(placeholder)를 명시할것이다. 이것을 달성하기 위해, 우리는 간단한 요소 id에서 두개의 프라퍼티(success-모든것이 정상적일때 사용되는, failure-어떤것이 실패일때 사용되는)를 가지는 객체로 첫번째 파라미터를 변경할 것이다. 우리는 예제에서 failure 프라퍼티를 사용하지 않을것이고, onFailure옵션에서 reportError함수를 사용할것이다.

    <script>
    	function getHTML()
    	{
    		var url = 'http://yourserver/app/getSomeHTML';
    		var pars = 'someParameter=ABC';
    		
    		var myAjax = new Ajax.Updater(
    					{success: 'placeholder'}, 
    					url, 
    					{
    						method: 'get', 
    						parameters: pars, 
    						onFailure: reportError
    					});
    		
    	}
    
    	function reportError(request)
    	{
    		alert('Sorry. There was an error.');
    	}
    </script>
    
    <input type="button" value="GetHtml" onclick="getHTML()"/>
    <div id="placeholder"></div>
    
    			

    만약 당신의 서버 로직이 HTML마크업 대신에 자바스크립트 코드를 반환한다면, Ajax.Updater객체는 자바스크립트 코드가 될수 있다. 자바스크립트로 응답을 처리하기 위한 객체를 얻기 위해, 당신은 객체 생성자의 마지막 인자로 프라퍼티들의 목록에 evalScripts: true;를 간단히 추가한다. 하지만 여기엔 문제가 있다. 이러한 스크립트 블럭은 페이지의 스크립트에 추가되지 않을것이다. 옵션이름인 evalScripts이 제시하는것처럼, 스크립트는 평가될것이다. 차이점이 무엇일까.? 요청된 URL이 반환하는 것이 무엇인지 추측해보자.

    <script language="javascript" type="text/javascript">
    	function sayHi(){
    		alert('Hi');
    	}
    </script>
    
    <input type="button" value="Click Me" onclick="sayHi()"/>
    			

    이 경우 당신이 이전에 이것을 시도했다면 이것이 작동하지 않는것을 알고 있을것이다. 이유는 스크립트 블럭은 평가될것이고 평가된 스크립트는 sayHi 라는 이름의 함수를 생성하지 않을것이다. 이것은 아무것도 하지 않을것이다. 이 함수를 생성하기 위해, 우리는 함수를 생성하기 위해 변경할 필요가 있다. 아래를 보라.

    <script language="javascript" type="text/javascript">
    	sayHi = function(){
    		alert('Hi');
    	};
    </script>
    
    <input type="button" value="Click Me" onclick="sayHi()"/>
    			

    이전 예제에서, 우리는 변수를 선언하기 위해 var 키워드를 사용하지 않았다. 그렇게 하는 것은 스크립트 블럭에 지역화될 함수 객체를 생성할것이다. var 키워드 없이 함수 객체는 window범위에서 작동한다.

    좀더 상세한 complete설명을 위해서는, Ajax.Updater 참조문서options 참조문서를 보라.

    toc

    What are all those "?" and squares?

    So you went and wrote some quick test scripts to update your pages using the Ajax.Updater object and it all worked fine. Life was good until you ran your scripts against real data. All of a sudden the updated text was displayed with question marks or unprintable character symbols where the non-English characters should be.

    Your first suspect is prototype.js, Of course, it seemed too easy to be true. But don't blame the library just yet. Ask yourself how much you really understand character encoding, code pages, and how the browser deals with it. If you have a positive answer then I bet you are on your way to fix the problem. If you are among the other 80% (another useless, imprecise author's estimate) of web developers that take character encoding for granted, keep reading.

    I won't pretend to be an authority on the topic, much less give you a complete explanation of how this is best handled. Instead you go straight to the solution that I use and provide hints on how this could be fixed in your own scenario.

    Simply put, the solution revolves around the following statement: Serve what the browser is expecting you to serve. If we are going to update the page with text that contains Unicode/UTF-8 characters then we better make the browser aware of that.

    Let's start with the simple case when you are just updating the page with text from a static HTML file that resides on your server. When you created that file, depending on which text editor you employed, it is very possible that the file was saved in ANSI (or better said, non-Unicode) format. This is the default for many text editors, especially source code editors, because the file size will be smaller and it's rather unusual to edit source code with Unicode characters in it.

    Suppose you have the following file named static-content.html on your server. You saved this file saved in ANSI format.

    <div>
    	Hi there, José. Yo no hablo español.
    </div>

    Your main page updates itself using something like the snippet below.

    <script>
    	function updateWithFile(){
    		var url = 'static-content.html';
    		var pars = '';
    		var myAjax = new Ajax.Updater(
    				'placeholder', url, 
    				{method: 'get', parameters: pars});
    	}
    </script>
    <div id="placeholder">(this will be replaced)</div>
    <input id="btn" value="Test With Static File" 
                     onclick="updateWithFile()" type="button"/>
    
    

    When you click the button the static file is retrieved but the non-English characters are replaced by question marks or some other symbol. The displayed text will look similar to "Hi there, Jos?. Yo no hablo espa?ol." or "Hi there, Jos?Yo no hablo espa?", depending on your browser.

    In this case, the solution is straightforward, simply save the static file in an appropriate format. Let's save it in UTF-8 and run the script again (any decent text editor will have an option in the Save As dialog.) You should now see the correct text (if not, your browser may have cached the old version, try using a different file name.)

    If the HTML that you are serving is not static, if it is being dynamically generated by some application framework (like ASP.NET, PHP, or even Perl,) make sure the code that generates this HTML is producing the text in the appropriate encoding and code page, and include in the HTTP response headers one header that informs this. Each platform has a different way to achieve this, but they are very similar.

    For example, in ASP.NET you can set this globally in your web.config file and the default configuration is good enough to avoid this problem in the first place. You should already have the following section in your web.config.

    <globalization requestEncoding="utf-8" responseEncoding="utf-8" />

    고전적인 ASP 3.0에서 다음의 코드를 사용하여 이 문제를 해결할수 있다.

    Response.CodePage = 65001
    Response.CharSet = "utf-8" 

    PHP에서 응답 헤더를 추가하기 위한 문법은 다음과 같을것이다.

    <?php header('Content-Type: text/html; charset=utf-8'); ?>

    어떤 경우에는, 당신이 생각하는 목표가 응답 메시지에 다음 HTTP 헤더를 보내는 것이다.

    Content-Type: text/html; charset=utf-8 

    위 예제에서는 UTF-8을 사용했지만 다른 셋팅이 필요하다면 쉽게 바꿀수 있다.

    열거(Enumerating)...

    우리는 루프(loop)에 친숙하다. 당신이 알다시피, 배열 자체를 생성하고 같은 종류의 요소로 채운다. 루프 제어구조(이를 테면, foreach, while, repeat 등등)을 생성하고 숫자로 된 인덱스를 통해 순차적으로 각각의 요소에 접근하고 그 요소로 작업을 수행한다.

    당신이 이것에 대해 생각할때, 언제나 당신은 코드에 배열을 가지고 루프내 배열을 사용할것이라는것을 의미한다. 이러한 반복을 다루기 위해 좀더 많은 기능을 가진 배열 객체가 있다면 좋지 않겠는가.? 그렇다. 많은 프로그래밍 언어는 배열이나 유사한 구조(collection과 list와 같은)에서 이러한 기능을 제공한다.

    prototype.js는 우리에게 반복가능한 데이터를 다룰때 사용하도록 구현된 Enumerable 객체를 제공한다. prototype.js 라이브러리는 더 나아가 Enumerable의 모든 메소드로 Array 클래스를 확장한다

    toc

    루프, 루비-스타일

    표준 자바스크립트에서, 당신이 배열의 요소를 순차적으로 표시하길 원한다면, 당신은 다음처럼 작성할수 있다.

    <script>
    	function showList(){
    		var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
    		for(i=0;i<simpsons.length;i++){
    			alert(simpsons[i]);
    		}
    	}
    
    </script>
    
    <input type="button" value="Show List" onclick="showList();" /> 
    			

    prototype.js를 사용하면, 다음과 같이 다시 작성할수 있다.

    
    	function showList(){
    		var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
    		simpsons.each( function(familyMember){
    			alert(familyMember);
    		});
    	}
    			

    당신은 특이한 문법으로 별로 좋지않다고 생각할지도 모른다. 위 예제에서, 엉망으로 만드는 것은 아무것도 없다. After all, there's not much to be changed in such a drop-dead-simple example. But keep reading, nonetheless.

    each 메소드에 대한 인자처럼 전달되는 이 함수는 보았는가.? iterator 함수처럼 이것을 참조해보자.

    toc

    스테로이드(steroids)에서 당신의 배열

    위에서 언급된것처럼, 이것은 같은 프라퍼티와 메소드를 가지는 배열내 모든 요소를 위해 공통이다. 우리의 새로운 배열을 가지고 iterator함수의 장점을 가질수 있는 방법을 보자.

    문법에 따르는 요소를 찾아라.

    <script>
    	function findEmployeeById(emp_id){
    		var listBox = $('lstEmployees')
    		var options = listBox.getElementsByTagName('option');
    		options = $A(options);
    		var opt = options.find( function(employee){
    			return (employee.value == emp_id);
    		});
    		alert(opt.innerHTML); //displays the employee name
    	}
    </script>
    
    <select id="lstEmployees" size="10" >
    	<option value="5">Buchanan, Steven</option>
    	<option value="8">Callahan, Laura</option>
    	<option value="1">Davolio, Nancy</option>
    </select>
    
    <input type="button" value="Find Laura" onclick="findEmployeeById(8);" /> 
    			

    배열에서 항목을 걸러내는 방법을 보자. 그리고나서 각각의 요소로부터 맴버를 가져온다.

    <script>
    	function showLocalLinks(paragraph){
    		paragraph = $(paragraph);
    		var links = $A(paragraph.getElementsByTagName('a'));
    		//find links that do not start with 'http'
    		var localLinks = links.findAll( function(link){
    			//we'll just assume for now that external links
    			// do not have a '#' in their url
    			return link.href.indexOf('#') >= 0;
    		});
    		//now the link texts
    		var texts = localLinks.pluck('innerHTML');
    		//get them in a single string
    		var result = texts.inspect();
    		alert(result);
    	}
    
    </script>
    <p id="someText">
    	This <a href="http://othersite.com/page.html">text</a> has 
    	a <a href="#localAnchor">lot</a> of 
    	<a href="#otherAnchor">links</a>. Some are 
    	<a href="http://wherever.com/page.html">external</a>
    	and some are <a href="#someAnchor">local</a>
    </p>
    <input type="button" value="Find Local Links" onclick="showLocalLinks('someText')"/>
    			

    이것은 이 문법에 완전히 빠지도록 하기 위한 몇가지 예제를 가진다. 사용가능한 모든 함수를 위해 Enumerable and Array 참조문서를 보라.

    toc

    내가 강력하게 추천하는 책들.

    다음의 책들은 AJAX애플리케이션을 만들기 위해 요구되는 새로운 스킬을 배우는데 많은 도움을 주었고 이미 알고 있던 스킬을 좀더 탄탄하게 만들어주었다. 나는 좋은 책이 충분히 금적적인 가치를 하고 오랜시간동안 가치를 이어간다고 생각한다.

    toc

    prototype.js 참조

    JavaScript 클래스에 대한 확장

    prototype.js라이브러리에 기능을 추가하기 위한 방법중 하나는 현재 존재하는 JavaScript클래스를 확장하는 것이다.

    toc

    Object 클래스를 위한 확장

    메소드 종류 인자 상세설명
    extend(destination, source) static destination: 객체, source: 객체 source에서 destination으로 모든 프라퍼티와 메소드를 복사하여 상속을 구현하기 위한 방법을 제공
    inspect(targetObj) static targetObj: 객체 targetObj의 사람이 읽을수 있는 문자열 표현으로 반환. 주어진 객체가 inspect 인스턴스 메소드를 정의하지 않는다면, toString 의 값을 반환
    keys(targetObj) static targetObj: 객체 모든 프라퍼티의 이름과 주어진 객체의 메소드를 가진 Array를 반환
    values(targetObj) static targetObj: 객체 모든 프라퍼티의 값과 주어진 객체의 메소드를 가진 Array를 반환
    clone(targetObj) static targetObj: 객체 targetObj의 얕은(shallow) 복사물을 반환

    toc

    Number 클래스를 위한 확장

    메소드 종류 인자 상세설명
    toColorPart() instance (none) 숫자의 16진법 표현을 반환. 색상의 RGB컴포넌트를 HTML표현으로 변환할때 유용
    succ() instance (none) 다음 숫자를 반환. 이 함수는 반복을 포함하는 시나리오에서 사용된다.
    times(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 인자 valueindex를 반복적으로 전달하는 iterator 함수를 호출하는 것은 iteration과 현재 index내 현재 값을 각각 포함한다.

    다음의 예제는 0에서 9까지의 메시지 박스를 표시할것이다.

    <script>
    	function demoTimes(){
    		var n = 10;
    		n.times(function(index){
    			alert(index);
    		});
    		/***************************
    		 * you could have also used: 
    		 *           (10).times( .... ); 
    		 ***************************/
    	}
    
    </script>
    
    <input type="button" value="Test Number.times()" onclick="demoTimes()"/>
    			

    toc

    Function 클래스를 위한 확장

    메소드 종류 인자 상세설명
    bind(object [, arg1 [, arg2 [...]]]) instance object: 메소드를 소유하는 객체 함수(=메소드) 소유자 객체로 미리 묶는 함수의 인스턴스를 반환. 반환된 함수는 원래의 것과 같은 인자를 가질것이다.
    bindAsEventListener(object [, arg1 [, arg2 [...]]]) instance object: 메소드를 소유하는 객체 유하는 객체 함수(=메소드) 소유자 객체로 미리 묶는 함수의 인스턴스를 반환. 반환된 함수는 이것의 인자로 현재 이벤트 객체를 가질것이다.

    실제로 이 확장 중 하나를 보자.

    <input type="checkbox" id="myChk" value="1"/> Test?
    <script>
    	//declaring the class
    	var CheckboxWatcher = Class.create();
    
    	//defining the rest of the class implementation
    	CheckboxWatcher.prototype = {
    
    	   initialize: function(chkBox, message) {
    			this.chkBox = $(chkBox);
    			this.message = message;
    			//assigning our method to the event
    			
    			this.chkBox.onclick = 
    			   this.showMessage.bindAsEventListener(this, ' from checkbox');
    			
    	   },
    
    	   showMessage: function(evt, extraInfo) {
    		  alert(this.message + ' (' + evt.type + ')' + extraInfo);
    	   }
    	};
    
    
    	var watcher = new CheckboxWatcher('myChk', 'Changed');
    </script>
    
    			

    toc

    String 클래스를 위한 확장

    메소드 종류 인자 상세설명
    camelize() instance (none) -(하이픈)으로 분리된 문자열을 camelCaseString으로 변환하기. 이 함수는 예를 들면, 프라퍼티 스타일을 다루는 코드를 작성할때 유용하다.
    capitalize() instance (none) 첫번째 글자를 대문자로 변환
    dasherize() instance (none) '_' 기호를 '-' 기호로 대체
    escapeHTML() instance (none) HTML마크업 문자들이 escaped된 문자열 반환
    evalScripts() instance (none) 문자열내에서 발견되는 각각의 <script />블럭을 평가하기
    extractScripts() instance (none) 문자열내에서 발견되는 모든 <script />블럭을 포함하는 Array객체 반환
    gsub(pattern, replacement) instance pattern: 검색하는 문자열이나 정규 표현식 replacement: 간단한 문자열, 템플릿 문자열 또는 대체물을 만들기 위한 Function(strings[]) 현재 문자열에서 패턴 문자열을 찾은 결과의 문자열을 반환하고 대체 문자열이나 패턴에 일치하는 문자열을 가진 배열을 전달하는 대체함수를 호출한 결과로 대체한다. 대체물이 문자열일때, #{n}과 같은 특별한 템플릿 형태의 토큰을 포함할수 있다. 여기서 n이라는 값은 정규표현식 그룹의 인덱스이다. #{0}는 완전히 일치하면 대체될것이고 #{1}는 첫번째 그룹, #{2}는 두번째이다.
    parseQuery() instance (none) toQueryParams()와 같음.
    scan(pattern, replacement) instance pattern: 검색하는 문자열이나 정규 표현식. replacement: 반복을 통해 일치하는지 보는 Function(strings[]) 반복을 통해 문자열이 일치하는 패턴을 찾기 위한 방법을 제공한다. pattern인자는 문자열이나 RegExp가 될수 있지만 RegExp는 좀더 유용하다. 유사하게도 replacement인자는 문자열이나 함수가 될수 있지만 유용한것을 만들수 있도록 함수에 전달하는것이 좋다.
    strip() instance (none) 문자열의 앞뒤로 공백 없는 문자열을 반환
    stripScripts() instance (none) 삭제된 <script /> 블럭을 가진 문자열을 반환
    stripTags() instance (none) HTML이나 XML태그가 삭제된 문자열을 반환
    sub(pattern, replacement [, count]) instance pattern: 검색하는 문자열이나 정규 표현식. replacement: 문자열 또는 대체물을 만드는 Function(strings[]) count: 숫자나 대체물 - 디폴트는 1 gsub와 매우 유사하지만 count파라미터로 지정되는 대체물의 수에 제한이 있다
    toArray() instance (none) 문자열을 이것의 문자들의 Array로 쪼개기
    toQueryParams() instance (none) 쿼리문자열(querystring)을 파라미터 이름에 의해 인덱스화되는 결합된 Array로 쪼개기
    truncate(length [, truncation]) instance length: 결과 문자열의 최대 길이 truncation: 결과 문자열의 마지막 글자를 대체하기 위해 사용되는 문자열 - 디폴트는 '...' 최대 길이의 문자열을 만들기 위해 사용. 문자열이 최대 길이를 유지하기 위해 짤릴필요가 있을 경우, truncation인자의 텍스트는 마지막의 몇개의 글자를 대체하기 위해 사용된다. (이를테면.: var s='123456790'; alert(s.truncate(5)); //displays '12...' )
    underscore() instance (none) CamelizedStringValue를 uderscore_formatted_string로 변환. (이를테면.: var s='Namespace::MyClass123'; alert(s.underscore()); //displays 'namespace/my_class123' ). 이 함수는 루비 온 레일즈 기능에서 직접 대상이 될것처럼 보인다.
    unescapeHTML() instance (none) escapeHTML()의 반대

    toc

    Array 클래스를 위한 확장

    시작하기 위해, ArrayEnumerable를 확장한다. 그래서 Enumerable객체내에 정의되는 모든 편리한 메소드는 사용가능하다. 이것외에도, 아래의 메소드들이 구현되었다.

    메소드 종류 인자 상세설명
    clear() instance (none) 배열을 비우고 자체를 반환한다.
    compact() instance (none) null 이거나 undefined인 요소를 제외하고 배열을 반환한다. 이 메소드는 배열자체를 변경하지 않는다.
    first() instance (none) 배열의 첫번째 요소를 반환한다.
    flatten() instance (none) 기복이 없고, 1차원의 배열을 반환한다. 이 함수는 배열이고 반환된 배열내 요소를 포함하는 배열의 각 요소를 찾음으로써 수행된다.
    indexOf(value) instance value: what you are looking for. 배열에서 찾아진다면 주어진 value의 0부터 시작하는 인덱스의 위치를 반환. value이 없다면 -1을 반환
    inspect() instance (none) 요소를 가진 배열의 잘 포맷팅된 문자열 표시를 반환하기 위해 변경
    last() instance (none) 배열의 마지막 요소를 반환한다.
    reverse([applyToSelf]) instance applyToSelf: 배열 자체가 반전되는지 표시 역순서로 배열을 반환. 인자가 주어지지 않거나 인자가 true라면, 배열자체는 반전될것이다. 그렇지 않으면 변경되지 않고 남는다.
    shift() instance (none) 첫번째 요소를 반환하고 배열로부터 이것을 제거한다. 배열의 길이는 1 감소한다.
    without(value1 [, value2 [, .. valueN]]) instance value1 ... valueN: 배열내 존재한다면 제외될 값 인자의 리스트에 포함된 요소를 제외한 배열을 반환. 이 메소드는 배열 자체를 변경하지는 않는다.

    이 메소드들을 사용하는 것을 보자.

    <script>
    var A = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
    alert(A.inspect()); // "['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']"
    var B = A.without('e','f');
    alert(B.inspect()); // "['a', 'b', 'c', 'd', 'g', 'h']"
    alert(A.inspect()); // did not change A: "['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']"
    A.push(null);
    A.push('x');
    A.push(null);
    A.push('y');
    alert(A.inspect()); // "['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', null, 'x', null, 'y']"
    A = A.compact();
    alert(A.inspect()); // "['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'x', 'y']"
    var e = A.shift();
    alert(e); // "a" 
    alert(A.inspect()); // "['b', 'c', 'd', 'e', 'f', 'g', 'h', 'x', 'y']"
    alert(A.indexOf('c')); // 1
    alert(A.first()); // 'b'
    alert(A.last()); // 'y'
    A.clear();
    alert(A.inspect()); // "[]"
    A = ['a', 'b', 'c'];
    B = A.reverse(false);
    alert(B.inspect()); // "['c', 'b', 'a']"
    alert(A.inspect()); // A left untouched: "['a', 'b', 'c']"
    A.reverse(true);
    alert(A.inspect()); // "['c', 'b', 'a']"	
    A = ['a', 'b',  ['c1','c2','c3'] , 'd',  ['e1','e2']  ];
    B = A.flatten();
    alert(B.inspect()); // "['a','b','c1','c2','c3','d','e1','e2']"		
    alert(A.inspect()); // unchanged: "['a','b',['c1','c2','c3'],'d',['e1','e2']]"		
    </script>
    			

    toc

    document DOM 객체를 위한 확장

    메소드 종류 인자 상세설명
    getElementsByClassName(className [, parentElement]) instance className: 요소와 연관된 CSS 클래스 이름, parentElement: 객체 또는 가져올 요소를 포함하는 요소의 객체나 id 주어진 CSS 클래스명과 연관된 모든 요소를 반환. parentElement id가 주어졌다면, 전체 문서가 검색될것이다.

    toc

    Event 객체를 위한 확장

    프라퍼티 타입 상세설명
    KEY_BACKSPACE Number 8: 되돌리기(<-) 키를 위한 상수 코드.
    KEY_TAB Number 9: 탭키를 위한 상수코드
    KEY_RETURN Number 13: 리턴키를 위한 상수코드
    KEY_ESC Number 27: Esc키를 위한 상수코드
    KEY_LEFT Number 37: 왼쪽 화살표 키를 위한 상수코드
    KEY_UP Number 38: 위쪽 화살표 키를 위한 상수코드
    KEY_RIGHT Number 39: 오른쪽 화살표 키를 위한 상수코드
    KEY_DOWN Number 40: 아래쪽 화살표 키를 위한 상수코드
    KEY_DELETE Number 46: Delete키를 위한 상수코드
    observers: Array 캐시된 관찰자(observers)의 목록. 상세한 객체의 내부구현의 일부
    메소드 종류 인자 상세설명
    element(event) static event: Event객체 이벤트를 일으키는 요소를 반환
    isLeftClick(event) static event: Event객체 마우스 왼쪽 버튼을 클릭시 true값 반환
    pointerX(event) static event: Event객체 페이지에서 마우스 포인터의 x측 좌표값 반환
    pointerY(event) static event: Event객체 페이지에서 마우스 포인터의 y측 좌표값 반환
    stop(event) static event: Event객체 이벤트의 디폴트 행위를 취소하고 위임을 연기하기 위해 이 함수를 사용
    findElement(event, tagName) static event: Event객체, tagName: 원하는 태그명 DOM트리 위쪽으로 가로지른다. 주어진 태그명을 가진 첫번째 요소를 검색한다. 이벤트를 발생시키는 요소로부터 시작한다.
    observe(element, name, observer, useCapture) static element: 객체 또는 아이디, name: 이벤트 명 (like 'click', 'load', etc), observer: 이벤트를 다루는 함수, useCapture: true라면, capture내 이벤트를 다루고 false라면 bubbling 내 이벤트를 다룬다. 이벤트를 위한 이벤트 핸들러 함수를 추가
    stopObserving(element, name, observer, useCapture) static element: 객체 또는 아이디, name: 이벤트 명 (like 'click'), observer: 이벤트를 다루는 함수, useCapture: true이면, capture내 이벤트를 다루고 false이면 bubbling 내 이벤트를 다룬다. 이벤트로부터 이벤트 핸들러를 제거
    _observeAndCache(element, name, observer, useCapture) static   private메소드, 이것에 대해 걱정하지말라
    unloadCache() static (none) private메소드, 이것에 대해 걱정하지말라. 메모리로부터 캐시된 모든 관찰자(observer)를 지운다.

    window객체의 이벤트를 로그하기 위한 이벤트 핸들러를 추가하는 객체를 사용하는 방법을 보자.

    <script>
    	Event.observe(window, 'load', page_loaded, false);
    
    	function page_loaded(evt) {
    	  Event.observe('parent_node', 'click', item_clicked, false);
    	}
    	
    	function item_clicked(evt){
    		var child = Event.element(evt);
    		alert('The child node with id=' + child.id + ' was clicked');
    		Event.stop(evt); //avoid another call related to 'parent_node' itself
    	}
    </script>	
    ...
    <div id="parent_node">
    	<div id="child1">First</div>
    	<div id="child2">Second</div>
    	<div id="child3">Third</div>
    </div>		
    			

    toc

    prototype.js에 새롭게 정의된 객체와 클래스

    라이브러리가 당신을 돕는 다른 방법은 객체지향 디자인과 공통적인 기능을 위한 지원 모두를 구현하는 많은 객체를 제공하는 것이다.

    toc

    PeriodicalExecuter 객체

    이 객체는 주어진 함수를 주어진 시간간격으로 반복적으로 호출하기 위한 로직을 제공한다.

    메소드 종류 인자 상세설명
    [ctor](callback, interval) constructor callback: 오직 인자로 PeriodcalExecuter 객체 자체가 전달될 함수, interval: 초단위 시간간격 함수를 반복적으로 호출할 이 객체의 하나의 인스턴스를 생성
    registerCallback() instance (none) 타이머를 다시 셋팅한다.
    stop() instance (none) 타이머를 취소하고 콜백 실행을 하지 않도록 한다.
    onTimerEvent() instance (none) 타이머가 호출하는 메소드. 순차적으로 객체 자체를 전달하는 콜백 메소드를 호출할것이다.
    프라퍼티 타입 상세설명
    callback Function(objExecuter) 호출되기 위한 함수. objExecuter: PeriodcalExecuter가 호출을 만든다.
    timer Timer 콜백 메소드를 반복적으로 호출하기 위해 타이머 객체를 다룬다.
    frequency Number 이것은 수초내 간격으로 실질적으로 작용
    currentlyExecuting Boolean 만약 함수 호출이 진행중이라면 표시

    toc

    Prototype 객체

    Prototype 객체는 사용되는 라이브러리의 버전을 명시하는 것보다 중요한 역활을 가지지 않는다.

    프라퍼티 타입 상세설명
    Version String 라이브러리의 버전
    emptyFunction Function() 비어있는(empty) 함수 객체
    K Function(obj) 주어진 파라미터를 되돌리는 함수 객체
    ScriptFragment String 스크립트를 확인하는 정규식 표현

    toc

    Enumerable 객체

    Enumerable 객체는 list형태의 구조내에서 항목을 반복하기 위한 좀더 멋진 코드를 작성하는 것을 허용한다.

    많은 객체들은 유용한 인터페이스에 영향을 끼치기 위해 Enumerable 을 확장한다.

    프라퍼티 타입 상세설명
    each(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 주어진 iterator함수를 호출하는 것은 첫번째 인자내 목록으로 각각의 요소와 두번째 인자내 요소의 인덱스 전달한다
    all([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체(선택사항) 이 함수는 주어진 함수를 사용하여 값들의 전체 집합을 테스트하기 위한 방법이다. iterator 함수가 어떤 요소를 위해 falsenull을 반환한다면, all은 false를 반환할것이다. 그렇지 않다면 true를 반환할것이다. iterator가 주어지지 않는다면, 요소 자체가 falsenull이 아닌지 테스트할것이다. 당신은 "모든 요소가 false가 아닌지 체크한다"와 같이 이것을 읽을수 있다.
    any([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체(선택사항) 이 함수는 주어진 함수를 사용하여 값들의 전체 집합을 테스트하기 위한 방법이다. iterator함수가 어떤 요소를 위해 falsenull을 반환하지 않는다면 anytrue를 반환할것이다. 그렇지 않다면 false를 반환할것이다. iterator가 주어지지 않는다면, 요소 자체가 falsenull이 아닌지 테스트할것이다. 당신은 "어느 요소가 false가 아닌지 체크한다"와 같이 이것을 읽을수 있다.
    collect(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 Array로 각각의 결과를 반환한다. 집합내 각각의 요소를 위한 하나의 결과 요소는 같은 순서이다.
    detect(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 true를 반환하는 iterator함수를 야기하는 첫번째 요소를 반환한다. true를 반환하는 요소가 없다면, detectnull을 반환한다.
    entries() instance (none) toArray()와 같다.
    find(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 detect()와 같다.
    findAll(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 true로 해석되는 값을 반환하는 iterator함수를 야기하는 모든 요소를 가진 Array을 반환한다. 이 함수는 reject()와는 반대의 함수이다.
    grep(pattern [, iterator]) instance pattern: 요소를 일치시키기 위해 사용되는 RegExp객체, iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소의 문자열 값을 pattern 정규표현식에 대해 테스트한다. 함수는 정규표현식에 대응되는 모든 요소를 포함하는 Array 를 반환할것이다. iterator함수가 주어진다면, Array는 대응되는 각각의 요소를 가진 iterator를 호출한 결과를 포함할것이다.
    include(obj) instance obj: 객체 집합내 주어진 객체를 찾도록 시도한다. 객체가 찾아진다면, true를 반환하고 찾지 못한다면 false를 반환한다.
    inGroupsOf(number, fillWith) instance number: 그룹별 타이머의 수, fillWith: 빈 공간을 채울 필요가 있는 값 첫번째 인자로 지정된 만큼의 항목을 포함하는 그룹별 collection을 반환. 초기 collection의 항목수가 첫번째 인자로 주어진 숫자로 나누어지지 않는다면, 마지막 그룹의 끝에 빈 항목이 null로 채워지거나 두번째 인자값으로 채워진다. 예를 들면, ['a','b','c','d'].inGroupsOf(3,'?')[ ['a','b','c'] , ['d','?','?'] ]를 생성한다.
    inject(initialValue, iterator) instance initialValue: 초기화 값처럼 사용되는 객체, iterator: Function(accumulator, value, index)를 충족하는 함수 객체 iterator함수를 사용하여 집합의 모든 요소를 조합한다. 호출된 iterator는 accumulator인자에서 이전 반복의 결과를 전달한다. 첫번째 반복은 accumulator인자내 initialValue를 가진다. 마지막 결과는 마지막 반환값이다.
    invoke(methodName [, arg1 [, arg2 [...]]]) instance methodName: 각각의 요소내에서 호출될 메소드의 이름, arg1..argN: 메소드 호출로 전달될 인자. 집합의 각각의 요소내 methodName에 의해 명시되는 메소드를 호출하는 것은 주어진 인자(arg1에서 argN) 전달하고 Array객체로 결과를 반환한다.
    map(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 collect()과 같다.
    max([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 가장 큰 값이나 iterator가 주어진다면 집합내 각각의 요소를 위한 iterator호출의 가장 큰 결과를 반환한다.
    member(obj) instance obj: any object include()와 같다.
    min([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 가장 작은 값을 가진 요소나 iterator가 주어진다면 집합내 각각의 요소를 위한 iterator호출의 가장 작은 결과를 가진 요소를 반환한다.
    partition([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체 두개의 다른 배열을 포함하는 Array를 반환한다. 첫번째 배열은 true를 반환하는 iterator함수를 야기하는 모든 요소를 포함할것이고 두번째 배열은 남아있는 요소를 포함할것이다. 만약 iterator가 주어지지 않는다면, 첫번째 배열은 true로 해석하는 요소를 포함할것이고 다른 배열은 남아있는 요소를 포함할것이다.
    pluck(propertyName) instance propertyName : 각각의 요소로부터 읽어들이는 프라퍼티의 이름. 이것은 요소의 인덱스를 포함할수 있다 집합의 각각의 요소내 propertyName에 의해 명시된 프라퍼티에 값을 가져가고 Array객체로 결과를 반환한다.
    reject(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 false로 해석하는 값을 반환하는 iterator함수를 야기하는 모든 요소를 가진 Array를 반환한다. 이 함수는 findAll()과는 반대되는 함수이다..
    select(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 findAll()과 같다.
    sortBy(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 iterator함수 호출결과를 따르는 정렬된 모든 요소를 가진 Array을 반환.
    toArray() instance (none) 집합의 모든 요소를 가지는 Array를 반환.
    zip(collection1[, collection2 [, ... collectionN [,transform]]]) instance collection1 .. collectionN: 병합될 목록, transform: Function(value, index)를 충족하는 함수 객체 현재의 집합으로 각각의 주어진 집합을 병합한다. 이 병합 작업은 같은 수의 요소를 가진 새로운 배열을 반환한다. 현재 집합과 각각의 요소가 각각의 병합된 집합으로부터 같은 인덱스를 가진 요소의 배열(이것을 하위 배열이라고 부르자.)이다. transform함수가 주어진다면, 각각의 하위 배열은 반환되기 전에 이 함수에 의해 변형딜것이다. 빠른 예제 : [1,2,3].zip([4,5,6], [7,8,9]).inspect() 는 "[[1,4,7],[2,5,8],[3,6,9] ]" 를 반환한다.

    toc

    Hash 객체

    Hash 객체는 hash구조를 구현한다. 이를테면, Key:Value쌍의 집합.

    Hash객체내 각각의 항목은 두개의 요소(첫번째는 key, 두번째는 value)를 가진 배열이다. 각각의 항목은 두개의 프라퍼티(keyvalue)를 가진다.

    메소드 종류 인자 상세설명
    keys() instance (none) 모든 항목의 key를 가진 Array을 반환
    values() instance (none) 모든 항목의 value를 가진 Array을 반환
    merge(otherHash) instance otherHash: Hash object hash와 전달된 다른 hash를 조합하고 새로운 결과 hash를 반환
    toQueryString() instance (none) 쿼리 문자열처럼 포맷팅된 문자열로 hash의 모든 항목을 반환. 이를테면 'key1=value1&key2=value2&key3=value3'
    inspect() instance (none) key:value쌍을 가진 hash의 포맷팅된 문자열 표현을 반환하기 위해 변경(오버라이드)

    toc

    ObjectRange 클래스

    Enumerable으로부터 상속

    상위 경계나 하위 경계로 값들의 범위를 표시

    프라퍼티 타입 종류 상세설명
    start (any) instance 범위의 시작값
    end (any) instance 범위의 마지막값
    exclusive Boolean instance 경계자체가 범위의 일부인지 판단
    메소드 종류 인자 상세설명
    [ctor](start, end, exclusive) constructor start: 시작값, end: 마지막값, exclusive: 경계가 범위내 포함되는가.? 하나의 range객체를 생성한다. start 에서 end로 범위를 지정한다. startend가 같은 타입의 객체이고 succ()메소드를 가져야만 한다.
    include(searchedValue) instance searchedValue: 검색할 값 주어진 값이 범위내 값인지 체크. truefalse값을 반환한다.

    toc

    Class 객체

    Class 객체는 라이브러리에서 다른 클래스를 선언할때 사용된다. 클래스를 선언할때 이 객체를 사용하는 것은 생성자로 제공되는 initialize()메소드를 지원하기 위한 새로운 클래스를 발생시킨다.

    아래의 샘플을 보라.

    //declaring the class
    var MySampleClass = Class.create();
    
    //defining the rest of the class implementation
    MySampleClass.prototype = {
    
       initialize: function(message) {
    		this.message = message;
       },
    
       showMessage: function(ajaxResponse) {
          alert(this.message);
       }
    };	
    
    //now, let's instantiate and use one object
    var myTalker = new MySampleClass('hi there.');
    myTalker.showMessage(); //displays alert
    
    			
    메소드 종류 인자 상세설명
    create(*) instance (any) 새로운 클래스를 위한 생성자를 정의

    toc

    Ajax 객체

    이 객체는 AJAX기능을 제공하는 많은 다른 클래스를 위한 root와 명명공간(namespace)처럼 제공한다.

    프라퍼티 타입 종류 상세설명
    activeRequestCount Number instance 진행중인 AJAX요청의 수.
    메소드 종류 인자 상세설명
    getTransport() instance (none) 새로운 XMLHttpRequest 객체를 반환

    toc

    Ajax.Responders 객체

    Enumerable 로 부터 상속되었다

    이 객체는 Ajax관련 이벤트가 발생할때 호출될 객체의 목록을 보존한다. 예를 들어, 당신이 AJAX작업을 위한 전역 예외 핸들러를 연결하길 원한다면 이 객체를 사용할수 있다.

    프라퍼티 타입 종류 상세설명
    responders Array instance 객체의 목록은 AJAX이벤트 알림(notifications)을 위해 등록되었다.
    메소드 종류 인자 상세설명
    register(responderToAdd) instance responderToAdd: 호출될 메소드를 가진 객체. responderToAdd인자를 전달하는 객체는 AJAX이벤트(이를테면, onCreate, onComplete, onException 등등)처럼 명명된 메소드를 포함해야만 한다. 유사한 이벤트가 발생하면, 적절한 이름을 가진 메소드를 포함하는 모든 등록된 객체가 호출되는 메소드를 가질것이다.
    unregister(responderToRemove) instance responderToRemove: list로부터 제거될 객체 responderToRemove 인자로 전달되는 객체는 등록된 객체의 list로부터 제거될것이다.
    dispatch(callback, request, transport, json) instance callback: 보고되는 AJAX이벤트 이름, request: 이벤트를 책임지는 the Ajax.Request 객체, transport: AJAX호출을 가지는 XMLHttpRequest 객체, json: 응답의 X-JSON 헤더(존재할때만) 등록된 객체의 목록을 통해 실행하는 것은 callback 인자내 결정된 메소드를 가지는 것을 찾는다. 호출되는 각각의 메소드는 다른 3개의 인자를 전달한다. AJAX응답이 몇몇 JSON컨텐츠를 가지는 X-JSON HTTP 헤더를 포함한다면, 이것은 평가되고 json인자로 전달될것이다. 만약 이벤트가 onException라면, transport인자는 대신에 예외를 가질것이고 json은 전달되지 않을것이다.

    toc

    Ajax.Base 클래스

    이 클래스는 Ajax객체내 정의된 다른 대부분의 클래스를 위한 기본(base)클래스처럼 사용된다.

    메소드 종류 인자 상세설명
    setOptions(options) instance options: AJAX 옵션 AJAX작업을 위해 필요한 옵션 셋팅
    responseIsSuccess() instance (none) 만약 AJAX작업이 성공한다면 true를 반환하고, 실패한다면 false를 반환
    responseIsFailure() instance (none) responseIsSuccess()와는 반대.

    toc

    Ajax.Request 클래스

    Ajax.Base로 부터 상속

    AJAX 작업을 캡슐화

    프라퍼티 타입 종류 상세설명
    Events Array static AJAX작업중 보고되는 가능한 이벤트/상태의 목록. 목록은 'Uninitialized', 'Loading', 'Loaded', 'Interactive', 그리고 'Complete.'를 포함한다.
    transport XMLHttpRequest instance AJAX작업을 가지는 XMLHttpRequest 객체
    url String instance 요청에 의해 대상이 되는 URL
    메소드 종류 인자 상세설명
    [ctor](url, options) constructor url: 꺼내기 위한 url, options: AJAX 옵션 주어진 옵션을 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성. 중요사항: 선택된 url은 브라우저의 보안 셋팅을 위한 대상이 될 가치가 없다. 많은 경우 브라우저는 현재 페이지처럼 같은 호스트로부터가 아니라면 url을 가져오지 않을것이다. 당신은 설정을 피하거나 사용자의 브라우저를 제한하기 위한 로컬 url만을 사용할 것이다.
    evalJSON() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 AJAX응답내 존재하는 X-JSON HTTP헤더의 컨텐츠를 평가하기 위해 내부적으로 호출된다.
    evalResponse() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. AJAX응답이 text/javascriptContent-type헤더를 가진다면, 응답 몸체는 평가되고 이 메소드는 사용될것이다.
    header(name) instance name: HTTP header name 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 AJAX응답의 HTTP헤더의 컨텐츠를 가져오기 위해 내부적으로 호출된다.
    onStateChange() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 AJAX호출 상태 변경시 객체 자체에 의해 호출된다.
    request(url) instance url: url for the AJAX call 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 생성자를 호출하는 동안 벌써 호출되었다.
    respondToReadyState(readyState) instance readyState: 상태 숫자값(1 에서 4) 이 메소드는 대개 외부에서 호출되지 않는다. 이것은 AJAX호출 상태가 변경될때 객체 자체에 의해 호출된다.
    setRequestHeaders() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 HTTP요청을 하는 동안 보내어질 HTTP헤더를 조합하기 위한 객체 스스로에 의해 호출된다.

    toc

    options 인자 객체

    AJAX작업의 중요한 부분은 options 인자이다. 이것은 기대되는 프라퍼티를 가지는 동안 어떠한 객체도 전달될수 있다. 이것은 AJAX호출을 위해 익명 객체를 생성하는 것이 공통적이다.

    프라퍼티 타입 디폴트 상세설명
    method String 'post' HTTP요청의 메소드
    parameters String '' 요청에 전달한 값들의 url형태의 목록
    asynchronous Boolean true AJAX호출이 비동기적으로 만들어지는지 표시
    postBody String undefined HTTP POST의 경우 요청의 몸체내 전달되는 내용
    requestHeaders Array undefined 요청과 함께 전달되기 위한 HTTP헤더의 목록. 이 목록은 많은 수의 항목을 가져야 한다. 나머지 항목은 사용자 정의 헤더의 이름이다. 그리고 다음의 항목은 헤더의 문자열 값이다. 예제 : ['my-header1', 'this is the value', 'my-other-header', 'another value']
    onXXXXXXXX Function(XMLHttpRequest, Object) undefined 각각의 이벤트/상태가 AJAX호출이 발생하는 동안 도착할때 호출될 사용자정의 함수. 이 옵션에는 "XXXXXXXX"를 위해 Ajax.Request.Events, 와 HTTP status codes의 상태중에 다양한 대안이 있다. 예를 들어 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 사용되는 함수는 AJAX작업과 평가된 X-JSON응답 HTTP헤더를 포함하는 인자를 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.
    onSuccess Function(XMLHttpRequest, Object) undefined AJAX호출이 성공적으로 완성될때 호출될 사용자정의 함수. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.
    onFailure Function(XMLHttpRequest, Object) undefined AJAX호출이 에러를 가진채 끝날때 호출될 사용자정의 함수. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.
    onException Function(Ajax.Request, exception) undefined 유효하지 않은 응답이나 유효하지 않은 인자와 같이 예외적인 조건이 클라이언트 측 AJAX호출에서 발생했을때 호출될 사용자정의 함수. 사용된 함수는 AJAX작업을 포장하는 Ajax.Request 객체와 exception객체를 포함하는 두개의 인자를 받을것이다.
    insertion an Insertion class undefined 새로운 내용이 삽입될 방법을 판단할 클래스. Insertion.Before, Insertion.Top, Insertion.Bottom, 또는 Insertion.After가 될수 있다. Ajax.Updater객체에만 적용한다.
    evalScripts Boolean undefined, false 스크립트 블럭이 응답이 도착했을때 평가할지를 판단. Ajax.Updater객체에만 적용 objects.
    decay Number undefined, 1 Ajax.PeriodicalUpdater 객체는 받은 응답이 마지막 것과 같을때 비율을 새롭게 하여 연속적인 후퇴를 결정. 예를 들어, 당신이 2를 사용한다면, 새롭게 된것중에 하나가 이전것과 같은 결과를 만든후에, 객체는 다음 refresh를 위한 시간의 두배를 기다릴것이다. 이것은 다시 반복한다면, 객체는 4배를 기다릴것이다. 이것을 후퇴를 피하기 위해 정의되지 않거나 1을 사용하도록 남겨두라.
    frequency Number undefined, 2 초단위의 갱신간격(횟수가 아닌), Ajax.PeriodicalUpdater객체에만 적용.

    toc

    Ajax.Updater 클래스

    Ajax.Request로 부터 상속

    요청된 url이 당신 페이지의 특정 요소내 직접적으로 삽입하길 원하는 HTML을 반환할때 사용된다. 당신은 url이 도착을 평가할 <script>블럭을 반환할때 이 객체를 사용할수 있다. 스크립트로 작업하기 위해 evalScripts 옵션을 사용하라.

    프라퍼티 타입 종류 상세설명
    containers Object instance 이 객체는 두개의 프라퍼티(containers.success 는 AJAX호출이 성공할때 사용될것이다. 그리고 AJAX호출이 실패한다면 containers.failure가 사용될것이다.)를 포함한다.
    메소드 종류 인자 상세설명
    [ctor](container, url, options) constructor container: 이것은 요소의 id, 요소객체 자체, 또는 두개의 프라퍼티(AJAX호출이 성공했을때 사용될 object.success 요소(또는 id), 그리고 AJAX호출이 실패했을때 사용될 object.failure요소(또는 id))를 가지는 객체가 될수 있다. url: 가져오기 위한 url, options: AJAX 옵션 주어진 옵션을 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성.
    updateContent() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 응답을 받았을때 객체 자체에 의해 호출된다. 이것은 HTML로 적절한 요소를 수정하거나 insertion옵션내 전달되는 함수를 호출할것이다. 이 함수는 두개의 인자(수정되기 위한 요소와 응답 텍스트)를 가지고 호출될것이다.

    toc

    Ajax.PeriodicalUpdater 클래스

    Ajax.Base로 부터 상속

    이 클래스는 반복적으로 인스턴스화하고 페이지에서 요소를 새롭게 하거나 Ajax.Updater가 수행할수 있는 다른 작업중 어느것을 수행하기 위한 Ajax.Updater객체를 사용한다. 좀더 많은 정보를 위해 Ajax.Updater 참조를 체크하라.

    프라퍼티 타입 종류 상세설명
    container Object instance 이 값은 Ajax.Updater생성자에 일관적으로 전달될것이다.
    url String instance 이 값은 Ajax.Updater의 생성자에 일관적으로 전달될것이다.
    frequency Number instance 초단위의 refresh간격. 디폴트는 2초. 이 숫자는 Ajax.Updater 객체를 호출할때 현재 축소(decay)에 의해 곱해질것이다.
    decay Number instance 작업을 재-수행할때 적용될 축소(decay)레벨을 유지
    updater Ajax.Updater instance 가장 최신에 사용된 Ajax.Updater 객체
    timer Object instance 다른 refresh를 위한 시각일때 객체를 알리기 위해 사용되는 자바스크립트 타이머.
    메소드 종류 인자 상세설명
    [ctor](container, url, options) constructor container:이것은 요소의 id, 요소객체 자체, 또는 두개의 프라퍼티(AJAX호출이 성공할때 사용될 object.success 요소(나 id), AJAX호출이 실패할때 사용할 object.failure 요소(나 id))를 가지는 객체가 될수 있다. url: 가져오기 위한 url, options: AJAX 옵션 주어진 옵션을 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성
    start() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것의 정기적인 작업 수행을 시작하기 위해 객체 자체에 의해 호출된다.
    stop() instance (none) 주기를 가지는 작업 수행을 종료하도록 한다. 종료후, 객체는 onComplete 옵션에 주어진 콜백을 호출할것이다.
    updateComplete() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 요청을 완성한 후에 사용되는 Ajax.Updater에 의해 호출된다. 이것은 다음 refresh스케줄링 하기 위해 사용된다.
    onTimerEvent() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 다음 수정을 위한 시각일때 내부적으로 호출된다.

    toc

    Element 객체

    이 객체는 DOM내 요소를 변경하기 위해 몇몇 유틸리티성 함수들을 제공한다.

    메소드 종류 인자 상세설명
    addClassName(element, className) instance element: element 객체 또는 아이디, className: CSS 클래스명 주어진 class명을 요소의 class명으로 추가
    classNames(element) instance element: element 객체 또는 아이디 주어진 element와 관련된 CSS 클래스명을 표시하는 Element.ClassNames 객체를 반환
    cleanWhitespace(element) instance element: element 객체 또는 아이디 요소의 자식노드에서 공백을 제거
    empty(element) instance element: element 객체 또는 아이디 element태그가 비어있는지(또는 공백만을 가지고 있는지) 표시하는 Boolean값을 반환
    getDimensions(element) instance element: element 객체 또는 아이디 element의 면적(dimensions)을 반환. 반환된 값은 두개의 프라퍼티(heightwidth)를 가지는 객체이다.
    getHeight(element) instance element: element 객체 또는 아이디 요소의 offsetHeight값을 반환
    getStyle(element, cssProperty) instance element: element 객체 또는 아이디, cssProperty : CSS프라퍼티('prop-name' 또는 'propName' 가 작동하는 형태)의 이름 주어진 element내 CSS프라퍼티의 값을 반환하거나 존재하지 않는다면 null 을 반환
    hasClassName(element, className) instance element: element 객체 또는 아이디, className: CSS 클래스명 요소가 class명중에 하나로 주어진 class명을 가진다면 true를 반환
    hide(element) instance element: element 객체 또는 아이디 style.display'none'로 셋팅하여 각각의 요소를 숨긴다.
    makeClipping(element) instance element: element 객체 또는 아이디
    makePositioned(element) instance element: element 객체 또는 아이디 element의 style.position'relative'로 변경
    remove(element) instance element: element 객체 또는 아이디 문서로 부터 요소를 제거한다.
    removeClassName(element, className) instance element: element 객체 또는 아이디, className: CSS 클래스명 요소의 class명으로 부터 주어진 class명을 제거
    scrollTo(element) instance element: element 객체 또는 아이디 창을 element위치로 스크롤
    setStyle(element, cssPropertyHash) instance element: element 객체 또는 아이디, cssPropertyHash : 적용되기 위한 스타일을 가지는 Hash객체 cssPropertyHash 인자내 값에 따라, 주어진 element내 CSS프라퍼티의 값을 셋팅.
    show(element) instance element: element 객체 또는 아이디 style.display''로 다시 셋팅하여 각각의 요소를 보여준다.
    toggle(element) instance element: element 객체 또는 아이디 각각의 전달된 요소의 가시성(visibility)을 토글(toggle)한다.
    undoClipping(element) instance element: element 객체 또는 아이디
    undoPositioned(element) instance element: element 객체 또는 아이디 element의 style.position''으로 초기화
    update(element, html) instance element: element 객체 또는 아이디, html: html content 주어진 html인자를 가지는 요소의 내부 html을 대체. 주어진 html이 <script>블럭을 포함한다면, 그것들은 포함되지는 않지만 평가될것이다.
    visible(element) instance element: element 객체 또는 아이디 요소가 눈에 보이는지 표시하는 Boolean값을 반환

    toc

    Element.ClassNames 클래스

    Enumerable로 부터 상속

    element에 관련된 CSS 클래스명의 collection을 표시

    메소드 종류 인자 상세설명
    [ctor](element) constructor element: any DOM element 객체 또는 아이디 주어진 element의 CSS 클래스명을 표시하는 Element.ClassNames 객체를 생성
    add(className) instance className: CSS 클래스 명 element에 관련된 class명의 리스트에 주어진 CSS 클래스명을 추가
    remove(className) instance className: CSS 클래스 명 element에 관련된 class명의 리스트로부터 주어진 CSS 클래스명을 제거
    set(className) instance className: CSS 클래스 명 주어진 CSS 클래스명을 가진 element을 결합, element로부터 다른 class명을 제거.

    toc

    Abstract 객체

    이 객체는 라이브러리내 다른 클래스를 위한 root처럼 제공한다. 이것은 어떤 프라퍼티나 메소드도 가지지 않는다. 이 객체에 정의된 클래스는 전통적인 추상 클래스처럼 처리된다.

    toc

    Abstract.Insertion 클래스

    이 클래스는 동적으로 내용물을 추가할 다른 클래스를 위한 기본 클래스처럼 사용된다. 이 클래스는 추상 클래스처럼 사용된다.

    메소드 종류 인자 상세설명
    [ctor](element, content) constructor element: element 객체 또는 아이디, content: 삽입되는 HTML 동적 내용물 삽입을 도울 객체를 생성
    contentFromAnonymousTable() instance (none)
    프라퍼티 타입 종류 상세설명
    adjacency String static, parameter 내용물이 주어진 요소에 대해 상대적으로 위치할 지점을 명시하는 파라미터. 가능한 값은 'beforeBegin', 'afterBegin', 'beforeEnd', 그리고 'afterEnd'.
    element Object instance 삽입이 상대적으로 만들어질 요소객체
    content String instance 삽입될 HTML

    toc

    Insertion 객체

    이 객체는 라이브러리내 다른 클래스를 위한 root처럼 제공한다. 이것은 어떠한 프라퍼티나 메소드를 가지지 않는다. 이 객체에 정의된 클래스는 전통적인 추상 클래스처럼 처리된다.

    toc

    Insertion.Before 클래스

    Abstract.Insertion로 부터 상속

    요소 앞에 HTML삽입

    메소드 종류 인자 상세설명
    [ctor](element, content) constructor element: element 객체 또는 아이디, content: 삽입되는 HTML Abstract.Insertion으로 부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체를 생성

    다음의 코드는

    <br/>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>
    
    <script> new Insertion.Before('person', 'Chief '); </script>
    			

    다음처럼 HTML이 변경될것이다.

    
    <br/>Hello, Chief <span id="person" style="color:red;">Wiggum. How's it going?</span>	
    			

    toc

    Insertion.Top 클래스

    Abstract.Insertion로 부터 상속

    요소아래의 첫번째 자식으로 HTML을 삽입. 이 내용물은 요소의 열기 태그뒤에 위치할것이다.

    메소드 종류 인자 상세설명
    [ctor](element, content) constructor element: element 객체 또는 아이디, content: 삽입되는 HTML Abstract.Insertion으로부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체 생성

    다음의 코드는

    <br/>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>
    
    <script> new Insertion.Top('person', 'Mr. '); </script>
    			

    다음처럼 HTML이 변경될것이다.

    <br/>Hello, <span id="person" style="color:red;">Mr. Wiggum. How's it going?</span>	
    			

    toc

    Insertion.Bottom 클래스

    Abstract.Insertion로 부터 상속

    요소아래의 마지막 자식으로 HTML삽입. 내용물은 요소의 닫기 태그앞에 위치할것이다.

    메소드 종류 인자 상세설명
    [ctor](element, content) constructor element: element 객체 또는 아이디, content: 삽입되는 HTML Abstract.Insertion로 부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체 생성

    다음의 코드는

    <br/>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>
    
    <script> new Insertion.Bottom('person', " What's up?"); </script>
    			

    다음처럼 HTML이 변경될것이다.

    <br/>Hello, <span id="person" style="color:red;">Wiggum. How's it going? What's up?</span>	
    			

    toc

    Insertion.After 클래스

    Abstract.Insertion로 부터 상속

    요소의 닫기 태그뒤 HTML삽입

    메소드 종류 인자 상세설명
    [ctor](element, content) constructor element: element 객체 또는 아이디, content: 삽입되는 HTML Abstract.Insertion으로부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체 생성

    다음의 코드는

    <br/>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>
    
    <script> new Insertion.After('person', ' Are you there?'); </script>
    			

    다음처럼 HTML이 변경될것이다.

    <br/>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span> Are you there?	
    			

    toc

    Field 객체

    This object provides some utility functions for working with input fields in forms.

    메소드 종류 인자 상세설명
    activate(field) instance field: field element 객체 또는 아이디 포커스를 이동하고 텍스트 선택을 지원하는 field내 값을 선택
    clear(field) instance field: field element 객체 또는 아이디 field요소로부터 각각 전달된 값을 지움(clear)
    disable(field) instance field: field element 객체 또는 아이디 폼 필드 요소를 사용하지 못하도록 만든다. 요소 객체를 반환한다.
    enable(field) instance field: field element 객체 또는 아이디 폼 필드 요소를 사용가능하도록 만든다. 요소 객체를 반환한다.
    focus(field) instance field: field element 객체 또는 아이디 주어진 폼 field로 입력 포커스 이동
    getValue(field) instance field: field element 객체 또는 아이디 필드에 입력되거나 선택된 값을 반환한다.
    present(field) instance field: field element 객체 또는 아이디 모든 폼 field가 빈값이 아니라면 true를 반환
    select(field) instance field: field element 객체 또는 아이디 텍스트 선택을 지원하는 field내 값을 선택

    toc

    Form 객체

    이 객체는 데이터 항목 폼과 그것들의 입력 field와 작동하기 위한 몇몇 유틸리티성 함수를 제공한다.

    메소드 종류 인자 상세설명
    serialize(form) instance form: form element 객체 또는 아이디 'field1=value1&field2=value2&field3=value3'처럼 field명과 값의 url형태의 목록을 반환
    findFirstElement(form) instance form: form element 객체 또는 아이디 form에서 첫번째로 사용가능한 필드 element를 반환
    getElements(form) instance form: form element 객체 또는 아이디 폼내 모든 입력 field를 포함하는 Array 반환
    getInputs(form [, typeName [, name]]) instance form: form element 객체 또는 아이디, typeName: input요소의 타입, name: input요소명. 폼내 모든 <input>요소를 포함하는 Array 반환. 선택적으로 목록은 요소의 type이나 name속성에 의해 필터링 될수 있다.
    disable(form) instance form: form element 객체 또는 아이디 폼내 모든 입력 field를 사용불가상태로 만들기
    enable(form) instance form: form element 객체 또는 아이디 폼내 모든 입력 field를 사용가능하게 만들기
    focusFirstElement(form) instance form: form element 객체 또는 아이디 첫번째 가시성을 활성화하고, 폼내 입력 field를 가능하게 하기
    reset(form) instance form: form element 객체 또는 아이디 폼을 리셋하기. form객체의 reset()메소드와 같다.

    toc

    Form.Element 객체

    이 객체는 폼요소와 작동하기 위한 몇몇 유틸리티성 함수를 제공한다.

    메소드 종류 인자 상세설명
    serialize(element) instance element: element 객체 또는 아이디 'elementName=elementValue'처럼 요소의 name=value 짝을 반환
    getValue(element) instance element: element 객체 또는 아이디 요소의 값을 반환

    toc

    Form.Element.Serializers 객체

    이 객체는 폼요소의 현재 값을 가져오기 위해 라이브러리 내부적으로 사용되는 몇몇 유틸리티성 함수를 제공한다.

    메소드 종류 인자 상세설명
    inputSelector(element) instance element: radio 버튼이나 checkbox처럼 checked프라퍼티를 가지는 form요소의 객체 또는 아이디 ['elementName', 'elementValue']처럼 요소의 이름과 값을 가지는 Array을 반환
    textarea(element) instance element: textbox, button 또는 password필드처럼 value프라퍼티를 가지는 form요소의 객체 또는 아이디. ['elementName', 'elementValue']처럼 요소의 이름과 값을 가지는 Array를 반환
    select(element) instance element: <select> 요소의 객체 또는 아이디 ['elementName', 'selOpt1 selOpt4 selOpt9']처럼 요소의 이름과 모든 선택된 옵션의 값이나 텍스트를 가지는 Array를 반환

    toc

    Abstract.TimedObserver 클래스

    이 클래스는 값이 변경(또는 프라퍼티가 클래스정의를 얻어내는)될때까지 하나의 요소를 모니터링할 다른 클래스를 위한 기본클래스처럼 사용된다. 이 클래스는 추상클래스처럼 사용된다.

    하위클래스는 요소의 입력값, style프라퍼티중 하나, 또는 테이블내 row의 수, 또는 당신이 추적하고자 하는 모든것을 모니터링하기 위해 생성될수 있다.

    메소드 종류 인자 상세설명
    [ctor](element, frequency, callback) constructor element: element 객체 또는 아이디, frequency: 초단위 간격, callback: 요소가 변경될때 호출되는 함수 요소를 모니터링할 객체 생성
    getValue() instance, abstract (none) 클래스는 요소에서 모니터링이 되는 현재값이 무엇인지 판단하기 위햔 메소드를 구현해야만 한다.
    registerCallback() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소 모니터링릉 시작하기 위한 객체 자체에 의해 호출된다.
    onTimerEvent() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소를 체크하기 위해 정기적으로 객체 자체에 의해 호출된다.
    Property Type Description
    element Object 모니터링되는 요소객체.
    frequency Number 이것은 체크사이에 초단위 간격으로 이루어진다.
    callback Function(Object, String) 요소가 변경될때마다 호출되기 위한 함수. 이것은 요소객체와 새로운 값을 받을것이다.
    lastValue String 요소내 확인되는 마지막 값

    toc

    Form.Element.Observer 클래스

    Abstract.TimedObserver로 부터 상속

    폼 입력 요소의 값을 모니터링하는 Abstract.TimedObserver의 구현물. 값 변경을 보고하는 이벤트를 드러내지 않는 요소를 모니터링하고자 할때 이 클래스를 사용하라. 이 경우 당신은 Form.Element.EventObserver 클래스를 대신 사용할수 있다.

    메소드 종류 인자 상세설명
    [ctor](element, frequency, callback) constructor element: element 객체 또는 아이디, frequency: 초단위 간격, callback: 요소가 변경될때 호출되는 함수 Abstract.TimedObserver으로부터 상속. 요소의 value프라퍼티를 모니터링할 객체를 생성.
    getValue() instance (none) 요소의 값을 반환

    toc

    Form.Observer 클래스

    Abstract.TimedObserver로 부터 상속

    폼내 데이터 항목 요소의 값이 변경하는지를 모니터링하는 Abstract.TimedObserver의 구현물. 당신이 값 변경을 보고하는 이벤트를 드러내지 않는 요소를 포함하는 폼을 모니터링하고자 할때 이 클래스를 사용하라. 이 경우 당신은 Form.EventObserver 클래스를 대신 사용할수 있다.

    메소드 종류 인자 상세설명
    [ctor](form, frequency, callback) constructor form: form 객체 또는 아이디, frequency: 초단위 간격, form내 데이터 항목 요소가 변경될때 호출되는 콜백 함수 Abstract.TimedObserver로부터 상속. 변경하기 위한 폼을 모니터링할 객체 생성.
    getValue() instance (none) 모든 폼의 데이터의 직렬화를 반환

    toc

    Abstract.EventObserver 클래스

    이 클래스는 요소를 위해 값-변경 이벤트가 발생할때마다 콜백함수를 수행하는 다른 클래스를 위한 기본 클래스처럼 사용된다.

    Abstract.EventObserver 타입의 다중 객체는 다른것을 지우지 않고 같은 요소로 묶일수 있다. 콜백은 요소에 할당되는 순서대로 수행될것이다.

    트리거 형태의 이벤트는 radio버튼과 checkbox를 위해서는 onclick이고 대개의 textbox와 리스트박스/드랍다운을 위해서는 onchange이다.

    메소드 종류 인자 상세설명
    [ctor](element, callback) constructor element: element 객체 또는 아이디, callback: function to be called when the event happens 요소를 모니터링할 객체 생성.
    getValue() instance, abstract (none) 클래스는 요소에서 모니터링이 되는 현재값이 무엇인지 판단하기 위햔 메소드를 구현해야만 한다.
    registerCallback() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소의 이벤트를 자체적으로 묶는 객체에 의해 호출된다.
    registerFormCallbacks() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 폼내 각각의 데이터 항목 요소의 이벤트로 자체적으로 묶기 위한 객체에 의해 호출된다.
    onElementEvent() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소의 이벤트로 묶일것이다.
    프라퍼티 타입 상세설명
    element Object 모니터링되는 요소객체
    callback Function(Object, String) 요소가 변경될때마다 호출되기 위한 함수. 이것은 요소객체와 새로운 값을 받을것이다.
    lastValue String 요소내 확인되는 마지막 값

    toc

    Form.Element.EventObserver 클래스

    Abstract.EventObserver로 부터 상속

    요소내 값 변경을 감지하기 위한 폼 데이터 항목 요소의 적절한 이벤트를 위한 콜백 함수를 수행하는 Abstract.EventObserver의 구현물. 만약 요소가 변경을 보고하는 이벤트를 드러내지 않는다면, 당신은 Form.Element.Observer 클래스를 대신 사용할수 있다.

    메소드 종류 인자 상세설명
    [ctor](element, callback) constructor element: element 객체 또는 아이디, callback: 이벤트가 발생할때 호출될 함수 Abstract.EventObserver로 부터 상속. 요소의 value프라퍼티를 모니터링할 객체 생성.
    getValue() instance (none) 요소의 값 반환

    toc

    Form.EventObserver 클래스

    Abstract.EventObserver로 부터 상속

    값이 변결될때 감지하기 위한 요소의 이벤트를 사용하여 폼내 포함되는 어느 데이터 항목 요소에 변경을 모니터링하는 Abstract.EventObserver의 구현물. 만약 폼이 변경을 보고하는 이벤트를 드러내지 않는 요소를 포함한다면, 당신은 Form.Observer 클래스를 대신 사용할수 있다.

    메소드 종류 인자 상세설명
    [ctor](form, callback) constructor form: form 객체 또는 아이디, callback: form내 데이터 항목 요소가 변경될때 호출되는 함수 Abstract.EventObserver로부터 상속. 변경을 위해 폼을 모니터링할 객체 생성.
    getValue() instance (none) 모든 폼의 데이터 직렬화를 반환.

    toc

    Position 객체 (예비 문서)

    이 객체는 요소 위치할당을 작업할때 돕는 수많은 함수를 제공한다.

    메소드 종류 인자 상세설명
    prepare() instance (none) 스크롤 위치내 변경을 수용하기 위한 deltaXdeltaY 프라퍼티 조정. 페이지 스크롤후 withinIncludingScrolloffset를 호출하기 전에 이 메소드를 호출하는 것을 기억하라.
    realOffset(element) instance element: object 요소에 영향을 끼치는 어느 스크롤 offset를 포함하는 요소의 정확한 스크롤 offset를 가진 Array을 반환. 이 결과 배열은 [total_scroll_left, total_scroll_top]과 유사하다.
    cumulativeOffset(element) instance element: object 위치가 할당된 부모 요소에 의해 부과된 어느 offset를 포함하는 요소의 정확한 위치가 할당된 offset를 가진 Array을 반환. 결과 배열은 [total_offset_left, total_offset_top]과 유사하다.
    within(element, x, y) instance element: object, x 와 y: 위치 조정 만약 주어진 지점이 주어진 요소의 직사각형내 조정이 되는지 테스트
    withinIncludingScrolloffsets(element, x, y) instance element: object, x and y: coordinates of a point  
    overlap(mode, element) instance mode: 'vertical' or 'horizontal', element: object within()은 이 메소드가 호출되기 전에 호출될 필요가 있다. 이 메소드는 요소에서 겹치는 것을 조정하는 세분화정도를 표현하는 0.0과 1.0사이의 10진수를 반환할것이다. 예를 들면, 만약 요소가 100px를 가지는 정사각형 DIV이고 (300,300)에 위치한다면, within(divSquare, 330, 330); overlap('vertical', divSquare);는 0.70을 반환해야만 한다. 이 값이 의미하는 것은 DIV의 아래쪽 경계에서 70%(100px - 30px = 70px)를 표시하는 지점이라는 것이다. 이해하기 가장 쉬운 방법은 다른 사각형의 위-왼쪽 구석처럼 주어진 쌍을 생각하는 것이다. 숫자값은 겹치는 넓이와 높이의 퍼센트값일 것이다.
    clone(source, target) instance source: element 객체 또는 아이디, target: element 객체 또는 아이디 source요소에 대해 똑같이 target요소의 크기를 다시 조정하고 다시 위치를 지정

    1.5.0을 위한 이 문서는 여전히 작업중입니다. 이 문서의 업데이트를 계속 지켜봐주십시오.
    만약 에러를 발견한다면, 나에게 알려주십시오. 그러면 가능한 한 빨리 그것을 수정할것입니다.
    한글 번역에 관련된 부분은 한국어 번역자으로 알려주십시오.

    Posted by WebProgrammer 1010

    목차

    1. id로 특정 요소 가져오기[1]
    2. 폼 컨트롤러의 값을 가져오기[2]
    3. 스타일 변경하기[3]
    4. html 내용 변경하기[4]
    5. Ajax Request의 파라미터 셋팅하기[5]
    6. Ajax Request 생성하기[6]
    7. Event 추가하기[7]
    8. 각 요소별로 함수 실행하기[8]
    9. 이벤트 핸들링[9]
    10. 호출 체이닝[10]
    11. 테이블 형태의 html 내용변경하기[11]
    12. key 이벤트 감지하기[12]
    13. 이벤트 가로채기[13]
    14. insert() 메소드 제대로 사용하기[14]
    15. form 다루기[15]

    id로 특정 요소 가져오기[#1]

    이전의 방법
    document.getElementById('foo')

    추천하는 방법

    $('foo')

    폼 컨트롤러의 값을 가져오기[#2]

    이전의 방법
    var woot = document.getElementById('bar').value
    var woot = $('bar').value

    추천하는 방법

    var woot = $F('bar')

    스타일 변경하기[#3]

    이전의 방법
    $('footer').style.height = '100px';
    $('footer').style.background = '#ffc';  

    추천하는 방법

    $('footer').setStyle({
      height: '100px',
      background: '#ffc'
    })

    html 내용 변경하기[#4]

    이전의 방법
    $('coolestWidgetEver').innerHTML = 'some nifty content'

    추천하는 방법

    $('coolestWidgetEver').update('some nifty content')

    Ajax Request의 파라미터 셋팅하기[#5]

    이전의 방법
    new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')

    추천하는 방법

    new Ajax.Request('ninja.php', {
      parameters: {
        weapon1: 'foo',
        weapon2: 'bar'
      }
    })

    Ajax Request 생성하기[#6]

    이전의 방법
    new Ajax.Request('blah.php', {
      method: 'POST',
      asynchronous: true,
      contentType: 'application/x-www-form-urlencoded',
      encoding: 'UTF-8',
    })

    추천하는 방법

    new Ajax.Request('blah.php')

    여기서 위 방법이 잘못된게 아니다. 하지만 사용된 값이 모두 디폴트 값이기 때문에 굳이 표기할 필요가 없다는 것이다.

    Event 추가하기[#7]

    이전의 방법
    Event.observe('myContainer', 'click', doSomeMagic)

    추천하는 방법

    $('myContainer').observe('click', doSomeMagic)

    뒤의 방법이 좀더 객체 지향적이고 다른 이벤트를 추가하기가 용이하다.

    각 요소별로 함수 실행하기[#8]

    이전의 방법
    $$('div.hidden').each(function(el){
      el.show();
    })

    추천하는 방법

    $$('div.hidden').invoke('show')

    같은 기능을 하기 위해 첫번째 방법처럼 지나치게 많은 함수를 사용할 필요가 없다.

    이벤트 핸들링[#9]

    이전의 방법
    $$('div.collapsed').each(function(el){
      el.observe('click', expand);
    })

    추천하는 방법

    $$('div.collapsed').invoke('observe', 'click', expand)

    호출 체이닝[#10]

    이전의 방법
    $$('input.date').invoke('observe', 'focus', onFocus);
    $$('input.date').invoke('observe', 'blur', onBlur);

    추천하는 방법

    $$('input.date')
      .invoke('observe', 'focus', onFocus)
        .invoke('observe', 'blur', onBlur)

    위 두가지 모두 같은 기능을 실행하게 되지만 앞의 예제처럼 $$() 함수를 두번이나 호출해서 처리할 필요가 없다. 아래의 경우처럼 체이닝(chaining nirvana)를 사용하면 된다.

    테이블 형태의 html 내용변경하기[#11]

    이전의 방법
    $('productTable').innerHTML = 
      $('productTable').innerHTML + 
      '<tr><td>' + productId + ' '
      + productName + '</td></tr><tr><td>'
      + productId + ' ' + productPrice + 
      '</td></tr>'

    추천하는 방법

    var rowTemplate = new Template('<tr><td>#{id} #{name}</td></tr><tr><td>#{id} #{price}</td></tr>');
    $('productTable').insert(
      rowTemplate.evaluate({
        id: productId,
        name: productName,
        price: productPrice
      }))
    )

    위 두가지 모두 같은 기능을 실행하게 되지만 앞의 예제처럼 $$() 함수를 두번이나 호출해서 처리할 필요가 없다. 아래의 경우처럼 체이닝(chaining nirvana)를 사용하면 된다.

    key 이벤트 감지하기[#12]

    $('myInput').observe('keyup', function(e){
      if (e.keyCode == Event.KEY_TAB)
        doSomethingCoolWhenTabIsPressed();
    })

    keyCode는 KEY_RETURN, KEY_ESC, KEY_TAB, KEY_LEFT, KEY_UP, KEY_RIGHT, KEY_DOWN 과 같은 값들이 있다.

    이벤트 가로채기[#13]

    기본적인 방법
    Event.observe('productInfo', 'click', displayProductInfo, false); // 'false' could be skipped
    Event.observe('productInfo', 'click', displayProductInfo);

    간단한 방법

    $('productInfo').observe('click', displayProductInfo, false); // 'false' could be skipped
    $('productInfo').observe('click', displayProductInfo);

    insert() 메소드 제대로 사용하기[#14]

    new Insertion.Bottom('blogEntry',
      new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')
        .evaluate({
          name: blogEntry.name,
          content: blogEntry.content
        }));
     
    // Insertion class is deprecated - it's recommended to use Element's insert method:
     
    $('blogEntry').insert(new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')
        .evaluate({
          name: blogEntry.name,
          content: blogEntry.content
        }), 'bottom' ); // "bottom" can be skipped
     
    $('blogEntry').insert(new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')
        .evaluate({
          name: blogEntry.name,
          content: blogEntry.content
        }));

    위치값은 top, bottom, before, after 를 사용할수 있다. 이 값을 생략한다면 디폴트는 bottom이다.

    form 다루기[#15]

    다음은 .request를 사용하는 일반적인 form이다.
    $('register').observe('submit', function(e){
      Event.stop(e);
      $(this).request();
    })

    .getInputs 는 type과 name속성에 기초하여 요소를 필터링하기 쉬도록 해준다. 여기서는 "email" 이라는 이름의 요소를 직렬화하고 폼의 "action" 이라는 속성내 포함된 URI에 결과를 서브밋한다.

    $('register').observe('submit', function(e){
      Event.stop(e);
      new Ajax.Request($(this).readAttribute('action'), {
        parameters: Form.serializeElements($(this).getInputs('', 'email'))
      })
    })

    앞서 본 .getInputs가 대부분의 경우 유용하지만 일부 속성을 제외하고자 할때는 .reject를 사용한다.

    $('register').observe('submit', function(e){
      Event.stop(e);
      new Ajax.Request(this.readAttribute('action'), {
        parameters: Form.serializeElements($(this).getElements()
          .reject(function(el){return el.hasAttribute('multiple')})
        );
      })
    })
    Posted by WebProgrammer 1010

    소개

    웹 도처에 사용되는 자바스크립트의 늘어가는 인기는 클라이언트측 코드가 안정성, 속도, 재사용성등이 혼합으로 구현되도록 하는것이 좀더 중요하게 되었다. 이것을 달성하기 위한 가장 좋은 방법중 하나는 간단한 라이브러리와 모든 프로젝트를 위한 기본사항처럼 사용하기 위한 문법이다. 고맙게도 Sam Stephenson 는 우리의 자바스크립트 개발을 쉽게 하기 위한 Prototype.js 라 불리는 놀라운 함수들의 라이브러리를 만들었다.

    우리의 독자들이Prototype 문법을 사용하는 문서 를 읽은 후 크게 놀랐고, 우리는 많은 개발자를 위해 좀더 쉽게 배울수 있도록 도와주는 라이브러리를 위한 참조문서를 만드는게 좋겠다는 결심을 했다. 다음의 튜토리얼은 Particletree프로젝트에서 사용된 가장 공통적인 함수들을 사용하는 간단한 예제와 함께 설명할 것이다. 이 문서는 Sergio Pereira에 의해 좀더 많은 내용을 가진 비공식적인 프로토타입 문서 와 함께 사용되었음을 의미한다. 그리고 script.aculo.us 문서 위키는 모든 자바스크립트/프로토타입 개발자들이 읽기를 매우 추천한다.

    시작하기

    파일을 다운로드 한 후에, 당신이 선호하는 디렉토리에 그 파일들을 넣어둬라. 당신이 해야할 일은 html문서에 다음처럼 추가를 하는 것이다.

    <script src="/scripts/prototype.js" type="text/javascript"></script>

    이것으로 자바 스크립트를 개발하는게 10배는 쉬워진다. 지금, 당신이 획득한 새롭고 멋진 무기를 보자.

    알림 - 이 튜토리얼은 1.3.1버전을 기반으로 작성되었다.

    $() 함수

    가장 자주 사용되고 편리한 함수인, $()는 DOM요소를 다루기 위한 쉬운 방법을 제공한다. 일반적으로, 당신이 DOM내 특정 요소에 접근하고자 한다면, 다음처럼 작성할것이다.

    node = document.getElementById("elementID");

    $()를 사용하면, 다음처럼 간단히 작성할수 있다.

    node = $("elementID");

    간단하고 멋지지만 이러한 장점보다, $()함수는 다중 요소를 함수안으로 가져오는 기능을 가지고 있기 때문에 document.getElementById()보다 좀더 강력하다.

    allNodes = $("firstDiv", "secondDiv");
    for(i = 0; i < allNodes.length; i++) {
        alert(allNodes[i].innerHTML);
    }

    이 예제에서, 우리는 루프를 통해 간단히 접근할수 있는 요소들의 배열을 가지고 오는 것을 볼수 있다.

    폼 헬퍼(Form Helper) 함수

    폼은 HTML과 CSS관점에서 근심거리일뿐 아니라, 자바스크립트의 측면에서도 그렇다. Prototype.js는 폼을 다루는 유용하고 독창적인 함수를 제공한다.

    $F() 함수 는 폼 요소의 값과 전달하는 ID를 반환한다. 만약 우리가 다음처럼 HTML필드를 둔다면,

    <input type="text" id="textfield" name="textfield" />
    <textarea rows="5" cols="5" id="areafield" name="areafield"></textarea>
    <select id="selectfield" name="selectfield">
        <option value="1" selected>One</option>
        <option value="2">Two</option>
    </select>
    <input type="checkbox" id="checkfield" name="checkfield" value="1" checked />

    우리는 $F()함수를 사용하여 폼내의 값들에 쉽게 접근할수 있다.

    $F("textfield");      // returns the value of the text input
    $F("areafield");      // returns the value of the textarea
    $F("selectfield");    // returns the selected value of the select
    $F("checkfield");     // returns undefined if not checked, or the value

    제어와는 관계없이 값을 얻는 기능은 대부분의 환경에서 좀더 쉽게 폼을 처리하도록 해준다. 여기에 이 함수를 사용할때 찾을수 있는 두가지 결점이 있다. 1) radio그룹의 선택된 값에 접근하는 쉬운 방법이 없다(하나의 radio요소의 값만 처리). 2) $()함수를 사용할때처럼 다중 ID를 전달하는 것이 불가능하다.

    *다른 함수인, Form.getElements() 는 타입에 관계없이 모든 폼 요소의 배열을 반환한다.

    allNodes = Form.getElements("myform");
    for(i = 0; i < allNodes.length; i++) {
        //do something to each form field
    }

    이 예제에서, 우리는 myform이라는 id를 가진 폼으로 부터 모든 요소를 가져온다. 만약 당신이 onclick을 추가하고 싶거나 각각의 폼필드에 도움말 팝업을 추가하기를 원한다면, 당신은 위와 같은 형식을 통해 할수 있다.

    우리가 볼 다음 메소드는 Form.serialize()이다. Ajax요청을 빌드할때, 당신은 데이터를 전달하기 위해 당신 자신만의 문자열을 포맷팅하기를 원한다. 폼이 서브밋되었을때, 문자열은 빌드되고, serialize()는 처리를 쉽게 만든다.

    allNodes = Form.serialize("myform");

    // returns field1=value1&field2=value2&field3=value3 and so on...

    우리를 돕기 위해 문자열을 빌드하라. 하지만 메소드를 좀더 좋게 만드는 것은 이것은 필드의 타입에 기초를 두지 않는 것이다. 우리는 이전에 $F()가 radio그룹에서 몇가지 문제점을 가지는 것을 봤다. 하지만 serialize()는 어떠한 필드 타입을 위해서도 값을 정확하게 처리한다. 사용가능한 폼 메소드만 있는 것은 아니다, 나머지것들을 보기 위해서는 Sergio의 문서 를 보라.

    getElementsByClassName

    getElementsByClassName()가 아직도 자바스크립트로 빌드되지 않은 이유는 뭔가.? 이것은 프로토타입이 아니고 그래서 프로토타입은 문서객체의 확장처럼 저장소(arsenal)로 이것을 추가했다. 이것은 document.getElementsByTagName()처럼 정확하게 작동한다. 단지 차이점은 className을 체크하는 것이다.

    allNodes = document.getElementsByClassName("red");
    for(i = 0; i < allNodes.length; i++) {
        alert(allNodes[i].innerHTML);
    }

    반환되는 배열은 주어진 className과 일치하는 모든 요소를 포함한다. 이것은 다중 className을 가진 요소들과도 잘 작동한다. getElementsByClassName()는 도처에서 모든 프로젝트에서 사용되는 함수가 되었다. 주로 DOM이벤트에 붙기 때문에 나는 모든 개발자가 이것을 사용하도록 제안한다.

    요소 헬퍼(Element Helper) 함수

    요소객체는 공통적으로 DOM조작을 돕는 많은 수의 헬퍼 함수를 제공한다. 몇몇 이러한 함수는 하나의 호출에 10줄 이상의 코드를 단순화하는동안 어떤 새로운 것도 생성하지 않는다. 그럼 몇몇 예제를 보자.

    헬퍼 없이 요소의 높이를 가져오자.

    $("first").offsetHeight

    그리고 지금은 헬퍼를 사용하는 경우이다.

    Element.getHeight("first")

    이 경우, 헬퍼는 어떠한 잇점도 제공하지 않는다. 지금 우리가 요소로부터 className을 제거하길 원하는가.? 이것은 (Prototype.js소스코드로 부터 얻어진) 다소 긴 방법이다.

    element = $(element);
    if (!element)
        return;
    var newClassName = '';
    var a = element.className.split(' ');
    for (var i = 0; i < a.length; i++) {
        if (a[i] != className) {
            if (i > 0)
                newClassName += ' ';
            newClassName += a[i];
        }
    }
    element.className = newClassName;

    그리고 지금은 헬퍼 함수를 사용하는 경우이다.

    Element.removeClassName("elementID", "red");

    멋진가.? 첫번째 예제와는 달리, 대부분의 헬퍼 함수는 공통적인 작업을 쉽게 수행하여 시간과 수고를 아낀다. 그리고 일관성을 위해, 이것은 프로젝트 도처에 Element문법을 사용하는 것이 가장 좋은 방법이 될것이다. 헬퍼 함수의 전체 목록과 그것들을 사용하는 방법을 보기 위해서, Sergio의 프로토타입 문서를 보라.

    Try.these 함수

    Try.these()는 다른 자바스크립트 구현물과 관계없이 브라우저를 종속되지 않고 작동하는 코드를 생성하도록 개발자를 도와주기 위한 멋진 함수이다. 객체와 브라우저 인식의 자신만의 방법대신에, 이 함수는 에러를 발생할때까지 코드의 하나의 경로를 수행하도록 시도하고 다음 경로로 교체한다.

    return Try.these(
        function() {
            alert("first");
            jkgjhgjhg        //intentional error
            alert("firsterror");
            return 1;
        },
        function() {
            alert("second");
            return 2;
        }
    );

    위 예제에서, 첫번째 경로는 내부 에러발생시 수행을 멈출것이다. 이것을 알라. 모든것은 에러가 발생되지 전에 수행되어야 하기 때문에 이것은 우리의 코드가 신중하도록 하기 위해 중요하다. 우리는 코드가 두번 수행되지 않도록 주의해야만 한다. 전체적으로, Try.these()는 우리가 종종 사용하는 함수일뿐 아니라, 이것이 존재하고 어떻게 사용해야 하는지 아는것은 멋진 일이다.

    Ajax 지원

    이 라이브러리에서 Ajax지원 함수는 부족하지 않다. 그리고 나는 Prototype.js의 도움으로 Ajax애플리케이션을 생성하는 방법을 보여줄것이다. 문서로부터 우리는 다음처럼 일반적인 Ajax요청을 볼수 있다.

    var myAjax = new Ajax.Request(
        url,
        {method: 'post', parameters: data, onComplete: ajax_response}
    );

    메소드가 post이거나 get인 지점에서, 파라미터는 이름/값 형태의 문자열이고, onComplete은 모든것이 종료되었을때 호출되어야 하는 함수이다. 핵심기능을 이해했을때, 라이브러리를 도구화하는 자신만의 함수를 생성하여 반복적인 Ajax호출을 만드는 것이 쉽다. 먼저, Ajax요청을 처리하는 간단한 함수이다.

    function ajax_request(url, data) {
        var myAjax = new Ajax.Request(
            url,
            {method: 'post', parameters: data, onComplete: ajax_response}
        );
    }

    요청이 종료된후, 이것을 ajax_response()로 보낸다.

    function ajax_response(originalRequest) {
        if(!bHasRedirect) {
            //process originalRequest.responseText;
        }
        else {
            bHasRedirect = false;
            ajax_request(originalRequest.responseText, "");
        }
    }

    당신이 Ajax요청을 만든후, 응답은 언제나 ajax-response()로 보내진다. 여기서 다른 Ajax요청은 bHasRedirect(전역변수)가 true로 셋팅된 경우에만 만들어질것이고 true가 아니라면 아마 코드는 함수와 originalRequest.responseText()의 전역 배열에 기반하여 수행될것이다.

    PeriodicalExecuter

    PeriodicalExecuter객체가 초기화되면, 이것은 주어진 기간에 특정 함수를 반복적으로 호출한다. 이것은 당신이 사이트의 Ajax부분을 자동으로 수정하길 바랄때 유용할것이다.

    function periodicalUpdate() {
        new PeriodicalExecuter(refreshNews, 10);
    }

    function refreshNews() {
        //Ajax code to grab news and update DOM
    }

    PeriodicalExecuter 생성자는 첫번째 파라미터처럼 호출하기 위한 함수를 예상한다. 그리고 이것은 시간간격(초단위)이다. 비록 공통적인 setInterval()가 밀리세컨드를 다루지만 시간을 혼동하지 말라. 하지만 이 함수에서 우리는 초 단위로 다룬다. 예제는 Ajax가 복잡하다고 가정하지만, 이것은 어떤 이유로 페이지를 수정할수 있다. Prototype.js는 또한 Ajax를 다룰때 쉽게 처리할수 있는 Ajax.PeriodicalUpdater클래스를 가진다.

    추가적인 고급기능.

    우리가 Prototype.js가 제공하는 모든 함수와 메소드를 다룰수는 없지만, 이것은 여기서 다룰수 없는 것중에 몇몇을 강조해두는 것은 중요하다고 볼수 있다.

    감독(observe) - 이 메소드 함수는 addEvent()와 비슷하고, DOM에 이벤트를 붙이기 위해 사용된다.

    사용자 상호작용(User Interaction) - 당신은 사용자를 처리하는 key가 무엇을 만드는지 알기 위해 KEY_TAB와 같은 전역값내 빌드된것을 찾을수 있다. 추가적으로, 당신은 마우스를 클릭할때 위치를 찾을수 있다.

    클래스 생성(Class Creation) - Prototype.js가 제공하는 것이 무엇인지 왜 멈추는가.? 같은 문법과 함수를 사용하여, 우리는 일관성을 유지하기 위해 자신만의 클래스를 빌드할수 있다. 생성자와 추가적인 메소드를 추가하는 것은 결코 쉽지 않다. 이것을 포장하기 위해 문서에서 Class.create() 를 보라.

    당신이 저자를 알지못하고 무엇인가 발생한것을 제대로 이해하지 못할때 일반적인 코드/라이브러리를 사용하는 것을 받아들일수 있는가.? 당신이 코드를 테스트하고 사람/커뮤니티를 신뢰하는 만큼 나의 대답은 예이다. Prototype.js의 경우, 신뢰는 두개의 소스로부터 빌드된다. 먼저, Ruby on Rails 은 프로토타입 지원과 통합되었다. Ruby on Rails이 훌륭한 개발 기본이 된 이후로, 많은 버그가 발견되었고 Prototype.js가 좀더 안정화되도록 많은 문제가 해결되었다. 두번째, 개발자는 Ruby on Rails의 creator 를 고용하는 37시그널에서 근무한다. 나는 회사의 개발 환경을 신뢰할 뿐 아니라, Prototype.js가 테스트가 지속되고 지속적으로 발전하리라고 생각한다. 주어진 것으로 나의 프로젝트를 테스트하고, 나는 나의 모든 프로젝트에 이 라이브러리를 자신있게 사용한다.

    Prototype.js는 이 튜토리얼에서 목록화된 것보다 두배 이상의 함수를 가지고 명백히 체크아웃할 가치가 있다. 만약 당신이 파일 사이즈(약 30K)가 꺼려진다면, 당신이 사용하지 않는 클래스는 뺄수 있고 사용자에게 제공하기 전에 PHP와 함께 자바스크립트 파일을 압축할수 있다는 것을 기억하라. 또한 당신이 약간의 메소드를 사용했다면 나머지는 배우기 쉽다. 그래서 배우는 과정은 매우 간단하다. 기본적으로 이것을 시도하기 위한 핑계거리는 없다. 위에서 본 예제는 Particletree에서 이것들을 다룬 방법이고 테스트없이 사용된 것은 없다. 기억하라. 이것은 Prototype.js에 대한 소개이고 그래서 비공식적인 프로토타입 문서를 참조하고 신뢰해야 하며 다양한 메소드를 찾는 어려운 작업을 위해 script.aculo.us 문서 위키 wiki를 보라. 언제나 처럼, 당신이 실수나 가능한 개선사항이 있다면, 우리에게 알려달라.

    Posted by WebProgrammer 1010

    <JDBC 연결을 위한 DB서버 정보 세팅>

    database.propertis

    #ORACLE 10g  DB server관련 드라이버,URL,계정,비밀번호 세팅
    db_driver=oracle.jdbc.driver.OracleDriver
    db_url=jdbc:oracle:thin:@localhost:1521:XE
    db_usernm=scott
    db_pw=tiger

    앞의 프러퍼티 이름은 임의로 정해주면 된다.


    ORM을 위한 POJO 객체를 생성한다.

    Member.java

    //POJO
    package com;

    import java.io.Serializable;

    public class Member implements Serializable {
     private String id;
     private String pw;
     private String nm;
     public String getId() {
      return id;
     }
     public void setId(String id) {
      this.id = id;
     }
     public String getNm() {
      return nm;
     }
     public void setNm(String nm) {
      this.nm = nm;
     }
     public String getPw() {
      return pw;
     }
     public void setPw(String pw) {
      this.pw = pw;
     }
    }

    테이블과 연관하기 위한 정보및 쿼리를 작성한다.

    Member.xml

    <?xml version="1.0" encoding="EUC-KR" standalone="no"?>
    <!DOCTYPE sqlMap          
                                    PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN"          
                                    "http://ibatis.apache.org/dtd/sql-map-2.dtd">
    <sqlMap namespace="Member">
     <!--
      Member
     -->
     <typeAlias alias="member" type="com.Member" /><!-- pojo클래스 별칭주기 -->

     <resultMap id="getMemberAll" class="member"><!-- 클래스 프러퍼티와 디비 컬럼맵핑 -->
      <result property="id" column="id" />
      <result property="pw" column="pw" />
      <result property="nm" column="nm" />
     </resultMap>

     <select id="getMemberAll" resultMap="getMemberAll">
      SELECT id, pw, nm FROM MEMBER
     </select>
     
     <select id="getMember" resultMap="getMemberAll">
      SELECT id, pw, nm FROM MEMBER

      WHERE ID=#id#
     </select>

     <insert id="insertMember" parameterClass="member">
      INSERT INTO MEMBER (id, pw, nm) VALUES (#id#, #pw#, #nm#)
     </insert>

     <update id="updateMember" parameterClass="member">
      UPDATE MEMBER SET pw = #pw#, nm = #nm#

      WHERE ID = #id#
     </update>

     <delete id="deleteMember" parameterClass="member">
      DELETE FROM MEMBER WHERE ID = #id#
     </delete>

    </sqlMap>

    PreparedStatement에서 동적으로 값을 할당하기 위해 ?를 사용 하듯이

    #id#처럼 동적으로 값이 할당 되는 부분을 정한다.


    SqlMapClientManager.xml

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE sqlMapConfig 
                                    PUBLIC "-//ibatis.apache.org//DTD SQL Map Config 2.0//EN"
                                    "http://ibatis.apache.org/dtd/sql-map-config-2.dtd">
    <sqlMapConfig>
            <properties resource="com/database.properties" /><!-- 디비 정보 프러퍼티  세팅 -->
            <settings cacheModelsEnabled="false"
                      useStatementNamespaces="true"
            />

            <transactionManager type="JDBC"> <!--  프러퍼티 값을 세팅-->
                    <dataSource type="SIMPLE">
                        <property name ="JDBC.Driver" value="${db_driver}"/>
                        <property name ="JDBC.ConnectionURL" value="${db_url}"/>
                <property name ="JDBC.Username" value="${db_usernm}"/>
                <property name ="JDBC.Password" value="${db_pw}"/>
                    </dataSource>
            </transactionManager>

            <sqlMap resource="com/Member.xml" /> <!-- pojo, 테이블을 맵핑한 xml들 -->
    </sqlMapConfig>
    프러퍼티에 세팅한 정보를 가져와 JDBC관련 세팅을 하고,

    pojo와 연관시킨 xml를 읽어 들인다.


    SqlMapClientManager.java

    package com;
    import java.io.Reader;

    import com.ibatis.common.resources.Resources;
    import com.ibatis.sqlmap.client.SqlMapClient;
    import com.ibatis.sqlmap.client.SqlMapClientBuilder;
    /**
    *
    * @author Administrator
    *
    */
    public class SqlMapClientManager {
           
            private static final SqlMapClient sqlMap;

            static {
                    try {
                            String resource = "com/SqlMapClientManager.xml";
                            Reader reader = Resources.getResourceAsReader(resource);
                            sqlMap = SqlMapClientBuilder.buildSqlMapClient(reader);
                           
                    } catch (Exception e) {
                            e.printStackTrace();
                            throw new RuntimeException(e);
                    }
            }
           
            private SqlMapClientManager(){}
           
            public static SqlMapClient getSqlMapClient() {
                    return sqlMap;  
            }

    }

    SqlMapClientManager.xml 파일을 읽어 들여 SqlMapClient 인스턴스를 생성한다.


    MemberDAO.java

    package com;

    import java.sql.SQLException;
    import java.util.Iterator;
    import java.util.List;

    import com.ibatis.sqlmap.client.SqlMapClient;

    public class MemberDAO {

     private static SqlMapClient sqlMap = SqlMapClientManager.getSqlMapClient();
     public List listAll(){//모든 회원 조회

      Member paramMember = new Member();
      Member returnMember = new Member();

      List list=null;
      try {
       list = sqlMap.queryForList("Member.getMemberAll", paramMember);
      } catch (SQLException e) {
       // TODO Auto-generated catch block
       e.printStackTrace();
      }

      return list;

     }

     public Member getMember(Member member){  //회원 정보 조회

      Member paramMember = member;
      Member returnMember = new Member();

      try {
       member = (Member) sqlMap.queryForObject("Member.getMember", paramMember);
      } catch (SQLException e) {
       // TODO Auto-generated catch block
       e.printStackTrace();
      }
      return member;
     }


     public void insert(Member member){ //회원 등록

      Member paramMember = member;
      System.out.println("insert Member");
      System.out.println(member.getId());
      System.out.println(member.getNm());
      System.out.println(member.getPw());
      try {
       sqlMap.insert("Member.insertMember",paramMember);
      } catch (SQLException e) {
       // TODO Auto-generated catch block
       e.printStackTrace();
      }

     }
     public void update(Member member){
      // 사용자 수정
      Member paramMember = member;

      try {
       sqlMap.update("Member.updateMember",paramMember);
      } catch (SQLException e) {
       // TODO Auto-generated catch block
       e.printStackTrace();
      }
     }

     public void delete(Member member){
      // 사용자 삭제
      Member paramMember = member;
      try {
       sqlMap.update("Member.deleteMember",paramMember);
      } catch (SQLException e) {
       // TODO Auto-generated catch block
       e.printStackTrace();
      }

     }
    }

    sqlMapClient 인스턴스를 통해 MEMBER테이블에 접근하기 위한 API제공

    Posted by WebProgrammer 1010

    Hibernate 첫 번째 예제 - 튜토리얼

                                      원문 : http://www.laliluna.de/first-hibernate-example-tutorial.html

                                      역자 : 김종대(jdkim528@korea.com)

    이 튜토리얼은 Hibernate를 사용하는 간단한 예제를 보여준다. 우리는 Hibernate가 어떻게 동작하는지를 보여주는 간단한 자바 어플리케이션을 생성시킬 것이다.

    (광고 생략...)

    개괄

    저자: Sebastian Hennebrueder

    날짜: December, 19th 2005

    사용된 소프트웨어와 프레임워크

    Eclipse 3.x

    MyEclipse 4.x가 권장되지만 선택사항임

    Hibernate 3.x (3.1을 사용함)

    소스 코드: http://www.laliluna.de/download/first-hibernate-example-tutorial.zip

    소스들은 라이브러리들을 포함하지 않는다. hibernate.org에서 라이브러리들과 당신의 데이터베이스 드라이버를 내려 받고 그것들을 아래에 설명되어 있는 프로젝트에 추가한다. 예제는 당신의 데이터베이스 설정들과 동작하도록 구성되어야 한다! 튜토리얼을 읽기 바란다.

     

    튜토리얼의 PDF 버전:  http://www.laliluna.de/download/first-hibernate-example-tutorial-en.pdf

    Hibernate2용 이전 PDF 버전:  http://www.laliluna.de/download/first-hibernate-2-example-tutorial-en.pdf

    짧은 개요

    Hibernate는 객체 관계형 매핑을 위한 솔루션이고 영속 관리 솔루션 또는 영속 계층이다. 이것은 아마 Hibernate를 배우는 아무나 이해 가능한 것은 아니다.

    당신이 생각할 수 있는 것은 아마 당신이 당신의 어플리케이션에 몇몇 기능들(비지니스 로직)을 갖도록 하고 데이터베이스 내에 데이터를 저장하고 싶어하는 것이다. 당신이 자바를 사용할 때 모든 비지니스 로직은 통상적으로 다른 클래스 타입들인 객체들과 동작한다. 당신의 데이터베이스 테이블들은 전혀 객체들이 아니다.

    Hibernate는 데이터베이스 테이블들을 어떤 클래스로 매핑시키는 솔루션을 제공한다. 그것은 데이터베이스 데이터를 어떤 클래스로 복사한다. 반대 방향으로 그것은 객체들을 데이터베이스에 저장하는 것을 지원한다. 이 과정에서 객체는 하나 이상의 테이블들로 전환된다.

    저장소에 데이터를 저장시키는 것은 영속이라 명명된다. 그리고 테이블들을 객체들에 복사하는 것 등등은 객체 관계형 매핑이라 명명된다.

    Java 프로젝트를 생성한다

    Eclipse를 사용하여 새로운 프로젝트를 생성시키기 위해 Ctrl+n (Strg+n) 키를 누른다. Java 프로젝트를 선택한다. 우리는 그것을 FirstHibernateExample라 명명할 것이다.
     

    MyEclipse를 사용하여 Hibernate용 프로젝트를 준비한다

    MyEclipse를 사용하고 있다면, 패키지 탐색기 내에서 당신의 프로젝트 상을 마우스 오른쪽 버튼 클릭하고 Add Hibernate capabilities.를 선택한다.




     

    마법사를 계속하고 src 디렉토리 내에 새로운 hibernate.cfg.xml 을 생성시킨다.

    마지막 단계에서 당신은 Hibernate SessionFactory를 생성시킬 수 있다. 나는 내 자신의 것을 생성 시키는 것을 선호한다. 당신은 아래에서 그것을 찾을 수 있다.

    Hibernate용 프로젝트를 준비한다

    당신이 MyEclipse를 사용하고 있지 않을 때 http://www.hibernate.org/ 웹 사이트로부터 Hibernate를 내려 받아라.

    파일을 추출한다. Hibernate는 많은 라이브러리들의 목록으로 구성되어 있다. 당신은 그것들 모두를 필요로 하지 않는다. lib 디렉토리 내에 필수적인 것을 설명하고 있는 README 파일이 존재한다. 당신의 프로젝트 properties를 열고, “Java Build Path”를 선택하고, “Add External Jars”을 클릭하고 아래에 보이는 라이브러리들을 당신의 프로젝트 경로에 추가한다.

     



     

    SessionFactory를 생성시킨다

    세션 팩토리는 Hibernate에서 중요하다. 그것은 단위 쓰레드 당 오직 한 개의 세션 인스턴스만이 사용됨을 보증하는 설계 패턴을 구현하고 있다. 당신은 단지 이 팩토리로부터 당신의 Hibernate 세션을 얻을 것이다.

    de.laliluna.hibernate 패키지 내에 HibernateSessionFactory로 명명된 클래스를 생성시키고 아래의 소스 코드를 추가한다.

    /**
     * 
     * @author Sebastian Hennebrueder
     * created Feb 22, 2006
     * copyright 2006 by http://www.laliluna.de
     */
    package de.laliluna.hibernate;
    
    import javax.naming.InitialContext;
    
    import org.apache.log4j.Logger;
    import org.hibernate.HibernateException;
    import org.hibernate.Session;
    import org.hibernate.SessionFactory;
    import org.hibernate.cfg.Configuration;
    import org.hibernate.cfg.Environment;
    
    /**
     * @author hennebrueder 이 클래스는 오직 한 개의 SessionFactory 만이 초기화 되고
     *         컨피그레이션이 싱글톤으로 쓰레드 안전하게 행해진다는 점을 보증한다.
     *         실제로 그것은 단지 Hibernate SessionFactory를 포장한다.
     *         JNDI 이름이 구성될 때 세션은 JNDI에 바인드 되고, 
     *         그 밖의 경우 그것은 오직 로컬 상으로 저장된다.
     *         당신은 임의의 종류의 JTA 또는 Thread transactionFactory들을 사용하는 것이 자유롭다. 
     */
    public class InitSessionFactory {
    
    	/**
    	 * Default constructor.
    	 */
    	private InitSessionFactory() {
    	}
    
    	/**
    	 * hibernate.cfg.xml 파일의 위치. 주의: 위치는 Hibernate가 사용하는 classpath 상에 있어야 한다
    	 * #resourceAsStream 스타일은 그것의 구성 컨피그레이션 파일을 검색한다.
    	 * 그것은 Java 패키지 내에 있는 config 파일에 위치된다 - 
    	 * 디폴트 위치는 디폴트 Java 패키지이다.<br>
    	 * <br>
    	 * 예제: <br>
    	 * <code>CONFIG_FILE_LOCATION = "/hibernate.conf.xml". 
    	 * CONFIG_FILE_LOCATION = "/com/foo/bar/myhiberstuff.conf.xml".</code>
    	 */
    	private static String CONFIG_FILE_LOCATION = "/hibernate.cfg.xml";
    
    	/** hibernate 컨피그레이션의 싱글톤 인스턴스 */
    	private static final Configuration cfg = new Configuration();
    
    	/** hibernate SessionFactory의 싱글톤 인스턴스 */
    	private static org.hibernate.SessionFactory sessionFactory;
    
    	/**
    	 * 아직 초기화 되지 않았다면 컨피그레이션을 초기화 시키고 현재 인스턴스를 반환한다
    	 * 현재 인스턴스를 반환한다
    	 * 
    	 * @return
    	 */
    	public static SessionFactory getInstance() {
    		if (sessionFactory == null)
    			initSessionFactory();
    		return sessionFactory;
    	}
    
    	/**
    	 * ThreadLocal Session 인스턴스를 반환한다. 필요하다면 Lazy는 
    	 * <code>SessionFactory</code>를 초기화 시킨다.
    	 * 
    	 * @return Session
    	 * @throws HibernateException
    	 */
    	public Session openSession() {
    		return sessionFactory.getCurrentSession();
    	}
    
    	/**
    	 * 이 메소드의 행위는 당신이 구성했던 세션 컨텍스트에 의존한다.
    	 * 이 팩토리는  다음 프로퍼티 is intended to be used with a hibernate.cfg.xml
    	 * <property name="current_session_context_class">thread</property>를 
    	 * 포함하는 hibernate.cfg.xml과 함께 사용되게 기안되어 있다. 이것은 
    	 * 현재의 열려진 세션을 반환할 것이거나 존재하지 않을 경우 새로운 세션을 생성시킬 것이다
    	 * 
    	 * @return
    	 */
    	public Session getCurrentSession() {
    		return sessionFactory.getCurrentSession();
    	}
    
    	/**
    	 * 심지어 하나 이상의 쓰레드가 sessionFactory를 빌드하려고 시도하는 경우조차도 
    	 * 안전한 방법으로 sessionFactory를 초기화 시킨다
    	 */
    	private static synchronized void initSessionFactory() {
    		/*
    		 * [laliluna] 다시 null을 체크한다 왜냐하면 sessionFactory가 마지막 체크와 현재의 체크 사이에
    		 * 초기화 되었을 수도 있기 때문이다
    		 * 
    		 */
    		Logger log = Logger.getLogger(InitSessionFactory.class);
    		if (sessionFactory == null) {
     
    
    			try {
    				cfg.configure(CONFIG_FILE_LOCATION);
    				String sessionFactoryJndiName = cfg
    				.getProperty(Environment.SESSION_FACTORY_NAME);
    				if (sessionFactoryJndiName != null) {
    					cfg.buildSessionFactory();
    					log.debug("get a jndi session factory");
    					sessionFactory = (SessionFactory) (new InitialContext())
    							.lookup(sessionFactoryJndiName);
    				} else{
    					log.debug("classic factory");
    					sessionFactory = cfg.buildSessionFactory();
    				}
    
    			} catch (Exception e) {
    				System.err
    						.println("%%%% Error Creating HibernateSessionFactory %%%%");
    				e.printStackTrace();
    				throw new HibernateException(
    						"Could not initialize the Hibernate configuration");
    			}
    		}
    	}
     
    	public static void close(){
    		if (sessionFactory != null)
    			sessionFactory.close();
    		sessionFactory = null;
     
    	}
    }


     

    Log4J 구성하기

    당신이 위에서 보았듯이 우리는 log4j 라이브러리를 추가시켰다. 이 라이브러리는 소스 디렉토리 내에 컨피그레이션 파일처럼 행하거나 다음 오류로서 당신을 맞이한다.

    log4j:WARN No appenders could be found for logger (TestClient).
    log4j:WARN Please initialize the log4j system properly.

    루트 디렉토리에 log4j.properties로 명명된 파일을 생성시키고 다음을 삽입시킨다:

    ### direct log messages to stdout ###
    log4j.appender.stdout=org.apache.log4j.ConsoleAppender
    log4j.appender.stdout.Target=System.out
    log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
    log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n
    
    ### set log levels - for more verbose logging change 'info' to 'debug' ###
    
    log4j.rootLogger=debug, stdout
    
    log4j.logger.org.hibernate=info
    #log4j.logger.org.hibernate=debug
    
    ### log HQL query parser activity
    #log4j.logger.org.hibernate.hql.ast.AST=debug
    
    ### log just the SQL
    log4j.logger.org.hibernate.SQL=debug
    
    ### log JDBC bind parameters ###
    log4j.logger.org.hibernate.type=info
    
    ### log schema export/update ###
    log4j.logger.org.hibernate.tool.hbm2ddl=info
    
    ### log HQL parse trees
    #log4j.logger.org.hibernate.hql=debug
    
    ### log cache activity ###
    log4j.logger.org.hibernate.cache=info
    
    ### log transaction activity
    #log4j.logger.org.hibernate.transaction=debug
    
    ### log JDBC resource acquisition
    #log4j.logger.org.hibernate.jdbc=debug
    
    ### enable the following line if you want to track down connection ###
    ### leakages when using DriverManagerConnectionProvider ###
    #log4j.logger.org.hibernate.connection.DriverManagerConnectionProvider=trace

    데이터베이스 드라이버를 추가한다

    Hibernate는 데이터베이스에 접근할 데이터베이스 드라이버를 필요로 한다. 프로젝트 properties를 열고, “Java Build Path”를 클릭하고, “Add External Jars”를 선택하고 당신의 데이터베이스 드라이버를 추가한다. 당신이 PostgreSQL를 사용할 때 당신은  http://jdbc.postgresql.org에서 당신의 데이터베이스 드라이버를 찾을 수 있고 MySQL을 사용하고 있다면 이곳 http://www.mysql.de/products/connector/j에서 찾을 수 있다.

    데이터베이스와 테이블드을 생성시킨다.

    Create a database with MySql 또는 PostgreSQL 또는 당신이 좋아하는 DBMS에 데이터베이스를 생성시킨다. 그것을 “firsthibernate”로 명명한다.

    PostgreSql을 사용한다면 테이블을 생성시키기 위해 다음 스크립트를 사용하라:

    CREATE TABLE "public"."honey" (
      id SERIAL, 
      name text, 
      taste text, 
      PRIMARY KEY(id)
    );


     

    MySql을 사용하고 있다면 다음 스크립트를 사용하라:

    CREATE TABLE `honey` (
      `id` int(11) NOT NULL auto_increment,
      `name` varchar(250) default NULL,
      `taste` varchar(250) default NULL,
      PRIMARY KEY  (`id`)
    ) ENGINE=MyISAM DEFAULT CHARSET=latin1

    클래스를 생성시킨다

    Create a new class named “Honey” in the package “de.laliluna.example”. Add three fields id, name and taste and generate (Context menu -> Source -> Generate Getter and Setter) or type the getters and setters for the fields. Then create an empty constructor.

    package de.laliluna.example;
    
    /**
     * @author laliluna
     *
     */
    public class Honey {
    	private Integer id;
    	private String name;
    	private String taste;
     
    	public Honey(){
     
    	}
     
    	/**
    	 * @return Returns the id.
    	 */
    	public Integer getId() {
    		return id;
    	}
    	/**
    	 * @param id The id to set.
    	 */
    	public void setId(Integer id) {
    		this.id = id;
    	}
    	/**
    	 * @return Returns the name.
    	 */
    	public String getName() {
    		return name;
    	}
    	/**
    	 * @param name The name to set.
    	 */
    	public void setName(String name) {
    		this.name = name;
    	}
    	/**
    	 * @return Returns the taste.
    	 */
    	public String getTaste() {
    		return taste;
    	}
    	/**
    	 * @param taste The taste to set.
    	 */
    	public void setTaste(String taste) {
    		this.taste = taste;
    	}
    }



     

    매핑 파일들을 생성시킨다

    이미 생성되어 있지 않다면 루트 디렉토리에 “hibernate.cfg.xml”로 명명된 새로운 파일을 생성시킨다.

    hibernate 파일 내에 다음을 추가한다. 당신의 데이터베이스 구성에 적합하게 username과 password를 변경하는 것을 잊지 말라.

    PostgreSQL 버전:

    <?xml version='1.0' encoding='UTF-8'?>
    <!DOCTYPE hibernate-configuration PUBLIC
              "-//Hibernate/Hibernate Configuration DTD 3.0//EN"
              "http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">
    <hibernate-configuration>
    <session-factory>
    	<property name="connection.url">jdbc:postgresql://localhost/firsthibernate</property>
    	<property name="connection.username">postgres</property>
    	<property name="connection.driver_class">org.postgresql.Driver</property>
    	<property name="dialect">org.hibernate.dialect.PostgreSQLDialect</property>
    	<property name="connection.password">p</property>
     <property name="transaction.factory_class">org.hibernate.transaction.JDBCTransactionFactory</property>
        <!--  thread is the short name for
          org.hibernate.context.ThreadLocalSessionContext
          and let Hibernate bind the session automatically to the thread
        -->
        <property name="current_session_context_class">thread</property>
        <!-- this will show us all sql statements -->
        <property name="hibernate.show_sql">true</property>
    	<!-- mapping files -->
    	<mapping resource="de/laliluna/example/Honey.hbm.xml" />
    </session-factory>
    </hibernate-configuration>


     

    MySQL 버전:


     

    <?xml version='1.0' encoding='UTF-8'?>
    <!DOCTYPE hibernate-configuration PUBLIC
              "-//Hibernate/Hibernate Configuration DTD 3.0//EN"
              "http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">
    <hibernate-configuration>
    <session-factory>
    	<property name="connection.url">jdbc:mysql://localhost/firsthibernate</property>
    	<property name="connection.username">root</property>
    	<property name="connection.driver_class">com.mysql.jdbc.Driver</property>
    	<property name="dialect">org.hibernate.dialect.MySQLDialect</property>
    	<property name="connection.password">r</property>
     <property name="transaction.factory_class">org.hibernate.transaction.JDBCTransactionFactory</property>
        <!--  thread is the short name for
          org.hibernate.context.ThreadLocalSessionContext
          and let Hibernate bind the session automatically to the thread
        -->
        <property name="current_session_context_class">thread</property>
        <!-- this will show us all sql statements -->
        <property name="hibernate.show_sql">true</property>
     
    	<!-- mapping files -->
    	<mapping resource="de/laliluna/example/Honey.hbm.xml" />
    
    </session-factory>
    </hibernate-configuration>


     

    이 파일은 데이터베이스에 대한 구성 우리의 경우에는 PostgreSQL 데이터베이스의 구성 그리고 모든 매핑 파일들을 포함한다. 우리의 경우 그것은 단지 파일 Honey.hbm.xml이다. 

    <property name="dialect">org.hibernate.dialect.PostgreSQLDialect</property>

    태그는 dialect를 구성한다. 당신의 데이터베이스에 맞게 이것을 변경하라. 당신의 데이터베이스를 위한 dialect를 찾기 위해 Hibernate 레퍼런스의 “SQL Dialects” 장에서 찾아보라.

    de.laliluna.example 패키지 내에 Honey.hbm.xml을 생성시키고 그것을 다음으로 변경하라:

    PostgreSQL 버전:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd" >
    <hibernate-mapping>
     <class name="de.laliluna.example.Honey" table="honey">
     <id name="id" column="id" type="java.lang.Integer">
    		<generator class="sequence">
    				<param name="sequence">honey_id_seq</param>
    			</generator>
    
     </id>
     
     <property name="name" column="name" type="java.lang.String" />
     <property name="taste" column="taste" type="java.lang.String" />
     </class>
    </hibernate-mapping>


     

    MySQL 버전:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd" >
    <hibernate-mapping>
     <class name="de.laliluna.example.Honey" table="honey">
     <id name="id" column="id" type="java.lang.Integer">
     <generator class="increment"/>
     </id>
     <property name="name" column="name" type="java.lang.String" />
     <property name="taste" column="taste" type="java.lang.String" />
     </class>
    </hibernate-mapping>


     

    이 파일에서 우리의 클래스 Honey로부터 데이터베이스 테이블 honey로의 매핑이 구성되어 있다.

    테스트 클라이언트를 생성한다

    “de.laliluna.example” 패키지 내에 Java 클래스 “TestClient”를 생성시킨다.

    다음 소스 코드를 추가한다. 그것은 데이터베이스 내에 엔트리들을 생성시키는 메소드, 그것들을 업데이트하고 리스트하는 메소드들을 포함하고 있다.

    /**
     * Test application for example 
     * @author Sebastian Hennebrueder
     * created Jan 16, 2006
     * copyright 2006 by http://www.laliluna.de
     */
    
    package de.laliluna.example;
    
    import java.util.Iterator;
    import java.util.List;
    
    import org.apache.log4j.Logger;
    import org.hibernate.HibernateException;
    import org.hibernate.Session;
    import org.hibernate.Transaction;
    
    import de.laliluna.hibernate.InitSessionFactory;
    
    public class TestExample {
    
    	private static Logger log =Logger.getLogger(TestExample.class);
    	/**
    	 * @param args
    	 */
    	public static void main(String[] args) {
    		Honey forestHoney = new Honey();
    		forestHoney.setName("forest honey");
    		forestHoney.setTaste("very sweet");
    		Honey countryHoney = new Honey();
    		countryHoney.setName("country honey");
    		countryHoney.setTaste("tasty");
    		createHoney(forestHoney);
    		createHoney(countryHoney);
    		// our instances have a primary key now:
    		log.debug(forestHoney);
    		log.debug(countryHoney);
    		listHoney();
    		deleteHoney(forestHoney);
    		listHoney();
    
    	}
    
    	private static void listHoney() {
    		Transaction tx = null;
    		Session session = InitSessionFactory.getInstance().getCurrentSession();
    		try {
    			tx = session.beginTransaction();
    			List honeys = session.createQuery("select h from Honey as h")
    					.list();
    			for (Iterator iter = honeys.iterator(); iter.hasNext();) {
    				Honey element = (Honey) iter.next();
    				log.debug(element);
    			}
    			tx.commit();
    		} catch (HibernateException e) {
    			e.printStackTrace();
    			if (tx != null && tx.isActive())
    				tx.rollback();
    
    		}
    	}
    
    	private static void deleteHoney(Honey honey) {
    		Transaction tx = null;
    		Session session = InitSessionFactory.getInstance().getCurrentSession();
    		try {
    			tx = session.beginTransaction();
    			session.delete(honey);
    			tx.commit();
    		} catch (HibernateException e) {
    			e.printStackTrace();
    			if (tx != null && tx.isActive())
    				tx.rollback();
    		}
    	}
    
    	private static void createHoney(Honey honey) {
    		Transaction tx = null;
    		Session session = InitSessionFactory.getInstance().getCurrentSession();
    		try {
    			tx = session.beginTransaction();
    			session.save(honey);
    			tx.commit();
    		} catch (HibernateException e) {
    			e.printStackTrace();
    			if (tx != null && tx.isActive())
    				tx.rollback();
    		}
    	}
    }


     

    축하합니다. 당신은 Hibernate 세계에서 당신의 첫 번째 단계들을 마쳤습니다. 

    우리는 당신이 Hibernate 세계에 빠르게 진입하기를 원했다. Hibernate를 사용하는 많은 복잡한 토픽들과 더 나은 구현이 존재한다. 예를 들어, 각각의 메소드 내에서 세션을 열고 닫는 것은 좋은 연습이 아니다. 하나의 세션은 재사용될 수 있으며 그 동안에 많은 시간을 절약한다.

    당신이 최상의 실전에 대해 더 많은 것을 배우고자 원할 경우 우리의 세미나 또는 다른 튜토리얼을 살펴보길 바란다.

    Copyright and disclaimer

    This tutorial is copyright of Sebastian Hennebrueder, laliluna.de. You may download a tutorial for your own personal use but not redistribute it. You must not remove or modify this copyright notice.(이 튜토리얼은 Sebastian Hennebrueder, laliluna.de에 저작권이 있다. 당신은 당신 자신의 개인 용도로 튜토리얼을 내려받을 수 있지만 그것을 재배포할 수 없다. 당신은 이 저작권 경고를 제거하지 말아야 하거나 변경시키지 말아야 한다.이하 생략...)

    The tutorial is provided as is. I do not give any warranty or guaranty any fitness for a particular purpose. In no event shall I be liable to any party for direct, indirect, special, incidental, or consequential damages, including lost profits, arising out of the use of this tutorial, even if I has been advised of the possibility of such damage.

    Posted by WebProgrammer 1010
    90.개발관련문서2008/07/24 18:10

    Main Page

    From MDC

    Image:Firefoxlogo2.png

    Firefox 3 for developers

    Firefox 3 has been released, and is now available for download. See Firefox 3 for developers for developer documentation.

    The Truth About JavaScript

    Get a sneak peek at upcoming changes to JavaScript from Brendan Eich.

    Mozilla Developer Center contents

    Topics

    Mozilla internals

    Application and component framework

    Technologies

    • AJAX - Asynchronous JavaScript and XML
    • CSS - Cascading Style Sheets
    • DOM - Document Object Model
    • HTML - Hypertext Markup Language
    • JavaScript
    • NSS - Network Security Services
    • RDF - Resource Description Framework
    • RSS - Really Simple Syndication
    • SVG - Scalable Vector Graphics
    • XBL - Extensible Binding Language
    • XForms - XML Forms
    • XML - Extensible Markup Language
    • XML Web Services - SOAP, XML-RPC, etc.
    • XPath - XML Path Language
    • XSLT - Extensible Stylesheet Language Transformations
    • XUL - XML User Interface Language

    Mozilla Developer Center


    Mozilla Developer Center blogs

    Mozilla Developer News

    MDC Webwatch

    Posted by WebProgrammer 1010
    01.JAVA/Java2008/07/24 13:57
    JSP Tips
    http://www.okjsp.pe.kr/seq/42732
    유효하지 않는 전자메일 2004-03-18 00:19:30.0
    park17@empal.com http://www.gampol.net
    자바로 썸네일 빈즈를 함 만들어 보았네요..!!!

    테스트 환경

    j2sdk1.4.x
    jai 1.x
    window 2000, Linux
    Tomcat 4.1.x


    www.gampol.net에서 테스트 해 보실수 있습니다.

    집에있는 컴이라 보통 저녁 10시까진 On상태이고

    제가 잠잘때는 Off상태입니다.


    먼저 SUN사이트에서 jai(Java Advanced Imaging 1.1.2)
    를 다운로드 받으셔야 합니다.

    http://java.sun.com/products/java-media/jai/downloads/download-1_1_2.html

    다운 받고 압축이나 실행파일을 실행 하시면

    jai_codec.jar, jai_core.jar

    파일을 CLASSPATH에 추가하시고

    JAVA_OPTS="-Djava.awt.headless=true"

    또는

    CATALINA_OPTS="-Djava.awt.headless=true"

    환경변수를 셋팅하시고

    또는 빈즈나 서블릿 실행시

    System.setProperty("java.awt.headless", "true");

    이걸 추가 하시기 바랍니다.


    메소드는 대충 보시면 아실겁니다..

    배율, 넓이높이 지정

    파일로도 저장 가능하고 서버에 있는 이미지를 웹상에서 걍 보여 줄수도 있습니다.


    문의 사항이나 버그가 있으면

    park17@empal.com으로 연락 바랍니다.

    그럼 유용하게 사용하시기 바랍니다..

    출처 : Tong - 설레임중독자님의 JAVA통

    Posted by WebProgrammer 1010
    98..Etc/Etc...2008/07/24 13:40
     삽질 소감 -
    아직 다듬어질려면 멀었고 관련 문서도 없는데가가 거의 이사람 혼자 만들어 공개한것으로 보인다. 소스코드는 제법 튼실해 보이고, 참고할만한 각종 유틸성 기법들이 유용하게 보인다. 그러나 일반 유저가 코드를 돌려보기엔 접근성이 상당히 떨어진다. 잘~ 하면 중간에 흔적도 없이 살아질 프로젝트 같다.

    소스코드에서도 확인할수 있고 테스트한 동영상을 봐도 확인할수 있겠지만 이것은 공용(?) 어플리케이션 프레임웍(AP)를 표방(? 흉내?)하고 있다. 그래서 설정이 복잡하다 약간만 환경을 바꾸거나, 꼬여도 에러잡기가 힘들다. (Library의존성은 왜이리 꼬였는지...) Appfuse와는 보다 더 많은걸 구현하다 보니 상당부분 유연성을 포기하고 대신에 틀에 맞는 편리함을 제공하고 있다. 여전히 더 지켜봐야 할것 같다.

    그래도 흔적을 남기는 이유는 AP를 구경하기 쉬운게 아니기 때문에....

    동영상 및 소스코드 다운로드 : Download Link (동영상은 Demo.rar)


    IWebMvc Milestone 3 released

    By Jose Noheda

    I've been working hard to polish a lot of aspects of IWebMvc for this milestone 3 and finally today I've finished. The result is a much more mature product that starts to resemble a usable framework. Nonetheless, I had time to add new features as well, some of them really important!

    Let's review some of them:
    • Security
      IWebMvc now supports Spring security 2.0 based authentication and authorization using the new security namespace possibilities.
      • Spring Security 2.0 RC1
        The new version of Acegi is fully configured. Declarative security enabled.
      • Database realm
        Users / Roles are persisted in DB as any other entity.
      • User Administration
        CRUD operations to add / edit users, assign permissions and toggle (enable/disable) them are provided out-of-the-box.
      • Login / log off widget
        Working and easily integrated form based authentication. Default user/password combination is iwebmvc/iwebmvc (change it in iwebmvc.properties file)
      • Captcha widget
        AJAX validated captcha to enable human detection.
      • Remember me
        The framework will auto-login a user if so desires and will store authentication info using cookies.
    • Preliminary documentation
      A long standing due. A good percentage of the client interface is documented using the demo application.
    • Widgets
      • I18n Text
        A user can attempt to automatically translate texts into any of the supported languages using the Google AJAX Translation API
      • Tree (Hierarchy) widget
        New in this version, a user can build a tree of generic nodes and modify it as wished.
      • Grid (Table) widget
        The new grid supports a contextual menu, filtering (in addition to paging and ordering), inline edition of cell data (with AJAX storage management), cell content view (for data that exceeds column width) and auto width/height
      • Form widget
        Allows to check required fields before submitting and sending complete forms using JSON.
      • Other widgets
        Everything has been revamped a little or a lot.
    • Miscellaneous
      • YUI compression
        All JS is minified before sent (in addition to GZIP). This isn't activated by default in development environments.
      • Audit
        All create / update / delete operations are transparently audited (user, operation type, date/time, affected record, ...)
      • RSS feeds
        A generic framework to obtain RSS feeds of any entity has been developed. Example feeds have been created for audit operations.
      • DWR custom converters
        Working with JPA entities in JS is easier with the UUID and the Class converters.
      • IE7/Opera support
        A lot of work has been invested in making IWebMvc compatible with other browsers. IE7 is fully compatible with this release (though this bug in dojo affects any page that contains an Editor). Opera support is preliminary but a good chunk of the code is working.
      • Upgraded libraries
        In particular, to dojo 1.1 final but Spring, Hibernate and many others as well. Important: Netbeans project files have been migrated to v6.1beta to get rid of some absolute paths and facilitate project sharing (and include sources and ...). I've just tested this release with Netbeans/Glassfish & Ant/Jetty (though Eclipse/tomcat should still work fine).
    And dozens of bug fixes and other issues. All in all, a decent work! Remember that you can download it from the repository. Or save time by watching the (trimmed) screencast (you may need this codec). Enjoy it!

    출처 :  http://internna.blogspot.com/2008/04/iwebmvc-milestone-3-released.html
    Posted by WebProgrammer 1010
    98..Etc/Etc...2008/07/24 13:39

    이거 한번 돌려 보자.

    1. JDK 5.x 이상 버젼에서 돌아간다.
        ( 기본환경은 JDK5.x이상 + Ant1.7.x이상 + Eclipse3.3이상의 환경이다. )
       1.1 대충 눈치껏 설치한다.

    2. MySql-5.x이상 다운받아 설치한다.
       2.1 다운 받는다.(나는 인스톨버젼이 아닌 압축버젼을 받았다.)
       2.2 적당한 디렉토리에 압축을 풀고 mysql-nt.exe를 실행시킨다.
       2.3 Dos Command 창에서 해당 디렉토리로 이동한다.
       2.4 mysql -uroot mysql 명령으로 접속후 create database iwebmvc; 명령으로 DB를 생성한다.
       2.5 mysql은 여전히 기동시켜 둔다.

    사용자 삽입 이미지

    3. ivy를 설치하고 테스트 한다.
       3.1 Apache ivy를 다운로드 한다.(현재 2.0.0 Beta2 이다)
       3.2 적당한 디렉토리에 압축을 풀면 jar파일이 두개 있다. 그걸 Ant의 lib 폴더에 복사한다.
       3.3 Dos Command 창에서 ivy 디렉토리로 이동한다.
       3.4 의 ivy 디렉토리에서 src\example\hello-ivy로 이동한후 ant 를 실행한다.
       3.5 Build가 성공하면 된다.
    사용자 삽입 이미지

    4. IWebMvc 다운로드 페이지에서 다운로드 받는다.
       4.1 IWebMvc에서 IWebMvc - Milestone 3.zip 을 다운로드 한다.
          (SVN도 제공한다. http://internna.googlecode.com/svn/trunk/IWebMvc)
       4.2 적당한 디렉토리에 압축을 푼다.
       4.3  iwebmvc.properties를 찾아서 mysql설정을 확인한다.(WEB-INF폴더에 있다.)

    5. ant 빌드를 한다.
       5.1  Dos Command 창에서 IWebMvc 디렉토리로 이동한다.
       5.2 run.bat를 실행한다. (각종 jar파일을 다운받기 때문에 시간이 걸린다.)
       5.3 에러없이 빌드가 성공되면 정상이다.
           (최종 빌드에서 에러가 나더라도 ivy에서 jar파일 다운로드까지 성공하면 된다.)
    사용자 삽입 이미지

    6. Eclipse 프로젝트로 import한다.
       6.1 해당 디렉토리를 찾아 import 시킨다.
       6.2 라이브러리 경로가 안맞는다.(소스관리는 징하게 못한다.-_-;;; 좀좀.. 잘 정리하면 안되나?)
            - 신기하게 Unit Test 파일이 없다.(제거하고 배포한건지...)
       6.3 수동으로 찾아서 관련된 *.jar파일을 찾아서 연결하여 오류를 제거한다.
    사용자 삽입 이미지

    7. Eclipse 내부 Tomcat으로 'Run as'를 실행한다.
       7.1 Run as를 실행한다.
       7.2 만약 DB가 오라클이라면 안된다. (왜? 테이블생성 스크립트가 기본으로 Mysql이다. ㅡㅡ; )
       7.3 DB Table생성까지 성공적으로 되었다면 Tomcat이 정상적으로 올라온다.

    8. 해당 사이트를 확인 한다.
       8.1 avi 동영상을 미리 봤다면 알겠지만 해당 화면이 나타난다.
    사용자 삽입 이미지

    9. CRUD 소개 동영상으로 따라 해본다.
       9.1 두개의 동영상이 있다 각각 다운받아 따라해 보자.
            Link : http://code.google.com/p/internna/downloads/list
    Posted by WebProgrammer 1010
    98..Etc/Etc...2008/07/24 13:22

    원격 데스크탑에서 Ctrl+Alt+Del키를 쓸 일이 있다면 del키 대신 end를 누르면 된다.

    Posted by WebProgrammer 1010