1. 소개
2. 특징
3. 개발환경설정
4. 클래스 이해및 활용
Sencha Touch2는 Ext.JS4를 위해 개발된 클래스 시스템을 그대로 사용할 수 있다. Sencha Touch API에서 제공하는 클래스들을 잘 활용하기 위해서는 클래스의 작성방법과 사용법을 잘 숙지하는것이 좋다.
클래스정의:
Ext.define()메소드를 사용하여 정의한다.
방법1:
Ext.define("클래스명", {
field: 디폴트값,
constructor:function(생성자매개변수) { . . . },
method:function(메서드매개변수) { . . .}
});
방법2:
getter,setter메서드가 많은 경우는 config를 사용하여 간단하게 클래스를 정의할 수 있다.
Ext.define("클래스명", {
constructor:function(생성자매개변수) { . . . },
config: {
변수명: 디폴트값,
변수명: 디폴트값
}
method:function(메서드매개변수) { . . .}
});
정의된 클래스로 객체 생성하기
var obj=new 클래스명(생성자매개변수값); // 객체를 생성하기 위해 반드시 클래스가 로딩되어 있어야 한다.
// Ext.require("클래스명") 을 사용하여 동적으로 로딩할 수 있다.
var obj=Ext.create("클래스명",생성자매개변수값); // 객체생성시 클래스가 로딩되어 있지않으면 자바스크립트파일
// 에서 클래스를 로딩한 후 객체를 생성한다.
클래스 정의/생성/사용예
Ext.define("User",{
constructor: function(config) {
this.initConfig(config);
},
config: {
name: null,
age: null
}
});
var user=Ext.create("User", {
name: "Sencha",
age: 2
}
);
document.write(user.getName()+"<br/>");
document.write(user.getAge()+"<br/>");
user.setName("홍길동");
user.setAge(3);
document.write(user.getName()+"<br/>");
document.write(user.getAge()+"<br/>");
5. 웹앱시작하기
Sencha Touch 프레임워크를 사용하여 웹앱을 만들기위해서는 우선 Sencha Touch의 기본테마와 API 정의 파일을 <link>,<script>로 HTML 파일에 포함시킨다.
<!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="resources/css/sencha-touch.css"/> <script type="text/javascript" src="js/sencha-touch-debug.js"></script> </head> <body> </body> </html>
웹앱을 시작하기위한 초기화 코드작성
Sencha Touch2는 Ext.application()메소드를 호출하면서 시작된다.
<script type="text/javascript">
Ext.Loader.setConfig({enabled:true}); // 외부자바스크립트 클래스를 동적으로 로딩,
// 외부클래스를 사용하지 않는다면 생략해도 된다.
Ext.application({
name:"Test1",
launch:function() {}
});
</script>
Ext.application()의 매개변수값은 Config Object을 이용하여 웹앱 초기화 정보를 전달한다.
name은 웹앱의 이름이며, MVC패턴에서는 Model, View, Controller의 루트네임스페이스로 사용된다.
launch는 웹앱을 시작하는 HTML이 완전히 로딩되었을때 자동으로 실행되는 콜백 함수이다.
'모바일앱 > Sencha Touch' 카테고리의 다른 글
| [센차터치2-6] 테마 (0) | 2012.11.27 |
|---|---|
| [센차터치2-5] 통신 (0) | 2012.11.27 |
| [센차터치2-4] 이벤트 처리 (0) | 2012.11.27 |
| [센차터치2-3] 화면 내비게이션 (0) | 2012.11.27 |
| [센차터치2-2] UI (0) | 2012.11.27 |