Windows Dev Center

Creare codice completo per un lettore di blog

Questo argomento include l'esempio di codice completo usato nell'esercitazione Creare un lettore di blog.

In questo argomento sono contenute le sezioni seguenti:

Percorso di download

Questo esempio non è disponibile per il download.

Tecnologie

Linguaggi di programmazioneHTML, JavaScript
Modelli di programmazioneWindows Runtime

Requisiti

Client minimo supportatoWindows 8
Server minimo supportatoWindows Server 2012
SDK minimo necessarioMicrosoft Visual Studio Express 2012 per Windows 8

Visualizzare il codice (JavaScript)

data.js


(function () {
    "use strict";

    // Set up array variables
    var dataPromises = [];
    var blogs;

    // Create a data binding for our ListView
    var blogPosts = new WinJS.Binding.List();

    // Process the blog feeds
    function getFeeds() {
        // Create an object for each feed in the blogs array
        // Get the content for each feed in the blogs array
        // Return when all asynchronous operations are complete

        // Create an object for each feed in the blogs array
        blogs = [
        {
            key: "blog1",
            url: 'http://blogs.windows.com/windows/b/windowsexperience/atom.aspx',
            title: 'tbd', updated: 'tbd',
            acquireSyndication: acquireSyndication, dataPromise: null
        },
        {
            key: "blog2",
            url: 'http://blogs.windows.com/windows/b/extremewindows/atom.aspx',
            title: 'tbd', updated: 'tbd',
            acquireSyndication: acquireSyndication, dataPromise: null
        },
        {
            key: "blog3",
            url: 'http://blogs.windows.com/windows/b/business/atom.aspx',
            title: 'tbd', updated: 'tbd',
            acquireSyndication: acquireSyndication, dataPromise: null
        },
        {
            key: "blog4",
            url: 'http://blogs.windows.com/windows/b/bloggingwindows/atom.aspx',
            title: 'tbd', updated: 'tbd',
            acquireSyndication: acquireSyndication, dataPromise: null
        },
        {
            key: "blog5",
            url: 'http://blogs.windows.com/windows/b/windowssecurity/atom.aspx',
            title: 'tbd', updated: 'tbd',
            acquireSyndication: acquireSyndication, dataPromise: null
        },
        {
            key: "blog6",
            url: 'http://blogs.windows.com/windows/b/springboard/atom.aspx',
            title: 'tbd', updated: 'tbd',
            acquireSyndication: acquireSyndication, dataPromise: null
        },
        {
            key: "blog7",
            url: 'http://blogs.windows.com/windows/b/windowshomeserver/atom.aspx',
            title: 'tbd', updated: 'tbd',
            acquireSyndication: acquireSyndication, dataPromise: null
        },
        {
            key: "blog8",
            url: 'http://blogs.windows.com/windows_live/b/developer/atom.aspx',
            title: 'tbd', updated: 'tbd',
            acquireSyndication: acquireSyndication, dataPromise: null
        },
        {
            key: "blog9",
            url: 'http://blogs.windows.com/ie/b/ie/atom.aspx',
            title: 'tbd', updated: 'tbd',
            acquireSyndication: acquireSyndication, dataPromise: null
        },
        {
            key: "blog10",
            url: 'http://blogs.windows.com/windows_phone/b/wpdev/atom.aspx',
            title: 'tbd', updated: 'tbd',
            acquireSyndication: acquireSyndication, dataPromise: null
        },
        {
            key: "blog11",
            url: 'http://blogs.windows.com/windows_phone/b/wmdev/atom.aspx',
            title: 'tbd', updated: 'tbd',
            acquireSyndication: acquireSyndication, dataPromise: null
        }];

        // Get the content for each feed in the blogs array
        blogs.forEach(function (feed) {
            feed.dataPromise = feed.acquireSyndication(feed.url);
            dataPromises.push(feed.dataPromise);
        });

        // Return when all asynchronous operations are complete
        return WinJS.Promise.join(dataPromises).then(function () {
            return blogs;
        });


    }

    function acquireSyndication(url) {

        // Call xhr for the URL to get results asynchronously
        return WinJS.xhr(
            {
                url: url,
                headers: { "If-Modified-Since": "Mon, 27 Mar 1972 00:00:00 GMT" }

            });

    }

    function getBlogPosts() {
        // Walk the results to retrieve the blog posts
        getFeeds().then(function () {
            // Process each blog
            blogs.forEach(function (feed) {
                feed.dataPromise.then(function (articlesResponse) {

                    var articleSyndication = articlesResponse.responseXML;

                    if (articleSyndication) {
                        // Get the blog title 
                        feed.title = articleSyndication.querySelector("feed > title").textContent;

                        // Use the date of the latest post as the last updated date
                        var published = articleSyndication.querySelector("feed > entry > published").textContent;

                        // Convert the date for display
                        var date = new Date(published);
                        var dateFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
                           "month.abbreviated day year.full");
                        var blogDate = dateFmt.format(date);
                        feed.updated = "Last updated " + blogDate;

                        // Get the blog posts
                        getItemsFromXml(articleSyndication, blogPosts, feed);
                    }
                    else {
                        
                        // There was an error loading the blog. 
                        feed.title = "Error loading blog";
                        feed.updated = "Error"; 
                        blogPosts.push({
                            group: feed,
                            key: "Error loading blog",
                            title: feed.url,
                            author: "Unknown",
                            month: "?",
                            day: "?",
                            year: "?",
                            content: "Unable to load the blog at " + feed.url
                        });

                    }
                });
            });
        });

        return blogPosts;

    }

    function getItemsFromXml(articleSyndication, bPosts, feed) {

        // Get the info for each blog post
        var posts = articleSyndication.querySelectorAll("entry");

        // Process each blog post
        for (var postIndex = 0; postIndex < posts.length; postIndex++) {
            var post = posts[postIndex];

            // Get the title, author, and date published
            var postTitle = post.querySelector("title").textContent;
            var postAuthor = post.querySelector("author > name").textContent;
            var postPublished = post.querySelector("published").textContent;

            // Convert the date for display
            var postDate = new Date(postPublished);
            var monthFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
                "month.abbreviated");
            var dayFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
                "day");
            var yearFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
                "year.full");
            var blogPostMonth = monthFmt.format(postDate);
            var blogPostDay = dayFmt.format(postDate);
            var blogPostYear = yearFmt.format(postDate);

            // Process the content so it displays nicely
            var staticContent = toStaticHTML(post.querySelector("content").textContent);

            // Store the post info we care about in the array
            bPosts.push({
                group: feed,
                key: feed.title,
                title: postTitle,
                author: postAuthor,
                month: blogPostMonth.toUpperCase(),
                day: blogPostDay,
                year: blogPostYear,
                content: staticContent
            });
        }

    }


    var list = getBlogPosts();

    var groupedItems = list.createGrouped(
        function groupKeySelector(item) { return item.group.key; },
        function groupDataSelector(item) { return item.group; }
    );



    WinJS.Namespace.define("Data", {
        items: groupedItems,
        groups: groupedItems.groups,
        getItemReference: getItemReference,
        getItemsFromGroup: getItemsFromGroup,
        resolveGroupReference: resolveGroupReference,
        resolveItemReference: resolveItemReference
    });

    // Get a reference for an item, using the group key and item title as a
    // unique reference to the item that can be easily serialized.
    function getItemReference(item) {
        return [item.group.key, item.title];
    }

    // This function returns a WinJS.Binding.List containing only the items
    // that belong to the provided group.
    function getItemsFromGroup(group) {
        return list.createFiltered(function (item) { return item.group.key === group.key; });
    }

    // Get the unique group corresponding to the provided group key.
    function resolveGroupReference(key) {
        for (var i = 0; i < groupedItems.groups.length; i++) {
            if (groupedItems.groups.getAt(i).key === key) {
                return groupedItems.groups.getAt(i);
            }
        }
    }

    // Get a unique item from the provided string array, which should contain a
    // group key and an item title.
    function resolveItemReference(reference) {
        for (var i = 0; i < groupedItems.length; i++) {
            var item = groupedItems.getAt(i);
            if (item.group.key === reference[0] && item.title === reference[1]) {
                return item;
            }
        }
    }


})();


