[모바일WEB-APP] Sencha Touch 2.0 – 데이터 뷰 처리

3. Sencha Touch – 데이터 뷰 처리

(1) Ext.data.Store – ajax

 

Store 객체가 데이터를 관리하기 위해서는 model 과 proxy 를 정의해야만 한다.

Data 가 추가되거나 삭제되면 Store 객체에 반영이 된다.

[예제] ajax 타입 Proxy 와 Myapp.Phone 이라는 모델을 갖는 Store 정의

var phoneStore = Ext.create(“Ext.data.Store”, {
model: “MyApp.Phone”,
proxy: {
type: “ajax”,
url: “05_xml_data.jsp”,
reader: {
type: “xml”,
rootProperty: “phonelist”,
record: “phone”
}
},
autoLoad: true
});

(2) Ext.data.Store – JSONP

 

Store 객체가 데이터를 관리하기 위해서는 model 과 proxy 를 정의해야만 한다.

Data 가 추가되거나 삭제되면 Store 객체에 반영이 된다.

[예제] JSONP 타입 Proxy 와 Myapp.Phone 이라는 모델을 갖는 Store 정의

– rootProperty: “data” : 어느 부분의 데이터를 읽을 것이다라는 정의 필요

Ext.define(“MyApp.Phone”, {
extend: “Ext.data.Model”,
config: {
fields: [ “pno”, “pname”, “pimage” ]
}
});

var phoneStore = Ext.create(“Ext.data.Store”, {
model: “MyApp.Phone”,
proxy: {
type: “ajax”,
url: “06_json_data.jsp”,
reader: {
type: “json”,
rootProperty: “data”
}
},
autoLoad: true
});

[예제] JSON 데이터 페이지

– rootProperty: “data” : data 필드를 가지고 오겠다.

<%String serverKey = request.getParameter(“serverKey”);%>

