目录
让自己的应用拥有对接互联网的能力，应该是绝大多数开发者的愿望。这里给大家推荐一个开源项目：WebRuntime，通过这个项目，开发者可以在完全保留自己应用架构基础之上，通过一行代码的修改，即可使得自己的应用变成完整的互联网浏览器。与标准浏览器（Chrome、Edge）等的差异是应用程序的第一个窗口，这个窗口是开发者自己应用系统的主窗口，用户启动第二个程序实例或者基于自己的代码、超链接等，可以打开任意多个内置的浏览器窗口。应用系统的对象模型，直接成为Web DOM的一部分。给应用提供了极大的弹性。
WebRuntime是一个开源项目。这个项目的核心目标是：让开发者将现代浏览器做为一个应用的起点，也就是说，在Chromium Project基础之上构建自己的应用系统。对.NET开发者而言，我们给出了最简单的方案：开发者只需下载本项目的二进制支持包，同时将“Application.Run“调用替换为“Cosmos.Run”。
本文只针对.NET开发者（当然WebRuntime也支持Win32），我们提供了 ”一分钟视频教程“。通过这个视频教程，开发者可以为自己的.NET工程提供内置的浏览器基因。
我们在 二进制包(下载TheUniverse.zip) 之中，提供了最简单的示范应用FirstApp,exe，开发者可以在Git上下载FirstApp源代码，或者自己创建一个最简单的工程。
正确运行FirstApp.exe，我们现有一个初始化WebPage：”FirstApp.index.html“，页面的代码如下：
<!-- This is "index.html". Normally, it is named "ProjectName.index.html". This webpage is the real entry point of the HTML-driven App. -->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>欢迎您进入一个全新的.NET世界, 我是您的朋友WebRuntime</title>
<link rel="icon" href="webpage/app.png" sizes="32x32">
<script type="text/javascript">
function OpenAppURL1() {
cosmos.openUrl("host:webpage/WebApp1.html", 100);
}
function OpenAppURL2() {
cosmos.openUrl("host:webpage/WebApp2.html", 100);
}
function OpenAppURL3() {
cosmos.openUrl("host:webpage/WebApp3.html", 100);
}
function OpenAppURL4() {
cosmos.openUrl("host:webpage/WebApp4.html", 100);
}
function OpenAppURL5() {
cosmos.openUrl("host:webpage/WebApp5.html", 100);
}
function OpenAppURL6() {
cosmos.openUrl("host:webpage/WebApp6.html", 100);
}
function OpenCWRURL() {
cosmos.openUrl("host:webpage/CWR.html", 2);
}
function OpenCERURL() {
cosmos.openUrl("host:webpage/CER.html", 2);
}
function OpenAppURLAsSubPage1() {
cosmos.openUrl("host:webpage/SubWebApp1.html", 2);
}
function OpenAppURLAsSubPage2() {
cosmos.openUrl("host:webpage/SubWebApp2.html", 2);
}
function OpenAppURLAsSubPage3() {
cosmos.openUrl("host:webpage/WebApp3.html", 2);
}
</script>
</head>
<body>
<cosmos>
<!-- Define new DOM elements -->
<define tagName="mainWindow"></define>
<define tagName="application"></define>
<define tagName="webViewport"></define>
<!-- End Define new DOM elements -->
<!-- The "application" element is required, it can provide application-level configuration. -->
<application>
<ntp>
<winNucleus>
<xobj id='grid' rows='1' cols='2' width='350,350,' splitterwidth='6'>
<xobj objid="FirstApp.Form1,host"></xobj>
<xobj objid="nucleus"></xobj>
</xobj>
</winNucleus>
</ntp>
<defaultworkbench>
<winNucleus>
<xobj id='grid' rows='1' cols='2' width='350,350,' splitterwidth='6'>
<xobj objid="FirstApp.Form1,host"></xobj>
<xobj objid="nucleus"></xobj>
</xobj>
</winNucleus>
</defaultworkbench>
<urls>
<url url="host:WebPage/sunny.html"></url>
</urls>
</application>
<mainWindow objid="FirstApp.Form1,host" caption="The Universe" width="2400" height="1600" id="mainForm">
<panel1 id="mainworkclient">
<default>
<winNucleus>
<xobj style="39" activepage="1">
<xobj caption="Cloudx Application" id='Splitter1' rows='1' cols='2' height='250,' width='350,350,' borderwidth='0' splitterwidth='6'>
<xobj objid="nucleus">
</xobj>
<xobj objid="" id="Sunny_ntpctrl">
</xobj>
</xobj>
<xobj caption="Common Web Runtime for Application" url="host"></xobj>
</xobj>
</winNucleus>
</default>
</panel1>
</mainWindow>
<webViewport>
<winNucleus>
<xobj rows="1" cols="2" width="750," id="xxx" caption="test caption">
<xobj objid="FirstApp.Form1,host" id="navCtrl">
</xobj>
<xobj objid="nucleus" id="mainClient">
</xobj>
</xobj>
</winNucleus>
</webViewport>
</cosmos>
<strong style="font-size:32px; color:black">欢迎<i style="color:fuchsia">您来到</i><i style="color:blue">FirstApp的 </i><b style="color:coral">.NET桌面软件生态世界</b>!</strong>
<h1 style="font-size: 16px; color:midnightblue"><i style="font-size:32px; color:blue">点击以下超链接</i> 体验全新的Web页面...</h1>
<p>
<a href="javascript:void(0);" onclick="OpenAppURL1();" style="font-size:16px;color:firebrick"><b>The First WebPage for Application</b></a>
<hr />
<a href="javascript:void(0);" onclick="OpenAppURL2();" style="font-size:16px;color:blueviolet"><b>让您的应用系统拥有互联网基因</b></a>
<hr />
<a href="javascript:void(0);" onclick="OpenAppURL3();" style="font-size:16px;color:forestgreen"><b>新的Web页面，新的表现力</b></a>
<hr />
<a href="javascript:void(0);" onclick="OpenAppURL4();" style="font-size:16px;color:brown"><b>让Web应用与桌面应用之间的鸿沟渐渐消失</b></a>
<hr />
<a href="javascript:void(0);" onclick="OpenAppURL5();" style="font-size:16px;color:cadetblue"><b>冲破约束，一片新天地呼之欲出</b></a>
<hr />
<a href="javascript:void(0);" onclick="OpenAppURL6();" style="font-size:16px;color:dodgerblue"><b>您可以做更多的事情，你的Web你做主</b></a>
<hr />
<a href="javascript:void(0);" onclick="OpenAppURLAsSubPage1();" style="font-size:16px;color:saddlebrown"><b>页面无处不在</b></a>
<hr />
<a href="javascript:void(0);" onclick="OpenAppURLAsSubPage2();" style="font-size:16px;color:springgreen"><b>您的创造力无限……</b></a>
<hr />
</p>
</body>
</html>
这里的规则是：每个”exeName.exe“需要一个初始化页面：”exeName.index.html“。
有了FirstApp.index.html，现在可以运行FirstApp.exe了。
启动FirstApp.exe，我们看到：
对比一下Form1设计器界面：
我们发现，运行时窗体增加了很多元素，这一切都是如下Web页面元素：
<mainWindow objid="FirstApp.Form1,host" caption="The Universe" width="2400" height="1600" id="mainForm">
<panel1 id="mainworkclient">
<default>
<winNucleus>
<xobj style="39" activepage="1">
<xobj caption="Cloudx Application" id='Splitter1' rows='1' cols='2' height='250,' width='350,350,' borderwidth='0' splitterwidth='6'>
<xobj objid="nucleus">
</xobj>
<xobj objid="" id="Sunny_ntpctrl">
</xobj>
</xobj>
<xobj caption="Common Web Runtime for Application" url="host"></xobj>
</xobj>
</winNucleus>
</default>
</panel1>
</mainWindow>产生的效果，其中，panel1是Form1上的一个控件，这里给出的设计是，当Form窗体页面化的时候，其中心位置的控件，可以被Web页面进一步动态化。点击Form1窗体上给出的一组”超链接“，可以直接激活内置的浏览器：
（应用页面，是由.NET控件与标准DOM元素合成的）
（调试界面）
（新标签页 New TabPage）
我们在FirstApp.index.html的如下部分确定每个新页面的基本样式：
<application>
<ntp>
<winNucleus>
<xobj id='grid' rows='1' cols='2' width='350,350,' splitterwidth='6'>
<xobj objid="FirstApp.Form1,host"></xobj>
<xobj objid="nucleus"></xobj>
</xobj>
</winNucleus>
</ntp>
<defaultworkbench>
<winNucleus>
<xobj id='grid' rows='1' cols='2' width='350,350,' splitterwidth='6'>
<xobj objid="FirstApp.Form1,host"></xobj>
<xobj objid="nucleus"></xobj>
</xobj>
</winNucleus>
</defaultworkbench>
<urls>
<url url="host:WebPage/sunny.html"></url>
</urls>
</application>
（ntp 节点，ntp=”New TabPage“）
在下载的二进制包之中，提供了一个有一些复杂度的初始化页面”FirstApp1.index.html“，您可以将这个文件替换FirstApp.index.html（修改一下名字），看看更加综合的效果。
我们希望：