default.css



#contenthost {
    height: 100%;
    width: 100%;    
    background-color: #0A2562;
}

.fragment {
    /* Define a grid with rows for a banner and a body */
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 128px 1fr;
    display: -ms-grid;
    height: 100%;
    width: 100%;
}

    .fragment header[role=banner] {
        /* Define a grid with columns for the back button and page title. */
        -ms-grid-columns: 120px 1fr;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
    }

        .fragment header[role=banner] .win-backbutton {
            margin-left: 39px;
            margin-top: 59px;
        }

        .fragment header[role=banner] .titlearea {
            -ms-grid-column: 2;
            margin-top: 37px;
        }

            .fragment header[role=banner] .titlearea .pagetitle {
                width: calc(100% - 20px);
            }

    .fragment section[role=main] {
        -ms-grid-row: 2;
        height: 100%;
        width: 100%;
    }

@media screen and (-ms-view-state: snapped) {
    .fragment header[role=banner] {
        -ms-grid-columns: auto 1fr;
        margin-left: 20px;
    }

        .fragment header[role=banner] .win-backbutton {
            margin: 0;
            margin-right: 10px;
            margin-top: 76px;
        }

            .fragment header[role=banner] .win-backbutton:disabled {
                display: none;
            }

        .fragment header[role=banner] .titlearea {
            -ms-grid-column: 2;
            margin-left: 0;
            margin-top: 68px;
        }
}

