* 앱 시작하기
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
statusBarStyle: 'default',
onReady: function(){
new Ext.Panel(
{
fullscreen: true,
html: 'Hello Sencha Touch'
}
);
}
});
new Ext.Application({
launch: function() {
new Ext.Panel(
{
fullscreen: true,
html: ‘Hello Sencha Touch’
}
);
}
});
MVC - Ext.Application
* Theme : Sass (Ruby) - CSS를 프로그래밍하듯이 작성할 수 있음
Sass 내장함수 : http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
> sass filename.scss filename.css
> css2sass filename.css filename.scss
> sass -style compressed filename.scss filename.css
* Compass : Sass 를 좀 더 편리하게 개발할 수 있도록 함 http://compass-style.org/
* 설치
- Ruby 설치 http://www.ruby-lang.org/ko/downloads/
- Sass & Compass 설치
> gem install haml
> gem install compass
* config.rb : 컴파일 옵션
* resources/themes/stylesheets/sencha-touch/default/_variables.scss
$base-color : 앱의 기본 색상 정의
$base-gradient : ‘matte’, ‘glossy’, ‘flat’, ‘bevel’, ‘recessed’ etc.
> compass compile sencha-touch.scss
> compass -watch
* Ext.Panel
Ext.setup({
onReady: function(){
new Ext.Panel({ Panel 객체 생성, <dev>요소로 DOM에 추가 됨
fullscreen: true, 전체 화면
style: "...", CSS 지정
layout: { ... }, 레이아웃 정보
items: [ { ... }, { ... }, ... ], UI 아이템들 지정
dockedItems: [ { ... }, { ... }, ... ] 도킹 아이템 지정. Panel의 상하좌우에 밀착된 아이템
});
}
});
* dockedItems
dockedItems: [
{
dock: "top",
style: "background-color:red;",
html: "DockItem-Top"
},
{
dock: "left",
style: "background-color:gray;",
html: "DockItem-Left"
},
{
dock: "bottom",
style: "background-color:yellow;",
html: "DockItem-Bottom"
},
{
dock: "right",
style: "background-color:green;",
html: "DockItem-Right"
}
}
* layout
layout: {
type: 'vbox',
align: 'stretch',
pack: 'center'
},
* items : 객체 생성
items:[
new Ext.Button({ text: ‘button1’ })
]
* Ext.TabPanel
Ext.setup({
onReady: function(){
var item1 = {
title: 'Tab1',
style: "background-color: red;",
html: 'Item1'
};
var item2 = {
title: 'Tab2',
style: "background-color: gray;",
html: 'Item2'
};
var item3 = {
title: 'Tab3',
style: "background-color: yellow;",
html: 'Item3'
};
var panel = new Ext.TabPanel({
fullscreen: true,
ui: 'dark',
tabBarDock: 'top',
cardSwitchAnimation: 'slide',
items: [item1,item2,item3]
});
}
});
* Ext.Carousel
Ext.setup({
onReady: function(){
var item1 = {
style: "background-color:red;",
html: 'Item1'
};
var item2 = {
style: "background-color:gray;",
html: 'Item2'
};
var item3 = {
style: "background-color:yellow;",
html: 'Item3'
};
var panel = new Ext.Carousel({
fullscreen: true,
ui: 'dark',
indicator: true,
direction: 'horizontal',
items: [item1,item2,item3]
});
}
});
* Multi Carousel
Ext.setup({
onReady: function(){
var item1 = {
style: "background-color:red;",
html: 'Item1'
};
var item2 = {
style: "background-color:gray;",
html: 'Item2'
};
var item3 = {
style: "background-color:yellow;",
html: 'Item3'
};
var topCarousel = new Ext.Carousel({
items: [item1,item2,item3]
});
var middleCarousel = new Ext.Carousel({
items: [item1,item2,item3]
});
var bottomCarousel = new Ext.Carousel({
items: [item1,item2,item3]
});
var panel = new Ext.Panel({
fullscreen: true,
layout:{
type: 'vbox',
align: 'stretch'
},
defaults: {flex: 1},
items: [topCarousel, middleCarousel, bottomCarousel]
});
}
});
* Ext.Toolbar
Ext.setup({
onReady: function(){
var panel = new Ext.Panel({
fullscreen: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
title: 'My Toolbar',
defaults: {
xtype: 'button'
},
items: [
{ ui: 'decline-round', text:'decline-round' }
]
}]
});
}
});
* Ext.Button
Ext.setup({
onReady: function(){
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'start'
},
defaults: {
layout: { type: 'hbox' },
flex:1,
defaults: {
xtype: 'button'
}
},
items:[
{items: [
{ ui: 'normal', text:'Normal',
handler: function() {
Ext.Msg.alert('Message', 'Hi~~', Ext.emptyFn);
}
},
{ui: 'round', text:'Round'},
{ui: 'small', text:'Small'}
]},
{items: [
{ui: 'decline', text:'Drastic'},
{ui: 'decline-round', text:'Round'},
{ui: 'decline-small', text:'Small'}
]},
{items: [
{ui: 'confirm', text:'Confirm'},
{ui: 'confirm-round', text:'Round'},
{ui: 'confirm-small', text:'Small'}
]},
{items: [
{ui: 'action', text:'Action'},
{ui: 'action-round', text:'Round'},
{ui: 'action-small', text:'Small'}
]},
{items: [
{ui: 'back', text:'back'},
{ui: 'Forward', text:'Forward'}
]}
]
});
}
});
* SegmentedButton
Ext.setup({
onReady: function(){
var segmentedButton = [{
xtype: 'segmentedbutton',
allowMultiple: false,
allowDepress: false,
items: [
{ text: 'Toggle 1' },
{ text: 'Toggle 2', pressed : true },
{ text: 'Toggle 3' }
],
listeners : {
toggle : function(container, button, active){
Ext.Msg.alert('Tap', button.text + " : " + (active ? 'on' : 'off'), Ext.emptyFn);
}
}
}];
new Ext.Panel({
fullscreen: true,
dockedItems:{
xtype: 'toolbar',
ui: 'light',
items: [segmentedButton]
}
});
}
});
* iconCls
Ext.setup({
onReady: function(){
var item1 = { title: 'info', iconCls: 'info', badgeText:'2',};
var item2 = { title: 'favorites', iconCls: 'favorites' };
var item3 = { title: 'settings', iconCls: 'settings' };
var item4 = { title: 'bookmarks', iconCls: 'bookmarks' };
var item5 = { title: 'download', iconCls: 'download' };
var item6 = { title: 'more', iconCls: 'more' };
var item7 = { title: 'search', iconCls: 'search' };
var item8 = { title: 'team', iconCls: 'team' };
var item9 = { title: 'time', iconCls: 'time' };
var item10 = { title: 'user', iconCls: 'user' };
var item11 = { title: 'action', iconCls: 'action' };
var item12 = { title: 'add', iconCls: 'add' };
var item13 = { title: 'arrow_up', iconCls: 'arrow_up' };
var item14 = { title: 'arrow_right', iconCls: 'arrow_right' };
var item15 = { title: 'arrow_down', iconCls: 'arrow_down' };
var item16 = { title: 'arrow_left', iconCls: 'arrow_left' };
var item17 = { title: 'compose', iconCls: 'compose' };
var item18 = { title: 'delete', iconCls: 'delete' };
var item19 = { title: 'refresh', iconCls: 'refresh' };
var item20 = { title: 'reply', iconCls: 'reply' };
var item21 = { title: 'star', iconCls: 'star' };
var item22 = { title: 'trash', iconCls: 'trash' };
var panel = new Ext.TabPanel({
fullscreen: true,
ui: 'light',
cardSwitchAnimation: 'slide',
tabBar: {
dock: 'bottom',
scroll: 'horizontal'
},
items:
[
item1,item2,item3,item4,item5,item6,item7,item8,item9,item10,
item11,item12,item13,item14,item15,item16,item17,item18,item19,item20,
item21,item22
]
});
}
});
* Overlay : HTML과 스크립트 모두 작업해야 함
* Ext.List
* Ext.MessageBox : Alert, Confirm, Prompt
* Ext.is
width: Ext.is.Phone ? 260 : 400,
height: Ext.is.Phone ? 220 : 400
* contentEl : html을 사용해서 레이아웃 구성
********************** 이상 UI 와 관련해서 ************************
* Ajax
* Ext.Template : HTML 태그 모형
var myTpl = new Ext.Template([
'<div>',
'<span> <b>{name}</b> is {value} </span>',
'</div>'
]);
Ext.setup({
onReady: function(){
var panel = new Ext.Panel({
fullscreen:true,
tpl: myTpl
});
panel.update(
{
name: "Sencha Touch",
value: "The First HTML5 Mobile Web App Framework"
}
);
}
});
* Ext.XTemplate : 배열 형태의 데이터를 쉽게 다룰 수 있음
* Ajax 호출 : Ext.Ajax
• url: Ajax 통신 대상이 되는 원격지의 URL
• timeout: 네트워크 통신이 항상 안정적이지는 않다. 따라서 적절한 타임아웃 설정이 필요하다. Ajax 통신 과정에서 타임아웃 시간을 초과하면 더는 기다리지 않고 실패로 처리하는 것이 좋다. 이 속성에 타임아웃 값을 밀리초 단위로 지정한다. 기본값은 30,000밀리초(약 30초)다.
• success 함수: Ajax 통신이 성공하면 실행되는 함수
• failure 함수: Ajax 통신이 실패하면 실행되는 함수
• callback 함수: 성공/실패와 상관없이 Ajax 통신이 완료되면 실행되는 함수
* JSONP : 크로스도메인 접근을 가능하도록 함
<script type=’text/javascript’ src=’http://anotherDomain/server.js’></script>
Ext.util.JSONP.callback(
{
"name": "Sencha Touch",
"value": "The First HTML5 Mobile Web App Framework"
}
)
Ext.util.JSONP.request({ .......
**************************************
* Data package
* Ext.data.Proxy
- ServerProxy : 원격지 서버에서 데이터 로딩
- ClientProxy : 로컬 저장소로부터 데이터 로딩
* Ext.data.Reader : proxy로 얻어온 데이터 해석하고 데이터 모델 객체로 생성함
- JsonReader
- XmlReader
* Ext.data.Store : 데이터의 연산을 수행할 수 있도록 함
- inline Data
var store = new Ext.data.Store({
data: [
{firstName: 'Julio', lastName: 'Benesh'},
{firstName: 'Julio', lastName: 'Minich'},
{firstName: 'Tania', lastName: 'Ricco'},
………
]
- External Data
var store = new Ext.data.Store({
proxy: {
type: 'ajax',
url : 'server.html',
reader: {
type: 'json',
root: 'users'
}
}
});
* DataView : Store에 저장된 데이터를 UI에 표현하기 위한 컴포넌트 객체 (Ext.List가 이 클래스를 상속함)
* Ext.Template : 데이터의 레이아웃을 결정할 때 사용 (XTemplate)
* 원격지 서버의 리소스 호출 : Mode, Store, Proxy, Reader 이용
- JsonReader 사용
- XmlReader 사용
* 데이터 정렬과 필터링
- Store 객체의 sort()와 filter() 함수
jsonStore.sort(‘firstName’,’DESC’); //firstName을 기준으로 내림차순 정렬
jsonStore.filter(‘firstName’, ‘JM’);. //firstName 값이 ‘JM’인 것만 조회
* Ext.data.ClientProxy 클래스를 상속받은 객체를 통해 로컬 자원에 액세스할 수 있음
- Memory
- Web Storage : HTML5에서 추가된 클라이언트 측 저장소
: LocalStorage (영구저장소)
: SessionStorage (임시저장소)
- ClientProxy, WebStorageProxy 상속받아 LocalStorageProxy 객체나 SessionStorageProxy 객체 이용
* Ext.NestedList : 리스트를 계층 구조로 표현할 수 있음 : 타이틀바의 제목이나 뒤로가기 버튼이 자동으로 생성 됨
***********************************
* Event
- handler 를 이용한 버튼 탭 이벤트 처리
new Ext.Button({
text: 'MyButton',
handler: function(btn, event){
Ext.Msg.alert('Title', btn.text, Ext.emptyFn);
}
})
- onItemDisclosure 속성을 이용한 리스트 탭 이벤트 처리
new Ext.List({
itemTpl : '{firstName} {lastName}',
store: store,
onItemDisclosure: function(record, btn, index) {
Ext.Msg.alert('Message', record.get('firstName'), Ext.emptyFn);
}
}
* 표준 이벤트 처리
- listeners를 이용한 인라인 이벤트 처리
new Ext.Button({
text: 'MyButton',
listeners: {
tap: function(btn, event){ console.log(event.type); },
click: {
element: 'el',
fn: function(event){ console.log(event.type); }
}
}
})
- 0n() 함수를 이용한 이벤트 처리
btn.on({
'tap' : {
fn: function(event){ console.log('tap')},
delay: 2000
},
'click' : {
element: 'el',
fn: function(event){ console.log('click')},
}
});
* 리스트의 itemtap, itemswipe 이벤트
* Touch Event
- 탭(Tap) 관련 이벤트 : tap, singletap , doubletap, taphold, tapcancel
- 터치(Touch) 관련 이벤트 : touchstart, touchend, touchmove, touchdown
- 스윕(Swipe) 이벤트 : swipe
- 핀치(Pinch) 관련 이벤트 : pinch, pinchstart, pinchend
- 드래그(Drag) 및 스크롤(Scroll) 관련 이벤트 : drag, dragstart, dragend, scroll, scrollstart, scrollend
*****************************
* Media 지원 : HTML5에 추가된 Video, Audio 사용. Ext.Video, Ext.Audio
* Ext.Media
- autoPause : 미디어가 비활성화(deactivate)될 때 자동으로 일시정지할지 결정한다(기본값: true).
- autoResume : 미디어가 활성화(activate)될 때 자동으로 재생할지 결정한다(기본값: false)
- enableControls : 미디어 재생을 제어하는 컨트롤 바의 표시 여부를 결정한다(기본값: true).
- url : 미디어 소스를 지정한다
- play() : 미디어를 재생한다.
- pause() : 미디어 재생을 일지정지한다.
- toggle() : 미디어 재생과 일시정지를 번갈아 처리하는 토글 기능을 제공한다.
* Ext.Video
Ext.setup({
onReady: function() {
var pnl = new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
pack: 'center'
},
items: [{
xtype: 'video',
url: 'space.mp4',
loop: true,
width: 500,
height: 400,
posterUrl: 'Screenshot.png'
}]
})
}
});
* Ext.Audio
Ext.setup({
onReady: function() {
var pnl = new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
pack: 'center'
},
items: [{
xtype: 'audio',
url: 'crash.mp3',
loop: true
}]
})
}
});
