小朱® 的技術隨手寫

Office 2010 在今年釋出 Public Beta 後，大家總算可以見到傳說中的 Office 14 版，不但指標性的成員 Outlook 以及 Visio 等應用程式都大幅翻修，在 Office 的使用者介面部份也做了一些大的改變，更由 Visual Studio 2010 直接的視覺化設計支援，讓 Office 的應用程式開發能夠在充份的資源支持下順利且快速的開發，同時也因為 Office 是微軟指標性的前端應用程式標竿，以往有許多的視覺化特效都是由 Office 軟體所揭露，各家軟體商隨後才跟進，可見 Office 產品系列已經是引領 Windows 應用程式使用者介面的先行者。

自 Office 2003 開始，微軟正式將 XML 注入 Office 軟體平台，當時的智慧文件 (Smart Document) 就是一個最好的例子，它是使用一個特別的 XML 套裝擴充 Excel 與 Word 的功能 (XML Expansion Pack)，透過介面以及 XML 內嵌的功能，讓 Word 和 Excel 文件可以直接與 XML 結構溝通與交換資料，而應用 XML 最經典的成員非 InfoPath 莫屬了，它本身就是一個 XML 的文件，而 InfoPath 軟體則是它的 Render 與 Designer，它也是微軟第一個電子表單 (e-Form) 應用。

Office 2007 則是在 2007 年時所發表，並且又再一次的讓大家見識到微軟在商用應用程式的使用者介面設計功能，Office 2007 強調的是介面的易用性，這個稱為 Ribbon 的使用者介面技術是微軟 UX 技術的代表作之一，它也確實改變了 Office 使用者操作的習慣 (一開始不習慣也是真的 :) )，將許多常用的功能集中在相同的群組中，讓使用者可以快速的找到要使用的功能。

Ribbon 的使用者介面雖然看起來很炫，但它的定義方式卻很簡單，只要設定好 Ribbon 的 XML 資訊，Office 2007 就可以自動幫開發人員將位置與相關的介面設定都自動配置好。

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
  <ribbon>
    <tabs>
      <tab idMso="TabHome">
        <group idMso="GroupFont" visible="false" />
      </tab>
      <tab id="CustomTab" label="My Tab">
        <group id="SampleGroup" label="Sample Group">
          <toggleButton id="ToggleButton1" size="large"
            label="Large Toggle Button"
            getPressed="ThisDocument.MyToggleMacro"
            onAction="ThisDocument.MyActionMacro"  />
          <checkBox id="CheckBox1" label="A CheckBox"
            screentip="This is a check box"
            onAction="ThisDocument.MyCheckboxMacro" />
          <editBox id="EditBox1" getText="ThisDocument.MyTextMacro"
            label="My EditBox" onChange="ThisDocument.MyEditBoxMacro"/>
          <comboBox id="Combo1" label="My ComboBox"
            onChange="ThisDocument.MyComboBoxMacro">
            <item id="Zip1" label="33455" />
            <item id="Zip2" label="81611" />
            <item id="Zip3" label="31561" />
          </comboBox>
          <dialogBoxLauncher>
            <button id="Launcher1" screentip="My Launcher"
              onAction="ThisDocument.MyLauncherMacro" />
          </dialogBoxLauncher>
        </group>
        <group id="MyGroup" label="My Group" >
          <button id="Button1" label="My Large Button"
            size="large" onAction="ThisDocument.MyButtonMacro" />
          <button id="Button2" label="My Normal Button"
            size="normal" onAction="ThisDocument.MyOtherButtonMacro" />
        </group >
      </tab>
    </tabs>
  </ribbon>
</customUI>

上面的 XML 文件可以得到下面的 Ribbon 介面：

 

到了 Office 2010，除了原有的 Ribbon 以外，更加入了一個新的成員：Backstage View：

它就像是內建在開始功能表的自訂工作台一樣，允許讓開發人員自由在開始功能表上加入自己的功能 (例如簽核流程或是申請單等等)，而它也是和 Ribbon 一樣是利用 XML 來定義使用者介面的，例如下列的 XML 定義出了一個典型的 Backstage View：