<%if(serverKey != null) {%>
<%=serverKey%>(
{
“name”: “phonelist”,
“data”: [
{
“pno”: “p1”,
“pname”: “갤럭시A”,
“pimage”: “phone01.png”
},

(3) Ext.dataview.List – 리스트로 출력하는 UI 객체

dataview.list 를 사용하기 위해서는 Store 가 정의되어 있어야만 한다.

[예제] store 정의

var contactStore = Ext.create(“Ext.data.Store”, {
model: “MyApp.Contact”,
data: [
{ firstName: “용권”, lastName: “신” },
{ firstName: “태희”, lastName: “김” },
{ firstName: “동일”, lastName: “박” },
{ firstName: “수길”, lastName: “김” },
{ firstName: “동원”, lastName: “이” },
{ firstName: “민규”, lastName: “신” },
{ firstName: “춘몽”, lastName: “이” },
{ firstName: “희원”, lastName: “박” }
]
});

[예제] dataview list 출력

– itemTpl : 탬플릿 형태 대로

– store: contactStore,에 저장된 Data 의 수만큼 출력된다.

var contactList = Ext.create(“Ext.dataview.List”, {
store: contactStore,
itemTpl: “<div>{lastName} {firstName}</div>”
});

[모바일WEB-APP] Sencha Touch 2.0 – 데이터 처리

3. Sencha Touch – 데이터 처리

(1) Ext.data.Model

 

ext.data.model 클래스를 상속받아 클래스를 만들고 fields 값을 지정하여

데이터 구조 형태로 사용할 수 있다

Ext.define(“MyApp.User”, {
extend: “Ext.data.Model”,
config: {
fields: [ “name”, “age”, “phone” ]
}
});

(2) Panel 에서 Ext.XTemplate

 

Ext.data.model 에 정의된 데이터를 미리 정의된 탬플릿을 활용하여 데이터를

출력할 수 있다.

[예제] 데이터를 출력할 패널 생성

var panel = Ext.create(“Ext.Panel”, {
tpl: template
});

[예제] 탯플릿을 정의

var template = new Ext.XTemplate(
“<div style=’width:100%’>”,
“이름: {name}<br/>”,
“나이: {age}<br/>”,
“전화: {phone}”,
“</div>”
);

[예제] 모델 객체를 그대로 전달

function showUser() {
panel.setData(user.data);
}

(3) Form 에서 Data Model 활용

 

Ext.data.model 에 정의된 데이터를 미리 정의된 탬플릿을 활용하여 데이터를

출력할 수 있다.

[예제] Data Model 을 정의한다.

Ext.define(“MyApp.User”, {
extend: “Ext.data.Model”,
config: {
fields: [ “name”, “age”, “phone” ]
}
});

[예제] form 에 아이템의 name 값을 data.modle 에 정의한 이름을 맞추어 정의한다.

var formPanel = Ext.create(“Ext.form.Panel”, {
items: [
{xtype:”fieldset”, items:[
{xtype:”textfield”, name:”name”, label:”이름”},
{xtype:”numberfield”, name:”age”, label:”나이”},
{xtype:”textfield”, name:”phone”, label:”전화”}
]}
]
});

[예제] 정의한 Data 모델에 맞추어 객체를 생성

var user = Ext.create(“MyApp.User”, {
name:”홍길동”,
age:35,
phone:”010-123-1234″
});

[예제] 객체를 그대로 setRecord 하면 폼의 데이터가 변경됨

formPanel.setRecord(user);

(4) Proxy -LocalStorage- 데이터 읽기

 

Ext 에서는 데이터를 통신하기 위한 객체를 Proxy 라고 하여 따로 정의하고 있다.

Proxy 에는 Ajax , JSONP, LocalStorage 등이 포함되는데 브라우져의 로컬데이터와

통신하기 위해서는 LocalStorage 정의하여 사용해야 한다.

– 참조 : http://docs.sencha.com/touch/2.3.1/#!/api/Ext.data.proxy.LocalStorage

[예제] 프록시 객체 정의 (Proxy 객체를 생성하는데 가지고올 데이터의 ID가 Phone 이라는 것을 명시한다.)

– ?

var localstorageProxy = Ext.create(“Ext.data.proxy.LocalStorage”, {
id: “phone”
});

[예제] 모델 객체 정의 (모델 객체를 정의하면서 프록시 객체를 정의해 준다)

Ext.define(“MyApp.Phone”, {
extend: “Ext.data.Model”,
config: {
fields: [ “id”, “pno”, “pname”, “pimage” ],
proxy: localstorageProxy,
identifier: ‘uuid’
}
});

[예제] MyApp.Phone.load 객체를 사용하여 비동기로 데이터를 읽을 수 있다.

function readData(id) {
MyApp.Phone.load(id, {
success: function(model) {
var phone = model;
panel.setData(phone.data);
},
failure: function() {
Ext.Msg.alert(“알림”, “검색된 데이터가 없음”, Ext.emptyFn);
}
});
};

(4) Proxy -LocalStorage – 데이터 쓰기

 

Ext 에서는 데이터를 통신하기 위한 객체를 Proxy 라고 하여 따로 정의하고 있다.

Proxy 에는 Ajax , JSONP, LocalStorage 등이 포함되는데 브라우져의 로컬데이터와

통신하기 위해서는 LocalStorage 정의하여 사용해야 한다.

– 참조 : http://docs.sencha.com/touch/2.3.1/#!/api/Ext.data.proxy.LocalStorage

[예제]identifier: ‘uuid’ 자동 아이디 생성

Ext.define(“MyApp.Phone”, {
extend: “Ext.data.Model”,
config: {
fields: [ “id”, “pno”, “pname”, “pimage” ],
proxy: localstorageProxy,
identifier: ‘uuid’
}
});

[예제] 버튼 클릭시 데이터를 세팅하고 , phone.save를 통해서 저장한다.

var btnCreate = Ext.create(“Ext.Button”, {
text: “생성”,
ui: “confirm”,
handler: function(button, event) {
phone = Ext.create(“MyApp.Phone”, {
pno:”p5″,
pname:”갤럭시New”,
pimage:”phone05.png”
});
phone.save({
success: function(model) {
Ext.Msg.alert(“알림”, “생성 성공”, Ext.emptyFn);
}
});
}
});

[예제] 수정

– phone.save : 수정을 위한 다른 메서드를 지원하지는 않는다

– phone.phantom = false; , phone.setDirty(); 데이터를 수정이라고 세팅함으로써

save 가 세팅으로 동작하도록 한다.

var btnUpdate = Ext.create(“Ext.Button”, {
text: “수정”,
ui: “confirm”,
handler: function(button, event) {
if(phone == null) {
Ext.Msg.alert(“알림”, “생성 후 수정하세요.”, Ext.emptyFn);
} else {
phone.set(“pname”, “갤럭시S2”);
phone.data.pimage = “phone12.png”;
phone.phantom = false;
phone.setDirty();

phone.save({
success: function(model) {
panel.setData(null);
panel.setData(phone.data);
Ext.Msg.alert(“알림”, “수정 성공”, Ext.emptyFn);
}
});
}
}

[예제] 삭제

– earase 메서드를 사용하여 삭제를 한다.

phone.erase({
success: function() {
phone = null;
rootPanel.remove(panel, false);
Ext.Msg.alert(“알림”, “삭제 성공”, Ext.emptyFn);
}
});

(5) Proxy -AJAX – XML

 

AJAX 방식으로 XML 데이터를 통신하기 위한 Proxty

[예제] Ajax Proxy 를 생성

– tpye : xml

– record: “phone”

– 타겟 페이지는 url 에 정의

var ajaxProxy = Ext.create(“Ext.data.proxy.Ajax”, {
url: “06_xml_data.jsp”,
reader: {
type: “xml”,
record: “phone”
}
});

[예제] XML 셈플

<phone>
<pno>p1</pno>
<pname>갤럭시A</pname>
<pimage>phone01.png</pimage>
</phone>

[예제] Data.Model 생성

– Proxy 자리에 ajax Proxy 를 넣는다.

Ext.define(“MyApp.Phone”, {
extend: “Ext.data.Model”,
config: {
fields: [ “pno”, “pname”, “pimage” ],
proxy: ajaxProxy
}
});

[예제] 데이터 읽기

– LocalStorage 에서는 ID 를 사용했지만 ajax – XML 타입에서는 params: {pno:pno},
를 사용한다.

function readData(pno) {
MyApp.Phone.load(null, {
params: {pno:pno},
success: function(model) {
phone = model;
panel.setData(phone.data);
Ext.Msg.alert(“알림”, “읽기 성공”, Ext.emptyFn);
},
failure: function() {
Ext.Msg.alert(“알림”, “서버 오류 또는 서버 접속 실패”, Ext.emptyFn);
}
});
};

[예제] 타겟 JSP 페이지 모습

– pno 값을 파라메터로 다른 값을 리턴하고 있음
<%String pno = request.getParameter(“pno”);%>

<%if(pno==null || pno.equals(“p1”)) {%>
<phone>
<pno>p1</pno>
<pname>갤럭시A</pname>
<pimage>phone01.png</pimage>
</phone>
<%} else if(pno.equals(“p2”)) {%>

(6) Proxy -AJAX – JSON

 

AJAX 방식으로 JSON 데이터를 통신하기 위한 Proxty 객체

[예제] 프록시 선언

– Type : Json

– 그 외에는 XML 과 다른 것이 없음

var ajaxProxy = Ext.create(“Ext.data.proxy.Ajax”, {
url: “07_json_data.jsp”,
reader: {
type: “json”
}
});

[예제] 서버 사이드
<%String pno = request.getParameter(“pno”);%>

<%if(pno.equals(“p1”)) {%>
<%–[–%>
{
“pno”: “p1-0”,
“pname”: “갤럭시A”,
“pimage”: “phone01.png”
}
<%–]–%>
<%} else if(pno.equals(“p2”)) {%>

(7) Proxy – JSONP 방식

 

AJAX 방식으로 JSON 데이터를 통신하기 위한 Proxty 객체

[예제] 서버로 실행될 함수 이름을 알려준다. : callbackKey: “serverKey”,

– 서버로 함수 이름 리턴

– 타겟 페이지는 함수이름을 포함한 데이터를 리턴 ex) abcd(jsondata); 이런 식으로 함수를 호출하는 javascript 를 구성하여 넘겨준다.

– 클리이언트 사이드에서는 abcd 라고 정의된 함수가 실행되게 된다 ….

– 함수명을 주고 받고 하는 부분은 Sencha 에서 알아서 실행해주며 사용자는 load 함수를 사용하여 succes callback 을 받기만 하면됨

var jsonpProxy = Ext.create(“Ext.data.proxy.JsonP”, {
//IP는 여러분에 맞게 수정
url: “http://192.168.0.133:8080/sencha-touch-app/unit07/09_jsonp_data.jsp“,
callbackKey: “serverKey”,
reader: { type: “json” }
});

[예제] 서버 사이드

– Serverkey 명으로 fucntion 호출하는 구문을 만든다.

– 데이터는 pno 에 들어있는 선택 값에 해당하는 데이터를 넘겨준다.

<%
String serverKey = request.getParameter(“serverKey”);
String pno = request.getParameter(“pno”);
%>

<%if(serverKey != null) {%>
<%=serverKey%>(
<%if(pno.equals(“p1”)) {%>
{
“pno”: “p1”,
“pname”: “갤럭시A”,
“pimage”: “phone01.png”
}

[모바일WEB-APP] Sencha Touch 2.0 – UI 컴포넌트

3. Sencha Touch – MVC

(1) xType

 

Ext.Create 가 즉시 객체가 생성되는 것과 달리 xtype 은 Root Container 에

추가되는 시점에서 객체가 생성이 된다. 이는 메모리의 관리라는 측면에서

이점이 될수 있다.

또 당연하게도 xtype 객체는 정의된 하나의 객체로 복수의 객체를 생성할수 있다.

[예제] X-Type 객체의 생성과 Ext.Create 와의 차이 비교

var panel1 = Ext.create(“Ext.Panel”,{
style:”background-color:red”,
html: “Ext.create() 이용”
});

var panel2 = {
xtype:”panel”,
style:”background-color:#00ff00″,
html:”xtype 이용”
};
var rootPanel = Ext.create(“Ext.Panel”,{
items:[panel1, panel1, panel2, panel2]
});

Ext.Viewport.add(rootPanel);

(2) Default 컴포넌트 구성 옵션

 

지금까지는 구성옵션을 자식 컴포넌트에 정의하였다면, root Container 에 기본 값을 지정하여

동일한 속성을 자식 컴포넌트에 일일히 지정하는 수고를 덜어 줄 수 있다.

[예제]

var rootPanel = Ext.create(“Ext.Panel”,{
items:[panel1, panel1, panel2, panel2],
defaults:{
handler:function(button,event){
Ext.Msg.alert(“알림” , button.getText() + “을 클릭” , Ext.emptyFn)
}

}
});

(3) 버튼

[예제] 아래는 버튼을 생성하는 예제이다.

– ui 색상을 정의하는 테그 : confirm-roudnd (confirm 은 색상, roound 는 모서리를 둥글게)

{
xtype: ‘button’,
ui: ‘confirm’,
test : ‘confirm’,
iconCls:”locate”,
inconMAsk:true,
badgeText:”2″
},

(4) 툴바 타이틀바

[예제] 아래는 툴바를 생성하고 툴바에 메뉴를 하나 추가한 후 메뉴를 누르면 메세지를 띄워주는 예제이다.

{
xtype: ‘toolbar’,
docked: ‘bottom’,
scrollable:’horizontal’,
items:[
{
text:’info’,
iconCls:’info’,
badageText:’2′,
iconMask:true,
handler:function(button,event){
Ext.Msg.alert(“알림” , button.getText() + “을 클릭” , Ext.emptyFn)}
}

]
}

(5) 세그먼트 버튼

{
xtype: ‘segmentedbutton’,

items:[
{
text:’Button 1′,
ui:’decline’,
pressed:true
},
{
text:’Button 2′,
ui:’decline’
},
{
text:’Button 3′,
ui:’decline’
}
],
listeners:{
toggle:function(segmentedButton, button, pressed)
{
Ext.Msg.alert(‘알림’,button.getText());
}
}
},

(6) 이미지

[예제] 이미지를 출려고하는 테그

{
xtype:’img’,
src:’http://www.sencha.com/assets/images/sencha-avatar-64×64.png’ ,
height:500,
width:500
}

(7) 필드셋과 필드 아이템

[예제] 필드 아이템은 필드셋 안에 정의하는 것을 원칙으로 한다.

items: [
{
xtype:’fieldset’,
title:’Login’,

items:
[
{
xtype: ‘textfield’,
name: ‘name’,
id : ‘name’,
label: ‘Name’
},
{
xtype: ’emailfield’,
name: ’email’,
id: ’email’,
label: ‘Email’
},
{
xtype: ‘passwordfield’,
name: ‘password’,
id: ‘pssword’,
label: ‘Password’
}

]
},

(8) 필드셋과 필드 아이템

[모바일WEB-APP] Sencha Touch 2.0 – MVC (시작하기)

4. Sencha Touch – MVC

(1) sencha MVC ?

 

MVC 구조로 개발할수 있는 아키택쳐를 제공한다. HTML은 하나 모델과 컨트롤은 JS 파일로 이루어 진다.

(2) 준비하기

 

가) Senchaa cmd 설치

– 설치부분 내용 참조

나) Sencha Cmd 사용하기

– CMD 도스 창으로 이동하기

– sencha 명령어가 정상적으로 실행되는지 확인

– Sencha FrameWork 을 설치한 폴더로 이동

– 다음과 같은 커맨드 실행 “sencha generate app MyApp ../unit10 ” 하여

MyApp 이라는 이름으로 unit10 폴더에 Sencha MVC Templet 을 구성하여 준다.

– unit10 이라는 이름으로 MVC 를 개발하기위한 틀이 구성된 것을 확인할 수 있다.

– 기본적으로 시작 파일은 index.html 이다.

다) Sencha MVC 폴더 구성

– app 폴더 : 사용자가 개발하는 구성 요서들을 저장하는 폴더 , app.js 에서 Ext.application(에서 view 따위로 지정시 참조하는 폴더이다.)

☞ controller 폴더

☞ form 폴더

☞ model 폴더

☞ store 폴더

☞ view 폴더

– resource 폴더 : CSS , Image 들 필요한 데이터를 저자하기 위한 공간

– index.html : APP 에서 유일하게 하나 존재하는 HTML , Sencha MVC 를 사용하기 위한 기본 구성이 HTML TAG 에 정의되어 있다.

– app.js : 프로그래밍 구조로 따지만 Main 과 같은 역할… app 폴더에 작성한 컴포넌트들을 불러서 사용하는…?

– app.json : 시작페이지는 무엇으로 할지, 로딩할 JS,CSS 파일은 무엇인지 등을 정의하고 있다 . 사용자의 필요에의해 수정할 필요가 있다.

해당파일은 <script id=”microloader” type=”text/javascript” src=”.sencha/app/microloader/development.js”></script> 에서 로딩한다.

☞ name : 이름 정의

☞ js : app.js 의 경로를 정의한다 .

“js”: [
{
“path”: “touch/sencha-touch.js”,
“x-bootstrap”: true
},
{
“path”: “bootstrap.js”,
“x-bootstrap”: true
},
{
“path”: “app.js”,
“bundle”: true, /* Indicates that all class dependencies are concatenated into this file when build */
“update”: “delta”
}
],

☞ css : 적용하고자 하는 css 파일의 경로를 정의한다.

“css”: [
{
“path”: “resources/css/app.css”,
“update”: “delta”
}
],

☞ appCache : z

“appCache”: {
/**
* List of items in the CACHE MANIFEST section
*/
“cache”: [
“index.html”
],
/**
* List of items in the NETWORK section
*/
“network”: [
“*”
],
/**
* List of items in the FALLBACK section
*/
“fallback”: []
},

☞ id : 로컬에 저장된 app 을 식별하고 갱신 여부를 판단하기 위해 사용하낟.

“id”: “9c8ce169-35fe-4184-908d-e0db2906050b”

– app.js : 실질적으로 화면 구성을 위해 개발해야 하는 파일

(3) 개발하기

가) app .js

[예제] require : Sencha 에서 제공하는 class 로딩

requires: [
‘Ext.MessageBox’
],

[예제] view: 사용자가 개발한 view 클래스 로딩 , ./app/view/경로에서 로딩

views: [
‘Main’
],

[예제] 바로가기 아이콘 사이즈별 정의/ 아이폰에서만 적용 됨

icon: {
’57’: ‘resources/icons/Icon.png’,
’72’: ‘resources/icons/Icon~ipad.png’,
‘114’: ‘resources/icons/Icon@2x.png’,
‘144’: ‘resources/icons/Icon~ipad@2x.png’
},

isIconPrecomposed: true,

startupImage: {
‘320×460’: ‘resources/startup/320×460.jpg’,
‘640×920’: ‘resources/startup/640×920.png’,
‘768×1004’: ‘resources/startup/768×1004.png’,
‘748×1024’: ‘resources/startup/748×1024.png’,
‘1536×2008’: ‘resources/startup/1536×2008.png’,
‘1496×2048’: ‘resources/startup/1496×2048.png’
},

[예제] 바로가기 아이콘 사이즈별 정의/ 아이폰에서만 적용 됨

icon: {
’57’: ‘resources/icons/Icon.png’,
’72’: ‘resources/icons/Icon~ipad.png’,
‘114’: ‘resources/icons/Icon@2x.png’,
‘144’: ‘resources/icons/Icon~ipad@2x.png’
},

isIconPrecomposed: true,

startupImage: {
‘320×460’: ‘resources/startup/320×460.jpg’,
‘640×920’: ‘resources/startup/640×920.png’,
‘768×1004’: ‘resources/startup/768×1004.png’,
‘748×1024’: ‘resources/startup/748×1024.png’,
‘1536×2008’: ‘resources/startup/1536×2008.png’,
‘1496×2048’: ‘resources/startup/1496×2048.png’
},
[예제] app 이 시작되면 실행되는 callback

launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly(‘appLoadingIndicator’).destroy();

// Initialize the main view
Ext.Viewport.add(Ext.create(‘MyApp.view.Main’));
},
[예제] App 변경사항을 확인시 동작하는 CallBack

onUpdated: function() {
Ext.Msg.confirm(
“Application Update”,
“This application has just successfully been updated to the latest version. Reload now?”,
function(buttonId) {
if (buttonId === ‘yes’) {
window.location.reload();
}
}
);
}

[모바일WEB-APP] Sencha Touch 2.0 – Layout

2. Sencha Touch – Layout

(1) Layout

 

layout 은 각각의 Container 객체에 layout 항목에 정의할 수 있다.

참조 : http://docs.sencha.com/touch/2.3.1/#!/api/Ext.layout.VBox

문서 경로 : layout > VBox(각각포맷) > configs

– type

->vbox : vertical 정렬

->hbox: horizental 정렬

->fit : 꽉 채우기

->card : 교체?

– align : 수펴

start : child items are packed together at left side of container

center : child items are packed together at mid-width of container

end : child items are packed together at right side of container

stretch : child items are stretched vertically to fill the height of the container

– pack

start : child items are packed together at left side of container

center : child items are packed together at mid-width of container

end : child items are packed together at right side of container

justify : child items are packed evenly across the container. Uses the ‘justify-content: space-between’ css property

cf) align, pack 은 type 에 따라 수직, 수평의 의미가 바뀜

[예제] 수직정렬, Panel 에 3개의 버튼을 lay을 지정하여 배치하는 예

var rootPanel = Ext.create(“Ext.Panel”, {
layout: { type: “hbox”, align: “center”, pack: “justify” },
items: [ btn1, btn2, btn3 ]
});

[예제] 수평정렬, Panel 에 3개의 버튼을 lay을 지정하여 배치하는 예

var rootPanel = Ext.create(“Ext.Panel”, {
layout: { type: “vbox”, align: “center”, pack: “justify” },
items: [ btn1, btn2, btn3 ]
});

[예제] Flex 예제 : Flex 속성을 이용하여 차지하는 비율을 정의할 수 있다.

cf) Flex 는 HBox , VBox 에만 적용된다.

launch: function() {
var item1 = Ext.create(“Ext.Panel”, {
flex: 1,
style: “background-color:red; color:white;”
});

var item2 = Ext.create(“Ext.Panel”, {
flex: 2,
style: “background-color:green; color:white;”
});

var item3 = Ext.create(“Ext.Panel”, {
flex: 1,
style: “background-color:blue; color:white;”
});

var rootPanel = Ext.create(“Ext.Panel”, {
layout: { type: “hbox”, align: “stretch”, pack: “center”},
items: [ item1, item2, item3 ]
});
Ext.Viewport.add(rootPanel);
}

[예제] Fit 속성은 items 한개만 적용된다.

var rootPanel = Ext.create(“Ext.Panel”, {
layout: “fit”,
items: [ imagePanel ]
});

[예제] Card : Fit 과 마찬가지로 꽉 채우는 속성이 적용되지만

복수개의 아이템에 곂치는 형태로 적용된다.

– setActiveItem 사용 : cardPanel.setActiveItem(0); 을 사용하여 화면에 보여지는 Card 를 변경할 수 있다.

launch: function() {
var card1 = Ext.create(“Ext.Panel”, {
style: “background-color:#ff0000”
});

var card2 = Ext.create(“Ext.Panel”, {
style: “background-color:#00ff00”
});

var card3 = Ext.create(“Ext.Panel”, {
style: “background-color:#0000ff”
});

var cardPanel = Ext.create(“Ext.Panel”, {
flex:1,
layout: “card”,
items: [ card1, card2, card3 ]
});

var toolbar = Ext.create(“Ext.Toolbar”, {
docked: “top”,
items: [
Ext.create(“Ext.Button”, {
text: “Red”,
handler: function(btn, event) {
cardPanel.setActiveItem(0);
}
}),
Ext.create(“Ext.Button”, {
text: “Green”,
handler: function(btn, event) {
cardPanel.setActiveItem(1);
}
}),
Ext.create(“Ext.Button”, {
text: “Blue”,
handler: function(btn, event) {
cardPanel.setActiveItem(2);
}
})
]
});

var rootPanel = Ext.create(“Ext.Panel”, {
layout: “vbox”,
items: [ toolbar, cardPanel ]
});
Ext.Viewport.add(rootPanel);
}

[예제] TabPanel 을 이용한 화면 전환

– Button 을 생성하지 않아도 items: [ card1, card2, card3 ] 이런식으로 넣는 것 만으로

버튼이 생성된다. 버튼의 val 값은 각 아이템의 title 을 따른다.

– 적용되는 Layout 은 CArd Layout 이다.

launch: function() {
var card1 = Ext.create(“Ext.Panel”, {
title: “Red”,
style: “background-color:#ff0000”
});

var card2 = Ext.create(“Ext.Panel”, {
title: “Green”,
style: “background-color:#00ff00”
});

var card3 = Ext.create(“Ext.Panel”, {
title: “Blue”,
style: “background-color:#0000ff”
});

var rootPanel = Ext.create(“Ext.tab.Panel”, {
items: [ card1, card2, card3 ]
});
Ext.Viewport.add(rootPanel);
}

[모바일WEB-APP] Sencha Touch 2.0 – UI 구성 기초

1. Sencha Touch – UI 구성 기초

(1) Applicaion 구조

 

UI 구성은 Ext.appliction 에서 정의되어진다. 아래는 기본적인 application 의 구조이다.

– name : Class 명

– requires : 사용하고자 하는 class 를 import 한다.

– lauch : 실질적으로 수행하고자 하는 내용을 넣으면 됨

<script type=”text/javascript”>

Ext.application({
name: “Myapp”,

requires:[],
launch: function()
{
var panel = Ext.create(“Ext.Panel” , {
style : “background-color:#ffff00”,
html: “Hello World”
});

Ext.Viewport.add(panel);
}
});
</script>

(2) Document 보기 팁

 

참조 : http://docs.sencha.com/touch/2.3.1/

보는 방법은 간단하다. 위의 샘플에서 보이는 Ext 는 Doc 의 두번째 탭에서 보이는

Root 라고 보면된다.

– 예를 들어 Ext.Panel 은 Doc 의 Ext 아래 정의되어 있다.

– Panel 을 선택하면 config , properties, method, event 를 볼수 있다.

-> config 는 객체 내부 변수 들을 정의하는 것

-> method 는 해당 객체에서 사용가능한 메서드

-> event 는 해당 객체에서 사용가능한 Event 이다.

(3) 웹앱의 구성

 

웹앱은 복수의 JS 파일과 하나의 HTML 파일로 구성된다. 아래는 3개의 JS 파일과

하나의 HTML로 구성된 예제 이다.

[예제] HTML 페이지 3개의 JS 페이지를 Import 하여 Ext.tab.Panel 패널에 추가한다.

<script type=”text/javascript”>
Ext.application({
name: “MyApp”,

requires: [
“HomeView”,
“LoginView”,
“ListView”,
“Ext.tab.Panel”
],

launch: function() {
var homeView = Ext.create(“HomeView”);
var loginView = Ext.create(“LoginView”);
var listView = Ext.create(“ListView”);

var tabPanel = Ext.create(“Ext.tab.Panel”, {
items: [ homeView, loginView, listView ]
});
Ext.Viewport.add(tabPanel);
}
});
</script>

[예제] import 하는 JS 파일중 하나의 예제

패널을 만들고 패널의 배경색을 정하는 것으로 끝

Ext.define(“HomeView”, {
extend:”Ext.Panel”,
config: {
title: “Home”,
style: “background-color: red; color:white;”,
html: “homeView”
}
});

(4) 컴포넌트 구성의 종류

컴포넌트의 종류는 크게 일반, 네비게이션, 폼, 스토어 바운드 컴포넌트로 구분된다.

가) 일반컴포넌트

– 컨탠이너 컴포넌트 : 자식 컴포넌트를 포함할 수 있음, Doc 상으로 보면 Container 를 상속 받는지 여부로 확인 가능

panel, viewport, tab.panel,

– 뷰어 컴포넌트 : 자식 컴포넌트를 포함할 수 없음

나) 네비게이션 컴포넌트 : 화면 네비게이션 UI를 구성하는 컴포넌트들을 말한다.

다) 폼 컴포넌트 : 필드, 체크박스, 라벨과 같은 입력 폼을 생겅하는 컴포넌트

라) 스토어 바운드 컴포넌트 : 모델 데이터를 바인딩하여 UI를 구성하는 컴포넌트

