forked from cefsharp/CefSharp
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathHome.html
More file actions
282 lines (265 loc) · 15.7 KB
/
Copy pathHome.html
File metadata and controls
282 lines (265 loc) · 15.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Getting started · CefSharp </title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/bootstrap.min.css" rel="stylesheet">
<!-- Page-specific extras -->
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/css/shCore.css" rel="stylesheet">
<link href="assets/css/shCoreDefault.css" rel="stylesheet">
</head>
<body>
<a class="sr-only" href="#content">Skip navigation</a>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="../" class="navbar-brand">CefSharp</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="active">
<a href="../getting-started">Getting started</a>
</li>
<li>
<a href="test-suite">Test Suite</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Docs page layout -->
<div class="bs-header" id="content">
<div class="container">
<h1>
Getting started
</h1>
<p>
An overview of CefSharp, how to use it, and an overview of some of the included features.
</p>
</div>
</div>
<div class="container bs-docs-container">
<div class="row">
<div class="col-md-3">
<div class="bs-sidebar hidden-print" role="complementary">
<ul class="nav bs-sidenav">
<li><a href="#introduction">Introduction</a></li>
<li>
<a href="#features">Features</a>
<ul class="nav">
<li><a href="#features-custom-schemes">Custom Schemes</a></li>
<li><a href="#features-javascript-integration">JavaScript Integration</a></li>
</ul>
</li>
<li><a href="#useful-links">Useful Links</a></li>
</ul>
</div>
</div>
<div class="col-md-9" role="main">
<div class="bs-docs-section">
<div class="page-header">
<h1 id="introduction">Introduction to CefSharp</h1>
</div>
<p class="lead">
Welcome to CefSharp! We are excited about you being here.
</p>
<p>
So, what is CefSharp, really? You probably have a bit of a clue already, since you've actually managed to
download (and perhaps even compile) the software. Nonetheless, let's try to explain it in a few bullet
points:
<ul>
<li>
<strong>A framework</strong> for embedding web-browsing-like capabilities to a standard .NET
application (WPF or Windows Forms).
</li>
<li>
<strong>A set of high-level custom controls</strong> to make it reasonably easy to integrate
these capabilities in your application.
</li>
<li>
<strong>
Built on top of <a href="http://code.google.com/p/chromiumembedded/">CEF</a>,
</strong> the Chromium Embedded Framework by Marshall A. Greenblatt.
</li>
</ul>
</p>
</div>
<div class="bs-docs-section">
<div class="page-header">
<h1 id="features">Features</h1>
</div>
<h3>State-of-the-art HTML5 and Javascript support</h3>
<p>
Perhaps very obvious, but still worth mentioning. Since CefSharp is based on
<a href="http://code.google.com/p/chromiumembedded/">CEF</a>, which is in turn based on
<a href="http://www.chromium.org/Home">Chromium</a> (version 29 for the time being), CefSharp provides
one of the best HTML5 rendering experiences available -
<a href="http://html5test.com/compare/browser/chrome-25/mybrowser/chrome-29/chrome-33/ie-11.html">
468-470+ points out of 555
</a> on <a href="http://www.html5test.com">html5test.com</a>. Note:
<a href="http://en.wiktionary.org/wiki/your_mileage_may_vary" title="Your mileage may vary">YMMV</a>
depending on .DLLs you add and features you enable.
</p>
<h3>Support for both x86 and x64</h3>
<p>
Chromium 29 supports both x86 and x64, and so do we as of CefSharp 3.29.0. For the time being, it does not
"auto-detect" the platform being used (since this is quite complex), so you have to choose either one for
your project. This practically means that you will have to compile & package separate
binaries/installers of your app for x86 and x64 respectively if you want/need to support both of them.
</p>
<h3 id="features-custom-schemes">Custom Schemes</h3>
<p>
Declare a factory class like this:
<pre data-shbrush="csharp">
internal class CefSharpSchemeHandlerFactory : ISchemeHandlerFactory
{
// This is the name of your custom scheme.
public const string SchemeName = "custom";
public ISchemeHandler Create()
{
return new CefSharpSchemeHandler();
}
}
</pre>
...and the actual scheme handler class like this:
<pre data-shbrush="csharp">
internal class CefSharpSchemeHandler : ISchemeHandler
{
public bool ProcessRequestAsync(IRequest request, SchemeHandlerResponse response,
OnRequestCompletedHandler requestCompletedCallback)
{
// TODO: Add your custom scheme code here, so that "bytes" is a byte[] with the
// TODO: response data for the given request. Examine the "request" object for info
// TODO: about the URI being requested and so forth.
response.ResponseStream = new MemoryStream(bytes);
response.MimeType = GetMimeType(fileName);
// This signals to CefSharp that your scheme handler is ready with the processing.
requestCompletedCallback();
// You can also return "false" here if the requested URI is invalid for your scheme
// handler.
return true;
}
}
</pre>
Finally, you have to register this scheme handler using some code like this:
<pre data-shbrush="csharp">
public static void Init()
{
// Pseudo code; you probably need more in your CefSettings also.
var settings = new CefSettings();
settings.RegisterScheme(new CefCustomScheme
{
SchemeName = CefSharpSchemeHandlerFactory.SchemeName,
SchemeHandlerFactory = new CefSharpSchemeHandlerFactory()
});
Cef.Initialize(settings);
}
</pre>
It's important that the scheme registration takes place before the <code>Cef.Initialize()</code> gets
called. (This is different to how things was being done in CefSharp version 1.)
</p>
<h4>Asynchrony</h4>
<p>
CefSharp supports custom schemes using an
<a href="https://en.wikipedia.org/wiki/Asynchronous_I/O">asynchronous</a> pattern, which is desirable if
your custom scheme handler performs e.g. network requests or other long-running operations. In other, more
trivial cases (e.g. if you are just serving out static content which is already loaded in memory), you can
just signal using the <code>requestCompletedCallback()</code> straight away, as in the example above.
</p>
<h3 id="features-javascript-integration">JavaScript integration</h3>
<p>
If you are reading this page in either one of the <strong>CefSharp.Wpf.Example</strong> or
<strong>CefSharp.WinForms.Example</strong> sample applications, you can use the boxes on the right side
of the screen to run arbitrary JavaScript code towards the context of this page. By default, the content
of the block below will be modified/inspected by the script code.
<pre id="modify-me">You can modify the value of this text field using JavaScript!</pre>
The C# code for performing these kinds of interactions is quite simple. Like this:
</p>
<pre data-shbrush="csharp">
webBrowser.ExecuteScriptAsync(someScriptCode);
</pre>
<p>
The code above will run the provided JavaScript snippet (which may do interesting things, like
interrogating or modifying the DOM of the page, just to name one example out of many potential ones). The
execution is of the "fire-and-forget" style; any result of the execution is silently disregarded. The
execution is also <em>asynchronous</em> in nature, a term which means that (among other things) the method
may return before the actual code has actually been executed.
</p>
<p>
This is the preferrably approach if possible, since it does not deadlock the UI in any way. However, we
realize that it's not suitable for all scenarios. Have faith — there is a solution even for cases
where you <em>do</em> need to return a value. Just write your code like this:
</p>
<pre data-shbrush="csharp">
var result = webBrowser.EvaluateScript("10 + 20");
</pre>
<p>
Please note that only a limited number of data types are supported when returning the result above. Simple
value types (int, float, etc) and strings all work, but do not expect to be able to return other JavaScript
objects.
</p>
<h3>Hooks by which you can modify and/or override certain features of the web browsing</h3>
</div>
<div class="bs-docs-section">
<div class="page-header">
<h1 id="useful-links">
Useful Links
</h1>
</div>
<p>
Here are a few pointers that might help you further explore the wonderful world of CefSharp:
</p>
<ul>
<li>The <a href="http://github.com/cefsharp/CefSharp">GitHub project page</a></li>
<li>
The current list of <a href="https://github.com/cefsharp/CefSharp/issues?state=open">open issues</a>.
Please check this list before reporting in new issues, to ensure that your problem isn't already covered.
</li>
<li>
Our list of <a href="https://github.com/cefsharp/CefSharp/releases">releases</a>. Perhaps we've
released something new since the version you are using? (Your current version is $foo.)
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Footer
================================================== -->
<footer class="bs-footer" role="contentinfo">
<div class="container">
<p>
Based on the <a href="http://getbootstrap.com/getting-started/">Twitter Bootstrap documentation</a> HTML/CSS template,
whose code is licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>
and documentation is licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
</p>
<ul class="footer-links">
<li><a href="https://github.com/cefsharp/CefSharp/issues?state=open">Issues</a></li>
<li class="muted">·</li>
<li><a href="https://github.com/cefsharp/CefSharp/releases">Releases</a></li>
</ul>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/shCore.js"></script>
<script src="assets/js/shBrushCSharp.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/application.js"></script>
</body>
</html>