Browser Form Control

The oxy_browser built-in form control is used for providing a mechanism to integrate HTML frames or interact with SVG documents directly in the Author mode editor. It can also be used to load HTML that executes JavaScript and from that JavaScript you can access the Oxygen XML Editor plugin workspace. For example, you could use this method to change the value of an attribute, insert XML fragments, or open a new editor.

The oxy_browser form control supports the following properties:

href - The absolute or relative location of a resource. This property is mandatory. Relative values are resolved relative to the CSS. If you have media resources relative to the XML document, you can specify their paths like this:
```
oxy_browser(href, oxy_url(oxy_base-uri(), 'ex.svg')), width, 50%, height, 50%)
```
width - Specifies the width of the content area using relative (em, ex), absolute (in, cm, mm, pt, pc, px), and percentage (followed by the % character) length units.
height - Specifies the height of the form control area using relative (em, ex), absolute (in, cm, mm, pt, pc, px), and percentage (followed by the % character) length units.

Example: oxy_browser Form Control

object {
    content:
        oxy_browser(
            href, 'http://example.page',
            width, 600px,
            height, 400px),
}

Tip: To insert a sample of the oxy_browser form control in a CSS file , invoke the Content Completion Assistant by pressing Ctrl + Space (Command + Space on OS X) and select the

oxy_browser code template.

To see more detailed examples and more information about how form controls work in Oxygen XML Editor plugin, see the sample files in the following directory: [OXYGEN_INSTALL_DIR]/samples/form-controls.

Interacting with the Oxygen XML Editor plugin Workspace

The oxy_browser form control also provides the possibility of creating custom form control without having to use the Java-based API. You can use the oxy_browser form control to load HTML that executes JavaScript. In the JavaScript, you can use some predefined global variables that provide a gateway between the JavaScript and the Oxygen XML Editor plugin Java API. This allows you to perform changes in the document, open resources, and more, solely from the JavaScript.

Important: This will only work if the loaded HTML is located inside a framework or plugin directory, such as: [OXYGEN_INSTALL_DIR]/frameworks/ or [OXYGEN_INSTALL_DIR]/plugins/.

The following global variables can be used:

authorAccess - This object is an instance of ro.sync.ecss.extensions.api.AuthorAccess.
contextElement - An instance of ro.sync.ecss.extensions.api.node.AuthorNode. The form control is added over this node.
pluginWorkspace - An instance of ro.sync.exml.workspace.api.standalone.StandalonePluginWorkspace.
fcArguments - A java.util.Map implementation with the properties (name and value pairs) passed on the form control function.

apiHelper - A helper object for creating Java objects. It allows you to create Java objects from within the JavaScript code. These objects can then be passed to the Java methods as in the following example:

var newAttrValue = apiHelper.newInstance(
           "ro.sync.ecss.extensions.api.node.AttrValue",
           ["normalizedValue", "rawValue", true]);
authorAccess.getDocumentController().setAttribute(
        "counter", newAttrValue, contextElement);

For more information, open the form-controls.xml file in the [OXYGEN_INSTALL_DIR]/samples/form-controls directory and go to section 11.1 - Interacting with the Oxygen Workspace. For debugging information, continue reading below.

Debugging JavaScript Used for Custom Form Controls

If you encounter unexpected results when using the method described above, you can debug the script by using the following guidelines:

Calls to alert("message.to.present") or console.log("message.to.present") will be presented in the Results panel.

You can install the Firebug extension by executing the following script:

{code:javascript}
function installFB() {
  if (!document.getElementById('FirebugLite')) {
    E = document['createElement' + 'NS'] && document.documentElement.namespaceURI;
    E = E ? document['createElement' + 'NS'](E, 'script') 
          : document['createElement']('script');
    E['setAttribute']('id', 'FirebugLite');
    E['setAttribute']('src', 
                      'https://getfirebug.com/' + 'firebug-lite.js' + '#startOpened');
    E['setAttribute']('FirebugLite', '4');
    (document['getElementsByTagName']('head')[0] 
          || document['getElementsByTagName']('body')[0]).appendChild(E);
    E = new Image;
    E['setAttribute']('src', 'https://getfirebug.com/' + '#startOpened');
  }
}
{code}

Note: To force the Browser Form Control to reload after making changes to the JavaScript file, you need to use the Reload page action from the form control's contextual menu.