As many of you may have read, HTML5 is the new rage on the web. Although it is not yet fully approved, most modern browsers have already implemented a version that supports HTML5 including IE9.

HTML5 gives us the ability to do things in our browser that was not possible or was very complicated (many lines of code) with the older HTML format specification.

For instance to embed a video in HTML5 all that is needed now is these lines:

<video width="320" height="240" controls="controls">
<source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html5/movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>

But for those users still on XP (me included) if you want to show HTML5 content using the Web Browser control in VFP, this is not currently possible because you have IE8 which does not support HTML5.

Google's Chrome Frame to the rescue.

All you need to do to enable HTML5 in your VFP forms using the IE8 Web Browser control is to install the Chrome Frame available here:

http://code.google.com/chrome/chromeframe/

Also to force the Web Control to use the GCF (Google Chrome Frame) include this line anywhere in the HEAD code of your page:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
and the page will load in your web browser control on your VFP form.

Now everything HTML5, including the HTML5 Canvas is available to you.

There are a couple of  problems though - all your web pages must be hosted by a proper server as restrictions in Chrome do not normally allow opening a HTML page locally. And your web page must contain the above HTML5 tag.

So what if it does not have this tag and you do not have access to change this HTML header code?

You have a couple of solutions:

1. You can prepend the following string to the HTML URL

"gcf:"

So http://SomeHtmlWebsite/Page1.html becomes  gcf:http://SomeHtmlWebsite/Page1.html

Noote that you must include the gcf and the http as shown.

2. You can permanently do this so that you can avoid adding the "gcf:" by a simple Regisrty entry. Open your registry using Regedit and navigate to:

HKCU/Software/Google/ChromeFrame

Right click and select a Dword. Name it: IsDefaultRenderer and set its value = 1

That takes care of the first problem. For the second about hosting local files, fear not- there is a solution to that as well.
It just need an couple of entries into your windows registry.

Copy the text below and paste it into Notepad and save it with a .REG extension. Then double click this file and when windows asks, add it to your registry and you are good to go.

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Google\ChromeFrame]
"AllowunsafeURLs"=dword:00000001
"AllowFileAccessFromFiles"=dword:00000001

I have included the above REG entries in the download. Install the Chrome Frame first before running that REG script. We are all done here setting up our environment to use HTML5 in VFP.

To get you started exploring the wonderful world of HTML5 and VFP I have included some basic files in a download below. Just extract them to a separate folder and run the form. It will load a basic page which sets up the html5 environment.  Included is the above video code in a HTML5 page. After the form has loaded just click the "Load HTML5" button to load the page. You can actually paste any HTML5 page there and it should display.

Note that in the supplied form and its HTML code, the GCF is loaded automatically so most HTML5 pages will display correctly.

Here are some examples that work:

http://html5demos.com/canvas-grad

http://html5demos.com/drag

http://www.addyosmani.com/resources/googlebox/

http://mugtug.com/sketchpad/

Search on Google using the keywords "HTML5 Samples" and test it out by pasting the link in the supplied form and clicking on "Load HTML5".

More Developer information can be found from the following link:

http://www.chromium.org/developers/how-tos/chrome-frame-getting-started

Enjoy the new HTML5 in a VFP form.

Finally you might ask, of what use is this to be able to display HTML5 content in a VFP form when I can use a web browser.?

Well over the next few months, time permitting,  in subsequent posts, I will be showing you what is possible using this technique and how to interact with VFP and the Web control using Javascript, so stay tuned.

Lets know what you think

Download the files from here.

 

