Adding a Listener to a HTMLBrowserPanel Component

Question

H.A. Camp on 19 Apr 2018

0
Link

Direct link to this question

https://au.mathworks.com/matlabcentral/answers/396097-adding-a-listener-to-a-htmlbrowserpanel-component

Edited: H.A. Camp on 27 Feb 2020

I've recently come across the need to provide users with HTML/Javascript pages and conduct calculations based on user responses. Currently, I'm displaying HTML content in a HTMLBrowserPanel component, then parsing HTML fields after the user clicks a form button. (Let's presume this is a rational design choice -- I recognize I could use MATLAB uicontrol objects, but in this case it's more feasible to display HTML content for reasons I don't want to get into.)

In order to parse the form's contents, I'm periodically polling a hidden field on the form to see if it changes values. This is functional, but not ideal -- I'd rather attach a listener object to the form field that triggers a MATLAB response (like we would for any uicontrol object). However, I cannot seem to figure out how to attach a listener to the HTML field object. Is this even possible?

Here's a simplified code example showing how I'm capturing information. Users are presented with a form field and a submit button. When 'submit' is clicked, the 'Monitoring Flag' field flips from 0 to 1. MATLAB is polling the flag field every 1/4 second and when it changes, it knows to parse the form data. Again, the question is: can I attach a listener object to the HTML form field rather than polling the field every so often?

 % Create figure
 hFig = figure('Pos', [0 0 1420 1024], 'Name', 'Test Window', 'NumberTitle', 'off', 'Units', 'norm', 'Menu', 'none');
 movegui(hFig, 'center');
 % Add Browser object
 [browserPanel, bContainer] = javacomponent(com.mathworks.mlwidgets.html.HTMLBrowserPanel, [], hFig);
 set(bContainer, 'Units', 'norm', 'Pos', [0 0 1 1]);
 % Navigate to a URL...
 % htmlAddress = 'C:\Code\test.html';
 % browserPanel.setCurrentLocation(htmlAddress);
 % ...Or load html data directly
 htmlData = {
  '<!DOCTYPE html>'
  '<html lang="en">'
  '    <head>'
  '        <meta charset="utf-8">'
  '        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />'
  '        <title>Test Window</title>'
  '    </head>'
  '    <body>'
  '        <form name="testForm">'
  '            MATLAB Input Test: <input  id="testField" name="testVar"></input>'
  '            <button type="button" onClick="matlab()">'
  '                Submit'
  '            </button>'
  '        </form>'
  '        <form name="matForm">'
  '            Monitoring Flag: <input  id="matlab" name="matVar" value="0"></input>'
  '            <button>Reset</button>'
  '        </form>'
  '    </body>'
  '    <script type = "text/JavaScript">'
  '        function matlab() {'
  '            document.matForm.matVar.value = 1;'
  '        }'
  '    </script>'
  '</html>'
 }; 
 browserPanel.setHtmlText(strjoin(htmlData));
 % Get JxBrowser BrowserView and Browser objects
 if verLessThan('matlab', '8.6')
     error('JxBrowser BrowserView is not available in MATLAB R2015a or earlier');
 elseif verLessThan('matlab', '9.1')
     browserView = browserPanel.getComponent(0).getComponent(0).getComponent(0).getComponent(0);
 else
     browserView = browserPanel.getComponent(0).getComponent(0).getComponent(0);
 end
 browser = browserView.getBrowser();
 % Wait until browser finishes loading
 while browser.isLoading
     pause(0.1);
 end
 % Check Browser
 interrupt = false;
 tic; % Just so the demo ends nicely
 while ~(interrupt) || (toc > 60)
     pause(0.25);
     if ~(browser.isLoading)
         matObj  = browser.getDocument(1).findElement(com.teamdev.jxbrowser.chromium.dom.By.id('matlab'));
         if ~isempty(matObj)
             matVal  = matObj.getValue;
             matVal  = matVal.toCharArray.';
             if ~isequal(matVal, '0')
                 testObj  = browser.getDocument(1).findElement(com.teamdev.jxbrowser.chromium.dom.By.id('testField'));
                 testVal  = testObj.getValue;
                 testVal  = testVal.toCharArray.';
                 fprintf('MATLAB value detected: %s\n', testVal);
                 interrupt = true;
             end
         end
     end
 end