Cookbook to convert user interface to Fluent UI

With version Creo Elements/Direct Modeling 18.0 the Menu and Task Bar based UI is replaced by the Fluent UI. To convert the existing user interface to the new Fluent UI a number of steps needs to be done. Following are the most important changes:

• The Main Task and Menubar are replaced by the Ribbon.
• The Menus are replaced by Ribbon Tabs.
• The Status Bar along with Status Groups and Status Group Entries is replaced by Ribbon Status Bar functionality.
• Toolbars are not visible anymore by default.

All other user interface components stay unchanged. The dialogs and their user interface which are created with the dialog generator don't need to be adapted. Only the positioning of the user interface is changed. It is not put into the main task menu anymore. This is done automatically. A small change is necessary with respect to adding a dialog to the toolbox. A new created dialog is now not added automatically to the toolbox anymore. A setting in the dialog code must be changed.

For an intermediate time frame old functions listed in the chapter Obsolescence of Functions by Introduction of Fluent UI are still available. But they are not supported anymore. The documentation in the Integration Kit is removed.

For an intermediate time frame menus are automatically mapped to ribbon tabs. This mapping is done schematically. A redesign of ribbon tabs to be consistent with the Design Concept is necessary. The mapping functionality should only be used as an intermediate step to make addon functionality available in the Fluent UI. The user interface for applications and modules need to be converted to

• Have a common look and feel between base functionality, applications and modules.
• Provide full functionality to the user (customization).
• Keep the addon functionality running in the next releases of Creo Elements/Direct.

The basis for all controls in Ribbon Bar, Status Bar, Quick Access Toolbar, Command Mini Toolbar are available commands. This means that an available command must be created for every control which should be visible in the Fluent UI. It is not necessary to provide icons for all available commands. But the look and feel is improving if icons are available. Available commands can be defined application and module specific.

For new applications the application button still needs to be created. Please specify parameter :icon in the function sd-add-application-button. The application button is automatically added to the Application ribbon tab. The application button is used to switch between different applications and shows the status of an application, if it was activated or not. In addition the current application can be seen because it's application button stays pressed.

The code to create the main task menu sd-create-main-task-menu can be removed. With creation of a ribbon tab using function sd-fluentui-add-ribbon-tab a parameter :application allows the specification of an application the ribbon tab is related to. The visibility of ribbon tabs is automatically handled by the system when switching between different applications. A grouping of buttons to show a menu like it was done with creation of a main task menu is not necessary.

The creation of a ribbon tab replaces the creation of menu using sd-create-menu. In general a menus button box is replaced by a ribbon group. Ribbon controls such as buttons or separators are added one by one to a ribbon group. In doing so the correct position of groups and controls follow the rule: every new group is appended to a previous group in a specified ribbon tab and every new control is appended to a previous control in a specified ribbon group. For unique identification ribbon tabs and groups get a name. Tab names need to be unique within the system. Group names must be unique within the owning ribbon tab. Every button can collect a number of other controls in a menu behind this button. Please check the reference manual for details.

There doesn't exist any functionality to enable or disable controls, ribbon groups or ribbon tabs. The enable and disable status of a control is defined with the definition of the available command. It is also not possible to change the visibility of controls or ribbon groups. According to the Design Concept the user interface is not changed within single ribbon tabs. It is only possible to show or hide ribbon tabs.

If addon functionality should be added to Creo Elements/Direct Modeling additional ribbon tabs need to be created. Such kind of addon ribbon tabs should be created within certain addon contexts. This way they get the correct position in the ribbon and they are colored in a special way to show it's addon character. For more information please check the reference manual.

If the code contains functionality to modify the Status Bar it needs to be changed as well. As mentioned above the added status bar controls are based on available commands. In Fluent UI the status bar is not grouped into separate status groups anymore. All controls are handled as single entries in the status bar. Please check the reference manual for a detailed description of the new functions. It also contains an introduction to the new status bar functionality.