1. Sencha Touch – 시작하기
(1) Sencha Touch?
– EXT JS : PC 용 버전으로 Sencha Touch 의 시작이라고 볼수 있다.
-> 링크 : http://www.sencha.com/products/extjs/
– Sencha Touch : Javascript 기반으로 HTML5, CSS3 등을 활용하여 MVC 기반으로 개발할수 있도록 지원함
-> 링크 : http://www.sencha.com/products/touch/
(2) Sencha Touch 설치
– Sencha Touch , Sencha Cms, JDK1.7, JRE1.7, RUBY 필요
가) Sencha Cmd
Sencha Touch 로 개발한 코드를 최적화 해주는 Cmd , 또한 MVC 기반으로 개발할수도 도롸주는 역할도 함
형태 : EXE 실행파일
다운로드 : http://www.sencha.com/products/sencha-cmd/download
다큐먼트 : http://docs.sencha.com/touch/2.3.1/
나) Sencha Touch
형태 : JS
다운로드 : http://www.sencha.com/products/touch/download/
다큐먼트 : http://developer.sencha.com/product/touch
http://docs.sencha.com/touch/2.3.1/
다) JDK/JRE 1.7 이상 필요
라) RUBY 필요 (CSS 컴파일을 위해 필요함)
형태 : EXE 파일
다운로드 : http://rubyinstaller.org/downloads/
주의 : 설치시 Ruby 명령어 사용을 위한 환경설정 추가 Check
(3) Sencha Touch 사용 – LIB Import
가) JS 디버깅 해제
라이브러리에서 애러가 나서 실행되지 않는 경우가 있음
projuect -> properties -> builder -> 전부 해제
나) CSS, JS Import
– JS Import : all / dubug / link 세가지중 Import
<script src=”../framework/sencha-touch-debug.js”></script>
– CSS Import : resources->sencha-touch.css 추가
<link rel=”stylesheet” type=”tet/css” href=”../framework/resources/sencha-touch.css”/>
(3) Sencha Touch 사용 – 기본 Class 만들기
1) 동적 클래스 로딩 허용
동일한 파일에 클래스가 없을 경우에도 ext 에 정의된 클래스를 동적으로 로딩함
ps. Ext.create 로 클래스럴 생성하는 경우 자동으로 적용됨
//동적 클래스 로딩 허용
Ext.Loader.setConfig({enabled:true});
1) 클래스 Import
Ext.require(“User”);
Ext.onReady(function(){
});
1) 클래스 정의
Ext.define(“User”, {
//생성자
constructor : function(config){
this.initConfig(config);
},
//구성옵션
config:{
name:null,
age:null
}
});
2) 클래스 생성
var user = Ext.create(“User”,
{
name : “sencha Touch”,
age : 2
});
3) 변수 접근
user.setName = “변경”;
//구성 옵션에 만든 value 에 대해서는 Set, Get 메서드가 자동으로 생성됨
console.log(“구성옵션 값 :” + user.getName());
4) 상속
//상속
Ext.define(“Member” , {
extend:”User”,
constructor : function(config){
this.initConfig(config);
},
//구성옵션
config:{
mid:null
}
});
var member = Ext.create(“Member”, {
name : “touch1”,
age : 10,
mid : 4
});
console.log(“상속 Name” + member.getName());
console.log(“상속 Age” + member.getAge());
console.log(“상속 Mid” + member.getMid());