<?xml version="1.0" encoding="utf-8" ?>
<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="OnLoad">
  <backstage>   
   <tab id="testArea" insertAfterMso="TabInfo" label="Sample Scenarios" columnWidthPercent="30" >
      <firstColumn>
         <group id="grpOne" label="Group One" helperText="This is helper text for Group One">
            <primaryItem>
               <button id="firstButton" label="Primary Button" onAction="SampleCallback" />
            </primaryItem>
            <topItems>
            <layoutContainer id="layoutOne" layoutChildren="vertical">
               <editBox id="firstEBox" label="Sample Edit Box" alignLabel="topRight" />
               <button id="sampleButton" label="Sample Definitive Button" isDefinitive="true" imageMso="FileDocumentInspect" />
            </layoutContainer>
            </topItems>
         </group>
         <group id="grpTwo" label="Group Two" visible="true" >
             <primaryItem>
                <menu id="menuOne" label="DropDown Menu">
                   <menuGroup id="menuGrpOne" >
                      <button id="btnOne"  label="Button one" />
                      <button id="btnTwo" label="Button two" />
                      <checkBox id="chkBoxOne" label="Sample Check Box" />
                   </menuGroup>
                </menu>
            </primaryItem>
             <topItems>
                <editBox id="secondEBox" label="Disabled Edit Box"  enabled="false"/>
                <imageControl id="imgControlOne" imageMso="BlogHomePage"/>
                <groupBox id="grpBox" label="Group Box with Check Boxes and Radio Group">
                   <checkBox id="chkBox1" label="A Check Box" />
                   <checkBox id="chkBox2" label="Disabled Check Box" enabled="false" />
                   <radioGroup id="rdoGrp" label="Nested Radio Group" >
                      <radioButton id="firstRadioBtn" label="1st Radio Button"/>
                      <radioButton id="secondRadioBtn" label="2nd Radio Button"/>
                      </radioGroup>
                </groupBox>
             </topItems>
          </group>
      </firstColumn>
      <secondColumn>
         <group id="grpThree" label="Group Three" visible="true">
            <topItems>
               <comboBox id="firstCBox" label="Sample Combo Box" >
                  <item id="itema" label="Cat"/>
                  <item id="itemb" label="Dog"/>
                  <item id="itemc" label="Fish"/>
               </comboBox>
               <layoutContainer id="layoutTwo" layoutChildren="vertical">
                  <editBox id="thirdEBox" label="Part of vertical layout" />
                  <editBox id="fourthEBox" label="Part of vertical layout" />
                  <editBox id="fifthEBox" label="Part of vertical layout" />
               </layoutContainer>
               <layoutContainer id="layoutThree" layoutChildren="horizontal">
                  <button id="anotherButton" label="Horizontal layout" imageMso="NewAppointment" />
                  <hyperlink id="hyperLink" label="You can place a link here"/>
                  <button id="lastButton" label="Horizontal layout" />
               </layoutContainer>
            </topItems>
          </group>
      </secondColumn>
   </tab>
  </backstage>
</customUI>

 

不論是 Ribbon 還是 Backstage View，都可以使用 VBA 或是 Visual Studio Tools for Office (VSTO) 來設計與存取，Visual Studio 2010 中內建了視覺化的 Ribbon Designer，可以讓開發人員使用視覺化的方式來開發 Ribbon 使用者介面：  

 

另外一個 Office 2010 與 XML 有關的使用者介面控制的元素是快捷功能表 (context menu)，微軟將 context menu 的定義改成了使用 XML 文件來做，不但讓開發人員可以少寫很多 code (定義與存取)，只要撰寫事件處理常式即可，例如下列的 XML 可以定義出自訂的 context menu 的項目：

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
   <contextMenus>
      <contextMenu idMso="ContextMenuText">
         <button idMso="FontDialog" visible="false" />
         <toggleButton id="MyToggle" label="My Toggle Button" />
         <button id="MyButton" label="My Button" insertBeforeMso="HyperlinkInsert" onAction="GetButtonID" />
         <menuSeparator id="MySeparator" />
         <menu id="MySubMenu" label="My Submenu" >
            <button id="MyButton2" label="Button on submenu" />
         </menu>
         <gallery id="galleryOne" label="My Gallery">
            <item id="item1" imageMso="HappyFace" />
            <item id="item2" imageMso="HappyFace" />
            <item id="item3" imageMso="HappyFace" />
            <item id="item4" imageMso="HappyFace" />
         </gallery>
         <dynamicMenu id="MyDynamicMenu" label= "My Dynamic Menu" getContent="GetMyContent" />
      </contextMenu>
   </contextMenus>
</customUI>

 

本文很快的介紹了 Office 系列軟體在 UI 上使用 XML 的演化，這些 XML-based 的 UI 設計是微軟將 Office 設計為軟體開發平台重要的一步，降低開發人員在設計使用者介面的負擔可以讓他們更專注於企業流程與應該要專注的 Domain 開發上，Office Business Application (OBA) 的概念已經慢慢的在企業中實現了，未來也許使用者的電腦中只會有 Office 應用程式，而 Office 應用程式中內含了由各式軟體廠商或開發人員設計的 customized UI，使用者學習的門檻也會大幅降低。

未來我們會實際看到這些 UI 的開發方式，並且直接體驗它的開發便利性與寬廣的應用。