WebKit을 갖고 작업할 때, 꼭 풀어야 하는 문제중 하나가 커스텀 JS Object를 추가하는 일이다. 관련 자료를 아래와 같이 요약한다.


JS Object 확장 방식

 

 

관련 뉴스그룹 기사

http://www.nabble.com/Extending-webkit-javascript-td21517784.html#a21536928

l  frameLoadDelegate2::didClearWindowObject() custom JS object JS context에 등록하는 최적의 자리다. 해당 함수는 현재 web 문서의 스크립트가 실행되기 직전에 호출된다.

 

 

커스텀 JS Object 추가 절차 요약

l  $/JavaScriptCore/API/tests/testapi.c 파일과
$/JavaScriptCore/API/JSObjectRef.h
파일에 유용한 정보가 있다.

l  JSClassDefinition 구조체의 staticValues 필드와 staticFunctions 필드를 이용하는 것이 커스텀 속성을 가진 커스텀 JS Object를 정의하는 가장 간단한 방법이다.

l  커스텀 속성을 가진 커스텀 객체를 정의하려면

n  커스텀 속성을 위한 get 함수와 set 함수를 준비한다 (ingeeGetPropFunc 함수)

n  커스텀 속성 테이블 JSStaticValue 배열을 준비한다 (ingeePorpArr 배열)

n  커스텀 객체를 위한 JSClassDefinition을 정의한다 (ingeeClassDef 변수)

n  적절한 시점에 JSClassCreate() 함수를 호출하여 타입을 등록한다

n  적절한 시점에 JSObjectMake() 함수를 호출하여 객체를 생성한다

 

static JSValueRef ingeeGetPropFunc

( JSContextRef ctx

, JSObjectRef object

, JSStringRef propertyName

, JSValueRef* exception

)

{

return JSValueMakeUndefined(ctx); //undefined-value 리턴 (단지 샘플...)

}

 

static JSStaticValue ingeePorpArr[]=

{ { "prop1", ingeeGetPropFunc, 0, kJSPropertyAttributeNone }

, { "prop2", ingeeGetPropFunc, 0, kJSPropertyAttributeNone }

, { "prop3", ingeeGetPropFunc, 0, kJSPropertyAttributeNone }

, { 0, 0, 0, 0 }

};

 

static JSClassDefinition ingeeClassDef=

{ 0 //ver

, kJSClassAttributeNone //attributes

, "PersonObject" //className

, 0 //parentClass

, ingeePorpArr //staticValues

, 0 //staticFunctions

, 0 //initialize

, 0 //finalize

, 0 //hasProperty

, 0 //getProperty

, 0 //setProperty

, 0 //deleteProperty

, 0 //getPropertyNames

, 0 //callAsFunction

, 0 //callAsConstructor

, 0 //hasInstance

, 0 //convertToType

};

 

JSValue* SomeFuncToCreateJSObject( ExecState* exec )

{

static JSClassRef ingeeClass;

if (!ingeeClass)

ingeeClass= JSClassCreate(&ingeeClassDef);

 

JSContextRef ctx= JSC::toRef(exec);

JSObjectRef objRef= JSObjectMake(ctx, ingeeClass, (void*)0/*someData*/ );

return JSC::toJS(objRef);

}

 

 

(끝)

Posted by ingeeC
,

DOM2 Events Spec 요약

Dev 2009. 5. 19. 14:29
W3C의 DOM2 Events Spec을 다음과 같이 요약한다.
http://www.w3.org/TR/DOM-Level-2-Events/


1.1. Overview of the DOM Level2 Event Model
1.1.1. 용어
UI events
user interface event. 마우스, 키보드 등을 통해 사용자가 발생시키는 이벤트

UI Logical events
focus change 또는 element triggering 같은 장치와 무관한 이벤트

Mutation events
DOM 내용이 바뀔 때 발생하는 이벤트

Capturing
event가 event-target에서 처리되기 전에 event-target의 ancestor 들에서 먼저 처리되는 것

Bubbling
event가 event-target에서 처리된 다음 ancestor들로 전파되는 것


1.2. Description of event flow
1.2.1. Basic event flow
event-listener 처리중에 exception이 발생하더라도 evcent는 계속 전파된다.

1.2.2. Event capture
capture는 top node (Document node)에서부터 target node까지 전파된다.
Event::stopPropagation() 메소드로 capturing을 중지시킬 수 있다. 단, stopPropagation()이 호출된 level의 event-listener 들은 모두 호출된다.

