Titanium 으로 몇가지 테스트 겸 Ext JS 오프라인 API documentation과 Example를 오프라인 형태로 만들어 보았습니다.
Ext JS 를 자주 사용하시는 분들께는 작은 도움이 되리라 생각하면서...

요번주는 Titanium과 함께 즐거운 한주였던것 같습니다.
매우 흥미롭고 재미있습니다. 

특히 Ext JS는 알다시피 데스크탑 형태의 성숙한 UI를 제공하기 때문에 Titanium과 연계되어 그 강력함이 배가될 수 있는 가능성을 느끼게 되었던것 같습니다. :)

이 앱의 기본 동작은 링크를 클릭하여도 되고 API 나 Example 의 이동은 컨텍스트 메뉴를 통해서 쉽게 이동할 수 있습니다.  API 참조나 예제 참조를 유연하게 연결하기 위해서입니다. (사실 제가 필요한 부분을 컨텍스트 메뉴에 담은 것입니다.)

두가지 외에는 대부분 온라인으로 연결되어지게 해 두었습니다.




OSX 10.5 Intel Download Application
Linux Intel 32-bit Download Application
Linux Intel 64-bit Download Application
Windows 32-bit Download Application


ScreenShot


신고
Posted by Rhio.kim

uTube Deck은 Youtube의 인기있는, 많이 본, 즐겨찾기가 많이 된 등 Youtube 내에서 이슈가 되는 영상들을 인터넷이 되는 환경에서 Youtube에 접속하지 않고 볼 수 있도록 Youtube Player API와 Data API 를 활용하여 만든 영상 검색 및 뷰어입니다.

Youtube JavaScript Player API Reference
http://code.google.com/intl/ko-KR/apis/youtube/js_api_reference.html#Overview
http://code.google.com/apis/ajax/playground/?exp=youtube#simple_embed

Youtube Data API Reference
http://code.google.com/intl/ko-KR/apis/youtube/2.0/reference.html

애플리케이션의 화면 프레임을 구성과 인터렉션 처리를 위해 Ext JS라는 JavaScript Framework를 사용하였습니다.

Ext JS
http://www.extjs.com

그리고 빌드, 패키지와 배포를 위해서 Titanium을 이용하였습니다.

Appcelerator Titanium
http://www.appcelerator.com

이미 만들어 놓은 웹 애플리케이션이 있다면 패키징하여 배포하는 것은 그다지 어렵지 않습니다. 

uTube Deck 를 만들면서 경험했던 Titanium 에 대한 것을 동영상으로 제작해 보았으니 참고하시는 것도 작은 도움이 되리라 봅니다.

 
Ext JS 3.2, Youtube API를 이용한 Video Viewer

 
Ext JS 3.2, Youtube API를 이용한 Video Viewer FullMode



OSX 10.5 Intel Download Application
Linux Intel 32-bit Download Application
Linux Intel 64-bit Download Application
Windows 32-bit Download Application


소스는 정리되는 데로 Github 를 통해서 공유하도로고 하겠습니다. : )

uTubeDeck based on Appcelerator Titanium from rhiokim on Vimeo.



신고
Posted by Rhio.kim
Ext JS 3.0 이 컨퍼런스 후에 공개될 예정인것 같은데요.
최근에 만든 Ext JS 2.2.1 Class Diagram 을 Ext JS 포럼에 올렸더니 나름 인기가 있네요.

Ext JS 팀에서 패키지 별로 분할해서 만들어 달라는 요청도 있었구요.
이번 1주년 컨퍼런스에서 프린트해서 사용해도 되겠냐는 요청도 와서 예쁘게 사용해달라고 소스와 함께 전달했더니

Ext JS 3.0을 미리 볼 수 있게 되었네요.. (프리미엄 맴버 : 라이센스 구매자들은 미리 볼 수 있는지 모르겠군요..)
사실 미리 보여주면 3.0으로 갱신해 줄 수 있는지 물어봐서 미리 보고 싶은 마음에 갱신해주겠다고 했죠.

오늘부터 소스도 살펴보고 Ext JS 3.0 design Class diagram 을 조만간 보실 수 있을 것 같습니다.


ExtJS 3.0 Preview : http://extjs.com/blog/2008/04/21/ext-js-21-and-ext-gwt-10-released-preview-of-ext-js-30/
ExtJS 3 Designer : http://extjs.com/forum/showthread.php?t=52258

button

toolbar


신고
Posted by Rhio.kim
처음에 Cheat Sheet를 만들 계획이였는데 그리다보니 험한길을 택했네요.  

Ext JS 클래스 다이어그램을 그리려던 것은 아니였는데...
PPT로 그리다가 어차피 할것 PDF로 예쁘게 만들고 고해상도로 출력해 보자 라는 마음에 결국은 일러스트레이터까지 손을 대다니 ㅠ.ㅠ 요즘 Adobe 제품군을 아주 손에 달고 다니게 됩니다.

