CLanLib中的GUI

 

ClanLib库中的GUI

翻译：Kevin Lynx

Date : 2006-11-6

 

Event handling

One of the keys to learning how to use clanGUI is to understand how it uses signals and slots to do event handling. If someone clicks on a button component, the CL_Button object will emit its sig_clicked signal, and any slot connected to the signal will get called.

 

事件处理：

       知道如何使用clanGUI的一个关键点在于你是否理解了clanGUI是如何使用信号和槽机制来处理事件的。如果你点击了一个按钮，GL_Button对象就会发射一个sig_clicked信号，然后连接到该信号的槽就会被调用。

Here's an example:

void MyApp::show_gui()

{

       CL_StyleManager_Silver style(....);

       CL_GUIManager gui(&style);

 

       CL_Button button_ok(CL_Rect(....), "Ok", &gui);

       CL_Button button_cancel(CL_Rect(....), "Cancel", &gui);

 

       CL_SlotContainer slots;

       slots.connect(button_ok.sig_clicked(), this, &MyApp::on_button_ok);

       slots.connect(button_cancel.sig_clicked(), this, &MyApp::on_button_cancel);

      

       gui.run();

}

 

void MyApp::on_button_ok()

{

       std::cout << "Button ok was clicked!" << std::endl;

}

 

void MyApp::on_button_cancel()

{

       std::cout << "Button cancel was clicked!" << std::endl;

}

Each of the components in clanGUI have their own special events that can occour, but a few signals are common for all GUI components:

 

       clanGUI里的每一个组件都拥有其自己特殊的事件，但是也有些共同的事件（信号）：

 

Key events (key down, key up, key repeat)

Mouse events (mouse up, mouse down, mouse move)

Paint events (begin_paint, paint, end_paint)

 

按键事件

鼠标事件

绘制事件

 

If you want to do custom drawing in your GUI, you need to hook yourself in on the sig_paint signal of the component you want to customize. Normally you should not need to do this for normal objects, but if you want to make your own objects in the GUI, then you will most likely want to use most of the common signals.

 

       如果你想自定义GUI控件的绘制，你需要处理sig_paint信号。

 

ClanGUI System Basics

 

In order to be able to use any GUI toolkit properly and take fully advantage of its possibilities, it is essential to understand how the core classes operate and communicate with each others. In clanGUI there are the following core classes:

 

clanGUI里有以下这些核心类：

 

CL_Component

CL_ComponentStyle

CL_StyleManager

CL_GUIManager

CL_ComponentManager

CL_Component

 

The component class is the core class of clanGUI. It presents any widget/control/window in the system and is responsible for drawing the components and feeding the components with user input.

 

component类是clanGUI的核心类。它负责放置各种控件（包括窗口），并且绘制所有控件以及传递用户的输入给控件。

 

As with just about any other GUI toolkit out there, components are ordered in a tree. At the top of the tree, we have the root/desktop component. It represents the entire screen area and any child components on the screen. A typical child of the root component could be a window component, and the window component then has maybe a inputbox and two button child components. Anyone ever having looked at a GUI toolkit earlier in their life should be familiar with this concept.

 

       和其他GUI开发包一样，component也是按树来组织的。树的根部是 root/desktop component。它负责整个屏幕以及在其上的子component。 根component典型的孩子component是一个窗口 component，窗口component 典型的孩子component是一些对话框或者按钮之类的。

 

The root component in clanGUI is called CL_GUIManager. More on this when we examine the GUI manager more closely.

 

clanGUI的根component 被称为 CL_GUIManager。

 

CL_Component exports a large set of signals that any subclassed component usually connects signals to. The GUI emits these events whenever interaction with the component is required. Some examples of these signals are: sig_paint, sig_key_down, sig_mouse_move and sig_got_focus. For instance, if the GUI needs the component drawn, it will emit the sig_paint signal and all hooked up painting functions will then draw the component.

 

CL_Component导出了很多信号，这些信号可以被其子类连接。CL_Component会在产生事件的时候发射相应的信号。

 

CL_ComponentStyle

The component style class is the component styling (theme) interface. When a component is instantiated, one component style class is attached to the component.

 

component style类是component的样式接口。当一个component对象产生时，一个component style类会被关联到这个component类。

 

The main purpose of the component style class is to seperate styling data and functions from the component class. This is directly compareable to a document/view relationship, where the component class is the document, and then style class is a view.

 

component style类的主要目的是分离component类的外观和其功能。这和MFC中的 文档/视图 技术很类似。component类是文档，component style是视图。

 

To illustrate this a bit further, imagine we are constructing an input button. At construction time, an input button specific component style is attached. The style class connects a local member function to the sig_paint signal of its CL_Button owner and stores data needed for the styling as local member variables.

 

要对此举例说明的话，你可以想象我们要构造一个输入按钮。在构造该按钮的时候，一个指定的component style被关联。component style类连接了一个本类的成员函数到sig_paint信号。

 

When the GUI needs to draw the button, it will emit the sig_paint signal, which causes the member function in the style class to be called. This function then uses the public available attribute functions in its CL_Button owner to figure out what the text of the input button is and where its located, finally drawing the button on screen.

 

当GUI需要绘制这个按钮时，它会发射一个sig_paint信号，然后被连接到该信号的component style的成员函数就会被调用。该函数会使用CL_Button的公开成员变量（属性）来决定如何和绘制该按钮----何处显示，显示的内容等。

 

This two level construction of a component allows us to construct component objects without knowing what style is being used, making styles totally transparent for anything but the styling objects.

 

 

 

CL_StyleManager

Something need to attach these component styles to a component. This is what the CL_StyleManager interface does. When a component is constructed, the very first thing it does is to contact its style manager, where it asks it to attach component styles to it.

CL_StyleManager also function as a class factory. When loading components from gui definition files, the component manager asks the style manager to create an instance of a control based on a type string and a set of component options.

 

该类把一些component style类关联到一个component。当一个component被构造时，它首先会联系它的style manager，从而获得需要的component style。

 

CL_StyleManager就象一个工厂类。当从一个gui 定义文件里装载components时，component manager就会让style manager创建指定的控件。

 

CL_GUIManager

The GUI manager is the root comopnent in clanGUI. It should always be the top-level component in any component tree. The GUI manager contain the main message pump for the GUI and is responsible for routing events from clanCore and clanDisplay into the GUI system.

 

GUI Manager是 clanGUI的根component 。它总是一棵component 数的根部。GUI Manager包含很多需要处理的消息，并且它也负责把clanCore和clanDisplay中的事件传送到GUI系统里。

 

CL_ComponentManager

The component manager is the interface used to load GUI component trees from a GUI definition file. Have a look on the login_view.cpp/h files in the CTalk example for an example of how to use it.

 

component manager提供从GUI定义文件中装载GUI component树的接口。