센차터치 연동법에 대하여 알아보도록 하겠습니다.

센차 CMD를 이용하는 방법과 일반적으로 배포되는 소스를 이용한 연동법 2가지가 있습니다.

두가지방법으로 연동해보도록 하겠습니다.

1. SENCHA TOUCH 다운로드

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

위와같이 화면이 다운로드를 위한 입력폼들이 나옵니다

다음처럼 모든 입력태그에 값을 넣습니다.

그럼 입력된 메일주소로 링크메일이 날라오는데 해당 링크를 클릭해주어서 파일다운로드를 받도록 합니다.

2-1 SenchaTouch 일반 연동법

일반 연동법만으로도 센차터치 동작이 가능합니다.

일반 연동법으로 적용하시거나

Sencha CMD 방식으로 하실분들은 2-2 CMD 방식으로 

진행하셔도 무관합니다.

다운로드 후 압축해제를 하셨다면 다음 파일들을 이클립스 웹 프로젝트 생성 후 INCLUDE 하도록 합니다.

resources,src 디렉토리와 sencha-touch.js 파일을 프로젝트 디렉토리에 include합니다.

sencha 디렉토리 생성후 sencha 관련 파일들을 include 하였습니다.

WebContent 밑에 index.html 생성후 다음 코드들을 작성합니다.

센차터치 INCLUDE 파일들

<link rel="stylesheet" href="/sencha/resources/css/sencha-touch.css">
<script type="text/javascript" src="/sencha/sencha-touch.js"></script>

센차터치 로딩을 위한 css 코드 추가

       html, body {
           height: 100%;
           background-color: #1985D0
       }
        #appLoadingIndicator {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            text-align: center;
            width: 100%;
            height: 30px;
            -webkit-animation-name: appLoadingIndicator;
            -webkit-animation-duration: 0.5s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: linear;
        }
        #appLoadingIndicator > * {
            background-color: #FFFFFF;
            display: inline-block;
            height: 30px;
            -webkit-border-radius: 15px;
            margin: 0 5px;
            width: 30px;
            opacity: 0.8;
        }
        @-webkit-keyframes appLoadingIndicator{
            0% {
                opacity: 0.8
            }
            50% {
                opacity: 0
            }
            100% {
                opacity: 0.8
            }
        }

센차터치 샘플 컴포넌트 출력을 위한 JS코드

Ext.application({
	launch : function(){
             Ext.fly('appLoadingIndicator').destroy();
             var panel = Ext.create('Ext.Panel',{
					fullscreen : true,
					items : [{
						xtype : 'titlebar',
						title : '센차터치예제'
					}]
				})
            Ext.Viewport.add(panel);
	}
})

HTML코드

<div id="appLoadingIndicator">
     <div></div>
     <div></div>
     <div></div>
</div>

한번 실행을 해보도록 하겠습니다.

위와같이 나온다면 센차터치 일반 연동법은 완료가 되었습니다.

2-2. Sencha CMD 다운로드

http://www.sencha.com/products/sencha-cmd/

Sencha CMD 연동법을 사용하셔도 무관하나 추가 작업이 있어서 

2-1 방식만으로 저는 진행을 하도록 하겠습니다.

Sencha CMD를 이용하셔도 따라오시는데 지장은 없습니다.

URL 접속을 하면 다음 처럼 DOWNLOAD 버튼을 클릭합니다.

그럼 OS별로 자신의 환경에 맞춰서 다운로드 합니다.

(포스팅의 경우는 Windows환경으로 진행합니다)

SENCHA CMD 압축 해제 후 SenchaCmd-x.x.x.exe 파일을 실행합니다.

새폴더 만들기를 이용하여 편의상  D:\senchacmd라는 폴더로 재지정 하였습니다.

sencha cmd 설치가 완료 되었다면 설치 시 신규 디렉토리로 지정했던 D:\senchacmd\Sencha 디렉토리로 이동합니다.

상단을 보시면 Cmd, touch-2.4.1 2개의 디렉토리가 있는데 지금 확인해 보시면 Cmd 디렉토리만 존재하실겁니다.

처음 다운받은 SenchaTouch 압축해제를 하시면 touch-2.x.x 폴더가 있을텐데 

이디렉토리를 통째로 sencha cmd 설치 디렉토리의 Cmd 디렉토리와 동일한 위치에 붙여넣기합니다.

실행 하셨다면 sencha cmd가 아닌 윈도우에서 제공되는 cmd 명령어를 이용하여 커맨드 도스창을 실행합니다

최초 로드된 위치에서 "sencha" 라는 명령어실행을 해보겠습니다.

옵션에 대한 정보가 위처럼 나온다면 정상적으로 Sencha CMD 설치가 된것입니다.

※ 만약 위와같이 나오지 않는다면 직접 설치한 Cmd 디렉토리에 cd 명령어로 디렉토리 이동 후 하위에 존재하는 버전 이동하면 sencha.exe라는 파일이 있으니 해당 디렉토리에 이동 하셔서 작업을 진행하셔도 무관합니다.

다음 명령어를 실행 해보도록 하겠습니다.

sencha -sdk D:\senchacmd\Sencha\touch-2.4.1 generate app sencha_study D:\senchacmd\Sencha\sencha_study

위와같이 동작이 되었다면 성공적으로 센차터치 파일이 생성 된 것입니다.

정상적으로 설치되었는지 설치된 디렉토리를 확인 하겠습니다.

저는 정상적으로 senchatouch 파일생성이 완료되었습니다.

MVC 구조로 생성이 되었네요.

센차 CMD의 장점은 샘플코드 + 구조를 미리 잡아준다는 장점이 있지만

중간에 연동해야하는 작업이 번거로운 단점이 있습니다. ㅠㅠ

위 생성된 파일들을 이클립스에 복사+붙여넣기 하도록 하겠습니다.

※ 저는 Dynamic Web Project를 생성후 tomcat -> server.xml의 Context path를 "/"로 잡은뒤 진행을 하였습니다.

붙여넣기 한 후 다음 톰캣 START 하고 sencha디렉토리내에 있는 index.html을 실행해보았습니다.

http://localhost:7070/sencha/index.html

화면이 브라우저에 위처럼 출력되면 정상적으로 연동이 완료되었습니다.

다음장부터는 각종 컴포넌트 및 기능 구현관련 포스팅을 진행해보도록 하겠습니다.

by 개발로짜