Custom Controls in a Box ( - lbjoseph )

Making your own custom control with a graphicbox in Liberty BASIC.

Throughout the ages, mankind has sought after customization and personalization. Now, with the power of Liberty BASIC 4, you can create your very own custom control inside of a simple graphicbox. The following article expects you to be familiar with the Liberty BASIC language, as well as with Liberty BASIC's native drawing commands .

In this article, we will discuss the techniques that I ( - lbjoseph ) think are necessary to creating a good custom control.

Why a custom control?

Because you can. But there's more to it than that - by creating your own custom control, it's look and feel will stay consistent throughout all the various versions of windows. Secondly, you can make them to where it is a million times easier to use than the windows API controls. If you are well rounded in LB, you can make your control to where it doesn't require globalized "constants" at the start of the code, and doesn't require a huge wrapper of subs and functions to deal with the windows API calls, callbacks, messages, and so on.

Part the First: The container

First of all, we need some sort of object that we can manipulate to turn into our own object. The Liberty BASIC graphicbox is just the thing. Not only does it let you draw on it with LB's native drawing commands, but it lets you set event handlers to branch labels or subs when it is clicked, etc. This allows you to make a click-able control that looks beautiful to the eyes (some sarcasm implied).

Part the Second: The foundation of what we want

In this article we'll walk through custom control creation by creating a "fake" hyperlink control. There's a couple of things we want specifically from this control:

1. It needs to have a roll-over effect (becomes underlined upon mouse-over)
2. We want to be able to create as many as we like

So, let's go ahead and create the basis of our program. We'll need a window with a graphicbox in place and a trapclose event setup so our program will actually close when someone hits the little red x.

If we wanted to have more than one hyperlink, we'd make a graphicbox for every link we want. More on that later.

 'Make a custom control hyperlink with a Liberty BASIC graphicbox. 
 '-----------------------------------------------------------------' 
 
 [SetupWindow] 
 NoMainWin 
 WindowWidth = 400 
 WindowHeight = 200 
 UpperLeftX = Int((DisplayWidth-WindowWidth)/2) 
 UpperLeftY = Int((DisplayHeight-WindowHeight)/2) 
 
 Link1.Width = 180 
 Link1.Height = 28 
 
 GraphicBox #Win.Link1, 4, 4, Link.Width+20, Link.Height+10 
 Stylebits #Win.Link1, 0, _WS_BORDER, 0, 0 
 
 Open "Hyperlink Custom Control" For Window As #Win 
 
 #Win, "TrapClose [Quit.Win]" 
 
 Wait 
 
 [Quit.Win] 
 Close #Win 
 End 
 
 [Link1.Click] 
 Wait 
 

If you run the code above, things don't look too promising. However, this is just the foundation of our program.

There's a couple of things you need to note about the above code:

First, notice in the "GraphicBox" command that we added 20 to the width, and added 10 to the height. I'll explain why we do this a little later - for now, you just need to notice that we did that.

Secondly, we issued a " Stylebits " Command - we used the flag _WS_BORDER in the removeBits section. This removes the border of the graphicbox. This command is necessary to remove clutter which could mess up the way our control looks (especially in a dialog window).

Now we have the foundation of a custom control - a graphicbox at the right size without a border.

Part the third - The cCc.Hyperlink$() Function

Here's where the fun begins. We know we need several parameters to create a hyperlink:

1. We need the handle to the "parent" graphicbox container. We'll call this variable "gbHndl$". In our case, the programmer would pass the value "#Win.Link1" into the function.
2. We need the width of the graphicbox - we'll call this "width"
3. We need the height of the graphicbox - we'll call this "height"
4. We need the text for the hyperlink - we'll call this "text$"
5. We need to know what font to use - we'll call this "font$"
6. We need to know the background color of the window the link is on (so it won't look ugly) - we'll call this "backcolor$"
7. We need to know what color to make the hyperlink -we'll call this "linkcolor$"
8. We need the name of the sub or branch label that contains the user's code to execute upon clicking the link. We'll call this "event$". In our case, the programmer would pass the value "[Link1.Click]" into the function.

We also know that each hyperlink needs to store the above parameters so it can be rendered. The hyperlink also needs to know what state it is in - whether or not is "active". We'll call this hlinkActive. We'll keep it set to 0 when the mouse isn't over the hyperlink, and we'll set it to 1 when the mouse is over the hyperlink. That way, we'll only need to re-render the hyperlink when the value of hlinkActive changes. This reduces flickering in the graphicbox.

With those that in mind, we create our function: