跨界的優雅 / Crossing Platform with Elegance

「多平台的 QML 應用程式架構設計」
2015/11/1 @ MOPCON 2015, International Convention Center Kaohsiung (ICCK), Kaohsiung, Taiwan.

Transcript

1. 騗歲涸⮛꧉ 
   㢵䎂〵涸
   2.-
   䥰欽玑䒭卺圓鏤鎙
   34$IJBOH
   !
   .01$0/
   
   $$
   #:4"
   
   58
2. 34$IJBOH 荩㣐岁䖒禺♲䎃秹
   㷸欰鎙皿堥䎃剚ⶰ〮
   荩㣐Ꟛ彂爢涮饱➃껷㾂爢Ꟁ
   IUUQQPSFOUX
3. 鸏㜥怵闍㼟剚䱳鎣 ˙ 騗䎂〵涸植剤倰呪⿻Ⱖ㔮㞯
   ˙ 2.-
   僽➊랃⟃⿻捀➊랃銴⢪欽㸐
   ˙ 㥶⡦⢪欽
   2.-
   鿈縭㢵䎂〵涸䥰欽玑䒭
   "QQ
   ˙ 㢵䎂〵玑䒭鏤鎙䌢鋅涸㉏겗莅㻜⡲倰岁
4. 騗䎂〵
   ˋ
   8SJUF
   PODF
   SVO
   FWFSZXIFSF
5. ⾲欰 鸒欽 笪갤䥰欽玑䒭 5JUBOJVN
   .PCJMF $PSEPWB 3FBDU
   /BUJWF 9BNBSJO +BWB
6. QML Qt Meta Language / Qt Modeling Language 1IPUP
   GSPN
   2U
   PDJBM
   TJUF
7. 2U
   GSBNFXPSL 8JOEPXT
   "1* "OESPJE
   /%, J04
   4%, 䎂〵 /FUXPSLJOH % 2U
   2VJDL 8FC,JU ⢿㥶 ⢿㥶 䬄韍 䥰欽玑䒭
8. 䎙⦐⢪欽
   2.-
   涸㥪贖 ˙ 腋㣁㸤䱾ⵖ䥰欽玑䒭涸遤捀邍植
   ˙ ⾲欰 ⟃⿻炽넓⸈鸠 滑곃涸鸠䏞
   ˙ 鞮㺢涸
   "1*
   ⟃⿻仍⯏䚍
   FYUFOTJCJMJUZ
   ˙ 玑䒭焺〳伟䚍
   TPVSDFQPSUBCMF
9. It’s QML!
10. ⴲ㒂
    2.-
11. import QtQuick 2.0 Rectangle { color: '#33b5e5' }
13. import QtQuick 2.0 Rectangle { color: '#33b5e5' radius: 120 Text { anchors.centerIn: parent font.pixelSize: 24 text: "Hello, world!" } }
15. text: { var date = new Date() return ("<b>" + d.getHours() + "</b> 讫") }
16. -JWF
    %FNP