(5) Container

가) 컨테이너에 아이템 추가

[예제] 아래와 같은 방법으로 컴포넌트 추가 가능

var panel = Ext.create(“panel”,{items:[a,b,c]}]);

나) 컨테이너에 아이템 동적 추가

[예제] add 메서드를 사용하여 추가 가능하다. Container 상속 객체는 동일

panel.add(btn02);

다) 컨테이너에서 아이템을 삭제

[예제] remove 메서드를 사용하여 삭제가 가능하다 . Contariner 상속 객체는 동일하다.

panel.remove(btn);

[예제] 버튼을 누르면 버튼을 동적으로 추가하고 추가된 버튼을 누르면 버튼이 삭제되는 예제

<script type=”text/javascript”>
Ext.application({
name: “MyApp”,

requires: [
“Ext.Button”,
“Ext.Panel”
],

launch: function()
{
var btn01 = Ext.create(“Ext.Button” ,
{
text:”add” ,
handler:function()
{
var btn02 = Ext.create(“Ext.Button”,
{
text:”temp”,
handler:function(btn){
panel.remove(btn);
}
}
);
panel.add(btn02);
}
});
var panel = Ext.create(“Ext.Panel”,{
items:[btn01]
});

Ext.Viewport.add(panel);
}
});
</script>

