nim_duilib(1)之第一個dui executable(including configure setting in vs2017)


before starting

lets go

You could build the a demo of directUI with nim_duilib framework if these upon have already got ready.
Or you could do it from the official tutorial according to here

stage 1

  • create a windows 桌面應用程序 項目。
  • my program's name is demo_xml.

stage 2

  • open the demo_xml.cpp file
  • delete other code but the following:
#include "framework.h"
int APIENTRY wWinMain(_In_ HINSTANCE hInstance,
                     _In_opt_ HINSTANCE hPrevInstance,
                     _In_ LPWSTR    lpCmdLine,
                     _In_ int       nCmdShow)
{
    UNREFERENCED_PARAMETER(hPrevInstance);
    UNREFERENCED_PARAMETER(lpCmdLine);

      return 0;
}

stage 3

  • open the demo_xml folder and build a folder named kit.

  • copy base, build and duilib folders which are from NIM_Duilib_Framework folder to kit foder.

  • (alternative)go back to the demo_xml solution in vs2017, and build an folder named kit .

  • add the base and duilib projects from the kit folder into the demo_xml solution.

  • set the base and duilib projects' properties:

name value
輸出目錄 $(SolutionDir)$(Configuration)\
中間目錄 $(Configuration)\

  • set the demo_xml project's including path, the value is the following:
$(SolutionDir)kit

stage 4

  • go back to the demo_xml, 引用項目baseduilib

  • including the header files in the framework.h file:

// including the nim_duilib's header files.
#include "base/base.h"
#include "duilib/UIlib.h"

  • build a new header file, constdef.h, whose file type is .h , and the content is the following :
#pragma once
enum ThreadId
{
	kThreadUI
};

stage 5

  • create a new class, named MainThread.
  • copy the following code to the MainThread.h:
#pragma once
#include "framework.h"

class MainThread : public nbase::FrameworkThread
{
public:
	MainThread() : nbase::FrameworkThread("MainThread") {}
	virtual ~MainThread() {}

private:
	virtual void Init() override;
	virtual void Cleanup() override;
};
  • and the MainThread.cpp's content is the following:
#include "MainThread.h"
#include "constdef.h"

#include "BasicForm.h"
#include "base/win32/path_util.h"

//
//	@brief: 
// 
void MainThread::Init()
{
	nbase::ThreadManager::RegisterThread(kThreadUI);

	// 獲取資源路徑,初始化全局參數
	std::wstring theme_dir = nbase::win32::GetCurrentModuleDirectory();
#ifdef _DEBUG
	// Debug 模式下使用本地文件夾作為資源
	// 默認皮膚使用 resources\\themes\\default
	// 默認語言使用 resources\\lang\\zh_CN
	// 如需修改請指定 Startup 最后兩個參數
	ui::GlobalManager::Startup(theme_dir + L"resources\\", ui::CreateControlCallback(), false);
#else
	// Release 模式下使用資源中的壓縮包作為資源
	// 資源被導入到資源列表分類為 THEME,資源名稱為 IDR_THEME
	// 如果資源使用的是本地的 zip 文件而非資源中的 zip 壓縮包
	// 可以使用 OpenResZip 另一個重載函數打開本地的資源壓縮包
	ui::GlobalManager::OpenResZip(MAKEINTRESOURCE(IDR_THEME), L"THEME", "");
	// ui::GlobalManager::OpenResZip(L"resources.zip", "");
	ui::GlobalManager::Startup(L"resources\\", ui::CreateControlCallback(), false);
#endif

	// 創建一個默認帶有陰影的居中窗口
	BasicForm* window = new BasicForm();
	window->Create(NULL, BasicForm::kClassName.c_str(), WS_OVERLAPPEDWINDOW & ~WS_MAXIMIZEBOX, 0);
	window->CenterWindow();
	window->ShowWindow();
}

//
//	@brief: 
// 
void MainThread::Cleanup()
{
	ui::GlobalManager::Shutdown();
	SetThreadWasQuitProperly(true);
	nbase::ThreadManager::UnregisterThread();
}

