QtQuick桌面应用程序开发指南 4)动态管理Note对象_B 5)加强外观 6)许多其他的改进
4.2.2 Stateless(不管状态)JavaScript库
为了让开发轻松点, 使用一个JavaScript接口来和数据库交互是个好主意, 它在QML中提供了方便的方法;
在QtCreator中创建一个新的JavaScript文件 noteDB.js, 保证选择了 State Library选项; 这样使得noteDB.js用起来像一个库, 提供了stateless的helper方法; 这样,在每一个QML组件 import noteDB.js以及使用它的时候, 就仅仅有一份实例被载入和使用; 这也保证了仅仅有一个全局变量用来存储数据库实例: _db;
Note Non-stateless(非状态无关的)JavaScript文件在导入一个QML组件的时候非常实用, 能够对那个组件运行操作, 全部的变量仅仅有在那份context(上下文)中有效; 每次import都会创建一个独立的JavaScript文件的实例;
noteDB.js应该提供以下的功能:
- 打开/创建一个本地数据库实例
- 创建必须的数据库table(表格)
- 从数据库读取notes
- 删除全部的notes
接下来会看到 关于noteDB.js中的方法怎样被实现的很多的细节--读取, 存储note item到数据库的实现; 先考虑以下的方法实现:
- function openDB() - 假设数据库不存在, 就创建一个, 存在就打开它;
- function createNoteTable() - 假设note table不存在就创建note table; 这种方法仅仅会在 openDB()中调用;
- function clearNoteTable() - 从note table中移除全部的行(row);
- readNotesFromPage(markerId) - 这个helper方法读取全部和特定markerId相关联的note, 返回一个dictionary(字典)类型的数据;
- function saveNotes(noteItems, markerId) - 用来在数据库中保存note item; noteItem參数代表一个note item的list(列表), markerId代表note item隶属的那个对应的page;
Note 全部这些JavaScript方法使用Qt Quick Local Storage API来获取数据库, 声明语句(statement) import QtQuick.LocalStorage 2.0 as Sql, 要写在 noteDB.js的開始;
4.2.3 读取和存储Note
实现了noteDB.js之后, 能够用法来读取和存储note了;
一个好的做法是在main.qml文件里, 在初始化的时候或打开数据库连接的时候才去调用; 这样我们能够使用定义在noteDB.js中的JavaScript方法而不会又一次初始化(reinitializing)数据库;
在main.qml里面导入noteDB.js 和 QtQuick.LocalStorage 2.0, 有个问题是什么时候调用 openDB()方法; QML提供了helpful attached signal: onCompleted()和 onDestruction(), 会在Component被全然载入或全然销毁的时候各自emit(发送);
// main.qml
1
2
3
4
5
6
7
8
9
|
import
QtQuick 2.0 import "noteDB.js" as
NoteDB Item
{ //
this signal is emitted upon component loading completion Component.onCompleted:
{ NoteDB.openDB() } //... |
以下是openDB方法实现, 它调用 openDatabaseSync()方法来创建数据库, 之后调用 createNoteTable()方法来创建note表;
//noteDB.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.pragma
library .import
QtQuick.LocalStorage 2.0 as Sql //
declaring a global variable for storing the database instance var _db function openDB()
{ print( "noteDB.createDB()" ) _db
= openDatabaseSync( "StickyNotesDB" , "1.0" , "The
stickynotes Database" ,
1000000); createNoteTable(); } function createNoteTable()
{ print( "noteDB.createTable()" ) _db.transaction( function (tx)
{ tx.executeSql( "CREATE
TABLE IF NOT EXISTS note (noteId
INTEGER PRIMARY KEY AUTOINCREMENT, x
INTEGER, y
INTEGER, noteText
TEXT, markerId
TEXT)" ) }) } |
在main.qml里面, 初始化了数据库, 安全地開始从Page组件中载入Note item; 上面我们提到了 readNotesFromPage(markerId)方法, 返回一个data array(数组)list (參照script world--脚本世界里的dictionary), 每一个数组代表数据库中的一行--note的数据;
//noteDB.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//... function readNotesFromPage(markerId)
{ print( "noteDB.readNotesFromPage()
" +
markerId) var noteItems
= {} _db.readTransaction( function (tx)
{ var rs
= tx.executeSql( "SELECT
FROM note WHERE markerId=? ORDER
BY markerid DESC" ,
[markerId] ); var item for ( var i=0;
i< rs.rows.length; i++) { item
= rs.rows.item(i) noteItems[item.noteId]
= item; } }) return noteItems } |
Page组件会读取note然后创建对应的QML note对象;
// Page.qml
1
2
3
4
5
6
7
8
9
10
11
|
//... //
when the component is loaded, call the loadNotes() //
function to load notes from the database Component.onCompleted:
loadNotes() //
a Javascript helper function that reads the note data from database function loadNotes()
{ var noteItems
= NoteDB.readNotesFromPage(markerId) for ( var i in noteItems)
{ newNoteObject(noteItems[i]) } } |
我们能够看到 newNoteObject()方法在之前的Page.qml定义, 它得到一个data数组作为參数, 实际上就是 x, y, noteText, markerId和 noteId属性的值;
Note 注意note表的name域(field)和Note组件的属性一样; 这能够帮助我们把table行的数据作为參数传递, 创建note QML对象;
如今我们实现了从数据库载入Note item的方法, 下一个逻辑步骤是实现一个将note存储到DB中的方法; PagePanel组件是负责创建Page item的, 因此它应该能够从每张page上读取note, 然后调用 saveNote() JS方法来存储note;
//noteDB.js
1
2
3
4
5
6
7
8
9
10
11
12
|
//... function saveNotes(noteItems,
markerId) { for ( var i=0;
i<noteItems.length; ++i) { var noteItem
= noteItems[i] _db.transaction( function (tx)
{ tx.executeSql( "INSERT
INTO note (markerId, x, y, noteText) VALUES(?
[markerId,
noteItem.x, noteItem.y, noteItem.noteText]); }) } } |
首先我们定义一个属性alias能够将Note item暴露出来, 这些item是作为在Page组件中container的children而创建的;
// Page.qml
1
2
3
4
5
|
//... //
this property is used by the PagePanel component //
for retrieving all the notes of a page and storing //
them in the Database. property
alias notes: container.children |
在PagePanel中实如今DB中保存note的功能;
// PagePanel.qml
1
2
3
4
5
6
7
8
9
10
11
|
//... Component.onDestruction:
saveNotesToDB() //
a JavaScript function that saves all notes from the pages function saveNotesToDB()
{ //
clearing the DB table before populating with new data NoteDB.clearNoteTable(); //
storing notes for each individual page NoteDB.saveNotes(personalpage.notes,
personalpage.markerId) NoteDB.saveNotes(funpage.notes,
funpage.markerId) NoteDB.saveNotes(workpage.notes,
workpage.markerId) } |
为了降低代码复杂度, 我们在保存note之前清楚DB中全部的数据; 这样能够不用谢代码来更新现存的Note item;
在结束本章前, 用户可创建和删除note, 程序也能够自己主动保存和载入note;
下一步
下一章介绍一些美丽的动画, 以及实现的步骤和技巧;
---4End---
CHAPTER5 外观加强
NoteApp的UI能够看作依照功能和用户交互实现的; 事实上还有非常大的进步空间, 让UI更吸引用户; QML设计成一种声明式语言, 记得用动画和UI的流畅过度;
这一章会一步步实现动画, 让NoteApp感觉更优美(fluid); QML提供了一组QML类型以各种方式实现动画; 这一章会介绍一些新的类型, 在QML组件中使用它们, 让UI更加流畅;
整体上, 本章覆盖以下几点:
- 介绍animation(动画)和transition(过渡)效果;
- 新的QML类型: Behavior, Transition, 各种Animation元素;
- 使用各种动画强化NoteApp的QML组件;
5.1 NoteToolbar动画
我们来看看怎样改进Note组件, 加入一些基于用户交互的行为; Note有一个toolbar, 能够用Delete tool删除笔记; toolbar是用来按下鼠标四处拖拽note用的;
一个改进是能够让Delete tool仅仅有在须要的时候可见; 比如, 在toolbar上悬停(hover)的时候让Delete工具可见, 使用 fade-in/fade-out(渐入渐出)效果更美丽;
Note opacity属性的值是从parent到child item传播的(propagated); [属性继承]
Behavior类型同意我们定义一个基于item的属性变化的行为;
// NoteToolbar.qml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
//... MouseArea
{ id:
mousearea anchors.fill:
parent //
setting hoverEnabled property to true //
in order for the MouseArea to be able to get //
hover events hoverEnabled: true } //
using a Row element for laying out tool //
items to be added when using the NoteToolbar Row
{ id:
layout layoutDirection:
Qt.RightToLeft anchors
{ verticalCenter:
parent.verticalCenter; left:
parent.left; right:
parent.right leftMargin:
15; rightMargin:
15 } spacing:
20 //
the opacity depends if the mousearea //
has the cursor of the mouse. opacity:
mousearea.containsMouse ? 1 : 0 //
using the behavior element to specify the //
behavior of the layout element //
when on the opacity changes. Behavior
on opacity { //
using NumberAnimation to animate //
the opacity value in a duration of 350 ms NumberAnimation
{ duration: 350 } } } //... |
上面代码能够看到, 我们启用MouseArea的hoverEnabled属性, 接收鼠标悬停事件; 之后, 我们能够把Row类型的opacity切换到0, 假设MouseArea类型没有悬停(hovered)就设为1; MouseArea的containsMouse属性用来决定opacity的值;
这样Behavior类型在Row中被创建出来, 基于opacity属性而定义它的行为; 当opacity改变时, NumberAnimation会被应用;
NumberAnimation类型应用基于一个数字值的改变, 我们对Row的opacity属性, 在350毫秒时长内显示它;
Note NumberAnimation类型是继承自PropertyAnimation, 它有一个 Easing.Linear作为 easing curve动画的默认值; [动画效果, 执行轨迹等...]
下一步
我们能够看到怎样使用Transition和其它QML Animation实现动画效果;
5.2 使用State和Transition
前面我们看到的定义简单的话的技巧是基于属性变化的, 使用了 Behavior和 NumberAnimation;
当然, 也有其它动画是依赖于一组属性变化的--能够用State实现;
如今来看看如何进一步实现NoteApp的UI;
Marker item看起来在用户交互的时候是静态的; 假设基于用户交互的不同场景给它加上一点动画会如何? 另外, 我们能够能够让当前激活的marker和当前的page对用户来说看起来更明明白;
5.2.1 Marker Items加上动画
我们差点儿相同能够总结一下在用户交互时改进Marker item的各种可能的场景, 下面是user case(用户用例)描写叙述:
- 当前激活的Marker item应该更加明显; 用户点击的时候, 一个marker要变成激活状态; 激活的marker会略微变大, 能够从左边向右边滑动一些;(像个抽屉)
- 当用户鼠标悬停在一个marker上面, marker从左到右滑动, 但不会像激活的marker一样滑动;
考虑上述场景, 我们须要在Marker和MarkerPanel组件上进行工作;
当独当上面关于行为需求的描写叙述(左到右的滑动效果), 马上出现的想法是改变 x的属性, 由于它代表了item在X-axis(轴)上的位置; 另外, 由于Marker item应该要知道它自己是否是当前激活的, 因此加入一个新的属性 active;
为Marker组件引入两个新的state, 代表上面描写叙述的行为:
- hovered: 当用户鼠标悬停的时候会更新marker的x属性值;
- selected: 当marker被激活, 即用户点击的时候, 会更新x属性值;
// Marker.qml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
//
this property indicates whether this marker item //
is the current active one. Initially it is set to false property
bool active: false //
creating the two states representing the respective //
set of property changes states:
[ //
the hovered state is set when the user has //
the mouse hovering the marker item. State
{ name: "hovered" //
this condition makes this state active when:
mouseArea.containsMouse && !root.active PropertyChanges
{ target: root; x: 5 } }, State
{ name: "selected" when:
root.active PropertyChanges
{ target: root; x: 20 } } ] //
list of transitions that apply when the state changes transitions:
[ Transition
{ to: "hovered" NumberAnimation
{ target: root; property: "x" ;
duration: 300 } }, Transition
{ to: "selected" NumberAnimation
{ target: root; property: "x" ;
duration: 300 } }, Transition
{ to: "" NumberAnimation
{ target: root; property: "x" ;
duration: 300 } } ] |
因此我们声明两个state代表对应基于用户行为的属性变化; 每一个state绑定到when属性所描写叙述的情况中;
Note 对于MouseArea的containsMouse属性, hoverEnabled属性必须设为true;
Transition是用来在state之前切换时定义item的行为的; 我们能够在state激活的时候, 给变化的属性定义各种动画
Note item的默认state是一个空的string--("");
在MarkerPanel组件里, 我们在它被点击的时候必须设置avtive属性为true; 參考MarkerPanel.qml;
5.2.2 给PagePanel加入Transition
在PagePanel组件, 我们使用state来管理page之间的navigation(导航); 加入transition是自然的思路; 因为我们在每一个state里面改变了opacity属性, 能够加入给全部的state加入Transition来依据opacity的值执行NumberAnimation, 创建fade-in和fade-out效果;
// PagePanel.qml
1
2
3
4
5
6
7
8
9
10
|
//... //
creating a list of transitions for //
the different states of the PagePanel transitions:
[ Transition
{ //
run the same transition for all states from: "" ;
to: "*" NumberAnimation
{ property: "opacity" ;
duration: 500 } } ] |
Note 一个item的opacity值也会被传播(propagated)到它的child元素;
下一步
进一步改进UI;
---5End---
CHAPTER6 很多其它改进
这一阶段, 能够觉得NoteApp的特性完毕, UI也符合需求; 只是, 这里还有非常大空间改进, 尽管不是最重要(minor)但能够使得程序更美丽, 以及准备部署(deployment);
这一章有些小的改进, 也有些新的主意和特性加入进来; 当然, 我们能够鼓舞继续开发NoteApp, 也许又一次设计整个UI, 引入很多其它特性;
这里有一个要点列表:
- 很多其它Javascript用来加入功能;
- 使用QML Item的z ordering(z轴次序);
- 使用自己定义的本地字体;
6.1 加强Note Item的功能
一个巧妙的(nifty)功能能够让note依据输入的text而变长; 为了简化, 当很多其它text输入时, 它会将text折叠(wrap)起来, 适应note宽度, 在垂直方向上将note变长;
Text类型有一个paintedHeight属性给出text在屏幕上绘制时的确切高度; 依据这个值, 我们能够添加或降低note自身的高度;
先定义一个Javascript helper方法, 为Item计算height属性的值, 它会放在Note组件的顶层;
// Note.qml
1
2
3
4
5
6
7
8
9
10
|
//
JavaScript helper function that calculates the height of //
the note as more text is entered or removed. function updateNoteHeight()
{ //
a note should have a minimum height var noteMinHeight
= 200 var currentHeight
= editArea.paintedHeight + toolbar.height +40 root.height
= noteMinHeight if (currentHeight
>= noteMinHeight) root.height
= currentHeight } |
因为 updateNoteHeight()方法会依据editArea的paintedHeight属性更新root的height, 我们须要在paintedHeight变化的时候调用这种方法;
// Note.qml
1
2
3
4
5
6
7
8
|
TextEdit
{ id:
editArea //... //
called when the painterHeight property changes //
then the note height has to be updated based //
on the text input onPaintedHeightChanged:
updateNoteHeight() //... |
Note 每一个属性有一个notifier signal(通知信号), 每次property改变的时候会被发送(emit);
updateNoteHeight() JS方法会改变height属性, 所以我们能够使用Behavior定义一个行为;
// Note.qml
1
2
3
4
|
//... //
defining a behavior when the height property changes //
for the root element Behavior
on height { NumberAnimation {} } |
下一步
展示怎样使用Item的z属性来正确地为note排序;
6.2 Note排序
Page里面的Note无法知道用户当前正在使用哪一个note; 默认情况, 全部创建出来的Note item都有一样的z属性默认值, 这样的情况下, QML为item创建默认的栈次序, 依赖于哪一个item先被创建;
所须要的行为应该是依据用户交互来改变note的次序; 当用户点击note toolbar, 或者開始编辑note的时候, 当前的note应该跑到前面而不是躲在其它note以下; 这能够通过改变z值来做到, z值比其它的note高就可以;
// Note.qml
1
2
3
|
//... //
setting the z order to 1 if the text area has the focus z:
editArea.activeFocus ?
|
activeFocus属性在editArea有输入焦点(input focus)的时候变为true; 因此让z属性依赖editArea的activeFocus会比較安全; 然后, 我们须要保证editArea在用户点击toolbar的时候有输入焦点; 我们在NoteToolbar组件中定义一个pressed()信号, 在鼠标press的时候发送;
// NoteToolbar.qml
1
2
3
4
5
6
7
8
9
10
11
|
//... //
this signal is emitted when the toolbar is pressed by the user signal
pressed() //
creating a MouseArea item MouseArea
{ id:
mousearea //... //
emitting the pressed() signal on a mouse press event onPressed:
root.pressed() } |
在MouseArea中的onPressed信号handler中, 我们发送NoteToolbar(root)的pressed()信号;
NoteToolbar的pressed()信号在Note组件中会处理;
// Note.qml
1
2
3
4
5
6
|
//
creating a NoteToolbar that will be anchored to its parent NoteToolbar
{ id:
toolbar //
setting the focus on the text area when the toolbar is pressed onPressed:
editArea.focus = true //... |
上面代码中, 我们将editArea的focus属性设为true, editArea会接收到输入焦点; 这样activeFocus属性变为true, 触发(trigger)z属性值的变化;
下一步
如何载入以及使用一个自己定义的本地font(字体)文件;
6.3 载入自己定义字体
在现代程序中使用部署一个自己定义的font而不依赖系统font是非经常见的方式; 对于NoteApp, 我们想要用QML提供的方法做同样的事情;
FontLoader类型让你能够通过名字或URL路径来载入font; 由于载入的font能够被整个程序广泛使用, 我们建议在main.qml中载入它, 然后在其它组件中使用;
// main.qml
1
2
3
4
5
6
7
8
9
10
11
|
//... //
creating a webfont property that holds the font //
loading using FontLoader property var webfont:
FontLoader { id:
webfontloader source: "fonts/juleeregular.ttf" onStatusChanged:
{ if (webfontloader.status
== FontLoader.Ready) console.log( "font----Loaded" ) } } |
这样我们已经为window item创建了一个webfont属性; 这个属性能够安全地在其它的组件中使用, 能够在editArea的Note组件中使用;
// Note.qml
1
2
3
4
|
TextEdit
{ id:
editArea font.family:
window.webfont.name; font.pointSize: 13 //... |
要设置editArea的font, 使用font.family属性; 通过window, 我们使用它的webfont属性来获取font名字, 用来设置;
下一步
将NoteApp准备好部署的细节;
---6End---
---TBC---YCR---