@media screen and (-ms-view-state: fullscreen-portrait) {
    .fragment header[role=banner] {
        -ms-grid-columns: 100px 1fr;
    }

        .fragment header[role=banner] .win-backbutton {
            margin-left: 29px;
        }
}



default.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WindowsBlogReader</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- WindowsBlogReader references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/items/items.html'}"></div>
<div id="appbar" data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand" 
        data-win-options="{id:'view', label:'Full View', icon:'add'}" type="button">
    </button>
</div> 

</body>
</html>

default.js


// For an introduction to the Split template, see the following documentation:
// http://go.microsoft.com/fwlink/p/?LinkID=232447
(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var nav = WinJS.Navigation;

    app.addEventListener("activated", function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }

            if (app.sessionState.history) {
                nav.history = app.sessionState.history;
            }
            args.setPromise(WinJS.UI.processAll().then(function () {
                if (nav.location) {
                    nav.history.current.initialPlaceholder = true;
                    return nav.navigate(nav.location, nav.state);
                } else {
                    return nav.navigate(Application.navigator.home);
                }
            }));
        }
    });

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. If you need to 
        // complete an asynchronous operation before your application is 
        // suspended, call args.setPromise().
        app.sessionState.history = nav.history;
    };

    app.start();
})();

itemDetail.css



.itemDetail section[role=main] {
    -ms-grid-row: 2;
    display: block;
    height: 100%;
    overflow-x: auto;
    position: relative;
    width: 100%;
    z-index: 0;
}

    .itemDetail section[role=main] article {
        /* Define a multi-column, horizontally scrolling article by default. */
        column-fill: auto;
        column-gap: 80px;
        column-width: 480px;
        height: calc(100% - 50px);
        margin-left: 120px;
        width: 480px;
    }

        .itemDetail section[role=main] article .item-content p {
            margin-bottom: 20px;
            margin-right: 20px;
            vertical-align: baseline;
        }

@media screen and (-ms-view-state: snapped) {
    .itemDetail section[role=main] article {
        /* Define a single column, vertically scrolling article in snapped mode. */
        -ms-grid-columns: 300px 1fr;
        -ms-grid-row: 2;
        -ms-grid-rows: auto 60px;
        display: -ms-grid;
        height: 100%;
        margin-left: 20px;
        overflow-x: hidden;
        overflow-y: auto;
        width: 300px;
    }

        .itemDetail section[role=main] article .item-content {
            padding-bottom: 60px;
        }
}

@media screen and (-ms-view-state: fullscreen-portrait) {
    .itemDetail section[role=main] article {
        margin-left: 100px;
    }
}



itemDetail.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>itemDetail</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="itemDetail.css" rel="stylesheet" />
    <script src="itemDetail.js"></script>
</head>
<body>
    <div class="itemDetail fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to itemDetail</span>
            </h1>
        </header>
