探索 Word 2007 开发（二）：扩展 Ribbon

探索 Word 2007 开发（二）：扩展 Ribbon

 

Written by Allen Lee

 

Ribbon设计器

        VSTO 2005 SE以RibbonX的方式对Office 2007的Ribbon提供了支持，然而，这种支持不够直观，Visual Studio 2008 Beta 2所带的VSTO则提供了可视化的设计器支持，本文将会探讨如何使用设计器扩展Ribbon。

        打开MyBlogsWordAddIn项目并创建一个新的Ribbon (Visual Designer)：

Figure 1

        完成Ribbon (Visual Designer) 的创建后，Visual Studio 2008 Beta 2会自动为你打开Ribbon的设计器，里面为你创建了一个标签（TabAddIns）和一个功能组（group1）：

Figure 2

 

设计Blogging标签

        我希望在Ribbon里新增一个Blogging标签放置相关的按钮，而不是和现有的按钮混在一起。要做到这样，你需要对Visual Studio 2008 Beta 2为你创建的标签进行一些设置，把ControlIdType属性的值改为Custom，然后把Label属性设置为Blogging：

Figure 3

        接着，从工具箱中分别拖出一个ToggleButton和一个Button，放在Visual Studio 2008 Beta 2为你创建的功能组里，为这两个按钮分别选择你喜欢的图标（使用大小为32x32的PNG图标效果最佳），分别把它们的Label属性设置为My Blogs和Manage Blogs，并把它们的ControlSize属性设置为RibbonControlSizeLarge：

Figure 4

        完成了这些操作之后，你的Visual Studio 2008 Beta 2应该会是这样的：

Figure 5

        现在，我们来看看运行效果：

Figure 6

 

打开/关闭"我的博客"侧边栏

        My Blogs按钮的实现主要有如下要求：

• Word 2007启动的时候，"我的博客"侧边栏会被加载但不显示。
• 当My Blogs按钮处于按下状态时，显示"我的博客"侧边栏；当My Blogs按钮处于释放状态时，隐藏"我的博客"侧边栏。
• 显示"我的博客"侧边栏的途径只有一个，就是通过My Blogs按钮，但隐藏它则有两个途径：通过My Blogs按钮或者位于它的右上角的X按钮。无论用户通过那种途径隐藏"我的博客"侧边栏，我们都必须保证My Blogs处于正确的状态。

        首先，我们修改一下ThisAddIn.cs里的代码，去掉ThisAddIn_Startup()方法里显示"我的博客"侧边栏的语句（即把其Visible属性设为true那句）：

        接着，回到BloggingRibbon设计器，为My Blogs的Click事件添加Event Handler：

        当我们创建一个Word Add-in项目时，Visual Studio 2008 Beta 2会自动为你创建一个Globals的类，通过这个类的ThisAddIn属性，你可以访问插件的实例。在ThisAddIn类中有一个CustomTaskPanes属性，它的类型是CustomTaskPaneCollection，里面存放着我们添加进去的CustomTaskPane，其中就包括"我的博客"侧边栏。这样，我们就可以在CustomTaskPanes中选出"我的博客"侧边栏，并把My Blogs按钮的Checked属性的值同步到它的Visible属性，从而控制它的显示与隐藏了。值得提醒的是，我在这里假设了只有"我的博客"侧边栏的Title属性的值是My Blogs。

        当用户点击"我的博客"侧边栏右上角的X按钮关闭它时，我们需要正确同步My Blogs按钮的状态，这可以通过处理"我的博客"侧边栏的VisibleChanged事件做到：

        值得提醒的是，Visual Studio 2008 Beta 2在创建My Blogs按钮的变量tgbMyBlogs时把它的访问修饰符设定为internal，于是，我们可以在ThisAddIn类里面直接对它进行修改。另外，你也可以把Code #01的m_MyBlogsPane的访问修饰符改为internal，这样就可以在Code #02中对Globals.ThisAddIn.m_MyBlogsPane.Visible属性直接修改而不需要查找了。

        现在，我们来看看运行效果：

Figure 7

 

添加/删除博客信息

        Manage Blogs按钮的其中一组重要功能是显示、储存和更改工作目录的当前位置，而这个位置是储存在配置中的，于是，我们得先构建好这个储存设施。打开项目的属性窗口，切换到Settings页面，在里面添加WorkingDirectory项，并将其Type设置为string，Scope设置为User：

Figure 8

        当用户第一次运行插件时，工作目录和WorkingDirectory项的值都没有就绪，需要在所有自定义插件代码运行之前创建工作目录，并把WorkingDirectory项的值初始化为该目录的路径。初次运行时：

• 在我的文档目录下创建一个My Blogs文件夹；
• 在My Blogs文件夹里面创建Blogs.xml数据文件；
• 把WorkingDirectory项的值设置为第一步创建的文件夹的路径。

        而当用户更改工作目录的位置时：

