• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
顺势而为47 显示全部楼层 发表于 2021-8-17 20:38:31 |阅读模式 打印 上一主题 下一主题
1分钟让您的.NET WinForm应用程序变成现代互联网浏览器
前言

让自己的应用拥有对接互联网的能力,应该是绝大多数开发者的愿望。这里给大家推荐一个开源项目: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“,页面的代码如下:



    1. <!-- This is "index.html". Normally, it is named "ProjectName.index.html". This webpage is the real entry point of the HTML-driven App. -->
    2. <!DOCTYPE html>
    3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5.     <meta charset="utf-8" />
    6.     <title>欢迎您进入一个全新的.NET世界, 我是您的朋友WebRuntime</title>
    7.     <link rel="icon" href="webpage/app.png" sizes="32x32">
    8.     <script type="text/javascript">
    9.         function OpenAppURL1() {
    10.             cosmos.openUrl("host:webpage/WebApp1.html", 100);
    11.         }
    12.         function OpenAppURL2() {
    13.             cosmos.openUrl("host:webpage/WebApp2.html", 100);
    14.         }
    15.         function OpenAppURL3() {
    16.             cosmos.openUrl("host:webpage/WebApp3.html", 100);
    17.         }
    18.         function OpenAppURL4() {
    19.             cosmos.openUrl("host:webpage/WebApp4.html", 100);
    20.         }
    21.         function OpenAppURL5() {
    22.             cosmos.openUrl("host:webpage/WebApp5.html", 100);
    23.         }
    24.         function OpenAppURL6() {
    25.             cosmos.openUrl("host:webpage/WebApp6.html", 100);
    26.         }
    27.         function OpenCWRURL() {
    28.             cosmos.openUrl("host:webpage/CWR.html", 2);
    29.         }
    30.         function OpenCERURL() {
    31.             cosmos.openUrl("host:webpage/CER.html", 2);
    32.         }
    33.         function OpenAppURLAsSubPage1() {
    34.             cosmos.openUrl("host:webpage/SubWebApp1.html", 2);
    35.         }
    36.         function OpenAppURLAsSubPage2() {
    37.             cosmos.openUrl("host:webpage/SubWebApp2.html", 2);
    38.         }
    39.         function OpenAppURLAsSubPage3() {
    40.             cosmos.openUrl("host:webpage/WebApp3.html", 2);
    41.         }
    42.     </script>
    43. </head>
    44. <body>
    45.     <cosmos>
    46.         <!-- Define new DOM elements -->
    47.         <define tagName="mainWindow"></define>
    48.         <define tagName="application"></define>
    49.         <define tagName="webViewport"></define>
    50.         <!-- End Define new DOM elements -->
    51.         <!-- The "application" element is required, it can provide application-level configuration. -->
    52.         <application>
    53.             <ntp>
    54.                 <winNucleus>
    55.                     <xobj id='grid' rows='1' cols='2' width='350,350,' splitterwidth='6'>
    56.                         <xobj objid="FirstApp.Form1,host"></xobj>
    57.                         <xobj objid="nucleus"></xobj>
    58.                     </xobj>
    59.                 </winNucleus>
    60.             </ntp>
    61.             <defaultworkbench>
    62.                 <winNucleus>
    63.                     <xobj id='grid' rows='1' cols='2' width='350,350,' splitterwidth='6'>
    64.                         <xobj objid="FirstApp.Form1,host"></xobj>
    65.                         <xobj objid="nucleus"></xobj>
    66.                     </xobj>
    67.                 </winNucleus>
    68.             </defaultworkbench>
    69.             <urls>
    70.                 <url url="host:WebPage/sunny.html"></url>
    71.             </urls>
    72.         </application>
    73.         <mainWindow objid="FirstApp.Form1,host" caption="The Universe" width="2400" height="1600" id="mainForm">
    74.             <panel1 id="mainworkclient">
    75.                 <default>
    76.                     <winNucleus>
    77.                         <xobj style="39" activepage="1">
    78.                             <xobj caption="Cloudx Application" id='Splitter1' rows='1' cols='2' height='250,' width='350,350,' borderwidth='0' splitterwidth='6'>
    79.                                 <xobj objid="nucleus">
    80.                                 </xobj>
    81.                                 <xobj objid="" id="Sunny_ntpctrl">
    82.                                 </xobj>
    83.                             </xobj>
    84.                             <xobj caption="Common Web Runtime for Application" url="host"></xobj>
    85.                         </xobj>
    86.                     </winNucleus>
    87.                 </default>
    88.             </panel1>
    89.         </mainWindow>
    90.         <webViewport>
    91.             <winNucleus>
    92.                 <xobj rows="1" cols="2" width="750," id="xxx" caption="test caption">
    93.                     <xobj objid="FirstApp.Form1,host" id="navCtrl">
    94.                     </xobj>
    95.                     <xobj objid="nucleus" id="mainClient">
    96.                     </xobj>
    97.                 </xobj>
    98.             </winNucleus>
    99.         </webViewport>
    100.     </cosmos>
    101.     <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>
    102.     <h1 style="font-size: 16px; color:midnightblue"><i style="font-size:32px; color:blue">点击以下超链接</i> 体验全新的Web页面...</h1>
    103.     <p>
    104.         <a href="javascript:void(0);" onclick="OpenAppURL1();" style="font-size:16px;color:firebrick"><b>The First WebPage for Application</b></a>
    105.         <hr />
    106.         <a href="javascript:void(0);" onclick="OpenAppURL2();" style="font-size:16px;color:blueviolet"><b>让您的应用系统拥有互联网基因</b></a>
    107.         <hr />
    108.         <a href="javascript:void(0);" onclick="OpenAppURL3();" style="font-size:16px;color:forestgreen"><b>新的Web页面,新的表现力</b></a>
    109.         <hr />
    110.         <a href="javascript:void(0);" onclick="OpenAppURL4();" style="font-size:16px;color:brown"><b>让Web应用与桌面应用之间的鸿沟渐渐消失</b></a>
    111.         <hr />
    112.         <a href="javascript:void(0);" onclick="OpenAppURL5();" style="font-size:16px;color:cadetblue"><b>冲破约束,一片新天地呼之欲出</b></a>
    113.         <hr />
    114.         <a href="javascript:void(0);" onclick="OpenAppURL6();" style="font-size:16px;color:dodgerblue"><b>您可以做更多的事情,你的Web你做主</b></a>
    115.         <hr />
    116.         <a href="javascript:void(0);" onclick="OpenAppURLAsSubPage1();" style="font-size:16px;color:saddlebrown"><b>页面无处不在</b></a>
    117.         <hr />
    118.         <a href="javascript:void(0);" onclick="OpenAppURLAsSubPage2();" style="font-size:16px;color:springgreen"><b>您的创造力无限……</b></a>
    119.         <hr />
    120.     </p>
    121. </body>
    122. </html>
    复制代码


