센차 터치2 시작하기 | Devon 2012

http://bit.ly/oksencha2

센차 터치2 시작하기
작성자: 허광남 kenu@okjsp.pe.kr

이 글은 센차의 Getting Started 동영상 예제를 한국어로 쉽게 이해하도록 설명합니다.
http://docs.sencha.com/touch/2-0/#!/guide/first_app

개요
센차 터치2는 모바일웹앱을 위한 자바스크립트 프레임워크입니다.

Ajax가 유행하기 시작하던 시절 Yahoo에서 만든 YUI를 토대로 만든 Ext.js가 센차 터치2의
핵심입니다. 따라서 센차 터치2를 제대로 활용하기 위해서는 Ext.js를 알아야 합니다. 센차
터치2의 소스코드는 Ext.js를 사용합니다.

센차 터치2는 오픈소스이고 GPL 라이선스를 갖고 있습니다. 센차 터치2는 GPL 라이선스를
대신해서 프리 상업용 라이선스로도 배포됩니다.

센차 터치2를 시작하기 위해서는 SDK가 필요합니다. 그리고 이것을 도와줄 SDK Tools가
제공됩니다. 이 글을 쓰는 현재 SDK Tools는 beta3입니다.

센차 터치2 SDK Tools는 센차 터치2를 이용해서 만들어진 툴을 패키징하고 iOS, 안드로이드
네이티브 앱까지 만들 수 있습니다.

센차 아키텍트 상용 제품을 이용하면 센차 터치 UI를 쉽게 만들 수 있게 해줍니다.

간단히 센차 터치2를 시작할 수 있습니다.

개발환경 설정

http://www.sencha.com/ 에 접속해서 sencha-touch를 다운로드받을 수 있습니다. SDK Tools도
함께 다운로드 받습니다.


from: http://www.sencha.com/products/touch/

Open Source Version 으로 다운로드를 신청해도 Commercial Download 링크를 볼 수 있습니다.
압축해제시 두 버전 모두 같은 폴더명으로 풀립니다. free commercial version으로 설명합니다.

설명시 혼동을 막기 위해서 C:에 sencha 폴더를 만들어서 진행하겠습니다. 다운로드 받은
zip파일의 압축을 풀어서 C:sencha 폴더로 이동합니다.


C:senchasencha-touch-2.0.1.1

다음으로, SDK Tools는 기본 위치에 설치해도 됩니다. 설치를 위해서는 java가 실행되는
환경이어야 합니다.

http://www.sencha.com/products/sdk-tools/download

SDK Tools는 node.js 기반의 명령어로 구성되어 있습니다. 설치를 마치면 열려있는 모든
command 창을 모두 닫은 후에 cmd 창에서 sencha라는 명령어가 실행되는 것을 확인하면
됩니다.


sencha라고 입력했을 때 빨간 색으로 경고문이 나오게 됩니다.
[WARN] The current working directory (C:Documents and Settingskenu) is not a
recognized Sencha SDK or application folder. Running in backwards compatible mode

현재 sencha를 입력한 경로는 Sencha SDK 폴더가 아니라는 뜻입니다. cd
senchaybrid2sencha-touch-2.0.1.1 로 이동해서 명령을 실행해보겠습니다.

Usage:
sencha [module] [action] [arguments...]

위와 같이 메시지가 나온다면 센차 SDK와 센차 SDK Tools가 잘 설치된 것입니다.

센차 앱의 원활한 개발을 위해서 크롬 웹브라우저와 이클립스JavaEE 그리고 아파치 톰캣을
사용할 것입니다. 각자에 맞는 편한 도구를 사용해도 좋습니다.

*** Bug 패치 ***


이 글을 쓰는 현재 2.0.1.1 배포 버그가 있습니다. 이 버그는 build production 생성시 Logger.js를
호출하게 합니다. http://bit.ly/Sbs691 페이지에 있는 버그 픽스를 통해서 피해갈 수 있습니다.
1. sencha-touch-2.0.1.1commandsrcmodulegenerateAppapp.json.tpl 파일을 열어서
logger를 검색합니다.
logger: "no" 라고 되어있는 부분을 logger: false 로 수정하고 저장합니다.

write commandsrcmoduleappapp.json.tpl