• 里面的东西会一并移动到新的位置；
• WorkingDirectory项的值会被设为新工作目录的路径。

        Manage Blogs按钮的另一组重要功能是显示现有博客、添加新博客、更改现有博客的名字和删除现有博客。现有博客的显示是通过获取Blogs.xml里的数据来实现的。新博客的添加会依次执行如下两项操作：

• 把新博客的名字和网页地址添加到Blogs.xml里；
• 在工作目录里为新博客创建一个以其名字为名的文件夹，并在该文件夹里分别创建Posts和Drafts两个文件夹。

        对于一个给定的博客，它的网页地址就是它的身份标识，一旦更改，我们就认为是一个新的博客，所以更改博客的信息仅限于更改它的名字，而这又涉及到如下两项操作：

• 把Blogs.xml里对应的博客名字改为新的名字；
• 把工作目录里对应的文件夹名字改为新的名字。

        现有博客的删除也包含如下两项操作：

• 在Blogs.xml里删除该博客的对应信息；
• 在工作目录里删除该博客相关的文件夹及其内容。

        这些操作将会由BlogsManager类负责：

 

//  Code #04

public   class  BlogsManager
{
    private BlogsManager()
    {

    }

    private static BlogsManager m_Instance = new BlogsManager();

    public static BlogsManager Instance
    {
        get { return m_Instance; }
    }

    public void Initialize()
    {
        if (String.IsNullOrEmpty(WorkingDirectory))
        {
            Properties.Settings.Default.WorkingDirectory = Path.Combine(
                Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments),
                "My Blogs"
            );
        }

        if (!Directory.Exists(WorkingDirectory))
        {
            Directory.CreateDirectory(WorkingDirectory);
        }

        string metadataPath = Path.Combine(WorkingDirectory, "Blogs.xml");

        if (!File.Exists(metadataPath))
        {
            XElement blogsMetadata = new XElement(
                "blogs", new XAttribute("defaultBlog", String.Empty)
            );

            blogsMetadata.Save(metadataPath);
        }
    }

    public string WorkingDirectory
    {
        get
        {
            return Properties.Settings.Default.WorkingDirectory;
        }
        set
        {
            if (Properties.Settings.Default.WorkingDirectory != value)
            {
                MoveWorkingDirectoryTo(value);

                Properties.Settings.Default.WorkingDirectory = value;
            }
        }
    }

    public Blog[] Blogs
    {
        get
        {
            XElement blogsMetadata = XElement.Load(
                Path.Combine(WorkingDirectory, "Blogs.xml")
            );

            var blogs = from blog in blogsMetadata.Elements()
                        select new Blog
                        {
                            Name = blog.Attribute("name").Value,
                            Url = blog.Attribute("url").Value
                        };

            return blogs.ToArray();
        }
    }

    public void Add(Blog blog)
    {
        // Add blog info to Blogs.xml

        string metadataPath = Path.Combine(WorkingDirectory, "Blogs.xml");

        XElement blogsMetadata = XElement.Load(metadataPath);
        blogsMetadata.Add(
            new XElement("blog", new XAttribute("name", blog.Name), new XAttribute("url", blog.Url))
        );
        blogsMetadata.Save(metadataPath);

        // Create directory structure for blog

        string blogPath = Path.Combine(WorkingDirectory, blog.Name);
        string postsPath = Path.Combine(blogPath, "Posts");
        string draftsPath = Path.Combine(blogPath, "Drafts");

        Directory.CreateDirectory(blogPath);
        Directory.CreateDirectory(postsPath);
        Directory.CreateDirectory(draftsPath);
    }

    public void Rename(string oldBlogName, string newBlogName)
    {
        // Modify blog info in Blogs.xml

        string metadataPath = Path.Combine(WorkingDirectory, "Blogs.xml");

        XElement blogsMetadata = XElement.Load(metadataPath);
        XElement blogMetadata = blogsMetadata.Elements().Single(
            blog => blog.Attribute("name").Value == oldBlogName
        );
        blogMetadata.Attribute("name").Value = newBlogName;
        blogsMetadata.Save(metadataPath);

        // Rename blog directory

        string oldBlogPath = Path.Combine(WorkingDirectory, oldBlogName);
        string newBlogPath = Path.Combine(WorkingDirectory, newBlogName);

        Directory.Move(oldBlogName, newBlogName);
    }

    public void Remove(string blogName)
    {
        // Remove blog info from Blogs.xml

        string metadataPath = Path.Combine(WorkingDirectory, "Blogs.xml");

        XElement blogsMetadata = XElement.Load(metadataPath);
        XElement blogMetadata = blogsMetadata.Elements().Single(
            blog => blog.Attribute("name").Value == blogName
        );
        blogMetadata.Remove();
        blogsMetadata.Save(metadataPath);

        // Remove blog directory

        string blogPath = Path.Combine(WorkingDirectory, blogName);

        Directory.Delete(blogPath, true);
    }

    private void MoveWorkingDirectoryTo(string newPath)
    {
        string oldPath = WorkingDirectory;

        foreach (var directory in Directory.GetDirectories(oldPath))
        {
            Directory.Move(
                directory,
                Path.Combine(newPath, Path.GetFileName(directory))
            );
        }

        File.Move(
            Path.Combine(oldPath, "Blogs.xml"),
            Path.Combine(newPath, "Blogs.xml")
        );
    }
}

 

        对于Code #04，以下几点是需要说明的：

