반응형
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 에 나와있는 예제를 잘 보시면 대충 문법은 이해가 가실겁니다.
다음시간부터 자세히 다뤄 볼께요.
일단 센차터치를 설치하기 위해서는 아래 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를 클릭해 보세요.
그러면 이렇게 크롬 브라우저에서 시뮬레이터가 뜨면서 결과가 출력 됩니다.
그 아래 예제 하나만 더 해 볼까요?
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 에 나와있는 예제를 잘 보시면 대충 문법은 이해가 가실겁니다.
다음시간부터 자세히 다뤄 볼께요.
반응형
'WEB_APP > Sencha_Touch' 카테고리의 다른 글
| Sencha Touch 2 Tutorial - Controllers - (2) | 2012.03.06 |
|---|---|
| Sencha Touch 2 Application에 대한 전반적인 이해 (0) | 2012.03.04 |
| Sencha Touch 2.0 Beta Tutorial 첫번째 앱 -2- (4) | 2012.02.26 |
| Sencha Touch 2.0 Beta Tutorial 첫번째 앱 -1- (6) | 2012.02.25 |
| Sencha Touch Tutorial 1 Getting Started (0) | 2012.02.22 |
| Sencha Touch 로 첫번째 앱 만들기 -4- (1) | 2012.02.21 |
| Sencha Touch 로 첫번째 앱 만들기 -3- (0) | 2012.02.20 |
| Sencha Touch 로 첫번째 앱 만들기 -2- (6) | 2012.02.17 |
| Sencha Touch 로 첫번째 앱 만들기 -1- (6) | 2012.02.14 |
| Sencha Touch Road Show 를 다녀와서.... (4) | 2011.12.14 |