JEditorPane: HTML Layout Broken

Question

I am rendering some images that are layered in a JEditorPane. I've read that JEditorPane is pretty rocky at best, however I am hoping that this is an issue with either my HTML code or something else. Here's how my content looks in the browser:

And how it looks in a JScrollBar(JEditorPane):

The HTML code: http://pastebin.com/EixG3WLH

The Java code:

File f = new File("index.html");
JEditorPane jep = new JEditorPane(f.toURI().toURL());
JScrollPane sp = new JScrollPane(jep);

JFrame frame = new JFrame();
frame.add(sp);
jep.setEditable(false);

frame.setVisible(true);
frame.setSize(500, 500);
frame.setTitle(wpj.getParse().getTitle());

I'd really rather not use FlyingSaucer if this issue can be resolved in a JEditorPane!

Answer 1

JEditorPane is not so good with CSS absolute positioning. I think you are trying to achieve more with JEditorPane than it is capable of delivering.

Answer 2

You can do it... but it's not really simple... because JEditorPane doesn't have CSS absolute positioning... so, you must first at all, recognize if some element had the position:absolute or position:fixed attribute extending the ViewFactory, something like:

public class ExtendedHTMLEditorKit extends HTMLEditorKit{
//.... other code here
    public class MyHTMLFactory extends HTMLFactory{
      //other code here
      @Override
      public View create(Element elem) {
          if (isLayered(elem)){ //it means, it has position attribute
             return new PositionedView(elem);
          }
          else 
            return super.create(elem);
      }

      boolean isLayered(Element elem){
          SimpleAttributeSet sas = new  SimpleAttributeSet(elem);
          StyleSheet styles = (HTMLDocument elem.getDocument).getStyleSheet();
          Tag tag = element.getAttributes().getAttribute(AttributeSet.NameAttribute);
          sas.addAttributes(styleSheet.getRule(tag, element));
          return sas.isDefined("position") 
            && !sas.getAttribute("position").toString().equalsIgnorecase("static");
      }
    }
}

In this case, we need then to build a correct view for your element... I don't know if you're only positioning images (in this case, it could be simple) or a lot of things... I can see on your code, you're using divs...

Let me explain more or less what I do: I've created a ComponentView, and returning as a component a new JEditorPane, where I put the innerCode of the original element... and after that, move it on correct position of parent editor...

To synchronize this is really dificult to allow edit, but if you only whant to use them to display, it must be more simple...

ok.. the view must be like:

public class PositionedView extends ComponentView{
   private JEditorPane view;
   private JEditorPane parent;

    @Override
    public Component createComponent(){
       if (view == null){
         view = new JEditorPane();
       }
       String innerText = dumpInnerText(getElement());
       view.setText(innerText);
       view.setLocation(getAbsoluteX(), getAbsoluteY());
       parent.add(view);
    }

    @Override
    public void setParent(View parent) {
      if (parent != null) {

        java.awt.Container host = parent.getContainer();
        if (host != null && host instanceof JEditorPane) {
            parent = (JEditorPane) host;
        }
      }

    super.setParent(parent);
   }

    protected int getAbsoluteX() {
     //search for the attribute left or right and calculate the position over parent
    }

    protected int getAbsoluteY(){
     //search for the attribute top or bottom and calculate the position over parent
    }

    protected String dumpInnerText(Element element){
     //there are several ways to do it, I used my own reader/writer, 
     //because I've need add special tags support...
    }
}

I hope this helps you... Ah! there are another thing: if you do this, you must secure your view is not opaque, and it means, all the view elements, on the other case, you will have a blank rect for your elements.

Another thing, you maybe need to check for the correct dimension of the view... do as getAbsoluteX / getAbsoluteY to obtain width / height attributes.