軟件工程結(jié)對作業(yè)

四則運算器界面設計

康鑫? PB16060203

婁雨禛? PB16060356

項目內(nèi)容鏈接：http://www.cnblogs.com/silent-zlv/p/8684979.html

?

一、項目介紹

　　本次作業(yè)的設計比較有意思。每組隨機選擇“計算核心”和“用戶界面”中的一個，然后進行拼接整合。

　　對面將要完成的“用戶界面設計”，我們兩個都是完全的初學者。經(jīng)過初步了解，我們采用了在C++下的備受好評的集成UI軟件：Qt。

　　“用戶界面設計”的作用是充當一個數(shù)據(jù)傳輸渠道，實現(xiàn)“用戶數(shù)據(jù)”和“計算核心”數(shù)據(jù)的交互。這個交互的關鍵點和難點就在于交互接口的設計。如何獲取數(shù)據(jù)，又如何發(fā)送數(shù)據(jù)，將是我們將要面臨的最大難題。此外，由于我們都是初次接觸UI設計，還要大量了解C++中涉及的圖形界面接口在Qt中的使用。

?

二、進度規(guī)劃與完成情況?

進度規(guī)劃	計劃	實際	說明
初步確立軟件布局 【合作】	20 min	20 min	我們的軟件布局分為以下主界面引導下的五個模塊：參數(shù)設定、答題窗口、錯題記錄、歷史記錄、成績單。
主界面設計 【康鑫】	180 min	150 min	我們的主界面很簡單，引導用戶做出五種選擇：開始答題、查看錯題、查看歷史記錄、查看成績、退出答題系統(tǒng)。
參數(shù)設定 界面設計 【康鑫】	180 min	180 min	這是一個較為復雜的界面。在這里，用戶可以自由地選擇生成的問題數(shù)、每個運算表達式的運算符數(shù)目、操作數(shù)的范圍、操作數(shù)的精度、運算表達式涉及的運算類型，然后進入答題界面。
答題界面設計 【康鑫】	180 min	180 min	?　　在答題界面中，用戶被要求在一定的時間內(nèi)答完每一道題。用戶每答完一題，就能得知本題自己是否答對。用戶還能知道自己的答題進度，對自己的答題情況有一個把握。答完指定數(shù)量的問題后，返回主界面。
錯題記錄 界面設計 【合作】	120 min	60 min	?　　錯題記錄界面展示了用戶所有做錯的題目。
歷史記錄 界面設計 【合作】	120 min	60 min	?　　歷史記錄界面展示了用戶所有做過的題目。
成績單 界面設計 【合作】	240 min	60 min	?　　成績單界面將根據(jù)用戶的做題情況，給出一個答題的正確率，并將用戶在各個運算符中出錯的頻率做一個統(tǒng)計，讓用戶了解自己在哪個運算符出錯的頻率較高，從而在下一個階段進行更有針對性的訓練。
利用DLL 與CORE組對接 【康鑫】	180 min	180 min	?　　這是本次作業(yè)的一個重點。調(diào)用過程并不復雜，但在完全陌生的情況下，了解DLL調(diào)用并進行使用花費了一番時間。我們采用了DLL的隱式調(diào)用。
界面優(yōu)化調(diào)整軟件漏洞修復 【合作】	360 min	1800 min	?　　這是一個永無止境的過程。軟件界面的優(yōu)化不僅僅在于讓界面更加美觀合理，還在于讓界面之間的跳轉(zhuǎn)方式更加人性化，使用戶更便于操作。而漏洞修復則涉及到反復地粗暴嘗試。通過今早地將我們的軟件推送給用戶讓他們以自己的方式隨意調(diào)試，能幫助我們發(fā)現(xiàn)更多的漏洞。

?

三、UI界面展示與分析

　　第一代UI：實現(xiàn)基本功能，沒有考慮任何的界面美化

　　主界面

　　

　　參數(shù)設定界面

　　

　　答題界面

　　

　　錯題記錄界面

　　

　　歷史記錄界面

　　

　　成績單界面

　　

　　第一代UI的不足之處：

　　1. 按鈕的布局位置不夠合理，如主界面的布局、參數(shù)設定界面的布局等等。

　　2. 只采用了最原始的字體，界面無美感可言。

?

　　第二代UI：完善功能，修復BUG，進行界面的布局與美化

　　主界面

　　

　　參數(shù)設定界面

　　

　　答題界面

　　

　　歷史記錄界面

　　

　　成績單界面

　　

　　在第一代UI的基礎上，我們進行了較多的BUG修復與界面優(yōu)化。它們具體包括以下內(nèi)容。

　　BUG修復部分

　　1.修復了多次做題，成績高于100的問題

　　2.修復了未答題時成績出現(xiàn)負數(shù)的問題

　　3.修復了退出做題系統(tǒng)，卻仍然彈出“做題時間到”窗口的問題

　　4.修復了用戶答案輸入比正確答案還要精確，卻被判錯的問題

