[VB6/Win7+] Using the Windows UI Ribbon Framework

[fafalone]

Windows UI Ribbon Framework Demo - Intro

This is a backport of the most basic Ribbon demo from my now 3-part series on using the Ribbon in twinBASIC. The code is virtually unchanged; just some minor syntax differences where I had taken advantage of some new language features, using oleexp.tlb for the interfaces and some APIs instead of tbShellLib, and locally defining some APIs. The resources are unchanged, and indeed I just used the .res file from that project. I wanted to at least bring the proof of concept basic one to VB6, but won't be backporting the others; tB is the future

---

Windows applications frequently make use of the UI Ribbon in newer applications, including Explorer, Office, Wordpard, etc. While there's some controls implementing this kind of toolbar from scratch, and some exorbitantly expensive commercial controls that may or may not use the OS component ::cough:: CodeJock ::cough:: there's not been an implementation using the simple COM interfaces Microsoft applications use. This shows a basic proof of concept for VB6.

NOTE: Must be compiled first in order to run from IDE!! Details below.

Requirements

-Windows 7 or newer; no Ribbon in earlier versions
-You'll need either the Windows SDK v7.0 or newer, or to otherwise have obtained uicc.exe and rc.exe from it or Visual Studio.
-Becoming familiar with the XML-based Ribbon Markup Language to create the .xml files describing controls and commands. A good example for learning the syntax also accompanies this demo, although the example itself is C++.
-For VB6, oleexp v6.4 or newer (IMPORTANT: This was released a few hours before this demo, you'll likely need to update... 6.3 has bugs in the Ribbon interfaces)

Note
I recommend the Ribbon Designer in the Delphi Ribbon Frame by JAM-Software. an open source project here on GitHub. While it's not written in tB or VB6, it can be compiled without issue from source if you don't want to download the binary from the free Delphi IDE. It's a GUI-based designer that greatly simplifies the process of generating the XML, although you will still want to familiaring yourself with it, since the tool doesn't explain how it all works.

For our first ribbon application, we'll use this simple one, based on a pure C version by Stephen Wiria.

We'll start from the xml:
Preparing the project files

Once you have the ribbon.xml file and a \Res folder containing the bitmap images for your controls, you can proceed to preparing the project.

1) Use uicc.exe to compile the XML. This is easiest if you have Visual Studio command prompt available, but you can substitute full paths or drop uicc.exe in the ribbon folder. We want not just the compiled file, but we want uicc to prepare a resource file containing all the strings and bitmaps correctly named so importation into twinBASIC is nice and simple. For this we use the following command:

uicc.exe ribbon.xml ribbon.bml /res:ribbon.rc /header:ribbon.h

We ask for the C++ header because it generates a list of #defines for all the commands that is easy to copy/paste into VB/tB and do a few find/replaces to make into consts.

2) The first file is the compiled binary file; while you can use that for manual importation, it's already copied into ribbon.rc, so you don't need to worry about that for our method.

3) Compile ribbon.rc with rc.exe -- this is simple, in the same prompt, just use rc ribbon.rc. This will produce a .res file, which you might already be familiar with.

4) Use Resource Hacker or a similar tool to add any non-Ribbon resources your project has (n/a for the demo); for some reason, VB6 seems unable to open the resource in the IDE to do it there.


After that you're ready to start in VB6!

If you're setting up a new project, you'll need use Project->Add File to add the .res file, and the References dialog to add a reference to oleexp. These are already done in the demo.


The form sets everything up, then the class handles the events the ribbon raises to let us know about command clicks and other information.

The Form code declares a variable for the UI Ribbon Framework coclass, the events class, and a handler for the command click it raises:

 Private pFramework As UIRibbonFramework
 Private WithEvents pUIApp As clsRibbonEvents
 
 Private Sub Form_Load()
     Set pFramework = New UIRibbonFramework
     Set pUIApp = New clsRibbonEvents
     pFramework.Initialize Me.hWnd, pUIApp
     pFramework.LoadUI GetModuleHandleW(), StrPtr("APPLICATION_RIBBON")
 End Sub
 
 Private Sub Form_Terminate()
     pFramework.Destroy
     Set pFramework = Nothing
     Set pUIApp = Nothing
 End Sub
 
 Private Sub pUIApp_OnRibbonCmdExecute(ByVal commandId As Long, ByVal verb As UI_EXECUTIONVERB, ByVal key As LongPtr, currentValue As Variant, ByVal commandExecutionProperties As IUISimplePropertySet, returnValue As Long)
     LogMsg "You clicked: CommandId=" & commandId & ", Verb=" & verb
     
     Select Case commandId
         Case IDC_EXIT
             Unload Me
     End Select
 End Sub

This omits some additional code to run the project from the IDE.
All of those interfaces are already declared in oleexp (or in tB, tbShellLib); that's the entirety of the form code. In the class, we have:

