This discussion is archived
5 Replies Latest reply: Jun 13, 2012 6:41 PM by PatrickMartin RSS

Using WebEngine + WebView as rich HTML control?

JohnHendrikx Pro
Currently Being Moderated
Has anyone tried using WebEngine/WebView to create (static) content which can mix text with images?

What I would want is a reflow capable control where I can put in styled text (different styles, sizes, fonts) and some Images to go along with it and have the text nicely reflow around the images. Since HTML has been capable of doing this for ages, and since I donot think even a new RichText control will be able to mix images and text (and certainly not offer all the other features in HTML, like tables, etc..), I think the WebView could fill this gap.

Getting the HTML page itself inside the control is easy, using the loadContent methods... but what about the Images? I would need some kind of hook to supply Images (directly from a database or from memory, no intermediate URL downloading step) to the WebEngine, but there doesn't seem to be one.

I suppose I could set up a local webserver and point my 'img src' tags to that to get what I want, but perhaps there is an easier way?

Let me know.
  • 1. Re: Using WebEngine + WebView as rich HTML control?
    Narayan Pro
    Currently Being Moderated
    Java has so rich capability that you can do anything. To load the images in WebView you need to first must make sure that the image must be in your application package or on other resources.

    I think you problem is to load the images in Webview which is just inside your application. Let's assume you app directory is like this
    <app name>
    +images
         -europa.png
    +mypack
         -Main.java
         -Support.java
         -GUI.java
    And now to load the image "europa.png" with in the Main.java containing WebView we can do like this
         WebView view = new WebView();
         String url = getClass().getResource("../images/europa.png").toExternalForm();
         view.getEngine().loadContent("<html><body>Hello<img src=\""+url+"\" /></body></html>");
    Thanks
    Narayan
  • 2. Re: Using WebEngine + WebView as rich HTML control?
    JohnHendrikx Pro
    Currently Being Moderated
    This is close to what I want I think...

    However, my Images are not resources, they are dynamic and are stored in a database (or they are in memory already).

    Still this approach may work if I can add a special URL handler for this. I didn't realize JavaFX would allow any kind of URL in the img src tags :)
  • 3. Re: Using WebEngine + WebView as rich HTML control?
    Narayan Pro
    Currently Being Moderated
    For the part of Database. I think your images is saved in "Bytes" or BLOB order so to make them available in you control then you need to first query that image and bring the ImageBytes and Save them via ImageIO class in some temporary directory of the operating system. Then access that file from the webview by using prefix "file:///"

    For eg. If you save the file in C:\temp\test.png
    then the uri for the webview html will be file:///c:/temp/test.png

    Thanks
    Narayan
  • 4. Re: Using WebEngine + WebView as rich HTML control?
    jsmith Guru
    Currently Being Moderated
    I placed some info in a post on this thread on how to override the default url handler to add your own protocol handler (it's the longish post with a few options detailed in it) - using this info, you could add your own url handler for the database images.

    Setting html content with setContent() does never show images "Setting html content with setContent() does never show images"
  • 5. Re: Using WebEngine + WebView as rich HTML control?
    PatrickMartin Newbie
    Currently Being Moderated
    I've been kicking around the idea of pair up the WebView/WebEngine components with an embedded http server within my application. I was considering something like Jetty. That's probably overkill for your purposes.

    Since you're only talking about static images residing in a database, I think that you can embed the image directly into the HTML as a data object with the appropriate mime type.

    This link has a discussion on it:

    http://rifers.org/blogs/gbevin/2005/4/11/embedding_images_inside_html

    and so does this:

    http://www.campaignmonitor.com/blog/post/1761/embedding-images-in-email/

    If you need an example of this, just check your email SPAM. Those guys are experts.

    I think it goes something like this:

    <img src="data:image/jpeg;base64,<base 64 content stream here....>"/>

    - Pat

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points