• BlogsManager类的Initialize() 方法将用在ThisAddIn_Startup里所有代码之前，确保运行插件的所有前提条件都得到满足，而其它方法和属性将用在点击Manage Blogs按钮所显示的Blogs Manager对话框里。
• Blogs.xml这个文件的路径在多个地方用到，你可以考虑为BlogsManager添加一个辅助方法用于返回这个路径。
• 对于Add()、Rename() 和Remove() 三个方法，我没有为它们添加任何错误检测和处理代码，这些是必须的，但我想把这项任务留给读者（其实就是自己懒惰）。
• 另外，当用户添加新博客、更改现有博客的名字或者删除现有博客时，"我的博客"侧边栏都应该进行刷新，你可以通过事件把"我的博客"侧边栏和BlogsManager类关联起来，这项任务并不难，所以我不打算在这里多费笔墨了（明显是懒惰的借口）。
• 当某个博客的某（几）篇文章打开时，对博客更名的操作会失败，因为该操作包含对文件夹的操作，而此时文件夹正被使用，所以操作系统会拒绝对文件夹更名。这个问题是由当前设计所致的，解决办法是有很多的，老实说，我也对这个设计所造成的限制感到很不爽，然而我还是希望给读者留点思考的空间。

        现在是时候说说Blogs Manager对话框了：

Figure 9

        它会在加载时把BlogsManager的WorkingDirectory属性的值赋给工作目录编辑框，把BlogsManager的Blogs属性的内容填充到博客列表中：

        Code #05中的博客列表结合了ImageList组件一起使用，以便为每个博客项显示一个图标。需要说明的是，你需要适当设置ImageList的ColorDepth和ImageSize这两个属性，以便取得最佳效果。

        当用户点击Change按钮时，FolderBrowserDialog将会显示并让用户选择新的路径：

        博客列表提供右键菜单以便用户添加新博客和删除现有博客。当用户右击列表中的某个图标时，菜单显示删除菜单项；当用户右击列表的空白处时，菜单显示添加菜单项。要做到这样，先按通常的方法实现一个具有两个菜单项的右键菜单，而这两个菜单项的Click事件的Event Handler分别是：

        然后处理右键菜档的Openning事件：

        当然，你也可以找到其它方法实现同样的效果，例如直接在右键菜档的Openning事件的Event Handler里根据情况动态添加菜单项，你可以自行试验一下。为了使得菜单更加美观，我决定为这两个菜单项添加图标。在Solution Explorer中双击项目里的Resources.resx项，切换到Image视图，选择Add Resource\Add Existing File…菜单项，并把你想要的图片加进来，然后分别设置这两个菜单项的Image属性（使用大小为16x16的PNG图标效果最佳）：

Figure 10

        对于更改现有博客的名字，我选择ListView自带的"标签编辑"功能，它使得你可以像在Windows Explorer中更改文件或文件夹的名字那样更改博客的名字。要做到这点，你要先把博客列表的LabelEdit属性设为true，然后处理它的AfterLabelEdit事件：

        现在轮到用户添加新博客时显示的Blog对话框了：

Figure 11

        它的任务比较简单：

• 当用户点击Cancel按钮时，把DialogResult的值设为Cancel；
• 当用户点击OK按钮时，检查两个编辑框是否为空，仅当它们同时不为空才把DialogResult的值设为OK，否则显示错误信息。

        对于Cancel按钮，只需简单的把它的DialogResult属性的值设为Cancel就行了。对于OK按钮，我们需要处理它的Click事件，我在这里使用了ErrorProvider组件协助提示错误信息：

        当然，别忘了BlogName和BlogUrl这两个属性：

        终于到了最后一步，处理好Manage Blogs按钮的Click事件：

        然后看看运行效果：

Figure 12

 

        如果你曾经使用VSTO 2005 SE进行Ribbon开发，那么我相信你会对这里介绍的新的开发方式感到满意。然而，如果你比较习惯从前的那种方式，Visual Studio 2008 Beta 2还是能够满足你的，即在添加Ribbon扩展时选择Ribbon (XML)（参见Figure 1）。

增值服务区

• Synchronizing Ribbon and Task Pane，Andrew Whitechapel
• Office 2007 Ribbon开发，蒜头Harry

        至此，Blogging Ribbon的开发要告一段落了，虽然你还有很多需求希望提出来。然而，"我的博客"侧边栏还有一个致命的问题：如果你打开多个文档，那么它只会出现在第一个打开的文档里，其它的文档里却不见踪影。虽然这是Word本身的特性所致的，然而对于用户来说却是无法接受的。下一回，我们将探讨"我的博客"侧边栏的管理问题。