출처 : http://benney.tistory.com/category/자바스크립트/Ext%20JS?page=2
|
|
(최종 결과 물)
*** 이 페이지는 제가 초보적인 수준에서 작성된 게시물이며,
그냥 지워 버릴까 생각하다가 이 게시물을 보면서
다시 한번 맘 가짐을 고치기 위해 보관 중입니다.
Sencha touch 를 공부 하시는 분들 이 게시물은
초보적인 도움뿐이 안됩니다.
다른 게시물을 이용하기 바랍니다.
하이브리드 앱을 만들기 위해서 이것 저것 기웃 거리다 Sencha Touch 2.0.1 을 이용해 보기로 했다.
1. 로그인창 만들기
로그인창은 즐겨찾기 등에 대한 정보를 개인 모바일 기기가 아닌 서버에 저장하고
다른 모바일 기기에서도 굳이 새로 등록 하는게 아니라 ID / PW 를 이용하여 동일하게
적용하기 위함.
목표 : 1. E-mail / Password 입력 받기
2. Button 클릭으로 localStorage에 저장해서 다음에 재 사용하기...
우선 기본적인 개발 환경이 준비 되었다고 가정하고 시작함.
Sencha 는 나름 MVC 모델을 이용하여 프로그램을 할 수 있음.
MVC 모델에 자세한 사항은 네이버 검색을 이용하면 됨.
위 목표를 완료 하기 위해서는 우선
HTML 페이지를 하나 만들어 야 한다.
파일명 : index.html
<html>
<head>
<meta charset="utf-8">
<!-- Sencha Touch CSS -->
<link rel="stylesheet" href="./css/sencha-touch.css" type="text/css"> <!-- Sencha Touch 에 사용되는 CSS 파일 -->
<!-- Sencha Touch JS -->
<script type="text/javascript" src="./js/sencha-touch-all-debug.js"></script><!-- Sencha Touch 에 Import -->
<!-- Application JS -->
<script type="text/javascript" src="./js/app.js"></script> <!-- Sencha Touch 의 Application -->
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=다음지도API 키"></script>
<!-- 다음 지도 api 를 import 하기 위한 구문이며 apikey 는 다음 개발자 사이트에서 신청해서 사용함 -->
</head>
<body></body>
</html>
위 소스가 HTML 소스의 전부 이다.
그리고 application Script 파일을 작성해야 함.
파일명 : app.js
Ext.application({
name: 'Nubija', <!-- 봐서 알겠지만 최종목표는 다음지도를 이용한 누비자 터미널 정보를 보는것이다. -->
appFolder: './js/app',
<!-- Html 파일이 있는 홈의 하위 폴더 인 "./js/app" 하위에 view / controller / model 폴더가 존재 해야 함. -->
views: ['LoginView'],
<!-- Sencha Touch 의 View 파일 설정함 -->
controllers: ['LoginController'],
<!-- Sencha Touch 의 Controller 파일 설정함 -->
launch: function() { <!-- launch 는 페이지가 모두 로딩되고 application 이 실행되면서 { .. } 안에 문장 수행 -->
Ext.create('LoginView'); <!-- Ext.create 명령을 이용하여 View 생성 -->
}
});
끝. 일단 여기 까지 하면 대강 로그인 창을 만들수 있다.
담에는 다음 지도를 화면에 표시 하는 방법에 대해서 해야 겠다.
PS : 위에서 언급한 꼼수...
위 프로그램을 실행 하고 크롬의 개발자 도구를 이용하여 Element 기능을 이용하여 ID 를 찾았다.
소스가 바뀌지 않는 이용 Sencha touch 에서 자동 생성하는 id 값은 변경 되지 않는다. 아마도...
출처 : http://coronasdk.tistory.com/163
지난번까지 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 파일을 작성해 넣으세요.
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을 기반으로 글을 정리해 나가겠습니다.
다음 시간에 뵈요....
출처 : http://blog.saltfactory.net/139
Sencha Touch는 아이폰, 안드로이드, 블랙베리 등 다양한 모바일 디바이스의 웹 앱 개발을 지원하는 자바스크립트 프레임워크이다. 자바스크립트 프레임워크라는 말에 촛점을 맞출 필요가 있는 이유는 Sencha Touch는 거의 대부분의 코드를 Javascript로 생성하기 때문이다. Appspresso(앱스프레소)를 이용해서 하이브리드 앱을 개발하는 방법에 대해서 포스팅하는 가운데 UI javascript 프레임워크 선정할때 후보로 Sencha Touch와 JQuery Mobile, JTouch 를 생각했는데 가장 네이티브 앱에 가까운 다양한 UI 제공과 MVC 프로그래밍을 할 수 있게 설계되어 있는 아키텍처 때문에 Sencha를 HTML5 를 이용한 하이브리드 앱 개발의 UI 프레임워크로 결정했다. (HTML5 기반 앱을 만들기위해서 미리 구입한 Sencha Touch 책이 있기 때문이기도 했는데 현재 판매되고 있는 것은 Sencha Touch 1.x 기반의 책들이다. Sencha Touch 2와 Sencha Touch 1은 구조 자체가 달라졌기 때문에 이전 책을 구입하면 조금 당항할 수도 있다. 물론 Sencha 공식 사이트에서 migration 정보를 문서로 제공하고 있지만 처음부터 Sencha Touch 2로 시작하는 것을 추천하고 싶다.) 하이브리드 앱 개발하는 과정에서 UI 프로그래밍은 필수 조건이다. 그래서 Appspresso에 관련된 포스팅에 연결해서 연재하려고 하다가 Sencha 자체만해도 내용이 방대하고 어렵기 때문에 Sencha라는 카테고리로 분리해서 작성하려고 한다. (참고로 jQuery 정로도 생각하면 정말 이해하는데 어려움을 겪을수 있다.)
[관련 내용]
<참고>
http://docs.sencha.com/touch/2-0/#!/guide/command
<Appsrpesso 튜토리얼 관련 포스트>
http://blog.saltfactory.net/category/Appspresso
<Sencha Touch 2 튜토리얼 관련 포스트>
1. Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 1. 설치, 생성, 패키징, 빌드(device, simulator)
2. Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 2. 뷰(View) 생성
3. Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 3. 뷰(View) 구성 - 컴포넌트 생성,구성
4. Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 4. 뷰(View) 구성 - Navigation Components
5. Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 5. 뷰(View) 구성 - Store-bound components (리스트 뷰)
6. Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 6. 뷰(View) 구성 - Form components (폼 구성)
[샘플 자료]
http://dev.sencha.com/deploy/touch/examples/production/index.html
[번역 가이드]
http://greatgrape.co.kr/wp-content/uploads/2012/01/발로번역한_센차터치2_가이드.pdf
[라이센스 관련]
http://www.sencha.com/products/touch/license/
[Demo]
센차터치는 기본 웹 리소스(자바스크립트, CSS, HTML 등)만으로 구성된 프레임워크이므로 별도의 프로그램 설치과정이 필요없습니다.
단지 라이브러리 파일만 내려받기 하면 됩니다.
아래의 주소에서 다운로드 받을 수 있습니다.
다운로드 : http://www.sencha.com/products/touch/download
다운로드 홈페이지에 접속해보면 하나는 오픈 소스 버젼으로 현재 1.1.1버젼이고 또 하나는 개발자 버젼으로 2.0.0 버젼입니다.
압축파일의 압축을 풀면 여러가지 폴더와 파일이 나옵니다. 핵심 라이브러리와 도움말, 예제 애플리케이션, 기타 리소스가 모두 포함되어 있습니다.
몇가지 파일과 폴더의 내용을 살펴보겠습니다.
센차터치 애플리케이션 개발을 위해서는 반드시 포함해야 할 파일입니다.
Sencha Touch 코어가 구현된 자바스크립트 파일입니다.
바로 루트(root)폴더에 있으며 압축된 버젼입니다. 개발시에는 sencha-touch-debug.js 를 참조하는것이 좋습니다.
이는 압축되지 안아서 참고할 수 있습니다.
센차터치 애플리케이션 외형을 정의하는 css 파일입니다.
이 파일 역시 핵심 라이브러리로 모든 애플리케이션에서 반드시 포함해야 하는 파일입니다.
이 파일은 resources/css 폴더에 있습니다.
Sencha Touch API Documentation , 즉 API 설명서를 그대로 옮겨놓은 것입니다. 다음의 사이트에서도 동일한 내용을 볼 수 있습니다.
http://docs.sencha.com/touch/1-1/
센차터치는 다른 프레임워크에 비해 API 가 방대하고 복잡해서 설명서를 참조할 일이 많습니다.
API 문서에서는 센차터치의 각종 컴포넌트와 관련한 상세한 설명을 볼 수 있으며, 클래스의 계층구조와 메서드(함수), 매개변수 등의 정보를 얻을 수 있습니다.
센차터치로 개발한 실제 동작하는 예제 애플리케이션을 모아 놓은 폴더입니다.
UI 구성, Ajax 상호작용, 애니메이션, 터치 이벤트, 멀티미디어 구현 등 센차터치가 제공하는 기능을 이용한 실제 구현 사례가 포함되어 있으며, 루트에 있는 index.html 를 실행하면 전체 예제에 대한 바로가기를 확인 할 수 있습니다.
온라인에서도 제공되는데 아래의 URL에서 확인할 수 있습니다.
http://dev.sencha.com/deploy/touch/examples/
examples 폴더는 아래처럼 에제별로 분리되어 있습니다.
각 폴더마다 하나의 기능을 수행하는 에제 파일이 들어 있습니다.
이 폴더에는 앞서 설명한 sencha-touch.css 파일을 비롯해 테마 관련 파일과 이미지 파일, Sass 기반의 스타일 정의 파일이 존재합니다.
안녕하세요 리칼입니다.^^ 많이 기다리셨죠? 네? 응? 아닌가..쿨럭;;
1-1. Sencha Touch 소개 Sencha Touch는 모바일 웹 애플리케이션 개발을 위한 자바스크립트 프레임워크입니다. 기존 데스크톱 기반 자바스크립트 프레임워크인 ExtJS개발사에서 모바일 시대에 부응하고자 새롭게 내놓은 제품이며, 자바스크립트, CSS, HTML 등 순수 웹 기술만으로 네이티브 룩앤필을 실현 할수 있게 해줍답니다.^0^ Sencha Touch는 ExtJS를 기반으로 하고 있어서 ExtJS의 API구조와 문법 체계를 그대로 계승하며, 여기에 모바일에 최적화된 기능들이 추가되었습니다.
소개는 이정도입니다. 제가 웹앱을 만들기 위해 지금 나온 프레임웍을 써본결과 Sencha Touch가 웹앱에는 제일 적격이라는 판단이 되어 Sencha Touch로 결정하게 된것입니다. 하지만....ㅠㅠ 젤 어렵더군요... 익숙하지 않은 문법,,,손이 잘안가져요...하지만 방대한 API등 기술적인 면을 보았을때 Sencha Touch만한 것이 없어서 공부중이랍니다.
Sencha Touch 공십 웹사이트: http://www.sencha.com
저사이트에서 Sencha Touch에 관한걸 얻을 수 있습니다. 라이브러리 및 예제등을 볼수 있으므로 많이 참고를 하게 될것입니다.
Sencha Touch 기술을 이용한 모바일 웹으로는 멜론사이트가 있겠습니다. 현재는 테블릿기기에만 적용이 되어서 일반 스마트폰 및 PC브라우저에서는 볼수가 없고 갤럭시탭10.1 및 아이패드에서 볼수 있답니다.
Sencha Touch가 적용된 멜론 사이트: http://t.melon.com
 정말 깔끔하고 이쁘지 않나요? ㅎㅎ
