QtQuick桌面应用开发指导 4)动态管理Note对象_B 5)外观加强 6)更多改进

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()

    }

//...

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)")

    })

}

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

}

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])

    }

}

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]);

        })

    }

}

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

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)

    }

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 }

        }

    }

//...

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 }

    }

 ]

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 }

    }

    ]

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

}

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()

//...

2

3

4

//...

//
defining a behavior when the height property changes

//
for the root element

Behavior
on height { NumberAnimation {} }

2

3

//...

//
setting the z order to 1 if the text area has the focus

z:
editArea.activeFocus ? 1:0

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()

    }

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

//...

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")

        }

    }

2

3

4

    TextEdit
{

        id:
editArea

        font.family:
window.webfont.name; font.pointSize: 13

//...