　　5.修復了用戶不輸入答案，正確答案為0，仍然被判對的問題

　　6.修復了用戶在提交問題答案后馬上退出答題系統(tǒng)，改題目沒有被統(tǒng)計的問題

　　界面美化部分

　　1.各個窗口的按鈕、文本框布局

　　2.加入Logo，使主界面煥然一新

　　3.合并“錯題界面”和“歷史記錄界面”，并采用表格形式展示，更為清晰美觀.

　　4.為適應低分辨率電腦做了界面優(yōu)化

　　5.增添了各個子窗口的窗口標簽

?

四、項目開發(fā)的困惑與心得

　　1.由于對Qt完全陌生，上手研究花了好一番功夫。這其中包括C++相關語法的學習和Qt軟件本身語法的學習。其實對軟件本身的學習也是實際使用過程中很重要的部分，這個過程不容小視，但我們也需要盡可能壓縮這一部分的實踐，從而把精力更有效地投入到實際編程創(chuàng)作上來。在實際開發(fā)過程中，要采取“敏捷”原則，學一點做一點，這樣才能盡可能不在軟件本身上化過多的工夫，從而耽擱了工程的實際進行。

　　2.在對接過程中，我們用的是DLL隱式調(diào)用。DLL對我們來說是完全陌生的，也是從頭學起。在Qt添加DLL文件進行編譯時，有時會碰到許多莫名其妙的錯誤一直存在，比如“找不到core.lib”，而我們的確吧這個文件加入進來了。這個時候，唯一可行的解決方案是，將DEBUG文件夾整個刪除，然后重新編譯生成文件夾，再添加DLL文件。網(wǎng)上也有很多人碰到這樣的問題，我們只是用這個看似很玄乎的做法，卻并不知道背后的原因，有待以后繼續(xù)探究。

　　3.在結(jié)對編程過程中，我們先是分開來各自編程，而在中后期進入“駕駛員+領航員”的合作編程模式。這是因為，一開始我們對Qt開發(fā)環(huán)境都不熟悉，即使兩個人一起編程，效率也不會很高。而在中后期，兩個人都對這個環(huán)境有了一些了解，這樣，轉(zhuǎn)而進入合作編程模式，就能互相彌補對方想法的不足之處，進行更高質(zhì)量代碼的編寫。

　　4.本次結(jié)對編程，我們得到了一個人編程體會不到的“優(yōu)勢互補”的感覺。也就是說，當我們面對一個程序問題的實現(xiàn)方式時，兩個人會分別說出自己對這個問題的看法，然后進行比較，分析兩種方法孰優(yōu)孰劣。如果其中一個人對某一些語句的書寫很熟練而另一者不是很熟練，那么熟練者主動書寫代碼，另一人在旁邊積極提出有益的建議。這樣，就較少出現(xiàn)個人編程過程中常有的“阻塞”情形，從而提升了編程的效率。

?

五、Qt學習心得

　　Qt初學——我的第一個UI——康鑫

　　第一次打開Qt的時候，我是一臉懵逼的。沒學過c++，里面的程序都看不懂。按照套路，我開始看教程，上手實踐。連著搞了3天之后，我開始漸漸明白怎么寫UI。

　　我現(xiàn)在的理解是：UI = 界面設計 + 信號槽響應機制 。下面我通過實例來展示編寫一個UI的大致過程（注意：這不是教程！最后貼的有專業(yè)教程！）：

　　Step1：界面設計

　　首先，要創(chuàng)建一個項目。

　　

　　.pro文件是項目的工程文件，點擊此處看詳細解釋。

　　.h文件是主窗口MainWindow的頭文件，可以在.h文件里聲明變量、函數(shù)、信號、信號槽。

　　main.cpp就是主函數(shù)了，程序從這里開始。

　　mainwindow.cpp是主窗口的程序，在里面可以設置主窗口的布局，信號槽等。

　　.ui文件，我現(xiàn)在還是不知道這個文件的機制，不過我知道可以在里面拖放控件，就像拼積木一樣設計UI，很簡單，點擊此處看有關內(nèi)容。

　　一開始我用了一下.ui文件，但是由于不知道怎樣對控件屬性作更細的設置，所以干脆放棄，選擇寫代碼實現(xiàn)。

　　創(chuàng)建好項目之后，開始做整個過程的前半部分，界面設計。

　　下面，在界面中添加一個按鈕。

　　上網(wǎng)百度一下，常用的按鈕是QPushButton，查了一下相關用法之后，就可以嘗試使用了。

1 #ifndef MAINWINDOW_H2 #define MAINWINDOW_H3 4 #include <QMainWindow>5 #include <QPushButton>6 7 namespace Ui {8 class MainWindow;9 } 10 11 class MainWindow : public QMainWindow 12 { 13 Q_OBJECT 14 15 public: 16 explicit MainWindow(QWidget *parent = 0); 17 ~MainWindow(); 18 19 private: 20 Ui::MainWindow *ui; 21 QPushButton *button; 22 }; 23 24 #endif // MAINWINDOW_H MainWindow.h

