5. jQueryMobile & Sencha Touch

ubiquitousstrumpetΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 9 μήνες)

223 εμφανίσεις

앱스프레소 앱 개발 교육
Twitter: @ibare
ibare@kthcorp.com
ibare77@gmail.com
Blog:
http://www.ibare.kr
KTH / 기술연구소
#1 하이브리드앱 개발 방법
#2 앱스프레소 소개
#3 모바일을 위한 HTML5
#4 모바일 자바스크립트 프레임웍
#5 jQueryMobile & Sencha Touch
#6 Waikiki API & Appspresso Plugin API
#7 Appspresso Tutorial I
- jQueryMobile
#8 Appspresso Tutorial II
#9 Appspresso Tutorial I
- Sencha Touch
#10 Appspresso Tutorial II
웹플렛폼Lab / 김민태
jQueryMobile Features
Lightweight size
Progressive enhancement
Compatible with all major mobile platforms
Built on jQuery core
Automatic initialization
HTML5 Markup-driven configuration
Accessibility
New events
Powerful theming framework
New plugins
Automatic initialization
jquery.mobile-1.0a4.1.css
jquery-1.4.4.min.js
jquery.mobile-1.0a4.1.js
<DIV data-role=”page” id=”home”>
<BODY>
<DIV data-role=”page” id=”about”>
<DIV data-role=”content”>
<DIV data-role=”header”>
<DIV data-role=”footer”>
.
.
.
Automatic initialization flow
jquery.mobile-1.0a4.1.css
jquery-1.4.4.min.js
jquery.mobile-1.0a4.1.js
mobileinit

$.mobile
activeBtnClass
loadingMessage
activePageClass
defaultTransition
nonHistorySelectors
ajaxFormsEnabled
subPageUrlKey
ajaxLinksEnabled
.
.
.
.
.
.
Automatic Page Link
<A HREF=”#home”>HOME</A>
<A HREF=”home.html”>HOME</A>
<FORM ACTION=”home.html”>
<INPUT TYPE=”SUBMIT”>
</FORM>
Multi Page Structure
BODY
data-role=”page” id=”page1”
data-role=”header”
H1
data-role=”content”
.
.
.
href=”link”
data-role=”page” id=”page2”
.
.
.
file 1
Ajax
file 2
file 3
Stack History Management
<!doctype html>
<html>
...
<div
data-role=”page”
...
Accessibility
Automatic ARIA
content
main
listview
listbox
header
banner
dialog
dialog
.
.
.
.
.
.
ʫ
data-role
role
Event
tab
tabhold
swipe
swipeleft
swiperight
pagebeforeshow
pagebeforehide
pageshow
pagehide
scrollstart
scrollstop
Themes
data-theme=”b”
data-theme=”d”
<button
data-theme=
”a”
>
OK
</button>
<button
data-theme=
”c”
>
Cancel
</button>
.
.
.
.
.
.
Transitions
data-transition=”pop”
Transitions from
jQtouch
(
with small
modifications
): Built by David
Kaneda and maintained by
Jonathan Stark.
<a
href=
”#about”
data-role=
”button”
data-transition=
”fade”
>
About
</a>
.
.
.
.
.
.
Components: Dialog
data-role=”dialog”
Slide Up
Flip
Pop
<a
href=
”#about”

data-role=
”dialog”
>
About
</a>
.
.
.
.
.
.
Components: Header
data-role=”header”
<div
data-role=
”header”
>
<h1>
Edit Contact
</h1>
</div>
.
.
.
.
.
.
<div
data-role=
”content”
>
Components: Footer
data-role=”footer”
<div
data-role=
”footer”
>
<button
data-icon=
”delete”
>

Remove
</button>
</div>
.
.
.
.
.
.
<div
data-role=
”content”
>
</div>
<!-- end content -->
Components: Navbar
data-role=”navbar”
<div
data-role=
”footer”
>
<button
data-icon=
”delete”
>

Remove
</button>
</div>
.
.
.
.
.
.
<div
data-role=
”content”
>
</div>
<!-- end content -->
Components: Button
data-role=”button”
<a
href=”#target”
data-role=
”button”
>
Button
</a>
.
.
.
.
.
.
Components: Forms
Components: Listview
Sencha Touch
&YU 
  +4 
  
ﳂﳠ 
  6* 
  ﮹ﲨքﱟ 
  ﳱ 
  ﰠﮖ 
  爫߮ﱟ
J04 
  黎爫 
  ߬
.7$ 
  ﳐ祖猪 
   
  爫ﰠ 
  "1*
UI 컴포넌트
爫ﱭ列 
  荒梅 
  ﳂﳠ 
  6*
欄ﱟﲪҗ 
  ﰋ 
  ﳧب燎 
  練ز 
  ߸ﴜ
