Sencha Touch 문서구조
- 퍼블리셔
- 2011. 12. 28. 06:00
센차터치의 문서구조는 대략 3개의 요소로 구성되어 있습니다.
1. Sencha Touch 필수 라이브러리.
센차터치를 사용하기 위해서는 앞서 말했듯 필수 라이브러리인 sencha-touch.js 와 sencha-touch.css 파일을 포함해야 합니다.
2. HTML 문서.
실제 웹 페이지를 정의 하는 html 문서입니다.
위에서 말한 필수 라이브러리와 다음의 스크립트 파일을 참조하는 html 페이지 입니다.
3. 애플리케이션 스크립트.
기본적으로 센차터치는 웹 문서의 표현되는 거의 모든 콘텐츠를 마크업이 아닌 스크립트로 작성해야 합니다.
마크업을 사용할 방법이 전혀 없는 것은 아니지만 센차터치의 기본 구조는 애플리케이션 스크립트를 이용해 대부분의 기능을 구현하게 되어 있습니다.
즉 자바스크립트로 사용자 인터페이스를 만들고 각종 이벤트를 처리해야 하는데, 이러한 스크립트가 구현된것을 애플리케이션 스크립트라 합니다.
위와 같은 문서의 구성요소를 알아봤으니 한번 실행시켜 보겠습니다.
먼저 문서이다보니 마크업을 해야겠지요.
html 구성부터 보겠습니다.
그래서 js, css 파일의 경로를 위처럼 했습니다.
단순이 파일을 참조하는 마크업입니다.
여기에 포함되어 있는 helloWorld.js 파일은 아래처럼 되어 있습니다.
이 함수는 모바일 기기를 위한 다양한 설정 옵션을 제공합니다.
코드에서 자주 사용되는 몇가지 옵션을 지정했습니다.
tabletStartupScreen: 'tablet_startup.png' : tableStartupScreen 속성에는 아이패드에서 애플리케이션이 실행될 때 적용될 시작 화면 이미지를 지정합니다.
768*1024 해상도의 세로 방향 이미지여야 하며, 자신(helloWorld.js)을 참고하고 있는 html 파일(hellow.world.html)의 위치를 기준으로 이미지 경로를 지정합니다.
phoneStarupScreen : 'phone_startup.png', : phoneStarupScreen 속성에는 아이폰 혹은 아이팟 터치를 위한 시작 화면 이미지를 지정합니다.
320*460 의 세로 방향 이미지를 사용해야 합니다.
icon: 'icon.png', : 모바일 기기의 홈 화면에 깔릴 이미지, 즉 웹 클립 아이콘을 지정합니다.
72*72 크기의 이미지여야하며, 이 옵션은 폰과 태블릿 기기에 모두 적용되는 기본 아이콘입니다.
glossOnIcon: false, : 위에서 지정한 아이콘에 반사광의 광택효과를 줄지 여부를 결정합니다.
statusBarStyle: 'default', : 아이폰에서 상단의 20px 영역을 차지하는 상태 바의 스타일을 지정한다.
여기는 default, black, black-translucent 중 하나를 지정할 수 있는데 차례대로 밝은 회색, 검정색, 반투명의 짙은 회색으로 표현됩니다.
onReady: function(){ : onReady() 함수는 웹 페이지의 DOM이 준비되면 호출되는 함수입니다.
이 함수에 실제 UI 구성을 위한 코드를 작성합니다.
new Ext.Panel( : 패널 객체를 생성합니다. 패널은 또 다른 패널 혹은 버튼과 같은 다른 UI 컨트롤을 포함할 수 있는 컨테이너 객체로서 화면의 레이아웃과 컴포넌트를 배치하는데 자주 사용됩니다.
fullscreen: true, : 패널 객체의 fullscreen 속성은 애플리케이션을 전체 화면으로 실행할지 결정하는 속성입니다.
html: 'Hello Sencha Touch' : 패널 객체의 html 속성은 패널에 콘텐츠를 직접 삽입하는데 사용합니다. 여기에는 일반 문자열 혹은 html 태그를 정의할 수 있습니다. 예제에서는 단순하게 Hello Sencha Touch 를 지정했습니다.
자 이제 사파리의 사용자 에이전트 iphone로 한번 열어 보겠습니다.
이 함수외에 Ext.Appliation 객체를 통해서도 애플리케이션을 시작할 수 있습니다.
이건 문서의 로딩을 알리는 이벤트인 launch() 함수에 코드를 구현하면 됩니다.
즉 Ext.setup() 과 Ext.Application은 모두 센차터치 애플리케이션을 시작하는 방법인 것입니다.
Ext.Application 객체로 시작해야 하는 경우는 MVC(Mode-View-Controller) 패턴을 기반으로 하는 센차터치 애플리케이션을 구현할 때입니다.
샌차터치 예제중 kiva 에제의 app.js를 보면 regApplication() 함수로 Ext.Application 객체를 생성하고, Ext.dispatch() 함수로 컨트롤러에 액션 함수를 전달하며, Model-View-Controller 의 각 영역에 대한 스크립트 app 펄더에 각각 존재합니다.
결론적으로 MVC 패턴이 아니라면 궅이 Ext.Application 개체로 애플리케이션을 시작하지 않아도 됩니다.
아래는 app.js 의 코드입니다. 참고로 보세요.
1. Sencha Touch 필수 라이브러리.
센차터치를 사용하기 위해서는 앞서 말했듯 필수 라이브러리인 sencha-touch.js 와 sencha-touch.css 파일을 포함해야 합니다.
2. HTML 문서.
실제 웹 페이지를 정의 하는 html 문서입니다.
위에서 말한 필수 라이브러리와 다음의 스크립트 파일을 참조하는 html 페이지 입니다.
3. 애플리케이션 스크립트.
기본적으로 센차터치는 웹 문서의 표현되는 거의 모든 콘텐츠를 마크업이 아닌 스크립트로 작성해야 합니다.
마크업을 사용할 방법이 전혀 없는 것은 아니지만 센차터치의 기본 구조는 애플리케이션 스크립트를 이용해 대부분의 기능을 구현하게 되어 있습니다.
즉 자바스크립트로 사용자 인터페이스를 만들고 각종 이벤트를 처리해야 하는데, 이러한 스크립트가 구현된것을 애플리케이션 스크립트라 합니다.
위와 같은 문서의 구성요소를 알아봤으니 한번 실행시켜 보겠습니다.
먼저 문서이다보니 마크업을 해야겠지요.
html 구성부터 보겠습니다.
HTML
HTML 마크업데 대한 설명
html은 현재 테스트를 하기 위해 examples 폴더안에myDemos 라는 폴더를 만들고 거기에 hellow.world.html 이라는 이름으로 저장했습니다.그래서 js, css 파일의 경로를 위처럼 했습니다.
단순이 파일을 참조하는 마크업입니다.
여기에 포함되어 있는 helloWorld.js 파일은 아래처럼 되어 있습니다.
helloWorld.js
helloWorld.js 에 대한 설명
helloWorld.js
Ext.setup : Ext의 setup()함수를 이용해 페이지 설정을 시작한다.이 함수는 모바일 기기를 위한 다양한 설정 옵션을 제공합니다.
코드에서 자주 사용되는 몇가지 옵션을 지정했습니다.
tabletStartupScreen: 'tablet_startup.png' : tableStartupScreen 속성에는 아이패드에서 애플리케이션이 실행될 때 적용될 시작 화면 이미지를 지정합니다.
768*1024 해상도의 세로 방향 이미지여야 하며, 자신(helloWorld.js)을 참고하고 있는 html 파일(hellow.world.html)의 위치를 기준으로 이미지 경로를 지정합니다.
phoneStarupScreen : 'phone_startup.png', : phoneStarupScreen 속성에는 아이폰 혹은 아이팟 터치를 위한 시작 화면 이미지를 지정합니다.
320*460 의 세로 방향 이미지를 사용해야 합니다.
icon: 'icon.png', : 모바일 기기의 홈 화면에 깔릴 이미지, 즉 웹 클립 아이콘을 지정합니다.
72*72 크기의 이미지여야하며, 이 옵션은 폰과 태블릿 기기에 모두 적용되는 기본 아이콘입니다.
glossOnIcon: false, : 위에서 지정한 아이콘에 반사광의 광택효과를 줄지 여부를 결정합니다.
statusBarStyle: 'default', : 아이폰에서 상단의 20px 영역을 차지하는 상태 바의 스타일을 지정한다.
여기는 default, black, black-translucent 중 하나를 지정할 수 있는데 차례대로 밝은 회색, 검정색, 반투명의 짙은 회색으로 표현됩니다.
onReady: function(){ : onReady() 함수는 웹 페이지의 DOM이 준비되면 호출되는 함수입니다.
이 함수에 실제 UI 구성을 위한 코드를 작성합니다.
new Ext.Panel( : 패널 객체를 생성합니다. 패널은 또 다른 패널 혹은 버튼과 같은 다른 UI 컨트롤을 포함할 수 있는 컨테이너 객체로서 화면의 레이아웃과 컴포넌트를 배치하는데 자주 사용됩니다.
fullscreen: true, : 패널 객체의 fullscreen 속성은 애플리케이션을 전체 화면으로 실행할지 결정하는 속성입니다.
html: 'Hello Sencha Touch' : 패널 객체의 html 속성은 패널에 콘텐츠를 직접 삽입하는데 사용합니다. 여기에는 일반 문자열 혹은 html 태그를 정의할 수 있습니다. 예제에서는 단순하게 Hello Sencha Touch 를 지정했습니다.
자 이제 사파리의 사용자 에이전트 iphone로 한번 열어 보겠습니다.
Ext.setup vs. Ext.Application.
setup() 라는 함수를 사용했는데요. 이 함수는 센차터치 라이브러리의 전역 패키지인 Ext 클래스에 정의돼 있는 함수로서 모바일 기기를 위해 페이지를 최적화하고 센차터치 애플리케이션을 시작하는 일종의 초기화 함수입니다.이 함수외에 Ext.Appliation 객체를 통해서도 애플리케이션을 시작할 수 있습니다.
이건 문서의 로딩을 알리는 이벤트인 launch() 함수에 코드를 구현하면 됩니다.
즉 Ext.setup() 과 Ext.Application은 모두 센차터치 애플리케이션을 시작하는 방법인 것입니다.
Ext.Application 객체로 시작해야 하는 경우는 MVC(Mode-View-Controller) 패턴을 기반으로 하는 센차터치 애플리케이션을 구현할 때입니다.
샌차터치 예제중 kiva 에제의 app.js를 보면 regApplication() 함수로 Ext.Application 객체를 생성하고, Ext.dispatch() 함수로 컨트롤러에 액션 함수를 전달하며, Model-View-Controller 의 각 영역에 대한 스크립트 app 펄더에 각각 존재합니다.
결론적으로 MVC 패턴이 아니라면 궅이 Ext.Application 개체로 애플리케이션을 시작하지 않아도 됩니다.
아래는 app.js 의 코드입니다. 참고로 보세요.