2. stbuild 파일을 다운받아서 설치합니다.
windows: http://dl.dropbox.com/u/8793605/stbuild.msi
mac: http://dl.dropbox.com/u/8793605/stbuild.pkg

이 버그는 자동생성되는 app.json 파일의 logger: 옵션값을 false로 조정하는 역할을 합니다.
그렇지 않은 경우 sencha app build production 과 sencha app build native 로 빌드 후 build
폴더에 없는 src/log/Logger.js를 부르게 해서 결과가 나타나지 않게 됩니다.

버전이 올라가면서 해결될 것이라 봅니다.
***

프로젝트 만들기

센차 SDK Tools를 통해서 템플릿 프로젝트 소스를 쉽게 만들 수 있습니다.
센차 SDK 폴더에서 다음 명령을 실행합니다.

sencha generate app OKAPP C:senchaappsOKAPP


C:senchaapps 폴더를 기준으로 OKAPP 이라는 이름으로 센차 앱 소스 코드가 자동으로
생성되었습니다. 센차SDK에서 sdk폴더가 복사되기 때문에 폴더 전체 용량은 20메가 가까이
됩니다.

OKAPP 안에 있는 index.html을 크롬브라우저로 열어보면 동그란 세 점만 있고, 진행이 되지
않습니다. ctrl+shift+J를 크롬브라우저에서 입력하면 Console을 볼 수 있는데, OKAPP/app.json
파일을 로딩하지 못했다는 메시지를 볼 수 있습니다. 웹 서버를 통해서 index.html을 열어야
제대로 실행이 됩니다.

이클립스와 톰캣을 이용해서 웹서버를 띄워보겠습니다.

이클립스는 JavaEE 배포버전을 다운로드 받아서 압축을 풀어 C:sencha 폴더에 위치시킵니다.


http://www.eclipse.org/downloads/

이클립스에 연결해서 사용할 톰캣은 zip파일로 다운로드 받습니다. eclipse와 마찬가지로 압축을
풀어서 C:sencha 폴더에 위치시킵니다.

http://tomcat.apache.org/download-70.cgi

C:sencha 폴더에 4개의 폴더가 보일 것입니다.


이클립스와 톰캣의 연결

이클립스를 실행합니다. 작업공간 경로를 정하는 창이 뜨는데, 경로를 C:senchaworkspace 로
수정합니다. 아래 체크박스를 체크하면 다음부터는 물어보지 않고 이클립스가 시작됩니다.

이클립스가 처음 실행되면 보이는 Welcome화면의 상단에서 x표시로 안내 창을 닫습니다.

이클립스 JavaEE 퍼스펙티브(레이아웃으로 이해하면 됩니다. 화면 우측 상단 아이콘으로
변경할 수 있습니다.)에서 하단에 Servers 탭을 선택해서 서버를 추가합니다. 서버는 압축을
해제한 아파치 톰캣의 경로를 지정하면 됩니다.

생성된 톰캣의 포트를 변경하려면 Servers 탭에서 Tomcat 서버를 선택하고 더블클릭으로
설정을 엽니다. 우측화면의 8080을 80으로 바꾸고 ctrl+S로 저장합니다.


툴바 처음에 있는 아이콘을 통해서 Dynamic Web Project를 생성합니다. 프로젝트명은 ROOT로
하겠습니다. sencha앱인 OKAPP 폴더는 link를 시켜서 실행할 것입니다.
Web Module을 확인하는 창에서 ROOT라고 되어있는 Context Root를 /로 변경하고 Finish버튼을
클릭합니다.

ROOT프로젝트에 있는 WebContent라는 폴더가 브라우저에서 보이는 기준 폴더입니다. 이제
링크로 OKAPP를 WebContent에 연결하겠습니다.

WebContent 폴더를 선택하고 오른버튼 클릭으로 나오는 컨텍스트 메뉴에서 New > Folder를
선택합니다. 하단의 Advanced 버튼을 클릭하면 나오는 옵션에서 세번째 Link to alternate


location (Linked Folder)를 선택합니다. Browse... 버튼을 클릭해서 OKAPP 폴더를 지정합니다.
그리고 Finish 버튼을 클릭하면 폴더가 ROOT/WebContent 폴더에 연결됩니다.

이제 OKAPP 아래에 있는 index.html 파일을 이클립스에서 편집하고 실행할 수 있습니다.
index.html 파일을 선택하고 컨텍스트 메뉴에서 Run As...>Run on Server 를 선택하여 톰캣을
실행합니다.