这里的规则是:每个”exeName.exe“需要一个初始化页面:”exeName.index.html“。

有了FirstApp.index.html,现在可以运行FirstApp.exe了。

启动FirstApp,exe,我们看到:

对比一下Form1设计器界面:

我们发现,运行时窗体增加了很多元素,这一切都是如下Web页面元素:

    1.         <mainWindow objid="FirstApp.Form1,host" caption="The Universe" width="2400" height="1600" id="mainForm">
    2.             <panel1 id="mainworkclient">
    3.                 <default>
    4.                     <winNucleus>
    5.                         <xobj style="39" activepage="1">
    6.                             <xobj caption="Cloudx Application" id='Splitter1' rows='1' cols='2' height='250,' width='350,350,' borderwidth='0' splitterwidth='6'>
    7.                                 <xobj objid="nucleus">
    8.                                 </xobj>
    9.                                 <xobj objid="" id="Sunny_ntpctrl">
    10.                                 </xobj>
    11.                             </xobj>
    12.                             <xobj caption="Common Web Runtime for Application" url="host"></xobj>
    13.                         </xobj>
    14.                     </winNucleus>
    15.                 </default>
    16.             </panel1>
    17.         </mainWindow>
    复制代码

产生的效果,其中,panel1是Form1上的一个控件,这里给出的设计是,当Form窗体页面化的时候,其中心位置的控件,可以被Web页面进一步动态化。点击Form1窗体上给出的一组”超链接“,可以直接激活内置的浏览器:

(应用页面,是由.NET控件与标准DOM元素合成的)


(调试界面)


(新标签页 New TabPage)

我们在FirstApp.index.html的如下部分确定每个新页面的基本样式:

    1.         <application>
    2.             <ntp>
    3.                 <winNucleus>
    4.                     <xobj id='grid' rows='1' cols='2' width='350,350,' splitterwidth='6'>
    5.                         <xobj objid="FirstApp.Form1,host"></xobj>
    6.                         <xobj objid="nucleus"></xobj>
    7.                     </xobj>
    8.                 </winNucleus>
    9.             </ntp>
    10.             <defaultworkbench>
    11.                 <winNucleus>
    12.                     <xobj id='grid' rows='1' cols='2' width='350,350,' splitterwidth='6'>
    13.                         <xobj objid="FirstApp.Form1,host"></xobj>
    14.                         <xobj objid="nucleus"></xobj>
    15.                     </xobj>
    16.                 </winNucleus>
    17.             </defaultworkbench>
    18.             <urls>
    19.                 <url url="host:WebPage/sunny.html"></url>
    20.             </urls>
    21.         </application>
    复制代码

(ntp 节点,ntp=”New TabPage“)

在下载的二进制包之中,提供了一个有一些复杂度的初始化页面”FirstApp1,index.html“,您可以将这个文件替换FirstApp.index.html(修改一下名字),看看更加综合的效果。




总结

我们希望:

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


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作