Adding Scripting Support to your Application -- The TCppWebBrowser way

[relipse]

Thanks to the tons of articles and open source code, this would not be possible.
Well, lets say we want to add Scripting support -- specifically JavaScript support, in other words, the user can install a script to customize your application, the key is having a language, and an engine to parse it.
Well, because the TCppWebBrowser component is just an activex control that puts an Internet Explorer control on your app, we can use the scripting engine embedded within IE to do all our dirty work.

Once you drop a TCppWebBrowser on your form, and hide it away behind some other components, name it WebScripter or something.

Well, now we will need some basic utilities, number one, is a way to execute scripts, which you can use a few methods to do it,
one is to load an html page with that script included in the html, or just have a <script>my script</script>, or my favorite, after the TCppWebBrowser component loads and navigates to its first page, we can use the function below to execute javascript inside the currently loaded document (it must exist, do a Web->Navigate(L"about:blank"); if you need to)

[Select]

bool TCppWebBrowserUtils::ExecJs(TCppWebBrowser *Web, WideString cmd)
{
 IHTMLDocument2  *doc = NULL;
 IHTMLWindow2 *win;
 if (!Web->Document){ return false; }
 bool success_status = false;
 if(SUCCEEDED(Web->Document->QueryInterface(IID_IHTMLDocument2, (LPVOID*)&doc)))  {
   HRESULT hr = doc->get_parentWindow(&win);
   if (SUCCEEDED(hr))  {
     VARIANT v;
     VariantInit(&v);
     win->execScript(cmd,NULL,&v);
     VariantClear(&v);
     win->Release();
     success_status = true;
   }
   doc->Release();
 }
 return success_status;
}

Ok, now that we got that, we are ready to execute custom scripts, load it from a file, drag and drop, or whatever, then pass it to the function above.

But you may be wondering, what is so special about this? We get all the cool things that JavaScript comes with such as regular expressions, substrings, the tons of functions on the internet that we can add.

Now, how can the user control our application?
The key is, window.external, which is what we are going to implement next.

At this time, you can compile your application, and execute some javascript, but we still need to add an implementation for window.external

The idea of window.external , is to be able to call non-script code, so that the user can execute C++ code by using a method of window.external.YourAppDoSomethingCool();

Well, how exactly do we get functions attached?
First of all, we need our own IDocHostUIHandler to attach to the WebBrowser component.
We can do this by adding a new class as below:

Spoiler

