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:

?

1 2 3 4 5 6

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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

function dateDifference(d1, d2) {   var fromDate,       toDate,       year,       month,       day;       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:

1 2 3 4 5 6

Date.prototype.getLastDayOfMonth = function() {    var dt = new Date(this);    dt.setMonth(dt.getMonth() + 1);    dt.setDate(0);    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...

---