Date entry controls are ugly. Popup Calendars are cumbersome. Date entry controls are confusing when dealing with Multi-Language, where the format may be MM/DD/YYYY or DD/MM/YYYY.

Now that we got that out of the way, let’s talk about this week’s upcoming article and webinar. I adding my latest date entry to the mix of methods that are out there. It isn’t the perfect control for every situation, but it looks attractive, and if you are asking for recent dates (within a year) it quick and fairly intuitive. What’s more its a WebDev Control template so you can drop it on your page, and go.

There is a bit of advanced CSS involved just for some look and feel pieces, but other that that its straight WebDev code. Along with looking at my Date Control template, we will be looking at how to create and use control templates, so even if you are in love with standard date entries, there might be something worth while for you this week. Although I am concerned if you love standard date entries 🙂

We are actually going to create 2 control templates. First we are going to create one for displaying dates, then we will create a second control template that will allow editing. The second template uses the first template so any changes we make to the display template will be reflected in both. Which shows the power of Control templates!

Above you can see what our control template looks like, it is actual a cell, and 3 statics. The cell gives us the border and the general background, then there is a static for Month and year, Day, and day of the week. It is definitely easier to read and more attractive than this

To use the control template you simply drag it from the project explorer and drop it on the page.

Once dropped it will look like this

Notice the yellow dots, that is how we know it is using a template. And to use the template you simply assign your date variable to the template.

What would really be nice is if we could link a variable to the template, like we can an edit control. But it seems the link tab is disabled for templates.

So that is all there is to using the template, now lets look at creating the template.

There are two ways to create a control template, you can either create a control template from scratch.

Or you can create the controls on your page, select them, and then from the Refactoring menu, chose Create a control template from the selection.

Which ever route you chose you end up with a edit screen the same as you would a page, except you are editing a control template.

I won’t go into create the cell and the statics, there is nothing special about them at all. As mentioned above we need a cell and 3 statics.

The control template has code processes the same as a page does, so lets look at the code for our control template.

In the Global Declarations we create a Date variable, this variable is only global to the template, not the page that the template is on. We will use this variable to keep track of the date.

Next in the initialization code of the template we call a local procedure, again this procedure is only local to the template, not the page it is on. Lets take a look at the code in the procedure, all it is is three lines of code that format our 3 statics using the very powerful DateToString function of WX.

There are two special processes for Control Templates, the first is Retrieving the ..Value property and the second is Assignment through the ..Value property. These are similar to the assign and retrieve events of Class properties (or setters and getters if your a traditional OOP developer).

So the code in the retrieving the ..Value sets MySelf..value equal to our date variable. In this case MySelf represents the control template. So anytime your code looks at the value of the template, this code executes and makes the template the value of the date variable.

So now lets look at the assignment process. It sets the Date Variable to the value of template and then run the DisplayDate procedure to update the statics. So when our page code above executed this line

The date variable was set to the value of tmpDate and then the statics were updated.

That’s all there is to it, you can drop the template on any page, set it value and you have a nice clean date display.

But wait you say, sometimes you need to change the date! Well lets create a second control template for that.

As you can see the Edit version is just our display version with the addition of 4 links for Previous Day and Month, and Next Day and Month.

We could Create this template completely from scratch like we did the first one, but then what if we decided to change the font or color scheme of the website. We could need to edit both control templates. So instead we create a second control template and then drop the first control template on it. So our second template is really our first template plus 4 links. If we look at the second control template we can see that because again our template has the yellow dots on it.

You might notice the our links look quite a bit different at runtime than they do at design time, that is because I am using some advanced CSS code for them, but lets look at the code first.

Each of the four links has very similar code, the only difference is they are either incrementing or decrementing, and either one day or one month at a time.

But notice the code is not referencing LocDate directly, remember I mentioned earlier that LocDate is only declared in the template. So its not declared in this second template. However WX does let us “reach” down into the template and reference it by prefixing it with the template name. So that is why the code is tplDisplayDate.LocDate instead of just LocDate. And of course once the date is changed, the statics need to be updated, so similarly we run the DisplayDate procedure of the other template.