|
1-2. Sencha Touch 특징
방대하고 체계적인 API, 스크립트 기반, HTML5 & CSS 지원, 향상된 터치 이벤트, 폰과 태블릿 기기를 위한 프레임 워크, 높은 자유도, 모바일에 최적화된 기능 정도가 되겠습니다. 웹앱을 만들기 위해 적격인듯 하네요 ㅎㅎ |
1-3. 라이선스
최초 Sencha Touch는 유료 라이선스로 출발하였으나 2010년 11월경 무료로 라이선스 정책이 바뀌었습니다.
Sencha Touch 라이선스는 기본적으로 무료로 보면되지만 자세히 따져보면 다음과 같이 세가지 형태로 구분이 되어있네요
Commercial Software License: 애플리케이션 개발자를 위한 정책으로 소유권을 가진 독자적인 애플리케이션을 만들 때 적용 할 수 있다. 소스코드의 공유와 배포를 하지 않아도 되며 개발자에게 무료로 제공되는 라이선스다.
Open Source License: 역시 애플리케이션 개발자를 위한 정책으로 GNU GPL 라이선스 v3와 호환되는 오픈소스 애플리케이션을 개발 할 경우 무료로 사용할 수 있는 라이선스다. GPLv3의 복잡한 정책 중 가장 중요한 것은 다른 사람들이 필요에 의해 수정할 수 있게 애플리케이션 소스를 공유해야 한다는 것이다.
Commercial OEM License: OEM 사용자를 위한 정책으로 Sencha Touch를 이용해 자신만의 상업적인 SDK를 개발하거나 모바일 애플리케이션 저작 도구를 만드는 경우 적용되는 라이선스다. 유료 라이선스 정책이며 이런 유형의 사용 형태가 다양하므로 각 사례에 맞게 정책이 조정될수 있다.
이렇게 세가지가 있으니 잘 선택해서 쓰셔야겠쬬? 모두 무료는 아니란점 감안하셔야 할것 같네요.
|
1-4. 지원기기
Sencha Touch는 터치 기반의 최신 모바일 기기에서 동작 되며 애플IOS와 구글 안드로이드 기반의 모바일 기기에서도 안정적인 동작을 보장합니다.^^ 블랙베리터치도 지원을 한다네요 와우~^^ 대충 센차터치에 대해서는 이정도만 알아보고 이제 시작해볼까요?ㅎㅎ
|
2-1 개발환경 구성
Sencha Touch를 처음 시작하기 위해서는 라이브러리를 다운로드 해야 합니다. Sencha Touch는 다른 프레임워크와 마찬가지로 별도의 프로그램 설치과정이 필요하지가 않고 웹 리소스(자바스크립트, CSS, HTML등)만으로 구성되어 있어 라이브러리 파일을 내려 받기만 하면 됩니다.
Sencha Touch 다운로드 : http://www.sencha.com/products/touch/download
저 주소에서 다운을 라이브러리를 다운을 받으면 됩니다. 개발도구로는 자신에게 가장 익숙한 편집기를 사용하면 됩니다. 현재 저같은 경우는 웹앱을 만드는것이 목적이기 때문에 Appspresso라는 프레임 워크를 사용합니다. 앱스프레소는 웹 기술로 개발한 소스를 각 모바일 플랫폼별 런타임으로 감싸 네이티브 앱으로 빌드하는 하이브리드 방식의 크로스 플랫폼 모바일 프레임워크입니다. 앱스프레소는 이클립스에 플러그인이 적용되어 나오기 때문에 전 이클립스를 통해서 개발을 하고 있습니다. ^^ 앱스프레스 외에도 폰갭이나 티타늄같은 크로스 플랫폼이 있기에 입맛에 따라 사용하시면 될듯합니다.
앱스프레소 URL: http://appspresso.com
|
2-2 Sench Touch구성
자 그럼 다운을 받으셨으면
 [그림 1.1] 이런 형태로 파일이 존재할 것입니다. 헐.. 뭔파일이 이렇게 많지? 하지만 저기에서 모든걸 사용하는게 아니랍니다ㅎㅎ 저희가 쓸 파일은 sencha-touch.js, sencha-touch.css 이 두가지 파일이니까요 ㅎㅎ 간단하게 폴더및 파일에 대해 알아볼까요? sencha-touch.js