<section aria-label="Main content" role="main">
    <article>
        <div class="item-content"></div>
    </article>
</section>

    </div>
</body>
</html>


itemDetail.js


// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/p/?LinkID=232511
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            // Display the appbar but hide the Full View button
            var appbar = document.getElementById('appbar');
            var appbarCtrl = appbar.winControl;
            appbarCtrl.hideCommands(["view"], false);

            var item = options && options.item ? options.item : Data.items.getAt(0);
            element.querySelector(".titlearea .pagetitle").textContent = item.title;
            element.querySelector("article .item-content").innerHTML = item.content;

        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element, viewState, lastViewState) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in viewState.
        }
    });
})();


items.css



.itemspage section[role=main] {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
}

/* This selector is used to prevent ui-dark/light.css from overwriting changes
   to .win-surface. */
.itemspage .itemslist .win-horizontal.win-viewport .win-surface {
    margin-bottom: 60px;
    margin-left: 115px;
    margin-right: 115px;
    margin-top: 155px;
}

.itemspage .itemslist {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 0;
}

.itemspage .itemslist .item {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 60px;
    display: -ms-grid;
    height: 250px;
    width: 250px;
    background-color: #557EB9;
}
.itemspage .itemslist .win-item .item-title {
    -ms-grid-row: 1;
    overflow: hidden;
    width: 220px;
    font-size:  24px;
    margin-top: 12px;
    margin-left: 15px;
}


        .itemspage .itemslist .item .item-image {
            -ms-grid-row-span: 2;
        }

        .itemspage .itemslist .item .item-overlay {
            -ms-grid-row: 2;
            -ms-grid-rows: 1fr 21px;
            display: -ms-grid;
            padding: 6px 15px 2px 15px;
        }

            .itemspage .itemslist .item .item-overlay .item-title {
                -ms-grid-row: 1;
                overflow: hidden;
                width: 220px;
            }

            .itemspage .itemslist .item .item-overlay .item-subtitle {
                -ms-grid-row: 2;
                width: 220px;
            }

@media screen and (-ms-view-state: fullscreen-landscape), screen and (-ms-view-state: fullscreen-portrait), screen and (-ms-view-state: filled) {
    .itemspage .itemslist .item .item-overlay {
        background: rgba(0,0,0,0.65);
    }

        .itemspage .itemslist .item .item-overlay .item-title {
            color: rgba(255,255,255,0.87);
        }

        .itemspage .itemslist .item .item-overlay .item-subtitle {
            color: rgba(255,255,255,0.6);
        }
}

@media screen and (-ms-view-state: fullscreen-landscape) and (-ms-high-contrast), screen and (-ms-view-state: fullscreen-portrait) and (-ms-high-contrast), screen and (-ms-view-state: filled) and (-ms-high-contrast) {
    .itemspage .itemslist .item .item-overlay {
        color: WindowText;
    }
}

@media screen and (-ms-view-state: snapped) {
    .itemspage section[role=main] {
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
    }

    .itemspage .itemslist {
        margin-top: 0;
    }

        .itemspage .itemslist .win-vertical.win-viewport .win-surface {
            margin-bottom: 30px;
        }

        .itemspage .itemslist .win-container {
            margin-bottom: 15px;
            margin-left: 13px;
            margin-right: 35px;
            padding: 7px;
        }

        .itemspage .itemslist .item {
            -ms-grid-columns: 60px 1fr;
            -ms-grid-rows: 1fr;
            display: -ms-grid;
            height: 60px;
            width: 272px;
        }

            .itemspage .itemslist .item .item-image, .itemspage .itemslist .item:hover .item-image {
                -ms-grid-column: 1;
                -ms-grid-row-span: 1;
                height: 60px;
                width: 60px;
            }

            .itemspage .itemslist .item .item-overlay {
                -ms-grid-column: 2;
                -ms-grid-row: 1;
                -ms-grid-row-align: stretch;
                background: transparent;
                display: inline-block;
                margin-left: 10px;
                padding: 0;
            }

                .itemspage .itemslist .item .item-overlay .item-title {
                    margin-top: 4px;
                    max-height: 40px;
                    width: 202px;
                }

                .itemspage .itemslist .item .item-overlay .item-subtitle {
                    opacity: 0.6;
                    width: 202px;
                }
}

