GuiLite 学习笔记(一) Mainloop与ViewTree

以GuiLiteSamples中的HelloSlide 为例，剖析一下GuiLite的设计思路和刷新机制；

首先是main.cpp; 可以分成3部分：

1、根据fb mode拿到对应的phy_fb, 后续的绘制都在这个fb上执行；

2、init _std_io(), 初始化输入设备，这里创建一个线程专门用于输入事件的poll, 检测到对应事件后，直接调用c_slide_group的on_touch方法；

void sendTouch2HelloSlide(int x, int y, bool is_down)

{

    is_down ? s_root.on_touch(x, y, TOUCH_DOWN) : s_root.on_touch(x, y, TOUCH_UP);

}

这个s_root就是在layout UI的时候我们创建的一个static的c_slide_group;

//////////////////////// layout UI ////////////////////////

c_page s_page1, s_page2, s_page3, s_page4, s_page5;

static c_slide_group s_root;

static WND_TREE s_root_children[] =

{

    { NULL,0,0,0,0,0,0 }

};

3、startHelloSlide(phy_fb, screen_width, screen_height, color_bytes);//never return;

摘取关键的代码片段进行剖析：

在UIcode.cpp中，有UI初始化的code

void create_ui(void* phy_fb, int screen_width, int screen_height, int color_bytes)

{

    load_resource();

    s_display = new c_display(phy_fb, screen_width, screen_height, UI_WIDTH, UI_HEIGHT, color_bytes, (1 + 5)/*1 root + 5 pages*/);

    c_surface* surface = s_display->alloc_surface(Z_ORDER_LEVEL_1);

    surface->set_active(true);

    s_root.set_surface(surface);

    s_root.connect(NULL, ID_ROOT, 0, 0, 0, UI_WIDTH, UI_HEIGHT, s_root_children);

    s_root.add_slide(&s_page1, ID_PAGE1, 0, 0, UI_WIDTH, UI_HEIGHT, NULL);

    s_root.add_slide(&s_page2, ID_PAGE2, 0, 0, UI_WIDTH, UI_HEIGHT, NULL);

    s_root.add_slide(&s_page3, ID_PAGE3, 0, 0, UI_WIDTH, UI_HEIGHT, NULL);

    s_root.add_slide(&s_page4, ID_PAGE4, 0, 0, UI_WIDTH, UI_HEIGHT, NULL);

    s_root.add_slide(&s_page5, ID_PAGE5, 0, 0, UI_WIDTH, UI_HEIGHT, NULL);

    s_root.set_active_slide(0);

    s_root.show_window();

    while(1)

    {

        thread_sleep(1000000);

    }

}

//////////////////////// interface for all platform ////////////////////////

void startHelloSlide(void* phy_fb, int width, int height, int color_bytes)

{

    create_ui(phy_fb, width, height, color_bytes);

}

上面只是在比较浅显的层面看了一下，现在要深入进入，看看slide的操作是如何传递的，以及重绘是如何发生的：

首先是s_root.on_touch() 方法；我们在GuiLite.h 中找到对应的类和方法的实现如下：

class c_slide_group : public c_wnd {

public:

...

inline virtual void on_touch(int x, int y, TOUCH_ACTION action);

protected:

    c_wnd* m_slides[MAX_PAGES];

    int m_active_slide_index;

    c_gesture* m_gesture;

};

对应的实现是一个虚函数，虚函数的语义是子类可以重载这个函数，我们先看下在这一层的实现：

inline c_slide_group::c_slide_group()

{

    m_gesture = new c_gesture(this);

    for (int i = 0; i < MAX_PAGES; i++)

    {

        m_slides[i] = 0;

    }

    m_active_slide_index = 0;

}

inline void c_slide_group::on_touch(int x, int y, TOUCH_ACTION action)

{

    x -= m_wnd_rect.m_left;

    y -= m_wnd_rect.m_top;

    if (m_gesture->handle_swipe(x, y, action))

    {

        if (m_slides[m_active_slide_index])

        {

            m_slides[m_active_slide_index]->on_touch(x, y, action);

        }

    }

}

这里看到的是，最后调了c_wnd类的on_touch方法；实现如下：

virtual void on_touch(int x, int y, TOUCH_ACTION action)

    {

        c_wnd* model_wnd = 0;

        c_wnd* tmp_child = m_top_child;

        while (tmp_child)

        {

            if ((tmp_child->m_attr & ATTR_PRIORITY) && (tmp_child->m_attr & ATTR_VISIBLE))

            {

                model_wnd = tmp_child;

                break;

            }

            tmp_child = tmp_child->m_next_sibling;

        }

        if (model_wnd)

        {

            return model_wnd->on_touch(x, y, action);

        }

        x -= m_wnd_rect.m_left;

        y -= m_wnd_rect.m_top;

        c_wnd* child = m_top_child;

        while (child)

        {

            if (child->is_focus_wnd())

            {

                c_rect rect;

                child->get_wnd_rect(rect);

                if (true == rect.PtInRect(x, y))

                {

                    return child->on_touch(x, y, action);

                }

            }

            child = child->m_next_sibling;

        }

    }

