CD303 - The 2007 Microsoft Office System: Developer Model for the New User Interface

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

3. The New User Interface • Access, Excel, Outlook, PowerPoint, Word

4. Ribbon Extensibility - “RibbonX” • Developers can modify the Ribbon • For example: remove tabs, add a tab, add a group

5. Agenda • Existing solutions • RibbonX Details • Demos • Migrating existing solutions • Conclusion • Questions

6. Agenda • Existing solutions • RibbonX Details • Demos • Migrating existing solutions • Conclusion • Questions

7. Existing Solutions • XLM • WordBasic • CommandBars (‘96) • WLL, XLL • XLA, PPA, Word global templates • In Excel, “Init Menus” registry key • Attached Toolbars in Word & Excel • Other technologies… • And it all still works!

8. Existing Solutions Custom Buttons on Formatting Toolbar Custom Menu Custom Toolbars

9. Mapping Existing Solutions

10. Agenda • Existing solutions • RibbonX Details • Demos • Migrating existing solutions • Conclusion • Questions

11. Before Office 2007… Inconsistency across applications Office 2000 VBA Programmers Guide, MS Press, 1999

12. Before Office 2007… • Hard to build well-behaved add-ins • Hard to reference built-in controls, images • Hard to localize • Nearly impossible to make add-in customizable by end users • Easy to have add-in conflicts • Result: UI deteriorates over time

15. Excel, after you open a few hundred workbooks with attached toolbars…

16. RibbonX… • Is a consistent, XML-based developer model for Office UI • Produces well-behaved solutions by default • Exposes new control types • Targets specific developer scenarios

17. Add your own tabs Add to built-in tabs Add to the Office Menu Add to built-in contextual tabs Remove tabs, groups, controls RibbonXBasics

18. Tabs Groups Buttons Menus SplitButtons ToggleButtons Labels CheckBoxes RibbonXControls

19. EditBoxes DialogBoxLaunchers DropDowns ComboBoxes Galleries RibbonX Controls Only five controls in Office 2003: msoControlButton, msoControlEdit, msoControlPopup, msoControlComboBox, msoControlDropdown

20. RibbonX Markup • Declarative XML • Easy to understand, localize, generate • Separates UI from your business logic • Gets applied to UI at add-in or document load <tab idMso=“TabWrite”> <group id=“myGroup” label=“My Group”> <button id=“hw” label=“Hello World!” onAction=“myHelloFunc” /> </group> </tab>

21. RibbonX Entry Points • New File Format Documents (VBA solutions) • Include customUI markup as a part • COM Add-Ins (C#, C++, VB.NET, VB6) • Return customUI markup via IRibbonExtensibility interface • VSTO v3 Solutions • Same as COM • Wizard, generated code (connection, resources, images) • GUI editor (maybe – see CD308 for VSTO pans)

22. RibbonX Solution Space COM VBA VSTO (C#, VB.NET, VB6, C++) Installed at app-level Word: Global Template, Excel (.xlam) PPT (.ppam) contains customUI part VSTO v3 Write a VSTO v3 app-level solution App. Level Word, Excel, PPT New file format document contains customUI part Access: loadCustomUI method Installed at app-level, displays UI based on doc properties VSTO v3 Write a VSTO v3 doc-based solution Doc. Level

23. RibbonX Schema • ribbon, tab, group, box • Containers • “Find or create” model • id, idMso • Define a custom id, refer to built-in id • insertAfterMso, insertBeforeMso • Insert in relation to built-in control • image, imageMso • Define your own image, refer to a built-in image • getImage, onAction, getEnabled, getVisible • Some of the available callbacks

24. Hello World Document Alex MogilevskyArchitect Microsoft Corporation

25. Features Targeting Developers • StartFromScratch • Global repurposing • Referencing built-in controls and images <ribbon startFromScratch=“true”> <!– hides the main tabs --> <command idMso=“Save” onAction=“runMyCode” /> <!- takes over the built-in save action --> <button id=“x” imageMso=“Save” label=“Imposter!” /> <!- “steals” the image of the Save button -->

26. Dynamic Update of Controls • XML is the only way to add controls • No API to add new controls at arbitrary time • State and properties are dynamic, via callbacks • getVisible, getLabel, getImage… • Galleries, dynamicMenus • Can be dynamically populated with controls • The “pull” model

27. “Pull” Model • Questions you’ll never ask again • When is it OK to add UI? Remove? • In how many documents, windows? • Will I be called on uninstall to clean up? • Is there other code changing the same UI? • Can the user remove controls I want to change? • Can the user move or copy my controls? • No “housekeeping” code • No need to make adjustments at open, close, install, uninstall (unlike CommandBars)

28. Status Bar Mini Toolbar Add/Remove inside built-in groups Custom group scaling Right-click (context) menus However, Existing right-click customizations work Global repurposing works for all controls Outside Scope Of RibbonX

29. Agenda • Existing solutions • RibbonX Details • Demos • Migrating existing solutions • Conclusion • Questions

30. Custom Group, Tab, & Gallery Alex MogilevskyArchitect Microsoft Corporation

31. Custom Office Menu Item Alex MogilevskyArchitect Microsoft Corporation

32. Dynamic Update via Invalidate Call InvalidateorInvalidateControl When Office updates the Ribbon, it will ask your code again for dynamic properties Markup: <button id=“MyButton” label=“My First Button” getImage=“myButtonImage” /> C#: Ribbon.InvalidateControl(“MyButton”); Office queries your callback functions again.

33. Invalidate Alex MogilevskyArchitect Microsoft Corporation

34. Repurposing, Start From Scratch Alex MogilevskyArchitect Microsoft Corporation

35. End-User Customization Alex MogilevskyArchitect Microsoft Corporation

36. Two Excel Workbooks Alex MogilevskyArchitect Microsoft Corporation

37. Outlook, Access Alex MogilevskyArchitect Microsoft Corporation

38. Agenda • Existing solutions • RibbonX • Migrating existing solutions • Deployment • Conclusion • Questions

39. Migrating a Solution • Spectrum of Possibilities None Don’t change your code whatsoever. Your added buttons appear on the add-ins tab. Simple Find the right place and the right control types for your UI in the new Ribbon. Just move them to the right place. Full Rethink your UI based on the new paradigms, perhaps using gallery controls and a reorganization of your commands.

40. Simple Migration • In Office 2003, your code added items to the tools menu.

41. Design Guidelines

42. In Office 2007…

43. Agenda • Existing solutions • RibbonX Details • Demos • Migrating existing solutions • Conclusion • Questions

44. Conclusion… • Existing solutions still work • New model is XML-based, easier to build great add-ins • Optimized for common scenarios • Consistent across applications • You can spend your time building solutions, instead of worrying about the UI!

45. Known Changes at Beta 2 TR • <fileMenu> tag will be <officeMenu> • <advanced> tag will be <dialogBoxLauncher> in B2TR • Built-in control IDs will be significantly updated in B2TR

46. Resources • Office Developer Center • http://msdn.microsoft.com/office/ • Ribbon Developer Center • http://msdn.microsoft.com/office/tool/ribbon • UI Blog • http://blogs.msdn.com/jensenh/ see the developer section (Thursdays)

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