nim_duilib(11)之menu（1）

introduction

更多控件用法，请参考 here 和源码。
本文的代码基于这里
本文将介绍menu控件

xml文件添加代码

基于上一篇, 继续向basic.xml中添加下面的代码。 xml完整源码在文末。

这段代码添加到最小化按钮的上面

    <HBox width="stretch" height="35" bkcolor="bk_wnd_lightcolor">

      <Control />

        <!--设置按钮-->

        <Button class="btn_wnd_settings" name="settings" margin="4,6,0,0"/>

        <Button class="btn_wnd_min" name="minbtn" margin="4,6,0,0" />

        <Box width="21" margin="4,6,0,0">

          <Button class="btn_wnd_max" name="maxbtn"/>

          <Button class="btn_wnd_restore" name="restorebtn" visible="false"/>

        </Box>

        <Button class="btn_wnd_close" name="closebtn" margin="4,6,8,0"/>

    </HBox>

核心代码是

<!--设置按钮-->

<Button class="btn_wnd_settings" name="settings" margin="4,6,0,0"/>

项目文件配置

menu控件来自另一个项目ui_components, 而ui_component又依赖项目libcef_dll_wrapper。libcef_dll_wrapper位于文件夹third_party下。

stage 1

从源码目录拷贝ui_component和libcef_dll_wrapper和libs文件夹到先前创建好的kit的文件夹下，此时目录结构如下：

.kit

├─base

├─build

├─duilib

├─libs

├─third_party

└─ui_components

stage 2

习惯将项目输出到VS默认输出的目录Debug, 所以将项目ui_components、libcef_dll_wrapper的输出目录和中间目录改为如下：

name	value
输出目录	$(SolutionDir)$(Configuration)\|
中间目录	$(Configuration)\|

stage 3

设置ui_components项目链接lib目录指向 kit\libs\。打开ui_components属性->库管理器->常规->附加库目录->编辑，改为下面的值：

$(SolutionDir)kit\libs\

Note: 注意Release和Debug需要都修改。效果图

stage 4

为什么要做上面的配置？因为项目ui_components需要依赖libs目录下的nim_libcef库

代码中关联

BasicForm.h

打开BasicForm.h，类中添加下面的代码用于关联界面控件。

	// settings按钮

	ui::Button*	psettings_;

监听选择子项事件

类中继续添加下面的代码，用于监听滑块的值发生变化

	// settings按钮点击事件

	bool OnSettingsBtnClicked(ui::EventArgs* msg);

BasicForm.cpp

InitWindow函数

转到BasicForm.cpp，找到 InitWindow 函数，向其增加下面的代码

void BasicForm::InitWindow()

{

  	......

	// 12.关联设置按钮

	//----------------------------------------------------------------------------------------

	psettings_ = dynamic_cast<ui::Button*>(FindControl(L"settings"));

	// 关联点击事件

	if (psettings_)

	{

		psettings_->AttachClick(nbase::Bind(&BasicForm::OnSettingsBtnClicked, this, std::placeholders::_1));

	}

}

OnSettingsBtnClicked

OnSettingsBtnClicked函数源码如下：

bool BasicForm::OnSettingsBtnClicked(ui::EventArgs* msg)

{

	// 点击设置按钮，弹出菜单

	RECT rect = msg->pSender->GetPos();

	ui::CPoint point;

	point.x = rect.left - 175;

	point.y = rect.top + 10;

	ClientToScreen(m_hWnd, &point);

	nim_comp::CMenuWnd* pmenu = new(std::nothrow) nim_comp::CMenuWnd(NULL);

	if (pmenu)

	{

		ui::STRINGorID xml(L"settings_menu.xml");

		pmenu->Init(xml, _T("xml"), point);

	}

	return false;

}

运行结果

xml完整源码

<?xml version="1.0" encoding="UTF-8"?>