Private Sub IUICommandHandler_Execute(ByVal commandId As Long, ByVal verb As UI_EXECUTIONVERB, key As PROPERTYKEY, currentValue As Variant, ByVal commandExecutionProperties As IUISimplePropertySet)
    Dim hr As Long
    Dim pv As Variant
    If VarPtr(currentValue) <> 0 Then
        VariantCopy pv, currentValue
    End If
    RaiseEvent OnRibbonCmdExecute(commandId, verb, VarPtr(key), pv, commandExecutionProperties, hr)
    If hr < 0 Then Err.Raise hr
End Sub

Private Sub IUICommandHandler_UpdateProperty(ByVal commandId As Long, key As PROPERTYKEY, currentValue As Variant, newValue As Variant)
    Dim hr As Long
    Dim pv As Variant
    Dim pnv As Variant
    Dim bValid As Boolean
    If VarPtr(currentValue) <> 0 Then
        VariantCopy pv, currentValue
    End If
    RaiseEvent OnRibbonUpdateProperty(commandId, VarPtr(key), pv, pnv, bValid, hr)
    If bValid Then
        VariantCopy newValue, pnv
    End If
    If hr < 0 Then Err.Raise hr
End Sub

This is a generic class intended to be reused with any ribbon project. The more advanced demos add additional code to this class to support more advanced features.

Compile and run, that's all there is to it! **IMPORTANT** You'll need to create the EXE first to run from the IDE, because Windows needs a binary with the Ribbon UIFILE resource to initialize the Ribbon.

---

Be sure to check out the UIRibbonDemos GitHub Repository!

Move into the future with the true successor, what VB7 would have been and more, twinBASIC, where you can check out the Intermediate Ribbon Demo, the Gallery Intro Demo, and coming soon, the Advanced Demo!

[fafalone]

KNOWN ISSUE: When running from the IDE, depending on compatibility settings, the title bar may turn black or become transparent and lack a control box. This will not impact the final exe.

[yokesee]

very good work.
Is it possible to work without using resource file?
Cheers

[fafalone]

Unfortunately not, at least without extreme measures like hooking the resource apis in Windows dlls. The only call to initialize it takes only an HMODULE and resource ID. You could however put the resource file in a DLL accompanying your exe, using the same technique that loads it from a compiled exe while running in the IDE for the demo.

[VanGoghGaming]

Also it would have been nice if the resource pictures were something other than BMP, like PNG or JPG. Bitmaps are so wasteful...

[fafalone]

It supports PNG, but not JPG (or any other, just 32bit ARGB BMP and PNG). I used BMP since that's what all the sdk examples and online examples I found used (minus one I found the other day that has png), and I just borrowed images from them.

https://learn.microsoft.com/en-us/wi...n-imageformats

But the 'waste' isn't really much; the 11 images in this demo are, total, 29.5kb uncompressed.

[SearchingDataOnly]

Good job. Maybe one day my scripting language IDE will be able to use your Ribbon-UI.

[fafalone]

If you have forms that are standard windows and support implementing interfaces in classes, absolutely. Looks like you're really going to be straddling the line between scripting language and full fledged programming language just with the forms ive seen in your pics.

[cliv]

Exelent job. Just an idea...RibbonDesigner for Delphi (Designer\Bin\RibbonDesigner.exe)...see here:
https://github.com/JAM-Software/RibbonFramework

[LeandroA]

very good work, for many years I wanted to see this in vb6 using the system Ribbon +10

[fafalone]

Exelent job. Just an idea...RibbonDesigner for Delphi (Designer\Bin\RibbonDesigner.exe)...see here:
https://github.com/JAM-Software/RibbonFramework

Completely agree, in fact I linked to the very same one in the post I recommend opening the xml from these demos, and the ones from the SDK examples, in the designer and in notepad, to get a sense of how it all works together, since it's not clear just from the GUI.

Be advised that Embarcadero will give your required contact info for the free Delphi version to marketers; but JAM does have binaries posted if you don't want to compile from source (root\Designer\Bin).

[yereverluvinuncleber]

Good job. Maybe one day my scripting language IDE will be able to use your Ribbon-UI.

Oh God no! - If you DO include it, please make it optional. If it is there by default I will be a non-user. I have nothing against ribbons, no, in fact I hate them and I want these apps murdered.

[Schmidt]

I have nothing against ribbons, no, in fact I hate them and I want these apps murdered.

LOL, I feel you...

They look nice at a first glance, ... but from a purely technical (UI-workflow)-point of view,
the Ribbons are one of the worst examples for "function follows form" (and not the other way round, as it should be) -
which currently exist.

Whilst all really modern Desktop-Apps in daily use (like Browser-UIs, which moved the tabs in the windows title-bar) -
are trying to "save as much vertical screen-space as they can" on our Wide-Screens (to leave more for the Document-view) -
Ribbon-based UIs are wasting it like no tomorrow...

Olaf

[fafalone]