(6) Dock

Container 에 객체를 추가하면서 추가하는 객체의 위치를 지정하는 방법

– docked:”bottom” : 요소객체 중 docked 에 원하는 위치를 지정한 후에 Root Container 에 Add 하여야 한다.

[예제] 이제 부터는 lunch 부분의 소스만 첨부함 .

launch: function()
{
var dockedItem1 = Ext.create(“Ext.Panel” ,
{
docked:”top”,
style:”background-color:red”,
html:”top”
});
var dockedItem2 = Ext.create(“Ext.Panel” ,
{
docked:”bottom”,
style:”background-color:green”,
html:”bottom”
});
var dockedItem3 = Ext.create(“Ext.Panel” ,
{
docked:”left”,
style:”background-color:blue”,
html:”left”
});
var dockedItem4 = Ext.create(“Ext.Panel” ,
{
docked:”right”,
style:”background-color:white”,
html:”right”
});

var rootPanel = Ext.create(“Ext.Panel” , {
items:[dockedItem1,dockedItem2,dockedItem3,dockedItem4]
});

Ext.Viewport.add(rootPanel);

}

[모바일WEB-APP] Sencha Touch 2.0 – 시작하기

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());

[모바일WEB-APP] Jquery-Mobile기초 – 테마

6. Jquery Mobile 기초 – 테마

