Results 1 to 10 of 10

Thread: VB6 Cairo-Widgets Tutorial

Threaded View

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jun 2013
    Posts
    7,219

    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
  •  



Click Here to Expand Forum to Full Width