TinyUI-TUIWindow-最简单的自定义

   日期:2020-05-05     浏览:107    评论:0    
核心提示:TinyUI与传统Windows开发类似,使用窗口(TUIWindow)作为其他UI组件的载体,其设ui

       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最简单的自定义窗口至此已全部完成。

 

 

 

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
更多>相关资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服