Create an HTML5 Desktop Application in the Maqetta Editor

7/16/13

The Maqetta Editor is an open source initiative of the Dojo Foundation that provides WYSIWYG web development in the cloud or locally. It supports drag & drop assembly of live UI mockups for HTML-based desktop and mobile applications. In today’s article, I’m going to show you how to use Maqetta to build a calculator that determines years of service based on a start and end date. Our application will make use of specialized dojo controls and methods to make it shine!

Launching the Editor

Maqetta can be run locally or online. If you’re running Maqetta locally, launch your local server by double-clicking on the appropriate launch script (maqetta.server.win.bat for Windows, maqetta.server.mac.command for Mac) and navigate to “http://localhost:50000/maqetta” using one of the approved browsers to bring up the login screen. For more information of using Maqetta locally, see my Introducing the Maqetta HTML5 Editor article. To utilize the online version, point your browser to the Maqetta.org site and click on the “Launch Maqetta” button. Whichever version you choose, you will have to register before you can use the system. The cloud version will send a confirmation email to your inbox after you’ve registered:

After a successful login, you’ll be directed to the Welcome screen. Click the “Create a New Desktop Application” icon to get started:

Assembling the Page Widgets

On the right-hand side of the page, make sure that the Palette tab is active. The Palette contains the various page components that we’ll be using to construct our desktop application. These include header tags, labels, and the DateTextBox control.

Under the HTML section there is a Headers group. Locate the H1 icon and drag it to the top of the page in the Design editor:

Once on the page, double-click the header to change the text; enter “Years of Service Calculator” in the popup editor and click OK to set the Header text:

Next, we’ll place a form on the page to hold our controls. While not strictly necessary unless you plan on submitting the form contents to a server, it is still a good idea to put all your controls inside of a form.

You’ll find the Form widget under HTML > Forms in the Palette. Drag it to the page under the Header.

The Label widget is located under HTML > Common in the Palette. Drag it to the page inside the blue box that represents the Form. In the Design pane, double-click the label to change the text; enter “Start Date:” in the popup editor and click OK to set the label’s value.

One of Maqetta’s greatest strengths is that it’s powered by dojo. That means that, in addition to being able to tap into dojo’s JavaScript libraries, you also get access to its many outstanding form controls. One of those is the DateTextBox. It has a dropdown arrow that reveals a calendar control that makes picking a date a snap. It’s under Controls > TextBox in the Palette. Drag it to the designer pane beside the Start Date label.

We’ll need to set a few properties on the DateTextBox, including the ID and the onchange event handler. Those properties can both be found by clicking on the Events tab on the far right side of the screen. Assign and ID of “txtStartDate” and enter “setStartDate” for the onchange event method:

When the onchange event fires, we’ll display the day of the week beside the date.

Place two labels beside the txtStartDate field. Set the value of the first to “Day:”. Remove the text from second label and assign it an ID of “lblStartWeekDay”.

Coding the setStartDate() and setEndDate() Methods

Application code should be placed in the app.js file. It’s visible in the Files Palette in the lower-left quadrant of the IDE. Double-clicking the file will open it in the editor pane.

At the top of the script, create two variables, an array of week days, and another to store a reference to the Start Date TextBox:

var weekDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var txtStartDate;

Inside the dojo ready(), set the txtStartDate variable to the field of the same name using dijit.byId():

require(["dojo/ready" ], function(ready){
     ready(function(){
        // logic that requires that Dojo is fully initialized should go here
        txtStartDate = dijit.byId('txtStartDate');
     });
});

Under the require() method call, add the setStartDate() and setDayOfWeek() methods. SetStartDate() will automatically receive the date from the event, which is passed along to the setDayOfWeek() method, along with the label field that will display the result:

function setStartDate(startDate) { 
   setDayOfWeek(startDate, dojo.byId('lblStartWeekDay'));
} 

function setDayOfWeek(selectedDate, field) { 
 field.innerHTML = weekDays[selectedDate.getDay()];
}

Repeat the above steps to create fields for the End date, or, if you like, you can copy & paste the fields. To select them, hold down the Ctrl key while clicking each of them. Assign the txtEndDate field’s onchange event to the setEndDate() method, which will look as follows:

function setEndDate(endDate) { 
   setDayOfWeek(endDate, dojo.byId('lblEndWeekDay'));
} 

Viewing the Page

Save your files and click the boxed arrow button in the upper-right corner of the screen to preview the page in the browser. Here’s what our calculator looks like so far with some dates selected:

Conclusion

In today’s tutorial, we got to explore some of the Maqetta editor’s main features as well as sample the excellent dojo DateTextBox control. But we’re not done yet. In the next instalment, we’ll learn about themes, how to use the source editor to add constraints to the date fields, as well as write the code to display the years, months, and days of service.