내부 브라우저가 실행되고 파란 화면이 보입니다. 크롬브라우저를 열어서 http://localhost/
OKJSP/index.html 을 입력합니다.

이제 정상적으로 실행되는 sencha 예제를 확인할 수 있게 되었습니다.

자바스크립트 검증 패턴 설정


이클립스에서 보이는 sdk폴더의 빨간표시를 설정을 통해서 거슬리지 않도록 하겠습니다.
node.js의 자바스크립트 처리를 하지 못해서 발생하는 에러메시지이므로 파싱에서
제외하겠습니다.

ROOT 프로젝트를 선택하고 컨텍스트 메뉴 하단의 Properties 메뉴를 클릭합니다. 좌측 텍스트
입력창에 javascript라고 입력해서 옵션을 필터링합니다.

Include Path 항목을 선택하고, 우측에서 Source 탭을 엽니다. ROOT/WebContent를 확장해서
Excluded: (None)을 선택하고 우측에 있는 Edit 버튼을 클릭합니다. 하단의 Exclusion 영역에
있는 Add 버튼을 클릭해서 패턴을 **/sdk/**/*.js 값으로 추가합니다.


Finish 버튼으로 설정을 종료하면 프로젝트 폴더의 빨간 표시가 없어진 것을 확인할 수 있을
것입니다. **/ 표시는 하위의 모든 폴더를 의미합니다. sdk폴더 하위에 있는 모든 *.js 파일은
자바스크립트 파싱에서 제외한다는 설정입니다.

외부 브라우저로 실행하기

이클립스 내부 브라우저는 인터넷 익스플로러에 가깝기 때문에 html5류의 페이지가 잘 보이지
않습니다. 웹페이지를 실행할 때 외부 브라우저가 실행이 되면 주소줄을 복사해서 붙이는
번거로운 일을 피할 수 있습니다.
ctrl+3을 눌러서 browser라고 입력합니다. Preferences > Web Browser - General 항목을
선택합니다. Use external web browser를 선택하고 Default system web browser 세팅으로
설정해 놓으면 웹페이지 실행시 OS에서 설정된 기본 브라우저가 실행됩니다.

이상으로 센차를 개발하기 위한 기본적인 설치 과정은 모두 마쳤습니다. 이제는 예제를
수정하면서 센차 터치에 대해서 알아보겠습니다.


센차 터치의 기본 구조

센차터치 앱의 기본 구조는 다음과 같은 폴더 형식을 갖습니다.

가장 먼저 시작되는 파일이 index.html 이고 app.json 파일을 호출합니다. app.js 파일이
불리고, 이 app.js 파일을 통해서 app 폴더에 있는 view가 호출됩니다. resources 파일은 css와
이미지들이 위치하게 되고, sdk폴더는 sencha 커맨드를 통해서 실행이 되는 node.js 기반의
명령어 중심으로 구성되어 있습니다. 개발 초기에는 app 폴더와 app.js 파일을 가장 많이
수정하게 될 것입니다.

센차 터치는 jQuery와 달리 라이프사이클을 갖고 있습니다. 가장 먼저 실행되는 함수는 app.js
안에 있는 Ext.application() 입니다.

코드를 설명하기 전에 자바스크립트의 기본적인 것을 먼저 얘기하고 진행하겠습니다.

1. {} 은 객체(object)입니다.
2. [] 은 배열(array)입니다.
3. 명령어 줄은 ;(세미콜론)으로 마칩니다.
4. 문자열은 ‘(작은 따옴표) 또는 “(큰 따옴표)의 짝으로 정해집니다.
5. 대소문자를 구분합니다.


