Various signals will be discussed. It will also be shown how to avoid flickering when content is dynamically changing. The final part will give an overview of applications already using gtkhtml and what could be expected in the future.
Table of Contents Features overview Examples compiling Hello world Inlined images Embedded widgets Dynamic content How to avoid flickering Current state and future The END Features overview 特征概要 GtkHTML is a Gtk+ widget inherited from GtkLayout. GtkHTML provides these basic features:
HTML document rendering and printing HTML文档的渲染很打印 Gtk+ container - can embed Gtk+ widgets Gtk+集成-能嵌入Gtk+组件 HTML document editing HTML文档编辑 This paper is going to explain how to use GtkHTML to display HTML and how to compose a user interface layout with HTML. Editing will not be covered by this tutorial.
这一页将要解释怎样使用GtkHTML显示HTML以及怎样使用HTML撰写一个用户布局接口
GtkHTML doesn’t support JavaScript, CSS or DOM. If you need CSS 1,2 and/or DOM 1,2, then GtkHTML2 developed by CodeFactory is what you are looking for.
The following applications show various usages of GtkHTML’s features:
下面的应用程序显示GtkHTML的各种通常特征
Evolution uses GtkHTML to display and print mail messages and also for mail message composing (HTML editing) Evolution使用GtkHTML去显示和打印邮件信息，也提供邮件撰写，(HTML编辑) RedCarpet and GNOME Control Center uses GtkHTML for User Interface layouting RedCarpet和GNOME控制中心使用GtkHTML为用户提供布局接口 GnuCash uses GtkHTML for displaying and printing of reports GnuCash使用GtkHTML显示和打印报表 To compile the following examples you have to have gtkhtml and gtkhtml-devel packages installed. CFLAGS and LDFLAGS could be obtained using the gnome-config script.
Hello world Lets start with a simple “Hello world!” example. The following program creates a Gnome application window filled with GtkHTML widget loaded with simple content defined in the html_source C string.
constructor which creates a new GtkHTML widget loaded with the HTML document stored in str parameter. len is the length of str argument, if -1 is passed, then length is not used and is computed in the constructor. (The reason for this is to avoid repeatedly computing of length)
The next thing to note is that we have packed the GtkHTML widget into a scrolled window. This is pretty important. Older versions of GtkHTML were even segfaulting when the widget was not packed into a GtkScrolledWindow widget.
Also note, that GtkHTML requires GNOME libraries and GConf, thus you need to initialize them before the first call to the GtkHTML library and use gnome.h and gtkhtml/gtkhtml.h include files.
In the previous example we have shown how to display simple HTML document in GtkHTML widget. Now we modify this example so it could display HTML with inlined images. Lets modify html_source to:
If you try to compile and run the modified example, you will find out that instead of a smiley image, an empty rectangle is displayed. The GtkHTML widget itself does not handle loading of a data linked by an URL (i.e. file:smiley.png picture).
When GtkHTML requires data from an URL, it emits the url_requested signal. We need to provide a signal handler which will load data from the requested URL location. The following function handles retrieval of data from URLs in the form file:filename. In our case it will load a smiley PNG image.
/* url_requested signal handler which is able to provide data for file:* url's * in our case for inlined image(s) */ static void url_requested (GtkHTML *html, const char *url, GtkHTMLStream *stream) { int fd;
if (url && !strncmp (url, "file:", 5)) { url += 5; fd = open (url, O_RDONLY);
Note that we have used the gtk_html_new constructor and to load content, we used the gtk_html_load_from_string function. The reason for this is that we want to have the url_request signal handler connected before the content is loaded. Definition of newly used functions:
With older version of GtkHTML, the following must also be called:
GtkHTML的旧版本必要如下先调用:
gdk_rgb_init ();
function. 函数Now our example is complete and the following picture shows Example 2 running.
现在我的例子完成了，下面的图片是例２运行显示：
Figure 2. Screenshot of running Example 2
Complete example sources are available at
例子完整的源码可以在下载
Posted in GtkHTML Tutorial.
Programing with GtkHTML (下) 2009年07月20日 — arxccv Embedded widgets 嵌入式组件
In this section I will show you how to embed Gtk+ widgets into a GtkHTML widget. I will extend the previous example by embedding a Close button, which when clicked quits the example.
First we need to insert button to HTML source. This is achieved by the OBJECT tag with the attribute CLASSID. The following string is appended to the html_source string.
The next step is to provide Gtk+ button to GtkHTML. This is also done using signals. While GtkHTML parses its content, whenever it finds an OBJECT tag, it emits an object_requested signal. The following code implements our new signal handler, which creates the Close button:
Note that the handler has a boolean return value and returns TRUE if we have provided tje requested widget and FALSE if for some reason we cannot provide it. In such a case the HTML content between the opening and closing OBJECT tags will be used instead.
The next thing to notice is that the provided widget should already be shown (gtk_widget_show call) and added into a GtkHTMLEmbedded widget container, which is passed to callback as the 2nd (ew) parameter.
For Embedded widgets manipulation we need to include this header file:
因为嵌入组件的操作，所以我们必须包含这个头文件
#include
This is all we need for our Embedded widget example. The following picture shows Example 3 running.
这是我们所需要的嵌入组件的例子。下面的图片展示了例3的运行后
Figure 3. Screenshot of running Example 3
Dynamic content 动态内容
In this section I would like to show you a simple example of dynamically reloaded GtkHTML content. Real applications typically use more complicated HTML source, which will go outside the scope of this paper. So please take this just as a weak image.
For better image run RedCarpet and observe how dynamically created User Interfaces could work and look.
比较好的例子是运行RedCarpet并且观察如何动态创建可以工作和观看的用户接口。
My intention is to show you how dynamically created content and User Interfaces could work and to call your attention to possible problems which is explained in the next section. On you can find more examples, which I have found too long to include in this document.
and replace the gtk_html_load_from_string call with load_content.
并且改调用gtk_html_load_from_string为调用load_content.
The following picture illustrates Example 4 running (smiley picture is shown in different positions related to different time).
下面的图片说明了例4运行情况（笑脸图片根据不同的时间显示在不同的位置）
Figure 4. Screenshot of running Example 4
How to avoid flickering When you dynamically create HTML content for a GtkHTML widget which is then reloaded, in some cases (when you use the streaming API to load HTML content and write it in several pieces) you could experience unpleasant flickering. This is because GtkHTML was designed for progressive loads and tries to redraw its content progressively and thus repeatedly.
There are two ways to reduce or completely avoid GtkHTML’s flickering.
这里有两个方法去减少或者完全避免GtkHTML的闪烁
The first way is to set GtkHTML to blocking mode, where first (re)draw will happen after all streams are fully loaded. This means that GtkHTML will wait until all of the content and inlined images are loaded. Also note that blocking mode helps in cases where the IMG HTML tag does not have WIDTH and HEIGHT attributes specified.
The Second method is to preload images ahead. This is extremely useful in cases where you are reloading HTML content many times and repeatedly use the same images. To preload images, use
Image preloading avoids image reloading and redrawing which saves your CPU cycles and also reduces redrawing to a minimum.
图片预加载避免图片重载和重绘时能节省你的CPU运算周期，也能最大限度地避免重绘
If we return to the previous example, reducing flicker and unneeded image reloading and redrawing is achieved by inserting the following code before the load_content call
At the time of writing this tutorial, GtkHTML is available in the 1.0 stable version and development continues on the unstable 1.1 version. Some of the features indicated here are only available in the unstable version, namely the functions used to reduce flicker and images reloading.
The stable version of GtkHTML can be downloaded from and unstable from . It is also possible to get gtkhtml sources directly from GNOME CVS, module gtkhtml, HEAD branch for unstable and gtkhtml-1-0-branch branch for stable. For more information about using CVS please visit http://developer.gnome.org/tools/cvs.html .
Today GtkHTML is implemented for GNOME 1.4. A port to GNOME 2.0 is planned. Development of GtkHTML is closely tied to Evolution development, so porting will most probably happen at the same time as the Evolution port.
" 