空了吹,满清十大刑酷图片,单恋不转弯
2020年2月10日 nanui 0.7版正式发布。
回顾过去的一年，浑浑噩噩。生活上、工作上太多的压力和变数让我身心疲惫，目睹亲人被病痛的摧残的痛苦，无法释怀的生死别离令我沉沦许久；公司业务的变动，方向的调整，好基友的离职让我对未来的职业规划感到无比迷茫，太多的事情让我应接不暇，因此也搁置了nanui项目的开发。在此向各位给予了nanui期待的朋友表示深深的歉意。随着时间的流逝，不知不觉2019年的时光在我的生命中飞逝，一转眼来到了11月份，看着github上空荡荡的release notes，我决定不能再让nanui停滞下去，静下心，放空自己，于是又开始新一版nanui的迭代，再加上此次武汉疫情的蔓延，公司无限期停工的前提下，终于花了近四个月的时间完成了此次新版本的迭代。此版本的迭代，基本上可以说是从底层上从新开始，整个项目基本重头编写：重写了承载窗口逻辑、尝试了将核心更换为cefglue、借鉴了chromely的api等等。经过初步的试用，也算是nanui从无到有，从0.1到0.6以来比较满意的一次迭代。
下面，我讲继续介绍0.7版的基本使用方法。
github:https://github.com/netdimension/nanui/
gitee:https://gitee.com/linxuanchen/nanui
感谢您选用用于.net framework / .net core的nanui开源框架！
nanui是一个开放源代码的.net项目，它适用于希望使用html5/css3等前端技术来构建windows窗体应用用户界面的.net/.net core开发人员。您可以使用任何您所熟悉的前端技术来搭建winform应用程序用户界面。
强烈建议您使用单页应用（spa）模式来制作界面，因为这可以给用户带来更好的操作体验。主流的javascript框架，比如angular, react, vue都是可以用来构架spa应用的明智选择。
本框架将为您的软件界面设计工作带来无限可能。
构建nanui应用程序，您的开发环境需要满足以下条件：
nanui基于chromiumfx开发，chromiumfx是.net的chromium embedded框架（cef）的实现。
nanui 0.7的运行需要依赖chromium embedded framework (cef) 77.1.18的二进制文件以及对应版本的chromiumfx二进制文件。您可以选择手动下载或编译这些二进制文件，或者您也可以直接通过nuget包管理器来自动安装这些依赖项。
您可以从网站下载已经编译好的、对应版本的cef二进制文件：
如果您有丰富的cef开发经验，您也可以根据cef官方的指引自行编译cef框架。自行编译cef框架您可以加入更多的可定制功能。
你可以从chromiumfx项目的托管网站下载的源码，根据指引编译x86架构和x64架构平台下的二进制文件：
pm> install-package netdimension.nanui.runtime
nuget包管理器将根据您项目的架构信息自动生成依赖项目的目录和文件结构，您无需关注目录结构信息，这也是最快速最简便的方法。
您可以从github获取nanui的全部源码并使用vs2019编译源码，或者通过nuget安装nanui二进制包。
pm> install-package netdimension.nanui
以下表格展示了nanui项目的各个nuget包及相关信息。
| 项目名称 | 框架 | 说明 |
|---|---|---|
| netdimension.nanui | .net framework 4.0+ / .net core 3.1 | 您需要引用此库来构建nanui应用程序，这是nanui的核心库。 |
| netdimension.nanui.runtime | .net framework 4.0+ / .net core 3.1 | nanui的依赖项，包括了cef框架二进制文件和cfx二进制文件。 |
| netdimension.nanui.subprocess | .net framework 4.0+ / .net core 3.1 | nanui的子进程可执行文件，如果是用nanui的usedefaultsubprocess特性需要安装此包。 |
| netdimension.nanui.assemblyresourcehandler | .net framework 4.0+ / .net core 3.1 | 内嵌资源控制器。 |
| netdimension.nanui.fileresourcehandler | .net framework 4.0+ / .net core 3.1 | 文件资源控制器。 |
| netdimension.nanui.restfulresourcehandler | .net framework 4.0+ / .net core 3.1 | rest数据资源控制器。 |
nanui基于chromium浏览器核心，因此您可以使用您所熟悉的任何前端技术来打造您的桌面应用程序。您还可以向javascript环境中注入.net对象或方法；另外使用资源处理器，您还可以方便地向web环境提供文件、多媒体和数据等内容。
您可以把nanui看作一个嵌入到winform中的、精简化的chromium浏览器，这个浏览器替代了传统winform界面的画布，因此您可以发挥想象力，使用任何web前端技术来设计您的窗体界面。
不仅如此，您还能保留.net框架的所有特性，能够使用entityframework，能够使用多线程、甚至能通过任何方式与您的硬件设备进行交互并把相关的信息反馈给web环境。既满足了设计漂亮用户界面的需求，也保留了.net强大的生态环境。
阅读下面的步骤，我们就来一起创建您的第一个nanui应用程序。
您可以根据实际项目的需求，选择使用针对于.net framework或者.net core框架的的windows窗体（winform）应用程序。对于两种类型的窗体应用程序来说，所有的api接口都是相同的，您可以方便的从一种框架迁移到另外一种。
现在，您需要安装nanui以及nanui的依赖项。推荐您使用nuget包管理起来安装他们。在包管理器中运行如下命令来安装：
安装nanui
pm> install-package netdimension.nanui
安装nanui运行时依赖项
pm> install-package netdimension.nanui.runtime
nanui使用了新的工厂来创建浏览器承载窗口，因此我们并不需要像往常一样通过窗体设计器来设计窗体和控件。因此我们可以直接删除项目模板中为我们自动创建的form1.cs窗体。
新建mainwindow.cs，并让他继承netdimension.nanui.formium基类，并实现该类的所有抽象接口：
我要评论using netdimension.nanui;
using netdimension.nanui.browser;
class mainwindow : formium
{
public override string starturl => "https://www.google.com";
public override hostwindowtype windowtype => hostwindowtype.standard;
protected override control launchscreen => null;
public mainwindow()
{
title = "第一个nanui应用"
}
protected override void onwindowready(iwebbrowserhandler browserclient)
{
}
protected override void onregisterglobalobject(jsobject global)
{
}
}
修改starturl属性，指定启动时访问的url地址。
public override string starturl => "https://www.google.com";
指定windowtype属性，选择窗体以原生样式显示还是使用无边框样式。
public override hostwindowtype windowtype => hostwindowtype.standard;
使用launchscreen属性来返回一个自定义的用户控件，用来显示网页加载时的等待画面，通常他可以是一个picturebox，放置一张静态的图像或者gif图像来告知用户应用程序启动的状态。如果不需要该功能，返回null即可。
protected override control launchscreen => null;
使用onwindowready重载方法，您可以browserclient参数来设置chromium客户端的各个处理器，以此来实现chromium浏览器的各项行为，例如：如何处理新开窗口、如何处理下载请求、如何通知应用程序网页标题的改变等等行为。
这个方法通常在chromium浏览器核心初始化完成之后执行。
如果不需要定义行为处理器，那么留空即可。
protected override void onwindowready(iwebbrowserhandler browserclient)
{
}
使用onregisterglobalobject重载方法，您可以向浏览器的javascript上下文注册各种.net对象和方法，您可以把该重载方法的参数global看作浏览器的window对象。具体的实现方法可以参考后面章节。
protected override void onregisterglobalobject(jsobject global)
{
}
通过以上操作您就完成了您的第一个nanui窗口，该窗口将使用google.com的内容作为您窗体的界面。
但是到目前为止，应用程序还不能正常运行，因为我们还需要初始化nanui和cef环境。
初始化nanui和cef的操作我们需要放在main方法中。
using netdimension.nanui;
static class program
{
/// <summary>
/// the main entry point for the application.
/// </summary>
[stathread]
static void main()
{
bootstrap
.initialize()
.run(() => new mainwindow());
}
}
至此，您的第一个nanui应用程序已经能够正常运行了。
如果您还想进一步定制您的窗口样式，请重载onstandardformstyle方法，并使用style参数来设置窗口启动位置、大小、图标、边框样式等信息。
protected override void onstandardformstyle(istandardhostwindowstyle style)
{
base.onstandardformstyle(style);
style.width = 1280;
style.height = 720;
style.icon = system.drawing.systemicons.winlogo;
style.startposition = formstartposition.centerscreen;
}
如图，您的第一个nanui应用程序成功运行了。
通过此示例将告诉您如何使用最少的代码来运行nanui。
b站：
西瓜视频：
通过上一章节文档的介绍，您已经了解了创建nanui应用以及创建formium浏览器承载窗口的基础知识。使用与之前文档中介绍的相同套路创建完应用程序后，您只需要设置浏览器承载窗体的windowtype为borderless模式即可创建无边框样式的窗体。
本篇章节将主要介绍无边框样式窗体的相关的知识点，内容涉及了nanui系统中特殊的css、nanui特有的html标记属性、javascript对象和全局事件等。
指定windowtype属性为borderless，让窗体以无边框样式呈现。
public override hostwindowtype windowtype => hostwindowtype.borderless;
当窗体以无边框样式呈现时，默认窗口失去了原生窗口的标题栏及其控制区域，因此无法通过拖拽来移动窗体。这时，您需要通过设置特殊的css属性-webkit-app-region来确定web页面中的哪一部分区域支持拖拽，您可以通过灵活的设计可拖拽和不可拖拽区域来创建异形拖拽区域。
设置可拖拽区域
.draggable-area {
-webkit-app-region: drag;
}
设置不可拖拽区域
.draggable-area {
-webkit-app-region: no-drag;
}
使用下面的示例代码，绘制一个可拖拽的矩形区域，并在该区域内排除classname="controls"的矩形区域。
html
<div class="titlebar">
<span>welcome to nanui</span>
<div class="controls">
<a title="minimize" class="control-btn">
<svg x="0px" y="0px" viewbox="0 0 10.2 1" data-radium="true" style="width: 10px; height: 10px;"><rect fill="#ffffff" width="10.2" height="1"></rect></svg>
</a>
<a title="maximize" class="control-btn">
<svg x="0px" y="0px" viewbox="0 0 10.2 10.1" data-radium="true" style="width: 10px; height: 10px;"><path fill="#ffffff" d="m0,0v10.1h10.2v0h0z m9.2,9.2h1.1v1h8.1v9.2z"></path></svg>
</a>
<a title="close" class="control-btn">
<svg x="0px" y="0px" viewbox="0 0 10.2 10.2" data-radium="true" style="width: 10px; height: 10px;"><polygon fill="#ffffff" points="10.2,0.7 9.5,0 5.1,4.4 0.7,0 0,0.7 4.4,5.1 0,9.5 0.7,10.2 5.1,5.8 9.5,10.2 10.2,9.5 5.8,5.1 "></polygon></svg>
</a>
</div>
</div>
scss
.titlebar {
// scss ...
-webkit-app-region: drag;
> controls {
// scss ...
-webkit-app-region: no-drag;
}
}
nanui内置了html属性nanui-command，通过该属性您可以快速的实现无边框窗体的最大化、最小化、还原及关闭窗口命令。
例如设置nanui-command="close"可以实现点击该元素后关闭窗体。
<a title="minimize" class="control-btn" nanui-command="close">
// 关闭按钮 ...
</a>
nanui-command属性的值有以下几组：
| 属性名 | 命令作用 |
|---|---|
| maximize | 最大化窗口 |
| minimize | 最小化窗口 |
| restore | 还原窗口 |
| close | 关闭当前窗口 |
nanui在chromium的javascript环境中注册了nanui对象，通过该对象您能够获取当前窗体的相关信息，或者使用内置的函数来改变窗体的各项状态。
nanui对象
nanui除了在chromium的javascript环境中注册了对象以外，还注册了一些承载窗口改变的通知事件。您可以通过注册事件句柄来捕获这些事件，以此来实现各项功能。
hostactived - 承载窗口获得焦点并被激活
hostdeactivate - 承载窗口失去焦点
例如，我们可以通过捕获承载窗口最大化最小化状态改变的事件来为窗体添加不同的样式：
window.addeventlistener("hoststatechange", e => {
if (e.detail.code === 2) {
console.log("最大化状态");
} else if(e.detail.code === 1) {
console.log("最小化状态");
}
else {
console.log("正常状态");
}
});
通过此示例将告诉您如何使用react以及react desktop制作一个.net core 3.1桌面应用程序的用户界面。
b站：
西瓜视频：
github项目地址：https://github.com/xuanchenlin/using-react-desktop-with-nanui-0.7
nanui从诞生到现在经历了四个年头，尽管这期间受到过来自网络上的各种侮辱和谩骂，但更多的是来自大家的鼓励和支持，再次感谢各位对nanui的关注和对本人的理解，谢谢！
nanui是一个基于mit协议的开源项目并且它是完全免费的。尽管如此，如果没有适当的资金支持，项目维护和新功能的开发是无法持续下去的。所以如果您喜欢这个项目并认可我的工作，您可以支付我一杯咖啡的钱请我喝一杯咖啡，或者您也可以成为长期的项目资助人以帮助nanui变得更好！
使用微信或者支付宝扫描下方二维码来进行资金方面的捐助。
chromium embedded framework原生不支持h.264视频播放（该格式为商业格式），因此您需要自行加入与之相关的编译符号并重新编译cef源码才能实现h.264格式视频的播放。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
网友评论