파일은 저기 위 [그림 1.1]에서 보이듯이 루트 디렉토리 안에 있습니다. sencha-touch.js은 Sencha Touch 코어가 구현된 자바스크립트 파일입니다. 이 파일은 핵심 라이브러리로서 모든 애플리케이션에서 반드시 참조해야 합니다. 이 파일은 용량을 최소화 한 파일이며 개발 시점에는 원활한 디버깅을 위해 sencha-touch-debug.js파일을 참조하는것이 좋을 것인데..저도 아직은 이파일로 해보진 않았습니다.
sencha-touch.css
파일은 애플리케이션의 외형을 정의하는 CSs파일입니다 이 파일은 resources/css폴더에 존재합니다.
doc폴더
Sencha Touch API Documentation 즉 API 설명서를 그대로 옮겨 놓은 것입니다. 다음의 Sencha사이트에서도 동일한 내용이 제공됩니다.
Sencha Touch API Documentation: http://dev.sencha.com/deploy/touch/docs/
앞으로 자주 보게 될 url이니 알아두시기 바랍니다. ㅠㅠ 저도 자료가 없어서 매일 보고 있습니다.. 원래 api를 제대로 알아야 모든 프로그램을 잘 할 수있는거 아시죠?ㅎㅎ
examples 폴더
Sencha Touch의 기본적인 예제를 모아둔 폴더입니다. 저도 정말 많은 도움을 얻었습니다. index.html을 실행하면 전체 예제를 볼수 있습니다.
이 예제또한 Sencha사이트에서 제공됩니다.
Sencha Touch Examples: http://dev.sencha.com/deploy/touch/examples/
자 대충 기본적인건 알아봤으니 우리 얼른 Hellow World를 찍어보자구욧!!
|
2-2 Hello World로 시작하기
누구나 프로그램 시작을 하면 헬로우 월드로 시작하시죠? Sencha Touch도 예외는 아닙니다. ㅎㅎ
Sencha Touch 애플리케이션은 기본적으로 다음과 같은 3가지 요소로 구성됩니다.
Sencha Touch필수 라이브러리 : sencha-touch.css와 sencha-toucj.js
HTML 문서 : 실제 웹페이지를 정의 하는 HTML문서입니다.
애플리케이션 스크립트: 기본적으로 Sencha Touch는 웹문서에 표현되는 거의 모든 콘텐츠를 마크업이 아닌 스크립트로 작성을 해야합니다. 마크업을 전혀 사용안하는건 아니지만 Sencha Touch의 기본 구조는 애플리케이션 스크립트를 이용해 대부분의 기능을 구현하게 되있습니다. 즉 자바스크립트로 사용자 인터페이스를 만들고 각종 이벤트를 처리해야 하는데 이러한 스크립트가 구현된 것을 애플리케이션 스크립트라고 합니다.
자 그럼 본격적으로 Hello World예제를 작성해 보시죠.
 (아놔 -_- 저장한거 날라갔음 아놔 ㅆㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂ 여기서부터 다시쓰는중 ㅠㅠ 아오 빡침)