1.2.3. Event bubbling
capturer로 등록된 event-listener 들은 bubbling phase에서는 호출되지 않는다.
Event::stopPropagation() 메소드로 bubbling을 중지시킬 수 있다. 단, stopPropagation()이 호출된 level의 event-listener 들은 모두 호출된다.

1.2.4. Event cancelation
cancelable한 event는 Event::preventDefault() 메소드를 호출해서 implementation의 default 동작을 취소 시킬 수 있다. 즉, hyper-link를 클릭해도 해당 link로 이동하지 않게 만들 수 있다.


1.3. Event listener registration
1.3.1. Event registration interfaces
EventTarget::dispatchEvent() 메소드로 이벤트를 직접 전달할 수 있다.
EventTarget::dispatchEvent() 메소드로 이벤트를 fire 시켜도 capturing과 bubbling이 동일하게 발생한다.


(끝)
Posted by ingeeC
,

WebKit 화면 구성 요소

Dev 2009. 5. 15. 15:02

본 기사는 2008년 12월 버전 (rev. 39476) WebKit win32 port를 기준으로 한다.

http://webkit.org에 존재하는 “WebKit Objective-C Programming Guide” 문서를 보면 다음과 같은 그림이 존재한다.



이 그림에서 aWebFrameView는 폐기됐다 (적어도 windows port에서는…). 지금 현실에 맞게 그림을 재구성하면 다음과 같다.


  • WebView는 WebKit 엔진을 담고 있는 main-window를 나타내는 개념이다.
  • WebFrame은 WebKit이 표시하는 페이지를 나타내는 개념이다.
    • WebView는 1개의 WebFrame을 main-frame 멤버로 갖는다.
    • WebFrame은 0개 또는 여러 개의 WebFrame을 children 멤버로 가질 수 있다 (HTML & 태그 처리…).


화면 구성 요소들에 대한 클래스 다이어그램은 다음과 같다.



언제나처럼 이미지를 클릭하면 원본 크기로 볼 수 있다.

 

Posted by ingeeC
,
이전 기사에서 사용자가 URL을 입력했을 때, WebKit이 해당 페이지를 load 하는 시퀀스를 분석했었다. 이번에는 페이지가 load되어 있는 상태에서 사용자가 웹페이지의 HTML Anchor를 클릭했을 때 WebKit이 새로운 페이지를 load 하는 시퀀스를 정리한다. 서론이 다소 길었다. 사실 다음 시퀀스 다이어그램이 전부다. FrameLoader::loadWithDocumentLoader() 이후의 시퀀스는 이전 기사의 FrameLoader::load(docLoader) 호출 이후의 시퀀스와 동일하다.



이미지를 클릭하면 원본 크기로 볼 수 있다.
Posted by ingeeC
,

WebKit의 핵심 시퀀스를 요약하면 아마 다음과 같을 것이다.
- URL 문서를 loading 하는 시퀀스
- loading한 문서를 parsing 하는 시퀀스
- parsing된 내용의 layout을 결정하는 시퀀스
- 구성한 화면을 출력하는 시퀀스

이들중 "URL 문서를 loading하는 시퀀스"를 분석하게 됐다.
WebKit을 갖고 일하는 개발자들에게 조금이라도 보탬이 되면 좋겠다. 혹시나 분석한 내용에 오류가 있다면, 댓글이나 트랙백으로 가르침 주시기 바란다. 분석에 사용한 WebKit은 작년말(2008년 12월) 버전이며 (rev. 39476), cURL을 사용하는 win32 port를 기준으로 하고 있다.

URL을 load 하는 시퀀스를 분석하면서 WebKit에 존재하는 수 많은 종류의 loader들 때문에 골치 아팠다. 대강의 내용을 정리하면 다음과 같다 (클래스 다이어그램에 메모박스로 주석 달아 놓았다).
- FrameLoader : URL-load 과정을 총괄하는 loader (1개의 frame에는 여러개의 web-page가 load될 수 있다).
- DocumentLoader : 1개의 web-page load를 책임지는 loader.
- MainResourceLoader : base-document (HTML 문서) load를 책임지는 loader.
- ResourceLoader : sub-document (CSS, js, image, ...) load를 책임지는 loader.

분석한 내용을 다음 2장의 UML 다이어그램으로 정리한다. 이미지를 클릭하면 원본 크기로 볼 수 있다.


<<URL load 과정에 참여하는 Class 들>>

 

<<URL load 간단 시퀀스 (HTML 파일 1개로만 이루어진 페이지 load 시퀀스)>>


분석을 위해 다음과 같은 뉴스그룹 기사들을 참고했다. 다른 사람들에게도 참고가 되기를 바라며, 해석 없이 그대로 올린다.


"문서 load 시퀀스"
from http://osdir.com/ml/opendarwin.webkit.devel/2006-10/msg00041.html
======================================================================

Main resource loaded, started from app via API:

[ WebFrame ] (ObjC, WebKit)
[ FrameLoader ] (C++, WebCore) ---> [ FrameLoaderClient ] (C++ abstract base class, implemented in webkit to deliver delegates)
 [ DocumentLoader ] (C++, WebCore)
[ MainResourceLoader ]  (C++, WebCore)
[ ResourceLoader ] (C++, WebCore)
[ FrameLoader ] (C++, WebCore)

 

Main resource loaded, started from engine via link click or form submission:

[ FrameLoader ] (C++, WebCore) ---> [ FrameLoaderClient ] (C++ abstract base class, implemented in webkit to deliver delegates)
 [ DocumentLoader ] (C++, WebCore)
[ MainResourceLoader ]  (C++, WebCore)
[ ResourceLoader ] (C++, WebCore)
[ FrameLoader ] (C++, WebCore)


Subresource load:

[ DocumentLoader ]  (C++, WebCore)
[ Cache ] (C++, WebCore)
[ FrameLoader ] (C++, WebCore) ---> [ FrameLoaderClient ] (C++ abstract base class, implemented in webkit to deliver delegates)
 [ SubresourceLoader ] (C++, WebCore)
[ ResourceLoader ] (C++, WebCore)
[ Cache ] (C++, WebCore)
[ CachedResource ] (C++ WebCore)

 

"Loader의 종류 및 역할"
from http://www.nabble.com/Role-of-all-loaders-to22115931.html#a22172592
========================================================================

Re: Role of all loaders  
by Darin Adler Feb 24, 2009; 08:28am :: Rate this Message:    (use ratings to moderate[?])

> FrameLoader

Controls the process of loading web pages into a frame. Contains all  
the loading-related functions and data instead of having them all on  
Frame itself. There’s one of these for each frame.

> DocumentLoader

Controls the process of loading one particular web page into a frame.  
When a new page is loaded, the frame loader creates a new document  
loader and then later destroys the old one.

> DocLoader

Part of the caching machinery. Manages the cached loading for a  
particular document. May be merged with DocumentLoader at some point  
in the future, or perhaps renamed.

> MainResourceLoader

FrameLoader and DocumentLoader use ResourceLoader objects to load  
individual resources. The main resource is the HTML file (or SVG file  
or whatever). The ResourceLoader for the main resource is a  
MainResourceLoader.

> Sub resource Loader

The ResourceLoader objects for subresources such as images, scripts,  
and CSS style sheets are SubresourceLoader objects.

     -- Darin

 

"URL loading중 발생하는 frameLoaderClient를 통한 이벤트"
from http://www.nabble.com/FrameLoaderClient-notifications-to16025970.html#a16030339
=====================================================================================
Re: FrameLoaderClient notifications  
by Darin Adler Mar 14, 2008; 02:37am :: Rate this Message:    (use ratings to moderate[?])

> I suppose the following order of loading events for a page with a  
> single frame (please, correct me, if I'm wrong):
>
> page load started
> main document load started
> title received
> icon received
> * main document load finished
> ** resource load started
> resource load finished
> page load finished
...[show rest of quote]

The the FrameLoaderClient functions about the frame (not the ones that  
take DocumentLoader*) are what you want. They are all about this  
cycle. dispatchDidStartProvisionalLoad is the one that goes first, and  
then there are quite a few others, ending with dispatchDidFinishLoad,  
dispatchDidFailLoad or dispatchDidFailProvisionalLoad.

> OK, I see. Is there any other load process other than provisional?

All loads start provisional.

>> dispatchWillSendRequest will be called repeatedly with different  
>> URLs when a server does redirection. This is normal. How it should  
>> be handled depends on what API you've devised.
>
> Is there any separate notification about redirection, or this method  
> is enough?

There is
dispatchDidReceiveServerRedirectForProvisionalLoad for loads of the  
main resource of a frame, but dispatchWillSendRequest alone is all  
that's needed for arbitrary resource loads.

> One more question: is there any method about starting loading of an  
> external resource? Is it dispatchWillSendRequest?  
> dispatchDidReceiveResponse?

assignIdentifierToInitialRequest and dispatchWillSendRequest

     -- Darin

 

"HTTP 스택은 누가 처리하나?"
from http://www.nabble.com/Complicated-Loaders-to18706606.html#a18724848
========================================================================

The sequence of FrameLoader and DocumentLoader functions is indeed complicated
and overloaded.  This is slowly being improved over time, little by little. 
And no, there is no documentation at this time.


I'm not sure of the exact motivation for your question, but you did end on
a very specific note so this might be of use.  The question of "how WebKit is
invoking the HTTP stack" is much simpler - the ResourceRequest, ResourceHandle,
and ResourceResponse classes are all fairly encapsulated and represent
HTTP connections.

~Brady

Posted by ingeeC
,

UML의 Class Diagram에 관해

Dev 2009. 4. 23. 12:19
UML 하면 떠오르는 다이어그램이 무엇일까?
대부분의 사람들이 Class Diagram을 UML의 대표 다이어그램으로 떠올린다. 그래서 UML을 도구로 S/W를 설계할 때 Class Diagram을 먼저 그리려고 애쓰곤 한다. 그런데, Class Diagram은 UML의 모든 다이어그램들 중에서 abstraction degree (추상화 정도)가 가장 높은 다이어그램이다. 순서로 따지자면 S/W 설계시에 가장 마지막에 그려야 할 다이어그램이다.

웹킷을 가지고 작업하면서 WebKit 코어를 헤집어보게 됐다. 분석한 결과를 블로그에 꾸준이 올리려고 한다. 그러기에 앞서 분석을 설명하는 "언어"에 대해 일러두려 한다. UML은 소프트웨어 형상에 관한 자신의 생각을 표현하는 "언어"다. 클래스 다이어그램을 그리는 많은 기법들이 존재하는데, 일러두려고 하는 것은 클래스와 클래스 사이의 association (연관관계) 표기에 관한 것이다.


앞으로 블로그에 올리는 클래스 다이어그램에서는 클래스와 클래스 사이의 관계를 가능한 association-line과 role-name 만으로 표현하려고 한다. 하얀 다이아몬드와 검은 다이아몬드 같은 예쁜 기호는 가능한 사용하지 않으려고 한다. 사용하는 어휘가 많아질수록 오해의 여지가 높아지기 때문이다. 위의 그림에서 표기한 ClassA와 ClassB 사이의 관계를 문장으로 옮기면 "ClassA is role-A of ClassB", "ClassB is role-B of ClassA"와 같다. 이와 같은 표기법은 당연(?)하게도 내 생각이 아니다 (분하다...). 훌륭한 선배 개발자의 경험에서 우러난 가이드이다 (클래스 다이어그램 그리는 법에 관한 책을 통해 배운 방법이다. 그 책의 저자는 임베디드 분야에서 무척 많은 경험을 쌓은 훌륭한 S/W 엔지니어였다).
Posted by ingeeC
,
웹킷 뉴스 그룹은 작업 정보의 보고다.
일이 막힐 때, 머리를 비우고 아래 사이트에서 검색어를 입력한 다음 일년치 정도의 기사를 정독하면 문제 해결의 실마리를 잡을 수 있을 것이다.

http://www.nabble.com/Webkit-f14949.html
Posted by ingeeC
,

WebKit 포팅에 관해

Dev 2009. 3. 31. 12:42
단말 엔지니어에게 포팅이란,
HAL API를 타겟 플랫폼에 맞게 구현해주는 작업이다. WIPI를 비롯한 기타 단말 솔루션들은 HAL API set 이 분명하게 정의되어 있다. 정해진 C함수들을 정해진 규격대로 구현하면 포팅이 끝난다. 근데 WebKit 은 이게 모호하다. 플랫폼에 dependent 한 포팅 레이어가 소스 트리 여러 곳에 산재해 있다. 기존 WIPI 포팅에 익숙한 한국의 단말엔지니어에게는 난감한 구조다. 하지만 여기에도 WebKit 나름의 규칙과 일관성이 있다. 익숙해지면 그럴만 하다고 동의할 수 있는 문제다.

WebKit port 의 특징은 포팅 타겟을 OS 로 한정하지 않는다는 점이다.
WebKit의 포팅 타겟은 Windows 나 Linux 같은 OS가 아니라, CoreGraphics, Cairo 같은 그래픽 툴킷, CFNetwork, CURL 같은 네트웍 툴킷이다. Cairo 가 올라간 OS 면 Windows 든 Linux 든 WebKit Cairo port 가 화면을 출력할 수 있다. 마찬가지로 CURL 이 올라간 OS 면 Windows 든 Linux 든 WebKit CURL port 가 네트웍을 이용할 수 있다.

WebKit 이 요구하는 툴킷들을 나열하면 대략 다음과 같다.
* 그래픽 툴킷 : CoreGraphics 또는 Cairo
* 네트웍 툴킷 : CFNetwork 또는 CUrl
* 이미지 디코더 : giflib, jpeglib, libpng ...
* XML 파서 : libxml, libxslt
* DB 라이브러리 : SQLite

WebKit 포팅 절차를 요약하자면 다음과 같다.
1. 사용할 툴킷 set 을 선택한다.
2. 선택한 툴킷을 타겟 OS 또는 타겟 device 에 포팅한다.
3. WebKit 을 올린다.

간단하다.
하지만 언제나 그렇듯, 간단함에도 불구하고 일이 되려면 개발자의 눈물겨운 노력이 있어야 한다.
Posted by ingeeC
,

StarUML

Dev 2009. 1. 13. 18:56

StarUML은 UML을 그리는 도구다.
한 10년 전에는 상용으로 판매됐던 도구인데, 현재는 무료 오픈 소스 프로젝트로 전환됐다. 비싸기로 유명한 Rational Rose를 비롯해서 여러개의 UML 도구를 써봤는데, StarUML이 최고였다. UML이 필요하다면 고민하지 말고 가져다 쓸 것을 권한다. 중요하진 않지만, 자랑스럽게도 우리나라에서 만든 툴이다. 그래서 '한국어'로 된 매뉴얼이 존재한다 (이건 중요하다).

http://staruml.sourceforge.net/ko/index.php

Posted by ingeeC
,
XP에서 WebKit을 빌드하고 나서, WebKit의 실행 얼게를 분석하고 있다.
웹킷을 엔진으로 이용하는 어플리케이션을 어찌 작성해야 하는지 분석하려면, XP WebKit 프로젝트에 포함된 WinLauncher를 이용해야 한다. 이를 이용하는데도 약간의 노하우가 필요하다. 이에 관한 내용을 다음과 같이 정리한다.

1. Isolated COM Component
WinLauncher는 WebKit.dll 에 COM 콤포넌트 형태로 포함된 다양한 WebKit 모듈들을 호출해가며 동작한다. 내 개발 머신에는 사파리 브라우저가 깔려있고, 사파리 폴더에 WebKit.dll 이 존재한다. 근데, WinLauncher.exe가 실행될 때 사파리 폴더에 존재하는 WebKit.dll 이 아니라, WinLauncher.exe 와 같은 폴더에 있는 WebKit.dll 을 로드하는게 너무 신기했다. 이건 COM DLL인데 말야. 레지스트리에는 분명 사파리 폴더에 있는 WebKit.dll path가 등록되어 있는데? 어찌된거지?
XP 이상의 윈도에서는 어플리케이션 빌드시 manifest 파일을 통해 로드될 COM DLL의 path를 지정할 수 있다고 한다. 이걸 isolated component 라고(맞나?) 부른다고 한다. 그래... 내가 윈도에 관한 공부를 게을리했다. 반성한다.

2. WinLauncher.exe 실행 팁
(
http://aautar.digital-radiation.com/blog/?p=98)

2.1. request->initWithURL() 타임아웃 설정

이젠 웹킷을 철저히 뜯어볼테다 결심하고 WinLauncher를 실행시켰다. 근데, WinLauncher.exe에서 네트웍이 안된다. http://naver.com 등에 접근할 수 없다. 아... WinLauncher는 샘플 코드라 네트웍 코드가 존재하지 않는가보다 하고 의심했다. 근데, 그게 아니었다. http://aautar.digital-radiation.com/blog/?p=98 글을 찾으니 답이 있었다. WebKit 메소드를 호출할때, 타임 아웃 설정이 필요하다고 한다.
WinLauncher 소스의 loadURL() 함수에서 request->initWithURL()를 호출할 때 인자를 다음처럼 설정해줘야 한다.
request->initWithURL(urlBStr, WebURLRequestUseProtocolCachePolicy, 60);

2.2. SafariTheme.resources 폴더 복사
그리고, WinLauncher.exe를 정상적으로 실행시키기 위해서는 사파리 폴더에서 SafariTheme.resources 폴더를 통째로 복사해와야 한다고 한다. 이거 무지하게 결정적인 정보다. 다른 것들은 어찌어찌 고생하면 해결할 수 있었을 것 같은데, 이건 해결 못했을 것 같다.

이런 정보가 존재하는 인터넷이 너무 고맙다. 이런 정보를 아낌 없이 공개하는 개발자들도 고맙고... 인터넷과 구글이 없었다면 개발을 어찌했을까...

WinLauncher 실행이미지를 첨부한다. 에디트 콘트롤에 URL을 입력하면, 해당 페이지로 이동한다.

Posted by ingeeC
,