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字样。
--------- 测试成功
关于TinyUI最简单的自定义窗口至此已全部完成。