1分钟让您的.NET WinForm应用程序变成现代互联网浏览器

WebRuntime 版主 2021-08-12 11:57:36
加精

 

目录

前言

一、WebRuntime是什么？

二、使用步骤

三、具体案例

总结

前言

让自己的应用拥有对接互联网的能力，应该是绝大多数开发者的愿望。这里给大家推荐一个开源项目：WebRuntime，通过这个项目，开发者可以在完全保留自己应用架构基础之上，通过一行代码的修改，即可使得自己的应用变成完整的互联网浏览器。与标准浏览器（Chrome、Edge）等的差异是应用程序的第一个窗口，这个窗口是开发者自己应用系统的主窗口，用户启动第二个程序实例或者基于自己的代码、超链接等，可以打开任意多个内置的浏览器窗口。应用系统的对象模型，直接成为Web DOM的一部分。给应用提供了极大的弹性。

一、WebRuntime是什么？

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（修改一下名字），看看更加综合的效果。

 

 

总结

我们希望：

  1. 每个.NET应用在完整保留原有结构的基础上，用最简明的途径给每个应用提供内置的全功能Chromium-Based互联网浏览器；
  2. 每个浏览器都可以将.NET GUI元素当作Web页面的DOM元素，Javascript可以响应这些GUI元素的事件；
  3. 提供基于目录的部署机制，使得没有文件夹之下，应用都有完全不同的Web配置、部署；
  4. 当用户工程之中，Application.Run被Cosmos.Run替换之后，用户的系统就完全实现基于Web技术的应用扩展机制，拥有自己的Web生态，每一个WinForm窗体都可以基于Web技术实现Web页面类似的动态表现力，在FirstApp.exe之中，我们看到了panel1表现出的动态性；
  5. 事实上,由FirstApp.exe，我们可以确信,每一款.NET桌面应用，都是一个Web内容引擎，如图标准浏览器一样。也就是说，WebRuntime揭示出桌面应用的双重性，其一是本地特性、其二是Web特性。
  6. 当WebRuntime被应用系统引用之后，扩展性就是一个普遍性问题，应用系统的原有模型被Web技术无限扩大了，这一点与原有系统形成本质的差异；
  7. FirstApp是一个极简的WinForm示范，事实上互联网时代，.NET桌面应用的潜力应该是“极为广阔“，如果浏览器是最小的应用，那么WebRuntime就会给开发者带来无限的创造力……
...全文
11317 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
hj2002 2023-05-30
  • 打赏
  • 举报
 回复

学习了@@

杞人忧天 2021-11-08
  • 打赏
  • 举报
 回复 1

有什么实用价值或者应用场景吗？非杠。

吉普赛的歌 2024-01-16
  • 举报
 回复
@杞人忧天 很多老程序员只会c/s，有些winform项目急着上网页端时可以用下。
Super_218 2021-09-09
  • 打赏
  • 举报
 回复

优秀观众

demkin 2021-09-06
  • 打赏
  • 举报
 回复 1

吓我一跳,我还以为是把大型exe程序放到服务器网页里能够运行呢.

jwh2004 2021-08-29
  • 打赏
  • 举报
 回复

问题已完美解决。这个运行时绝对是桌面应用的一次革命，不仅使cs与bs程序完美延伸与融合，
也使得窗体、页面可以灵活、动态的布局与展开。推荐大家下载并体验使用。

上海程序员3 2021-08-24
  • 打赏
  • 举报
 回复

和直接用webview有什么 区别，为什么 要多此一举？

WebRuntime 版主 2021-08-26
  • 举报
 回复
@上海程序员3 webview的功能太弱，完全不一样，二者之间差异极大
tttexas 2021-08-23
  • 打赏
  • 举报
 回复 1

吓我一跳,我还以为是把大型exe程序放到服务器网页里能够运行呢.

WebRuntime 版主 2021-08-16
  • 打赏
  • 举报
 回复

您有FirstApp.index.html这个页面？
之所以没有弹出任何显示窗口，应该是缺少这个页面，如果您还有问题，麻烦尽快联系我，谢谢

jwh2004 2021-08-15
  • 打赏
  • 举报
 回复

