일단 센차터치에서 그동안 버전업이 됐길래 저는 최신버전으로 새로 받아서 작업하고 있습니다.
제가 받은 버전은 sencha-touch-2.0.0-gpl 입니다.
제가 센차터치 (Sencha Touch) 튜토리얼을 몇개 번역 했는데요.
Component 까지 번역을 했군요.
그런데 실습을 하지 않으면서 계속 번역만 하니까 제가 잘 이해를 못하겠더라구요.
제일 모르겠는건 어떻게 MVC 모델을 적용해서 앱을 만드는지 입니다.
그래서 지난 시간에 했었던 Component 글의 첫번째 예제를 MVC 모델을 적용해서 고쳐 보겠습니다.
var panel = Ext.create('Ext.Panel', {
layout: 'hbox',
items: [
{
xtype: 'panel',
flex: 1,
html: 'Left Panel, 1/3rd of total size',
style: 'background-color: #5E99CC;'
},
{
xtype: 'panel',
flex: 2,
html: 'Right Panel, 2/3rds of total size',
style: 'background-color: #759E60;'
}
]
});
Ext.Viewport.add(panel);
이것을 app.js에 넣어서 직접 실행해 보려면 아래와 같이 하면 됩니다.
Ext.application({
name: 'Panel',
launch: function() {
var panel = Ext.create('Ext.Panel', {
layout: 'hbox',
items: [
{
xtype: 'panel',
flex: 1,
html: 'Left Panel, 1/3rd of total size aaa ',
style: 'background-color: #5E99CC;'
},
{
xtype: 'panel',
flex: 2,
html: 'Right Panel, 2/3rds of total sizeaaa',
style: 'background-color: #759E60;'
}
]
});
Ext.Viewport.add(panel);
}
});
보시면 아시겠지만 튜토리얼에 있는 코드를 복사해서 Ext.application 안의 launch:function() 안에 넣으시면 됩니다.
문제는 이 소스를 어떻게 MVC 모델에 맞게 수정하느냐 입니다.
이 소스는 view 만 있는 간단한 소스 입니다. 그러니까 폴더 구조를 아래와 같이 가져가겠습니다.
Panel 폴더가 프로젝트 폴더입니다.
그 안에 index.html과 app.js 가 있습니다. 그리고 sencha-touch.css 와 sencha-touch-all.js는 다운받은 Sencha Touch 소스 파일에서 복사해 넣습니다.
그리고 MVC 패턴을 적용하려면 app 폴더를 만들어야 하는 것 같습니다.
그 app 폴더에 view,controller,model,store 등의 폴더를 만드는데 이 소스에서는 view 만 있으면 되니까 view를 만들었습니다.
저 view 안에 panel.js 파일을 만들어서 그 안에 실제 view 를 담당하는 코드를 넣겠습니다.
일단 index.html 코드를 볼께요.
<!DOCTYPE html>
<html>
<head>
<title>MVC Sample with Panel</title>
<link rel="stylesheet" href="sencha-touch.css" type="text/css">
<script type="text/javascript" src="sencha-touch-all.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
소스는 간단합니다. html 파일에서는 단지 css와 js 파일을 불러왔습니다.
sencha-touch.css와 sencha-touch-all.js 파일을 Panel 폴더 밑에 복사해 넣었기 때문에 위와 같이 불러왔는데요. 서버에서 동작 시키려면 해당 경로를 써 주셔야 합니다.
그 다음은 app.js 파일을 보겠습니다.
Ext.application({
name: 'Panel',
launch: function() {
Ext.create('Panel.view.panel');
}
});
소스 코드가 아주 간단해 졌죠?
MVC 모델을 쓰는 이유가 이렇게 app.js를 간단하게 만들고 각 기능별로 폴더와 js 파일을 나눠서 코드를 관리하기 위해서 입니다.
여기서는 launch:function() 안에 Ext.create 함수를 사용해서 Panel.view.panel 을 불러왔습니다.
처음 Panel 은 위에서 설정한 이 애플리케이션의 name 이고 view는 app 폴더 밑에 있는 view 폴더를 가르킵니다. 그리고 맨 마지막 panel 은 view 폴더 밑에 있는 panel.js를 말합니다.
이렇게 하면 app/view/panel.js 파일을 불러올겁니다.
다 하고 나니까 이렇게 간단한데 몰랐을 때는 이것 맞추느라고 엄청 헤맸습니다.
다음은 panel.js 파일을 보겠습니다.
Ext.define('Panel.view.panel', {
extend: 'Ext.Container',
config: {
fullscreen: true,
layout: 'hbox',
items: [
{
xtype: 'panel',
flex: 1,
html: 'Left Panel, 1/3rd of total size',
style: 'background-color: #5E99CC;'
},
{
xtype: 'panel',
flex: 2,
html: 'Right Panel, 2/3rds of total size',
style: 'background-color: #759E60;'
}
]
}
});
우선 Ext.define 함수를 사용합니다. 곧바로 이 파일의 경로를 표시하구요.
다음으로는 Ext.Container 를 extend 합니다. 이 부분을 extend 하지 않으면 에러가 납니다.
Container 부분 튜토리얼을 번역 했는데 왜 그런지 아직 딱 떠오르지 않네요. 다시 한번 봐야겠습니다.
그 다음은 config 를 사용하고 그 안에서 화면을 full 로 해 준 다음에 원래 튜토리얼에 있던 소스를 위와 같이 해 주면 됩니다.
여기까지 하느라고 많이 헤맸습니다.
아래 제가 완료한 소스파일 올려 놓습니다. 혹시 저처럼 MVC 패턴 적용이 많이 헛갈리시는 분들은 이 소스가 도움이 되실겁니다.
Panel.zip다음 글은 계속 센차터치의 튜토리얼을 다루겠습니다.
될 수 있는대로 소스코드를 이것 저것 변경해 보고 적용해 봐야 완전히 제것이 될 것 같군요.
다음에는 각 디바이스별로 화면을 달리 하는 Profile 을 한번 적용해 볼까 합니다.
'WEB_APP > Sencha_Touch' 카테고리의 다른 글
| Sencha Touch 1.x 관련 메모 (0) | 2013.10.01 |
|---|---|
| 다시 Sencha Touch 공부를 시작하며... (4) | 2013.01.03 |
| 센차터치 2에서 클래스 사용하기. -2- (6) | 2012.04.26 |
| 센차터치 2에서 클래스 사용하기. (0) | 2012.04.24 |
| Sencha Touch 2 Tutorial - Layouts - (0) | 2012.04.24 |
| Sencha Touch 2 Tutorial - Component & Container - (2) | 2012.04.16 |
| Sencha Touch 2 Tutorial - MVC - (0) | 2012.04.14 |
| Sencha Touch 2 Tutorial - History and Deep Link - (1) | 2012.04.13 |
| Sencha Touch 2 Tutorial - Device Profiles - 02 (0) | 2012.04.11 |
| Sencha Touch 2 Tutorial - Device Profiles - 01 (2) | 2012.04.10 |