현재 몇가지 수정작업에 있고 이번주중으로 공개할 예정입니다. 

Ext JS 프레임웍에 대한 관심도도 높이고 이미 관련 개발자들에게 도움이 되었으면 하고 이번 이 문서화를 기본으로 국내외 유용한 라이브러리, 프레임웍들의 이런 유사한 문서화를 하나씩 해나가보려 합니다.

아래 설명 부분은 ActionScript Class Diagram를 조금 따라 해봤습니다.




현재 Ext JS 2.2.1까지 발표 되었는데요.  4월 컨퍼런스를 시작으로 3.0 이 릴리즈도 이뤄질 것 같네요.
Ext JS는 준비중인 3.0 에서는 여타 라이브러리와는 다른 RIA 플렛폼에 있어 매우 임팩트한 JavaScript 프레임웍으로 자리매김하리라 봅니다.

미약하지만 국외에서는 Ext JS에 관한 몇 권의 책도 출간되었고 또한 준비중인 책들도 있는 것 같습니다.  그만큼 관심도가 서서히 높아지고 있고 국내에서도 차차 관심을 갖을때...



신고
Posted by Rhio.kim

웹 애플리케이션 설계에 있어서 가장 유연하고 강력한 방법은 Douglas Crockford 에 의해서 제안된 Module pattern이 아닐까 생각합니다.

http://yuiblog.com/blog/2007/06/12/module-pattern/
http://www.wait-till-i.com/2007/08/22/again-with-the-module-pattern-reveal-something-to-the-world/




고급 레벨 어플리케이션 개발을 위해서는 HTML의 document.body를 캡슐화 하기 위해서 Ext.Viewport를 사용해야 합니다.

이 말은 즉 여러분이 만들게 되는 애플리케이션이나 ExtJS의 콤포넌트들이 Viewport의 아규먼트화 되어 동작하게 됩니다.

// in customTree.js
var customTree = new Ext.tree.TreePanel({ }); 
// in customPanel.js
var customPanel = new Ext.Panel({ }); 
// in customGrid.js
var customGrid = new Ext.Grid({ }); 

바로 이 부분들이 각각의 External JavaScript 파일에서 구현되어지고 이는 MyApp 에 의해 반환되어질 Viewport 의 콤포넌트들로 동작하게 됩니다.