请问楼主，为什么我运行“FirstApp.exe”后，没有弹出任何显示窗口，在任务管理器中有此进程。我是win10企业版，正常的版本，没有精简。.net各种框架电脑上都有，有IIS，VS2017和VS2019(c#与vc都有)，java环境。按照视频里的讲解编译好FirstApp，将必要文件拷入运行，不显示窗体，只在任务管理器中有此进程。下载的“TheUniverse”解压后运行“FirstApp.exe”也如此。又给exe加了系统管理员权限仍是如此。

WebRuntime 版主 2021-08-16
  • 举报
 回复
@jwh2004 您有FirstApp.index.html这个页面？ 之所以没有弹出任何显示窗口，应该是缺少这个页面，如果您还有问题，麻烦尽快联系我，谢谢
WebRuntime 版主 2021-08-16
  • 举报
 回复
@jwh2004 另外一种可能性或许是，您的编译可能没有指定x64
WebRuntime 版主 2021-08-16
  • 举报
 回复
@jwh2004 您可以提供微信联系我，我的微信：TangramTeam，手机号码是13911859190
2条回复
智者知已应修善业 2021-08-12
  • 打赏
  • 举报
 回复

观众席位站姿式...

a1092583262 2021-08-16
  • 举报
 回复
@智者知已应修善业 1
a1092583262 2021-08-16
  • 举报
 回复
@a1092583262 2
Winform、WPF、Silverlight、MFC区别与联系
WinForm 在Windows中，诸如窗体绘制等功能由GDI（图形设备接口）实现，放在操作系统内核中。Windows Forms在底层使用的是GDI+。GDI+是GDI的“面向对象包装”，使用C++实现。.NET Windows Forms应用程序中使用的GDI+其实是在C++实现的非托管代码之上又包了一层，从而让我们能使用C#这样的托管编程语言调用GDI+功能绘图。 WPF WPF底层使用...
C#实现PDF转图片及Base64编码转换的WinForm应用开发
htmltable {th, td {th {pre {简介：在C#开发环境中，将PDF文档转换为图片并支持Base64编码是文档处理与网络传输中的常见需求。本项目基于WinForm框架，利用Ghostscript.NET库实现PDF每页到图像的高效转换，并提供Base64编码功能，便于前端展示或服务端数据交互。通过本项目实战，开发者可掌握PDF解析、图像渲染、内存流操作与Base64编码等核心技术，适用于文档可视化、Web接口对接等应用场景。
使用WinForm和C#实现数字签名功能
数字签名技术是现代信息安全体系中的一项重要技术，它确保了数据在传输过程中的完整性、认证性和不可否认性。随着互联网的广泛应用，数字签名技术已经深入到我们生活的方方面面，比如软件更新、电子邮件、电子文档等。数字签名是一种用于验证数字信息完整性和来源身份的电子标记。它通过特定的算法，利用发送方的私钥生成签名，接收方使用对应的公钥对签名进行验证，以确保信息未被篡改，并且确实来自声称的发送者。非对称加密是现代密码学的一个重要分支，它利用一对密钥—公钥和私钥—来实现加密和解密的过程。
2020中国.NET开发者峰会近50场热点技术专题揭秘
简介 / Summary2014年微软组织并成立.NET基金会，微软在成为主要的开源参与者的道路上又前进了一步。2014年以来已经有众多知名公司加入.NET基金会，微软，Google，AWS三大云厂商已经齐聚.NET基金会，在平台项目中，.NET平台上的ARM 架构由三星团队贡献，在.NET Core 3.1上得到了完整支持，.NET 5上面得到进一步的优化，国内的龙芯团队正在开发MIPS架构的支持，即将正式发布.NET Core 3.1 For MIPS。为了将.NET基金会变成一个更加多样化和成员驱动.
.Net面试宝典
.Net面试宝典 1、简述 private、 protected、 public、 internal 修饰符的访问权限。 private : 私有成员, 在类的内部才可以访问。. protected : 保护成员，该类内部和继承类中可以访问。 public : 公共成员，完全公开，没有访问限制。 internal: 当前程序集内可以访问。 2、ADO.NET中的五个主要对象 Connection：...
C#

111,119

社区成员

642,554

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术 C#
社区管理员
  • C#
  • AIGC Browser
  • by_封爱
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

让您成为最强悍的C#开发者

试试用AI创作助手写篇文章吧

+ 用AI写文章