ConX & ContainerX Classes - ssUltimate Library

ContainerX Class - Brief Introduction  

When I first started working on ssUltimate Library, I decided to create a counterpart of ssContainer there I called ContainerX.  This basically is just like ssContainer but with cleaner codes and better looking themes as the themes I used in ButtonX is also being utilized here.

In _ssClasses library, the image of ssContainer is dependent on your usage of ssButton for it is ssButton that takes care of generating the images.  So when you don't use ssButton, then ssContainer will also be useless as the images it needs won't be there, and you will get a big X which is the default appearance of an image object without any picture attached.

In ssUltimate, I created a separate custom class for the images extraction, and both classes has that custom class inside.  So those two, while still working with the same images, no longer relies with each other.

ConX Class, the difference


However, the design of ContainerX is into flashy embossed type.  So after I created TitleBarX, I decided to try giving my apps a flat look and while ContainerX fits just fine with my design concepts, I wanted then a really flat interface.  And so the creation of ConX (since I already used ContainerX, that is the simplest name that came to my mind to differentiate the two).

At first, all I wanted is something flat that looks cool  that can change color on the whim especially if it is tied up to TitleBarX.  Later, I decided to give this a capability to be turned into a button.  Still later, I decided to re-use  said class for my pageframe need.  It eventually became a 3-in-1 class that can be turned/utilized as plain container, a button, or a page tab.

Here is what it looks like, but first the parameters:

• cCaption = The caption of the container, class tab section will auto-adjust based on parameters cCaption, cFontName and nFontSize
• nColor = is the RGB() of your choice (or a shade using TitleBarX)
• cFontName = font name
• nFontSize = Font Size
• nTabLeft = Whether you want the tab section at leftmost (default is 0), or you want it moved somewhere to the right (useful when making this as tab to create an illusion of a pageframe)
• lInside = logical, whether you want an inside border or not (looks good for tabs, auto for tabs)
• nCurve = curvature of the shape below tab section
• nInBackColor = RGB() for that inside border/shape
• lShowActive = Logical, whether you want to show a dotted shape as outline of the caption, useful in tabs
• lNoTabs = When you are in the pageframe mode and you want only the active tab to be shown or not
• cForeColor = Caption ForeColor 

There is another property that I left via using PEM called _nfunction.  By default, its value is 0 or class will be treated as a Container.  When you give this a value of 1, then class will become a button where it can receive a click event plus hover effect.  Turning the value into 3 will change the class' usage as a pagetab of a pageframe, sort of.

As a container (_nfuntion = 0)

Nothing much to be explained.  It is a container, plain and simple, with just a flashy caption and appearance.  It is where you can put objects inside it.

If you noticed on the above, I use titleBarX' power of shading there.


As a button (_nfunction = 1)

As mentioned, it will now receive a click event plus implement hover effect on mouse enter and leave.  Once it is turned as a button, then whatever objects you put inside is no longer individually clickable, only the class itself.

As a page tab (_nfunction = 3)

Now this is the trickiest usage of the class.  If you want to use this as a sort of pageframe, then you need to turn _nFunction = 3.  Not only that, if you want to mimic a pageframe, then you have to do this:

1.  Create an empty container on form, make the borderwitdh zero and make it transparent.
2.  For each tab, you use one ConX class.  So you can design your supposed to be tab outside, placing objects inside each container, and once you are done, you can put all those ConX classes inside the empty transparent container, one on top of the other.

Now, for me not to get confused on which tab I am working on, I change the backcolor of each (aside from the caption I set where I can place the name of the class as guide during developing time).  And when I need to reach the other conX to change something there, then I cycle through each via clicking Sent to Back button; until the one I want to work with goes on top.

3. You have to estimate the tab position of each conX based on the caption you will be placing via nTabLeft parameter, so each tabs can be seen.

4.  Decide whether to show all tabs all at once or only the active one via lNoTab parameter.  When you turn this into .T., then only the active tab can be seen at a time.  If the value is .F., then all tabs will be shown.

5.  You can choose to have different colored tabs or just a single color tab, your choice.  For a single color tab, then like I mentioned, this works hand-in-hand as well with TitleBarX so you can let TitleBarX give it a shade of its selected color.

6.  You can optionally show the Active Tab (it will be encased with dotted lines) via lShowActive parameter

Here is how it looks with only the active tab being shown at a time.  This image shows it being utilized as a tab and as a container (Finalize section).

Shown also above is SwitchX, ButtonX and otCalendar classes.

And how it looks like when all tabs are shown, varying colors: http://sandstorm36.blogspot.com.au/2015/02/for-eachendfor-gotcha.html

Forgive me for the colors I chose there, eventually I changed it into a single color that follows TitleBarX:

Well, I guess with this one, I will make a sample for my subscribers to see how to utilize said class based on those 3 _nFunction.  Especially on turning it into a pageframe, sort of.


Other more posts to come  for ssUltimate Library later are SwitchX, OptionSwitchX, ScrollTime, and StickyX; to name a few.