[그림1.2]처럼 기본 구조는 이렇습니다. 저는 앱스프레소를 쓰기에 저런구조로 되어있는것입니다. sencha-touch.css파일이나 sencha-touch.js위치는 어느곳에다 둬도 상관은 없습니다. 그리고 index.html이 있는데 저 파일로 실행을 할것입니다. 그리고 HelloWorld.js이 js폴더안에 보이시죠? 저부분이 웹부분을 그려주는 스크립트 파일이라 생각하시면 됩니다. 센차터치는 html은 거의 작성을 안하는게 특징이죠 물론 스크립트 안에서 html을 작성하기도 하고 html파일내에 작성을 하기도 하지만 대부부느 스크립트로 되어 있습니다. 그래서 스크립트를 모르시는 분들은 골치가 아프실 겁니다 .ㅡ,.ㅡ 그러면 index.html을 살펴볼까요?
 [그림 1.3]
[그림1.3]을 보시면 sencha-touch.css및 sencha-touch.js을 적용을 시켜서 센차터치를 사용하겠다고 정의해 둔것을 보실 수 있을겁니다. 저것이 센차터치의 기본적인 틀입니다. 그리고 밑에서부터 스크립트로 그려나가는것이죠. 그밑에 HelloWorld.js에서 부터 시작을 하게 되는겁니다. 그럼 HelloWorld.js파일을 살펴보겠습니다.
 [그림1.4]
