보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

[센차터치2-6] 테마

2012.11.27 17:06

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

[센차터치2-5] 통신

2012.11.27 17:04

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

[센차터치2-2] UI

2012.11.27 17:00

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

[센차터치2-1] Sencha Touch 2 시작하기

 

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-1] Sencha Touch 2 시작하기  (0) 2012.11.27
블로그 이미지

오픈이지 제로킴

시큐어코딩 교육/컨설팅 전문가 그룹

티스토리 툴바