@media screen and (-ms-view-state: fullscreen-portrait) {
    .itemspage .itemslist .win-horizontal.win-viewport .win-surface {
        margin-left: 100px;
    }
}



items.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>itemsPage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/items/items.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/items/items.js"></script>
</head>
<body>
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <h4 class="item-title" data-win-bind="textContent: title"></h4>
        <div class="item-overlay">           
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: updated"></h6>
        </div>
    </div>
</div>


    <!-- The content that will be loaded and displayed. -->
    <div class="itemspage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
    <span class="pagetitle">Windows Team Blogs</span>
</h1>

        </header>
        <section aria-label="Main content" role="main">
            <div class="itemslist win-selectionstylefilled" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
        </section>
    </div>
</body>
</html>



items.js


(function () {
    "use strict";

    var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
    var ui = WinJS.UI;

    ui.Pages.define("/pages/items/items.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            var listView = element.querySelector(".itemslist").winControl;
            listView.itemDataSource = Data.groups.dataSource;
            listView.itemTemplate = element.querySelector(".itemtemplate");
            listView.oniteminvoked = this._itemInvoked.bind(this);

            this._initializeLayout(listView, Windows.UI.ViewManagement.ApplicationView.value);
            listView.element.focus();

            // Display the appbar but hide the Full View button
            var appbar = document.getElementById('appbar');
            var appbarCtrl = appbar.winControl;
            appbarCtrl.hideCommands(["view"], false);

        },

        // This function updates the page layout in response to viewState changes.
        updateLayout: function (element, viewState, lastViewState) {
            /// <param name="element" domElement="true" />

            var listView = element.querySelector(".itemslist").winControl;
            if (lastViewState !== viewState) {
                if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
                    var handler = function (e) {
                        listView.removeEventListener("contentanimating", handler, false);
                        e.preventDefault();
                    }
                    listView.addEventListener("contentanimating", handler, false);
                    var firstVisible = listView.indexOfFirstVisible;
                    this._initializeLayout(listView, viewState);
                    if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
                        listView.indexOfFirstVisible = firstVisible;
                    }
                }
            }
        },

        // This function updates the ListView with new layouts
        _initializeLayout: function (listView, viewState) {
            /// <param name="listView" value="WinJS.UI.ListView.prototype" />

            if (viewState === appViewState.snapped) {
                listView.layout = new ui.ListLayout();
            } else {
                listView.layout = new ui.GridLayout();
            }
        },

        _itemInvoked: function (args) {
            var groupKey = Data.groups.getAt(args.detail.itemIndex).key;
            WinJS.Navigation.navigate("/pages/split/split.html", { groupKey: groupKey });
        }
    });
})();



navigator.js

navigator.js contiene solo codice generato.

split.css



.splitpage {
    -ms-grid-columns: 640px 1fr;
    display: -ms-grid;
    height: 100%;
    width: 100%;
}