[Select]

 //The below class lets you replace the right click menu, as well as attach functionality to window.external (SetExternal())
  // Simple implementation for IDocHostUIHandler and IUnknown interfaces
  // Implementation returns E_NOTIMPL for all IDocHostUIHandler methods except
  // ShowContextMenu. See comment block preceeding that ShowContxtMenu for
  // further information.
  class MyDocHandler :public IDocHostUIHandler
  {
    long refcount;
    IDispatch* External;
  public:
    TPopupMenu* PopupMenu;
    bool ShowIEPopup;
  public:
    //*Accessors
    void SetExternal(IDispatch* Ext)
    {
        if(External)
            External->Release();

        External = Ext;

        if(External)
            External->AddRef();
    }

    IDispatch* GetExternal()
    {
        return External;
    }

  public:

    MyDocHandler() :refcount(1), External(NULL), PopupMenu(NULL), ShowIEPopup(true){ }

    virtual HRESULT STDMETHODCALLTYPE QueryInterface(REFIID classid, void** intf) {
      if (classid == IID_IUnknown)
        *intf = (IUnknown*)this;
      else if (classid == IID_IDocHostUIHandler)
        *intf = (IDocHostUIHandler*)this;
      else
        return E_NOINTERFACE;
      return S_OK;
    }

    virtual ULONG STDMETHODCALLTYPE AddRef() {
      InterlockedIncrement(&refcount);
      return refcount;
    }

    virtual ULONG STDMETHODCALLTYPE Release() {
      InterlockedDecrement(&refcount);
      if (refcount == 0)
        delete this;
      return refcount;
    }

    // Returning S_OK tells the web browser that it need not display its
    // own context menu, presumably because the application hosting it has
    // displayed its own menu to replace it.
    // Since our host does not display any, no context menu is shown.
    virtual HRESULT STDMETHODCALLTYPE ShowContextMenu(
      /* [in] */ DWORD dwID,
      /* [in] */ POINT __RPC_FAR *ppt,
      /* [in] */ IUnknown __RPC_FAR *pcmdtReserved,
      /* [in] */ IDispatch __RPC_FAR *pdispReserved) {


          if (PopupMenu)
          {
             PopupMenu->Popup(ppt->x, ppt->y);
             return S_OK;
          }
          else if (!ShowIEPopup)
          { //don't show one at all
            return S_OK;
          }
          else{  //if there is no pop up menu, just use the default ie one
            return E_NOTIMPL;
          }

      }

    virtual HRESULT STDMETHODCALLTYPE GetHostInfo(
      /* [out][in] */ DOCHOSTUIINFO __RPC_FAR *pInfo) {
          return E_NOTIMPL;
      }

    virtual HRESULT STDMETHODCALLTYPE ShowUI(
      /* [in] */ DWORD dwID,
      /* [in] */ IOleInPlaceActiveObject __RPC_FAR *pActiveObject,
      /* [in] */ IOleCommandTarget __RPC_FAR *pCommandTarget,
      /* [in] */ IOleInPlaceFrame __RPC_FAR *pFrame,
      /* [in] */ IOleInPlaceUIWindow __RPC_FAR *pDoc) {
          return E_NOTIMPL;
      }

    virtual HRESULT STDMETHODCALLTYPE HideUI( void) {
          return E_NOTIMPL;
      }

    virtual HRESULT STDMETHODCALLTYPE UpdateUI( void) {
          return E_NOTIMPL;
      }

    virtual HRESULT STDMETHODCALLTYPE EnableModeless(
      /* [in] */ BOOL fEnable) {
          return E_NOTIMPL;
      }

    virtual HRESULT STDMETHODCALLTYPE OnDocWindowActivate(
      /* [in] */ BOOL fActivate) {
          return E_NOTIMPL;
      }

    virtual HRESULT STDMETHODCALLTYPE OnFrameWindowActivate(
      /* [in] */ BOOL fActivate) {
          return E_NOTIMPL;
      }

    virtual HRESULT STDMETHODCALLTYPE ResizeBorder(
      /* [in] */ LPCRECT prcBorder,
      /* [in] */ IOleInPlaceUIWindow __RPC_FAR *pUIWindow,
      /* [in] */ BOOL fRameWindow) {
          return E_NOTIMPL;
      }

    virtual HRESULT STDMETHODCALLTYPE TranslateAccelerator(
      /* [in] */ LPMSG lpMsg,
      /* [in] */ const GUID __RPC_FAR *pguidCmdGroup,
      /* [in] */ DWORD nCmdID) {
          return E_NOTIMPL;
      }

    virtual HRESULT STDMETHODCALLTYPE GetOptionKeyPath(
      /* [out] */ LPOLESTR __RPC_FAR *pchKey,
      /* [in] */ DWORD dw) {
          return E_NOTIMPL;
      }

    virtual HRESULT STDMETHODCALLTYPE GetDropTarget(
      /* [in] */ IDropTarget __RPC_FAR *pDropTarget,
      /* [out] */ IDropTarget __RPC_FAR *__RPC_FAR *ppDropTarget) {
          return E_NOTIMPL;
      }

    virtual HRESULT STDMETHODCALLTYPE GetExternal(
      /* [out] */ IDispatch __RPC_FAR *__RPC_FAR *ppDispatch) {
        if(ppDispatch == NULL)
            return E_POINTER;

        // make sure currently loaded doc is safe
        //if(!UrlSafeForExternal(WebBrowser->LocationURL))
        //    return E_NOTIMPL;

        if(External) {
            *ppDispatch = External;
            (*ppDispatch)->AddRef();
            return S_OK;
        }
        return E_NOTIMPL;
      }

    virtual HRESULT STDMETHODCALLTYPE TranslateUrl(
      /* [in] */ DWORD dwTranslate,
      /* [in] */ OLECHAR __RPC_FAR *pchURLIn,
      /* [out] */ OLECHAR __RPC_FAR *__RPC_FAR *ppchURLOut) {
          return E_NOTIMPL;
      }

    virtual HRESULT STDMETHODCALLTYPE FilterDataObject(
      /* [in] */ IDataObject __RPC_FAR *pDO,
      /* [out] */ IDataObject __RPC_FAR *__RPC_FAR *ppDORet) {
          return E_NOTIMPL;
      }
  };

