Structure of a dizmo bundle

To create a new dizmo instance, dizmoViewer reads the code and other data describing it from the dizmo bundle directory.

The two files Info.plist and index.html in a dizmo bundle are mandatory. The files application.js and style.css are recommended to give a dizmo bundle a reasonable structure. On top of that, a dizmo bundle may contain many other files and directories needed to provide the dizmo’s functionality (translations, images, sounds, etc.). You do not have to care about the file Info.plist if you are using the dizmoGen development environment.

Info.plist (mandatory)

The following XML file Info.plist contains a list of key-value pairs that specify several aspects of the dizmo. For example, its initial height and width:

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
        <key>BundleDisplayName</key>
        <string>HelloWorld</string>
        <key>BundleIdentifier</key>
        <string>org.example.dizmo.elements.helloworld</string>
        <key>BundleName</key>
        <string>HelloWorld</string>
        <key>BundleShortVersionString</key>
        <string>0.1</string>
        <key>BundleVersion</key>
        <string>0.1</string>
        <key>Height</key>
        <integer>300</integer>
        <key>ApiVersion</key>
        <string>1.3</string>
        <key>MainHTML</key>
        <string>index.html</string>
        <key>ElementsVersion</key>
        <string>1.0</string>
        <key>Width</key>
        <integer>250</integer>
        <key>HiddenDizmo</key>
        <false/>
    </dict>
</plist>

Key	Example value	Description
Height	300	The default height of the dizmo
Width	250	The default width of the dizmo
MainHTML	index.html	The main html
BundleIdentifier	org.example.dizmo.demo.helloworld	The bundle identifier of your dizmo. Only use lowercase characters.
BundleName	HelloWorld	The name of the bundle
BundleDisplayName	HelloWorld	The visible name of the bundle
BundleVersion	0.1	The version of the current bundle
BundleShortVersionString	0.1	The short version of the bundle
HiddenDizmo	false	Set this to true if you do not want your dizmo to be visible in the dizmoViewer's Creator dizmo. You can use this if your dizmo can only run if it is started by another dizmo of yours.
AllowResize	false	Set this to true to have a resize handle on the lower right side of your dizmo.
TitleEditable	false	Set this to true if you want to allow the user to edit the title of the dizmo.
ForceUpdate	false	Set this to true to force the user to install available dizmo updates.
ApiVersion	1.3	The version of the dizmo API you use. 1.3.1 is the current version.
ElementsVersion	1.0	The version of dizmoElements you use, currently it is 1.0. Remove if you do not wish to use dizmoElements.

index.html (mandatory)

As a dizmo is basically a web page that is displayed in a dizmo frame. The file index.html contains the HTML code that provides the basic skeleton of the dizmo. The name of the main HTML file has to be specified in the MainHTML property of Info.plist file.

application.js (recommended)

This is the main JavaScript file that provides the main code of the dizmo. If necessary, the index.html file may include more JavaScript libraries.

style.css (recommended)

The file style.css is the dizmo stylesheet and defines the HTML page elements. The stylesheet needs to be included in index.html.

As a dizmo usually has a front showing the actual content and a back allowing the user to configure settings of the dizmo. There are usually two DIVs <div id="front"> and <div id="back"> that cover the entire page. As the front is shown first when a dizmo is instantiated, the back should normally be hidden.