跨界的優雅 / Crossing Platform with Elegance

B3ecf4287d58054135af5d7b4d741021?s=47 Poren Chiang
November 01, 2015

跨界的優雅 / Crossing Platform with Elegance

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

B3ecf4287d58054135af5d7b4d741021?s=128

Poren Chiang

November 01, 2015
Tweet

Transcript

  1. 騗歲涸⮛꧉ 㢵䎂〵涸2.-䥰欽玑䒭卺圓鏤鎙 34$IJBOH!.01$0/ $$#:4"58

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

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

    㢵䎂〵玑䒭鏤鎙䌢鋅涸㉏겗莅㻜⡲倰岁
  4. 騗䎂〵ˋ 8SJUFPODF SVOFWFSZXIFSF

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

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

  7. 2UGSBNFXPSL 8JOEPXT"1* "OESPJE/%, J044%, 䎂〵 /FUXPSLJOH % 2U2VJDL 8FC,JU ⢿㥶

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

     ˙ 玑䒭焺〳伟䚍 TPVSDFQPSUBCMF
  9. It’s QML!

  10. ⴲ㒂2.-

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

  12. None
  13. import QtQuick 2.0 Rectangle { color: '#33b5e5' radius: 120 Text

    { anchors.centerIn: parent font.pixelSize: 24 text: "Hello, world!" } }
  14. None
  15. text: { var date = new Date() return ("<b>" +

    d.getHours() + "</b> 讫") }
  16. -JWF%FNP

  17. None
  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(-㜥兞 ˙ 醳꧹⯋⟝〳⟃欽Ⰹ䒊涸2U2VJDL$POUSPMT ˙ 亼⡂8$4QFD涸"1*〳⟃䒸Ⰵ♶㼱+4MJC ˙ 殹搭銴荈䊹ⵠ⛳僽〳⟃ 4*5$0/'SJFOETTUJDLFST

     $$#:/$34$IJBOH$+0,&3㣐⸔
  22. 眕⢿ 5ISFFKT–2.-

  23. None
  24. 㢵䎂〵佅䴂 ˙ 4ZNCJBO ˙ .FF(P)BSNBUUBO ˙ #MBDL#FSSZ ! ˙ 4BJMGJTI04

    ˙ 6CVOUV5PVDI ˙ 8JOEPXT ˙ 049 ˙ -JOVY9 ˙ "OESPJE "3.WW Y  ˙ J04 } } 2U2VJDL 2U2VJDL
  25. 矦㋲♲姿끐 ˙ 酤湡垦䎂〵涸4%, ˙ 管䧭湡垦䎂〵涸玑䒭 ˙ 駵㖈湡垦䎂〵♳

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

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

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