Customizing WebApp Component Frameworks

Custom documentation frameworks can be re-used between the Oxygen XML Editor standalone distribution and the WebApp Component.

The custom frameworks that are designed for documentation purposes (such as DITA, DocBook, or TEI) can be reused interchangeably between the Oxygen XML Editor standalone distribution and the WebApp Component. However, some fine-tuning might be necessary to maximize the editing experience for your content authors. The advantages of using a common framework include:

Easier development and testing, since you can test most of the functionality in the standalone version of Oxygen XML Editor using advanced tools such as the CSS Inspector, CSS Editor, or the Document Type Association customization dialog box.
Uniform experience across multiple Oxygen XML Editor distributions.
Ability to reuse previously developed frameworks.

Developing and Testing a Framework Using the WebApp Add-on

The following procedures assumes that you have access to an Oxygen XML Editor standalone installation. This is not a mandatory requirement, but rather a way to speed up the development process.

Use the standalone installation of Oxygen XML Editor to customize a specific framework for whatever type of documentation that you require. Modifications made to the framework are instantly visible in the standalone version of Oxygen XML Editor, but if you want to preview them in the WebApp Component, proceed to the next step.
Run the WebApp Component using the add-on distribution and test the framework.
Note: The changes that you make to your framework will not automatically be reflected in the WebApp Component if it was already running. To see the results of changes, close the server using the Close and stop server button and start it again.

Deploying a Framework

Copy your customized framework into the bundle-frameworks/oxygen-frameworks/ folder of the oXygen XML SDK project.
Build the SDK project and deploy it.

Customization Tips

If you want to use CSS rules that only apply when the framework is used in the WebApp Component, use the following media query:
```
@media oxygen AND (platform:webapp) {
 ... 
}
```
In the web folder of each framework, you can add a framework.js file that calls the JavaScript API to implement custom editing actions. The possible use cases include the following:
- Create custom actions and add them to the toolbar or contextual menu. For more details, see the JS custom action tutorial.
- Create custom form controls. For more details, see the JS form control tutorial.
- Add additional views. For more details, see the JS custom view tutorial.
If the framework contains Author mode operations (Java implementations of the ro.sync.ecss.extensions.api.AuthorOperation interface), they can be enabled to be used by the WebApp Component using the ro.sync.ecss.extensions.api.WebappCompatible annotation.
Note: Author mode operations that use Java Swing components to display a graphical interface are not compatible with the WebApp Component and they should not be annotated.
The WebApp Component continuously validates the XML documents using the default validation scenarios defined at framework level. Only the validation units that have the Automatic Validation option selected in the Document Type Association customization dialog box will be used (this option is set in the Edit Scenario dialog box that is accessed by editing a scenario in the Validation subtab when editing a document type).