4FODIB 
  5PVDI 
  梅 
  Ҋ館ﳠ 
  6* 
  嬨ҕ
Touch Event
Enhanced
Touch Event
Swipe
Tab
Tab & Hold
DoubleTab
Pinch
Rotate
Sencha Touch API
Ext-JS
Array
JSON
Memory
LocalStorage
Tree
WebStorage
XML
Checkbox
DatePicker
EmailPicker
SearchField
Slider
UrlField
Toggle
AutoComponentLayout
BoxLayout
CardLayout
DockLayout
Panel
Drag&Drop
Region
Scroller
Sort
Ajax
Audio
Video
DataView
DOMQuery
MessageBox
Ext
Ext: 
  Ext 
  Core
K2VFSZ 
  $PSF 
  ١燎 
  悔ﳞח 
  %0.練߄欄ﯼﱟ 
  館ﱰﱭ 
  墨
&YUHFU

  &YUPO3FBEZ

  &YUHFU$NQ

  
Ext.is: 
  현재 
  플랫폼 
  식별
1IPOF 
  5BCMFU 
  %FTLUPQ 
  J1IPOF 
  J1BE 
  "OESPJE 
  #MBDLCFSSZ 
  
Ext.support: 
  웹 
  브라우져의 
  Capability 
  확인
"VEJP5BH 
  $BOWBT 
  %FWJDF.PUJPO 
  (FP-PDBUJPO 
  )JTUPSZ 
  
0SJFOUBUJPO$IBOHF 
   
  47( 
  
XTYPE
xtype
클래스
xtype
클래스
button
Ext.Button
formpanel
Ext.form.FormPanel
component
Ext.Component
checkboxfield
Ext.form.Checkbox
container
Ext.Container
selectfield
Ext.form.Select
dataview
Ext.DataView
field
Ext.form.Field
panel
Ext.Panel
fieldset
Ext.form.FieldSet
slider
Ext.form.Slider
hiddenfield
Ext.form.Hidden
toolbar
Ext.Toolbar
numberfield
Ext.form.Number
spacer
Ext.Spacer
radiofield
Ext.form.Radio
tabpanel
Ext.TabPanel
textareafield
Ext.form.TextArea
textfield
Ext.form.TextArea
togglefield
Ext.form.Toggle
Ext.Button
OFX 
  &YU#VUUPO \

   
   
   
  UFYU 
  ߡﱡ@爫

   
   
   
  VJ 
  6*@欄ﰋ社

   
   
   
  IBOEMFS 
  ߡﱡ@ﯿ@ﳩ@ﳣ
^

UI 
  스타일
SPVOE
EFDMJOF
DPOGJSN
EFDMJOFSPVOE
DPOGJSNSPVOE
TNBMM
EFDMJOFTNBMM
DPOGJSNTNBMM
Ext.List
컨테이너 컴포넌트
&YU5PPMCBS
&YU5BC#BS
&YU5BC1BOFM
&YU$BSPVTFM
&YU4FHNFOUFE#VUUPO
&YU1JDLFS 
   
  &YU%BUF1JDLFS
&YU"DUJPO4IFFU 
   
  &YU.FTTBHF#PY
Ext.Toolbar
OFX 
  &YU1BOFM \

   
   
   
  EPDLFE*UFNT<

   
   
   
  \

   
   
   
   
   
   
   
  YUZQFrUPPMCBSs

   
   
   
   
   
   
   
  VJ 
  6*@欄ﰋ社

   
   
   
   
   
   
   
  JUFNT< 
  ߡﱡ 
  >

   
   
   
   
   
   
   
  EPDLبﰊ@﨤ﮖ

   
   
   
  ^>
^

6* 
  欄ﰋ社 
  MJHIU 
  EBSL
بﰊ 
  﨤ﮖ 
  UPQ CPUUPN MFGU SJHIU
jQueryMobile 
  vs 
  Sencha 
  Touch
jQueryMobile
vs
Sencha Touch
1.0.0a4.1
버전
1.1.1
MIT
라이센스
GPLv3 /
상업용
스마트폰과

태블릿을

위한
터치에

최적화된



프레임웍
본인들의

주장
모바일

자바스크립트

프레임웍
최초의
HTML5
모바일

웹앱

프레임웍
˒˒
UI
컴포넌트
˒˒˒˒
˒˒˒˒˒
브라우져

지원
˒˒˒˒
˒˒˒˒
접근성
˒
˒˒˒
/
˒˒˒
학습곡선
(
개발
/
디자인
)
˒
/
˒
˒˒˒
/
˒˒
성능
(
로딩
/
실행
)
˒
/
˒˒˒
˒
/
˒˒˒
문서
(
공식
/
비공식
)
˒˒
/
˒


사이트



맘대로

결론