none
Application musique windows store RRS feed

  • Question

  • Bonjour,

    Je reviens vers vous, malgré que mon projet avance bien. Je viens de trouver cette application sur internet http://win8template12.codeplex.com/.

    Elle est exactement comme je souhaite finaliser la mienne.Est-il possible de la modifié pour que cela fonctionne avec la mienne.Je me dote bien que je dois changer le xml. Encore merci et désolé de vous embêter avec cela.

    mardi 5 mars 2013 18:10

Toutes les réponses

  • Cordialement,

    J’ai télécharge et étudie le code de cette application.

    Tous ce qui vous devez faire, c’est dans le fichier /JS/data.JS, remplir les tableaux sampleGroups et SampleItems avec les éléments de l’XML.

    Ca c’est déjà faite dans l’autre projet, dans la page default.JS, fonction Downloadtracks.

    Vous devez traiter le cas des plusieurs elements <tracklist> qui deviendra un element sampleGroups.

    D’une manière similaire, une element  <item> vas devenir  SampleItems.

    Cordialement,


    Aurel BERA, Microsoft
    Microsoft propose ce service gratuitement, dans le but d'aider les utilisateurs et d'élargir les connaissances générales liées aux produits et technologies Microsoft. Ce contenu est fourni "tel quel" et il n'implique aucune responsabilité de la part de Microsoft.

    mercredi 6 mars 2013 11:28
  • Bonjour, 

    Merci mais en faisant ca je dois donc mettre les éléments un par un.

    L'application ne fera plus appel au xml.

    Si c'est bien le cas c'est beaucoup trop long car je possède un très grand nombre de musique a mettre.

    jeudi 7 mars 2013 09:48
  • Bonjour

    Dans cet exemple en effet vous avez des Array  qui sont remplis d’une manière statique :

       var sampleGroups = [

                { key: "group1", title: "xxxxx", subtitle: "Group Subtitle: 1", backgroundImage: darkGray, description: groupDescription },

                { key: "group2", title: "xxxxxx", subtitle: "Group Subtitle: 2", backgroundImage: lightGray, description: groupDescription },

                { key: "group3", title: "Group Title: 3", subtitle: "Group Subtitle: 3", backgroundImage: mediumGray, description: groupDescription }}

    ….et

       var sampleItems = [

                { group: sampleGroups[0], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },

                { group: sampleGroups[0], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },

                { group: sampleGroups[0], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

       

    Dans l’ancien exemple vous replies les structures de données  d’une manière dynamique

    Vous créez un objet track avec certaines propriétés et l’ajoutez à une liste.

    tempItems.push(track);

    tracksList.push(track);

          try {

                    WinJS.xhr({ url: "http://localhost/XML/XML/MusicXML.xml" }).done(

                        function completed(rss) {

                            while (tracksList.length) {

                                tracksList.pop();

                            }

                            document.getElementById('chargement').style.display = 'none';

                            var items = rss.responseXML.querySelectorAll("item");

                            var tempItems = [];

                            for (var n = 0; n < items.length; n++) {

                                var track = {};

                                track.title = items[n].querySelector("title").textContent;

                                track.link = items[n].querySelector("link").textContent;

                                var thumbs = items[n].querySelectorAll("thumbnail");

                                var imgs = items[n].textContent.match(/http:\/\/\S+?\.(?:gif|png|jpe?g)/i);

                                if (thumbs.length > 1) {

                                    track.thumbnail = thumbs[1].attributes.getNamedItem("url").textContent;

                                } else if (imgs) {

                                    track.thumbnail = imgs[0];

                                } else {

                                    track.thumbnail = "./images/logo.png";

                                }

                                track.content = toStaticHTML(items[n].textContent);

                                tempItems.push(track);

                                tracksList.push(track);

                            }

                            WinJS.Application.local.writeText("rss.db", JSON.stringify(tempItems));

                        },

                        function error(request) {

                            document.getElementById('chargement').innerHTML = '';

                        },

                        function progress(request) {

                            document.getElementById('chargement').style.display = 'block';

                        }

                    );

                } catch (e) {

                }

            });

        }

    Ce que vous devez faire c’est de mapper les propriétés de l’object track  sur les propriétés qu’on attende par pour les objets de sampleGroups et sampleItems.

     1 element tracklist dans votre fichier XML va devenir un objet dans la liste sampleGroups

    1 element track vas devenir un element dans la liste sampleItems.

    Cordialement,


    Aurel BERA, Microsoft
    Microsoft propose ce service gratuitement, dans le but d'aider les utilisateurs et d'élargir les connaissances générales liées aux produits et technologies Microsoft. Ce contenu est fourni "tel quel" et il n'implique aucune responsabilité de la part de Microsoft.

    jeudi 7 mars 2013 10:12
  • Désolé mais je n'ai pas tout compris.

    Pouvez vous me montrer un exemple.

    jeudi 7 mars 2013 10:36
  • Vous n'auriez pas un indice?
    mercredi 13 mars 2013 14:31
  • Bonjour,

    J'essaie depuis plus d'une semaine mais je n'arrive a rien.J'ai éssayé de creer un autre fichier de récupération de donné sous cette forme:


    [{"key":"1","group":{"key":"group1","title":"Genres"},"title":"Ma musique","Date":"01/13/2013","Link":"http://monurl","image":"http://monsite","color":"#6666FF"},
    {"key":"2","group":{"key":"group1","title":"Genres"},"title":"Ma musique","Date":"10/16/2013" ,"Link":"http://monurl","http://monsite","color":"#fff"},
    {"key":"3","group":{"key":"group2","title":"Playlist"},"title":"Ma musique","Date":"12/25/2013","Link":"http://monurl","image":"http://monsite","color":"#009900"},
    {"key":"4","group":{"key":"group3","title":"Tout"},"title":"Ma musique","Date":"9/20/2012","Link":"http://monurl","image":"http://monsite","color":"#fff"},
    {"key":"5","group":{"key":"group3","title":"Tout"},"title":"Ma musique","Date":"5/20/2013","Link":"http://monurl","image":"http://monsite","color":"#fff"},
    {"key":"6","group":{"key":"group1","title":"Genres"},"title":"Ma musique","Date":"10/12/2012","Link":"http://monurl","image":"http://monsite","color":"#336699"},
    {"key":"7","group":{"key":"group2","title":"Playlist"},"title":"Ma musique","Date":"10/31/2012","Link":"http://monurl","image":"http://monsite","color":"#674e71"},
    {"key":"8","group":{"key":"group2","title":"Playlist"},"title":"Ma musique","Date":"11/29/2012","Link":"http://monurl","image":"http://monsite","color":"#FFCC00"},
    {"key":"9","group":{"key":"group2","title":"Playlist"},"title":"Ma musique","Date":"1/1/2013","Link":"http://monurl","image":"http://monsite","color":"#f8baba"}]



    • Modifié palife mardi 26 mars 2013 12:36
    mardi 26 mars 2013 12:33
  • Je pense que le problème vient du fait que je n'arrive pas a modifier mes pages js et html pour intégrer le samplegroup et sampleitem.
    mardi 26 mars 2013 12:36
  • Oui je sais que c'est du json.Mais que ce soit en json ou xml je n'arrive pas a ajouter correctement les samplegroup et item.

    mardi 26 mars 2013 13:50
  • (function () {
        "use strict";
    
        var list = new WinJS.Binding.List();
        var groupedItems = list.createGrouped(
            function groupKeySelector(item) { return item.group.key; },
            function groupDataSelector(item) { return item.group; }
        );
    
        // TODO: Replace the data with your real data.
        // You can add data from asynchronous sources whenever it becomes available.
        generateSampleData().forEach(function (item) {
            list.push(item);
        });
    
        WinJS.Namespace.define("HubData", {
            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;
                }
            }
        }
    
        // Returns an array of sample data that can be added to the application's
        // data list. 
        function generateSampleData() {
            var itemContent = "<p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat";
            var itemDescription = "Item Description: Pellentesque porta mauris quis interdum vehicula urna sapien ultrices velit nec venenatis dui odio in augue cras posuere enim a cursus convallis neque turpis malesuada erat ut adipiscing neque tortor ac erat";
            var groupDescription = "Group Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante";
            var RecordType1 = Object.freeze({
                biggest1: 1,
                bigger1: 2,
                big1: 3,
                medium1: 4,
                mediumtwo1: 5,
                small1: 6,
                smaller1: 7,
                smallest1: 8,
            });
    
            // These three strings encode placeholder images. You will want to set the
            // backgroundImage property in your real data to be URLs to images.
            var darkGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC";
            var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";
            var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC";
    
            // Each of these sample groups must have a unique key to be displayed
            // separately.
            var sampleGroups = [
                { key: "group1", title: "Top 20", subtitle: "", backgroundImage: "http://ecx.images-amazon.com/images/I/514P3PRki9L._AA160_.jpg", description: groupDescription, },
                { key: "group2", title: "Featured Playlist", subtitle: "", backgroundImage: "http://ecx.images-amazon.com/images/I/514P3PRki9L._AA160_.jpg", description: groupDescription },
                { key: "group3", title: "Artists", subtitle: "", backgroundImage: "http://ecx.images-amazon.com/images/I/514P3PRki9L._AA160_.jpg", description: groupDescription },
                { key: "group4", title: "Genres", subtitle: "", backgroundImage: "http://ecx.images-amazon.com/images/I/514P3PRki9L._AA160_.jpg", description: groupDescription },
                { key: "group5", title: "Last Added", subtitle: "", backgroundImage: "http://ecx.images-amazon.com/images/I/514P3PRki9L._AA160_.jpg", description: groupDescription },
                { key: "group6", title: "Group Title: 6", subtitle: "Group Subtitle: 6", backgroundImage: darkGray, description: groupDescription }
            ];
    
            // Each of these sample items should have a reference to a particular
            // group.
            var sampleItems = [
                { group: sampleGroups[0], title: "Lorem ipsum", subtitle: "Curabitur class aliquam", Time: "3.12", recordType: RecordType1.biggest1, description: itemDescription, content: itemContent, backgroundImage: "http://ecx.images-amazon.com/images/I/514P3PRki9L._AA160_.jpg" },
                { group: sampleGroups[0], title: "Lorem ipsum", subtitle: "Curabitur class aliquam", Time: "3.12", recordType: RecordType1.biggest1, description: itemDescription, content: itemContent, backgroundImage: "http://ecx.images-amazon.com/images/I/514P3PRki9L._AA160_.jpg" },
                { group: sampleGroups[0], title: "Lorem ipsum", subtitle: "Curabitur class", Time: "3.12", recordType: RecordType1.biggest1, description: itemDescription, content: itemContent, backgroundImage: "http://ecx.images-amazon.com/images/I/514P3PRki9L._AA160_.jpg" },
                { group: sampleGroups[0], title: "Lorem ipsum", subtitle: "Curabitur class", Time: "3.12", recordType: RecordType1.biggest1, description: itemDescription, content: itemContent, backgroundImage: "http://ecx.images-amazon.com/images/I/514P3PRki9L._AA160_.jpg" },
                { group: sampleGroups[0], title: "Lorem ipsum", subtitle: "Curabitur class", Time: "3.12", recordType: RecordType1.biggest1, description: itemDescription, content: itemContent, backgroundImage: "http://ecx.images-amazon.com/images/I/514P3PRki9L._AA160_.jpg" },
                { group: sampleGroups[0], title: "Lorem ipsum", subtitle: "JCurabitur class", Time: "3.12", recordType: RecordType1.biggest1, description: itemDescription, content: itemContent, backgroundImage: "http://ecx.images-amazon.com/images/I/514P3PRki9L._AA160_.jpg" },
    
                { group: sampleGroups[1], title: "Lorem Ipsum Dolor Sit Amet", subtitle: "Lorem Ipsum", Time: "3.45 mins", recordType: RecordType1.medium1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#14d6b8" },
                { group: sampleGroups[1], title: "Lorem Ipsum Dolor Sit Amet", subtitle: "Lorem Ipsum", Time: "3.45 mins", recordType: RecordType1.medium1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#00aa90" },
                { group: sampleGroups[1], title: "Lorem Ipsum Dolor Sit Amet", subtitle: "Lorem Ipsum", Time: "3.45 mins", recordType: RecordType1.medium1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#14d6b8" },
                { group: sampleGroups[1], title: "Lorem Ipsum Dolor Sit Amet", subtitle: "Lorem Ipsum", Time: "7.55 mins", recordType: RecordType1.medium1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#00aa90" },
                { group: sampleGroups[1], title: "Lorem Ipsum Dolor Sit Amet", subtitle: "Lorem Ipsum", Time: "3.45 mins", recordType: RecordType1.medium1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#14d6b8" },
                { group: sampleGroups[1], title: "Lorem Ipsum Dolor Sit Amet", subtitle: "Lorem Ipsum", Time: "7.55 mins", recordType: RecordType1.medium1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#00aa90" },
                { group: sampleGroups[1], title: "Lorem Ipsum Dolor Sit Amet", subtitle: "Lorem Ipsum", Time: "3.45 mins", recordType: RecordType1.medium1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#14d6b8" },
                { group: sampleGroups[1], title: "Lorem Ipsum Dolor Sit Amet", subtitle: "Lorem Ipsum", Time: "7.55 mins", recordType: RecordType1.medium1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#00aa90" },
                { group: sampleGroups[1], title: "Lorem Ipsum Dolor Sit Amet", subtitle: "Lorem Ipsum", Time: "3.45 mins", recordType: RecordType1.medium1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#14d6b8" },
                { group: sampleGroups[1], title: "Lorem Ipsum Dolor Sit Amet", subtitle: "Lorem Ipsum", Time: "7.55 mins", recordType: RecordType1.medium1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#00aa90" },
                { group: sampleGroups[1], title: "Lorem Ipsum Dolor Sit Amet", subtitle: "Lorem Ipsum", Time: "3.45 mins", recordType: RecordType1.medium1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#14d6b8" },
                { group: sampleGroups[1], title: "Lorem Ipsum Dolor Sit Amet", subtitle: "Lorem Ipsum", Time: "7.55 mins", recordType: RecordType1.medium1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#00aa90" },
    
                { group: sampleGroups[2], title: "Item Title: 1", subtitle: "Item Subtitle: 1", recordType: RecordType1.bigger1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage7.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage14.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage17.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/ViewAll.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage15.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage18.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage23.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage8.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage11.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage16.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage24.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage25.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage9.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage12.png" },
                { group: sampleGroups[2], title: "2059", subtitle: "ARTISTS", recordType: RecordType1.big1, description: itemDescription, content: itemContent, backgroundImage: "" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage26.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage10.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage13.png" },
                { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", recordType: RecordType1.smaller1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage27.png" },
    
                { group: sampleGroups[3], title: "Brit- Pop", subtitle: "2500", recordType: RecordType1.mediumtwo1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#00aa90" },
                { group: sampleGroups[3], title: "Dance", subtitle: "2500", recordType: RecordType1.mediumtwo1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#00ffd8" },
                { group: sampleGroups[3], title: "Jazz", subtitle: "3500", recordType: RecordType1.smallest1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#14d6b8" },
                { group: sampleGroups[3], title: "Pop", subtitle: "2500", recordType: RecordType1.small1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#00aa90" },
                { group: sampleGroups[3], title: "Trip Hop", subtitle: "12790", recordType: RecordType1.mediumtwo1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#14d6b8" },
                { group: sampleGroups[3], title: "Blues", subtitle: "3200", recordType: RecordType1.smallest1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#00ffd8" },
                { group: sampleGroups[3], title: "African", subtitle: "2500", recordType: RecordType1.smallest1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#14d6b8" },
                { group: sampleGroups[3], title: "Country", subtitle: "3400", recordType: RecordType1.mediumtwo1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#14d6b8" },
                { group: sampleGroups[3], title: "Metal", subtitle: "2450", recordType: RecordType1.smallest1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#14d6b8" },
                { group: sampleGroups[3], title: "R&B", subtitle: "500", recordType: RecordType1.smallest1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#14d6b8" },
                { group: sampleGroups[3], title: "Electronic", subtitle: "2500", recordType: RecordType1.mediumtwo1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#00aa90" },
                { group: sampleGroups[3], title: "Classic", subtitle: "2630", recordType: RecordType1.small1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#00ffd8" },
                { group: sampleGroups[3], title: "Folk", subtitle: "6500", recordType: RecordType1.smallest1, description: itemDescription, content: itemContent, backgroundImage: darkGray, backgroundColor: "#14d6b8" },
    
                { group: sampleGroups[4], title: "Lorem ipsum", subtitle: "Curabitur class", Time: "3.12", recordType: RecordType1.biggest1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage19.png" },
                { group: sampleGroups[4], title: "Lorem ipsum", subtitle: "Curabitur class", Time: "3.12", recordType: RecordType1.biggest1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage6.png" },
                { group: sampleGroups[4], title: "Lorem ipsum", subtitle: "Curabitur class", Time: "3.12", recordType: RecordType1.biggest1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage21.png" },
                { group: sampleGroups[4], title: "Lorem ipsum", subtitle: "Curabitur class", Time: "3.12", recordType: RecordType1.biggest1, description: itemDescription, content: itemContent, backgroundImage: "../../images/HubPage/HubPageImage22.png" },
    
                //{ group: sampleGroups[5], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },
                //{ group: sampleGroups[5], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },
                //{ group: sampleGroups[5], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
                //{ group: sampleGroups[5], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray },
                //{ group: sampleGroups[5], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: lightGray },
                //{ group: sampleGroups[5], title: "Item Title: 6", subtitle: "Item Subtitle: 6", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
                //{ group: sampleGroups[5], title: "Item Title: 7", subtitle: "Item Subtitle: 7", description: itemDescription, content: itemContent, backgroundImage: darkGray },
                //{ group: sampleGroups[5], title: "Item Title: 8", subtitle: "Item Subtitle: 8", description: itemDescription, content: itemContent, backgroundImage: lightGray }
            ];
    
            return sampleItems;
        }
    })();
    

    Page HubData.js

    Vous me dites bien de faire cela.

    Si oui le problème est que je ne veux pas mettre tout à la main mais depuis un fichier xml ou json

    jeudi 28 mars 2013 06:55