Articles Projects Tips Downloads Contacts About

Fraction view in the JEditorPane/JTextPane.
By Stanislav Lapitsky

Math operations representations in editors could require more complicated views to be represented properly. One of the views examples is FractionView. It can be used as is or the code can be basement for creation of complex views to represent integral, sum of series etc. views or some combinations of the views. The main common characteristic of all the views is that they are inline views. In other words they are placed in paragraph’s rows as normal text or label and flow to next/previous row when user types/removes text before them.

Fraction model data in document was simplified. For the full featured code it would be better to create a separate BranchElement subclass and add it as a child of paragraph. It would allow us to create complicated structures e.g. nested fractions but the article illustrates simplest approach so the fraction in model is represented by special attribute. Numerator and denominator are separated by line break char \r. Thus to insert a fraction ˝ we just insert string “1\r2” with the fraction attribute.

        final SimpleAttributeSet attrs=new SimpleAttributeSet();

        final SimpleAttributeSet normalAttrs=new SimpleAttributeSet();
        setEditorKit(new FractionEditorKit());
        StyledDocument doc=(StyledDocument) App.this.getDocument();
        try {
            doc.insertString(doc.getLength(), "Normal text ", normalAttrs);
            doc.insertString(doc.getLength(), "90 * a\r150 * b", attrs);
            doc.insertString(doc.getLength(), " = ", normalAttrs);
            doc.insertString(doc.getLength(), "3 * a\r5 * b", attrs);
        catch (BadLocationException ex) {

The result looks like on the picture:

Now the implementation of the fraction view itself. When paragraph lays out rows we checks whether a row contains elements with the fraction attribute. If yes we create artificial FractionView making the fraction labels children of the FractionView. We break all the children to top and bottom vies according to position of ‘\r’. All the views methods to position caret, navigating, paining are adapted to use top and bottom lists for numerator and denominator.

The fraction.jar library contains full source code so the code can be reused to implement e.g. integral view or a more complicated view with fractions in numerator or denominator.

Back to Table of Content