.splitpage .itemlistsection .itemlist .item .item-date {
    -ms-grid-column:  1;
    background-color: #557EB9;
}

    .splitpage .itemlistsection .itemlist .item .item-date .item-month{
        margin-top: 12px;
        margin-left: 12px;
        margin-bottom: 4px;
        font-weight: bold;
        font-size: 28px;
    }

    .splitpage .itemlistsection .itemlist .item .item-date .item-day{
        margin-left: 12px;
        font-size: 28px;
    }


    .splitpage header[role=banner] .pagetitle {
        -ms-grid-column: 2;
        overflow: hidden;
        width: calc(100% - 20px);
    }

    .splitpage .itemlistsection {
        -ms-grid-row: 2;
        margin-left: 106px;
    }

        .splitpage .itemlistsection .itemlist {
            height: 100%;
            position: relative;
            width: 100%;
            z-index: 0;
        }

            .splitpage .itemlistsection .itemlist .win-vertical.win-viewport .win-surface {
                margin-bottom: 60px;
            }

            .splitpage .itemlistsection .itemlist .win-container {
                margin-bottom: 15px;
                margin-right: 35px;
                padding: 7px;
            }

                .splitpage .itemlistsection .itemlist .win-container .win-selectioncheckmark, .splitpage .itemlistsection .itemlist .win-container .win-selectioncheckmarkbackground {
                    display: none;
                }

            .splitpage .itemlistsection .itemlist .item {
                -ms-grid-columns: 110px 1fr;
                -ms-grid-rows: 1fr;
                display: -ms-grid;
                height: 110px;
                width: 500px;
            }

                .splitpage .itemlistsection .itemlist .item .item-info {
                    -ms-grid-column: 2;
                    margin-left: 10px;
                    margin-right: 10px;
                    overflow: hidden;
                }

                    .splitpage .itemlistsection .itemlist .item .item-info .item-title {
                        margin-top: 4px;
                    }

                    .splitpage .itemlistsection .itemlist .item .item-info .item-subtitle {
                        opacity: 0.6;
                    }

                    .splitpage .itemlistsection .itemlist .item .item-info .item-description {
                        max-height: 60px;
                        overflow: hidden;
                    }

    .splitpage .articlesection {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
        -ms-grid-row-span: 2;
        margin-left: 50px;
        overflow-y: auto;
        padding-right: 120px;
        position: relative;
        z-index: 0;
    }

        .splitpage .articlesection header {
            -ms-grid-columns: 180px 20px 1fr;
            -ms-grid-rows: 180px;
            display: -ms-grid;
            margin-bottom: 5px;
            margin-top: 60px;
        }

            .splitpage .articlesection header .text {
                -ms-grid-column: 3;
            }

                .splitpage .articlesection header .text .article-subtitle {
                    margin-top: 4px;
                }

            .splitpage .articlesection header .article-image {
                height: 180px;
                width: 180px;
            }

        .splitpage .articlesection .article-content {
            overflow-y: auto;
        }

            .splitpage .articlesection .article-content p {
                margin-bottom: 16pt;
            }

@media screen and (-ms-view-state: filled) {
    .splitpage {
        -ms-grid-columns: 420px 1fr;
    }

        .splitpage .itemlistsection .itemlist .item {
            -ms-grid-columns: 60px 1fr;
            height: 60px;
            margin-bottom: 0;
            width: 282px;
        }

            .splitpage .itemlistsection .itemlist .item .item-image {
                height: 60px;
                width: 60px;
            }

            .splitpage .itemlistsection .itemlist .item .item-info .item-title {
                margin-top: 4px;
                max-height: 40px;
                overflow: hidden;
            }

            .splitpage .itemlistsection .itemlist .item .item-info .item-description {
                display: none;
            }

        .splitpage .articlesection {
            margin-left: 60px;
            padding-right: 66px;
        }
}

@media screen and (-ms-view-state: snapped) {
    .splitpage {
        -ms-grid-columns: 320px 0px;
    }

        .splitpage .itemlistsection {
            margin-left: 6px;
        }

            .splitpage .itemlistsection .itemlist .item {
                -ms-grid-columns: 60px 1fr;
                height: 60px;
                width: 282px;
            }

                .splitpage .itemlistsection .itemlist .item .item-image {
                    height: 60px;
                    width: 60px;
                }

                .splitpage .itemlistsection .itemlist .item .item-info .item-title {
                    margin-top: 4px;
                    max-height: 30pt;
                    overflow: hidden;
                }

                .splitpage .itemlistsection .itemlist .item .item-info .item-description {
                    visibility: hidden;
                }

        .splitpage .articlesection {
            -ms-grid-row-span: 1;
            -ms-grid-row: 2;
            margin-left: 20px;
            padding-right: 36px;
        }

            .splitpage .articlesection header {
                display: block;
                margin-top: 0;
            }

                .splitpage .articlesection header .text {
                    -ms-grid-column: 1;
                    margin-top: 6px;
                }

                    .splitpage .articlesection header .text .article-subtitle {
                        margin-bottom: 16px;
                        margin-top: 10px;
                        overflow: hidden;
                    }

                .splitpage .articlesection header .article-image {
                    height: 160px;
                    width: 242px;
                }

        .splitpage .itemlistsection, .splitpage .articlesection {
            -ms-grid-column: 2;
            visibility: hidden;
        }

        .splitpage .primarycolumn {
            -ms-grid-column: 1;
            visibility: visible;
        }
}

