Touchgfx 自定义容器之间的交互操作

（一）自定义两个容器

（1）BottonContainer

（2）SetAlarmContainers

（二）把两个容器放在屏幕leadScreen2上

需要实现的交互：

（1）点击容器BottonContainer上的报警限值，弹窗容器SetAlarmContainers。

（2）弹窗容器SetAlarmContainers后，把容器SetAlarmContainers上的内容："参数设置"和其下面的长方形图片设置为隐藏。

（三）实现步骤：

（1）在容器BottonContainer上增加交互：trigger1

（2）点击"报警限值"图片，发生trigger1, 需要添加代码如下：

BottonContainer.cpp

cpp 复制代码

#include <gui/containers/BottonContainer.hpp>
BottonContainer::BottonContainer():
                 imageClickedCallback(this, &BottonContainer::imageClickHandler)
{
  imageLimit.setClickAction(imageClickedCallback);
	imageAlarm.setClickAction(imageClickedCallback);
	imageWait.setClickAction(imageClickedCallback);
	imageChart.setClickAction(imageClickedCallback);
	imageSet.setClickAction(imageClickedCallback);
}
void BottonContainer::initialize()
{
    BottonContainerBase::initialize();
}
void BottonContainer::imageClickHandler(const Image& image, const ClickEvent& event)
{
	if(&image == &imageLimit)
	{
		emitTrigger1Callback();//调用容器的输出Trigger1
	}
	if(&image == &imageAlarm)
	{
    emitTrigger2Callback();//调用容器的输出Trigger1
	}
	if(&image == &imageWait)
	{
    emitTrigger3Callback();//调用容器的输出Trigger1
	}
	if(&image == &imageChart)
	{
    emitTrigger4Callback();//调用容器的输出Trigger1
	}
	if(&image == &imageSet)
	{
    emitTrigger5Callback();//调用容器的输出Trigger1
	}	
}

BottonContainer.hpp

cpp 复制代码

#ifndef BOTTONCONTAINER_HPP
#define BOTTONCONTAINER_HPP
#include <gui_generated/containers/BottonContainerBase.hpp>
class BottonContainer : public BottonContainerBase
{
public:
    BottonContainer();
    virtual ~BottonContainer() {}
    virtual void initialize();
		void imageClickHandler(const Image& image, const ClickEvent& event);	
protected:
		Callback<BottonContainer, const Image&, const ClickEvent&> imageClickedCallback;
};
#endif // BOTTONCONTAINER_HPP

（2）在容器SetAlarmContainers上增加动作： action2

增加代码如下：

SetAlarmContainers.cpp

cpp 复制代码

 void SetAlarmContainers::action2()//响应来自leadScreen2View的触发事件
{
    //Your code here
	setALarmImageFalse.setVisible(FALSE);//隐藏图片
	textArea1_1.setVisible(FALSE);//隐藏字体
	this->invalidateContent();
}

SetAlarmContainers.hpp

cpp 复制代码

#ifndef SETALARMCONTAINERS_HPP
#define SETALARMCONTAINERS_HPP
#include <gui_generated/containers/SetAlarmContainersBase.hpp>
class SetAlarmContainers : public SetAlarmContainersBase
{
public:
    SetAlarmContainers();
    virtual ~SetAlarmContainers() {}
    virtual void initialize();
		void imageClickHandler(const Image& image, const ClickEvent& event);
		void action2();
protected:
	  Callback<SetAlarmContainers, const Image&, const ClickEvent&> imageClickedCallback;
};
#endif // SETALARMCONTAINERS_HPP

（3）在屏幕leadScreen2上增加交互动作动作，调用 SetAlarmContainers中的action2()函数。

interaction4: 当BottonContainer trigger1 happens, 当容器bottonContainer的触发（trigger1）发生时, 显示容器setAlarmContainers1，同时触发另一个内部交互动作。

interaction5: 当interaction4完成时, 调用容器setAlarmContainers1的成员函数action2()。把容器SetAlarmContainers1上的内容："参数设置"和其下面的长方形图片设置为隐藏

其自动生成的交互操作代码位于：leadScreen2ViewBase.cpp中

cpp 复制代码

leadScreen2ViewBase::leadScreen2ViewBase() :
    bottonContainer1Trigger1Callback(this, &leadScreen2ViewBase::bottonContainer1Trigger1CallbackHandler)
{
    __background.setPosition(0, 0, 600, 1024);
    __background.setColor(touchgfx::Color::getColorFromRGB(0, 0, 0));
    add(__background);
    bottonContainer1.setXY(0, 886);
    bottonContainer1.setTrigger1Callback(bottonContainer1Trigger1Callback);
    add(bottonContainer1);
    
    setAlarmContainers1.setXY(0, 656);
    setAlarmContainers1.setVisible(false);
    add(setAlarmContainers1);
}

void leadScreen2ViewBase::bottonContainer1Trigger1CallbackHandler()
{
    //Interaction4
    //When bottonContainer1 trigger1 show setAlarmContainers1
    //Show setAlarmContainers1
    setAlarmContainers1.setVisible(true);
    setAlarmContainers1.invalidate();

    //Interaction5
    //When Interaction4 completed call action2 on setAlarmContainers1
    //Call action2
    setAlarmContainers1.action2();
}

leadScreen2ViewBase.hpp

cpp 复制代码

/*********************************************************************************/
/********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
/*********************************************************************************/
#ifndef LEADSCREEN2VIEWBASE_HPP
#define LEADSCREEN2VIEWBASE_HPP
#include <gui/common/FrontendApplication.hpp>
#include <mvp/View.hpp>
#include <gui/leadscreen2_screen/leadScreen2Presenter.hpp>
#include <touchgfx/widgets/Box.hpp>
#include <gui/containers/BottonContainer.hpp>
#include <gui/containers/SetAlarmContainers.hpp>
class leadScreen2ViewBase : public touchgfx::View<leadScreen2Presenter>
{
public:
    leadScreen2ViewBase();
    virtual ~leadScreen2ViewBase();
    virtual void setupScreen();
    virtual void handleKeyEvent(uint8_t key);
protected:
    FrontendApplication& application() {
        return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    }
    touchgfx::Box __background;
    touchgfx::Box box2;
    BottonContainer bottonContainer1;
    SetAlarmContainers setAlarmContainers1;
private:
    touchgfx::Callback<leadScreen2ViewBase> bottonContainer1Trigger1Callback;
    void bottonContainer1Trigger1CallbackHandler();
};
#endif // LEADSCREEN2VIEWBASE_HPP