NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源
NanUI文档目录
- NanUI简介
- 开始使用NanUI
- 打包并使用内嵌式的HTML/CSS/JS资源
- 使用网页来设计整个窗口
- 如何实现C#与Javascript的相互通信
- 如何处理NanUI中的下载过程 - DonwloadHandler的使用(待更新。。。)
- 如何处理NanUI中的弹窗过程 - LifeSpanHandler的使用(待更新。。。)
- 如何控制Javascript对话框 - JsDialogHandler的使用(待更新。。。)
- 自定义资源处理程序 (待更新。。。)
打包并使用内嵌式的HTML/CSS/JS资源
在使用HTML/CSS/JS设计软件界面时，如果每次都从远程服务器加载资源那显然是不现实的：如果界面是从远程服务器获取，遇到网速不佳时，那么将给用户带来非常糟糕的体验。为了避免这种尴尬的局面，NanUI可以将呈现界面的HTML/CSS/JS等文件作为嵌入资源编译到项目中，这样操纵既可以加速软件界面的加载速度，也可以避免界面遭到恶意修改。
下面的文章将详细介绍如何将HTML/CSS/JS等文件打包到项目中。
第一步 新建NanUI项目
按照之前的教程，新建一个Windows窗体应用程序，并在Program中完成CEF的相关设置操作。
第二步 在项目中添加网页资源
在项目中添加index.html文件，内容随意。在本示例中，在页面中添加以下html标记：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>HELLO</title>
</head>
<body>
<h1>Hello NanUI!</h1>
</body>
</html>
若要将index.html文件作为嵌入资源编译到项目中，您需要在Visual Studio的资源管理器中选中index.html文件，然后在该文件的属性窗口的生成操作栏目中选中该文件为嵌入的资源。如图所示：
这样，在项目编译时index.html文件将会作为内嵌的资源编译到输出的可执行文件中。
第三步 注册嵌入资源的程序集
要让NanUI加载嵌入的资源，需要在项目的Bootstrap执行Load方法成功后注册程序集中的嵌入资源，如下面代码所示，在Load成功后使用Bootstrap静态类的RegisterAssemblyResources将当前程序集中的资源注册到环境中。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace EmbeddedHtmlResources
{
using NetDimension.NanUI;
static class Program
{
/// <summary>
/// 应用程序的主入口点。
/// </summary>
[STAThread]
static void Main()
{
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
//指定CEF架构和文件目录结构，并初始化CEF
if (Bootstrap.Load())
{
//注册嵌入资源，并为指定资源指定一个假的域名my.resource.local
Bootstrap.RegisterAssemblyResources(System.Reflection.Assembly.GetExecutingAssembly(), null, "my.resource.local");
Application.Run(new Form1());
}
}
}
}
RegisterAssemblyResources方法的第一个参数是需要执行注册的程序集实例，第二个参数指定一个虚假的域名，嵌入的资源将通过该域名进行访问。
除了将html/css/js文件打包到当前项目，还可以将这些资源打包到单独的dll中，然后用反射的方式来获取该资源dll的程序集并使用上述方法进行注册。例如，将另一个index.html文件打包到EmbeddedResourcesInSplitAssembly.dll程序集中，内容可以与上面的本地项目中的index.html有所差别，然后主项目在CEF初始化成功之后通过下面的方法，也可以将外部程序集中的资源加载到NanUI环境中的：
//指定CEF架构和文件目录结构，并初始化CEF
if (Bootstrap.Load(PlatformArch.Auto, System.IO.Path.Combine(Application.StartupPath, "fx"), System.IO.Path.Combine(Application.StartupPath, "fx\\Resources"), System.IO.Path.Combine(Application.StartupPath, "fx\\Resources\\locales")))
{
//注册嵌入资源，并为指定资源指定一个假的域名my.resource.local
Bootstrap.RegisterAssemblyResources(System.Reflection.Assembly.GetExecutingAssembly(), "my.resource.local");
//加载分离式的资源
var separateAssembly = System.Reflection.Assembly.LoadFile(System.IO.Path.Combine(Application.StartupPath, "EmbeddedResourcesInSplitAssembly.dll"));
//注册外部的嵌入资源，并为指定资源指定一个假的域名separate.resource.local
Bootstrap.RegisterAssemblyResources(separateAssembly , "separate.resource.local");
Application.Run(new Form1());
}
您可以在项目中注册多个程序中的嵌入式资源，只需指定不同的域名(domin参数)即可。
第四步 在Formium窗体中使用嵌入的资源
按照上述方法，我们就完成了资源文件的嵌入。那么如何这些嵌入的资源文件呢？其实就跟平常加载网页上的资源是一样的，只需要按照我们指定的虚假域名和资源嵌入的路径组合以后，就可以在NanUI中使用嵌入的资源了。
例如，按照上面步骤中的方式对文件进行嵌入后，我们就可以通过http://my.resource.local/index.html访问到主项目中的index.html文件，然后通过 http://separate.resource.local/index.html访问到外部程序集EmbeddedResourcesInSplitAssembly.dll中的index.html文件了。
那么，如何测试我们的资源是否这确被嵌入到程序集，并且也正常加载了呢？最简单的例子就是在我们的窗体中直接使用这些地址。
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace EmbeddedHtmlResources
{
using NetDimension.NanUI;
public partial class Form1 : Formium
{
public Form1()
: base("http://my.resource.local/index.html")
{
InitializeComponent();
}
}
}
编译并执行项目文件，我们就可以看到嵌入的资源已经可以正确加载了。
示例源码
git clone https://github.com/NetDimension/NanUI-Examples-02-Use-Embedded-Resources-In-NanUI.git
社群和帮助
GitHub
https://github.com/NetDimension/NanUI/
交流群QQ群
521854872
赞助作者
如果你喜欢我的工作，并且希望NanUI持续的发展，请对NanUI项目进行捐助以此来鼓励和支持我继续NanUI的开发工作。你可以使用微信或者支付宝来扫描下面的二维码进行捐助。
NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源的更多相关文章
- NanUI文档 - 开始使用NanUI
NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...
- NanUI文档 - 使用网页来设计整个窗口
NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...
- NanUI文档 - 如何实现C#与Javascript的相互通信
NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript的相互通信 如何处理NanUI中的下载过 ...
- HTML span标签：用来组合文档中的行内元素
在DIV+CSS切图布局重构技术中,除了常常使用div标签外也常常使用span标签布局,通常也可以通过对span标签对象设置不同样式实现我们要的美化效果.这里主机吧主要讲的是span标签的定义和用法. ...
- 13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...
- JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式
返回网页顶部方法 一.锚链接 simpleDemo: <!DOCTYPE html> <html lang="en"> <head> <m ...
- 将markdown文档使用gulp转换为HTML【附带两套css样式】
将markdown文档使用gulp转换为HTML[附带两套css样式] 今天遇到一个需求,即将Markdown文档转为为HTML在网页展示,身为一名程序员,能用代码解决的问题,手动打一遍无疑是可耻的. ...
- JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- java文档打包成压缩包并且下载
需求,根据产品ID查询产品详情,产品详情会返回产品的一些文案,以及图片的url.需要做成,将文案信息记录在一个txt文档中,然后图片下载到文件夹,最后下载到本地,下载后自动删除刚才生成的文件夹以及文件 ...
随机推荐
- Unity跨平台C/CPP动态库编译---可靠UDP网络库kcp基于CMake的各平台构建实践
1.为什么需要动态库 a)提供原生代码(native code)的支持,也叫原生插件,但是我实践的是c/cpp跨平台动态库,这里不具体涉及安卓平台java库和ios平台的objectc库构建. b)某 ...
- 如何在ASP.NET Core Web API测试中使用Postman
使用Postman进行手动测试 如果您是开发人员,测试人员或管理人员,则在构建和使用应用程序时,有时了解各种API方法可能是一个挑战. 使用带有.NET Core的Postman为您的Web API生 ...
- matplotlib删除x轴
组内有个同事,有个奇怪的需求需要matplotlib删除x轴 效果图如下:
- Hibernate从零开始的反向工程
首先 创建一个web项目 导入jar包 Bulid Path 先现在hibernate的插件 help-->eclipse marketplace-->输入tool 点instal ...
- 使用dropwizard(6)-国际化-easy-i18n
前言 Dropwizard官方文档并没有提供国际化的模块,所以只能自己加.Spring的MessageResource用的很顺手,所以copy过来. Easy i18n 在整合Dropwizard的时 ...
- python实现图片批量剪裁的程序
from PIL import Image import os fin = 'D:/test' fout = 'D:/test2' for file in os.listdir(fin): file_ ...
- css实现左侧固定宽，右侧自适应的7中方法
一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...
- JAVA基础2——类初始化相关执行顺序
类初始化相关执行顺序 几个概念说明 代码块的含义与作用 static静态代码块: 一般用于初始化类中的静态变量.比如:给静态的数组或者list变量赋初值.使用static静态代码块进行初始化与直接在定 ...
- 2810:完美立方-poj
2810:完美立方 总时间限制: 1000ms 内存限制: 65536kB 描述 形如a3= b3 + c3 + d3的等式被称为完美立方等式.例如123= 63 + 83 + 103 .编写一个 ...
- Java数据结构和算法（六）——前缀、中缀、后缀表达式
前面我们介绍了三种数据结构,第一种数组主要用作数据存储,但是后面的两种栈和队列我们说主要作为程序功能实现的辅助工具,其中在介绍栈时我们知道栈可以用来做单词逆序,匹配关键字符等等,那它还有别的什么功能吗 ...