Add Scripting an HTML5 Web Application Using the Maqetta Editor

This article is a continuation of Implement the Dojo DateTextBox Control In an HTML5 Web Application Using the Maqetta Editor . In that tutorial, we learned how to work with Dojo DateTextBox control properties to change the date display format, wrote validation code, and got better aquainted with the Palette and Property tabs of the Maqetta editor. In today's follow up, we'll be adding the code to calculate the years of service based on the start and end dates, as well as how to control the visual aspects of our web app, including the form layout and theme.

Calculating the Years, Months, and Days

In the last instalment, we were left with a call to calcYearsMonthsAndDays() that was not fleshed out. Now it's time to delve into that, starting with the calcYearsMonthsAndDays() method:
function calcYearsMonthsAndDays(startDate, endDate) {
   var yearsOfService = dateDifference(startDate, endDate);
   dojo.byId("lblYears").innerHTML = yearsOfService[0];
   dojo.byId("lblMonths").innerHTML = yearsOfService[1];
   dojo.byId("lblDays").innerHTML = yearsOfService[2];
CalcYearsMonthsAndDays() calls a function called dateDifference() that returns a three element array consisting of the years, months, and days. Each of these date parts are then displayed in their respective labels. That part is simple enough. The real work takes place in the dateDifference() function, which I adapted from a Java method. Luckily, very few changes were required to convert it to JavaScript:
function dateDifference(d1, d2) {
  var fromDate,
  if (d1 > d2) {
      fromDate = d2;
      toDate   = d1;
  else {
      fromDate = d1;
      toDate   = d2;
  var increment = 0;
  if (fromDate.getDate() > toDate.getDate()) {
      increment = fromDate.getLastDayOfMonth();
  if (increment != 0) {   
    day = (toDate.getDate() + increment) - fromDate.getDate();
    increment = 1;
  else {      
    day = toDate.getDate() - fromDate.getDate();
  //month Calculation
  if ((fromDate.getMonth() + increment) > toDate.getMonth()) {  
    month = (toDate.getMonth() + 12) - (fromDate.getMonth() + increment);
    increment = 1;
  else {   
    month = toDate.getMonth() - (fromDate.getMonth() + increment);
    increment = 0;
  //Year Calculation
  year = toDate.getFullYear() - (fromDate.getFullYear() + increment);
  return [year, month, day];
The last date function is getLastDayOfMonth(), which I included to take advantage of JavaScript Rollovers. In a nutshell, whenever you set a date component - such as the year, month, or day - to a value that exceeds the maximum for that field type, overflowing causes the entire date to change accordingly rather than throw an error. For instance, setting a month of 12 (months are zero based) will set the date to January of the following year. Even more advantageous, is the effect triggered by setting the day to zero. It rolls back the date to the last day of the previous month, allowing us to easily determine the length of a given month:

Date.prototype.getLastDayOfMonth = function() {
   var dt = new Date(this);
   dt.setMonth(dt.getMonth() + 1);
   return dt.getDate();

Tweaking the Form Layout

The form is fully functional at this point, but we can make it look more professional through a combination of layout and CSS styling.
Dojo, always known for their impressive array of widgets, offers a control called a Border Container. Ostensibly used for page layouts that contains sidebars and/or headers, it's comprised of a center panel and four optional borders along its sides:
If we drag it into an form on the design pane, we can then place the title in the top border, the start and end date labels in the left border, the start, end date, and Calculate button controls in the center area, the Weekday info in the right panel, and the Years, Months, Days, and messages output in the bottom border. Now our form has a more esthetically pleasing layout:
Now that image of the final layout took a bit of maneuvering to arrive at. A general sizing can be arrived at by clicking on individual sections of the layout and then dragging the borders. For more fine-grained tuning, you can enter exact numbers in the layout section on the right. You can always edit the HTML markup directly by choosing the Source layout instead of Design. Alternatively, the Split-H and Split-V design layouts show both the WYSIWYG Editor and Markup panes simultaneously. In either of those modes, clicking on source code will highlight the page element that it pertains to in the Design Editor. Likewise, selecting a page element will highlight the relevant code in the Markup pane:
That can be really useful for getting a look at all of an element's properties at a glance.

Overriding a Theme

When you create a new project, Maqetta defines a CSS Theme that best suits the project type. Web Applications for instance, implement the Claro Theme (There is also a Sketch Theme). We are free to change parts of the default themes or even create a new one from scratch. Personally, I like to use the original theme as a basis for my own. To do that:
  1. Click the Create button at the top-center of the screen and select Theme... from the menu.
  2. In the New Theme dialog, select a theme to clone. For Web apps, the usual starting point is claro or claro2.
  3. Give your theme a name, and click Create to save it.
  4. To configure your theme, click the Open button, located beside Create, and choose Theme Editor... from the list.
  5. On the Open Theme dialog, select your new theme from the list and click Open.
All of the supported widgets are displayed and divided into three sections: Global Styling, Primitive Widgets and Container Widgets. Clicking on any widget selects it so that its properties can be configured in the Properties palette.
Let's change the font color for all document elements.
  1. Select the Generic text widget at the top of the editor, under Global Styling.
  2. Open the Fonts and Text section of the Properties palette.
  3. Set the font color to blue. Notice how the text for all the widgets in the editor turns blue.
  4. Click on the Save button on the toolbar to commit your changes.
Now we'll change the Selected Date color for the Calendar control.
  1. Click on a date in the Calendar widget. That will display its subwidget panel.
  2. Open the Background section of the Properties palette.
  3. Select the Color picker... from the background-color dropdown and change the color (I chose #6fc7dd [aqua]). After clicking OK, the selected date in the calendar will be updated to reflect your changes:
    4. Once again, click on the Save button on the toolbar to commit your changes.

Try It Out

Hit the Preview in Browser button in the top-right corner to view the app in the browser. Go ahead and pick a start and end date, then press the Calculate button to see the results:
Success! Retirement is just around the corner...sort of...

Canvas Markup Element with HTML5

To support rich graphics, the HTML5 specification introduces the canvas markup element ( The canvas markup element is intended for use where embedded content is expected. The canvas element supports a resolution-dependent bitmap canvas and can be used to render graphs, art, graphics and images on the fly.
The canvas element supports content which can be used as the element's fallback content in case the browser does not support rendering canvas elements. The specification recommends that the content represent the same intent as the canvas' bitmap.
Canvas markup element can be used in both interactive visual media as well as non-interactive (static) visual media. Here is a breakdown of what the canvas element represents in various scenarios.
Type of media
Scripting enabled (Y/N)
What does canvas element represent? (if canvas elements are supported)
Interactive visual media
Embedded content consisting of a dynamically created image, the element's bitmap
Non-interactive visual media
Embedded content with the element's current bitmap and size
Interactive visual media
Fallback content
Non-interactive visual media
Fallback content

A simple canvas element can be declared with the following markup.
<canvas id="mycanvas" width="200" height="400" ></canvas>
Once you have the canvas element, you can specify a rendering content bound to it.
The canvas context mode ( has a default value of none, and supports other values: "direct-2d", "direct-webgl", "indirect" and "proxied".

JavaScript can be used to get the rendering content of a canvas by calling the getContext("2d") api.
Let us create a simple HTML5 page where we will use the canvas markup element to draw a line and to fill a rectangle. The HTML code for this is as under:
<!DOCTYPE html>
<meta charset="utf-8"/>
<title>Canvas sample</title>
<h1>Canvas sample</h1>
<p>The sample using Canvas markup element</p>
<canvas id="mycanvas" width="200" height="400" ></canvas>
<button id="buttonDrawLine" type="button" onclick="buttonDrawLine_click()">Draw Line</button>
<button id="buttonFillRectangle" type="button" onclick="buttonFillRectangle_click()">Fill Rectangle</button>
<p>HTML Goodies</p>
<script type="text/javascript">
function buttonDrawLine_click()
var c=document.getElementById("mycanvas");
var context=c.getContext("2d");
function buttonFillRectangle_click()
var c=document.getElementById("mycanvas");
var context=c.getContext("2d");

As you can see, we have a "mycanvas" element and two buttons. To draw a line, we get the context, set it to center at coordinates (0,0) and call lineTo() and stroke() api on the context to render the line.
To fill the rectangle, we call the fillRect() api on the context.
When you render the page in a compatible browser (latest version of IE, Chrome, Firefox), the page will appear as under.

After we click on the Draw Line button, it will render as under.

And when we click on Fill Rectangle, the page will render as under:

When we click on Draw Line again, we will render a line on top of the rectangle.

If you are having trouble following along, you can download the HTML code from <download link>.