Dec 24, 2015
CD303 - The 2007 Microsoft Office System: Developer Model for the New User Interface
CD303 - The 2007 Microsoft Office System: Developer Model for the New User Interface
Alex MogilevskyAlex MogilevskyArchitectArchitectMicrosoft Microsoft CorporationCorporation
Savraj DhanjalSavraj DhanjalProgram ManagerProgram ManagerMicrosoft CorporationMicrosoft Corporation
The New User InterfaceThe New User Interface
Access, Excel, Outlook, PowerPoint, WordAccess, Excel, Outlook, PowerPoint, Word
Ribbon Extensibility - “RibbonX”Ribbon Extensibility - “RibbonX”
Developers can modify the RibbonDevelopers can modify the Ribbon
For example: remove tabs, add a tab, add For example: remove tabs, add a tab, add a groupa group
AgendaAgenda
Existing solutionsExisting solutions
RibbonX DetailsRibbonX Details
DemosDemos
Migrating existing solutionsMigrating existing solutions
ConclusionConclusion
QuestionsQuestions
AgendaAgenda
Existing solutionsExisting solutions
RibbonX DetailsRibbonX Details
DemosDemos
Migrating existing solutionsMigrating existing solutions
ConclusionConclusion
QuestionsQuestions
Existing SolutionsExisting Solutions
XLMXLM
WordBasicWordBasic
CommandBars (‘96)CommandBars (‘96)
WLL, XLLWLL, XLL
XLA, PPA, Word global templatesXLA, PPA, Word global templates
In Excel, “Init Menus” registry keyIn Excel, “Init Menus” registry key
Attached Toolbars in Word & ExcelAttached Toolbars in Word & Excel
Other technologies…Other technologies…
And it all still works!And it all still works!
Existing SolutionsExisting Solutions
Custom MenuCustom MenuCustom ButtonsCustom Buttons
on Formatting Toolbaron Formatting Toolbar
Custom ToolbarsCustom Toolbars
Mapping Existing SolutionsMapping Existing Solutions
If your code added a… it appears in…
control to a built-in menucontrol to a built-in menu the 'Menu Commands' groupthe 'Menu Commands' group
control to a built-in toolbarcontrol to a built-in toolbar the 'Toolbar Commands' the 'Toolbar Commands' groupgroup
custom toolbarcustom toolbar The ‘Custom Toolbars’ groupThe ‘Custom Toolbars’ group
… on the Add-Ins Tab
AgendaAgenda
Existing solutionsExisting solutions
RibbonX DetailsRibbonX Details
DemosDemos
Migrating existing solutionsMigrating existing solutions
ConclusionConclusion
QuestionsQuestions
Before Office 2007…Before Office 2007…
Inconsistency across applicationsInconsistency across applications
Office 2000 VBA Programmers Guide, MS Press, 1999Office 2000 VBA Programmers Guide, MS Press, 1999
Before Office 2007…Before Office 2007…
Hard to build well-behaved add-insHard to build well-behaved add-ins
Hard to reference built-in controls, Hard to reference built-in controls, imagesimages
Hard to localizeHard to localize
Nearly impossible to make add-in Nearly impossible to make add-in customizable by end userscustomizable by end users
Easy to have add-in conflictsEasy to have add-in conflicts
Result:Result: UI deteriorates over time UI deteriorates over time
Excel, after you open a few hundred workbooks with attached toolbars…
RibbonX…RibbonX…
Is a consistent, XML-based developer Is a consistent, XML-based developer model for Office UImodel for Office UI
Produces well-behaved solutions by Produces well-behaved solutions by defaultdefault
Exposes new control typesExposes new control types
Targets specific developer scenariosTargets specific developer scenarios
Add your own tabsAdd your own tabs
Add to built-in tabsAdd to built-in tabs
Add to the Office Add to the Office MenuMenu
Add to built-in Add to built-in contextual tabscontextual tabs
Remove tabs, Remove tabs, groups, controlsgroups, controls
RibbonXRibbonX BasicsBasics
TabsTabs
Groups Groups
ButtonsButtons
MenusMenus
SplitButtons SplitButtons
ToggleButtonsToggleButtons
LabelsLabels
CheckBoxesCheckBoxes
RibbonXRibbonX ControlsControls
EditBoxesEditBoxes
DialogBoxLauncherDialogBoxLauncherss
DropDownsDropDowns
ComboBoxesComboBoxes
Galleries Galleries
RibbonX ControlsRibbonX Controls
Only five controls in Office 2003:msoControlButton, msoControlEdit,
msoControlPopup, msoControlComboBox, msoControlDropdown
RibbonX MarkupRibbonX Markup
Declarative XMLDeclarative XML
Easy to understand, localize, generateEasy to understand, localize, generate
Separates UI from your business logicSeparates UI from your business logic
Gets applied to UI at add-in or document Gets applied to UI at add-in or document loadload
<tab idMso=“TabWrite”><tab idMso=“TabWrite”><group id=“myGroup” label=“My Group”><group id=“myGroup” label=“My Group”>
<button id=“hw” label=“Hello World!” <button id=“hw” label=“Hello World!” onAction=“myHelloFunc” />onAction=“myHelloFunc” />
</group></group></tab></tab>
RibbonX Entry PointsRibbonX Entry Points
New File Format Documents (VBA New File Format Documents (VBA solutions)solutions)
Include customUI markup as a partInclude customUI markup as a part
COM Add-Ins (C#, C++, VB.NET, VB6)COM Add-Ins (C#, C++, VB.NET, VB6)Return customUI markup via Return customUI markup via IRibbonExtensibilityIRibbonExtensibility interface interface
VSTO v3 SolutionsVSTO v3 SolutionsSame as COMSame as COM
Wizard, generated code (connection, resources, Wizard, generated code (connection, resources, images)images)
GUI editor (maybe – see CD308 for VSTO pans)GUI editor (maybe – see CD308 for VSTO pans)
RibbonX Solution SpaceRibbonX Solution Space
(C#, VB.NET,
VB6, C++)
Installed at app-level
VSTO v3
Write a VSTO v3 app-level solution
Word: Global
Template, Excel
(.xlam)PPT
(.ppam)containscustomUI
part
Installed at app-level, displays UI based on
doc properties
VSTO v3
Write a VSTO v3
doc-based solution
Word, Excel, PPTNew file format
documentcontainscustomUI
partAccess:
loadCustomUI method
App.App.LevelLevel
Doc.Doc.LevelLevel
COMCOM VBAVBA VSTOVSTO
RibbonX SchemaRibbonX Schema
ribbon, tab, group, box ribbon, tab, group, box ContainersContainers
““Find or create” modelFind or create” model
id, idMsoid, idMsoDefine a custom id, refer to built-in idDefine a custom id, refer to built-in id
insertAfterMso, insertBeforeMsoinsertAfterMso, insertBeforeMso Insert in relation to built-in controlInsert in relation to built-in control
image, imageMsoimage, imageMsoDefine your own image, refer to a built-in image Define your own image, refer to a built-in image
getImage, onAction, getEnabled, getVisiblegetImage, onAction, getEnabled, getVisibleSome of the available callbacksSome of the available callbacks
Alex MogilevskyAlex MogilevskyArchitect Architect Microsoft CorporationMicrosoft Corporation
Hello World DocumentHello World Document
Features Targeting DevelopersFeatures Targeting Developers
StartFromScratchStartFromScratch
Global repurposingGlobal repurposing
Referencing built-in controls and imagesReferencing built-in controls and images
<ribbon startFromScratch=“true”><ribbon startFromScratch=“true”><!– hides the main tabs --><!– hides the main tabs -->
<command idMso=“Save” onAction=“runMyCode” /><command idMso=“Save” onAction=“runMyCode” /><!- takes over the built-in save action --><!- takes over the built-in save action -->
<button id=“x” imageMso=“Save” label=“Imposter!” /><button id=“x” imageMso=“Save” label=“Imposter!” /><!- “steals” the image of the Save button --> <!- “steals” the image of the Save button -->
Dynamic Update of ControlsDynamic Update of Controls
XML is the only way to XML is the only way to addadd controls controlsNo API to add new controls at arbitrary timeNo API to add new controls at arbitrary time
State and properties are dynamic, State and properties are dynamic, via callbacksvia callbacks
getVisible, getLabel, getImage…getVisible, getLabel, getImage…
Galleries, dynamicMenusGalleries, dynamicMenusCan be dynamically populated with controlsCan be dynamically populated with controls
The “pull” modelThe “pull” model
““Pull” ModelPull” Model
Questions you’ll never ask againQuestions you’ll never ask againWhen is it OK to add UI? Remove?When is it OK to add UI? Remove?
In how many documents, windows?In how many documents, windows?
Will I be called on uninstall to clean up?Will I be called on uninstall to clean up?
Is there other code changing the same UI?Is there other code changing the same UI?
Can the user remove controls I want to change? Can the user remove controls I want to change?
Can the user move or copy my controls? Can the user move or copy my controls?
No “housekeeping” codeNo “housekeeping” codeNo need to make adjustments at open, close, No need to make adjustments at open, close, install, uninstall (unlike CommandBars)install, uninstall (unlike CommandBars)
Status BarStatus Bar
Mini ToolbarMini Toolbar
Add/Remove inside built-in groupsAdd/Remove inside built-in groups
Custom group scalingCustom group scaling
Right-click (context) menusRight-click (context) menus
However,However,
Existing right-click customizations workExisting right-click customizations work
Global repurposing works for all Global repurposing works for all controlscontrols
Outside Scope Of RibbonXOutside Scope Of RibbonX
AgendaAgenda
Existing solutionsExisting solutions
RibbonX DetailsRibbonX Details
DemosDemos
Migrating existing solutionsMigrating existing solutions
ConclusionConclusion
QuestionsQuestions
Alex MogilevskyAlex MogilevskyArchitect Architect Microsoft CorporationMicrosoft Corporation
Custom Group, Tab, & GalleryCustom Group, Tab, & Gallery
Alex MogilevskyAlex MogilevskyArchitect Architect Microsoft CorporationMicrosoft Corporation
Custom Office Menu ItemCustom Office Menu Item
Dynamic Update via InvalidateDynamic Update via Invalidate
Call Call InvalidateInvalidate oror InvalidateControl InvalidateControl
When Office updates the Ribbon, it will ask When Office updates the Ribbon, it will ask your code again for dynamic propertiesyour code again for dynamic properties
Markup:Markup:<button id=“MyButton” label=“My First Button” <button id=“MyButton” label=“My First Button”
getImage=“myButtonImage” />getImage=“myButtonImage” />
C#:C#: Ribbon.InvalidateControl(“MyButton”);Ribbon.InvalidateControl(“MyButton”);
Office queries your callback functions again.Office queries your callback functions again.
Alex MogilevskyAlex MogilevskyArchitect Architect Microsoft CorporationMicrosoft Corporation
InvalidateInvalidate
Alex MogilevskyAlex MogilevskyArchitect Architect Microsoft CorporationMicrosoft Corporation
Repurposing, Start From ScratchRepurposing, Start From Scratch
Alex MogilevskyAlex MogilevskyArchitect Architect Microsoft CorporationMicrosoft Corporation
End-User CustomizationEnd-User Customization
Alex MogilevskyAlex MogilevskyArchitect Architect Microsoft CorporationMicrosoft Corporation
Two Excel WorkbooksTwo Excel Workbooks
Alex MogilevskyAlex MogilevskyArchitect Architect Microsoft CorporationMicrosoft Corporation
Outlook, AccessOutlook, Access
AgendaAgenda
Existing solutionsExisting solutions
RibbonXRibbonX
Migrating existing solutionsMigrating existing solutions
DeploymentDeployment
ConclusionConclusion
QuestionsQuestions
Migrating a SolutionMigrating a Solution
Spectrum of PossibilitiesSpectrum of Possibilities
None
Don’t change
your code whatsoever
. Your added
buttons appear on the add-ins
tab.
Full
Rethink your UI
based on the new
paradigms, perhaps
using gallery controls
and a reorganization of your commands.
Simple
Find the right place
and the right
control types for your UI in the new Ribbon.
Just move them to the right place.
Simple MigrationSimple Migration
In Office 2003, your code added items to In Office 2003, your code added items to the tools menu.the tools menu.
Design GuidelinesDesign Guidelines
UI RegionUI Region Contains…Contains…
File MenuFile Menu Commands External to Commands External to DocumentDocument
Main TabsMain Tabs Commands that modify Commands that modify Document ContentDocument Content
Contextual TabsContextual Tabs Commands specific to built-in Commands specific to built-in objectsobjects
Programmable Programmable Task PanesTask Panes
Typically display data Typically display data relevant to current documentrelevant to current document
In Office 2007…In Office 2007…
AgendaAgenda
Existing solutionsExisting solutions
RibbonX DetailsRibbonX Details
DemosDemos
Migrating existing solutionsMigrating existing solutions
ConclusionConclusion
QuestionsQuestions
Conclusion…Conclusion…
Existing solutions still workExisting solutions still work
New model is XML-based, easier to build New model is XML-based, easier to build great add-insgreat add-ins
Optimized for common scenariosOptimized for common scenarios
Consistent across applicationsConsistent across applications
You can spend your time building You can spend your time building solutions, instead of worrying about the UI!solutions, instead of worrying about the UI!
Known Changes at Beta 2 TRKnown Changes at Beta 2 TR
<fileMenu> tag will be <officeMenu><fileMenu> tag will be <officeMenu>
<advanced> tag will be <advanced> tag will be <dialogBoxLauncher> in B2TR<dialogBoxLauncher> in B2TR
Built-in control IDs will be significantly Built-in control IDs will be significantly updated in B2TRupdated in B2TR
ResourcesResources
Office Developer CenterOffice Developer Centerhttp://msdn.microsoft.com/office/http://msdn.microsoft.com/office/
Ribbon Developer CenterRibbon Developer Centerhttp://msdn.microsoft.com/office/tool/ribbonhttp://msdn.microsoft.com/office/tool/ribbon
UI BlogUI Bloghttp://blogs.msdn.com/jensenh/http://blogs.msdn.com/jensenh/ see the developer section (Thursdays)see the developer section (Thursdays)
© 2006 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.