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窗口。

LUIButton 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(LUIButton* view)将会被调用,为什么被调用或如何被调用到,该部分后续详细讲解,属于事件驱动系统部分。

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

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

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

5. 点击"My Window"按钮

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

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

--------- 测试成功

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

原创文章 35 获赞 5 访问量 4万+

猜你喜欢

转载自blog.csdn.net/OneOnce/article/details/105907610