The trick is, that this inherits from IDocHostUIHandler, and thus implements the virtual functions,
each function can return a few different types, E_NOTIMPL means you did not change anything, and you want the default behavior, whereas S_OK means you handled it -- like the popup menu
You really don't need to know much more if you want to see it in action, we still have to add our own interface:

[Select]

#ifndef CppScripterH
#define CppScripterH
//---------------------------------------------------------------------------
#include <OleCtrls.hpp>
#include <SHDocVw_OCX.h>
#include <mshtml.h>
#include <mshtmhst.h>
#include "TCppWebBrowserUtils.h"

//This actually contains the functions that will be added to
//window.external
class IBrowserExternal
{
public:
    TStringList* GlobalVariables;  //initalized and freed outside of this class
public:
    IBrowserExternal():GlobalVariables(NULL){};
    ~IBrowserExternal() {};

    //currently the only functions are window.external.SetVar() and window.external.GetVar() as implemented below
    virtual void STDMETHODCALLTYPE SetVar(BSTR key, BSTR val)
    {
        GlobalVariables->Values[AnsiString(key)] = val;
    }
    virtual BSTR STDMETHODCALLTYPE GetVar(BSTR key)
    {
        return (WideString)GlobalVariables->Values[key];
    }
};

The above code is important, it is the class that will be used to store all the methods you want inside of window.external,
the above code only has 2 methods, GetVar() and SetVar(), a useful way to pass information between the script and your app.
Notice how it returns BSTR, and accepts BSTR, that is a string type in javascript, or a WideString() in BCB. Get used to it, you can cast between WideString() and AnsiString() to do string manipulation.


We also need the below code to basically attach the method invocation directly to our methods (i put the above and below code in the same .h file),

[Select]

class TExternalDispatch : public IDispatch
{
public:
    TExternalDispatch();
    ~TExternalDispatch();
    // IUnknown
    virtual HRESULT STDMETHODCALLTYPE QueryInterface(REFIID classid, void** intf);
    virtual ULONG STDMETHODCALLTYPE AddRef();
    virtual ULONG STDMETHODCALLTYPE Release();

    //IDispatch
    virtual HRESULT STDMETHODCALLTYPE GetTypeInfoCount(UINT* pctinfo);

    virtual HRESULT STDMETHODCALLTYPE GetTypeInfo(/* [in] */ UINT iTInfo,
        /* [in] */ LCID lcid,
        /* [out] */ ITypeInfo** ppTInfo);

    virtual HRESULT STDMETHODCALLTYPE GetIDsOfNames(
        /* [in] */ REFIID riid,
        /* [size_is][in] */ LPOLESTR *rgszNames,
        /* [in] */ UINT cNames,
        /* [in] */ LCID lcid,
        /* [size_is][out] */ DISPID *rgDispId);

    virtual HRESULT STDMETHODCALLTYPE Invoke(
        /* [in] */ DISPID dispIdMember,
        /* [in] */ REFIID riid,
        /* [in] */ LCID lcid,
        /* [in] */ WORD wFlags,
        /* [out][in] */ DISPPARAMS  *pDispParams,
        /* [out] */ VARIANT  *pVarResult,
        /* [out] */ EXCEPINFO *pExcepInfo,
        /* [out] */ UINT *puArgErr);

private:
    long refcount;
    IBrowserExternal* BrowserExternal;
    ITypeInfo* TypeInfo;
public:
    IBrowserExternal* getBrowserExternal(){ return BrowserExternal; }
};

#endif

We will also need more code in the .cpp file
Notice, this is extremely important, we must define all of the type information about our new methods:

[Select]

//put this in the .cpp file to add window.external.SetVar() and GetVar()

//this describes the parameters SetVar() takes 2 string parameters, a key and value
static PARAMDATA rgpSetVar[] =
{
    { OLESTR("key"), VT_BSTR},
    { OLESTR("val"), VT_BSTR}
};

//GetVar() only takes 1 string, the key
static PARAMDATA rgpGetVar[] =
{
    { OLESTR("key"), VT_BSTR}
};

//for each function, weneed to add the code below
enum IMETH_ExtDisp
{
    IMETH_SetVar = 0,
    IMETH_GetVar
};

//likewise for this also
enum IDMEMBER_ExtDisp
{
    IDMEMBER_SetVar = DISPID_VALUE,
    IDMEMBER_GetVar
};