15 Responses to HTML5 with the Web Browser Control in VFP

  • Anil says:

    Hi Bernard, Just downloaded the sample and installed the chromeframe but sample is not working :(.
    I m getting message invalid procedure call or argument. what should i do now?

    • Bernard Bout says:

      You should always supply more information if you really want help. Post your errors with maybe images on foxite forum so I know which “invalid procedure call or argument” the error is occurring in. I am very bad at guessing.

  • Sherwin says:

    Dear Mr. Bernard;

    I’ve Downloaded / extracted your html5.zip and ran it. It say’s “Page Could Not be Displayed”. and it displayed outside of the form ( in a IE Browser ). I kinda changed the code from the Buttons Click Event :

    o = ThisForm.Olecontrol1.Document
    o.Script.shomsg(ALLTRIM(ThisForm.Text1.Value))

    to

    o = ThisForm.Olecontrol1.Document
    o.Script.open(ALLTRIM(ThisForm.Text1.Value),”_self”)

    and it worked. it displayed the html. but my question is when i prepend the “gcf” on a url
    It displays the page perfectly, but i can’t click the form controls anymore, it’s that normal
    for the web browser control.

    Thanks
    Sherwin 😐

  • Jesus Caro V. says:

    HI!

    Thanks for the input.

    Windows 7 send the message: “Windows blocked this software because it can not verify the publisher”

    The Web Browser control don’t work.

    Regards.

  • Gilberto says:

    Thanks Bernard!

    I use this tip for use jquery in web browser

    Regards!

  • Gilberto says:

    Is possible return values from webbrowser or detect any value?

  • Victor Chigne says:

    Hello Bernard.
    I’m using VFP to automate google maps in IE9 with calls like Thisform.OleIE.Document.Script.somejavascriptfunction().
    I’m able to use IE9 but javascript is slooooooow on al IE’s, so I was looking for ways to speed this up (like using the chorme engine).
    Will this still work if I install chromeframe and your hacks to the registry?

    • Bernard Bout says:

      That is the whole point of the post. Using Chrome frame you actually use the Chrome engine and even HTML5 now works properly.

  • MikeS says:

    Hi Bernard,

    It looks like I’m late to this gcf party! I’m interested in using it in a VFP app where I’m currently rendering html content in the IE web browser ActiveX control. Currently, I’m seeing what I believe is memory “creep / leaks(?)” with IE. My page uses a lot of jQuery plugins and I’ve tried everything that I know to try to resolve the “leaks” but to no avail.

    Do you think that using the Chrome frame will help to alleviate what I’m observing?
    Does the Chrome frame add much overhead (CPU and RAM useage)?

    • Bernard Bout says:

      Well the Chrome frame uses Chrome so there will be that overhead. But with today’s CPU’s and cheap memory that should not be a problem.

      The best way to check for memory leaks is to display the page in the Chrome Browser itself and use the Debugging Console to see if the problem is in your code/plugins or elsewhere. If there are no leaks in Chrome then there should not be any in the Chrome frame.

  • Sebastien says:

    Hello Bernard,
    I’m trying to call a JavaScript function of the current page.
    But I don’t find a way to make it work.
    I used Thisform.olecontrol1.Document.Script.myFunction() but it returns me an OLE Error .

    Thanks
    Sebastien

    • Bernard Bout says:

      Since VFP runs so fast the page and DOM will not have loaded by the time you are calling the JS function. Also you can only access the DOM AFTER the form is Activated – after the form.Activate() has run. This is why you are getting the error.

      I found the easiest solution was to do the following:

      1. Add a Property to the form – isActivated = .F.
      2. Add a Timer to the form with an interval = 100. Adjust/increase this if the HTML takes more time/is larger. Set Enabled = .F.
      3. In the form.init:

      ThisForm.Olecontrol1.navigate2(fullpath to myhtmlfile)
      * wait a while for html to load
      * can also check ReadyState = 4 for larger html pages
      * need this to slow down VFP till the page has loaded. Also can have a loop checking for Olecontrol.ReadyState = 4
      DECLARE INTEGER Sleep IN WIN32API Integer
      SLEEP(200) && adjust for bigger/longer wait

      4. form.Activate
      IF NOT Thisform.isActivated
      * Funnily enough we need to wait till the form is fully instantiated before getting the DOM object
      * so we use a timer whose interval can be changed as needed for larger HTMP pages to load.
      ThisForm.timer1.Enabled = .T.
      Thisform.isActivated = .T.
      ENDIF

      5. In the timer.Timer()
      * register the form with JS
      This.Enabled = .F.
      o = ThisForm.Olecontrol1.Document
      o.Script.getvfp(thisform)

      Download this file, extract and run to see how I use interaction with JS
      http://weblogs.foxite.com/bernardbout/files/2013/09/basicinteraction.zip

Leave a Reply

Your email address will not be published. Required fields are marked *