CloudNotes之桌面客户端篇：笔记撰写样式的支持

最近在CloudNotes桌面客户端中新增了笔记撰写样式的功能。当用户新建笔记的时候，可以在输入笔记标题的同时，选择笔记撰写样式，由安装包默认提供的样式主要有默认样式（Default）、羊皮纸样式（Leather Paper）以及Word 2013样式（Microsoft Word 2013）。选择笔记样式的时候，还提供了预览功能，用户可以直接预览样式效果：

当然，为了方便操作，用户可以在设置界面选择默认使用的样式，从而每次新建笔记时，默认使用的样式就会自动被选中，减少用户的操作次数。设置界面中有关默认样式的设定如下：

现在，我就简单介绍一下，整个样式系统是如何设计实现的。

样式系统

与插件系统类似，样式系统也需要读取外部的样式文件，然后把所有读取的样式罗列在设置界面中。因此，在CloudNotes桌面客户端中，样式是可以自定义扩展的。对于如何自定义样式，下一节会作详细介绍。就样式系统本身而言，它有着插件系统相似的行为特征：需要有一个中心组件，对所有的样式进行管理，并在需要的时候，能够通过这个中心组件找到所需的样式定义。于是，在实现样式系统的第一步，我对现有的插件系统进行了重构。

外部资源管理器（ExternalResourceManager）

正如上述分析，插件系统和样式系统都需要读取外部文件，因此，我将其抽象成一个外部资源管理器组件，主要负责通过读取外部文件，将文件数据转换成资源（插件或者样式）数据，并对这些数据进行管理。因此，插件管理器（ExtensionManager）和样式管理器（StyleManager）都属于外部资源管理器（ExternalResourceManager）的一种实现，不同之处在于两者对外部文件的读取和使用方式不同，而所处理的数据也不一样。

首先，在ExternalResourceManager抽象类的Load方法中，会根据构造函数传入的路径，去搜索所有匹配搜索条件的文件，并通过LoadResources抽象方法，从每个符合搜索条件的文件中载入资源：

/// <summary>
/// Loads the resources into the current manager.
/// </summary>
public void Load()
{
    if (Directory.Exists(this.path))
    {
        var resourceFiles = Directory.EnumerateFiles(this.path, this.searchPattern, SearchOption.AllDirectories);

        foreach (var resourceFile in resourceFiles)
        {
            try
            {
                var res = LoadResources(resourceFile);
                if (res != null && res.Any())
                {
                    foreach (var resource in res)
                    {
                        this.resources.Add(resource.ID, resource);
                    }
                }
            }
            catch
            {
            }
        }
    }
}

然后，ExtensionManager在LoadResources方法的实现中，通过Assembly.LoadFrom调用，将Assembly读入内存，同时使用Activator.CreateInstance创建Extension对象，然后返回给基类进行管理：

protected override IEnumerable<Extension> LoadResources(string fileName)
{
    var assembly = Assembly.LoadFrom(fileName);
    var result = new List<Extension>();
    foreach (var type in assembly.GetExportedTypes())
    {
        if (type.IsDefined(typeof (ExtensionAttribute)) &&
            type.IsSubclassOf(typeof (Extension)))
        {
            try
            {
                var extensionLoaded = (Extension) Activator.CreateInstance(type);
                this.OnResourceLoaded(extensionLoaded);
                result.Add(extensionLoaded);
            }
            catch
            {
            }
        }
    }
    return result;
}

而在StyleManager的LoadResources方法的实现中，则将传入的文件以zip解压缩，从中读取metadata.json文件以获得样式的基本定义信息，并从中读取style.css文件以获得样式的详细内容，之后，会使用Json库对metadata.json反序列化，并得到Style对象。最后，再将Style对象返回给基类进行管理：

protected override IEnumerable<Style> LoadResources(string fileName)
{
    try
    {
        var extractedContent = new Dictionary<string, string>();
        var zipFile = new ZipFile(fileName);
        foreach (ZipEntry entry in zipFile)
        {
            if (!entry.IsFile ||
                (string.Compare(entry.Name, MetadataFileName, StringComparison.InvariantCultureIgnoreCase) != 0 &&
                string.Compare(entry.Name, StyleFileName, StringComparison.InvariantCultureIgnoreCase) != 0))
                continue;

            var buffer = new byte[4000];
            var entryStream = zipFile.GetInputStream(entry);
            using (MemoryStream memoryStream = new MemoryStream())
            {
                StreamUtils.Copy(entryStream, memoryStream, buffer);
                extractedContent[entry.Name] = Encoding.ASCII.GetString(memoryStream.ToArray());
            }
        }
        if (extractedContent.ContainsKey(MetadataFileName) &&
            extractedContent.ContainsKey(StyleFileName))
        {
            var style = JsonConvert.DeserializeObject<Style>(extractedContent[MetadataFileName]);
            if (style.ID == Guid.Empty)
                return null;
            style.Content = extractedContent[StyleFileName];
            return new[] { style };
        }
    }
    catch
    {
    }

    return null;
}

就样式数据而言，它包含ID、样式名称、样式描述、创建日期、作者以及样式代码（定义在style.css文件中），Style对象保存了这些数据，并被用于设置页面以及新笔记创建等场景中。

样式的应用原理

其实，样式的应用原理非常简单，就是在创建新笔记时，使用样式文件中的style.css的内容去替换空Html文档的head下的style标签部分的占位符即可。在CloudNotes中，空Html文档的定义如下：

<html>
	<head>
		<style>
			$style$
		</style>
	</head>
	<body>

	</body>
</html>

说它是空Html文档，并不是说它是一个空字符串，而是因为body部分是没有任何内容的。假设style.css中的样式内容如下：

body {
    color: red;
}

那么，最终生成的笔记内容就是：

<html>
	<head>
		<style>
			body {
                             color: red;
                     }
		</style>
	</head>
	<body>

	</body>
</html>

值得一提的是，在CloudNotes桌面客户端中，样式系统的实现还是相对简单的，因此，除了metadata.json和style.css两个文件外，其它的文件都会被忽略。如果需要使用外部文件作为样式的资源，比如希望能够指定背景图片，那么就应该将图片数据转成base64，然后使用data:image的方式指定图片的URL。

自定义样式

CloudNotes桌面客户端笔记撰写样式的自定义也是非常简单的，样式文件本身就是一个以style为扩展名的zip压缩文件。要自定义样式，首先新建一个metadata.json文件，该文件内容如下：

{
    "ID": "F04F9079-EC4E-4739-93C5-473607BEA79E",   // 样式的Guid
    "Name": "Default",                              // 样式名称
    "Description": "CloudNotes Default Style",      // 样式描述
    "Author": "Sunny Chen",                         // 样式作者
    "CreationDate": "8/8/2015"                      // 样式创建日期
}

然后在metadata.json相同的路径下，新建一个style.css文件，该文件的内容相信大家都知道是什么，就是css样式。两个文件准备好以后，将它们压缩成zip文件，然后将扩展名改为style，并拷贝到CloudNotes桌面客户端安装路径的Styles子目录下即可。在重启CloudNotes桌面客户端之后，就可以在新建笔记和设置界面中看到并选择这个自定义样式了。说明一点，zip文件中仅能包含metadata.json和style.css两个文件，不能将它们放到子目录中，否则桌面客户端将无法读取样式信息。

以下是一个使用了羊皮纸样式的笔记效果，这在以前版本的桌面客户端中是无法看到的。