This tutorial describes the steps needed to add an Internet search capability to a wizard as an IFRAME. This tutorial uses the wizard created in Tutorial: Creating a Custom Wizard. See Using IFRAME Elements for a discussion on IFRAMEs.
View the file Search.htm or the modified TaskML file CustomWizard.xml.
Steps
Create a new text file with the following contents:
<html>
<head>
<script src="System/IFrame.js"></script>
<link ID="Skin" REL="stylesheet">
<script>
function IFrame_onload() { Skin.href = g_Wizard.GetSkin() }
</script>
<style>
INPUT { width: 100%; margin-bottom: 4px; }
</style>
</head>
<body scroll="no">
<center>
<form method="GET" action="http://www.google.com/search" target="_blank">
<a HREF="http://www.google.com/" target="_blank">
<img SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google"
width="128" height="53"></a><br>
<input TYPE="text" name="q" size="25" maxlength="255" value><br>
<input type="submit" name="btnG" VALUE="Google Search">
</form>
</center>
</body>
</html>Note: It was necessary to "word wrap" the long line of code in the above example.
Note:
The script file MechanicalWizard/System/IFrame.js contains generic functions for use with IFRAMEs.
The link element initially lacks a href element. The script block implements the IFRAME_onload function (called by IFrame.js) and sets href to the url returned by the GetSkin method on the g_Wizard object. The file MechanicalWizard\WDK\Info_IFRAME.htm contains an inaccuracy in that the link is not automatically assigned.
The style element provides some additional formatting rules.
The body element has the scroll element set to "no" to preserve margins and prevent scrollbars from appearing. As long as a reference to IFrame.js appears in the IFRAME the Mechanical Wizard will autosize the height such that scrollbars are unnecessary.
The contents of the body are based on Google's custom search engine.
Note use of the target attribute to prevent the linked pages from opening in place of the Mechanical Wizard.
Save the file as Search.htm in the Mechanical Wizard folder. The files must reside together for web browser security to permit cross-frame scripting.
Open the file CustomWizard.xml from the previous tutorial.
Add the following group at the bottom of the body:
<group id="Search" collapsed="yes">
<iframe src="simwiz://Search.htm" />
</group> Add the following string to the <strings><language xml:lang="en-us"> section:
<string id="Search_Caption">
Search the Web
</string> Note the use of the "groupID_Caption" shortcut for the string id.
Save the file and open the wizard in the Mechanical application.