跨界的優雅 / 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
   

   View Slide

2. 34$IJBOH
   荩㣐岁䖒禺♲䎃秹
   㷸欰鎙皿堥䎃剚ⶰ〮
   荩㣐Ꟛ彂爢涮饱➃껷㾂爢Ꟁ
   IUUQQPSFOUX
   

   View Slide

3. 鸏㜥怵闍㼟剚䱳鎣
   ˙ 騗䎂〵涸植剤倰呪⿻Ⱖ㔮㞯
   ˙ 2.-僽➊랃⟃⿻捀➊랃銴⢪欽㸐
   ˙ 㥶⡦⢪欽2.-鿈縭㢵䎂〵涸䥰欽玑䒭 "QQ
   
   ˙ 㢵䎂〵玑䒭鏤鎙䌢鋅涸㉏겗莅㻜⡲倰岁
   

   View Slide

4. 騗䎂〵ˋ
   8SJUFPODF SVOFWFSZXIFSF
   

   View Slide

5. ⾲欰
   鸒欽
   笪갤䥰欽玑䒭
   5JUBOJVN.PCJMF
   $PSEPWB 3FBDU/BUJWF
   9BNBSJO
   +BWB
   

   View Slide

6. QML
   Qt Meta Language / Qt Modeling Language
   1IPUPGSPN2UPDJBMTJUF
   

   View Slide

7. 2UGSBNFXPSL
   8JOEPXT"1* "OESPJE/%, J044%,
   䎂〵
   /FUXPSLJOH % 2U2VJDL 8FC,JU
   ⢿㥶
   ⢿㥶
   䬄韍
   䥰欽玑䒭
   

   View Slide

8. 䎙⦐⢪欽2.-涸㥪贖
   ˙ 腋㣁㸤䱾ⵖ䥰欽玑䒭涸遤捀邍植
   ˙ ⾲欰⟃⿻炽넓⸈鸠滑곃涸鸠䏞
   ˙ 鞮㺢涸"1*⟃⿻仍⯏䚍 FYUFOTJCJMJUZ
   
   ˙ 玑䒭焺〳伟䚍 TPVSDFQPSUBCMF
   
   

   View Slide

9. It’s QML!
   

   View Slide

10. ⴲ㒂2.-
    

    View Slide

11. import QtQuick 2.0
    Rectangle {
    color: '#33b5e5'
    }
    

    View Slide

12. View Slide

13. import QtQuick 2.0
    Rectangle {
    color: '#33b5e5'
    radius: 120
    Text {
    anchors.centerIn: parent
    font.pixelSize: 24
    text: "Hello, world!"
    }
    }
    

    View Slide

14. View Slide

15. text: {
    var date = new Date()
    return ("" +
    d.getHours() +
    " 讫")
    }
    

    View Slide

16. -JWF%FNP
    

    View Slide

17. View Slide

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.
    }
    

    View Slide

19. HJUIVCDPNSTDIJBOHOUVPTDRNMJOUSPDMPDL
    

    View Slide

20. 矦㋲涸玑䒭

    2.-㽠〳⟃䵆㹁✫
    

    View Slide

21. 醳꧹♧럊涸梖岁
    ˙ 2.-㛇劥♳僽0QFO(-㜥兞
    ˙ 醳꧹⯋⟝〳⟃欽Ⰹ䒊涸2U2VJDL$POUSPMT
    ˙ 亼⡂8$4QFD涸"1*〳⟃䒸Ⰵ♶㼱+4MJC
    ˙ 殹搭銴荈䊹ⵠ⛳僽〳⟃
    4*5$0/'SJFOETTUJDLFST
    $$#:/$34$IJBOH$+0,&3㣐⸔
    

    View Slide

22. 眕⢿
    5ISFFKT–2.-
    

    View Slide

23. View Slide

24. 㢵䎂〵佅䴂
    ˙ 4ZNCJBO
    ˙ .FF(P)BSNBUUBO
    ˙ #MBDL#FSSZ
    !
    ˙ 4BJMGJTI04
    ˙ 6CVOUV5PVDI
    ˙ 8JOEPXT
    ˙ 049
    ˙ -JOVY9
    ˙ "OESPJE "3.WW Y
    
    ˙ J04
    }
    }
    2U2VJDL
    2U2VJDL
    

    View Slide

25. 矦㋲♲姿끐
    ˙ 酤湡垦䎂〵涸4%,
    ˙ 管䧭湡垦䎂〵涸玑䒭
    ˙ 駵㖈湡垦䎂〵♳
    

    View Slide

26. 眕⢿
    .BUFSJBM2.-MJCSBSZ!.01$0/
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. ꣳⵖ
    ˙ 剤❉䎂〵涸4%,㼩橇㞯剤暶婌꨾宠
    ˙ 2U尝剤巒覈涸"1*꨾銴鷴麕⾲欰⺫酤
    ˙ 暶ⴽ岤䠑J04"QQ4UPSF鸤䧭涸-(1-㉏겗
    

    View Slide

31. 5IBOLT
    㢵䎂〵涸2.-䥰欽玑䒭卺圓鏤鎙
    34$IJBOH!.01$0/ $$#:4"58
    

    View Slide