2017年10月6日 星期五

用 wxWidgets 的GUI Library 搭配CodeBlock 來開發PC端應用程式

今天這篇文章要使用 wxWidget (3.0.3) 搭配 CodeBlock(16.01) 來開發一個簡單的視窗介面應用程式

首先我們會分兩個階段,第一階段我們需要先去編譯wxWidgets這個GUI Library,我們將會使用mingw-w64(GCC)來作為我們的Compiler.

第二階段我們會去用CodeBlock開一個wxWidgets的專案,並且簡單的編譯一個視窗應用程式

========================================================================
首先我們需要去下面的載點下載需要的軟體:
1. mingw-w64 ==>  https://sourceforge.net/projects/mingw-w64/
2. wxWidget (3.0.3) ==> https://www.wxwidgets.org/downloads/
3. CodeBlock(16.01) ==> http://www.codeblocks.org/downloads/binaries
========================================================================

下載完成後,我們先安裝mingw-w64,這是一個自動安裝的檔案,只需照著步驟下一步就可以了,作者是把他安裝在 D:\mingw-w64 底下。

接著我們要把wxWidget解壓縮開,作者把wxWidgets解壓縮在D:\Wxwidget\wxWidgets-3.0.3 底下

先完成上面兩個步驟之後,接著去設定一下Windows的環境變數,讓我們的GCC 可以直接呼叫,步驟如下:















在最後面加上 ===>  ;D:\mingw-w64\i686-7.1.0-posix-dwarf-rt_v5-rev2\mingw32\bin
這樣就完成編譯器的設定


接著打開windows的命令提示字元,並且切換到wxWidget的build\msw路徑底下,













依序輸入下面指令:
1. mingw32-make -f makefile.gcc clean
2. mingw32-make -f makefile.gcc BUILD=debug SHARE=0 MONOLITHIC=1 UNICODE=1
3. mingw32-make -f makefile.gcc BUILD=release SHARE=0 MONOLITHIC=1 UNICODE=1

當整個編譯完成後,我們已經把wxWidget Library成功編譯成Codeblock可以使用的了~


========================================================================第二步驟,請先安裝CodeBlock,安裝完成後請開啟CodeBlock,選擇Create a new project,並且依照下面步驟來建立專案


1.請選擇wxWidgets project來作開發,接著按右邊的"Go"按鈕進行下一步驟
















2.這一頁面會說明此版本支援wxWidgets 2.6.x/2.8.x/3.0.x,我們使用3.0.3版也在此支援範圍之內,若是你想要使用的wxWidgets不在此CodeBlock範圍,你可能就要找其他版本的CodeBlock了。這邊我們直接選"Next"按鈕


















3.選擇我們使用的3.0.x版本,按下一步


















4.接著輸入我們要建立的專案名,我這邊命名為"wxTest",接著進行下一步驟


















5.這邊我們隨便輸入一個作者名即可,進行下一步


















6.這個頁面Preferred GUI Builder請選擇wxSmith,另外Application Type選擇Frame Base.


















7.接著我們要選擇wxWidgets3.0.3所在的位置,也就是第一步驟編譯好的wxWidgets位置,所以我們這邊填入D:\Wxwidgets\wxWidgets-3.0.3


















8.這一步驟請確定Compiler是選擇GNU GCC Compiler,其他應該預設就沒有問題了


















9.這一步驟請按照圖片裡的選項勾選,接著按下一步,Project初始的Wizzard應該就結束了,此時你就會看到有IDE介面出現,可以讓你設計UI


















10. 在作編譯之前,我們先到Settings => Compiler 確定一下設定是否正確,檢查Toolchain executables這個部分,請確認這些編譯器的名子與位置都是正確的,要確認你的Compiler's install directory都有這些執行檔可用。
















11.我們這邊簡單的拉兩個TextEdit,一個Button,並且進行編譯,可以看到編譯完成後就會跳出右邊的小視窗,簡單的視窗程式就大功告成了。


沒有留言:

張貼留言