stage 6

  • establish a new class, named BasicForm.
  • BasicForm.h:
#pragma once
#include "framework.h"

class ui::WindowImplBase;

class BasicForm : public ui::WindowImplBase
{
public:
	BasicForm() {}
	virtual ~BasicForm() {}

	/**
	 * 一下三個接口是必須要覆寫的接口,父類會調用這三個接口來構建窗口
	 * GetSkinFolder		接口設置你要繪制的窗口皮膚資源路徑
	 * GetSkinFile			接口設置你要繪制的窗口的 xml 描述文件
	 * GetWindowClassName	接口設置窗口唯一的類名稱
	 */
	virtual std::wstring GetSkinFolder() override;
	virtual std::wstring GetSkinFile() override;
	virtual std::wstring GetWindowClassName() const override;

	/**
	 * 收到 WM_CREATE 消息時該函數會被調用,通常做一些控件初始化的操作
	 */
	virtual void InitWindow() override;

	/**
	 * 收到 WM_CLOSE 消息時該函數會被調用
	 */
	virtual LRESULT OnClose(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled);

	static const std::wstring kClassName;
};
  • BasicForm.cpp:
#include "BasicForm.h"

const std::wstring BasicForm::kClassName = L"Basic";

//
//	@brief: 
// 
std::wstring BasicForm::GetSkinFolder()
{
	return L"basic";
}

//
//	@brief: 
// 
std::wstring BasicForm::GetSkinFile()
{
	return L"basic.xml";
}

//
//	@brief: 
// 
std::wstring BasicForm::GetWindowClassName() const
{
	return kClassName;
}

//
//	@brief: 
// 
void BasicForm::InitWindow()
{

}

//
//	@brief: 
// 
LRESULT BasicForm::OnClose(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled)
{
	PostQuitMessage(0L);
	return __super::OnClose(uMsg, wParam, lParam, bHandled);
}

  • go back to demo_xml.cpp, then write the following code:
#include "demo_xml.h"
#include "MainThread.h"
  • in the demo_xml.cpp, you should add the following code in the wWinMain function between UNREFERENCED_PARAMETER(lpCmdLine); and return 0; :
	// 創建主線程
	MainThread thread;

	// 執行主線程循環
	thread.RunOnCurrentThreadWithLoop(nbase::MessageLoop::kUIMessageLoop);

stage 7

  • back to the **NIM_Duilib_Framework ** folder, open the bin folder, and copy the resources to the demo_xml\Debug.

stage 8

  • build the demo_xml project.

  • without any error, you will get the first duirectUI demo, demo_xml.exe, where is the demo_xml\debug folder.

  • then you could launch it. Congratulations.

global.xml

global.xml文件源碼

