98..Etc/Etc...2008. 7. 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 1010
98..Etc/Etc...2008. 7. 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 1010
98..Etc/Etc...2008. 7. 26. 17:15
반응형

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

Posted by 1010
98..Etc/Etc...2008. 7. 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 1010
98..Etc/Etc...2008. 7. 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 1010
98..Etc/Etc...2008. 7. 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 1010
98..Etc/Etc...2008. 7. 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 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 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 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 1010