locked
Paginating HTML content in Windows store app? RRS feed

  • Question

  • I am building an ebook manager app for the windows store using Windows 8.1 and Visual Studio 2013 preview. I have a new webview control that is able to resolve uri's and load the html and css.
    However there is a lot of data in one html file and I would like to paginate it someway. My Questions are:

    Is there a way to do this with the stream in C#?

    Are there any examples out there on paginating HTML content?

    Is there a way to measure programmatically how much screen real estate will be used by a particular piece of HTML?

    I have scoured the web without much luck.

    Any suggestions or guidance are greatly appreciated!

    Thanks,

    James Pack


    James Mason Pack

    Friday, July 19, 2013 6:26 PM

Answers

  • Hi James,

    We do not support the feature you are asking for which would be to be able to flow content from one webview to another container. Its an interesting scenario, but was not in scope for this release.

    My recommendation is to do the pagination on the html side. Trident has support for connected frames, which enables you to flow content from one frame to another. That's what we did for the demo in John Hazen's talk at build.

    A simple paginator example would be:

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            function loadContent() {
                var contentSourceElement = document.getElementById("s1-content-source");
                var url = document.URL;
                var i = url.lastIndexOf("?");
                var u = url.substring(i + 1);

                contentSourceElement.addEventListener("load", function () {
                    var element = document.getElementById("s1-flexbox");
                    element.innerHTML = "";
                    var regionElement = document.createElement("div");
                    regionElement.className = "s1-container";
                    element.appendChild(regionElement);

                    while (regionElement.msRegionOverflow === "overflow") {
                        regionElement = document.createElement("div");
                        regionElement.className = "s1-container";
                        element.appendChild(regionElement);
                    }
                    document.getElementById("banner").style.display = "none";
                });
                setImmediate(function () {
                    contentSourceElement.src = u;
                });
            }

        </script>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #s1-content-source {
                -ms-flow-into: content;
            }

            #s1-scroll-view {
                width: 100%;
                height: 100%;
                overflow-y: hidden;
                overflow-x: auto;
            }

            #s1-flexbox {
                height: calc(100% - 30px);
                display: flex;
            }

            .s1-container {
                -ms-flow-from: content;
                width: 40vw;
                max-width: 780px;
                height: 100%;
                border-left: 1px solid #ccc;
                padding: 10px;
                flex: 0 0 auto;
            }

            #banner {
                border: solid 1px #808080;
                background-color: #83adef;
                ;
                left: calc(50%- 100px);
                top: calc(50% - 50px);
                padding: 50px 100px;
                font-family: 'Segoe UI';
            }
        </style>
    </head>
    <body onload="loadContent()">
        <div id="s1-scroll-view">
            <iframe id="s1-content-source"></iframe>
            <div id="s1-flexbox"></div>
        </div>
        <div id="banner">
            Paginating...
        </div>
    </body>
    </html>

    It takes the uri for the content to paginate as the querystring. Eg paginator.htm?http://foo.com/bar.html

    Sam

    Friday, July 19, 2013 10:34 PM

All replies

  • Hi James,

    We do not support the feature you are asking for which would be to be able to flow content from one webview to another container. Its an interesting scenario, but was not in scope for this release.

    My recommendation is to do the pagination on the html side. Trident has support for connected frames, which enables you to flow content from one frame to another. That's what we did for the demo in John Hazen's talk at build.

    A simple paginator example would be:

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            function loadContent() {
                var contentSourceElement = document.getElementById("s1-content-source");
                var url = document.URL;
                var i = url.lastIndexOf("?");
                var u = url.substring(i + 1);

                contentSourceElement.addEventListener("load", function () {
                    var element = document.getElementById("s1-flexbox");
                    element.innerHTML = "";
                    var regionElement = document.createElement("div");
                    regionElement.className = "s1-container";
                    element.appendChild(regionElement);

                    while (regionElement.msRegionOverflow === "overflow") {
                        regionElement = document.createElement("div");
                        regionElement.className = "s1-container";
                        element.appendChild(regionElement);
                    }
                    document.getElementById("banner").style.display = "none";
                });
                setImmediate(function () {
                    contentSourceElement.src = u;
                });
            }

        </script>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #s1-content-source {
                -ms-flow-into: content;
            }

            #s1-scroll-view {
                width: 100%;
                height: 100%;
                overflow-y: hidden;
                overflow-x: auto;
            }

            #s1-flexbox {
                height: calc(100% - 30px);
                display: flex;
            }

            .s1-container {
                -ms-flow-from: content;
                width: 40vw;
                max-width: 780px;
                height: 100%;
                border-left: 1px solid #ccc;
                padding: 10px;
                flex: 0 0 auto;
            }

            #banner {
                border: solid 1px #808080;
                background-color: #83adef;
                ;
                left: calc(50%- 100px);
                top: calc(50% - 50px);
                padding: 50px 100px;
                font-family: 'Segoe UI';
            }
        </style>
    </head>
    <body onload="loadContent()">
        <div id="s1-scroll-view">
            <iframe id="s1-content-source"></iframe>
            <div id="s1-flexbox"></div>
        </div>
        <div id="banner">
            Paginating...
        </div>
    </body>
    </html>

    It takes the uri for the content to paginate as the querystring. Eg paginator.htm?http://foo.com/bar.html

    Sam

    Friday, July 19, 2013 10:34 PM
  • I have been fooling with that all day I can't seem to get it to work. Thanks, for your response though. So there is no way to deterministically figure out how much space a piece of html will take?

    James Mason Pack

    Sunday, July 21, 2013 12:56 AM