18. import QtQuick 2.0 import QtQuick.Window 2.0 import QtGraphicalEffects 1.0 ! Window { id: root color: "#689881" width: 800 height: 600 visible: true AnimatedImage { id: wheel width: radius * 2 height: radius * 2 source: "slippy.gif" fillMode: Image.PreserveAspectCrop visible: false ! property int radius: 96 } Rectangle { id: mask width: wheel.width height: wheel.height radius: wheel.radius color: "#000" visible: false } Rectangle { id: clock color: "orange" width: (parent.width >= parent.height) ? parent.height : parent.width height: width radius: width / 2 anchors.centerIn: parent opacity: 1 property int hour: 9 property int minute: 41 property int second: 0 OpacityMask { id: secondCircle width: wheel.width height: wheel.height ! source: wheel maskSource: mask visible: (x != 0 || y != 0) x: clock.radius + (clock.radius - wheel.radius) * Math.cos((6.0 * clock.second - 90.0) / 360.0 * 2 * Math.PI) - wheel.radius y: clock.radius + (clock.radius - wheel.radius) * Math.sin((6.0 * clock.second - 90.0) / 360.0 * 2 * Math.PI) - wheel.radius z: 1 Behavior on x { NumberAnimation { easing.type: Easing.OutBack duration: 200 } } Behavior on y { NumberAnimation { easing.type: Easing.OutBack duration: 200 } } } } Text { id: label anchors.centerIn: clock text: (clock.hour > 12 ? clock.hour - 12 : clock.hour) + ":" + (clock.minute < 10 ? "0" + clock.minute : clock.minute) font.family: "Roboto" font.pointSize: 84 font.weight: Font.Bold color: "#fff" } ! Text { id: creditLabel anchors { top: label.bottom horizontalCenter: label.horizontalCenter } text: "岄傀य़䋊樄რᐒ" font.family: "Source Han Sans TC" font.pointSize: 24 color: "#fff" } ! NumberAnimation { id: minuteAnimation target: label property: "opacity" from: 0.7; to: 1 duration: 1000 easing.type: Easing.OutExpo } Timer { id: timer interval: 1000 running: true repeat: true onTriggered: { var date = new Date() clock.hour = date.getHours() clock.minute = date.getMinutes() clock.second = date.getSeconds() ! if (clock.second == 0) minuteAnimation.start() } } // (C) NTUOSC 2014. Released under MIT License. }
19. HJUIVCDPNSTDIJBOHOUVPTDRNMJOUSPDMPDL
20. 矦㋲涸玑䒭
 2.-
    㽠〳⟃䵆㹁✫
21. 醳꧹♧럊涸梖岁 ˙ 2.-
    㛇劥♳僽
    0QFO(-
    㜥兞
    ˙ 醳꧹⯋⟝〳⟃欽Ⰹ䒊涸
    2U
    2VJDL
    $POUSPMT
    ˙ 亼⡂
    8$
    4QFD
    涸
    "1*
    〳⟃䒸Ⰵ♶㼱
    +4
    MJC
    ˙ 殹搭銴荈䊹ⵠ⛳僽〳⟃ 4*5$0/
    'SJFOET
    TUJDLFST
    
    $$
    #:/$
    34$IJBOH
    
    $+0,&3
    
    㣐⸔
22. 眕⢿
    5ISFFKT
    –
    2.-
24. 㢵䎂〵佅䴂 ˙ 4ZNCJBO
    ˙ .FF(P
    )BSNBUUBO
    ˙ #MBDL#FSSZ
    ! ˙ 4BJMGJTI
    04
    ˙ 6CVOUV
    5PVDI
    ˙ 8JOEPXT
    ˙ 04
    9
    ˙ -JOVY9
    ˙ "OESPJE
    "3.
    WW
    Y
    ˙ J04 } } 2U
    2VJDL
     2U
    2VJDL
    
25. 矦㋲♲姿끐 ˙ 酤湡垦䎂〵涸
    4%,
    ˙ 管䧭湡垦䎂〵涸玑䒭
    ˙ 駵㖈湡垦䎂〵♳
26. 眕⢿
    .BUFSJBM
    2.-
    MJCSBSZ
    !
    .01$0/
    
30. ꣳⵖ ˙ 剤❉䎂〵涸
    4%,
    㼩橇㞯剤暶婌꨾宠
    ˙ 2U
    
    尝剤巒覈涸
    "1*
    ꨾銴鷴麕⾲欰⺫酤
    ˙ 暶ⴽ岤䠑
    J04
    "QQ
    4UPSF
    鸤䧭涸
    -(1-
    ㉏겗
31. 5IBOLT 
    㢵䎂〵涸
    2.-
    䥰欽玑䒭卺圓鏤鎙
    34$IJBOH
    !
    .01$0/
    
    $$
    #:4"
    
    58