Structure of a dizmo bundle

In order 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 in order 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.). See chapter Styling for the file structure.

Note: Only the files in the assets and lib folders will be included into your dizmo during the build process provided by dizmoGen

Info.plist (mandatory)

This XML file contains a list of key-value pairs that specify several aspects of the dizmo such as 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 don’t want your dizmo to be visible in the Creator dizmo of the dizmoViewer. 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 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.

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.

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.