반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함


Sencha Touch 를 설치하고 간단한 예제를 한번 실행해 보겠습니다.

일단 센차터치를 설치하기 위해서는 아래 3가지를 준비하셔야 합니다.
1. Sencha Touch SDK
    아래 페이지를 가시면 1.1.1과 2.0 developer preview 버전을 다운 받으 실 수 있습니다.
http://www.sencha.com/products/touch/download/
2. 웹서버
    저는 APM Setup 을 이용해서 아파치 웹 서버를 설치 했습니다.
    APM Setup download
3. 최신 웹 브라우저, 크롬, 사파리 추천

세가지 모두 준비 되셨으면 먼저 웹 서버부터 설치합니다.
그냥 클릭만 하면 됩니다.
다 설치 하신 후 크롬 브라우저를 여셔서 주소창에 localhost 를 칩니다.


이 화면이 나오면 웹서버 설치는 완료 된 것입니다.
잘 안되시면 아까 다운 받았던 홈페이지를 참조하세요.

그 다음엔 다운받았던 센차터치 SDK 압축을 풉니다.
그리고 그 폴더를 웹서버의 htdocs 폴더에 복사해 넣습니다.
C:\APM_Setup\htdocs (디폴트로 깔면 경로가 이렇습니다.)

복사가 완료 되면 크롬 브라우저를 열어서 주소창에 http://localhost/sencha-touch-2-pr2 를 입력하고 엽니다.


이렇게 화면이 나오면 설치가 완료 된 겁니다.

이제 예제를 한번 실행해 볼까요?

먼저 아무곳에나 폴더 하나를 만드시고 아래와 같이 index.html을 만드세요.
<!DOCTYPE html>
<html>
<head>
    <title>Getting Started</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>

그리고 센차터치가 깔려 있는 폴더의 아래 파일을 복사해서 index.html이 있는 폴더에 넣습니다.
resources/css/sencha-touch.css
그리고 센차터치폴더에 있는 sencha-touch-all.js 파일도 복사해 넣습니다.

이러면 센차터치를 이용할 준비가 끝난겁니다.

이제 한번 이용해 볼까요?
아래와 같이 app.js를 index.html 이 있는 폴더에 만듭니다.
Ext.application({
    name: 'Sencha',

    launch: function() {
        alert('launched');
    }
});
그리고 크롬에서 이 index.html을 불러옵니다.

이렇게 나오면 센차터치로 첫번째 프로그램을 만든 겁니다.
그럼 이제 크롬에서 다시 http://localhost/sencha-touch-2-pr2 로 가 보겠습니다.

여기서 Get Started with 2.0 에 있는 Read the guide를 클릭해 보세요.

스크롤을 내리다 보면 위 화면이 보일겁니다. 여기서 Live Preview 를 클릭해 보세요.


그러면 이렇게 크롬 브라우저에서 시뮬레이터가 뜨면서 결과가 출력 됩니다.

그 아래 예제 하나만 더 해 볼까요?
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.TabPanel", {
            fullscreen: true,
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Welcome'
                }
            ]
        });
    }
});

위 코드를 아까 만들었던 app.js 파일에 덮어 쓰고 저장하세요.

크롬에서 실행하면 이런 화면이 나옵니다.
그럼 아까 웹서버로 불러왔던 getting started 화면에서 Live Preview를 클릭해 보겠습니다.


같은 화면이 시뮬레이터에서 나오죠?

그 아래에 있는 예제들도 해 보세요.

오늘은 센차터치 설치하고 예제를 웹서버를 통해 시뮬레이터로 보는 방법과 웹서버가 아닌 그냥 브라우저로 보는 방법을 배웠습니다.

다음엔 본격적인 센차터치 공부를 할 텐데요. 오늘 getting started 에 나와있는 예제를 잘 보시면 대충 문법은 이해가 가실겁니다.

다음시간부터 자세히 다뤄 볼께요.


반응형

Comment

  1. bmw2040 2012.04.05 17:25

    하이브리드앱 관련해서 공부중에 있습니다. 위에 예제를 보고 실행을 해보려고
    하는데 문제접이 생겨서 코멘트를 달게 되었습니다. 현재 웹서버는 설치 완료
    한 상태이고 Sencha Touch SDK 를 1.1.1 버전으로 다운받아서 htdocs 폴더에
    복사를 했습니다. 그리고 위에 주소대로 쳐보면 not found 라고 나오는데 따로
    설정을 해주어야 하는게 있나요? 아니면 제가 잘못 다운을 받은 건가요;

    • 솔웅 2012.04.05 18:05 신고

      따로 설정하는건 아니고 htdocs 밑에 넣었으면 경로만 넣으면 됩니다. index.html 이 있는 폴더까지 경로를 넣으면 되거든요.
      제 경우는 아래처럼 하면 나와요.
      http://localhost/sencha-touch-2-pr2/
      bmw2040님은 어떻게 경로를 넣으셨는지요.
      그냥 localhost 만 치면 기본 화면은 나오나요?