OwaNEXT

842 views

Published on

OwaNEXT is a project of HanGee, it aim to provide a easy way to design mobile UI with QML and JavaScript.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
842
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

OwaNEXT

  1. 1. OwaNEXT HanGee 先進 UI 研究組
  2. 2. OwaNEXT 開發先進的 UI 框架及工具
  3. 3. 讓不懂程式技術的設計師 可以短時間內快速打造出高品質的 UI -- OwaNEXT
  4. 4. Even so 僅管如此
  5. 5. 基礎知識 你還是必需要懂一點點
  6. 6. 基礎知識 QML
  7. 7. 基礎知識 JavaScript
  8. 8. Anyway 總之
  9. 9. Simple is enough 簡單理解已足夠
  10. 10. 你的第一支 App 直接動手做
  11. 11. import QtQuick 2.0 import QtQuick.Controls 1.0 ApplicationWindow { visible: true; Rectangle { anchors.fill: parent; color: ‘white’; } }
  12. 12. Rectangle { x: 100; y: 100; width: 200; height: 200; radius: 5; opacity: 0.5; gradient: Gradient { GradientStop { position: 0.0; color: ‘#000000’ } GradientStop { position: 1.0; color: ‘#ffffff’ } } }
  13. 13. Image { x: 100; y: 100; width: 200; height: 200; source: ‘example.jpg’; }
  14. 14. Text { font.bold: true; font.family: ‘Droid Sans’; font.italic: true; font.underline: true; font.strikeout: true; font.pointSize: 16; lineHeight: 2; horizontalAlignment: Text.AlignHCenter; verticalAlignment: Text.AlignVCenter; text: ‘Hello World!’; }
  15. 15. 可拖曳的清單 ListView
  16. 16. ListView { anchors.fill: parent; orientation: ListView.Vertical; delegate: Rectangle { width: parent.width; height: 50; color: bgcolor; } model: ListModel { ListElement { bgcolor: ‘red’ } …. ignore } }
  17. 17. ListModel { ListElement { bgcolor: ‘red’ } ListElement { bgcolor: ‘yellow’ } ListElement { bgcolor: ‘white’ } ListElement { bgcolor: ‘blue’ } ListElement { bgcolor: ‘green’ } ListElement { bgcolor: ‘orange’ } ListElement { bgcolor: ‘black’ } ListElement { bgcolor: ‘gray’ } }
  18. 18. 網格狀的排版 GridView
  19. 19. GridView { anchors.fill: parent; delegate: Rectangle { width: 50; height: 50; color: bgcolor; } model: ListModel { ListElement { bgcolor: ‘red’ } …. ignore } }
  20. 20. 拼裝自己的元件 Assembly
  21. 21. Item { width: 100; height: 100; Rectangle { anchors.fill: parent; color: ‘black’; } }
  22. 22. Item { width: 100; height: 100; Rectangle { … } Image { id: icon; anchors.fill: parent; anchors.margins: 10; anchors.bottomMargin: 20; source: ‘hangee.jpg’; } }
  23. 23. Item { width: 100; height: 100; Rectangle { … } Image { … } Text { anchors.top: icon.bottom; anchors.horizontalCenter: icon.horizontalCenter; text: ‘HanGee’; color: ‘white’; } }
  24. 24. 怎麼做? App Launcher
  25. 25. 使用自己的元件替換即可 App Launcher
  26. 26. 振奮人心的動畫 Animation
  27. 27. SequentialAnimation { running: true; loops: Animation.Infinite; NumberAnimation { target: image; properties: 'opacity'; from: 0; to: 1; duration: 1000; easing.type: Easing.OutQuad; } }
  28. 28. SequentialAnimation { running: true; loops: Animation.Infinite; NumberAnimation { ... } NumberAnimation { target: image; properties: 'opacity'; from: 1; to: 0; duration: 1000; easing.type: Easing.OutQuad; } }
  29. 29. 控制手機功能 OwaNEXT APIs
  30. 30. Launcher 會用到的 API HanGee.PackageManager
  31. 31. getApps() 和 startApp() HanGee.PackageManager
  32. 32. ● 取得應該顯示在 Launcher 介面上的 App 清單 HanGee.packageManager.getApps([ 'LAUNCHER' ]); return: [ app1, app2, app3, … ] ● 執行指定 App HanGee.packageManager.startApps(app);
  33. 33. https://github.com/HanGee/OwaNEXT More About OwaNEXT
  34. 34. Need Your feedback 需要你的意見回饋
  35. 35. To Improve Our Training 幫助我們把課程做的更好
  36. 36. To Make People Be Able To Make App 讓更多人能開發 App 和設計 UI
  37. 37. han-gee.com HanGee 國民機運動

×