<?xml version="1.0" encoding="UTF-8"?>
<Global>
    <!--所有字體-->
    <Font id="system_12" name="system" size="12" default="true"/>
    <Font id="system_14" name="system" size="14"/>
    <Font id="system_16" name="system" size="16"/>
    <Font id="system_18" name="system" size="18"/>
    <Font id="system_20" name="system" size="20"/>
    <Font id="system_22" name="system" size="22"/>
    <Font id="system_bold_12" name="system" size="12" bold="true"/>
    <Font id="system_bold_14" name="system" size="14" bold="true"/>
    <Font id="system_bold_16" name="system" size="16" bold="true"/>
    <Font id="system_bold_18" name="system" size="18" bold="true"/>
    <Font id="system_bold_20" name="system" size="20" bold="true"/>
    <Font id="system_bold_22" name="system" size="22" bold="true"/>
    <Font id="arial_12" name="arial" size="12"/>
    <Font id="arial_14" name="arial" size="14"/>
    <Font id="arial_16" name="arial" size="16"/>
    <Font id="arial_18" name="arial" size="18"/>
    <Font id="arial_20" name="arial" size="20"/>
    <Font id="arial_22" name="arial" size="22"/>
    <Font id="arial_bold_12" name="arial" size="12" bold="true"/>
    <Font id="arial_bold_14" name="arial" size="14" bold="true"/>
    <Font id="arial_bold_16" name="arial" size="16" bold="true"/>
    <Font id="arial_bold_18" name="arial" size="18" bold="true"/>
    <Font id="arial_bold_20" name="arial" size="20" bold="true"/>
    <Font id="arial_bold_22" name="arial" size="22" bold="true"/>
    <Font id="system_underline_12" name="system" size="12" underline="true"/>
    <Font id="system_underline_14" name="system" size="14" underline="true"/>
    <Font id="system_underline_16" name="system" size="16" underline="true"/>
    <Font id="system_underline_18" name="system" size="18" underline="true"/>
    <Font id="system_underline_20" name="system" size="20" underline="true"/>
    <Font id="system_underline_22" name="system" size="22" underline="true"/>

    <!--一些常規固定顏色-->
    <TextColor name="white" value="#ffffffff"/>
    <TextColor name="black" value="#ff000000"/>
    <TextColor name="darkcolor" value="#ff333333"/>
    <TextColor name="lightcolor" value="#ff888888"/>
    <TextColor name="gray" value="#ff8e99a6"/>
    <TextColor name="light_gray" value="#ffa8a8a8"/>
    <TextColor name="dark_gray" value="#ff72797f"/>
    <TextColor name="green" value="#ff00bb96"/>
    <TextColor name="light_green" value="#ff21c7a6"/>
    <TextColor name="blue" value="#ff006DD9"/>
    <TextColor name="red" value="#ffC63535"/>

    <!--文字色值,不帶透明層-->
    <TextColor name="textdefaultcolor" value="#ff333333"/>
    <TextColor name="textdefaultdisablecolor" value="#ffa1aebc"/>

    <!--窗口常用背景色-->
    <TextColor name="bk_main_wnd_title" value="#ff238efa"/>
    <TextColor name="bk_main_wnd_search" value="#ff1e7ad7"/>
    <TextColor name="bk_wnd_darkcolor" value="#fff0f2f5"/>
    <TextColor name="bk_wnd_lightcolor" value="#ffffffff"/>
    <TextColor name="bk_menuitem_hovered" value="#ffe1e6eb"/>
    <TextColor name="bk_menuitem_selected" value="#ffced4db"/>
    <TextColor name="bk_listitem_hovered" value="#fff0f2f5"/>
    <TextColor name="bk_listitem_selected" value="#ffe4e7eb"/>

    <!--置頂項的背景顏色-->
    <TextColor name="bk_topitem_normal" value="#ffffffe0"/>
    <TextColor name="bk_topitem_hovered" value="#ffffffeb"/>
    <TextColor name="bk_topitem_selected" value="#fffafacd"/>

    <!--進度條專用-->
    <TextColor name="bk_progress_bk" value="#ffe3ecf5"/>
    <TextColor name="bk_progress_progress" value="#ff2aceae"/>

    <!--背景色值,半透明-->
    <TextColor name="transbkblack" value="#80000000"/>

    <!--第一級分割線,較深-->
    <TextColor name="splitline_level1" value="#ffd2d4d6"/>

    <!--第二級分割線,較淺-->
    <TextColor name="splitline_level2" value="#ffebedf0"/>

    <!--調色板色值-->
    <TextColor name="color_palette1" value="#ffff2600"/>
    <TextColor name="color_palette2" value="#ffffeb00"/>
    <TextColor name="color_palette3" value="#ff61ed00"/>
    <TextColor name="color_palette4" value="#ff00b4ff"/>
    <TextColor name="color_palette5" value="#ffa100ff"/>
    <TextColor name="color_palette6" value="#ff000000"/>
    <TextColor name="color_palette7" value="#ff545454"/>
    <TextColor name="color_palette8" value="#ffa8a8a8"/>
    <TextColor name="color_palette9" value="#ffffffff"/>

    <!--字體大小-->
    <Class name="font_title" font="system_14"/>

    <!--標題欄-->
    <Class name="caption" height="34" bkimage="file='../public/caption/caption_public.png' corner='0,0,0,1'" padding="10,0,5,0" />

    <!--滾動條-->
    <Class name="vscrollbar" width="14" fadealpha="true" thumbnormalimage="file='../public/vscrollbar/thumb_normal.png'  corner='0,8,0,8'" thumbhotimage="file='../public/vscrollbar/thumb_hovered.png' corner='0,8,0,8'" bkhotimage="file='../public/vscrollbar/bk_hovered.png' corner='0,4,0,4'" showbutton1="false" showbutton2="false" />   
    <Class name="hscrollbar" height="14" fadealpha="true" thumbnormalimage="file='../public/hscrollbar/thumb_normal.png' corner='8,0,8,0'" thumbhotimage="file='../public/hscrollbar/thumb_hovered.png' corner='8,0,8,0'" bkhotimage="file='../public/hscrollbar/bk_hovered.png' corner='4,0,4,0'" showbutton1="false" showbutton2="false"/>

    <!--單選框-->
    <Class name="option" selectednormalimage="../public/option/selected.png" selectedhotimage="../public/option/selectedhover.png" selectedpushedimage="../public/option/selectedhover.png"/>
    <Class name="circle_option" normalimage="../public/option/circle_unselected.png" disabledimage="../public/option/circle_unselected_disabled.png"/>
    <Class name="circle_option_2" height="18" textpadding="25,0,0,0" font="system_12" normaltextcolor="darkcolor" normalimage="file='../public/option/circle_unselected.png' dest='0,0,18,18'" selectednormalimage="file='../public/option/circle_selected.png' dest='0,0,18,18'"/>

    <!--復選框-->
    <Class name="checkbox_font12" height="16" textpadding="20,0,0,0" font="system_12" normaltextcolor="darkcolor" normalimage="file='../public/CheckBox/check_no.png' dest='0,0,16,16'" disabledimage="file='../public/CheckBox/check_no.png' dest='0,0,16,16' fade='80'" selectednormalimage="file='../public/CheckBox/check_yes.png' dest='0,0,16,16'" selecteddisabledimage="file='../public/CheckBox/check_yes.png' dest='0,0,16,16' fade='80'"/>
    <Class name="checkbox_font14" height="20" textpadding="20,0,0,0" font="system_14" normaltextcolor="darkcolor" normalimage="file='../public/CheckBox/check_no.png' dest='0,2,16,18'" disabledimage="file='../public/CheckBox/check_no.png' dest='0,2,16,18' fade='80'" selectednormalimage="file='../public/CheckBox/check_yes.png' dest='0,2,16,18'" selecteddisabledimage="file='../public/CheckBox/check_yes.png' dest='0,2,16,18' fade='80'"/>
    <Class name="checkbox_green" normalimage="file='../public/CheckBox/check_green_no.png'" disabledimage="file='../public/CheckBox/check_green_no.png' fade='80'" selectednormalimage="file='../public/CheckBox/check_green_yes.png'" selecteddisabledimage="file='../public/CheckBox/check_green_yes.png' fade='80'"/>
    
    <!--按鈕-->
    <Class name="btn_global_blue_80x30" font="system_bold_14" normaltextcolor="white" normalimage="file='../public/button/btn_global_blue_80x30_normal.png'" hotimage="file='../public/button/btn_global_blue_80x30_hovered.png'" pushedimage="file='../public/button/btn_global_blue_80x30_pushed.png'" disabledimage="file='../public/button/btn_global_blue_80x30_normal.png' fade='30'"/>
    <Class name="btn_global_white_80x30" font="system_bold_14" normaltextcolor="dark_gray" normalimage="file='../public/button/btn_global_white_80x30_normal.png'" hotimage="file='../public/button/btn_global_white_80x30_hovered.png'" pushedimage="file='../public/button/btn_global_white_80x30_pushed.png'" disabledimage="file='../public/button/btn_global_white_80x30_normal.png' fade='128'"/>
    <Class name="btn_global_red_80x30" font="system_bold_14" normaltextcolor="white" normalimage="file='../public/button/btn_global_red_80x30_normal.png'" hotimage="file='../public/button/btn_global_red_80x30_hovered.png'" pushedimage="file='../public/button/btn_global_red_80x30_pushed.png'" disabledimage="file='../public/button/btn_global_red_80x30_normal.png' fade='80'"/>

    <!--窗口右上角按鈕 灰色版 -->
    <Class name="btn_wnd_min" width="auto" height="auto" forenormalimage="file='../public/button/btn_wnd_gray_min.png' dest='4,4,16,16'" normalimage="" hotimage="../public/button/btn_wnd_gray_min_hovered.png" pushedimage="../public/button/btn_wnd_gray_min_pushed.png"/>
    <Class name="btn_wnd_close" width="20" height="20" normalimage="file='../public/button/btn_wnd_gray_close.png' dest='4,4,16,16'" hotimage="../public/button/btn_wnd_white_close_hovered.png" pushedimage="../public/button/btn_wnd_white_close_pushed.png" fadehot="false"/>
    <Class name="btn_wnd_max" width="auto" height="auto" forenormalimage="file='../public/button/btn_wnd_gray_max.png' dest='4,4,16,16'" normalimage="" hotimage="../public/button/btn_wnd_gray_max_hovered.png" pushedimage="../public/button/btn_wnd_gray_max_pushed.png"/>
    <Class name="btn_wnd_restore" width="auto" height="auto" forenormalimage="file='../public/button/btn_wnd_gray_restore.png' dest='4,4,16,16'" normalimage="" hotimage="../public/button/btn_wnd_gray_restore_hovered.png" pushedimage="../public/button/btn_wnd_gray_restore_pushed.png"/>
    <Class name="btn_wnd_settings" width="auto" height="auto" forenormalimage="file='../public/button/btn_wnd_settings.png' source='1,1,21,21'" hotimage="../public/button/btn_wnd_bk_hovered.png" pushedimage="../public/button/btn_wnd_bk_pushed.png"/>

    <!--窗口右上角按鈕 白色版 -->
    <Class name="btn_wnd_white_min" width="auto" height="auto" forenormalimage="file='../public/button/btn_wnd_white_min.png'" normalimage="" hotimage="../public/button/btn_wnd_white_min_hovered.png" pushedimage="../public/button/btn_wnd_white_min_pushed.png"/>
    <Class name="btn_wnd_white_close" width="auto" height="auto" forenormalimage="file='../public/button/btn_wnd_white_close.png'" normalimage="" hotimage="../public/button/btn_wnd_white_close_hovered.png" pushedimage="../public/button/btn_wnd_white_close_pushed.png"/>
    <Class name="btn_wnd_white_max" width="auto" height="auto" forenormalimage="file='../public/button/btn_wnd_white_max.png' dest='4,4,16,16'" normalimage="" hotimage="../public/button/btn_wnd_white_max_hovered.png" pushedimage="../public/button/btn_wnd_white_max_pushed.png"/>
    <Class name="btn_wnd_white_menu" width="auto" height="auto" forenormalimage="file='../public/button/btn_wnd_white_menu.png' dest='4,5,16,15'" normalimage="" hotimage="../public/button/btn_wnd_white_menu_hovered.png" pushedimage="../public/button/btn_wnd_white_menu_pushed.png"/>

    <!--刪除按鈕通用樣式-->
    <Class name="btn_delete" normalimage="file='../public/button/funcicon.png' source='0,0,26,26'" hotimage="file='../public/button/funcicon.png' source='31,0,57,26'" pushedimage="file='../public/button/funcicon.png' source='62,0,88,26'" disabledimage="file='../public/button/funcicon.png' source='93,0,119,26'"/>
    <Class name="btn_recycle" width="auto" height="auto" normalimage="file='../public/button/btn_recycle_normal.png'" hotimage="file='../public/button/btn_recycle_hovered.png'" pushedimage="file='../public/button/btn_recycle_pushed.png'" disabledimage="file='../public/button/btn_recycle_normal.png' fade='80'"/>
    <Class name="btn_refresh" width="auto" height="auto" normalimage="file='../public/button/btn_refresh_normal.png'" hotimage="file='../public/button/btn_refresh_hovered.png'" pushedimage="file='../public/button/btn_refresh_pushed.png'" disabledimage="file='../public/button/btn_refresh_normal.png' fade='80'"/>
    <Class name="btn_del_search" normalimage="../public/button/btn_del_search_normal_gray.png" hotimage="../public/button/btn_del_search_hover_gray.png" pushedimage="../public/button/btn_del_search_pushed_gray.png"/>

    <!--列表通用樣式-->
    <Class name="list" bkcolor="bk_wnd_lightcolor" vscrollbar="true"/>
    <Class name="listitem" hotcolor="bk_listitem_hovered" pushedcolor="bk_listitem_selected" selectednormalcolor="bk_listitem_selected" fadehot="false"/>
    <Class name="list_topitem" normalcolor="bk_topitem_normal" hotcolor="bk_topitem_hovered" pushedcolor="bk_topitem_selected" selectednormalcolor="bk_topitem_selected" fadehot="false"/>

    <!--進度條通用樣式, 注意進度條的值使用`_value`屬性-->
    <Class name="progress_blue" valign="center" _value="0" bkimage="../public/progress/progress_blue_bg.png" height="3" width="stretch" hor="true" max="100" min="0" progressimage="../public/progress/progress_blue_fg.png"/>
    <Class name="slider_green" width="stretch" height="14" margin="4,0,0,0" valign="center" thumbsize="14,14" min="0" max="255" progressbarpadding="0,6,0,6" bkimage="file='../public/slider/slider_hor_bk.png' dest='0,6,1000,8'" progresscolor="bk_progress_progress" thumbnormalimage="../public/slider/slider_thumb.png"/>

    <!--菜單通用樣式-->
    <Class name="menu" width="auto" height="auto" bkcolor="bk_wnd_lightcolor"/>
    <Class name="menu_element" padding="20,0,20,0" height="40" hotcolor="bk_menuitem_hovered" pushedcolor="bk_menuitem_selected" selectednormalcolor="bk_menuitem_selected"/>
    <Class name="menu_text" normaltextcolor="darkcolor" font="system_14" valign="center"/>

    <!--分割線通用樣式-->
    <Class name="splitline_hor_level1" bkcolor="splitline_level1" height="1"/>
    <Class name="splitline_hor_level2" bkcolor="splitline_level2" height="1"/>
    <Class name="splitline_ver_level1" bkcolor="splitline_level1" width="1"/>

    <!--富文本控件通用樣式-->
    <Class name="simple" multiline="false" autohscroll="true" wantreturnmsg="true" wanttab="false" rich="false" normaltextcolor="darkcolor" disabledtextcolor="textdefaultdisablecolor"/>
    <Class name="prompt" promptmode="true" promptcolor="light_gray"/>
    <Class name="edit" hotimage="file='../public/edit/edit1.png' corner='10,10,10,10'" focusedimage="file='../public/edit/edit2.png' corner='10,10,10,10'"/>
    <Class name="input" normalimage="file='../public/edit/edit0.png' corner='10,10,10,10'" hotimage="file='../public/edit/edit0.png' corner='10,10,10,10'" focusedimage="file='../public/edit/edit0.png' corner='10,10,10,10'" disabledimage="file='../public/edit/edit0.png' corner='10,10,10,10' fade='80'"/>

   <!--頭像蒙版-->
    <Class name="icon_headimage_mask_40x40" width="40" height="40" bkimage="../public/headmask/icon_headimage_mask_40x40_normal.png"/>
</Global>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM