Android 2.3 webkit

1. Preface

You should be familiar with WebView. It is a control used to display web pages in Android. Only a few lines of code are required to display web pages, as shown below:

Public class WebViewDemoActivity extendsActivity {

@ Override

Public void onCreate (Bundle savedInstanceState ){

Super. onCreate (savedInstanceState );

SetContentView (R. layout. main );

MWebView = (WebView) findViewById (R. id. webview );

MWebView. loadUrl ("http://www.bkjia.com ");

}

}

In this way, when WebViewDemoActivity is started, the google homepage is displayed. You can also enter keywords to search. What exactly does the WebView loadUrl function do? We entered the Webkit world of android with curiosity.

2. UML Sequence Diagram for webpage Loading

Here we first provide the uml sequence diagram of the loadUrl process, and then analyze it slowly. .

3. WebKit Introduction
As mentioned above, what exactly is Webkit? What is the relationship between it and the WebView we are familiar? Here, I will refer to the online explanation: "WebKit is an open-source browser web page typographical engine, including The WebCore typographical engine and JSCore engine. The WebCore and JSCore engines are from the KHTML and KJS open-source projects of the KDE project. The Web engine framework of the Android platform uses the WebCore and JSCore parts of the WebKit project. The upper layer is encapsulated in Java and provided to Android Application developers as APIs, the underlying layer uses the WebKit core library (WebCore and JSCore) for web page layout." It can be seen that WebView is the upper-layer API provided by Android Webkit for application developers.
A lot of great software is portable, and Webkit is no exception. Currently, Webkit supports Qt, Gtk, and Android. We all know that porting is conditional. For example, to port a linux system to a hardware platform, the hardware platform must have at least a hardware timer for process scheduling, mmu must be provided to support virtual memory management, and the system ram and flash space must also have a bottom line requirement. What are the conditions required for porting Webkit? First, analyze the process of Webkit loading web pages:
L download the html file from the url address to the local device.
L lexical analysis and syntax analysis
L draw
Obviously, Webkit depends on platform-related network interfaces and graphical interfaces, as shown in:

The portable software can be divided into two parts: Platform-related code and platform-independent code. The interaction between the two parts is completed through a fixed interface, of course, Webkit is no exception. For Android Webkit, we can simply look at it as two parts: Android and WebCore. Android to Webcore is of course a direct call relationship, and WebCore sometimes needs to call back some Android code, which needs to be completed through a set of fixed interfaces defined by WebCore. As shown in, ResourceHandle is an interface for WebCore to obtain network resources. The Android platform calls the class implementation in the android.net. * package of the Android API. GraphicContext is the interface for WebCore to draw pages. The Android platform implements this interface by calling the 2D drawing engine Skia of the Android platform.
 
 
 
4. webpage Loading Process Analysis
There is a very important concept that needs to be explained. Frame is translated into Chinese as a "Frame". An html page consists of an example, that is, an html page contains a MainFrame, mainFrame can contain 0 to n sub-frames. A Frame corresponds to a Url. If the MainFrame contains a sub-Frame, the content of the sub-Frame is embedded into a space of the MainFrame.

In WebKit, there is a struct WebCore: Frame, which contains all the data parsed by a Web page. The following is the process from a Url to generating a MainFrame.

The next step is to display the data in the Main frame. This part of code is implemented on different platforms. We use Android as an example. First, it must be noted that Android Webkit completes webpage loading through three threads:
L UI thread: the thread for dispatching events in the Android graphics system. The onDraw and onTouchEvent functions of WebView run in this thread. The UI thread only performs some lightweight work and transfers the time-consuming work to The Webcore thread for processing.
L WebCore thread: created in the andriod. webkit. WebViewCore class, responsible for html file parsing and other tasks.
L download thread: created in android. webkit. WebViewWorker, responsible for downloading html from a specified url.

When WebView. the thread collaboration Diagram for loadUrl is as follows. The UI thread sends a message to the WebCore thread. When the WebCore thread receives a message, it submits the download task to the download thread. After the download thread completes the download, it notifies the WebCore thread to parse the html, after the WebCore thread parses html, it notifies the UI thread to refresh the interface.

Review this figure:

The Webcore thread starts the download thread to download html through ResourceHandleAndroid, then the WebCore thread performs html parsing, and finally generates a Main frame that can describe the entire html page, and then notifies the UI thread to draw the page. Assuming that the UI thread needs to plot by analyzing Mainframe in the onDraw function, it may not feel smooth. Therefore, after the WebCore thread generates the Frame struct, it does another job: parse the Main frame and draw it to a piece of memory, when using onDraw, the UI thread only needs to draw the content in the memory to the screen. This memory is called PictureSet. Picture is a collection of images. The Main frame is a collection of frames. The Picture in the PictureSet corresponds to the Frame in the Main frame.
Do you still remember the previously mentioned Code layers? PictureSet belongs to the Webkit's Andriod porting layer, while Frame belongs to The WebCore layer. That is to say, after a Frame is generated by WebCore, the task is completed, and then the Android porting layer is notified through a fixed interface, the Android porting layer then analyzes the Frame to generate the PictureSet. After PictureSet is generated, the UI thread update interface is notified, and PictureSet is drawn to the canvas in WebView. onDraw.
It should be further noted that the Webkit porting layer of Android has more jni than other platforms. by reading the code, you will find WebView, webViewCore and other classes exist in Java and C ++, which are implemented together with Java and c ++.
 
 

