'ExtJS4.1베타'에 해당되는 글 3건

  1. 2011.12.30 Ext JS 4.1 beta Doc 어플리케이션 분석2
  2. 2011.12.30 Ext JS 4.1 beta Doc 어플리케이션 분석1
  3. 2011.12.30 Ext JS 4.1 Beta 출시

이제 실제 소스는 어떤지 확인해보겠습니다.
아래 그림처럼 docs폴더 구조를 확인 할 수 있습니다.


여기서 가장 중요한 역할을 하는 파일은 index.html과 app.js파일 입니다. 일단 두개의 파일은 분석하려면 수정해야 하니 하나씩 복사본을 만들어 놓았습니다.

우선 어플리케이션 구성에 대한 해답은 app.js파일에서 얻어야 할 듯 합니다. 이클립스는 무거우니 울트라로 열어보겠습니다. app.js를 열어보니 아래 그림처럼 도무지 해석하기 힘든 형태로 되어 있습니다. 마치 ext-all.js파일을 열었을때와 똑 같죠~ 아마도 최적화를 툴을 통해서 한것 같습니다. 아니면 이렇게 나올수 없겠죠. ExtJS 는 Sench SDK를 통해서 배포용 파일을 만들게 되는데 doc app 도 그러했겠죠~ 어찌 되었던 제게는 해석 가능한 소스가 필요해서 여기저기 폴더를 모두 뒤져보았지만 원 소스는 찾지 못하였습니다.


그렇다고 방법이 없는 것은 아닙니다. 전에 Web Desktop 소스를 활용해서 프로젝트에 적용할 때 이런 문제를 역 컴파일러를 통해 해결한 적이 있습니다. 위와 같은 소스를 아래의 그림과 같이 말끔하게 정리되게 끔 할 수 있습니다.



http://www.jsbeautifier.org/ 로 접속하면 아래 처럼 최적화된 자바스크립트 코드를 원상태로 알아볼 수 있도록 변환해줍니다.


app.js를 카피하여 붙여넣자.


상단의 변환 버튼을 클릭하면 아래처럼 변환되어 알아보기 쉬운 코드로 바꿔준다.


이제 변환된 코드를 통해 어플리케이션을 실행해보면 변환된 코드가 정상적인지 확인 할 수 있을 것입니다. 원본 상태의 app.js를 카피하여 복사본을 만들고 변환된 코드 내용을 app.js에 복사해 넣습니다. 다시 실행해보면 정상적으로 아무런 이상없이 실행되는 것을 볼 수 있습니다.
Posted by 1 베니94

댓글을 달아 주세요

Ext JS 4.1 beta가 출시 되었습니다. 새로운 것들이 좀 있겠지만 개인적으로 Doc Application을 좀 분석 해볼려고 합니다.
Ext JS 4.1 beta 를 다운로드 받아사 압축을 풀고 톰캣에 세팅을 합니다. 압축 파일이 48메가 정도입니다.

압축을 풀고 이클립스 프로젝트를 생성해서 소스를 포팅한 모습입니다.

톰캣에 올려 실행하면 아래처럼 sencha.com과 동일한 화면을 볼 수 있습니다.


제가 분석해볼려고 하는 부분은 위의 화면에서 하단 중간의 "API Docs"를 클릭하면 실행되는 어플리케이션입니다.
이 어플리케이션에는 일반적으로 개발에 필요한 요소들이 모두 존재하고 구조적으로 잘 디자인되어 있어 이것을 차용하여 향후 다른 프로젝트에서 기본 베이스로 사용해볼까 하고 생각하고 있습니다. 아무리 생각해보아도 참 잘 디자인 되어 있습니다.
그리고 제가 풀지 못했던 몇가지 문제를 이 어플리케이션을 분석하여 해결될 수 있지 않을까 기대를 하고 있습니다.


이 강좌를 따라해보시려고 한다면 위의 화면 캡쳐에서 보시는 Toturial을 공부하시고 보시는게 좋을 듯 합니다.
Posted by 1 베니94

댓글을 달아 주세요


드디어 4.1 베타가 출시 되었습니다. 그 동안 4.1 pre버전에서 발생했던 아니 4.0 버전부터
발생했던 많은 버그들이 패치되어 출시 된듯 합니다. 해서 현재 개발된 시스템에 베타 버전을
테스트 해볼 계획입니다.

Posted by 1 베니94

댓글을 달아 주세요