Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Mobile and Embedded
  4. How to display HTML content?
Forum Updated to NodeBB v4.3 + New Features

How to display HTML content?

Scheduled Pinned Locked Moved Mobile and Embedded
18 Posts 4 Posters 9.7k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Z Offline
    Z Offline
    zlutor
    wrote on last edited by
    #1

    I have to display HTML content received in a JSON object in cross platform way (Qt 5.4) but mainly on Android, WP and iOS.

    AFAIK there are three options (http://blog.qt.digia.com/blog/2014/12/10/qt-5-4-released/) but none of them works for me fine:

    • WebKit based WebView:http://doc-snapshot.qt-project.org/qt5-5.4/qml-qtwebkit-webview.html has loadHtml method that works fine on my W7 installation of Qt but no success on Android device. Anyway, Webkit is not the most future proof solution either
    • WebView:http://doc.qt.io/qt-5/qml-qtwebview-webview.html of Qt5.4 would be perfect solution if content is behind and URL but there is no 'loadHtml' method
    • WebEngineView does not really good either - too heavy, not really OK for mobile stuff and no method for loading HTML directly but via URL only

    What other solution exists I missed?

    1 Reply Last reply
    0
    • C Offline
      C Offline
      ckakman
      wrote on last edited by
      #2

      Hi,

      Check QtQuick's "Text element":http://doc.qt.io/qt-5/qml-qtquick-text.html. It supports a subset of HTML. Maybe it is good enough for you.

      1 Reply Last reply
      0
      • Z Offline
        Z Offline
        zlutor
        wrote on last edited by
        #3

        thanks for your hep, TextElement is not an option because there is simple javascript in the HTML to be displayed.

        E.g:

        @
        <html><body>[removed]var vserv_impression_urlsc65b3672 = new Array('http://img.vserv.mobi/b.gif?d=1&app=1');var vserv_click_urlc65b3672 = new Array("http:/c.vserv.mobi/delivery/ck.php?p=2__b=227362__zoneid=112218__OXLCA=1__cb=c65b3672__dc=60__cd=4-1403183890__mser=cdn__vuid=ff09b0c1f3383b9f7a11591282d5cc6883223abf__r=&app=1&trackonly=1");var vserv_click_trackersc65b3672 = new Array();var vserv_click_urlsc65b3672 = vserv_click_urlc65b3672.concat(vserv_click_trackersc65b3672);var vservImpressionCallc65b3672=0;var vservImpressionHitc65b3672=0;function vservNotifyc65b3672(notifyUrls){vservNotifyc65b3672(notifyUrls,0);}function vservNotifyc65b3672(notifyUrls,action){var shortlistc65b3672 = new Array();var counterc65b3672 = 0;vservImpressionCallc65b3672++;if(((typeof(vservIsCachingEnabled) != 'undefined' && vservIsCachingEnabled==1 && vservImpressionCallc65b3672 <= 1) || vservImpressionHitc65b3672>0 ) && (action==0 || typeof(action) == 'undefined')){return;}vservImpressionHitc65b3672++;for(var i=0; i < notifyUrls.length; i++){var vservUrlPatternc65b3672 = /^((http|https):)/;if(vservUrlPatternc65b3672.test(notifyUrls[i])) {shortlistc65b3672.push(notifyUrls[i]);}}for(var i=0; i < shortlistc65b3672.length; i++){var ImageObject = new Image();ImageObject.src = shortlistc65b3672[i];if(action == 1){ImageObject.onload = ImageObject.onerror = function(){counterc65b3672++;if(counterc65b3672 >= shortlistc65b3672.length){mraid.open('http://google.com');}}}}}function vservActionc65b3672(){vservNotifyc65b3672(vserv_click_urlsc65b3672,1);}vservNotifyc65b3672(vserv_impression_urlsc65b3672);var vservad_markupc65b3672 = '';vservad_markupc65b3672 += '<a href="[removed]vservActionc65b3672();">';vservad_markupc65b3672 += '<img src="http://img.vserv.mobi/i/320x480_f/f40dc397bd388985104032b5162ab068.jpg?112218_227362_c65b3672" alt="" border="0" />';vservad_markupc65b3672 += '</a>';removed;[removed]</body></html>
        @

        1 Reply Last reply
        0
        • C Offline
          C Offline
          ckakman
          wrote on last edited by
          #4

          If you have such "complex" html contect with JS and all, than I guess you can't avoid a proper web engine. You could deliver this content with a simple HTTP server instead of downloading it within JSON, presumably, over TCP. There more than one Qt-based projects you may want to look into:

          • https://github.com/nikhilm/qhttpserver
          • http://stefanfrings.de/qtwebapp/index-en.html
          • https://github.com/vinipsmaker/tufao
          1 Reply Last reply
          0
          • Z Offline
            Z Offline
            zlutor
            wrote on last edited by
            #5

            JSON is result of an API request, I have zero influence either on its content or the delivery model.

            I have to write a client that display content the received HTML - nothing more, nothing less...

            1 Reply Last reply
            0
            • C Offline
              C Offline
              ckakman
              wrote on last edited by
              #6

              URL doesn't mean an address that is on the web. file://some_path.html is also a URL. I'd suggest that you save the HTML somewhere and check which one of the options you listed can load it.

              1 Reply Last reply
              0
              • Z Offline
                Z Offline
                zlutor
                wrote on last edited by
                #7

                Yes, saving it into a local file came into my mind earlier, too - but it did not seemed to be optimal solution when we have such fancy tools to be used... :D

                Not to mention saving it into file raise the question where to save it - in cross-platform manner... :-(

                1 Reply Last reply
                0
                • Z Offline
                  Z Offline
                  zlutor
                  wrote on last edited by
                  #8

                  maybe "QTemporaryFile":http://doc.qt.io/qt-5/qtemporaryfile.html will be my friend...

                  1 Reply Last reply
                  0
                  • C Offline
                    C Offline
                    ckakman
                    wrote on last edited by
                    #9

                    Also check out "QStandardPaths":http://doc.qt.io/qt-5/qstandardpaths.html#StandardLocation-enum. It seems to be supported on Android. Maybe it also works on iOS and WinPhone but docs are not updated yet.

                    1 Reply Last reply
                    0
                    • W Offline
                      W Offline
                      wpurvis
                      wrote on last edited by
                      #10

                      Why do you think WebView doesn't have a loadHtml method?

                      It does: http://doc.qt.io/qt-5/qml-qtwebkit-webview.html#loadHtml-method

                      So does WebEngineView.

                      1 Reply Last reply
                      0
                      • Z Offline
                        Z Offline
                        zlutor
                        wrote on last edited by
                        #11

                        WebKit variant of WebView has that method but as I read the documentation it is neither the preferred, nor the futureproof way to go...

                        The documentation is misleading (wrong), the "'new' WebView":http://doc.qt.io/qt-5/qml-qtwebview-webview.html - as "WebEngineView":http://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html - has no such method... :-(

                        1 Reply Last reply
                        0
                        • W Offline
                          W Offline
                          wpurvis
                          wrote on last edited by
                          #12

                          bq. The documentation is misleading (wrong), the ‘new’ WebView [doc.qt.io] – as WebEngineView [doc.qt.io] – has no such method… :-(

                          I guess I don't understand what you're talking about. If you follow your own link to the WebEngineView docs, there's a loadHtml method listed:

                          http://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html#loadHtml-method

                          It's there. It works. I use it every day.

                          1 Reply Last reply
                          0
                          • O Offline
                            O Offline
                            onek24
                            wrote on last edited by
                            #13

                            -- remove --

                            due to misunderstanding =)

                            1 Reply Last reply
                            0
                            • Z Offline
                              Z Offline
                              zlutor
                              wrote on last edited by
                              #14

                              [quote author="wpurvis" date="1421678385"]bq. The documentation is misleading (wrong), the ‘new’ WebView [doc.qt.io] – as WebEngineView [doc.qt.io] – has no such method… :-(

                              I guess I don't understand what you're talking about. If you follow your own link to the WebEngineView docs, there's a loadHtml method listed:

                              http://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html#loadHtml-method

                              It's there. It works. I use it every day.

                              [/quote]

                              But that is the 'old' WebView (WebKit based, I guess).

                              The new, preferred, availaable in mobile environment is "this one":http://doc.qt.io/qt-5/qml-qtwebview-webview.html , as I linked earlier...

                              Anyway, new WebView combined with QTemporaryFile did the trick.

                              Unfortunately it works only in Android emulator but not in real device - since responseText attribute of "XMLHttpRequest":http://doc.qt.io/qt-5/qtqml-javascript-qmlglobalobject.html contains full, expected response on Android emulator but it contains ' ' only on real Nokia X device... :-(

                              Here it is the getter, I guess it should be O.K...

                              @function httpGet(request, timeout, storage, target)
                              {
                              var xmlHttp = new XMLHttpRequest();
                              xmlHttp["storage"] = storage
                              xmlHttp["target"] = target
                              xmlHttp.timeout = timeout;
                              xmlHttp.onreadystatechange = function () {
                              if (xmlHttp.DONE === xmlHttp.readyState)
                              {
                              var responseInJsonFormat = JSON.parse(xmlHttp.responseText)
                              var statusCode = responseInJsonFormat["status"]
                              var html = responseInJsonFormat["ad"]

                              var contentLocation = xmlHttp.storage.pushContent(html)
                              xmlHttp.target.url = "file://"+contentLocation
                              }
                              else
                              {
                              console.debug("too early - xmlHttp.readyState: ", xmlHttp.readyState)
                              }
                              };

                              xmlHttp.open( "GET"
                              , request
                              , true // asynchronous call
                              );
                              xmlHttp.send( null );
                              return xmlHttp
                              }@

                              1 Reply Last reply
                              0
                              • O Offline
                                O Offline
                                onek24
                                wrote on last edited by
                                #15

                                [quote author="zlutor" date="1422528259"]
                                [quote author="wpurvis" date="1421678385"]bq. The documentation is misleading (wrong), the ‘new’ WebView [doc.qt.io] – as WebEngineView [doc.qt.io] – has no such method… :-(

                                I guess I don't understand what you're talking about. If you follow your own link to the WebEngineView docs, there's a loadHtml method listed:

                                http://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html#loadHtml-method

                                It's there. It works. I use it every day.

                                [/quote]

                                But that is the 'old' WebView (WebKit based, I guess).

                                The new, preferred, availaable in mobile environment is "this one":http://doc.qt.io/qt-5/qml-qtwebview-webview.html , as I linked earlier...

                                Anyway, new WebView combined with QTemporaryFile did the trick.

                                Unfortunately it works only in Android emulator but not in real device - since responseText attribute of "XMLHttpRequest":http://doc.qt.io/qt-5/qtqml-javascript-qmlglobalobject.html contains full, expected response on Android emulator but it contains ' ' only on real Nokia X device... :-(

                                Here it is the getter, I guess it should be O.K...

                                @function httpGet(request, timeout, storage, target)
                                {
                                var xmlHttp = new XMLHttpRequest();
                                xmlHttp["storage"] = storage
                                xmlHttp["target"] = target
                                xmlHttp.timeout = timeout;
                                xmlHttp.onreadystatechange = function () {
                                if (xmlHttp.DONE === xmlHttp.readyState)
                                {
                                var responseInJsonFormat = JSON.parse(xmlHttp.responseText)
                                var statusCode = responseInJsonFormat["status"]
                                var html = responseInJsonFormat["ad"]

                                var contentLocation = xmlHttp.storage.pushContent(html)
                                xmlHttp.target.url = "file://"+contentLocation
                                }
                                else
                                {
                                console.debug("too early - xmlHttp.readyState: ", xmlHttp.readyState)
                                }
                                };

                                xmlHttp.open( "GET"
                                , request
                                , true // asynchronous call
                                );
                                xmlHttp.send( null );
                                return xmlHttp
                                }@[/quote]

                                Have you tried this on iOS?

                                1 Reply Last reply
                                0
                                • Z Offline
                                  Z Offline
                                  zlutor
                                  wrote on last edited by
                                  #16

                                  [quote author="onek24" date="1422532946"]
                                  Have you tried this on iOS?
                                  [/quote]

                                  No, unfortunately not - I have no access to any iOS thingy...

                                  1 Reply Last reply
                                  0
                                  • Z Offline
                                    Z Offline
                                    zlutor
                                    wrote on last edited by
                                    #17

                                    How can I determine user agent - e.g. the one used by "WebView":http://doc.qt.io/qt-5/qml-qtwebview-webview.html - in Qt5.4?

                                    1 Reply Last reply
                                    0
                                    • Z Offline
                                      Z Offline
                                      zlutor
                                      wrote on last edited by
                                      #18

                                      Mea maxima culpa, it work on real Android device, too!

                                      What a lame error I made - WiFi was off... :D

                                      1 Reply Last reply
                                      0

                                      • Login

                                      • Login or register to search.
                                      • First post
                                        Last post
                                      0
                                      • Categories
                                      • Recent
                                      • Tags
                                      • Popular
                                      • Users
                                      • Groups
                                      • Search
                                      • Get Qt Extensions
                                      • Unsolved