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:
- Click the Create button at the top-center of the screen and select Theme... from the menu.
- In the New Theme dialog, select a theme to clone. For Web apps, the usual starting point is claro or claro2.
- Give your theme a name, and click Create to save it.
- To configure your theme, click the Open button, located beside Create, and choose Theme Editor... from the list.
- 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.
- Select the Generic text widget at the top of the editor, under Global Styling.
- Open the Fonts and Text section of the Properties palette.
- Set the font color to blue. Notice how the text for all the widgets in the editor turns blue.
- Click on the Save button on the toolbar to commit your changes.
Now we'll change the Selected Date color for the Calendar control.
- Click on a date in the Calendar widget. That will display its subwidget panel.
- Open the Background section of the Properties palette.
- 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...
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training in India. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai
ReplyDeleteGreat Article
DeleteIEEE Final Year Projects for CSE
IEEE Project Centers in Chennai
Thank you for your post. This is excellent information. It is amazing and wonderful to visit your site.
ReplyDeleteArkon Web Solutions is the top & best website design company in usa . We create attractive UX and UI design as well as superb responsive web design services.