Integrating the new component

Class DocumentPane is used as the GUI representation of a document in application SimplyHTML. To let the user switch between layout view and HTML view in stage 10 class DocumentPane has some additional parts:

- an editor pane to show and edit HTML code additional to the one used to show and edit the text and layout
- a JTabbedPane to hold two editor panes and to switch between the two
- a method to track the state of the new JTabbedPane and to react on state changes
- methods that handle transfer of content between the two editor panes

Initializing the two views

The JTabbedPane is initialized in the constructor of DocumentPane and a reference is kept in new class field tpView. The JTabbedPane is added to the center area of the content pane of class DocumentPane.

Adding two editor panes

A new class field htmlEditor of class DocumentPane references the new SyntaxPane. The field is initialized in the constructor of class DocumentPane with a new instance of class SyntaxPane.

The SHTMLEditorPane in class field editor and the SyntaxPane in class field htmlEditor are added to the JTabbedPane in the constructor of class DocumentPane. Now the two resulting tabs in the DocumentPane can be used to toggle display between layout view and HTML view.

Tracking tab clicks

Class DocumentPane implements interface ChangeListener by adding new method stateChanged. Class DocumentPane is added to the JTabbedPane as a ChangeListener. Method stateChanged is called by the JTabbedPane whenever its state changes (another tab has been clicked, that is).

Method stateChanged of class DocumentPane checks if the state of the JTabbedPane of class DocumentPane has changed. Every time the state of the JTabbedPane changes, the view associated to the clicked tab is opened through methods setLayoutView and setHTMLView.

Method setLayoutView

In method setLayoutView the current content of the SyntaxPane is taken (the HTML code) and transferred over to the SHTMLEditorPane. Because method setLayoutView is used when the HTML display is hidden and the layout display is shown, it removes the instance of DocumentPane as a DocumentListener from the SyntaxPane and adds it to the SHTMLEditorPane so that changes are tracked by DocumentPane accordingly.

Method setHTMLView

Method setHTMLView works the same as setLayoutView in the way that it removes and adds class DocumentPane as a DocumentListener accordingly. It takes contents of SHTMLEditorPane and adds them to the SyntaxPane too.

To see the HTML code instead of the textual representation of the document however, method setHTMLView transforms the document content, before storing the resulting HTML code in the SyntaxPane. It uses the HTMLWriter or SHTMLWriter of the editor kit of class SHTMLEditorPane to generate HTML code for the particular document. This HTML code then is set to be the initial content of the SyntaxPane.

Finally it calls method setMarks to apply syntax highlighting initially.