(1) 테마의 확장

가) CSS 구조

테마의 확장을 위해서는 기본적으로 css 를 수정하여야 하는데 그전에 jquery-mobile 에서 제공하는 css 파일의 구조를 먼저

알아보자. Jquery-Mobile CSS 는 Swatches와 Structure 로 구성되어 있다.

Jquery-Mobile 에서는 아래와 같이 Structure CSS 와 Swatches CSS 를 따로 제공하고 있다.

확장을 위해서 가장 추천하는 방법은 – jquery.mobile.structure-1.1.2.min.css 와 – jquery.mobile.theme-1.1.2.css

를 사용하는 방법을 추천한다.

– jquery.mobile-1.1.2.css

– jquery.mobile-1.1.2.min.css

– jquery.mobile.structure-1.1.2.css

– jquery.mobile.structure-1.1.2.min.css

– jquery.mobile.theme-1.1.2.css

– jquery.mobile.theme-1.1.2.min.css

나) Theme Roller 사용

– Jquerty-Mobile Thme Rooler 사이트 이동 : http://jquerymobile.com/themeroller/

– jquery.mobile.theme-1.1.2.css 전체 내용 Clip Board Copy

– Theme Roller 상단에 Import 에서 붙여 넣기

– CSS 파일이 IMPORT 됨

