Dealing with the Launch Page in HTML
This page deals with the issues surrounding how a ToolBook DHTML application is launched in the Web Browser. When you publish your application, you have the options shown here:
These options include -
1. Automatically create an HTML page which generates an index.html page in the root folder of the published product (the folder with the name of the book).
2. Use a custom HTML page where you can select an HTML page that you have created in FrontPage or equivalent.
3. Do not use an HTML launch page which then directly launches the application from the IE folder or the NS folder depending upon how you have set up the Export.
The links here show how #1 and #3 options look. Close any Browser windows that popup and click the Back button if necessary to return to this page when done.
Note that you should get a "parent" window that displays the full Browser environment. This page has the SumTotal logo unless you change it and text that displays the Book Title and any Description you have provided on the Summary Tab of the Book Properties dialog box. The acual ToolBook application shows up in a "child" window with the size of the window being the size of the pages in your book unless you choose to export to display fullscreen. The application window has none of the normal Browser controls. You can exit the application if you have used an Exit button or just close that child window to return to the launch page (index.html). This application Browser window cannot be maximized or resized. To return to the page with the link to go to the application, the user must click the Back button in the Browser from the Launch Page.
Bypassing the HTML Launch Page
This illustrates what happens when you check Do not use an HTML launch page. Notice that now the application shows up in a "normal" Browser environment. The Controls are at the top and the application shows up in the middle of the Browser window. The window can be minimized, maximized, and resized. A "mat" shows up around your application and the mat color is the color determined from the Draw Tab of the Viewer Properties dialog box. To me this is not a very desirable result. If you use an Exit button in the ToolBook application in this case, you close the Browser completely and thus can't get back to the page where you had the link. In this case, it is advised to not have an Exit button, but then the learner must know that they have to click the Back button in the Browser window to return. Navigation buttons in the ToolBook application will still take the learner back and forth within that environment as you have designed it.
Thanks to Julian Vail at Verizon Data Services and his work in tracking down some JavaScript, we can now make this a more desirable situation. That is, we can bypass the Launch page and still have a nice clean application window without the Browser environment (controls) at the top.
This application launches in fullscreen mode even though the book has been published without making this setting. An Exit button can be used to return the learner back to the page where the link was located that launched the application. You do get the same mat around the application but this is easily set to something more desirable than gray in the ToolBook application. The only minor problem is that with the latest Internet Explorer browsers, you get a scrollbar. A lesson back on the Demos and Tutorials page will show you how to take care of this post-export by editing one of the files in the Web Export package.
This is the code in the HTML page that makes this happen:
The above code calls the function shown below:
Launching Application in its Own Window
This application launches in a popup window that is the size of the book based upon the numbers used in the Javascript code. This window cannot be resized or maximized. You can exit this application window by either clicking the X to close this window or click the Exit button in the application. When the application window closes, you are returned to the page where the link to launch the application is located.
This is the code in the HTML page that makes this happen:
The above code calls the function shown below:
Note the height and width settings in the code here that makes the window the exact size of the book which was 640x480.
Click here to get a stripped down version of this page that has all the code to do the above examples.