CapeSoft File Explorer feBrowser
Documentation

• The FeBrowser Object
• Methods - Functional Reference Listed by Usage(New)
• Methods - Alphabetized Quick Reference
• Events
• The Templates
• Overview
• Useful References
• Summary of callback events (Updated)
• How to load and print a page in the background and then close the FE window
• Radio buttons - how to determine which one is currently selected on a page
• Leveraging the power of the HTML DOM with JavaScript and File Explorer(New)
• How to open Word document inside Internet Explorer, and hence inside File Explorer (New)
• How to remove parts of a loaded page before displaying it to the user(New)
• Enabling HTML 5 support when using IE 9
• How to browse html content stored in a BLOB

How To

Control a webpage using the FeBrowser control

Typically you'd want to load a webpage into the feBrowser control, and then programmatically manipulate the data entry to that webpage to move through the site automatically. In order to do this, you need to determine the names of the controls that you would like to manipulate, and then code the webpage control into your application to populate the data into the entry fields and "click buttons" to control the webpage.

As an example, we'll use maps.google.com, enter a street address to display in the control.

Step 1 is to determine the control names that you need to populate with data (in this case the street address).

• Load up the feabc example application, and from the Browser menu select the "Using the HTML DOM" item.
• Enter the address of the webpage you want to control in the address field (in this case http://maps.google.com).
• Enter the text into the control (in this case "Waterford Rd, Punts Estate, Cape Town" into the street address field) and hit enter. Now click the "List" button to list all the controls on the page.

Formerly known as the Html3 (or Html1 using COM) file type / object, the FeBrowser Object is used to browse html pages. This object acts in the same manner as Internet Explorer, so most things that work in IE work well with the feBrowser object. For example you can load a PDF into the feBrowser the same as you would in Internet Explorer.

Functional Reference - Methods Listed by Usage

This list organizes the above methods by their functional use and describes them briefly. See the list below for an alphabetized quick reference.

Navigation and Loading
Back	Go to the previously loaded page - navigates to the previous page on the navigation stack.
Forward	Go forward through the navigation stack (only applies if Back() has been used at least once.
Load	Loads an URL or file into the control
Refresh	Refreshes the currently loaded page and provides control over how the refresh is done
Reload	Load the currently loaded page or file again
Stop	Stops the current navigation
LoadFromStream	Loads the Browser from memory
Home	Navigates to the Home page set in the Internet Explorer settings
SaveAs	Saves the page as an HTML file on disk
Event Handling
EventCallback	This gets called with each event that the Browser control fires. There are also individual callback methods for handling specific events. See Summary of callback events for more information.
TranslateEventID	Translates an Event ID passed to the EventCallback method into a string that describes the event. This is done automatically in the specific event callback methods. See Summary of callback events.
Control Management
HideControl	Hides the Browser control. Hiding the Clarion Region control populated by the template will have no affect on the browser control.
UnhideControl	Unhides the Browser control.
Resize	Resizes the browser control. If you are populating the control using the template (the normal method of using the Browser control) then this is called for you when the window resizes if you have enabled resizing in the template settings.
SetFocus	Sets the focus to the window and the Browser.
Browser Management
GetInfo	Retrieves a property of the Browser, such as the contents of the loaded document, the title of the page etc.
Update	Updates a property of the Browser
Maintenance
Init	Intializes the Browser control.
Kill	Disposes the Browser and cleans up the interface and all handles etc.
Frames
NameOfFrame	Returns the name of a frame that is part of the frameset in an HTML page.
NumberOfFrames	Returns the number of frames in an HTML page.
HTML DOM (Document Object Model)	Methods to allow the objects in an HTML page to be manipulated. This allows each tag, input, button etc to be treated as an "object" on the page and hence controlled.
ClickByName	Click onany object on the page based on the object name. Not all ta gs are named, this uses the Name attribute and will only work for named tags.
ClickByRecordNumber	"Clicks" on any object on the page based on its record number in the queue of elements (populated by calling GetElementQ). This allows anything on the page to be clicked on, regardless of whether it has a name or ID.
GetElementQ	Populates a queue of all elements (objects) on a page. This queue contains all the HTML tags and their values. For elements such as form inputs that may contain a large amount of data, this method is limited in the amount of data that it retrieves. The entire value, regardless of size, can be retrieved using GetValueByID and GetValueByName.
GetValueByID	Retrieve the value of an element using the element ID to locate it.
GetValueByName	Retrieve the value of an element using the element name to locate it.
SetValueByID	Sets the value of an element on the page. The ID is used to locate the element.
SetValueByName	Sets the value of an element on the page. The name is used to locate the element.
SubmitForm	Submits a particular form on a page. The SetValue methods allow forms to be filled and this submits the form without the ClickByName or ClickByID methods having to be used and the form submission method determined.
Tool functions
SearchPage	Searches the page for a string.
Edit	Provides access to the Edit command such as Cut, Copy, Paste etc.
PrintMe	Prints the currently loaded page, either with out without user interaction. See How to load and print a page in the background and then close the FE window for an example.
GetHtmlGraphicsInfo	Retrieves a list of all images used in a loaded page, including their paths.

Quick Reference

Back	Navigate to the previous page
ClickByName	Triggers a click on an item on the page
ClickByRecordNumber	Triggers a click on an item on the page
Edit	Provides access to a wide variety of "Edit" functionality such as Cut, Copy, Paste, Save, Find, Zoom, Close, Print Preview, Page Setup etc.
EmbedImages	Returns a list of images used in the document and optionally replaces references to the images with the format used for embedding images when sending HTML via email.
EventCallback	Handles events (called when a page is loaded, an item is clicked on, the mouse moves over an item etc.)
Forward	Nagivates to the next page in the history
GetElementQ	Retrieves a queue of HTML DOM elements
GetHtmlGraphicsInfo	Deprecated, use EmbedImages.
GetInfo	Retrieves a variety of properties for the control including the HTML or Text for the loaded page, the current URL etc.
GetValueByID	Retrieves the value of an HTML DOM element
GetValueByName	Retrieves the value of an HTML DOM element
HideControl	Hides the Browse control
Home	Navigates to the Browser Home page (if one is set)
Init	Initializes the control
Kill	Destroys the control
Load	Loads a page into the control
LoadFromStream	Load from memory (limited and not recommend, see the notes for this method for alternative approaches)
NameOfFrame	Returns the name of the frame
NumberOfFrames	Returns the number of frames
PrintMe	Prints the contents of the control
Refresh	Reloads the page
Reload	Loads the last document again
Resize	Handles control resizing
SaveAs	Saves the currently loaded page as an HTML file on disk
SearchPage	Searches the page for the specified terms
SetFocus	Sets focus to the Browser control
SetValueByID	Sets the value on an HTML element
SetValueByName	Sets the value on an HTML element
Stop	Cancels navigation
SubmitForm	Submits the form on the page
TranslateEventID	Converts an event ID to a descriptive string
UnhideControl	Unhides the control if hidden
Update	Updates a wide variety of properties that relate to the control

Back

ClickByName

ClickByRecordNumber

Edit

EventCallback

Forward

GetElementQ

GetHtmlGraphicsInfo

GetInfo

GetValueByID

GetValueByName

HideControl

Home

Init

Kill

Load

LoadFromStream

NameOfFrame

NumberOfFrames

PrintMe

Refresh

Reload

Resize

SaveAs

SearchPage

SelectElementByID

SelectElementByName

SetFocus

SetValueByID

SetValueByName

Stop

SubmitForm

TranslateEventID

UnhideControl

Update

FeBrowser - Properties (alphabetical)
Busy (Byte)	Holds true (1) if a page is still being loaded, or false (0) if not. See the GetInfo method.
DocumentType (String)	Holds a description of the type of document which you have loaded. See the GetInfo method.
GraphicsList (String)	See the notes on the GetHtmlGraphicsInfo method. This property contains the list of graphic files found in the loaded html document.
NewWindow (Byte)	By default this property is set to false (0). Setting it to true (1) prior to calling the Load method results in the url you are loading being loaded into a new window ( your default browser will load and the file will be loaded into that window ). Note that this property will not affect browsing: if you click on a hyperlink the new page will still be loaded into the parent window, unless the hyperlink properties are set to open the page in a new window.
OuterText (CString)	Holds the currently loaded page's text content. See the GetInfo method.
PageTitle (String)	The title of the page being displayed, e.g. 'CapeSoft Accessories Home Page'. See the GetInfo method. Note that this property will only hold a title if the page you are viewing has one! If not this property will hold the same thing that the Url property does.
RootFolder (String)	This property is used in the GetHtmlGraphicsInfo method, for the following purpose. When you are trying to establish the list of graphics in an html document ( primarily useful for when you are using NetTalk to send an email written using File Explorer - see the GraphicsList property ) there may be graphics with paths such as " /MySubfolder/MyImage.gif ".  The problem arises that when you pass NetTalk a graphic path like that ( to embed the graphic into the email at send-time ), it fails as the path is not "valid". File Explorer handles this problem as follows: If you have first set the HtmlRootFolder property, before calling the GetHtmlGraphicsInfo method, then File Explorer automatically constructs valid paths for these graphics, using the HtmlRootFolder property to establish valid paths for these files. Example... Example: ThisViewer1.RootFolder = "c:\My Documents\Website1" ! Here we set this property with the folder that contains the actual html page we're working with. Any graphics in this html file that have no path ( Image1.gif ) or an "incomplete" path ( /Subfoler/Image.gif ) will be assumed to be in this folder or have this folder as their root. ThisViewer1.GetHtmlGraphicsInfo() If you do not set the RootFolder property before calling the GetHtmlGraphicsInfo method, File Explorer will assume that such graphics stem from the exe directory.
Source (CString)	Holds the html component (source / text) of the loaded page.  Updates when you call the GetInfo or the GetHtmlGraphicsInfomethods.
Url (String)	e.g. https://www.capesoft.com/accessories/index.htm. Holds the URL of the page currently displayed. See the GetInfo method.

FeBrowser - Events

See the FeBrowser - Summary of callback Events below, which now lists every single callback method, along with the parameters which are passed to it and a full description of what the method does and when it is called.

At this time there is quite an overlap in terms of multiple File Explorer classes being implemented by the same templates. In the future we may revisit this, but for now all templates are covered in the main (FileExplorer.htm) help document, please click here.

FeBrowser - Summary of callback events

See the FeBrowser_Callbacks procedure in the feabc.app example application for more info. This is still a work in progress, we will be adding support for additional callback events as well as improving the existing callbacks. The FE Class has specific callback methods for the events, you can override these methods to implement specific behaviour for callbacks. This is a far easier and cleaner way of responding to callbacks than embedding code directly in the EventCallback() method and checking which equate was passed (although this is still supported if you prefer to take this approach).

Note: For methods that take a pDisp parameter that points to the object that the event relates to it is not advised that this variable is used within your code, it is an internal FE pointer.

Event Name	Equate	Description
BeforeNavigate	fe:WBEvt_BeforeNavigate	This is sent before navigation to give a chance to abort. Remarks This event is obsolete. Use the BeforeNavigate2 event instead.
BeforeNavigate2	fe:WBEvt_BeforeNavigate2	Fired before navigate occurs, as in when a hyperlink is clicked on, a url is entered, or the back or forward buttons are pressed. Syntax The FeBrowser.EventBeforeNavigate2 method is called: FeBrowser.EventBeforeNavigate2 (long pDisp, string pURL, long pFlags, string pTargetFrameName, string pPostData, string pHeaders, byte pCancel) Parameters pDisp Object that evaluates to the top level or frame WebBrowser object corresponding to the navigation. Used internally by FE, do not modify this property (applies to all methods that take a pDisp parameter). url String expression that evaluates to the URL to which the browser is navigating. Flags TargetFrameName String expression that evaluates to the name of the frame in which the resource will be displayed, or Null if no named frame is targeted for the resource. PostData Data to send to the server if the HTTP POST transaction is being used. Headers Value that specifies the additional HTTP headers to send to the server (HTTP URLs only). The headers can specify such things as the action required of the server, the type of data being passed to the server, or a status code. Cancel Boolean value that the container can set to True to cancel the navigation operation, or to False to allow it to proceed. Remarks The BeforeNavigate2 event replaces the BeforeNavigate and FrameBeforeNavigate events, which should no longer be used. The pDisp parameter that specifies the corresponding WebBrowser object clearly identifies where the navigation is to occur. Microsoft Internet Explorer 3.0 required the FrameBeforeNavigate and a target frame name to identify the target of navigation. However, this solution was potentially ambiguous as frame names are not unique. Note Internet Explorer 4.0 and later continue to fire the BeforeNavigate and FrameBeforeNavigate events for compatibility with Internet Explorer 3.0. The pDisp parameter specifies the WebBrowser object of the top-level frame corresponding to the navigation. Navigating to a different URL could happen as a result of external automation, internal automation from a script, or the user clicking a link or typing in the address bar. The processing of this navigation can be modified by setting the Cancel parameter to True and either ignoring or reissuing a modified navigation method to the WebBrowser object. When reissuing a navigation for the WebBrowser object, the Stop method must first be executed for pDisp. This prevents the display of a web page that declares a cancelled navigation from appearing while the new navigation is being processed.
ClientToHostWindow	fe:WBEvt_ClientToHostWindow	Fired to request client sizes be converted to host window sizes.
CommandStateChange	fe:WBEvt_CommandStateChange	Fires when the enabled state of a command changes. The FeBrowser.EventCommandStateChange method is called: Syntax FeBrowser.EventCommandStateChange(long pCommand, bool pEnable) Parameters pCommand CommandStateChangeConstants enumeration value that specifies the command that changed. This can have one of three values: CSC_UPDATECOMMANDS (0FFFFFFFFh)     Enabled state of a toolbar button might have changed. CSC_NAVIGATEFORWARD (00000001h)     Enabled state of the Forward button has changed. CSC_NAVIGATEBACK (00000002h)     Enabled state of the Back button has changed. pEnable     Boolean value that specifies the enabled state:     false         Command is disabled.     true         Command is enabled.
DocumentComplete	fe:WBEvt_DocumentComplete	Fired when the document being navigated to reaches ReadyState_Complete. Syntax FeBrowser.EventDocumentComplete (long pDisp, string pURL) Parameters pDisp Object that specifies the top-level or frame WebBrowser object corresponding to the event. URL String that specifies the URL, Universal Naming Convention (UNC) file name, or pointer to an item identifier list (PIDL) of the loaded document.
DownloadBegin	fe:WBEvt_DownloadBegin	Download of a page started. Syntax FeBrowser.EventDownloadBegin () Remarks This event is fired shortly after the BeforeNavigate or BeforeNavigate2 event, unless the navigation is canceled. Each DownloadBegin event will have a corresponding DownloadComplete event.
DownloadComplete	fe:WBEvt_DownloadComplete	Download of page complete. Syntax FeBrowser.EventDownloadBegin () Remarks Unlike NavigateComplete or NavigateComplete2, which are fired only when a URL is successfully navigated to, this event is always fired after a navigation starts Each DownloadBegin event will have a corresponding DownloadComplete event.
FileDownload	fe:WBEvt_FileDownload	Fires to indicate that a file download is about to occur. If a file download dialog is to be displayed, this event is fired prior to the display of the dialog.
FrameBeforeNavigate	fe:WBEvt_FrameBeforeNavigate	See the BeforeNavigate event for a full description.
FrameNavigateComplete	fe:WBEvt_FrameNavigateComplete	See the NavigateComplete event for a full description.
FrameNewWindow	fe:WBEvt_FrameNewWindow
NavigateComplete	fe:WBEvt_NavigateComplete	In async, this is sent when we have enough to show. Fires after a navigation to a link is completed on either a window or frameSet element. Syntax FeBrowser.EventNavigateComplete2 (long pDisp, string pURL) Parameters pDisp Object that evaluates to the top-level or frame WebBrowser object corresponding to the event. URL String expression that evaluates to the URL, UNC file name, or PIDL that was navigated to. Remarks This event is obsolete. Use the NavigateComplete2 event instead.
NavigateComplete2	fe:WBEvt_NavigateComplete2	Fired when the document being navigated to becomes visible and enters the navigation stack. Fires after a navigation to a link is completed on either a window or frameSet element. Syntax FeBrowser.EventNavigateComplete2 (long pDisp, string pURL)) Parameters pDisp Object that evaluates to the top-level or frame WebBrowser object corresponding to the event. URL String expression that evaluates to the URL, UNC file name, or PIDL that was navigated to. Note that this URL can be different from the URL that the browser was told to navigate to. One reason is that this URL is the canonicalized and qualified URL; for example, if an application specified a URL of "www.microsoft.com" in a call to the Navigate or Navigate2 method, the URL passed by Navigate2 will be "http://www.microsoft.com/". Also, if the server has redirected the browser to a different URL, the redirected URL will be reflected here. Remarks This event replaces the NavigateComplete and FrameNavigateComplete events, which should no longer be used. Microsoft Internet Explorer 4.0 and Internet Explorer 5 continue to fire the NavigateComplete and FrameNavigateComplete events for compatibility with Internet Explorer 3.0. The document might still be downloading (and in the case of HTML, images might still be downloading), but at least part of the document has been received from the server, and the viewer for the document has been created.
NewWindow	fe:WBEvt_NewWindow	Fires when a new window is to be created. Remarks This event is obsolete. Use the NewWindow2 event instead.
NewWindow2	fe:WBEvt_NewWindow2	Fires when a new window is to be created. Create a new, hidden, nonnavigated WebBrowser. Syntax FeBrowser.EventNewWindow2() Remarks In Microsoft Internet Explorer, the NewWindow2 event is not fired when the user selects Window from the New command on the File menu. This event precedes the creation of a new window from within the WebBrowser. The NewWindow2 event is fired when a window is about to be created, such as during the following actions: The user clicks a link while pressing the SHIFT key. The user right-clicks a link and selects Open In New Window. The user selects New Window from the File menu. There is a targeted navigation to a frame name that does not yet exist. Your browser application can also trigger this event by calling the Navigate or Navigate2 method with the navOpenInNewWindow flag. The WebBrowser control has an opportunity to handle the new window creation itself. If it does not, a top-level Internet Explorer window is created as a separate (nonhosted) process.
OnAddressBar	fe:WBEvt_OnAddressBar	feBrowser.EventOnToolbar() Sent when the address bar should be shown/hidden.
OnFullScreen	fe:WBEvt_OnFullScreen	feBrowser.EventOnFullScreen() Sent when fullscreen / kiosk mode should be on/off
OnMenuBar	fe:WBEvt_OnMenuBar	feBrowser.EventOnMenuBar() Sent when the menubar should be shown/hidden
OnQuit	fe:WBEvt_OnQuit	feBrowser.EventOnQuit() Fired when the application is quiting
OnStatusBar	fe:WBEvt_OnStatusBar	feBrowser.EventOnStatusBar() Sent when the statusbar should be shown/hidden
OnTheaterMode	fe:WBEvt_OnTheaterMode	feBrowser.EventOnTheaterMode() Sent when theater mode should be on/off
OnToolBar	fe:WBEvt_OnToolBar	feBrowser.EventOnToolbar() Sent when the toolbar should be shown/hidden
OnVisible	fe:WBEvt_OnVisible	feBrowser.EventOnVisible() Sent when the window goes visible/hidden
ProgressChange	fe:WBEvt_ProgressChange	feBrowser.EventProgressChange() Sent when download progress is updated
PropertyChange	fe:WBEvt_PropertyChange	feBrowser.EventPropertyChange() Sent when the PutProperty method is called
Quit	fe:WBEvt_Quit	feBrowser.EventOnQuit()
SetSecureLockIcon	fe:WBEvt_SetSecureLockIcon	feBrowser.EventSetSecureLockIcon() Fired to indicate the security level of the current web page contents
StatusTextChange	fe:WBEvt_StatusTextChange	feBrowser.EventStatusTextChange() Statusbar text changed
TitleChange	fe:WBEvt_TitleChange	feBrowser.EventTitleChange() Sent when the document title changes
WindowActivate	fe:WBEvt_WindowActivate	Sent when main window has been activated
WindowClosing	fe:WBEvt_WindowClosing	feBrowser.EventWindowClosing() Fired when the WebBrowser is about to be closed by script
WindowMove	fe:WBEvt_WindowMove	Sent when main window has been moved
WindowResize	fe:WBEvt_WindowResize	Sent when main window has been sized
WindowSetHeight	fe:WBEvt_WindowSetHeight	feBrowser.EventWindowSetHeight() Fired when the host window should change its height
WindowSetLeft	fe:WBEvt_WindowSetLeft	feBrowser.EventWindowSetLeft() Fired when the host window should change its Left coordinate
WindowSetResizable	fe:WBEvt_WindowSetResizable	feBrowser.EventWindowSetResizable() Fired when the host window should allow/disallow resizing
WindowSetTop	fe:WBEvt_WindowSetTop	feBrowser.EventWindowSetTop() Fired when the host window should change its Top coordinate
WindowSetWidth	fe:WBEvt_WindowSetWidth	feBrowser.EventWindowSetLeft() Fired when the host window should change its width

Other FileExplorer Specific Event Callbacks
feBrowser.EventClick()	Fired when the user clicks in the control. Only traps the click event, no other information is provided (such as what the user clicked on etc.) The FeBrowser.EventBeforeNavigate() event callback can be used to trap mouse clicks that cause a navigation command to execute.
feBrowser.EventDblClick()	Fired when the user double clicks in the control.

UseFul Tip:How To Load and Print Web Pages in the Background

Using FileExplorer you can load a web page, print it, and close the window that the page is loaded with, without the user having to see anything. You can do this simply by adding a procedure with a FileExplore feBrowser control, and passing it a string as a parameter. This string contains the URL of the website page to print.

This is demonstrated in the BackgroundPrint example in the Clarion\3rdparty\Examples\FileExplorer\BackgroundPrint\ folder. The example allows a file to be selected that is printed using FE in the background. While the example allows a file to be selected and a button to be pressed to print the file, this can be automated using exactly the same technique. Note that you can also specify a web page address (URL) instead of a file name and FE will print it. You can also specify any file type that IE can open - HTML, EML, MHT, PDF etc.

The example uses the following technique to implement background printing, which involves embedding a small amount of code in four embed points.

1. Hide the Window
   
   In the ThisWindow.Init method, after the window has opened, hide it (this is in the embed below SELF.Open(Window)):
   

   ! Open the window
       Open(Window)                ! Open window
       ! [Priority 8030]
   
       Window{prop:hide} = 1
   /5*/*-
   

2. Load the page. After the call to ThisViewer.Init(), call the .Load() method to load the page that you want to print. The example application passes a parameter to the procedure to specify the page to load.
   
3. Print the page after it has been loaded in the ThisViewer.EventDocumentComplete() procedure, after the parent call add the following code:

       if Clip(pUrl) <> 'about:blank'     ! Ignore the blank page
           if Message('Would you like to print the page ' & Clip(pURL) & '?', |
                      'Print this page?', Icon:Question, Button:Yes + Button:No) = Button:Yes
               ThisViewer1.PrintMe(false) ! print the document
           end
       end
   

4. Close the window once the print is completed, in the ThisViewer1.EventPrintTemplateTeardown() method, again after the parent call, add the following:

       Post(Event:CloseWindow)

   And that is it - you now have a procedure that will print any file or page that Internet Explorer can load, all in the background!

UseFul Tip: Finding which Radio button is selected.

998111[/.yWhen using Radio button on a web page, all the buttons that need to be in the same "group" should be name the same, and each given a unique value:

<input type="radio" name="R1" value="V1" checked>
<input type="radio" name="R1" value="V2">
<input type="radio" name="R1" value="V3">  

The problem is determining which radio button is selected before the form is submitted, unfortunately the Checked attribute is not set for radio buttons when getting the value from the IE HTML DOM (although it is used to determine the default selection). However a small amount of JavaScript can be used to assign the selected value to a hidden entry in the form:

<p><input type="radio" name="R1" value="V1" onMouseUp="rSelect.value='V1'" checked></p>
<p><input type="radio" name="R1" value="V2" onMouseUp="rSelect.value='V2'"></p>
<p><input type="radio" name="R1" value="V3" onMouseUp="rSelect.value='V3'"></p>
<input type="hidden" value="" name="rSelect">

The above code assigns the value to the hidden control (rSelect) when the radio button is selected. Using GetElementsQ() will list the selected value for the rRelected element. JavaScript and FileExplorer are an excellent combination for providing additional functionality and providing a rich, dynamic user interface.

Leveraging the power of the HTML DOM using JavaScript and FileExplorer

Using JavaScript in conjunction with FileExplorer allows you to create powerful, dynamic user interfaces and web pages to display in your application. You use JavaScript with FE in the same manner as using it in any other web page - simply add the required JavaScript to the HTML file that is being loaded. You can add an 'onload="MyFunction();"' to the <body> tag to run JavaScript when the application loads, you can call JS code when a control is click on, selected, moused over, moused out etc. You have full control over the document and the DOM, and there are loads of JavaScript examples and documentation available online.

Below there is some JavaScript from an recent application that uses FileExplorer to display dynamic forms (an example of which will ship with FE in the near future). In the <head> section of the HTML declare the JavaScript functions:

<script type="text/javascript">
<!--
function autoTab(input, len, e)
{
    var keyCode = (isNN) ? e.which : e.keyCode;
    var filter = (isNN) ? [0,8,9] : [0,8,9,16,17,18,37,38,39,40,46];
    if(input.value.length >= len && !containsElement(filter,keyCode))
    {
        input.value = input.value.slice(0, len);
        input.form[(getIndex(input)+1) % input.form.length].focus();
    }

    function containsElement(arr, ele)
    {
        var found = false, index = 0;
        while(!found && index < arr.length )
            if(arr[index] == ele)
                found = true;
            else
               index++;

        return found;
    }

    function getIndex(input)
    {
        var index = -1, i = 0, found = false;

        while (i < input.form.length && index == -1)
            if (input.form[i] == input)
                index = i;
            else
                i++;

        return index;
    }
    return true;
}

function expandTA(ta) {
    var maxChars = ta.cols;
    var theRows = ta.value.split("\n");

    var numNewRows = 0;

    for ( var i = 0; i < theRows.length; i++ ) {
        numNewRows += ( Math.ceil( theRows[i].length / maxChars ) - 1 );
    }
    if (numNewRows + theRows.length == 0)
        ta.rows = 1
    else
        ta.rows = numNewRows + theRows.length;
    }

function padout(number) { return (number < 10) ? '0' + number : number; }

function SetDate(dayInput, monthInput, yearInput)
{
    var now = new Date();

    dayInput.value = padout(now.getDate());
    monthInput.value = padout(now.getMonth() + 1); // return from 0 to 11.
    yearInput.value = now.getYear();

}
//-->
</script>

The autoTab() function automatically moves to the next field when the user completes the current field and the expandTA() function expands a Text box as the user types, so each time they press return for a new line the box expands to fit the text (very useful for keeping forms compact and neat, but still functional and clear). SetDate() sets the date of the passed fields to the current date, and the PadOut() function just adds a zero to the front of the number if it is a single digit so that dates are always in the format 01/01/2007 instead of 1/1/2007 etc.

For example in the <body> tag call SetDate() to fill fields with the current date:

<body onload="SetDate(document.ConsultationForm.dayField, document.ConsultationForm.monthField,
              document.ConsultationForm.yearfieldField);">

The syntax for a fields is document.formname.fieldname. The document object is the current document and contains a number of properties and methods (any JS reference will list then for you). You declare the form as:

<form name="ConsultationForm" id="ConsulationForm">

And you can then reference it as document.ConsulationForm. I have set the ID to ConsultationForm here because I used the ID when I read the fields in using the FE GetElementsQueue() method. Similarly you can the fields to use them:

<input id="DOB_d" size="3" maxlength="2" onKeyUp="return autoTab(this, 2, event);"
       onFocus=" this.value='';" />
<input id="DOB_m" size="3" maxlength="2" onKeyUp="return autoTab(this, 2, event);"
       onFocus=" this.value='';" />
<input id="DOB_y" size="5" maxlength="4" onKeyUp="return autoTab(this, 4, event);"
       onFocus=" this.value='';" />

This declares fields for day, month and year. When the user fills in a field it jumps to the next field in the form automatically, and when the user clicks in a field it clears it. The onKeyUp and onFocus events are used.

JavaScript is immensely flexible and powerful, and you can provide some great interfaces for your user by leveraging the combination of FileExplorer and JavaScript. We will be expanding on this documentation and providing a dynamic form example with FE in the near future.

How to remove parts of a loaded page before displaying it to the user

When a page is loaded using Internet Explorer (or any other web browser) you don't have any control over which parts of the page is displayed, whatever the web server provides is displayed by the web browser. FileExplorer allows you to remove parts of web pages as well as modifying values (such as filling in forms automatically etc.).

1. It is often helpful to hide the control using the feBrowser.HideControl() method while the content is loading. If you want to make it appear as if the control is still there then use a Box control, with a white fill that is displayed in place of the FE control while it is loading. This also allows you to add a progress control or animation to show the user that the loading of the page etc. This isn't required but means that it won't be displayed until you have finished modifying it, which may be better visually.
2. Turn on callbacks in the feBrowser extension (or right click on the FileExplorer control in the Window Editor and choose Actions, the Callbacks setting is on the second tab).
3. Load the URL by calling the Load() method
4. In the EventDocumentComplete() method embed code to process the received page:
   • Check that the pUrl parameter is the page that you have just loaded (this method is called a number of times, for example it is initially called for 'about:blank' before you load any other pages).
   • Call GetElementQ() to get a list of all elements on the page.
   • For each element in the queue that you want to remove call SelectElementByID() or SelectElementByName() to select the object on the page.
   • Call Edit(fe:Browser_Delete) to delete the selected element

How to browse html content stored in a BLOB

Declare a dynamic cstring:

MyCString        &cstring

then in your code, create a new cstring for the size of the blob, and then fill the cstring with the blob's contents. You can then use the ThisViewer.LoadFromStream() method to load the cstring into the file explorer control.

Enabling HTML 5 Support in IE 9.

The IE9 "version" of the WebBrowser control, like the IE8 version, is actually several browsers in one. Unlike the IE8 version, you do have a little more control over the rendering mode inside the page by changing the DOCTYPE. Of course, to change the browser mode you have to change the registry. Here is the location of FEATURE_BROWSER_EMULATION:

HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)
    SOFTWARE
        Microsoft
            Internet Explorer
                Main
                    FeatureControl
                        FEATURE_BROWSER_EMULATION
                            MyApplication.exe = (DWORD) 000090000

Here is the complete set of codes:

• 9999 (0x270F) - Internet Explorer 9. Webpages are displayed in IE9 Standards mode, regardless of the !DOCTYPE directive.
• 9000 (0x2328) - Internet Explorer 9. Webpages containing standards-based !DOCTYPE directives are displayed in IE9 mode.
• 8888 (0x22B8) -Webpages are displayed in IE8 Standards mode, regardless of the !DOCTYPE directive.
• 8000 (0x1F40) - Webpages containing standards-based !DOCTYPE directives are displayed in IE8 mode.
• 7000 (0x1B58) - Webpages containing standards-based !DOCTYPE directives are displayed in IE7 Standards mode.

The full docs:

http://msdn.microsoft.com/en-us/library/ee330730%28VS.85%29.aspx#browser_emulation

The other option is to add the following tag to the beginning of the HEAD section of the HTML document:

<META http-equiv="X-UA-Compatible" content="IE=edge" />

Note that it must be before all HEAD elements except TITLE and any other META tags in order to work.

You can use the same approach to get and set the values of elements on the page by calling GetValueByID(), GetValueByName(), SetValueByID(), SetValueByName() and elements can be "clicked" on using ClickByRecordNumber().