– 좌측 위에 + 버튼을 눌러서 F 탭을 만듬

– F 탭의 CSS 를 편집하고

– Download 버튼을 눌러 ZIP 파일을 다운로드 받으면 변경된 CSS 를 확인 할 수 있다.

다) 변형된 CSS 의 활용

[예제] 새로 추가한 CSS 를 추가

– THEME 부분은 새로 만든것을 , Struc 부분은 기본의 것을 사용

<link rel=”stylesheet” href=”./themes/aaaaa.min.css” />
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.1.2/jquery.mobile.structure-1.1.2.min.css” />

[예제] 새로 추가한 테마를 적용한다.

– 새로 추가했던 것은 F , 이런식으로 추가적으로 THEME 를 추가할 수 있다.

<div data-theme = “f” data-role=”header” data-position=”fixed”>
<h1>기본 테마</h1>
<a href=”#” data-icon=”arrow-l”>Prev</a>
<a href=”#” data-icon=”arrow-r” data-iconpos=”right”>Next</a>
</div>

[모바일WEB-APP] Jquery-Mobile기초 – 터치/방향변경 이벤트 처리

5. Jquery Mobile 기초 – 터치/방향변경 이벤트처리

(1) tab

화면을 터치하는 것을 tab 이벤트로 인식한다.

