Using wxWebView to create C++ app with HTML user interface

If you are using the main C++ distribution of wxWidgets, Feel free to ask any question related to wxWidgets development here. This means questions regarding to C++ and wxWidgets, not compile problems.
Post Reply
krisguy1976
In need of some credit
In need of some credit
Posts: 4
Joined: Tue Aug 27, 2013 9:48 pm

Using wxWebView to create C++ app with HTML user interface

Post by krisguy1976 » Tue Nov 19, 2013 11:41 pm

Hello all,

I want to create a C++ app with a HTML page attached to it. I hear that it's possible to do that using wxWebView. Below are 2 capabilities that i am expecting on my app.

I want to be able to receive the HTML button click events in the C++ code. How can i do that?

Once i receive the button click, i want to call a JavaScript function in HTML page. How to do that?

I am new to wxWidgets and wxWebView. So please help. It will immensely help if someone can share some sample code.

Thanks in advance.

User avatar
doublemax
Moderator
Moderator
Posts: 15069
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Using wxWebView to create C++ app with HTML user interfa

Post by doublemax » Wed Nov 20, 2013 12:13 am

Looking through the wxWebView documentation, i'd say this is not possible at the moment. The only interface between C++ and JavaScript is the RunScript() method. But i don't see any way from JS back to the C++ part.
Use the source, Luke!

eranif
Moderator
Moderator
Posts: 607
Joined: Tue Nov 29, 2005 7:10 pm
Location: Israel

Re: Using wxWebView to create C++ app with HTML user interfa

Post by eranif » Wed Nov 20, 2013 5:54 am

It is possible to achieve what you want.
I did the same by simply modifying the document title and then catching the 'EVT_WEBVIEW_TITLE_CHANGED' event

In your example, when user clicks on a button, you should catch it in a JavaScript handler that does something like:

Code: Select all

<html>
<head>
    <script>
    function buttonClicked() {
        // change the title to something that allows you to pass information from JS to C++
        // for example: JSON format
        document.title = "{ \"action\" : 1, \"name\" : \"button1\" }";
    }
    </script>
</head>
<body>
    <button onclick="buttonClicked()" type="button">Click Me</button>
</body>
</html>

Now, the C++ event handler is called:

Code: Select all

void MyFrame::OnHTMLTitleChanged(wxWebViewEvent& event)
{
    wxString str = event.GetString();
    // str now contains the JSON string set in the Java Script
}
Using this method you can develop a nice communication mechanism between C++ and your HTML page

Eran
IDE: CodeLite + wxCrafter
OS: All
https://wxcrafter.codelite.org
https://codelite.org

protocol
Moderator
Moderator
Posts: 680
Joined: Wed Jan 18, 2006 6:13 pm
Location: Dallas, TX
Contact:

Re: Using wxWebView to create C++ app with HTML user interfa

Post by protocol » Wed Nov 20, 2013 7:33 am

The above way would work, but I think a better approach would be to create your own URL scheme using

Code: Select all

wxWebView::RegisterHandler(...)
http://docs.wxwidgets.org/trunk/classwx ... 1b7406dbc2

It is similar to how you intercept and process user actions when working with an embedded webview (WebKit) for iOS.

http://stackoverflow.com/questions/1099 ... iew-on-ios

If you need code samples in C++, let me know.
/* UIKit && wxWidgets 2.8 && Cocoa && .Net */
QuRegExmm
wxPCRE & ObjPCRE - Regex It!

krisguy1976
In need of some credit
In need of some credit
Posts: 4
Joined: Tue Aug 27, 2013 9:48 pm

Re: Using wxWebView to create C++ app with HTML user interfa

Post by krisguy1976 » Wed Nov 20, 2013 3:43 pm

Hello Protocol,

Can you give me C++ sample codes?

Some sample code that shows the implementation of receiving HTML button click events in C++ Code & C++ code calling JS functions.

Thanks in advance.

fancyivan
Experienced Solver
Experienced Solver
Posts: 80
Joined: Wed May 26, 2010 8:42 am
Location: Beijing, China
Contact:

Re: Using wxWebView to create C++ app with HTML user interfa

Post by fancyivan » Thu Nov 21, 2013 6:54 am

1 year ago, I did the same thing with earnif.

1. Add Event in EventTable:

Code: Select all

EVT_WEB_VIEW_TITLE_CHANGED(ID_Browser, ggeiFrame::OnCallBack)
c++ code will comunicate with html by using this event handle.
2. in html, add button by using javascript:

Code: Select all

<script type="text/javascript">
function Delete(i){if(confirm("Really?")){document.title='CALLBACK' + i;}};
</script>
<a href=\"javascript:Delete(1);\">Delete A</a>
<a href=\"javascript:Delete(2);\">Delete B</a>
<a href=\"javascript:Delete(3);\">Delete C</a>
3. Handle the event in c++ code:

Code: Select all

void ggeiFrame::OnCallBack(wxWebViewEvent&)
{
    //here we can get the deleted id from page title
    wxString strTitle = m_Browser->GetCurrentTitle();
    if(!(strTitle.StartsWith(wxT("CALLBACK"))))
    {
        return;
    }
    //wxMessageBox(m_Browser->GetCurrentTitle());
    unsigned int i = wxAtoi(strTitle.Mid(8));
    if(i < m_DataArray.Count())
    {
        m_DataArray.RemoveAt(i);
    }
    // after one item removed, we should rebuild the web page according to the m_DataArray and reload it.
    RebuildPage();
    m_Browser->Reload();
}
And here are some c++ codes may be you need:

Code: Select all

 // Create a browser object in panel pnlGrid
 m_Browser = wxWebView::New(pnlGrid, ID_Browser);
// We register the wxfs:// protocol for testing purpose
 m_Browser->RegisterHandler(wxSharedPtr<wxWebViewHandler>(new wxWebViewArchiveHandler("wxfs")));
.....
// Generate html page dynamically
RebuildPage();
m_Browser->LoadURL(......);
Enjoy
OS: Win7 Ultimate SP1 x64(Windows XP Pro SP3 in VirtualBox)
Compiler: MinGW32 (gcc4.8.1 + gdb7.6.1)
IDE: Code::Blocks 12.11
Lib: wxWidgets3.0.0

krisguy1976
In need of some credit
In need of some credit
Posts: 4
Joined: Tue Aug 27, 2013 9:48 pm

Re: Using wxWebView to create C++ app with HTML user interfa

Post by krisguy1976 » Fri Nov 22, 2013 10:17 pm

I am totally new to wxWidgets and don't have much idea. I am primarily a WIndows developer working on MFC. The reason why i am curious about wxWebView is because it's cross platform. So i can make one app that works on both WIndows and Linux. Is that correct?

Which is the best IDE to develop wxWidgets apps?

eranif
Moderator
Moderator
Posts: 607
Joined: Tue Nov 29, 2005 7:10 pm
Location: Israel

Re: Using wxWebView to create C++ app with HTML user interfa

Post by eranif » Sat Nov 23, 2013 8:59 am

krisguy1976 wrote:So i can make one app that works on both WIndows and Linux. Is that correct?
You can write your code using wxWidgets it will also give you the same result: your application run on all OSs (you need to compile it first...)

wxWidgets _is_ cross platform
krisguy1976 wrote:Which is the best IDE to develop wxWidgets apps?
This is subjective. I for instance am using CodeLite IDE which I also wrote

Eran
IDE: CodeLite + wxCrafter
OS: All
https://wxcrafter.codelite.org
https://codelite.org

Post Reply