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的事件；
可以猜到，画面的刷新就是在这里完成的，具体类和时序，我们下一章继续分析；