@media screen and (-ms-view-state: fullscreen-portrait) {
    .splitpage {
        -ms-grid-columns: 1fr 0px;
    }

        .splitpage .itemlistsection {
            margin-left: 86px;
        }

            .splitpage .itemlistsection .itemlist .win-vertical.win-viewport .win-container {
                margin-right: calc(100% - 510px);
            }

        .splitpage .articlesection {
            -ms-grid-row: 2;
            -ms-grid-row-span: 1;
            margin-left: 100px;
            padding-right: 100px;
        }

            .splitpage .articlesection .header {
                margin-top: 0;
            }

        .splitpage .itemlistsection, .splitpage .articlesection {
            -ms-grid-column: 2;
            visibility: hidden;
        }

        .splitpage .primarycolumn {
            -ms-grid-column: 1;
            visibility: visible;
        }
}




split.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>splitPage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/split/split.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/split/split.js"></script>
</head>
<body>
    <!-- This template is used to display each item in the ListView declared below. -->
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
       <div class="item-date">
          <p class="item-month" data-win-bind="innerHTML: month"></p>
          <span class="item-day" data-win-bind="innerHTML: day"></span> | 
          <span class="item-year" data-win-bind="innerHTML: year"></span>
       </div>
        <div class="item-info">
            <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: author"></h6>
        </div>
    </div>
</div>


    <!-- The content that will be loaded and displayed. -->
    <div class="splitpage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"></span>
            </h1>
        </header>
        <div class="itemlistsection" aria-label="List column">
            <div class="itemlist win-selectionstylefilled" aria-label="List of this group's items" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'single', swipeBehavior: 'none', tapBehavior: 'toggleSelect' }"></div>
        </div>
        <div class="articlesection" aria-atomic="true" aria-label="Item detail column" aria-live="assertive">
            <article>
                
                <div class="article-content" data-win-bind="innerHTML: content"></div>
            </article>
        </div>
    </div>
</body>
</html>



split.js