I hated the ribbon at first too, but never as much as the hatred that burns with the fire of a thousand suns I have for modern browser interfaces without title bars and menu bars. I *hate* having to find the little corner where I can actually drag the window itself instead of just a tab. Modern browser UIs compete with the Windows 11 taskbar/start menu for 'worst GUI of all time'.

[Schmidt]

I hated the ribbon at first too, but never as much as the hatred that burns with the fire of a thousand suns I have for modern browser interfaces without title bars and menu bars. I *hate* having to find the little corner where I can actually drag the window itself instead of just a tab. Modern browser UIs compete with the Windows 11 taskbar/start menu for 'worst GUI of all time'.

I don't find it *that* uncomfortable to navigate to the "movement-spot" -
(besides, I rarely move Browser-Windows around - and usually run them maximized).

Saving vertical screenspace is much more important to me (personally) -
and the day Chrome, Edge and Firefox removed even their StatusBars was "a good day" in my book.

Hardware-wise - the trend with Screen-formats "getting ever wider" (with some abominations even reaching 20:9)
now seems to be inversed thankfully...

Since last year or so, the vendors seem to be slowly paddling back towards 4:3 == 16:12)

Just my $0.02

Olaf

[yereverluvinuncleber]

I hated the ribbon at first too, but never as much as the hatred that burns with the fire of a thousand suns I have for modern browser interfaces without title bars and menu bars. I *hate* having to find the little corner where I can actually drag the window itself instead of just a tab. Modern browser UIs compete with the Windows 11 taskbar/start menu for 'worst GUI of all time'.

I do agree with the latter problem of the title bars and menus - but the ribbon can just die. So much that comes from Redmond seems to be fad, then shortly after is dropped like hot cakes. How many Microsoft buzzwords relating to products do we know that are now deprecated? Starting with VB6 of course then others: silverlight, jscript... UWP.

What's the old saying? "Throwing the baby out with the bathwater."

What's that in German? Is there similar?

Faf. I do appreciate your work to implement ribbons though. VB6 apps need the capability, at least.

[SearchingDataOnly]

Oh God no! - If you DO include it, please make it optional. If it is there by default I will be a non-user. I have nothing against ribbons, no, in fact I hate them and I want these apps murdered.

Yes, ribbon-style is just one of the three options. The default UI style will be VSCode-like. The classic style is for you, the ribbon-style is for xiaoyao.

[SearchingDataOnly]

LOL, I feel you...

They look nice at a first glance, ... but from a purely technical (UI-workflow)-point of view,
the Ribbons are one of the worst examples for "function follows form" (and not the other way round, as it should be) -
which currently exist.

Whilst all really modern Desktop-Apps in daily use (like Browser-UIs, which moved the tabs in the windows title-bar) -
are trying to "save as much vertical screen-space as they can" on our Wide-Screens (to leave more for the Document-view) -
Ribbon-based UIs are wasting it like no tomorrow...

Olaf

I personally don't like ribbons, but since some people do, I'll make it one of the options for users to choose. My favorite is the classic vb6 style, followed by vscode style.

In order not to let others laugh at me for plagiarizing VB6-IDE, and to prevent Microsoft's lawyer from getting me into trouble, I'll make the vscode style the default option.

[fafalone]

Lol see now I like the ribbon more than I like the VSCode IDE.

[xiaoyao]

It's also can run in vb6 ide ,chang this,but can't show close button

Private Sub IUIApplication_OnViewChanged(ByVal viewId As Long, ByVal typeID As UI_VIEWTYPE, ByVal view As IUnknown, ByVal verb As UI_VIEWVERB, ByVal uReasonCode As Long) 'Implements IUIApplication.OnViewChanged
     Debug.Print "IUIApplication_OnViewChanged"
    'Err.Raise E_NOTIMPL
End Sub

[xiaoyao]

Lol see now I like the ribbon more than I like the VSCode IDE.

The traditional menu and small icon toolbar has become outdated, we can not invent new modes, using Microsoft mature OFFICE and EXPLORER Explorer Ribbon, is also a good way.

[SomeYguy]

This is wonderful indeed (Thank you for your hard work!) but way too complicated for my taste. I bought the Codejock version a few years ago and used it in a couple of applications and it looked very nice but I wanted my future programs to retain portability i.e. single exe can run from USB stick etc. so I ditched everything external and now use internal drawing (GDI & GDI+) for all interface drawing and embedded resource files for control images.

At work we use MS Office 365 for everything and I HATE that interface .

[fafalone]

See now drawing everything myself with GDI and GDI+ is way too complicated for me and this would be easier 🤣

I definitely understand what you mean about portability, I consider .ocx controls or activex dlls an absolute last resort for only the rarest situations, where there's no alternative and coding it myself would be impractical. Fortunately the ribbon as used here is entirely portable, oleexp.tlb is only needed in the IDE; the exe will be standalone with no other files required.