[그림1.4]를 보시면 Ext.setup란게 있습니다. 흠 저게 뭘까요? 설명을 드리자면 Ext의 setup()함수를 이용해 페이지 설정을 하는곳입니다. 그냥 간단하게 센차터치를 시작하려면 무조건 저 setup부분을 통해 시작을 한다고 보시면 되겠습니다. 다른것 안됩니다 무조건 저거에요~ 저거~ setup~~(애정남 드립..ㅡ.ㅡ) 무튼 그밑에 옵션같은것들이 있네요. 페이지 설정이니까 뭔가 설정을 하겠죠?
tabletStartupScreen부분은 말그래도 테블릿에서 어플리케이션이 실행될때 적용될 이미지입니다. 768*1004해상도 이어야 합니다. ㅎㅎ
phoneStartupScreen부분도 보시면 알다시피 폰에서 어플리케이션이 실행될때 적용될 이미지겠죠? 320*460의 이미지를 사용합니다.
icon은 다 아실꺼라 믿어요 ㅎㅎ 모바일 기기의 홈화면에 깔릴 이미지, 즉 웹클립 아이콘입니다.72*72크기의 이미지를 사용합니다.
glossOnIcon은 아이콘에 반사광의 광택효과를 줄지 여부를 결정한다는데 저는 이걸 해도 안해도 모르겠음둥 ㅡ,.ㅡ
statusBarStyle은 폰에서 상단의 20px영역을 차지하는 상태바의 스타일을 지정합니다.^^
이외에도 수많은 페이지 설정 옵션들이 있습니다. api를 통해서 알아보시면 될것같아요ㅠㅠ 매일 api보시게 될거라고 그랬죠? ㅎㅎ
onReady()함수는 중요한 부분!! 이 함수를 통해 실제 UI구성을 위한 코드를 작성하는 곳입니다. 이 함수가 없다면 시작이 되질 않아요 중요합니다. 그냥 중요하다고 생각하시면 되요 ㅎㅎㅎ 이 함수안에다가 처음에 정의를 해놔야지 시작이 된다는 점을 명심하세요^^ 지금 onReady()함수안에 보면 Ext.Panel이 보입니다. 이 패널은 또다른 패널 혹은 버튼과 같은 다른 UI컨트롤을 포함할 수 있는 컨테이너 객체로서 화면의 레이아웃과 컴포넌트를 배치하는데 자주 사용될것입니다. 패널이라...어디선가 많이 봤죠? 자반의 awt에서 보셨을겁니다 ㅎㅎ 비슷합니다. 저도 awt는 가물가물 하지만 그런 패널이라고 생각하시면 될듯..안드로이드의 xml레이아웃 같은것이라 보시면 되겠네요 ㅎㅎ
패널안에 뭔가 옵션을 주었네요 패널만 선언하고 아무것도 주지 않으면 암것도 안나오겠쬬? ㅎㅎ
fullscreen은 말그대로 전체화면으로 주겠냐 아니냐 겠쬬? ㅎㅎ
html이 나왔습니다. 여기서도 html을 사용을 할수가 있다는거죠. 지금은 "Hello Sencha Touch" 란 텍스트밖에 주진 않았지만 <br> <font color=red>와 같은 것도 줄수가 있답니다. 말그래도 html을 사용할 수 가 있는것입니다. fullscreen, html외에도 수많은(?) 정말 수많은 옵션들이 있습니다....api보시면 절망하실듯...하지만 차근차근 알아가시면 머리에 박히게 될것입니다 ㅡ,.ㅡ 지금은 이정도만 보시면 될것입니다.
자 이제 실행을 해볼까요?  저의 폴더 경로는 저렇습니다. 저기에서 index.html을 실행을 해보겠습니다.
 그림[1.6]
