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

1. OwaNEXT
HanGee 先進 UI 研究組

2. OwaNEXT
開發先進的 UI 框架及工具

3. 讓不懂程式技術的設計師
可以短時間內快速打造出高品質的 UI
-- OwaNEXT

4. Even so
僅管如此

5. 基礎知識
你還是必需要懂一點點

6. 基礎知識
QML

7. 基礎知識
JavaScript

8. Anyway
總之

9. Simple is enough
簡單理解已足夠

10. 你的第一支 App
直接動手做

11. import QtQuick 2.0
import QtQuick.Controls 1.0
ApplicationWindow {
visible: true;
Rectangle {
anchors.fill: parent;
color: ‘white’;
}
}

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. Image {
x: 100;
y: 100;
width: 200;
height: 200;
source: ‘example.jpg’;
}

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. 可拖曳的清單
ListView

16. ListView {
anchors.fill: parent;
orientation: ListView.Vertical;
delegate: Rectangle {
width: parent.width;
height: 50;
color: bgcolor;
}
model: ListModel {
ListElement { bgcolor: ‘red’ }
…. ignore
}
}

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. 網格狀的排版
GridView

19. GridView {
anchors.fill: parent;
delegate: Rectangle {
width: 50;
height: 50;
color: bgcolor;
}
model: ListModel {
ListElement { bgcolor: ‘red’ }
…. ignore
}
}

20. 拼裝自己的元件
Assembly

21. Item {
width: 100;
height: 100;
Rectangle {
anchors.fill: parent;
color: ‘black’;
}
}

22. Item {
width: 100;
height: 100;
Rectangle { … }
Image {
id: icon;
anchors.fill: parent;
anchors.margins: 10;
anchors.bottomMargin: 20;
source: ‘hangee.jpg’;
}
}

23. Item {
width: 100;
height: 100;
Rectangle { … }
Image { … }
Text {
anchors.top: icon.bottom;
anchors.horizontalCenter: icon.horizontalCenter;
text: ‘HanGee’;
color: ‘white’;
}
}

25. 怎麼做？
App Launcher

26. 使用自己的元件替換即可
App Launcher

27. 振奮人心的動畫
Animation

28. SequentialAnimation {
running: true;
loops: Animation.Infinite;
NumberAnimation {
target: image;
properties: 'opacity';
from: 0;
to: 1;
duration: 1000;
easing.type: Easing.OutQuad;
}
}

29. SequentialAnimation {
running: true;
loops: Animation.Infinite;
NumberAnimation { ... }
NumberAnimation {
target: image;
properties: 'opacity';
from: 1;
to: 0;
duration: 1000;
easing.type: Easing.OutQuad;
}
}

30. 控制手機功能
OwaNEXT APIs

31. Launcher 會用到的 API
HanGee.PackageManager

32. getApps() 和 startApp()
HanGee.PackageManager

33. ● 取得應該顯示在 Launcher 介面上的 App 清單
HanGee.packageManager.getApps([ 'LAUNCHER' ]);
return: [ app1, app2, app3, … ]
● 執行指定 App
HanGee.packageManager.startApps(app);

34. https://github.com/HanGee/OwaNEXT
More About OwaNEXT

35. Need Your feedback
需要你的意見回饋

36. To Improve Our Training
幫助我們把課程做的更好

37. To Make People Be Able To Make App
讓更多人能開發 App 和設計 UI

38. han-gee.com
HanGee 國民機運動