Using WF4's Pro/Web.Link Dialogs

Many Simple Design Automation applications have a need to interact with the user, asking them to select files to operate on. Prior to Pro/ENGINEER Wildfire 4, Pro/Web.Link programmers were subject to the constraints of the web browser when it came to leveraging the standard file dialog box. However with Wildfire 4 has come some subtle enhancements that add an extra edge to the integration between your custom applications (in the web browser) and the Pro/ENGINEER session itself.

<INPUT type="File" size=40>

Browser's File Select Dialog

This HTML renders as the following picture.

The 'Choose File' browser dialog is presented to the user when they press the 'Browse...' button.

Due to the restrictions present in the browsers security model, it is not possible to set the default directory. This simple restriction reduces the user experience as they often find themselves in a totally different directory to that where the Pro/ENGINEER is being ran from.

<INPUT type="Text" size=40 id="MySelDir">
<INPUT type="Button" Value="FILE>>>" onclick="SelectFile()">

<SCRIPT>
function SelectFile()
{
  //This sequence of commands leverages Pro/Web.Link
  var Opts=pfcCreate("pfcDirectorySelectionOptions").Create();
  Opts.DialogLabel = "DEMO LABEL";
  Opts.DefaultPath = "D:\\temp";
  
  //Requires a session connection to Pro/E to be ready
  MySelDir.value = oSession.UISelectDirectory(Options); 
}
</SCRIPT>

Pro/Web.Link Select Directory Dialog Box

Pro/Web.Link's dialogs are called from JavaScript commands. Therefore you can code and style your HTML 'front-facing' UI to be anything you like. In this example I've kept it simple and it looks like this:

When the user presses the 'FILE>>>' button, the following Pro/ENGINEER Dialog is launched.

Already, as a programmer wanting to write integrated Pro/E automation applications, I feel much better. The dialog is clearly a Pro/ENGINEER one which provides the user with confidence that the application is integrated with Pro/ENGINEER.

And to really put the cherry on the cake, it is easy to set the Text on the top of the window (using the DialogLabel property) AND more importantly to be able to set the default directory the dialog appears in (using the DefaultPath property).

Message Dialogs

...
//This sequence of commands leverages Pro/Web.Link
var Options = pfcCreate("pfcMessageDialogOptions").Create();
Options.DialogLabel = "DEMO LABEL ON MESSAGE";
Options.MessageDialogType = pfcCreate("pfcMessageDialogType").MESSAGE_INFO;
var MyButtons = pfcCreate("pfcMessageButtons");
MyButtons.Append(pfcCreate("pfcMessageButton").MESSAGE_BUTTON_OK);
MyButtons.Append(pfcCreate("pfcMessageButton").MESSAGE_BUTTON_CANCEL);
MyButtons.Append(pfcCreate("pfcMessageButton").MESSAGE_BUTTON_YES);
MyButtons.Append(pfcCreate("pfcMessageButton").MESSAGE_BUTTON_NO);
MyButtons.Append(pfcCreate("pfcMessageButton").MESSAGE_BUTTON_ABORT);
MyButtons.Append(pfcCreate("pfcMessageButton").MESSAGE_BUTTON_RETRY);
MyButtons.Append(pfcCreate("pfcMessageButton").MESSAGE_BUTTON_IGNORE);
MyButtons.Append(pfcCreate("pfcMessageButton").MESSAGE_BUTTON_CONFIRM);
Options.Buttons = MyButtons;
Options.DefaultButton = 0;
var UserSelectedButton = oSession.UIShowMessageDialog("You Selected: "+UserDir, Options);
...

The nice programmers at PTC have also provided for a Pro/ENGINEER message box so we can do away with our use of 'alert()' and 'confirm()'.

The general sequence is:

The code above produces the crazy dialog left. The message dialog can be configured to be a question, warning, or information.

Conclusion

Pro/ENGINEER Wildfire 4 brings with it some nice enhancements to make the result of the Simple Automation programmer even more professional looking. I only demonstrated 'UISelectDirectory()' but you can also take advantage of 'UISaveFile()' and 'UIOpenFile()'. Download a simple demonstration here.