TinyUI-TUIWindow-最简单的自定义

       TinyUI与传统Windows开发类似，使用窗口(TUIWindow)作为其他UI组件的载体，其设计模式与传统windows、Android等平台开发类似属于MVC设计模式。

       但TinyUI作为轻量级的UI库，开发者可以把它与其他第三方UI库一样使用，把一个一个组件通过计算/设置坐标的方式使其展示在屏幕中，即通过调用UI组件的setGeometry()方法设置控件的具体坐标，如果这样使用就失去了TinyUI设计的初衷；因为，如果把一个一个UI组件单独使用而不使用窗口管理，则TinyUI的事件驱动系统将无法正常驱动整个UI系统工作，必然导致使用者难以避免的在硬件/外设中断函数中刷新UI！

       作为TinyUI组件容器，其窗口(TUIWindow)控件需为其设置具体的内容视图，内容视图可以是任意布局控件或其他可见UI组件，在TinyUI介绍篇中我们贴出来About窗口部分代码。About部分的代码是把一个GridLayout作为Window的内容视图，本片作为TUIWindow最简单的入门篇，将使用TUITextView作为window的内容视图进行演示。

       自定义窗口都必须继承自TinyUI的TUIWindow类，同时该类有2个纯虚方法需要继承者进行实现，关于这2个方法的调用时机及其作为我们将在后续的教程中进行介绍，本篇主要展示TinyUI的TUIWindow的最简单使用方法。

 

一、自定义窗口

1. 创建名为MyWindow的类

    MyWindow.h

#ifndef __MY_WINDOW_H__
#define __MY_WINDOW_H__
#include <TUIWindow.h>


class MyWindow : public TUIWindow
{
public:
    MyWindow(TUIWindow* parent = nullptr);
    virtual ~MyWindow();

    void onShow();
    void onClose();

private:
    TUITextView textView; // 使用TUITextView作为当前窗口的内容视图
};

#endif // !__MY_WINDOW_H__

   上述代码中，MyWindow继承自TUIWindow，同时实现了TUIWindow的2个纯虚方法，分别是onShow()即onClose()等方法。

   上述代码中定义了一个TUITextView，我们将把它作为MyWindow的内容视图。

 

2. 实现MyWindow类，并设置内容视图

MyWindow.cpp

#include "MyWindow.h"


MyWindow::MyWindow(TUIWindow* parent)
    : TUIWindow(parent)
{
    setContentView(&this->textView); // 把textView作为MyWindow的内容视图

    textView.setText(L"Window"); // 设置textView显示的文字为"window"
}

MyWindow::~MyWindow()
{
}

void MyWindow::onShow()
{
}

void MyWindow::onClose()
{
}

    上述内容中，通过setContentView(&this->textView)把textView组件作为MyWindow的内容视图。

 

    到目前为止，自定义窗口的所有工作已全部完成

 

二、使用MyWindow窗口

    作为入门篇，我们把窗口放到TinyUI的模拟器演示程序，并将其启动。

1. 在演示程序中包含MyWindow的头文件

#include "MyWindow.h"

2. 定义MyWindow窗口及测试按钮

        为了让其在模拟器演示程序显示一个测试按钮，我们还需要定义一个按钮，当点击该按钮时显示MyWindow窗口。

TUIButton myWidowTest;
MyWindow myTestWindow;

3. 把MyWindow的测试按钮放到模拟器演示程序主界面

myWidowTest.setMargin(5, 5, 5, 5);
myWidowTest.setText(L"My Window");
myWidowTest.registerListener(this);
workspaceLayout.addView(&myWidowTest, 2, 5);

       把MyWindow的测试按钮放到模拟器演示程序的第2行，第5列的为止，并把该按钮显示的内容设置为"My Window"，按钮的其他设置暂时不关注，后续我们专题讲解。

        到目前为止，我们的模拟器演示程序主界已成功加入了My Widnow的测试项，其最终展示界面如下图所示：

       上图中，最后一行，最后一列即是我们添加的My Window测试按钮。

 

4. My Window按钮点击事件

       当模拟器演示程序的My Window按钮被点击后，模拟器演示程序窗口的void onClick(TUIButton* view)将会被调用，为什么被调用或如何被调用到，该部分后续详细讲解，属于事件驱动系统部分。

        我们在void onClick(TUIButton* view)方法中添加对应的控件id判断，即调用MyWindow的show()方法

void TUILauncher::onClick(TUIButton* view)
{
    uint32_t id = view->getId();

    if (myWidowTest.getId() == id)
    {
        myTestWindow.show();
    }
}

 

        至此，整个MyWindow定义和测试代码都已经完成，接下来，我们点击模拟器演示程序的"My Window"按钮

5. 点击"My Window"按钮

        当"My Window"按钮被点击后，上述第4步中的onClick()方法被调用，并通过视图控件id判断，条件满足，最后将执行myTestWindow.show()方法，该方法调用完成之后，成功显示了MyWindow的窗口，如下图所示:

我们可以看到MyWindow中的textView也作为自定窗口内容视图，并成功显示了window字样。

 

6. MyWindow显示事件路由过程

       当点击一次模拟器上的My window按钮会产生2次事件，分别为按钮点击事件和窗口显示事件，这里只贴出窗口显示事件路由路径。

>TinyUISimulator.exe!MyWindow::onShow() 行 60	C++
>TinyUISimulator.exe!TUIWindow::onStartup() 行 48	C++
>TinyUISimulator.exe!TUIWidgetEventHandler::handleWindowEvent(TUIWindow * window, TUIACTION_WIDGET action, unsigned int eventId, void * param) 行 179	C++
>TinyUISimulator.exe!TUIWidgetEventHandler::onEvent(TUIACTION_WIDGET action, TUIView * view, unsigned int eventId, void * param) 行 157	C++
>TinyUISimulator.exe!TUIEventRouter::route(TUIACTION_WIDGET action, TUIView * view, unsigned int eventId, void * param) 行 339	C++
>TinyUISimulator.exe!TUIEventPumper::handleWidgetEvent() 行 167	C++
>TinyUISimulator.exe!TUIEventPumper::pumpEvent() 行 67	C++
>TinyUISimulator.exe!TinyUISimulator::simulatorEventLoop(unsigned int wParam, long lParam) 行 85	C++

 

关于TinyUI最简单的自定义窗口至此已全部完成。