I should mention that when you drop a control template on a page or another control template, WX names that instance of the control template something really useful like “tplControlTemplate1”. So anytime I drop a control template on to a page the first thing I do is go into the description of it and change its name. Otherwise our code above would be tplControlTemplate1.LocDate which sure isn’t doing anyone any favors!

As mentioned the other 3 links are very similar so I won’t bother discussing their code, but here it is for you to look at if needed.

The only code let is the Retrieving and Assignment code, we don’t want the developer using the template to have to reference the “nested” template to work with the value.

So when the Retrieving process fires we set the value of this template, equal that of the “nested” template. And likewise when the value of this template is assigned, we set the value of the “nested” template, which of course will run the code of the next template and display the new date.

That’s all the WX code there is! Now you can drop the edit template on your page and uses its value to get or set the value of any date variable you need.

The only thing let is to look at the CSS code for those links. I could have made life “easier” on myself by using a graphic for those links, but in the project that this control was create for we are doing private labeling and multiple languages, which means you might need a different graphic for each company to match the color scheme, and then a different graphic for each language, so anytime we can avoid using a graphic we do. Theoretically this also helps the speed of the page load, but I worry much less about that with small graphics and text, but it could be a consideration if your target audience doesn’t have a good internet connection.

So instead of using a graphic, I am just using the < and > than symbols, but they don’t look very nice next to that big date box, and if I were to just make the font larger they would also get much wider and use up way to much room and still not look attractive, so instead I employ a little advance CSS to stretch and compress the font.

Lets look at the CSS style screens for those links

I am using 20 pixels, normally I use points, but for this I needed to be more specific so I am using pixels. There was some trial and error to get the right value. And if you haven’t done so what some of my recent webinars to see how I am able to do that trial and error via chrome developer tools, instead of tweaking the WebDev settings and retesting!

I set the intercharacter to -11 pixels. For the day links this doesn’t have any effect but for the month links it squeezes the two << or >> close together.

I also specify None for decoration, so there isn’t an underline under the link. Next we look at the Effects tab.

We are using Enlargement of the Y axis by 200%, this stretches the font to double its height while leaving its width the same.

And finally on the Advanced tab, we add some Custom CSS to bring it all together. Some of these settings might be achieved via other settings on the Style tab, but it was just easier for me to do them via Custom CSS than it was to figure out where they might be on the other screens.

First I set the Display mode to inline-block. I won’t try to get you a good explanation of that, google has lots of info. I will just say anytime you are doing advanced sizing and positioning you will likely need to use one of the Block display modes.

Next is setting positioning to relative, that way adjustments to position are handled based on the intial location of the control, instead of the entire page coordinates.

Next we set the Z-index to 1, this is similar to “Bring to Front”, we are just making sure this control is on top of any other controls it overlays so that it will capture the click event.

The final two settings took the most experimenting to get right. The issue with the CSS transformation features is they don’t seem to also adjust the “click” area of the control, or at least not proportionally. So this left area of my new stretch out link that couldn’t be clicked on and make the control not very user friendly. So the padding setting, effectively makes the click area 10 pixels wider, however this would “crash” the click areas over the top of each other, so using a negative margin offsets that issue. I would never have been able to come up with these settings other than trial and error, and if you want to see how each effects the outcome I suggest using Chrome Developers tools and disabling one at a time and see the difference. We will be doing just that during the webinar that goes with this article.

Only one last CSS tweak need! On the Next month link, because it is right aligned, it leaves more space between the two links than the previous links does, so I overload the style for that link and uses a -3 pixel indent to move it back so the spacing looks correct.

Along with giving you a couple of date control templates that will separate your website from the “basic” sites out there, it has inspired you to take a closer look at control templates and one day soon you will be sharing control templates with the rest of us.

Uncle Pete’s Corner is webinar series on all things WX, to watch the watch the Uncle Pete’s corner webinar that is the companion to this article, and many other WX related webinars go to the WinDev US YouTube Channel and be sure to also join the WxLive – US Communityon Google+ to get notices about upcoming webinars. On the Google+ community you will find a active group developers discussing all things WX.

[suffusion-the-author display=’author’]

[suffusion-the-author display=’description’]

• WEBDEV