-
May 13th, 2021, 09:43 AM
#1
VB6 Cairo-Widgets Tutorial
This is the "logical second step", after one got more familiar with Cairo-Drawing -
in the preceding Tutorial here: https://www.vbforums.com/showthread....cs-using-Cairo
This Widget-Tutorial will show, how you can put your gathered knowledge with the Drawing-Methods
(behind the usually named CC As cCairoContext) - to good use, when writing your own Cairo-based Controls.
A self-implemented "UserControl" (with the helper-classes from RC6, using cairo-drawing) - is called "a Widget".
A Widget is like a WindowLess-UserControl in VB6 - but not implemented in a *.ctl - but a normal *.cls.
Due to that (everything sitting in a "normal Class"), I recommend to use the same ClassName-prefixing as you find in the Demos:
- cSomeNormalClass (a normal Class is prefixed with a small c)
- cfSomeRC6Form (an RC6-Form-Class is prefixed with cf)
- cwSomeWidget (an RC6-Widget-Class is prefixed with cw)
This will allow one, to keep the different type of Classes apart (the cf-prefixed ones are like *.frm, and the cw-ones like *.ctl).
Ok, on the inside of a cwSomeWidget-Class, you will see basically the same principle, as when implementing something in a MyCtl.ctl:
- an internal Helper-Variable, which provides you with all kind of Events inside of this "Control-Class"
- in VB6 this Helper-Variable is named UserControl (automatically provided by the IDE, you don't have to define it)
- and for RC6-WidgetClasses the same thing is usually named W, but you have to define it yourself:
Private WithEvents W As cWidgetBase
Other than that, the implementation is similar to what you do in a VB6-UserControl-Module:
- you get Resize, Focus, Keyboard, Mouse- and Paint-Events from your internal UserControl-Variable
- and in the same way, you get the same Events (plus a few more) in your Widget-Class from the W-Variable
The largest difference to VB6-Usercontrols is this:
- We now have a fully Alpha-Capable Vector-engine behind it (which supports even nested Alpha)
- And the Widget is "by default" always "fully transparent"
The latter part meaning:
If you don't render anything in the W_Paint()-Event via explicite Cairo-methods, you will "not see anything"
(the Container-Background of the Parent-Widget or Parent-Form will "remain as it is" below the area, your Widget occupies).
Please note, that the only way to "render a given Widget properly", is via the W_Paint()-Event.
If you change state on a given Widget (e.g. a Caption-Prop or an ImageKey-Property), you will have to ensure:
- either a W.Refresh (if you are on the inside of your own implementing WidgetClass)
- or a MyCtl.Widget.Refresh call on the outside of your WidgetClass-implementation
to finally trigger the W_Paint-Event on the given Widget, which then dutifully re-renders its contents, according to the new "state".
Ok, the Tutorial here has the same "Folder-structured approach" (from simple to more difficult),
as the Cairo-Drawing-Tutorial which came before it...
Folder-Contents:
- 0 Hello World in VBScript
- 1 Hello Widgets (simple)
- 2 Widgets (Moveable-Prop and Zooming)
- 3 Widgets (Events and Nesting)
- 4 Widgets (MouseCursors and ImageKeys)
- 5 SliderWidget (demonstrating visual inheritance)
Here a ScreenShot of the "Folder #4 Demo" (Drag-Drop + MouseCursor-Handling)
Here a ScreenShot of "Folder #5" (a Slider Widget + Visual Inheritance)
Here the Demo-Zip:
RC6WidgetTutorial.zip
Happy "Widgeting"...
Olaf
Last edited by Schmidt; May 13th, 2021 at 10:36 AM.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|