　　在.h文件里添加QPushButton的頭文件#include <QPushButton> ，在private里面聲明button變量，QPushButton *button;

#include "mainwindow.h" #include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow) {ui->setupUi(this);button = new QPushButton(this);button->setText("Button");button->setParent(this);}MainWindow::~MainWindow() {delete ui; } MainWindow.cpp

　　button = new QPushButton(this);//定義button變量

　　button->setText("Button");　　　//設置button屬性，這里設置button的文本，其他屬性百度一下就可以

　　button->setParent(this);　　　　//將button控件的父窗口設置為當前窗口，這句用來顯示button按鈕

　　運行效果：

　　

　　到此為止，UI編寫的一半——界面設計就OK了。當然要是想做更好的UI，需要添加更多的控件，各種控件百度一下基本都能找到用法。

　　Step2：信號槽響應機制

　　添加了一個按鈕，一定很著急，點完之后沒卵用啊！為了能夠點完按鈕之后給點反應，我們要用到信號與信號槽機制。按我的理解就是，你做了一件事（往往是點擊按鈕），之后執(zhí)行相應動作（函數(shù)）。不過我的描述還是太粗淺，這里給出相對權威一點的參考。

#include "mainwindow.h" #include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow) {ui->setupUi(this);button = new QPushButton(this);button->setText("Button");button->setParent(this);QObject::connect(button,&QPushButton::clicked,this,&MainWindow::close); }MainWindow::~MainWindow() {delete ui; } MainWindow.cpp

　　QObject::connect(button,&QPushButton::clicked,this,&MainWindow::close);

　　這句話的作用就是將點擊按鈕與關閉窗口“綁定”在一起。這樣，點完按鈕之后，窗口就會關閉。詳解見上面信號槽的參考。

　　但是這種“自帶”的信號與信號槽根本滿足不了需求啊，那么就需要自定義信號和自定義信號槽來實現(xiàn)一個自由度相對大很多的響應。

　　大致過程是這樣的：

1 #ifndef MAINWINDOW_H2 #define MAINWINDOW_H3 4 #include <QMainWindow>5 #include <QPushButton>6 7 namespace Ui {8 class MainWindow;9 } 10 11 class MainWindow : public QMainWindow 12 { 13 Q_OBJECT 14 15 public: 16 explicit MainWindow(QWidget *parent = 0); 17 ~MainWindow(); 18 19 signals: 20 void signal(); 21 22 private slots: 23 void on_button_clicked(); 24 void receive_signal(); 25 26 private: 27 Ui::MainWindow *ui; 28 QPushButton *button; 29 }; 30 31 #endif // MAINWINDOW_H MainWindow.h

　　信號聲明在signals:后，信號槽聲明在private slots:后。

1 #include "mainwindow.h"2 #include "ui_mainwindow.h"3 4 MainWindow::MainWindow(QWidget *parent) :5 QMainWindow(parent),6 ui(new Ui::MainWindow)7 {8 ui->setupUi(this);9 10 button = new QPushButton(this); 11 button->setText("Button"); 12 button->setParent(this); 13 14 QObject::connect(button,&QPushButton::clicked,this,&MainWindow::on_button_clicked); 15 QObject::connect(this,&MainWindow::signal,this,&MainWindow::receive_signal); 16 } 17 18 MainWindow::~MainWindow() 19 { 20 delete ui; 21 } 22 23 void MainWindow::on_button_clicked() 24 { 25 emit signal(); 26 } 27 28 void MainWindow::receive_signal() 29 { 30 this->close(); 31 } MainWindow.cpp

　　QObject::connect(button,&QPushButton::clicked,this,&MainWindow::on_button_clicked);

　　QObject::connect(this,&MainWindow::signal,this,&MainWindow::receive_signal);

　　點擊按鈕和函數(shù)on_button_clicked();“綁定”在一起，點完按鈕就會執(zhí)行函數(shù)內(nèi)容。

　　函數(shù)里面執(zhí)行emit signal();發(fā)出自定義的信號signal();

　　發(fā)出signal();后，receive_signal();函數(shù)就會執(zhí)行，因為前面將它倆“綁定”了。

　　receive_signal();函數(shù)里面執(zhí)行了close();函數(shù)，效果是關閉當前界面。

?

　　有了上面兩步，就可以嘗試著構建功能更多的UI了，可以再添加窗口，添加其他控件，不同界面之間也可以把信號和信號槽“綁定”（不過記得要把槽設置成public的）……整個過程像堆積木一樣，還挺有趣。

　　這里推薦兩個教程，非常友好！強推！

　　Qt學習之路2

　　Qt實戰(zhàn)一二三

?

　　最后，一周的時間從不會到大致明白，真的很開心——雖然其他作業(yè)都沒寫。

?

轉(zhuǎn)載于:https://www.cnblogs.com/RainLou/p/8735480.html

總結(jié)

以上是生活随笔為你收集整理的软件工程结对作业 四则运算界面设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。