반응형
지난번까지 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 파일을 작성해 넣으세요.
이제 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을 기반으로 글을 정리해 나가겠습니다.
다음 시간에 뵈요....
~~~~~~~~ ~~~~~~~~
어플리케이션을 만들어보니 대충 감이 잡히던데요.
일단 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 위 두 파일을 임의의 폴더에 복사해 넣으세요.
sencha-touch.css그리고 아래 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>이제 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'
});
}
});
Ext.create()는 Ext.ClassManager.instantiate를 간단히 사용하기 위해 만든 겁니다.
Ext.create()대신 Ext.ClassManager.instantiate를 넣으셔도 결과는 똑 같습니다.
instantiate(String name, Mixed args) 가 신택스 입니다.
Tutorial 첫 시간은 여기까지 하겠습니다.
앞으로 Sencha Touch에서 공식적으로 제공하는 Tutorial을 기반으로 글을 정리해 나가겠습니다.
다음 시간에 뵈요....
~~~~~~~~ ~~~~~~~~
반응형
'WEB_APP > Sencha_Touch' 카테고리의 다른 글
| Sencha Touch 2 Tutorial - View - 01 (2) | 2012.03.08 |
|---|---|
| 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 로 첫번째 앱 만들기 -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 getting started - 설치 및 예제 실행 - (2) | 2011.12.16 |