Results 1 to 8 of 8

Thread: VB6 Cairo-Widgets Tutorial

  1. #1

    Thread Starter
    Join Date
    Jun 2013

    VB6 Cairo-Widgets Tutorial

    This is the "logical second step", after one got more familiar with Cairo-Drawing -
    in the preceding Tutorial here:

    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...

    - 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:

    Happy "Widgeting"...

    Last edited by Schmidt; May 13th, 2021 at 10:36 AM.

  2. #2
    Hyperactive Member
    Join Date
    Jun 2016

    Re: VB6 Cairo-Widgets Tutorial

    Never, I have been given the visual aspect.
    But this tutorial is very good.
    I will study it later

    very good work

  3. #3
    Junior Member
    Join Date
    May 2021

    Re: VB6 Cairo-Widgets Tutorial

    Dear Olaf,
    The RC5/6 Widget is so powerful that I'm able to use it to simulate a little graph canvas to create a group of objects as a desired mixed object, my question is how to save the single object and whole canvas , especially like microsoft excel's insert shapes and grouping them and save them. Thanks.

  4. #4

    Thread Starter
    Join Date
    Jun 2013

    Re: VB6 Cairo-Widgets Tutorial

    RC5/6 Widgets are based on a "State-Machine"...
    (based on a bunch of Widget-Props, which hold that State,...
    and "all that State" is finally influencing the rendering in the internal W_Paint-Event, when triggered by the .Refresh-Method).

    So, if you want to save Widgets (a Widget-Hierarchy, starting from some "Root-, or Parent-Widget"), you will have to:
    - Enumerate all Widgets recursively (starting from a Root-Widget)
    - build (serialize) "a XML- or JSON-Node"-string out of the "internal State" of the currently enumerated Widget
    adding that "String-Result-Node", to a StringBuilder-Object, you pass along in that recursive Enumeration

    And as for the serialization itself, you basically have to do that (in a single, given Widget) -
    for all the Private Vars within that Widget, starting with the one which is "always there" -> W As cWidgetBase.

    1) serialize all "Default-Props" of 'W' (Left, Top, Width, Height, FontName, FontSize, ForeColor,BackColor etc.)
    2) and finally serialize all "selfdefined Private Vars" which you used, to hold additional state


    That said... the RC5/6 already contains an "Auto-Serializer", based on XML -
    which can be triggered behind any .Widgets-Prop via e.g.: strXML = MyRC6Form.Widgets.SerializeToXML(..., ...)

    The only requirement for that to work properly, is that all of your own Widget-Classes are contained Public in an AX-Dll
    (and not as Private Classes in your Main-Project).

    If that requirement is a problem for you, then you can always "roll your own" serialization,
    as outlined at the beginning of this post.


  5. #5
    Junior Member
    Join Date
    May 2021

    Re: VB6 Cairo-Widgets Tutorial

    Desr Olaf, Thank you very much, As per your guide above, I define sth my self in every obj class, so far the object can be moved, zoomimg , coped and saved as png ,also with the help of imagemagicK command line it can be copy as tranparent bg object similar to MS excel insert graph. It works fine。

    My another3 questions are:
    1)how to lock any one object but allow other objects to move and zoom in the same panel?
    2) Is it possible to group some objects together like excel insert graph?
    3) when I make one object rotate as your post example in vbforums, it can work at first time, then memory problem occured ,how can I do ?

    thanks .
    Last edited by JT870; Jan 4th, 2022 at 12:50 PM.

  6. #6
    Junior Member
    Join Date
    May 2021

    Re: VB6 Cairo-Widgets Tutorial

  7. #7

    Thread Starter
    Join Date
    Jun 2013

    Re: VB6 Cairo-Widgets Tutorial

    Cannot see (or download) your attachment.

    As for your other questions:
    1) Move-Locks could be done by simply setting MyShape.Widget.Moveable = False
    2) Grouping (using the Widget-Engine) one can do, by placing the grouped Widgets within their own (transparent) Parent-Widget
    3) A link to some code (or your own uploaded Zip-File) would be good


  8. #8
    Addicted Member -Corso->'s Avatar
    Join Date
    Oct 2021

    Re: VB6 Cairo-Widgets Tutorial

    Hi all, I can't believe I missed this tutorial(?) somehow. As I'm reading it currently, just wondering, since Olaf has updated Cairo so much, it appears that some of the programing is no longer requires a lot of the setouts of the old stuff. Is this same situtation for Widgets too? Like for example, one doesn't need to type this in anymore to make Cairo work. (Great)
    "Public New_c As New cConstructor, Cairo As cCairo"
    I'd like learn more if possible, but I feel like I'm reading something that seems out of date. Does anyone have any updated Widget samples/examples they could share with us plebs?
    Have a Cairo-Random-Auto-Generated Facemaker Maiden for your trouble.
    Name:  Emi Small.jpg
Views: 301
Size:  83.9 KB

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