3.5.9Widget displaying itself as its own dialog

This section only applies to widgets. It does not apply to scripts or UDIXes because they have no web page.

A widget can display itself as a dialog. This can be simpler than using CreateHtmlDialog(). For example, your widget can have HTML as follows:

<html>

<head>…</head>

<body>

<div id="NormalContent">

<!-- Normal widget content -->

</div>

<div id="DialogContent">

<!-- Different content when displayed as a dialog -->

</div>

</body>

</html>

On start-up, typically in OnLoad(), you check the mode. If the widget is being displayed as its own dialog then you hide the #NormalContent and show the #DialogContent. For example:

Framework.OnLoad = function() {

// Check the mode. See below…

if (Framework.privateSettings.asDialog) {

// Dialog mode

// Hide the normal content and show the dialog content

document.getElementById("NormalContent").style.display = "none";

document.getElementById("DialogContent").style.display = "block";

// Do initialisation for dialog mode

} else {

// Normal mode

// Show the normal content and hide the dialog content

document.getElementById("NormalContent").style.display = "block";

document.getElementById("DialogContent").style.display = "none";

// Do normal initialisation

}

};

From normal mode, you display the widget as its own dialog using CreateDialog(). For example:

Framework.CreateDialog({

// Use own type as the type for the dialog

type: Framework.type,

// Pass settings to the dialog. These are received as Framework.privateSettings

// The asDialog flag signals to the widget's own code that it is in dialog mode

// rather than normal mode, as illustrated above. The settings:{} block can

// contain any further data which you want to pass into the dialog

settings: {

asDialog: true

}

}, function (Msg) {

// Asynchronously receives a result, plus any updates, from the dialog

// (Behaves just like the built-in dialogs described in the sections above)

});

In other words, the main widget passes settings to the dialog containing asDialog:true (and can include any other initialisation data which it wants). The widget running as a dialog receives these settings in Framework.privateSettings, triggering it to enter dialog mode as in the example above.

The dialog can send a result back to the main widget using Framework.SendDialogResult(). Using SendDialogResult() automatically closes the dialog. The result data, passed as a parameter to SendDialogResult() can be anything, but standard behaviour is for it to be an FXB.Result object. For example:

// Create FXB.Result object

var result = new FXB.Result(0); // Can be initialised with 0 (okay) or any error code

// Add in any proprietary data to the FXB.Result. For example:

result.myData = {

someKey: someValue

};

// Send the result back to the creator. This closes the dialog.

Framework.SendDialogResult(result);

The dialog can cancel itself, rather than sending a result, using Framework.CancelDialog().

The dialog can also send interim updates back to the creator, using Framework.SendDialogUpdate(). Again, the parameter for SendDialogUpdate() can be anything, but standard behaviour is for it to be an FXB.Result.

The main widget receives information from or about the dialog in its asynchronous callback function for CreateDialog(). Like the standard dialog usage described above, it gets an initial message which provides the ID of the dialog and then receives any interim updates followed by a final result. For example:

Framework.CreateDialog({ … }, function (Msg) {

if (Msg.result) {

// If Msg has a .result, then the dialog has now closed (or been dismissed)

} else if (Msg.update) {

// If Msg has an .update, then the dialog is using SendDialogUpdate()

} else {

// If neither .result nor .update, then it's the initial message about creation

}

});

(It's also possible for the main widget and the instance acting as a dialog to exchange other messages, as well as using the standard SendDialogUpdate() and SendDialogResult(). The dialog gets the ID of the main widget as Framework._parentWidget. The main widget gets the ID of the dialog in the first message to the asynchronous callback function. Having each other's IDs allows the main widget and dialog to exchange messages as described below.)