MyApp = (function(){
    var count = 0;
    var increaseCount = function(){
        count++;
    };
 
// MyApp 오브젝트에 할당되어진 함수로부터 반환하는 것
// 애플리케이션은 추가적인 특별한 기능들을 갖는 Viewport 이다.
    return new Ext.Viewport({
        layout: 'border',
        items: [{
            region: 'north',
            height: 100,
            el: 'header-element-id'
        },
        customTree, customPanel, customGrid ],

        getCount : function(){ 
            return count;
        },

        checkCount : function(){
            increaseCount();
            if (this.getCount() > 10)
                alert("카운트가 10보다 크다");
        }
    }
})();

위 소스는 구조적 설명을 위해 ExtJS 사이트에서 참조하고 수정되어 동작됨은 확인하지 않았습니다.

원글 : http://extjs.com/learn/Manual:Advanced_Application_Design


신고
Posted by Rhio.kim
ExtJS 의 구조적 이해를 하고자 정리해 봅니다.

사용자 삽입 이미지


신고
Posted by Rhio.kim
ExtJS의 기본 이해하기 ( Component Class의 inheritance 구현 및 계층 구조의 이해 )



Ext.data.Connection 는 ExtJS의 Rmote server에 XHR Request를 위한 class이자 namespace 입니다.
사용자 삽입 이미지
ExtJS의 모든 Class는 Ext의 하위 패키지 그 안의 서브 클래스들로 구성되어 집니다.  이때 위 처럼 클래스들이 생성되어서 동작하기 위해서 기본적으로 하는 처리가 있습니다.


위의 소스를 간단하게 보겠습니다.
Ext.data.Connection 는 function 을 갖습니다. 첫번째 인자료 config 라는 Hash 형태의 오브젝트를 갖습니다.

Hash 형태의 오브젝트란? 
{ key : value }의 형태를 말하고 이해를 돕기 위해 Hash형 오브젝트라 칭합니다.
Hash형 오브젝트 타입은 value에는 다양한 type의 값이 올 수 있습니다.

이는 사용 시 new 연산자를 이용하여 인스턴스화 되게 됩니다.
즉 Ext.data.Connection은 function으로의 기능이 아닌 instance 화 되어 사용되게 됩니다.

그러면 인스턴스가 생성될 때 수행되는 컨텍스트를 봅니다.

Ext.apply(this, config); 는 아래의 Ext의 맴버로서 수행되어집니다.



위의 apply에 의해서 this config로 넘겨준 값이 모두 overwrite 되게 됩니다. this가 가지고 있던 속성 및 메서드까지 모두 config가 가지고 있던 값으로 치환되어집니다.

이때 apply 에 첫번째 인자로 주는 config ExtJS에서는 해당 클래스가 갖는 속성의 의미와도 같습니다.

좀더 쉽게 풀이해서 쓴다면 ExtJS의 하나의 클래스가 인스턴스화 되어질 때 기본적으로 갖게 되는 속성 그리고 상속구조가 형성되면서 override 되는 속성과 메서드들의 기본 설정을 합니다.

좀더 쉬운 예를 들어보면 하나의 widget이 생성되어 브라우저에 띄울 때 그 widget의 기본 사이즈, 드래그 앤 드랍 등을 할 수 있는 설정을 이 config Hash 오브젝트로 넘겨주는 초기 설정값과도 같습니다.




이 코드는 이벤트 리스너를 설정하게 됩니다.  최근에 릴리즈한 자바스크립트 프레임웍에는 Custom Event가 모두 지원하고 있습니다. 

ExtJS에서도 이를 지원하는데요. 이는 Observable class에 있습니다. 
위의 코드는 이 Ext.data.Connection 이 인스턴스화 될 때 사용하게 될 기본적인 이벤트 리스너에 해당하는 것들입니다.

위에 잠깐 예시를 들었던 widget 에서는 기본적으로 widget을 움직일 수 있고 최소화 시킬 수 있는 기능을 기본적으로 갖게 됩니다.  경우에 따라서는 숨길 수 있는 기능이나 최대화 기능도 부여할 수 있습니다.  이처럼 this.addEvent를 통해서 Ext.data.Connection 이 갖는 기본적인 이벤트 리스너를 등록하게 됩니다.

XMLHttpRequest 를 통해서 서버측 데이터를 받아올 때 혹은 받을때 받고나서 등등 다양한 상황에 맞는 이벤트 리스너를 사용하기에 앞서 Connection 클래스가 기본적으로 갖게되는 이벤트 리스너를 설정해 주게 됩니다.  위의 경우 ‘beforerequest’, ‘requestcomplete’, ‘requestexception’ 3가지의 리스너를 설정하게 됩니다.

이렇게 설정된 리스너는 fireEvent 메서드 즉 핸들러를 수행하게 됩니다.

마지막 구문

Ext.data.Connection.superclass.constructor.call(this);

상당히 길게 나열된 구조입니다. ExtJS의 가장 중요한 부분이라고 해도 과언이 아닙니다. 어떻게 해서 저렇게 긴 메서드가 생성되었을까요 간단하게 풀이해서 보도록 합니다.
Ext.data.Connection 이것은 굳이 Ext.data.Connection 이라고 하지 않고 this라고 해도 무방했을텐데 왜 그랬는지 살짝 궁금해집니다.

this를 쓰지 않았던(?) 못했던(?) 이유... 2008.05.18 추가

more..



그 다음에 오는 superclass 는 단연 계층 구조에 있어서 최상위 클래스, 부모 클래스를 나타낼 텐데요.  superclass.constructor 입니다.  즉 superclass 가 아닌 superclass의 constructor를 나타냅니다.  이는 인스턴스화 되지 않는 부모 클래스의 생성자를 참조하고 있습니다.

그런데 과연 superclass 라는 것은 원래 있는 것인지? 아니면 ExtJS에서 기본적으로 제공하는 것인지 의문이 듭니다. 이는 Ext.extend 맴버에 의해서 Ext.data.Connection 에 부여됩니다.

Ext.extend(Ext.data.Connection, Ext.util.Observable, { … });

잠시 extend 메서드에 대한 설명을 간단하게 하고 넘어갑니다.
extend 메서드는 YUI의 구조와 동일합니다. 첫번째 인자로 넘어간 오브젝트에 superclass 속성을 부여하여 두번째 인자의 prototype을 superclass 가 레퍼런스하도록 합니다.

즉 Ext.data.Connection.superclass는 Ext.util.Observable.prototype을 레퍼런스하게 됩니다. 곧 Ext.util.Observable 의 constructor를 call 메서드를 통하여 호출하게 됩니다. 메서드를 Ext.data.Connection Scope에서 수행하게 됩니다.

이는 생성되면서 addEvent 를 통해서 생성된 이벤트 리스너의 동작을 켭니다. 이 말은 addEvent를 통해서 추가된 리스너들은 단지 ExtJS의 이벤트 class에 이벤트 이름만 등록하고 실제로 Ext.data.Connection 이 인스턴스화 될 때 비로소 리스너가 작동이 가능하게 됩니다.

언제나 그렇듯 말로만 보면 쉽게 이런 구조가 이해되지 않아서 간략하게 나마 그림으로 표현해 봅니다.

사용자 삽입 이미지


어차피 그림 조차도 설명이네요. ^^;



신고
Posted by Rhio.kim