'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 출시
자바스크립트/Ext JS2011. 12. 30. 13:09

이제 실제 소스는 어떤지 확인해보겠습니다.
아래 그림처럼 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 JS2011. 12. 30. 12:39
Ext JS 4.1 beta가 출시 되었습니다. 새로운 것들이 좀 있겠지만 개인적으로 Doc Application을 좀 분석 해볼려고 합니다.
Ext JS 4.1 beta 를 다운로드 받아사 압축을 풀고 톰캣에 세팅을 합니다. 압축 파일이 48메가 정도입니다.

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

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


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


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

댓글을 달아 주세요

자바스크립트/Ext JS2011. 12. 30. 11:56

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

Posted by 1 베니94

댓글을 달아 주세요