객체는 키 : 값 형태를 갖습니다. 여러 개의 키가 들어갈 수 있고, ,(쉼표)로 구분됩니다. 예를 들면
다음과 같습니다.
var color = { red : ‘#f00’, green: ‘#0f0’, blue: ‘#00f’ };
이렇게 선언하면 color.red 값은 ‘#f00’ 가 나옵니다.

크롬브라우저에서 ctrl+shift+J로 Console을 열어서 입력해서 테스트할 수 있습니다.

객체에서 값은 함수(메소드라고도 합니다.)를 값으로 가질 수도 있습니다.
콘솔에서 다음과 같이 입력하고 테스트해봅니다.
var color = { red: '#f00', green: '#0f0', blue: '#00f', log : function() { console.log('red' + this.red ) }
};

입력을 마치고 color.log 라고 입력하면 함수 내용이 나올 것입니다. color.log() 라고 ()를 붙이면
함수의 실행결과를 확인할 수 있습니다.


http://www.JSON.org 사이트에서 표시되는 기찻길 표기법(Railroad Notation)은 자바스크립트
객체를 쉽게 이해할 수 있도록 도와줍니다. 센차나 현대의 자바스크립트 코드를 이해하는데,
객체 중심의 코드에 익숙해 질 필요가 있습니다.

자바스크립트의 기본에 관련된 것은 센차를 배워가면서 조금씩 설명을 하겠습니다.

센차에서 제일 먼저 실행되는 app.js 파일을 열어 보겠습니다.

Ext.application({
name: 'OKAPP',

requires: [
'Ext.MessageBox'
],

views: ['Main'],
...

Ext.application(); 이 가장 먼저 실행이 됩니다. 그리고, {} 객체를 통해서 옵션을 설정하게 됩니다.
각 선언마다 , 가 붙는 이유는 객체의 키:값, 형식이기 때문입니다.
views: [‘Main’], 선언은 app/view/Main.js 파일을 의미합니다.

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

// Initialize the main view
Ext.Viewport.add(Ext.create('OKAPP.view.Main'));
},
...

아래쪽에 있는 launch: function(){} 은 제일 먼저 실행이 되는 라인입니다. Ext.fly().destory();
를 통해서 로딩페이지를 날려버리고, Ext.Viewport.add(Ext.create(‘OKAPP.view.Main’)); 으로
새로운 뷰를 만들어서(create()) 화면에 표시(Viewport.add())합니다.

app/view/Main.js 파일을 열어보겠습니다.

Ext.define("OKAPP.view.Main", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
...


Main.js 객체의 선언이 Ext.define(‘OKAPP.view.Main’, {}); 명령으로 됩니다. 이렇게 선언된 뷰를
Ext.create(‘OKAPP.view.Main’) 명령으로 활용하게 됩니다.
{} 안에 들어가는 옵션을 보겠습니다.
extend: ‘Ext.tab.Panel’, 옵션은 Main.js 파일이 상속하는 부모 객체를 얘기합니다. view는 화면에
보이는 것을 뜻하는데, 앞서 실행해 보았던 화면은 탭 패널을 이용한 것입니다. 하단 탭바에 두
개의 버튼이 있고, 그에 대한 설정이 그 다음에 나오게 됩니다.

requires: [], 옵션은 외부의 라이브러리를 가져와 사용하겠다는
의미입니다. ‘Ext.TitleBar’와 ‘Ext.Video’를 로깅합니다. extend에 있는 파일과 이 두 개의 파일은
sdk/src 폴더 아래에 위치하는 센차터치 라이브러리입니다.

이후의 코드를 보면 config: {} 를 볼 수 있습니다. Ext.tap.Panel을 상속받았기에 관련된 속성들을
정해줍니다.

config: {
tabBarPosition: 'bottom',

items: [
{
title: 'Welcome',
iconCls: 'home',

styleHtmlContent: true,
scrollable: true,
...

tabBarPosition: ‘bottom’, 라인은 tabBar의 위치를 아래쪽에 두게 됩니다. 이후 items: [{}, {}] 안에
들어가는 객체들은 Panel입니다. 탭을 누를 때마다 다른 패널들이 나타납니다.

items: [] 안을 비워서 테스트해보겠습니다.

코드는 다음과 같이 됩니다.
...


config: {

items: [
]
}
});

수정한 파일을 저장합니다. 크롬브라우저에서 ctrl+shift+R을 눌러서 리로드하면 빈 화면을
확인할 수 있습니다.

탭 화면 추가

뷰를 추가해서 탭에 넣어보겠습니다. app/view 폴더를 선택하고 Home.js 파일을 만듭니다.
Home.js 파일명에서 H는 대문자입니다. 이클립스에서는 ctrl+N 후에 file을 선택해서 Home.js
이름으로 파일을 만들 수 있습니다.


Home.js 파일에 Ext.define(); 을 입력합니다. () 안에는 두 개의 인자가 들어갑니다. 뷰
이름과 옵션입니다. Ext.define(‘OKAPP.view.Home’, {}); 같이 입력하면 됩니다. 뷰는 패널을
상속합니다. extend: ‘Ext.Panel’, 을 입력합니다. ,(쉼표)는 객체의 다음 옵션이 있기 때문에
적어줍니다. ‘Ext.Panel’ 은 대소문자를 주의해서 적어줍니다.

탭 패널에 들어가는 화면이기 때문에 탭의 이름과 아이콘을 정해줍니다. config: {} 옵션을 통해서
가능합니다. 가장 간단한 화면의 코드는 다음과 같습니다.

Ext.define('OKAPP.view.Home', {
extend: 'Ext.Panel',

config: {
title: 'Home',
iconCls: 'home',

html: 'Hello Sencha'
}
});


이렇게 추가된 패널을 Main.js 에 추가하기 위해서 이름을 사용합니다. xtype: ‘homepanel’,
옵션을 extend 옵션 아래 추가합니다.

이렇게 추가한 xtype: ‘homepanel’ 을 app/view/Main.js 에 추가합니다.

마지막으로 app.js에 새로 만든 Home.js 뷰를 추가합니다.
views: ['Main', 'Home'];

이제 크롬브라우저에서 확인을 하면 다음과 같은 화면을 볼 수 있습니다.


화면에 내용을 다음의 코드로 수정해보겠습니다. html 태그가 들어간 내용입니다.

html: [
'<img src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>You're creating the Getting Started app. This demonstrates how ",
"to use tabs, lists and forms to create a simple app</p>",
'<h2>Sencha Touch (2.0.0)</h2>'
].join("")


이미지와 내용을 표시하지만 기본적인 html 스타일은 표시하지 않습니다. styleHtmlContent
옵션을 주어서 활성화할 수 있습니다. 함께 화면이 스크롤되도록 옵션도 추가합니다.

...
config: {
title: 'Home',
iconCls: 'home',

scrollable: true,

html: [
...

이 패널에 cls 옵션으로 CSS 클래스를 지정할 수 있습니다.

...
config: {
title: 'Home',
iconCls: 'home',
cls: 'home',

scrollable: true,
...

index.html 파일에 .home 클래스를 다음과 같이 설정합니다.

<style type="text/css">


.home {
text-align: center;
}

.home .x-html h1 {
font-weight: bold;
font-size: 1.2em;
}

.home .x-html p {
color: #666;
line-height: 1.6em;
margin: 10px 20px 20px 20px;
}

.home .x-html img {
margin-top: -30px;
}

.home .x-html h2 {
color: #999;
font-size: 0.9em;
}

.blog p {
color: #555;
padding: 10px 20px 0 20px;
font-size: 0.9em;
line-height: 1.4em;
}
</style>

다음과 같이 index.html의 </style> 태그와 <script> 태그 사이에 추가하고 크롬브라우저에서
리로드해서 확인합니다.


이렇게 패널의 내용을 수정할 수 있습니다. html의 스타일은 css를 통해서 제어하게 됩니다.

폼 패널 탭 추가

서버에 데이터를 추가하는 탭을 추가해 보겠습니다. app/view 폴더에 Contact.js 파일을
만듭니다. 내용은 다음과 같이 채웁니다.

Ext.define('OKAPP.view.Contact', {
extend: 'Ext.form.Panel',
xtype: 'contactform',

config: {
title: 'Contact',
iconCls: 'user',

items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{


xtype: 'textareafield',
name: 'message',
label: 'Message'
}
]
}
});

Home.js와 마찬가지로 app/view/Main.js 파일의 내용에 탭을 추가합니다.
items: [
{
xtype: 'homepanel'
},
{
xtype: 'contactform'
}
]

그리고 새로 만든 view파일을 app.js에 추가합니다.
views: ['Main', 'Home', 'Contact'];

이제 브라우저를 통해서 확인합니다.

입력 폼을 fieldset으로 그루핑하고 타이틀을 붙일 수 있습니다. 그리고 하단에는 버튼을 붙여서
서버에 내용을 보내도록 합니다.

코드 중에서 config 옵션을 다음으로 변경합니다.

config: {


title: 'Contact',
iconCls: 'user',

items: [
{
xtype: 'fieldset',
title: 'Contact Us',
instructions: '(email is not required)',

items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'textareafield',
name: 'message',
label: 'Message'
}
]
},
{
xtype: 'button',
text: 'Send',
ui: 'confirm'
}
],
}

화면을 다시 불러보면 다음과 같이 변경되어 있습니다.


Send 버튼을 클릭하면 이벤트를 처리할 필요가 있습니다. url 과 이벤트를 처리하는 부분을
추가합니다.

config: {
title: 'Contact',
iconCls: 'user',
url: 'contact.jsp',

items: [
...
xtype: 'button',
text: 'Send',
ui: 'confirm',
handler: function() {
this.up('contactform').submit();
}
}
],
}
...

UI상으로 바뀐 것은 없지만 버튼이 클릭될 때 서버에 요청이 갑니다. url: ‘contact.jsp’ 주소를
호출하고, handler 메소드를 통해서 contactform 내에 설정된 값을 보내게 됩니다.

크롬 브라우저에서 ctrl+shift+i 로 크롬 인스펙터를 열어서 Network 탭을 선택합니다. Send
버튼을 클릭하면 다음과 같이 서버에 요청한 것을 확인할 수 있습니다. 404 Page Not Found
메시지는 아직 페이지가 만들어지지 않았기 때문입니다. contact.jsp 를 클릭해서 헤더와 응답
내용을 볼 수 있습니다.


Console 탭을 열어보면 [Ext.Loader] 경고가 있습니다.
[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.form.FieldSet'; consider
adding 'Ext.form.FieldSet' explicitly as a require of the corresponding class

Contact.js 에 관련된 자바스크립트 라이브러리를 명시적으로 호출하도록 코드를 추가합니다.
requires: [
'Ext.form.FieldSet',
'Ext.field.Email'
],
추가되는 코드의 위치는 config 옵션 위쪽입니다.


이렇게 명시적으로 관련 자바스크립트 코드를 정해주는 것은 나중에 센차 웹앱을 빌드할 때
필수적인 작업이 됩니다.

폼을 통해서 서버에 값을 전달하는 방식을 알아보았습니다. 다음에는 외부에 있는 데이터를
불러와서 표시하는 방법을 알아보겠습니다.

네비게이션 뷰

네비게이션 뷰는 목록과 상세보기라는 모바일에서 가장 많이 볼 수 있는 형태의 UI입니다. 센차
블로그의 내용을 불러와 보여주는 화면을 만들어 보겠습니다.

보여줄 페이지 주소는 블로그에서 RSS(RDF Site Summary, 또는 Rich Site Summary) 라는 xml
형태의 데이터입니다. 이것을 JSON형태로 바꿔서 불러올 수 있습니다.
https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/
SenchaBlog
주소에서 알 수 있듯이 RSS 주소는 http://feeds.feedburner.com/SenchaBlog 입니다. 이 주소를
https://ajax.googleapis.com/ajax/services/feed/load 주소를 통해서 JSON 형태로 변경합니다.
이렇게 접속한 페이지의 내용을 모두 복사해서 http://jsbeautifier.org/ 라는 사이트에 모두
붙여놓고 정렬을 시켜서 데이터를 쉽게 볼 수 있도록 합니다.

responseData 아래 feed 아래 entries 내용을 보면 반복적으로 나오는 블로그 글의 정보를 확인할
수 있습니다. 이 가운데, title, author, content 내용을 센차에서 가져와서 보여주려고 합니다.

app/view/ 폴더에 Blog.js 파일을 만듭니다. 내용은 다음의 코드로 채웁니다.

Ext.define('OKAPP.view.Blog', {
extend: 'Ext.navigation.View',
xtype: 'blog',

config: {
title: 'Blog',
iconCls: 'star',

items: [


{
xtype: 'list',
itemTpl: '{title}',

store: {
autoLoad: true,
fields: ['title', 'author', 'content'],

proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://
feeds.feedburner.com/SenchaBlog',

reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
]
}
});

'Ext.navigation.View'를 상속받습니다. config에서 탭 이름과 아이콘 클래스를 정합니다. items
안에 들어가는 UI는 xtype: 'list' 입니다. 한 줄 한 줄 보여지는 셀의 내용은 아이템템플릿(itemTpl)
속성으로 정하는데, 동적으로 변하는 {title} 이라는 표기가 나왔습니다.

store 속성을 통해서 데이터를 외부에서 가져옵니다. 자동으로 데이터를 로딩해주는 autoLoad
속성을 true로 하고 데이터에서 사용할 필드를 정합니다. fields: ['title', 'author', 'content'] 세
가지로 정했습니다.

store 내부에 proxy 객체를 두어서 데이터를 어디서 가져오고, 형식은 어떻게 되는지
정합니다. 'jsonp'는 도메인이 다른 경우에 사용되는 JSON with Padding 이라는 자바스크립트
데이터 교환 기법입니다. 같은 도메인일 경우는 'json' 이라고 하면 됩니다.

proxy 에서 가져온 데이터를 파싱하는 규칙을 reader 객체를 통해서 정합니다. 데이터의
타입은 'json'이고, 데이터의 기준 위치는 'responseData.feed.entries'가 됩니다.

이렇게 Blog.js 페이지를 만들면, Main.js에 {xtype:’blog’} 를 추가하고, app.js의 뷰
목록에 ‘Blog’를 추가합니다. Main.js에서는 Home과 Contact 사이에 Blog를 끼어 넣겠습니다.

Ext.define("OKAPP.view.Main", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar',
'Ext.Video'
],


config: {

items: [
{
xtype: 'homepanel'
},
{
xtype: 'blog'
},
{
xtype: 'contactform'
}
]
}
});

다음과 같이 브라우저에서 페이지를 확인할 수 있습니다.

목록의 타이틀을 추가하고 내용 보기를 추가해 보겠습니다. 현재까지의 예제에서는 view만을
사용해 왔습니다. 컨트롤러를 이용해서 이 기능을 수행하도록 만들어 보겠습니다.

우선 간단히 목록의 타이틀을 지정합니다. Blog.js에서 title: 'Sencha Blog', 내용을 추가합니다.
...
items: [
{
xtype: 'list',
itemTpl: '{title}',


title: 'Sencha Blog',

store: {
...

컨트롤러 만들기

CMD 창을 열어서 C:senchaappsOKAPP 폴더로 이동합니다.
cd C:senchaappsOKAPP

컨트롤러 코드를 자동으로 생성할 수 있습니다.
sencha generate controller MainController 라고 입력합니다.

app/controller/ 폴더에 MainController.js 파일이 생성되고, app.js 파일에 MainController가
추가되었다는 메시지가 보입니다.

이클립스에서 OKAPP 폴더를 선택하고 F5키로 Refresh하면 app/controller/MainController.js
파일을 확인할 수 있습니다. 하단의 주석과 launch 는 필요 없기 때문에 제거합니다.

다음 코드와 같이 control에 이벤트를 적용할 UI와 이벤트 타입을 정합니다. 그리고 이벤트에
적용되는 함수는 하단에 정의합니다. 지금은 간단히 console.log를 찍는 것으로 했습니다.

Ext.define('OKAPP.controller.MainController', {
extend: 'Ext.app.Controller',

config: {
refs: {

},
control: {
'blog list': {
itemtap: 'showPost'
}
}
},


showPost : function() {
console.log('test');
}
});

'blog list'는 CSS의 셀렉터 표기법을 사용합니다. xtype: 'blog' 하위에 있는 xtype: 'list'를
지정하고, itemtap 이벤트가 발생하면 showPost 라는 함수를 실행하게 한다는 의미입니다.

app.js 코드에는 다음과 같이 추가되었습니다.
Ext.application({
controllers: ["MainController"],
...

이제 브라우저에서 확인해 봅니다. ctrl+shift+j 단축키로 콘솔을 열어서 블로그의 목록을 클릭할
때마다 test가 찍히는 것을 확인합니다. 콘솔에 같은 메시지가 출력되면 메시지 앞에 중복되는
숫자가 나타납니다.

이제는 콘솔에 제목이 찍히도록 해보겠습니다.
http://docs.sencha.com/ 에 접속해서 Sencha Touch 2 링크를 클릭해서 들어가서 우측 상단의
검색창을 통해 list api를 검색합니다.


xtype:list 항목을 선택해서 이동합니다. Ext.dataview.List 페이지가 나오면 Events 목록에
마우스를 올리고, itemtap 항목을 선택합니다.

itemtap api의 상세 내용을 참고해서 MainController.js 파일을 수정하게 됩니다.

선택한 셀의 데이터를 담고 있는 record는 Ext.data.Model 타입이고, 4번째 매개변수입니다.
itemtap( Ext.dataview.DataView this, Number index, Ext.Element/
Ext.dataview.component.DataItem target, Ext.data.Model record, Ext.EventObject e, Object
eOpts )

app/controller/MainController.js 에서 showPost를 다음과 같이 수정합니다.
...
showPost : function(list, index, target, record) {
console.log(record.get('title'));
}
...

다음과 같이 콘솔에 클릭한 목록의 제목이 찍히는 것을 확인합니다.


이제 블로그의 상세 내용을 보는 패널을 만들어서 이용합니다. showPost 내용을 다음과 같이
수정합니다.

...
showPost : function(list, index, target, record) {
this.getBlog().push({
xtype: 'panel',
title: record.get('title'),
html: record.get('content'),
scrollable: true
});
}
...

this.getBlog() 에서 필요한 것이 있다. MainController.js 에서 config.refs 내용에 blog: 'blog'
항목이 있어야 합니다. 'blog' 값은 xtype으로 Blog.js 를 의미합니다. 이 값에 대한 이름 blog를
접근할 수 있는 getBlog() 메소드가 자동으로 만들어져서 사용할 수 있습니다.
...
config: {
refs: {
blog: 'blog'
},
…

title과 html 내용으로는 record의 값을 이용하고, html 형식의 콘텐츠 표시와 스크롤을 true로
지정하였습니다.

실행 결과는 다음과 같습니다. Back 버튼이 자동으로 생기면서 목록의 블로그 내용을 볼 수
있도록 되었습니다.


Blog.js에서 사용하는 자바스크립트 라이브러리를 코드에 정하는 작업이 일단 남아있습니다. 두
가지만 추가해서는 안됩니다. 이 경우 Ext.data.Store 도 추가되어야 정상적으로 화면을 볼 수
있습니다.

...
xtype: 'blog',

requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store'
],

config: {
...

여기까지 개발과정을 한 번 훑어 보았습니다. 크롬 개발도구에서 Network 탭을 열어서 마지막을
보면 호출되는 파일의 갯수와 용량이 나옵니다.


200개가 넘는 서버 호출과 2.51MB 데이터가 전송되었습니다. 이런 용량을 획기적으로 줄여서
앱을 가볍게 배포할 수 있도록 하는 방법을 알아보겠습니다.

프로덕션 빌드

앱을 실제 운영에 배포하기 위해서 웹 앱을 빌드할 수 있습니다. 빌드의 주 내용은
자바스크립트를 묶어서 갯수와 용량을 줄이고(minify), css 등의 자원도 내용을 줄입니다.
html5에 추가된 appCache 기능을 잘 활용해서 앱이 효율적으로 기동되고, 심지어는
오프라인에서도 캐시된 내용을 통해서 서비스를 계속 이용할 수 있게 합니다.

CMD창에서 C:senchaappsOKAPP 폴더로 이동합니다.
cd C:senchaappsOKAPP
sencha app build production

위 명령을 입력하면 build/production 폴더가 생깁니다. 이클립스에서 OKAPP을 선택하고 F5키로
새로고침하면 확인할 수 있습니다.
브라우저에서 http://localhost/OKAPP/build/production/ 입력하면 아주 빠르게 로딩되는 웹앱을
볼 수 있습니다.


215 개에서 8개로 줄었고, 이미지도 캐싱된 이미지를 불러오기 때문에 네트워크 사용이
2.51MB에서 22.36KB로 현격하게 줄었습니다.

주의할 점은 2.0.1.1 현재, 템플릿에 버그가 있어서 앞서 설치 마지막 부분에 설명한 버그 패치를
해야 정상적으로 동작합니다.

네이티브 빌드하기

sencha app build native 명령어로 쉽게 기기나 에뮬레이터에서 실행시킬 수 있습니다. 이 때
네이티브 빌드 정보는 packager.json 파일에 있습니다. 이 파일을 수정해서 iOS 또는 안드로이드
빌드가 가능합니다.

센차 터치2 시작하기 | Devon 2012

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie 센차 터치2 시작하기 | Devon 2012

Ähnlich wie 센차 터치2 시작하기 | Devon 2012 (20)

Mehr von Daum DNA

Mehr von Daum DNA (20)

센차 터치2 시작하기 | Devon 2012