看到这里，基本上接触到GUI的核心概念了，也就是VieeTree。所谓ViewTree是指，GUI的所有View都是以Tree的数据结构来组织的。我们重点关注c_wnd这个类，看看里面到底有何玄机：首先我们看下一个c_wnd是如何添加到Tree的，首先是，connect方法：

virtual int connect(c_wnd *parent, unsigned short resource_id, const char* str,

        short x, short y, short width, short height, WND_TREE* p_child_tree = 0)

    {

        if (0 == resource_id)

        {

            ASSERT(false);

            return -1;

        }

        m_id = resource_id;

        set_str(str);

        m_parent = parent;

        m_status = STATUS_NORMAL;

        if (parent)

        {

            m_z_order = parent->m_z_order;

            m_surface = parent->m_surface;

        }

        if (0 == m_surface)

        {

            ASSERT(false);

            return -2;

        }

        /* (cs.x = x * 1024 / 768) for 1027*768=>800*600 quickly*/

        m_wnd_rect.m_left = x;

        m_wnd_rect.m_top = y;

        m_wnd_rect.m_right = (x + width - 1);

        m_wnd_rect.m_bottom = (y + height - 1);

        c_rect rect;

        get_screen_rect(rect);

        ASSERT(m_surface->is_valid(rect));

        pre_create_wnd();

        if (0 != parent)

        {

            parent->add_child_2_tail(this);

        }

        if (load_child_wnd(p_child_tree) >= 0)

        {

            load_cmd_msg();

            on_init_children();

        }

        return 0;

    }

先看接口，再看实现，首先，一个node添加到Tree上，一定是要首先指定其parent节点的，这个毫无疑问；

如果parent不是NULL，说明很可能，这个节点还有兄弟节点，那么这个时候就要调用parent的add_child_2_tail方法把this这个节点add进去，具体如下：

void add_child_2_tail(c_wnd *child)

    {

        if (0 == child)return;

        if (child == get_wnd_ptr(child->m_id))return;

        if (0 == m_top_child)

        {

            m_top_child = child;

            child->m_prev_sibling = 0;

            child->m_next_sibling = 0;

        }

        else

        {

            c_wnd* last_child = get_last_child();

            if (0 == last_child)

            {

                ASSERT(false);

            }

            last_child->m_next_sibling = child;

            child->m_prev_sibling = last_child;

            child->m_next_sibling = 0;

        }

    }

添加过程叙述如下：

先判空，再判等，这两种情况都无需进行添加操作；然后再判断m_top_child是否为空，m_top_child是当前节点的第一个插入的子节点，所以叫top child, 后面简称长子；若长子为空，则本次插入的child就是长子，否则这次插入的就是兄弟节点，而且要找到当前年龄最小的节点，在其之后进行插入；

这里分析完后，回到刚才的connect函数，继续看后面load_child_wnd的操作：

typedef struct struct_wnd_tree

{

    c_wnd*                    p_wnd;

    unsigned int            resource_id;

    const char*                str;

    short                   x;

    short                   y;

    short                   width;

    short                    height;

    struct struct_wnd_tree*    p_child_tree;

}WND_TREE;

int load_child_wnd(WND_TREE *p_child_tree)

{

    if (0 == p_child_tree)

    {

        return 0;

    }

    int sum = 0;

    WND_TREE* p_cur = p_child_tree;

    while (p_cur->p_wnd)

    {

        if (0 != p_cur->p_wnd->m_id)

        {//This wnd has been used! Do not share!

            ASSERT(false);

            return -1;

        }

        else

        {

            p_cur->p_wnd->connect(this, p_cur->resource_id, p_cur->str,

                p_cur->x, p_cur->y, p_cur->width, p_cur->height, p_cur->p_child_tree);

        }

        p_cur++;

        sum++;

    }

    return sum;

}

注意，如果这个添加的子树不为空的话，这里会产生递归的操作，也就是说在connect中，又产生了connect。

再次回到之前对c_slide_group类的on_touch方法的回顾，可以看到这个类自带c_gestrure; 通过这个

m_gesture->handle_swipe(x, y, action)

处理swipe的操作，这里会影响m_active_slide_index, 以及gestrue处理后还会让c_slide_group继续在更新后的m_active_slide_index处理swipe的事件；

可以猜到，画面的刷新就是在这里完成的，具体类和时序，我们下一章继续分析；

巴特西

GuiLite 学习笔记(一) Mainloop与ViewTree

最新文章

热门文章