Upload
ryuan-choi
View
510
Download
2
Embed Size (px)
DESCRIPTION
Few tutorials and internals of ewebkit
Citation preview
ewebkitintro, internal and ewebkit extension
ryuan.choi (최병운)
content
● Introduction of ewebkit● Tutorials● Internals● ewebkit extension● Information, links
ewebkit
webkit based rendering engine for EFL.TIZEN(2.x) uses ewebkit.current version of ewebkit : 1.11WebKit2 multi process architecture.
ewebkit - features
- Many HTML5 features- INDEXED DATABASE(X)
- Accelerated compositing- Viewport meta tag- Fixed Layout- Touch event- UI Side compositing
● Source code○ Latest : git://git.webkit.org/WebKit.git ○ Stable : [email protected]:ewebkit/webkit.git
http://download.enlightenment.org/rel/libs/webkit-efl/● Document : http://ewebkit.github.io/ewebkit-doc● Samples : [email protected]:ewebkit/samples.git● IRC(FreeNode) : #webkit-efl , #webkit-kr● Mailing list : [email protected]
○ https://lists.webkit.org/mailman/listinfo/webkit-efl● Wiki : http://trac.webkit.org/wiki/EFLWebKit
ewebkit
EFL(evas, ecore, …)
ewebkit vs elm_web
Elementary
ewebkit
● elm_web is optional winset of Elementary○ ./autogen.sh --with-elementary-web-backend=ewebkit2
● TIZEN does not use elm_web yet.
elm_web
use
EFL(evas, ecore, …)
Elementary
ewebkit
use
<open source> <TIZEN>
How to build/install ewebkit# Download source codewget http://download.enlightenment.org/rel/libs/webkit-efl/ewebkit-1.11.0.tar.xztar xvJf ewebkit-1.11.0.tar.xz # extract from archievecd ewebkit # move to the root directory of souce code.mkdir build && cd buildcmake .. -DPORT=Efl -DENABLE_BATTERY_STATUS=OFF -DCMAKE_INSTALL_PREFIX=/usr/elocalmake -j8 && sudo make install
Tutorial - first example// gcc simple_load_elm.c `pkg-config --cflags --libs elementary ewebkit2`#include <Elementary.h>#include <EWebKit2.h>
EAPI_MAIN int elm_main(int argc, char *argv[]){ ewk_init(); Evas_Object* win = elm_win_add(NULL, "sample", ELM_WIN_BASIC); elm_win_title_set(win, "sample"); ... Evas_Object* bg = elm_bg_add(win); ...
Evas_Object *ewk = ewk_view_add(evas_object_evas_get(win)); evas_object_smart_callback_add(ewk, "load,progress", progress_cb, NULL); ewk_view_url_set(ewk, "http://bunhere.tistory.com"); evas_object_resize(ewk, 400, 400); evas_object_move(ewk, 0, 0); evas_object_show(ewk);
elm_run();
ewk_shutdown();}ELM_MAIN()
# ps -ef | grep a.outryuan 23281 13874 0 23:01 pts/22 00:00:00 ./a.outryuan 23373 23304 0 23:01 pts/24 00:00:00 grep --color=auto a.out# ps -ef | grep WebPrryuan 23286 23281 0 23:01 pts/22 00:00:00 /usr/elocal/bin/WebProcess 25ryuan 23377 23304 0 23:01 pts/24 00:00:00 grep --color=auto WebPr
https://github.com/ewebkit/samples/blob/master/samples/ewebkit/simple_load_elm.c
Major objects
● ewk_view (evas object)○ view object to load and draw web contents.○ based on smart object.
● Ewk_Context (Ewk_Object)○ Instance to represent and control processes.○ Each context only creates each web process.
● Ewk_Page_Group (Ewk_Object)○ Instance to represent and control session.
● Ewk_Settings
Major objectsApplication
ewk_context #1
ewk_page_group #1
ewk_context #2
ewk_page_group #2 ewk_page_group #3
ewk_view #1
ewk_view #2
ewk_view #3
ewk_view #4
WebProcess #1 WebProcess #2
Ewk_Object
● Almost ewk objects are based on Ewk_Object● Ewk_Object is just simple smart pointer.● There are two APIs to control the life of objects
○ ewk_object_ref○ ewk_object_unref
Tutorial 2 - window.alert()static voidon_javascript_alert(Ewk_View_Smart_Data *smartData, const char *message){ … }
EAPI_MAINint elm_main(int argc, char *argv[]){ … // Evas_Object* ewk = ewk_view_add(evas_object_evas_get(win)); static Ewk_View_Smart_Class ewk_view_class = EWK_VIEW_SMART_CLASS_INIT_NAME_VERSION("SimpleEwkClass"); ewk_view_smart_class_set(&ewk_view_class); ewk_view_class.run_javascript_alert = on_javascript_alert;
Evas_Smart *smart = evas_smart_class_new(&ewk_view_class.sc); Evas_Object *ewk = ewk_view_smart_add(evas_object_evas_get(g_win), smart, ewk_context_default_get(), ewk_page_group_create(NULL));
// theme path should be calculated via “pkg-config --variable=datadir ewebkit2” ewk_view_theme_set(ewk, "/usr/share/ewebkit2-1/themes/default.edj");
// ewk_view_url_set(ewk, "http://bunhere.tistory.com"); ewk_view_html_string_load(ewk, "<!doctype html><body><input type=button onclick=\"window.alert('hello');\"></body>", NULL, NULL); ...}ELM_MAIN()https://github.com/ewebkit/samples/blob/master/samples/ewebkit/simple_popup.c
Methods of Ewk_View_Smart_Class
Internals
Read How browsers work (korean)
webcore
javascript core
EFL, cairo, libsoup, gstreamer, ...
ewebkit
html, css, js
DOM Tree
Render Tree
RenderLayer Tree
GraphicsLayer Tree
Page
Internals - WebKit2
Multi process architectureWebProcess UIProcess
webcoreJSC
WebPage DrawingArea WebPageProxy
DrawingAreaProxy
IPC
IPCWebProcess WebProcess
Proxy
WK Interface
ewk interface
WebContext
WorkQ
ueue Wor
kQue
ue
NetworkProcess ...
Internals - ewk_view
WebView EwkViewWKView
ewk_view(evas_object)
Ewk_View_Smart_Class
Ewk_View_Smart_Data
Evas_Smart_Class
evas_image
Evas_GLWebPageProxy WKPage
Internals - Coordinated Graphics
http://trac.webkit.org/wiki/CoordinatedGraphicsSystem
Internals - Coordinated Graphics
● WebProcess draws the render tree.○ Into not one surface but multiple layers.
(Accelerated compositing)○ Each layers also consist of multiple tiles.
(Tiled BackingStore)○ Tile memory and layer states are shared between
UIProcess and WebProcess.● UIProcess composite layers.(UI side compositing)
○ UIProcess ‘can’ scroll/scale the layers.
ewebkit extension
ewebkit-extension is simple interface to inject user’s shared objects to WebProcess for the extension such as javascript binding.
Plan to add it intorelease 1.13
libewebkit2.so
ewebkit extensionWebProcess UIProcess
webcoreJSC
WebPage DrawingArea WebPageProxy
DrawingAreaProxy
IPC
IPCWebProcess WebProcess
Proxy
WK Interface
ewk interface
WebContext
WorkQ
ueue Wor
kQue
ue
InjectedBundle
libewebkit_extension_manager.so
extension.so applicationextension.so
WK Interface
ewk interface
JSC interface
Information, links
● source code○ Development : http://www.webkit.org/building/checkout.
html○ Release : https://github.com/ewebkit/webkit
● doxygen○ http://ewebkit.github.io/ewebkit-doc/ewebkit2/html/
● samples○ https://github.com/ewebkit/samples
● simple browser○ https://github.com/bunhere/elbow
Information, links
● http://trac.webkit.org/wiki/EFLWebKit● http://trac.webkit.
org/wiki/CoordinatedGraphicsSystem