$(“#test_div”).bind(“tap”, function()
{
alert(“tab action”);
});

(2) tab hold

화면을 길게 터치하는 것을 tab 이벤트로 인식한다.
$(“#test_div”).bind(“taphold”, function()
{
alert(“taphold action”);
});

(3) swipe

화면을 touch move 하는 이벤트를 말한다.

$(“#test_div”).bind(“swipe”, function()
{
alert(“swipe action”);
});

(4) swipe left/right

화면을 touch 하고 왼쪽으로 move 하는 이벤트를 말한다. 네이버에서 화면이 좌우로 슬라이딩 되는

것을 보았을 것이다. 유사한 내용이라고 보면된다. (같은 방법은 아님)

해당 이벤트를 응용하여 해당 이벤트 시에 transition Slide 로 화면을 전환시켜 주면 유사한 효과를 얻을 수 있다.

$(“#test_div”).bind(“swipeleft”, function(event)
{
console.log(“—-left”);
$.mobile.changePage(“#green”, {transition:”slide”, reverse:true});
});
$(“#test_div”).bind(“swiperight”, function(event)
{
console.log(“—-right”);
$.mobile.changePage(“#green”, {transition:”slide”});
});

<div id=”red” data-role=”page”>
<div data-role=”header”>
<h1>홈 페이지</h1>
</div>

<div data-role=”content”>
<div id =”red_div” style=”width :100%; height:500px; background-color:red”></div>
</div>
</div>

<div id=”green” data-role=”page”>
<div data-role=”header”>
<h1>홈 페이지</h1>
</div>

<div data-role=”content”>
<div id =”green_div” style=”width :100%; height:500px; background-color:green”></div>
</div>
</div>

(4) 화면 전환에 대한 이벤트 처리

모바일 화면은 가로 세로 화면의 비율이 다르다, 이러한 환경에 맞게 화면을 프로그램 해주어야 할때 사용할 수 있는

이벤트 이다.

가) 최초 화면 로딩시 가로/세로 여부 확인

– window.orientation : 기본 HTML의 window.orientation 에서는 0 혹은 90 으로 값을 리턴한다.

if(window.orientation == 0) {
$(“#backImg”).attr(“src”, “../image/big-image-portrait.png”);
} else {
$(“#backImg”).attr(“src”, “../image/big-image-landscape.png”);
}

나) 로딩후 사용자가 가로/세로를 변경하였을 때

– window.orientation : 기본 HTML의 window.orientation 에서는 portrait 혹은 landscape 를 리턴한다.

$(window).bind(“orientationchange”, function(event) {
if(event.orientation == “portrait”) {
$(“#backImg”).attr(“src”, “../image/big-image-portrait.png”);
} else {
$(“#backImg”).attr(“src”, “../image/big-image-landscape.png”);
}