6 Replies Latest reply: Oct 30, 2013 4:57 PM by Kydo RSS

    WebView configuration

    MiPa
      Hi,
      I'd like to know whether it is possible to configure a WebView in such a way that it
      1. computes its preferred height depending on its content so that this can be used
      for layout purposes and
      2. has a transparent background, so that some html content can be rendered over
      something else.
      I tried it but I was not successful with it.
        • 1. Re: WebView configuration
          jsmith
          I encountered the same issues trying to get a transparent background and have nothing to help there.

          For the size computations you can determine the size and width of a document in the webview by having the webengine execute some JavaScript to request it.
          engine.executeScript("document.width")
          engine.executeScript("document.height")
          To get an accurate readout of the above, look it up in a ChangeListener installed on engine.documentProperty().
          Once you know the values you can set the pref height and (if desired) width of the webview.

          Continuously monitoring the height and updating the preferences as needed is painful, so this technique works best for something which doesn't need to change in size after the initial rendering (like an html date picker for instance).
          You can also use stuff like yui3 reset css (http://yuilibrary.com/yui/docs/cssreset/) to remove margins and paddings from inside the webview to get a tight fit of content if desired.

          It would be perhaps better to subclass WebView and override some functions to perform a custom layout (or just get the appropriate functionality implemented in WebView), but WebView is final, so this was the best I could come up with for now.
          • 2. Re: WebView configuration
            MiPa
            Thanks a lot. This took me a little bit further although I am feeling like standing on my head.

            In case you are interested. You can achieve a kind of transparency effect by playing with the blend modes of the web view. If you have a web page with a white background and black letters, you can achieve a transparency effect by setting the blend mode to MULTIPLY.
            webView.setBlendMode(BlendMode.MULTIPLY);
            • 3. Re: WebView configuration
              jsmith
              Executing a script to to get the document width and height so that the preferred size of the webview can be calculated from the document size no longer works in 2.2 as these javascript variables are no longer exported by the underlying webkit engine (see the now resolved/fixed feature request: https://bugs.webkit.org/show_bug.cgi?id=72591 "Remove document.width / document.height").
              • 4. Re: WebView configuration
                jsmith
                As these were great questions and no satisfactory answer has been proposed for either of them, I filed a couple of WebView tweak requests for these features:

                http://javafx-jira.kenai.com/browse/RT-25004 "Allow for transparent backgrounds in WebView"
                http://javafx-jira.kenai.com/browse/RT-25005 "Automatic preferred sizing of WebView"
                • 5. Re: WebView configuration
                  ascuccimarra
                  Just in case this helps,
                  I'm using

                  String heightText = msgField.getEngine().executeScript("window.getComputedStyle(document.body, null).getPropertyValue('height')").toString();
                  double height = Double.valueOf(heightText.replace("px", ""));

                  Alvaro
                  • 6. Re: WebView configuration
                    Kydo

                    I see http://javafx-jira.kenai.com/browse/RT-25004 "Allow for transparent backgrounds in WebView" has a related prerequisite case https://javafx-jira.kenai.com/browse/RT-29186, which is fixed for Java8.

                     

                    In it's description is mentioned the following: "Furthermore, for those users who are comfortable using internal APIs, this will immediately make transparent background possible in WebView"

                     

                    I'm trying to figure out what that internal API would be, but no luck so far. Tried following the links to the commits in the comments to get an idea, but they go nowhere (for me at least).

                     

                    Anyone has an idea?