Skip to main content

Style Editor application

Creating a Style Editor

MathFlow Style Editor components can be used within Java applications. There are two versions of the Style Editor component. Note: These pages linked below are offered here for your convenience. If you have installed the MathFlow SDK, it's better if you refer to the copy that was installed with the SDK. These are located in the javadocs folder, which for Windows is specifically C:/Program Files (x86)/MathFlow SDK/2.1/java/docs/javadoc/com/dessci/mathflow/sdk/editor/

The StyleEditorFrame components can be embedded either directly in a Java application or opened in a separate, non-modal window. The StyleEditorDialog components can be opened in a separate modal window. To create an instance of either one of these, the constructor must be called with two or more of the following objects:

  • (Required) Host Application for callbacks and notifications.

  • (Required) License key or FlexNet license file.

  • (Optional) StyleConfigInfo. More information in the javadocs folder, at /webeq3/app/.

  • (Optional) OptionsInfo, which allows you to save the General Editing Preferences to an external file to persist user settings. More information in the javadocs folder, at /webeq3/util/.

Sample Style Editor application

Overview, Style Editor application

Included in the MathFlow SDK is a sample Style Editor application, located at


There is a bat file to run the demo application:


This sample application illustrates how to include the MathFlow SDK Style Editor in your own application. In this case, the StyleEditorDialog class is used to create a modal pop-up MathML editor:


This sample application does the following:

  • Read MathML from a file

  • Write MathML to a file

  • Send MathML to the Style Editor

  • Retrieve MathML from the Style Editor

  • Retrieve an image of the MathML equation from the Style Editor

  • Display the current MathML

  • Display an image of the MathML equation from the Style Editor once OK has been clicked in the editor

  • Display an about box

Style Editor classes

The following classes have been written for the sample Style Editor application:

  • StyleEditorDemoApplication: The host application that launches the customized StyleEditorDialog.

  • SampleStyleEditorDialog: A subclass of the StyleEditorDialog class customized for this application.

  • SampleStyleEditorAboutBox: A subclass of the StyleEditorAboutBox class customized for this application.


The StyleEditorDemoApplication user interface consists of the following:

  • File Menu

    • Open MathML…

    • Save MathML…

    • Quit

  • Help Menu

    • About MathFlow SDK Style Editor

  • MathML source panel

  • Preview image panel

  • Edit Equation… button


NOTE: The code discussed in this topic can be found in, located at <[MF] installation folder>/java/samples/com/yourcompany/samplecode/editor/

  1. The application's constructor sets the application title, font preferences and calls initUI() to create the application's UI elements. It also changes the cursor to a wait cursor. For more information on setting the font preferences, see Java rendering engine.

  2. The createEditor method creates two objects, which are then passed into the constructor of the SampleStyleEditorDialog:

    • Creates a StyleConfigurationInfo object to indicate which features are turned on or off in the editor. You can also set the type of end-user help system in this object. See the sample code in (mentioned above) and End-user help options for choosing and setting your help system.

    • Sets the key string, which is either the path to a FlexNet license file or a license key string assigned by Wiris. See the sample code in (mentioned above) and MathFlow SDK licenses for help setting the license string and more information about the license types.

  3. The method showEditor checks if createEditor() has been successful and displays the Style Editor as a dialog.

  4. The updateSrcAndImage method retrieves the MathML from the editor using the editor's getMathML method, and displays it in the MathML source panel. The method also retrieves an image of the equation, using the editor's getEquationImage method, as well as its size using the editor's getPreferredWidthAt and getPreferredHeightAt methods. The image is then displayed in the Image preview panel.

  5. The notifyEditorShown method is used by the editorDialog to notify the host application when the editor has been shown. The host application then resets the cursor back to its default state.

  6. The host application can also display a customized About box. See, located at <[MF] installation folder>/java/samples/com/yourcompany/samplecode/editor/


The SampleStyleEditorDialog class extends the StyleEditorDialog class provided in the MFStyleEditor.jar file. The constructor for this class requires the following:

  • A reference to the host application

  • A license key string, which can either be a path to the license file or a key string provided by Wiris. See MathFlow SDK licenses.

  • A configuration object to indicate which built-in features to turn on or off

One of the host application's functions is to request the MathML of the equation in the Style Editor. This functionality is already provided by the StyleEditor class; therefore, creating a method to access it is straightforward.

public String getMathML(){ return getFormattedMathML(Equation.PRESENTATION, Equation.PRETTY_PRINT, 0, "", Equation.ENTITY_NAMES); }

Similarly, the host application needs a way to send MathML to the Style Editor. Again, this functionality is already provided by the StyleEditor class. Note you will need to reset the undo stack since it is a new equation.

public void setMathML(String mathml) { super.setMathML(mathml); // we want to clear the undo stack from previous editing operations clearUndoStack(); }

The host application needs a way to retrieve an image of the MathML equation in the Style Editor. This functionality is already provided by the class. In this case, only the point size and background color of the equation are passed in, but there are other parameters that can be used to control the look of an equation.

public Image getEquationImage(int pointsize, String bgcolor) { return getEquationImage(pointsize, 0, "black", bgcolor, "left", "top", 0, 0, 0, 0); }

It is also possible to customize the about box to add additional information. See the code for the customized about box in

protected void showAboutBox() { if (aboutBox == null) { aboutBox = new SampleStyleEditorAboutBox(this); } Rectangle r1 = getBounds(); Rectangle r2 = aboutBox.getBounds(); aboutBox.setLocation(r1.x + (r1.width - r2.width) / 2, r1.y + (r1.height - r2.height) / 2);; }

Finally, when the Style Editor is closed, it calls back to the host application to tell it to update the MathML Source and Preview Image parts of its screen.

protected void closeEditorWindow() { if (getCallbackInfo() == COMPLETED) { ownerApp.updateSrcAndImage(); } // you MUST write out the users preferences or any changes will be lost writeExportOptions(); hide(); }