[모바일WEB-APP] Sencha Touch 2.0 – MVC (시작하기)

4. Sencha Touch – MVC

(1) sencha MVC ?

MVC 구조로 개발할수 있는 아키택쳐를 제공한다. HTML은 하나 모델과 컨트롤은 JS 파일로 이루어 진다.

(2) 준비하기

가) Senchaa cmd 설치

– 설치부분 내용 참조

나) Sencha Cmd 사용하기

– CMD 도스 창으로 이동하기

– sencha 명령어가 정상적으로 실행되는지 확인

– Sencha FrameWork 을 설치한 폴더로 이동

– 다음과 같은 커맨드 실행 “sencha generate app MyApp ../unit10 ” 하여

MyApp 이라는 이름으로 unit10 폴더에 Sencha MVC Templet 을 구성하여 준다.

– unit10 이라는 이름으로 MVC 를 개발하기위한 틀이 구성된 것을 확인할 수 있다.

– 기본적으로 시작 파일은 index.html 이다.

다) Sencha MVC 폴더 구성

– app 폴더 : 사용자가 개발하는 구성 요서들을 저장하는 폴더 , app.js 에서 Ext.application(에서 view 따위로 지정시 참조하는 폴더이다.)

☞ controller 폴더

☞ form 폴더

☞ model 폴더

☞ store 폴더

☞ view 폴더

– resource 폴더 : CSS , Image 들 필요한 데이터를 저자하기 위한 공간

– index.html : APP 에서 유일하게 하나 존재하는 HTML , Sencha MVC 를 사용하기 위한 기본 구성이 HTML TAG 에 정의되어 있다.

– app.js : 프로그래밍 구조로 따지만 Main 과 같은 역할… app 폴더에 작성한 컴포넌트들을 불러서 사용하는…?

– app.json : 시작페이지는 무엇으로 할지, 로딩할 JS,CSS 파일은 무엇인지 등을 정의하고 있다 . 사용자의 필요에의해 수정할 필요가 있다.

해당파일은 <script id=”microloader” type=”text/javascript” src=”.sencha/app/microloader/development.js”></script> 에서 로딩한다.

☞ name : 이름 정의

☞ js : app.js 의 경로를 정의한다 .

“js”: [
{
“path”: “touch/sencha-touch.js”,
“x-bootstrap”: true
},
{
“path”: “bootstrap.js”,
“x-bootstrap”: true
},
{
“path”: “app.js”,
“bundle”: true, /* Indicates that all class dependencies are concatenated into this file when build */
“update”: “delta”
}
],

☞ css : 적용하고자 하는 css 파일의 경로를 정의한다.

“css”: [
{
“path”: “resources/css/app.css”,
“update”: “delta”
}
],

☞ appCache : z

“appCache”: {
/**
* List of items in the CACHE MANIFEST section
*/
“cache”: [
“index.html”
],
/**
* List of items in the NETWORK section
*/
“network”: [
“*”
],
/**
* List of items in the FALLBACK section
*/
“fallback”: []
},

☞ id : 로컬에 저장된 app 을 식별하고 갱신 여부를 판단하기 위해 사용하낟.

“id”: “9c8ce169-35fe-4184-908d-e0db2906050b”

– app.js : 실질적으로 화면 구성을 위해 개발해야 하는 파일

(3) 개발하기

가) app .js

–

[예제] require : Sencha 에서 제공하는 class 로딩

requires: [
‘Ext.MessageBox’
],

[예제] view: 사용자가 개발한 view 클래스 로딩 , ./app/view/경로에서 로딩

views: [
‘Main’
],

[예제] 바로가기 아이콘 사이즈별 정의/ 아이폰에서만 적용 됨

icon: {
’57’: ‘resources/icons/Icon.png’,
’72’: ‘resources/icons/Icon~ipad.png’,
‘114’: ‘resources/icons/Icon@2x.png’,
‘144’: ‘resources/icons/Icon~ipad@2x.png’
},

isIconPrecomposed: true,

startupImage: {
‘320×460’: ‘resources/startup/320×460.jpg’,
‘640×920’: ‘resources/startup/640×920.png’,
‘768×1004’: ‘resources/startup/768×1004.png’,
‘748×1024’: ‘resources/startup/748×1024.png’,
‘1536×2008’: ‘resources/startup/1536×2008.png’,
‘1496×2048’: ‘resources/startup/1496×2048.png’
},

[예제] 바로가기 아이콘 사이즈별 정의/ 아이폰에서만 적용 됨

icon: {
’57’: ‘resources/icons/Icon.png’,
’72’: ‘resources/icons/Icon~ipad.png’,
‘114’: ‘resources/icons/Icon@2x.png’,
‘144’: ‘resources/icons/Icon~ipad@2x.png’
},

isIconPrecomposed: true,

launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly(‘appLoadingIndicator’).destroy();

// Initialize the main view
Ext.Viewport.add(Ext.create(‘MyApp.view.Main’));
},
[예제] App 변경사항을 확인시 동작하는 CallBack

onUpdated: function() {
Ext.Msg.confirm(
“Application Update”,
“This application has just successfully been updated to the latest version. Reload now?”,
function(buttonId) {
if (buttonId === ‘yes’) {
window.location.reload();
}
}
);
}

[모바일WEB-APP] Sencha Touch 2.0 – MVC (시작하기)

Leave a Reply Cancel reply