오옷!! 쨔잔~~ 반갑다 센차터치가 뜨네용 ㅎㅎ 정말 간단하죠? 하지만...이건 정말 말그대로 헬로우일뿐이죠 아하하하하 그래도 센차의 활용을 위한 첫단계이므로 기본 프로그램 구성과 동작 방식을 이해하는것으로 이번시간에 만족을 하시면 될것 같습니다.^^ 어떻게 도움이 되셨는지 모르겠네요 ㅎㅎ 참고로 익스플로러에서는 실행이 안됩니다. 크롬이나, 사파리, 파이어폭스에서 실행을 하셔야 할것입니다.
저도 잘모르면서 누굴 가르친다는것이 정말 힘드네요.. 이런걸 해본적이 처음이라 잘했는지도 모르겠지만 센차에 대해 조금이나마 관심이 있으신 분들에게 도움이 되길 바라며 저는 이만 글을 마치려 합니다.
다음 시간에는 센차터치 테마와 인터페이스에 대해서 알아보겠습니다.^^ 그럼 뱌뱌~슝
|
오늘도 그레이트그레이프 개발진들은 민족의 대명절 설날 전 주말임에도 불구하고
많이들 나와서 개발을 진행하고 있습니다. 열정과 젊음의 피 때문일까요? ^^;
오늘은 그레이트그레이프 블로그에 공익성(?) 글을 하나 띄우려 합니다.
센차터치(Sencha Touch)라고 요즘 대세인 모바일 웹앱 프레임 워크가 있죠.
그레이트그레이프도 이 툴을 이용해서 재미있는 자전거 커뮤니티 바이크숲의
모바일 웹앱을 개발 진행 중인데요, 1.x 버젼의 문서는 많으나 2.0 문서는 찾아봐도 많지 않습니다.
그래서 많이들 보시죠? 센차 홈페이지에 센차터치 2.0 가이드 문서.
링크는 이곳 :
http://docs.sencha.com/touch/2-0/#!/guide
저희 개발자들도 이 문서를 많이 보는데, 까만건 글씨고 하얀건 여백인데
글자들이 춤을 춘다고 하더군요. 그래서, 꼬부랑 글씨가 힘든 분들을 위해
TOEIC부터 GMAT까지 건드려보신 완벽한(?) 저질 개발 영어를 구사하시는
라파파님께서 번역해 주셨습니다. ㅎㅎㅎ
이름하여
“발로 번역한 센차터치 2.0 가이드”
이 문서를 오늘 한글을 창제하신 세종 형님의 뜻을 받들어 PDF 파일로 공유합니다.
PDF 내리어 받기 : 발로번역한_센차터치2_가이드
***주의 : 참고용으로만 쓰세요~
***행복한 설명절 되세요~~~ ^^*
|
sencha-touch.css
