CD303 - The 2007 Microsoft Office System: Developer Model for the New User Interface Alex Mogilevsky Architect Microsoft Corporation Savraj Dhanjal Program

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



DemosDemos



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



DemosDemos



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



DemosDemos



QuestionsQuestions


Custom Group, Tab, & GalleryCustom Group, Tab, & Gallery


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.


InvalidateInvalidate


Repurposing, Start From ScratchRepurposing, Start From Scratch


End-User CustomizationEnd-User Customization


Two Excel WorkbooksTwo Excel Workbooks


Outlook, AccessOutlook, Access

AgendaAgenda


RibbonXRibbonX


DeploymentDeployment


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



DemosDemos



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)

http://msdn.microsoft.com/office/

http://msdn.microsoft.com/office/tool/ribbon

http://blogs.msdn.com/jensenh/

© 2006 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.