(function () {
    "use strict";

    var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
    var binding = WinJS.Binding;
    var nav = WinJS.Navigation;
    var ui = WinJS.UI;
    var utils = WinJS.Utilities;
    // The selected item
    var post;

    function displayFullView() {
        // Display the selected item in the item detail page
        nav.navigate('/pages/itemDetail/itemDetail.html', { item: post });
    }


    ui.Pages.define("/pages/split/split.html", {

        /// <field type="WinJS.Binding.List" />
        _items: null,
        _group: null,
        _itemSelectionIndex: -1,

        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            var listView = element.querySelector(".itemlist").winControl;

            // Store information about the group and selection that this page will
            // display.
            this._group = (options && options.groupKey) ? Data.resolveGroupReference(options.groupKey) : Data.groups.getAt(0);
            this._items = Data.getItemsFromGroup(this._group);
            this._itemSelectionIndex = (options && "selectedIndex" in options) ? options.selectedIndex : -1;

            // Get the first item, which is the default selection
            post = this._items.getAt(0);

            element.querySelector("header[role=banner] .pagetitle").textContent = this._group.title;

            // Set up the ListView.
            listView.itemDataSource = this._items.dataSource;
            listView.itemTemplate = element.querySelector(".itemtemplate");
            listView.onselectionchanged = this._selectionChanged.bind(this);
            listView.layout = new ui.ListLayout();

            this._updateVisibility();
            if (this._isSingleColumn()) {
                if (this._itemSelectionIndex >= 0) {
                    // For single-column detail view, load the article.
                    binding.processAll(element.querySelector(".articlesection"), this._items.getAt(this._itemSelectionIndex));
                }
            } else {
                if (nav.canGoBack && nav.history.backStack[nav.history.backStack.length - 1].location === "/pages/split/split.html") {
                    // Clean up the backstack to handle a user snapping, navigating
                    // away, unsnapping, and then returning to this page.
                    nav.history.backStack.pop();
                }
                // If this page has a selectionIndex, make that selection
                // appear in the ListView.
                listView.selection.set(Math.max(this._itemSelectionIndex, 0));
            }

            // Display the appbar and show the Full View button
            var appbar = document.getElementById('appbar');
            var appbarCtrl = appbar.winControl;
            appbarCtrl.showCommands(["view"], false);

            // Register the event handler for the Full View button
            document.getElementById('view').addEventListener("click", displayFullView, false);

        },

        unload: function () {
            this._items.dispose();
        },

        // This function updates the page layout in response to viewState changes.
        updateLayout: function (element, viewState, lastViewState) {
            /// <param name="element" domElement="true" />

            var listView = element.querySelector(".itemlist").winControl;
            var firstVisible = listView.indexOfFirstVisible;
            this._updateVisibility();

            var handler = function (e) {
                listView.removeEventListener("contentanimating", handler, false);
                e.preventDefault();
            }

            if (this._isSingleColumn()) {
                listView.selection.clear();
                if (this._itemSelectionIndex >= 0) {
                    // If the app has snapped into a single-column detail view,
                    // add the single-column list view to the backstack.
                    nav.history.current.state = {
                        groupKey: this._group.key,
                        selectedIndex: this._itemSelectionIndex
                    };
                    nav.history.backStack.push({
                        location: "/pages/split/split.html",
                        state: { groupKey: this._group.key }
                    });
                    element.querySelector(".articlesection").focus();
                } else {
                    listView.addEventListener("contentanimating", handler, false);
                    if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
                        listView.indexOfFirstVisible = firstVisible;
                    }
                    listView.forceLayout();
                }
            } else {
                // If the app has unsnapped into the two-column view, remove any
                // splitPage instances that got added to the backstack.
                if (nav.canGoBack && nav.history.backStack[nav.history.backStack.length - 1].location === "/pages/split/split.html") {
                    nav.history.backStack.pop();
                }
                if (viewState !== lastViewState) {
                    listView.addEventListener("contentanimating", handler, false);
                    if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
                        listView.indexOfFirstVisible = firstVisible;
                    }
                    listView.forceLayout();
                }

                listView.selection.set(this._itemSelectionIndex >= 0 ? this._itemSelectionIndex : Math.max(firstVisible, 0));
            }
        },

        // This function checks if the list and details columns should be displayed
        // on separate pages instead of side-by-side.
        _isSingleColumn: function () {
            var viewState = Windows.UI.ViewManagement.ApplicationView.value;
            return (viewState === appViewState.snapped || viewState === appViewState.fullScreenPortrait);
        },

        _selectionChanged: function (args) {
            var listView = document.body.querySelector(".itemlist").winControl;
            var details;
            // By default, the selection is restriced to a single item.
            listView.selection.getItems().done(function updateDetails(items) {
                if (items.length > 0) {
                    this._itemSelectionIndex = items[0].index;
                    // Get the item selected by the user
                    post = this._items.getAt(this._itemSelectionIndex);

                    if (this._isSingleColumn()) {
                        // If snapped or portrait, navigate to a new page containing the
                        // selected item's details.
                        nav.navigate("/pages/split/split.html", { groupKey: this._group.key, selectedIndex: this._itemSelectionIndex });
                    } else {
                        // If fullscreen or filled, update the details column with new data.
                        details = document.querySelector(".articlesection");
                        binding.processAll(details, items[0].data);
                        details.scrollTop = 0;
                    }
                }
            }.bind(this));
        },

        // This function toggles visibility of the two columns based on the current
        // view state and item selection.
        _updateVisibility: function () {
            var oldPrimary = document.querySelector(".primarycolumn");
            if (oldPrimary) {
                utils.removeClass(oldPrimary, "primarycolumn");
            }
            if (this._isSingleColumn()) {
                if (this._itemSelectionIndex >= 0) {
                    utils.addClass(document.querySelector(".articlesection"), "primarycolumn");
                    document.querySelector(".articlesection").focus();
                } else {
                    utils.addClass(document.querySelector(".itemlistsection"), "primarycolumn");
                    document.querySelector(".itemlist").focus();
                }
            } else {
                document.querySelector(".itemlist").focus();
            }
        }
    });
})();




 

 

Mostra:
© 2015 Microsoft