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

최근에 받은 트랙백

글 보관함

Sencha Touch Tutorial 1 Getting Started

2012. 2. 21. 11:36 | Posted by 솔웅


지난번까지 Sencha Touch 에 대해 대략적으로 알아보고 SDK를 설치하고 그리고 어플리케이션을 하나 만들어 봤습니다.

어플리케이션을 만들어보니 대충 감이 잡히던데요.

일단 Sencha Touch에서 제공하는 Tutorial을 한번 훑어보는게 센차터치를 좀 더 디테일하게 알 수 있는 가장 좋은 방법인것 같습니다.

Corona SDK도 코로나에서 제공하는 튜토리얼인 Corona DOC를 한번 다 훑고 나서 새로 추가되는 기능들을 하나하나 정리해 나가니까 정말 도움이 되더라구요.

오늘부터는 우공이산이라고 하나하나 기초적인 튜토리얼부터 공부해 나가볼 생각입니다.

***** Sencha Touch란?
센차터치란 안드로이드나 iOS, 블랙베리 같은 모바일 폰에 HTML5를 기반으로 앱을 쉽고 빠르게 만들 수 있도록 해 줍니다.

***** 필요한 것은?
- Sencha Touch 2.0 SDK beta
- 웹 서버 (로컬)
- 웹 브라우저 최신버전 (크롬하고 사파리를 추천합니다.)
=> 보다 자세한 사항은 제 글 Sencha Touch getting started - 설치 및 예제 실행 - 를 참조하세요.

***** 시작하기
웹 서버를 설치하지 않아도 아래 두개 파일만 있어도 예제를 실행할 수는 있습니다.
sencha-touch.css

sench-touch-all-debug.js

위 두 파일을 임의의 폴더에 복사해 넣으세요.
그리고 아래 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-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
html파일 이름은 마음대로 정하셔도 됩니다.
이제 app.js파일을 만드셔서 코딩을 하시면 됩니다.

첫번째 코딩은 alert화면 띄우기 입니다.
Ext.application({
    name: 'Sencha',

    launch: function() {
        alert('launched');
    }
});

이렇게 작성하시고 html파일을 브라우저에서 실행해 보세요.


이렇게 alert화면이 뜨면 성공하신겁니다.

app.js를 아래와 같이 바꾸고 실행해 보세요.
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            html: 'Hello World'
        });
    }
});

그러면 이렇게 Hello World가 나올 겁니다.
Ext.create()는 Ext.ClassManager.instantiate를 간단히 사용하기 위해 만든 겁니다.
Ext.create()대신 Ext.ClassManager.instantiate를 넣으셔도 결과는 똑 같습니다.
instantiate(String name, Mixed args) 가 신택스 입니다.

Tutorial 첫 시간은 여기까지 하겠습니다.
앞으로 Sencha Touch에서 공식적으로 제공하는 Tutorial을 기반으로 글을 정리해 나가겠습니다.

다음 시간에 뵈요....
~~~~~~~~ ~~~~~~~~
반응형

Comment