5. Android Webkit plugin

5.1. Purpose of this Chapter

Guide readers to understand the plug-in Framework of Android Webkit, read and think of valuable articles by introducing my research process, and explain the difficult points in SampleBrowserPlugin the Android Framework source code, I hope to clear the reader's questions about how to write the Android Webkit Plug-in. SampleBrowserPlugin is a routine of the Android Webkit Plug-in. It is located in the development/samples/BrowserPlugin directory of the source code. Check the README file first.

5.2. I recommend you read several articles first.

L. After reading this article, I will solve the following problems:
(1) What is the Webkit Plug-in?
(2) functions and structures of the NPAPI.

L http://www.bkjia.com/kf/201203/123162.html:this article will help you have a simple understanding of the android Webkit Plug-in.

L http://www.bkjia.com/kf/201203/123163.html:this article introduces two Android Webkit Plug-ins.

5.3. Architecture

Plug-ins are used to expand webkit and are the think tank of webkit. For example, there is a new type of data embedded in a webpage, as shown in, webkit does not know how to handle it, in this case, webkit will ask his plug-ins how to process data of the "application/x-shockwave-flash" type.

 

<Embed src = "http://player.youku.com/player.php/Type/Folder/Fid/13005645/Ob/1/Pt/0/sid/XMzAxNDEwMTY4/v.swf" Quality = "high" Width = "480" Height = "400" Align = "middle" AllowScriptAccess = "always" AllowFullScreen = "true" Mode = "transparent" Type = "application/x-shockwave-flash"> </Embed>

 
Webkit is written first, and the plug-in is generated later. Webkit designers write base classes, and plug-in writers write child classes to implement virtual functions of the base classes. Webkit also provides APIs for subclass calls of the plug-in. The architecture is the same as that of the Android Framework. The control point of the plug-in system is webkit (framework ).

NPPluginFuncs of is the interface that the plug-in must implement. If your plug-in needs to expand the interface specified by the browser, it calls the function of the plug-in through the javascript script on the web page, NPClass must be inherited for extension. The following code demonstrates how to call the extension interface of the plug-in on a webpage:

1.<EmbedType = "application/plugin-mimetype"> 2.<Script> 3. var embed = document. embeds [0]; 4. embed. nativeMethod (); 5. alert (embed. nativeProperty ); 6. embed. nativeProperty. anotherNativeMethod (); 7.</Script>

 

5.14. Compile and install SampleBrowserPlugin

L go to the top-level directory of the android source code and run: make SampleBrowserPlugin.

Will generate out/target/product/generic/data/app/SampleBrowserPlugin.apk

L enable the simulator (sdcard support must be added when the simulator is created)

L run adb install "path to SampleBrowserPlugin.apk"

5.15. running routine

L write an s.html file with the following content:

<Objecttype = "application/x-testbrowserplugin" height = 50 width = 250>

<Param name = "DrawingModel" value = "Surface"/>

<Param name = "PluginType" value = "Background"/>

</Object>

L run adb push "path to s.html"/mnt/sdcard

L start the Browser program in the simulator and enter file: // mnt/sdcard/s.html or file: // sdcard/s.html in the address bar, the result shows that the plug-in is correctly loaded and run by the browser.

5.16. What does SampleBrowserPlugin.apk contain?

L libsampleplugin. so: the plugin implementation in the NPAPI will be installed in the/data/com. android. sampleplugin/lib directory.

L some java classes that work with libsampleplugin. so.

L a "inexplicable" Service.

Why is it "inexplicable "? Let's take a look at the content of SamplePlugin. java:

Public class SamplePluginextends Service {

@ Override

Public IBinder onBind (Intentintent ){

// TODO Auto-generated method stub

Return null;

}

}

 

At first glance, I think the code writer is joking. What is the use of such a Service? Let's look at the description of this Service in AndroidManifest. xml:

<Service android: name = ". SamplePlugin">

<Intent-filter>

<Action android: name = "android. webkit. PLUGIN"/>

</Intent-filter>

<Meta-data android: name = "type" android: value = "native"/>

</Service>

But without this Service, is it a little enlightening now? How does Webkit know the existence of this plug-in?

Webkit uses the PackageManager query system to respond to the Service of android. webkit. PLUGIN to obtain the plug-in installation path.

5.17. Understanding of the Surface and Bitmap Modes

L Surface mode: If the content to be drawn by plugin is dynamic, You need to draw on a separate surface.

L Bitmap mode: Webkit provides Bitmap for Plugin plotting. After Plugin draws on it, Webkit then draws the Bitmap content to the Surface where the WebView is located.

5.18. Detailed Analysis

If you are not familiar with it, check out the SampleBrowserPlugin code. In combination with the above documents, the Organization will be clear.

From silly concepts