CHAPTER7 部署NotApp應用
現在我們要讓程序在典型的桌面環境中可用, 可部署; 如第一章所描述, 我們在QtCreator中使用QtQuick UI項目開發NoteApp程序; 這意味着qmlscene用來加載main.qml, 隨之讓NoteApp運行;
首先, 讓NoteApp可用的最簡單方案是創建一個package(包)將所有qml文件, qmlscense和一個可以運行qmlscense加載main.qml的簡單腳本bundle(捆紮)起來; 你需要參考每一個桌面平臺, 瞭解如何創建小腳本; 例如, 在Linux平臺, 你要使用bash shell腳本, 而Windows使用的是batch文件; 這個方案能很好工作, 也很直接, 但是你可能不希望把源代碼都一起發佈出去, 因爲你的程序現在使用的是專利代碼;
程序應該以二進制格式(binary format)發佈, 所有的qml都boundle在二進制文件中; 這可以幫助讓安裝過程更簡單, 用戶體驗(user experience)也更愉快;
因此, 我們要爲NoteApp創建一個可執行文件, 安裝使用都應該相當簡單; 這章中可以看到如何創建一個QtQuick程序, 把qml文件和圖片都boundle到一個可執行的二進制文件中; 另外, 我們也應該探索如何對QML使用Qt Resource System;
7.1 創建NoteApp Qt應用
目標是創建一個單個的NoteApp可執行二進制文件, 用戶可以運行它來加載NoteApp;
7.1.1 創建一個QtQuick程序
首先我們要使用QtCreator創建一個QtQuick程序, 確保在wizard(嚮導)裏面選擇 Built-in element only(for all platforms); 把程序命名爲 noteapp;
現在有了一個從wizard新建的項目, 注意有個 qtquick2applicationviewer項目生成; 生成的qtquick2applicationviewer項目是一個基本模板(template)程序, 用來讀取QML文件; 這個程序作爲一個非常通用的項目來部署QtQuick程序到設備和其他目標終端, 裏面包含爲這些部署目標設定的多個平臺特定(platform-specific)的代碼; 這裏不再詳細研究這些特定部分代碼;
然而, qtquick2applicationviewer還有某些古怪的地方限制了我們想要完成的目標; 這個程序設定程序員會將QML文件和可執行的二進制文件一起發佈; 這樣就不能使用Qt Resource System了, 但之後你會看到客服這個問題的方法;
對於noteapp下面, 這裏有個源文件main.cpp; 在main.cpp中, 你會看到view對象--QtQuick2ApplicationViewer類是如何被用來調用方法: QtQuick2ApplicationViewer::setMainQmlFile()加載main.qml;
// main.cpp
|
1
2
3
4
5
6
7
8
|
int main(int argc, char *argv[]){ QGuiApplication
app(argc, argv); QtQuick2ApplicationViewer
viewer; viewer.setMainQmlFile(QStringLiteral("qml/noteapp/main.qml")); viewer.showExpanded(); return app.exec();} |
注意, 有個基本的main.qml由Qt Quick Application wizard生成, 會替代原先爲NoteApp創建的main.qml;
noteapp項目的文件夾結構很直接易懂;
noteapp--項目根目錄
-qml: 包含QML文件
-qtquick2applicationviewer [qmlapplicationviewer]: 自動生成的項目, 用來加載QML文件
-noteapp: 項目文件
-main.cpp: 創建Qt Application的C++文件
我們要把QML文件包括fonts和images目錄拷貝到新建的noteapp項目的在qmls目錄裏; QtCreator會識別項目文件夾和文件的變化, 把這些顯示在project view裏面; 如果它沒有顯示, 右鍵點擊project中的QML圖標選擇 Add Existing Files然後添加文件;
Note 要保證把所有現存的文件包括在nodeDB.js中調用的圖片都包含進來;
這時, 我們可以build(構建)和運行項目, 看看是否一切都正常; 在構建noteapp項目前, 確保項目正確的配置以及就緒; 參考 Configure Project文檔;
一旦程序成功構建, 一個可執行的二進制文件"noteapp"應該在項目根目錄創建出來; 如果在系統中把Qt正確配置好了, 你可以雙擊文件來運行它;
7.1.2 使用Qt Resource System來存儲QML文件和圖片
我們創建了一個可執行文件, 加載QML文件來運行程序; 就像你在main.cpp中看到的, viewer對象通過傳遞相對地址來加載main.qml; 另外, 打開noteapp.pro文件來理解部署和構建設置:
|
1
2
3
4
5
|
#
Add more folders to ship with the application, herefolder_01.source
= qml/noteappfolder_01.target
= qmlDEPLOYMENTFOLDERS
= folder_01//... |
看起來它確實想要把QML文件和可執行文件一起發佈, 但這不是我們想要的;
Qt提供了一個很直觀的 Resource System可以和QML無縫連接; 我們要創建一個resource文件--noteapp.qrc, 放在根(root)項目中, 這樣我們可以把QML和圖片文件加進去; 參考 Create a Resource File;
爲了可以使用新建的resource文件--noteapp.qrc, 要在noteapp.pro和main.cpp中做最小的改動;
先把note.pro中的部署步驟註釋掉:
|
1
2
3
4
|
#
Add more folders to ship with the application, here#folder_01.source
= qml/noteapp#folder_01.target
= qml#DEPLOYMENTFOLDERS
= folder_01 |
在main.cpp中, 看到QtQuick2ApplicationViewer::setMainQmlFile()方法使用main.qml的相對路徑來調用;
|
1
2
3
4
5
6
7
8
|
//
qtquick2applicationviewer.cpp//...void QtQuick2ApplicationViewer::setMainQmlFile(const QString
&file){ d->mainQmlFile
= QtQuick2ApplicationViewerPrivate::adjustPath(file); setSource(QUrl::fromLocalFile(d->mainQmlFile));}//... |
QtQuick2ApplicationViewer類繼承自QQuickView, 它用來加載和顯示QML文件; QtQuick2ApplicationViewer::setMainQmlFile()方法沒有爲使用resource[資源文件]來優化, 它是在調用setSource()方法的時候調整了QML文件的路徑[不同平臺的路徑格式];
克服問題的最簡單方案是在main.cpp裏, 對viewer對象直接調用setSource(), 但這時我們將main.qml作爲resource文件的一部分來傳遞;
// main.cpp
|
1
2
3
4
5
6
7
8
|
int main(int argc, char *argv[]){ QGuiApplication
app(argc, argv); QtQuick2ApplicationViewer
viewer; viewer.setMainQmlFile(QStringLiteral("qml/noteapp/main.qml")); viewer.showExpanded(); return app.exec();} |
QML文件的使用沒有其他的地方再需要修改, 包括我們用image文件, font文件, 因爲文件的路徑現在是相對的, 會指向resource內部的文件系統(filesystem); 所以現在我們可以在QtCreator內構建項目, 產生一個二進制可執行文件, bundle(包含)了QML, image和font文件;
7.1.3 爲程序設置圖標和標題
推薦一個圖像方面的改進: 爲項目設置一個圖標(icon); 這樣可以在桌面平臺上唯一地識別你的項目;
在noteapp文件夾裏, 有一些PNG[Portable Network Graphics] 文件和SVG[Scalable Vector Graphics] 文件; 這些image文件可以用來爲程序設置圖標, 根據圖標大小有64x64和80x80的, 或者是矢量化的(vectorized);
考慮到這些圖標文件在不同平臺上的細節, 你可以參考qtquick2applicationviewer.pri文件; 更多細節可以參考文檔 Setting the Application Icon (http://qt-project.org/doc/qt-4.8/appicon.html);
在viewer上調用setWindowIcon()方法來設置程序窗口的icon;
|
1
2
3
4
5
6
7
|
//...main.cpp QScopedPointer<QApplication>
app(createApplication(argc, argv)); QScopedPointer<QmlApplicationViewer>
viewer( QmlApplicationViewer::create()); viewer->setWindowIcon(QIcon("noteapp80.png"));//... |
如果程序需要默認的窗口標題(window-title), 使用setWindowTitle():
|
1
|
viewer->setWindowTitle(QString("Keep
Your Notes with NoteApp!")); |
現在NoteApp可以準備發佈和部署到不同的桌面平臺上了;
7.1.4 部署NoteApp
NoteApp是一個典型的Qt程序, 你需要決定是靜態地還是動態地鏈接Qt; 另外, 每個桌面平臺對於鏈接(linking)配置都有特定的要求;
可以從文檔 Deploying Qt Applications (http://qt-project.org/doc/qt-4.8/deployment.html )中找到關於不同平臺的部署信息;
下一步
對本教程的總結;
---7End---
CHAPTER8 課程學習和擴展閱讀
本教程展示瞭如何使用QtQuick創建一個應用, 以及如何在桌面環境上部署; 我們一步步地開發了NoteApp程序, 學到了QML語言的各個方面, 以及它對於開發現代流暢(fluid)UI和保持代碼簡潔, 應用各種開發技術的潛力;
這裏學到了一些使用各種QML類型的最佳實踐, 覆蓋了一些有趣的題目:
- Animation和State
- 使用Javascript來強化功能
- 動態的QML對象管理
- 本地數據庫存儲
- 讓程序準備好可以部署
現在你應該已經具備進一步開發NoteApp和增強UI的知識和信心了, 你可以嘗試去發現更多在本教程沒有提及的QML和Qt Quick特性;
QtQuick是一個快速發展中的技術, 可以在各種不同的軟件開發產業和行業中適用, 你可以從最新的Qt Document中找到相關的幫助信息;
---8End---
---END---YCR---