Mr.november11 IT Tech Lab.: Sencha Touch

레이블이 Sencha Touch인 게시물을 표시합니다. 모든 게시물 표시

2014년 9월 17일 수요일

Sencha Touch Build, 센타터치 배포 커맨드

Sencha Touch Build, 센타터치 배포 커맨드

Sencha Touch로 개발한 웹앱을 배포하려면 Sencha CMD 를 사용하면 된다.

프로젝트 내 폴더로 들어가
sencha app build 명령어를 실행하면 된다.

문제는 센차 build 중 아래와 같은 Error가 발생하며 진행이 안 되는 경우가 있다.
/root/bin/Sencha/Cmd/5.0.1.231/extensions/sencha-compass/gems/bin/compass:9:in `require': no such file to load -- rubygems (LoadError)
from /root/bin/Sencha/Cmd/5.0.1.231/extensions/sencha-compass/gems/bin/compass:9

compass, sass가 정상 실행되지 않아 발생한 문제로,

ruby, rubygem을 설치하면 된다.

yum install ruby

yum install rubygems

정상적으로 설치된 이후에는 아래 경로에 결과물이 build 된다.

/프로젝트 폴더/build/production/<Project Name>

2014년 9월 9일 화요일

센차 터치 Sencha Touch 가이드 번역본 문서

센차 터치 Sencha Touch 가이드 번역본 문서

초기에는 이 문서만 정독해도 어느정도 개념을 잡을 수 있을듯하다.

https://play.google.com/books/reader?id=2HKhQzcCklQC&printsec=frontcover&output=reader&authuser=0&hl=ko&pg=GBS.PT19

Sencha Touch 센차터치 app 내부 파일 구조

Sencha generate 를 이용하여 app을 생성하면 아래와 같은 구조의 directory, file framework로 생성된다.

app - The directory containing the Models, Views, Controllers, and Stores for your app.
app.js - The main JavaScript entry point for your app.
app.json - The configuration file for your app.
index.html - The HTML file for your app.
packager.json - The configuration file used by Sencha Cmd for creating native packages for your application.
resources - The directory containing the CSS and the images for your app

app.js 파일에는 Sencha Touch의 엔트리 포인트 코드가 들어있다.

app실행 시 main 객체를 생성하고, main view를 생성하는 코드 이다.

객체 지향에서 흔히 사용하는 entry code로 크게 수정할 내용은 없어 보인다 .

아래는 app.js의 샘플 코드이다.

Ext.application({

name: 'Test',

extend: 'Test.Application',

autoCreateViewport: 'Test.view.main.Main'

//-------------------------------------------------------------------------

// Most customizations should be made to Test.Application. If you need to

// customize this file, doing so below this section reduces the likelihood

// of merge conflicts when upgrading to new versions of Sencha Cmd.

//-------------------------------------------------------------------------

});

/app/view/main/Main.js에는 main view 의 UI 코드가 들어있다.

Ext.define('Test.view.main.Main', {

extend: 'Ext.container.Container',

xtype: 'app-main',

controller: 'main',

viewModel: {

type: 'main'

layout: {

type: 'border'

items: [{

xtype: 'panel',

bind: {

title: '{name}'

region: 'west',

html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',

width: 250,

split: true,

tbar: [{

text: 'Button',

handler: 'onClickButton'

}]

},{

region: 'center',

xtype: 'tabpanel',

items:[{

title: 'Tab 1',

html: '<h2>Content appropriate for the current navigation.</h2>'

}]

});

Test.view.main.Main에 대한 클래스는 Ext.define 함수를 사용해서 선언한다.

Ext.define('Test.view.main.Main', { // Ext.define 함수를 사용하여 class선언

extend : 'Ext.container.Container', // Ext.container.Container 를 상속 받는다.

controller: 'main',

viewModel: {

type: 'main'

}

....

});

Sencha Touch App Generate 센차터치 앱 생성

Sencha Touch를 사용하여 app을 생성하기 위해

기본적으로 리눅스 서버 상에 Sencha Touch와 Sencha Touch CMD가 설치되어 있어야 한다.

Sencha Touch 개발 환경 세팅에 대한 자세한 내용은 나중에 ..

Sencha Touch 문서에서는 아래 명령어를 통해 App 디렉토리를 생성하도록 가이드하고있다.

/path/to/touch 는 Sencha touch 관련 파일을 zip파일로 받은 후 압축을 풀어놓은 경로를 말한다.

sencha -sdk /path/to/touch generate app MyApp .

경로를 지정하지 않고 app을 생성하는 방법이 있다.

sencha help generate app 명령어를 실행하여 generate app 관련 문서를 보면 아래와 같다.

This command generates an empty application given a name and target folder.

The application can be extended using other sencha generate commands (e.g.,

sencha generate model).

Other application actions are provided in the sencha app category (e.g.,

sencha app build).

Sencha Cmd can also automatically download and extract a framwork by

specifying the name of the framework as an argument:

sencha generate app -ext MyAppName ./MyAppPath

This will generate an application using the newest version available

for the specified framework.