//now, see if you can figure this out -- this is the method data -- how it figures out how to call our member functions
//Get used to copying and pasting for each member function, the # represents the number of parameters
//the last item represents the return type VT_BSTR for string, VT_EMPTY for void, VT_INT for int, etc,
//look on the documentation
static METHODDATA rgmdataExtDisp[] =
{
    { OLESTR("SetVar"),           rgpSetVar,          IDMEMBER_SetVar,           IMETH_SetVar,         CC_CDECL, 2, DISPATCH_METHOD, VT_EMPTY },
    { OLESTR("GetVar"),           rgpGetVar,          IDMEMBER_GetVar,           IMETH_GetVar,         CC_CDECL, 1, DISPATCH_METHOD, VT_BSTR }
}

/* IDispatch class for our interface */

TExternalDispatch::TExternalDispatch()
:   refcount(1),
    BrowserExternal(NULL),
    TypeInfo(NULL)
{
    BrowserExternal = new IBrowserExternal();
    CreateDispTypeInfo(&idataExtDisp, LOCALE_SYSTEM_DEFAULT, &TypeInfo);
}

TExternalDispatch::~TExternalDispatch()
{
    if(TypeInfo)
        TypeInfo->Release();

    delete BrowserExternal;
}

/* IUnknown */

HRESULT STDMETHODCALLTYPE TExternalDispatch::QueryInterface(REFIID classid, void** intf)
{
    if(intf == NULL)
        return E_INVALIDARG;

    if (classid == IID_IDispatch || classid == IID_IUnknown) {
        AddRef();
        *intf = this;
        return S_OK;
    }

    *intf = NULL;
    return E_NOINTERFACE;
}

ULONG STDMETHODCALLTYPE TExternalDispatch::AddRef()
{
    InterlockedIncrement(&refcount);
    return refcount;
}

ULONG STDMETHODCALLTYPE TExternalDispatch::Release()
{
    InterlockedDecrement(&refcount);
    if (refcount == 0) {
        delete this;
        return 0;
    }
    return refcount;
}

/* IDispatch */

HRESULT STDMETHODCALLTYPE TExternalDispatch::GetTypeInfoCount(
    UINT* pctinfo)
{
    if(TypeInfo == NULL)
        return E_NOTIMPL; // shouldn't happen

    if(pctinfo == NULL)
        return E_INVALIDARG;

    *pctinfo = 1;

return S_OK;
}

HRESULT STDMETHODCALLTYPE TExternalDispatch::GetTypeInfo(
    /* [in] */ UINT iTInfo,
    /* [in] */ LCID lcid,
    /* [out] */ ITypeInfo** ppTInfo)
{
    if(TypeInfo == NULL)
        return E_NOTIMPL; // shouldn't happen

    if(iTInfo != 0)
        return DISP_E_BADINDEX;

    if(ppTInfo == NULL)
        return E_INVALIDARG;

    TypeInfo->AddRef();
    *ppTInfo = TypeInfo;

return S_OK;
}

HRESULT STDMETHODCALLTYPE TExternalDispatch::GetIDsOfNames(
    /* [in] */ REFIID riid,
    /* [size_is][in] */ OLECHAR** rgszNames,
    /* [in] */ UINT cNames,
    /* [in] */ LCID lcid,
    /* [size_is][out] */ DISPID* rgDispId)
{
    if(TypeInfo == NULL)
        return E_NOTIMPL; // shouldn't happen

    return TypeInfo->GetIDsOfNames(rgszNames, cNames, rgDispId);
}

HRESULT STDMETHODCALLTYPE TExternalDispatch::Invoke(
    /* [in] */ DISPID dispIdMember,
    /* [in] */ REFIID /*riid*/,
    /* [in] */ LCID /*lcid*/,
    /* [in] */ WORD wFlags,
    /* [out][in] */ DISPPARAMS* pDispParams,
    /* [out] */ VARIANT* pVarResult,
    /* [out] */ EXCEPINFO* pExcepInfo,
    /* [out] */ UINT* puArgErr)
{
    if(TypeInfo == NULL)
        return E_NOTIMPL; // shouldn't happen

    return TypeInfo->Invoke(BrowserExternal, dispIdMember, wFlags, pDispParams, pVarResult, pExcepInfo, puArgErr);
}

Ok and finally we actually have to connect the pieces, note this is not complete code, you have to copy each part into the designated section

[Select]

#include "External.h"
#include "TCppWebBrowserUtils.h"

//form variables:
MyDocHandler* scriptdochandler;
TExternalDispatch* webscripter_external;
THashedStringList* GlobalVariables;

//now add in constructor
webscripter_external = new TExternalDispatch();
scriptdochandler = new MyDocHandler();
GlobalVariables = new THashedStringList();

now find a good place to do the below, after of course we've ensured that Document exists and Navigate(L"about:blank"); or something

[Select]

//after we load the first document CppWebBrowser1->Document will be NULL until we do a Navigate()

ICustomDoc *custdoc;
CppWebBrowser1->Document->QueryInterface(&custdoc);

//change the popupmenu
//dochandler->PopupMenu = PopupMenu;

//enable Global Variables
webscripter_external->getBrowserExternal()->GlobalVariables = GlobalVariables;

//allow pages to call window.external. (this might be a security flaw)
scriptdochandler->SetExternal(webscripter_external);

if (custdoc)
{
   custdoc->SetUIHandler(scriptdochandler);
   custdoc->Release();
}

put this in the destructor, or OnClose() or whatever

[Select]

//now don't forget to free memory
delete webscripter_external;
delete scriptdochandler;
delete GlobalVariables; //perhaps let them persist? -- save to file?

Wala!!, now go ahead and try it out:

[Select]

String js = "window.external.SetVar('foo','bar');";
ExecJs(WebScripter, js);
ExecJs(WebScripter, L"alert(window.external.GetVar('foo'));");

You can add more methods that take integers and strings and boolean

[Gothi[c]]

That seems like a very very dirty way to implement JS in a C++ app (Yes, C++ Builder applications are still C++ apps)
Especially since there are so many easier ways to embed js in C++ code. There are many wrappers around spidermonkey and others that make things VERY easy,...

Using JSDB ( http://www.jsdb.org/embedding.html ):

Code: C [Select]

1. struct JSDBEnvironment;
2.  
3. #include "jsdb.h"
4.  
5. int main(int argc, char **argv)
6. {
7.   CoInitialize(0);
8.   TBLEnv TableCache;
9.   {
10.     // cleanup in the right order
11.     JSDBEnvironment JSDB(&TableCache);
12.     JSDB.Startup(512*1024, 8192, 0);
13.     JSDB.in = new FileStream("stdin",FileStream::OMText);
14.     JSDB.out = new FileStream("stdout",FileStream::OMText);
15.  
16.     JSDB.ExecScript("print('Hello, World!')",0,0);
17.  
18.     delete JSDB.in;
19.     delete JSDB.out;
20.   }
21.   CoFreeUnusedLibraries();
22.   CoUninitialize();
23.   return 0;
24. }

flusspferd (http://flusspferd.org):

Code: C [Select]

1. #include <flusspferd.hpp>
2. #include <iostream>
3. #include <ostream>
4.  
5. int main() {
6.     // Create and use a context, needed to be able to use Flusspferd.
7.     flusspferd::current_context_scope context_scope(
8.         flusspferd::context::create());
9.  
10.     // Create a new string and protect it from the garbage collector by making
11.     // it a root string.
12.     flusspferd::root_string str("Hello, World!\n");
13.  
14.     // Demonstrate that str will not be garbage collected, by calling the
15.     // garbage collector.
16.     // Note that there is no other reason to call the garbage collector here.
17.     flusspferd::gc();
18.  
19.     // Set a property on the global object. Effectively, this creates a global
20.     // variable "str" with the contents of str.
21.     flusspferd::global().set_property("str", str);
22.  
23.     // Print str on std::cout - but first, replace "World" by "Flusspferd".
24.     std::cout << flusspferd::evaluate("str.replace('World', 'Flusspferd')");
25. }

Create full classes in c++ usable from js:
http://flusspferd.or...s-without-macro.html

You can also use the v8 js engine (used in chrome ) in your c++ applications ( http://code.google.com/p/v8/ )


What I'm trying to say is that with so many libraries out there, tiny and big, made specifically for letting you embed js into your c++ application, there is absolutely no reason to include a full browser object and 'hide it' just in order to have js functionality. Not only is it very inefficient (memory wise), but it is also much much less flexible.

Just because c++ builder has a RAD GUI, that doesn't mean you have to start using it like visual basic

One of the BIG advantages of c++ builder is that you get the best of both worlds (Your common RAD languages and C++) - You can use the vast resources of C++ libraries out there, while still having the ability to rapidly create a gui.
With cpp builder you do not NEED specific components for everything you try to do, and jump through such hoops to accomplish something. You have the power of C++, use it! There are TONS of libs out there to do anything you want, use them!