Quickstart

In this section, we will show you how to build your first dizmo. You can write dizmos on Windows, Mac OSX and Linux.

Assumptions

We assume you have basic familiarity with HTML, CSS and JavaScript and the command line/terminal.

We also assume that you have downloaded and installed dizmoViewer, the environment that will enable you to run dizmos. If you don’t have dizmoViewer and are interested in working with dizmo please drop us an email at contact@dizmo.com

Note that some elements have a data-type property (e.g dizmo-selectbox), that specifies which dizmo UI element it should represent. Also, we have two DIVs containing the front and back of the dizmo. The ids of the two DIVs should be front and back if you want to have their visibility managed automatically (front hidden, back visible when the dizmo is turned to its back and vice-versa).

Then create the application.js file that will contain the JavaScript code for our dizmo:

functionshowFront() {
dizmo.setAttribute('state/front', true);
}
functionshowBack() {
// this function will enable the settings button
}
dizmo.onShowBack(function() {
// this function will be called when state/front is set to falsedizmo.showBack();
});
dizmo.onShowFront(function() {
// this function will be called when state/back is set to falsedizmo.showFront();
});
document.addEventListener('dizmoready', function() {
DizmoElements('.done-btn').on('click',function() {
showFront();
});
});