<Window size="900,600" caption="0,0,0,35">

  <VBox bkcolor="bk_wnd_darkcolor">

    <HBox width="stretch" height="35" bkcolor="bk_wnd_lightcolor">

      <Control />

        <!--设置按钮-->

        <Button class="btn_wnd_settings" name="settings" margin="4,6,0,0"/>

        <Button class="btn_wnd_min" name="minbtn" margin="4,6,0,0" />

        <Box width="21" margin="4,6,0,0">

          <Button class="btn_wnd_max" name="maxbtn"/>

          <Button class="btn_wnd_restore" name="restorebtn" visible="false"/>

        </Box>

        <Button class="btn_wnd_close" name="closebtn" margin="4,6,8,0"/>

    </HBox>

    <!--下面是中间的控件-->

    <VBox padding="30, 30, 30, 30" >

      <HBox height="120">

        <VBox>

          <!-- Buttons -->

          <Button class="btn_global_blue_80x30" name="btn_blue" text="blue" />

          <Button class="btn_global_white_80x30" name="btn_white" text="white"/>

          <Button class="btn_global_red_80x30" name="btn_red" text="red"/>

        </VBox>

        <!--checkbox-->

        <VBox>

          <CheckBox class="checkbox_font12" name="checkbox1" text="checkbox1" margin="0,5,0,10" selected="true"/>

          <CheckBox class="checkbox_font12" name="checkbox2" text="checkbox2" margin="0,5,0,10"/>

          <CheckBox class="checkbox_font12" name="checkbox3" text="checkbox3" margin="0,5,0,10"/>

        </VBox>

        <!-- option-->

        <VBox>

          <Option class="circle_option_2" name="option1" group="option_group" text="option1" margin="0,3,0,10" selected="true"/>

          <Option class="circle_option_2" name="option2" group="option_group" text="option2" margin="0,3,0,10"/>

          <Option class="circle_option_2" name="option3" group="option_group" text="option3" margin="0,3,0,10"/>

        </VBox>

        <HBox>

          <!-- List -->

          <VListBox class="list" name="list" padding="5,3,5,3">

          </VListBox>

          <VBox>

            <!-- Buttons -->

            <CheckBox class="checkbox_font12" name="list_checkbox_add_to_top" text="add to top" margin="0,5,0,10"/>

            <Button class="btn_global_blue_80x30" name="list_btn_add" text="add" />

            <CheckBox class="checkbox_font12" name="list_checkbox_remove_all" text="del all?" margin="0,5,0,10"/>

            <Button class="btn_global_white_80x30" name="list_btn_remove" text="remove"/>

          </VBox>

        </HBox>

        <!-- TreeView -->

        <TreeView class="list" name="tree" padding="5,3,5,3" margin="20">

        </TreeView>

      </HBox>

      <!--第二行控件开始-->

      <HBox height="85">

        <VBox>

          <!--combobox-->

          <Combo class="list" name="combo" height="30" margin="0,12,0,0" padding="6" bkimage="file='../public/combo/normal.png' corner='5,5,30,5'"/>

          <HBox>

            <RichEdit class="simple input" name="rich_edit_1" text="输入演示" height="30" margin="0,3" padding="6,6,6" promptmode="true" prompttext="Single line text control" promptcolor="lightcolor"/>

            <CheckBox class="checkbox_font12" name="rich_edit_readonly" text="read only" margin="0,5,0,10"/>

          </HBox>

        </VBox>

        <HBox>

          <VBox>

            <!-- Progress -->

            <HBox margin="0,10" height="32">

              <Progress class="progress_blue" name="progress" value="0" margin="10"/>

            </HBox>

            <!-- Slider -->

            <HBox margin="0,0,0,10" height="32">

              <Slider class="slider_green" name="slider" value="0" margin="10"/>

            </HBox>

          </VBox>

          <VBox width="120">

            <CircleProgress name="circle_progress" circular="true"  height="80" width="80"

            circlewidth="10" bgcolor="gray" fgcolor="green" value="0"  clockwise="true"  min="1" max="100" margin="10"

            textpadding="10,32,10,10" normaltextcolor="darkcolor" indicator="logo_18x18.png"/>

          </VBox>

        </HBox>

      </HBox>

    </VBox> <!--下面是中间的控件 结束-->

  </VBox>

</Window>