Comment ajouter dynamiquement des onglets aux onglets?

10

J'essaie d'ajouter un nouvel onglet au composant onglets avec le code ci-dessous.

Lors de l'exécution, aucune erreur n'est signalée, mais aucun onglet supplémentaire n'est affiché. J'ai essayé d'utiliser les onglets et les onglets .__ tabsModel comme parent, mais aucun onglet supplémentaire n'est affiché.

import QtQuick 2.0
import QtQuick.LocalStorage 2.0
import Ubuntu.Components 0.1

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    id: mainView
    objectName: "mainView"
    applicationName: "news-feed"

    width: units.gu(100)
    height: units.gu(75)

    Tabs {
        id: tabs
        anchors.fill: parent

        Component.onCompleted: {
            mainView.initializeDB();
            mainView.saveFeed("BBC News","http://feeds.bbci.co.uk/news/rss.xml");
            mainView.saveFeed("Jono Bacon","http://www.jonobacon.org/?feed=rss2");
            mainView.saveFeed("The Register", "http://www.theregister.co.uk/headlines.atom");
            fillTabs();
        }

        tools: ToolbarActions {
            Action {
                objectName: "action"

                iconSource: Qt.resolvedUrl("avatar.png")
                text: i18n.tr("Tap me!")

                onTriggered: {
                    label.text = i18n.tr("Toolbar tapped")
                }
            }
        }

        // First tab begins here
        Tab {
            id: tabFrontPage
            objectName: "tabFrontPage"

            title: i18n.tr("Front Page")

            // Tab content begins here
            page: Page {
                Column {
                    anchors.centerIn: parent
                    Label {
                        id: labelFrontPage
                        text: i18n.tr("This will be the front page \n An aggregation of the top stories from each feed")
                    }
                }
            }
        }
    }

    function fillTabs() {
        var db = getDatabase();
        db.transaction(function(tx) {
            var rs = tx.executeSql('SELECT * FROM feeds;');
            if (rs.rows.length > 0) {
                for(var i = 0; i < rs.rows.length; i++) {
                    var feedTab = Qt.createQmlObject('import QtQuick 2.0;import Ubuntu.Components 0.1;Tab {anchors.fill: parent;objectName: "Tab";title: i18n.tr("Tab");page: Page {anchors.margins: units.gu(2);Column {anchors.centerIn: parent;Label {id: label;objectName: "label";text: i18n.tr("Tab");}}}}',tabs,"feedTab");
                }
            } else {
                res = "Unknown";
            }
        })
    }
    //Storage API
    function getDatabase() {
        return LocalStorage.openDatabaseSync("news-feed","1.0","StorageDatabase",10000)
    }

    //Initialise DB tables if not already existing
    function initializeDB() {
        var db = getDatabase();
        db.transaction(function(tx) {
            //Create settings table if not existing
            tx.executeSql('CREATE TABLE IF NOT EXISTS settings(setting TEXT UNIQUE, value TEXT)');
            tx.executeSql('CREATE TABLE IF NOT EXISTS feeds(feedName TEXT UNIQUE, feedURL TEXT UNIQUE)')
        });
    }

    //Write setting to DB
    function setSetting(setting,value){
        //setting: string - setting name (key)
        //value: string - value
        var db = getDatabase();
        var res = "";
        db.transaction(function(tx) {
            var rs = tx.executeSql('INSERT OR REPLACE INTO settings VALUES (?,?);',[setting,value]);
            //console.log(rs.rowsAffected)
            if(rs.rowsAffected > 0) {
                res = "OK";
            } else {
                res = "Error";
            }
        })
        return res;
    }

    //Read setting from DB
    function getSetting(setting) {
        var db = getDatabase();
        var res="";
        db.transaction(function(tx) {
            var rs = tx.executeSql('SELECT value FROM settings WHERE setting=?;', [setting]);
            if (rs.rows.length > 0) {
                res = rs.rows.item(0).value;
            } else {
                res = "Unknown";
            }
        })
        return res;
    }

    function saveFeed(feedName, feedURL) {
        var db = getDatabase();
        var res = "";
        db.transaction(function(tx){
            var rs = tx.executeSql('INSERT OR REPLACE INTO feeds VALUES (?,?)',[feedName,feedURL]);
            //console.log(rs.rowsAffected)
            if (rs.rowsAffected > 0) {
                res = "OK";
            } else {
                res = "Error";
            }
        })
        return res;
    }

    //Return a single feed
    function getFeed(feedName) {
        var db = getDatabase();
        var res = "";
        db.transaction(function(tx) {
            var rs = tx.executeSql('SELECT feedURL FROM feeds WHERE feedName=?;', [feedName]);
            if (rs.rows.length > 0) {
                res = rs.rows.item(0).feedURL;
            } else {
                res = "Unknown";
            }

        })
        return res;
    }

    //Return all feeds and urls
    function getFeeds() {
        var db = getDatabase();
        var res = "";
        db.transaction(function(tx) {
            var rs = tx.executeSql('SELECT * FROM feeds;');
            if (rs.rows.length > 0) {
                return rs;
            } else {
                res = "Unknown";
            }
        })
        return res;
    }
}
Morchuboo
la source
1
Cette question peut être légèrement hors sujet ici. Je recommanderais une réponse plus rapide et meilleure pour poser cette question sur StackOverflow.
lordqwerty
3
La question est totalement sur le sujet. Cela fait un bon moment que nous utilisons Ask Ubuntu pour les questions de développement d'applications.
David Planella
Aussi - le problème peut spécifiquement concerner les composants ubuntu
Morchuboo
vote serré fait accidentellement, je suis désolé amis.
rɑːdʒɑ

Réponses:

5

J'ai peur que l'ajout dynamique d'onglets ne soit pas possible actuellement

L'équipe du SDK m'indique qu'il s'agit d'une limitation du type VisualItemModel (que le composant Tabs utilise), car il ne permet pas d'ajouter des enfants de manière dynamique.

Il existe un bogue ouvert pour suivre ce problème .

David Planella
la source
encore du travail à faire ;-)
NilsB
y a-t-il un ticket que l'on peut suivre?
charge utile
C'est ce que je pensais. Je l'ai contourné en créant le composant conteneur d'onglets entier et tous les composants Tab contenus dans une fonction javascript, puis en l'ajoutant avec mainView comme parent. Horriblement hackey mais ça marche: P
Morchuboo
1
@payload, il n'y a pas de bogue pour garder une trace de ce droit, maintenant, mais n'hésitez pas à en ouvrir un pour que l'équipe du SDK puisse le consulter: bugs.launchpad.net/ubuntu-ui-toolkit/+filebug
David Planella
@payload, quelqu'un avait déjà enregistré un ticket avec ce problème: bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1124071 . Ma solution de contournement pour utiliser la fonction Qt.createQmlObject avec la collection d'onglets et tous les enfants peut être vue ici: pastebin.com/dmyPkyyX Ce n'est vraiment pas très élégant et la chaîne devient ingérable rapidement mais fonctionne. Voir la fonction fillTabs ().
Morchuboo
0

Voici un exemple de solution de contournement.

Cette méthode entraîne la quasi-totalité de l'interface graphique étant spécifiée dans une chaîne et devient rapidement désordonnée, mais fonctionnera jusqu'à ce que la fonctionnalité à ajouter à VisualItemModel soit implémentée en amont.

C'est le début d'un lecteur rss avec lequel je bricole. Si vous le collez dans un fichier qml vide, il devrait fonctionner correctement. (vous devrez peut-être installer libqt5sql5-sqlite et qtdeclarative5-localstorage-plugin. Ils se trouvent sur les images du téléphone mais n'ont pas été installés avec l'installation du SDK).

import QtQuick 2.0
import QtQuick.LocalStorage 2.0
import Ubuntu.Components 0.1

/*!
    \brief MainView with Tabs element.
       First Tab has a single Label and
       second Tab has a single ToolbarAction.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    id: mainView
    objectName: "mainView"
    applicationName: "news-feed"

    width: units.gu(100)
    height: units.gu(75)

    tools: ToolbarActions {
    Action {
        objectName: "action"

        iconSource: Qt.resolvedUrl("avatar.png")
        text: i18n.tr("Tap me!")

        onTriggered: {
            label.text = i18n.tr("Toolbar tapped")
        }
    }
    }

    Component.onCompleted: {
    mainView.initializeDB();
    mainView.saveFeed("BBC News","http://feeds.bbci.co.uk/news/rss.xml");
    mainView.saveFeed("Jono Bacon","http://www.jonobacon.org/?feed=rss2");
    mainView.saveFeed("The Register", "http://www.theregister.co.uk/headlines.atom");
    fillTabs();
    }

    Tabs {
    id: initialtabs
    anchors.fill: parent

    tools: ToolbarActions {
        Action {
            objectName: "action"

            iconSource: Qt.resolvedUrl("avatar.png")
            text: i18n.tr("Tap me!")

            onTriggered: {
                label.text = i18n.tr("Toolbar tapped")
            }
        }
    }

    // First tab begins here
    Tab {
        id: tabFrontPage
        objectName: "tabFrontPage"

        title: i18n.tr("Front Page")

        // Tab content begins here
        page: Page {
            Column {
                anchors.centerIn: parent
                Label {
                    id: labelFrontPage
                    text: i18n.tr("This will be the front page \n An aggregation of the top stories from each feed")
                }
            }
        }
    }
    }


    function fillTabs() {
    initialtabs.destroy();
    var objStr = "import QtQuick 2.0;import Ubuntu.Components 0.1;import QtQuick.XmlListModel 2.0;Tabs{id:tabs;anchors.fill:parent;"
    var db = getDatabase();
    db.transaction(function(tx) {
        var rs = tx.executeSql('SELECT * FROM feeds;');
        if (rs.rows.length > 0) {
            for(var i = 0; i < rs.rows.length; i++) {
                objStr += "Tab {id:tab" + i + ";anchors.fill:parent;title:'" + rs.rows.item(i).feedName + "';property string source: '" + rs.rows.item(i).feedURL + "';page: Page {anchors.margins: units.gu(2);Column {anchors.centerIn: parent;Label{text:tab" + i + ".source;}}}}";
            }
            objStr += "}";
            var cmpTabs = Qt.createQmlObject(objStr,mainView,"tabsfile");
        } else {
            res = "Unknown";
        }
    })
    }

    //Create tabs for each feed
    function createTabs() {
    var feeds = getFeeds();
    for (var i = 0; i < feeds.length; i++){
        //Add tab for each feed.
        //Cannot be done with existing API

    }
    }

    //Storage API
    function getDatabase() {

    return LocalStorage.openDatabaseSync("news-feed","1.0","StorageDatabase",10000)
    }

    //Initialise DB tables if not already existing
    function initializeDB() {
    var db = getDatabase();
    db.transaction(function(tx) {
        //Create settings table if not existing
        tx.executeSql('CREATE TABLE IF NOT EXISTS settings(setting TEXT UNIQUE, value TEXT)');
        tx.executeSql('CREATE TABLE IF NOT EXISTS feeds(feedName TEXT UNIQUE, feedURL TEXT UNIQUE)')
    });
    }

    //Write setting to DB
    function setSetting(setting,value){
    //setting: string - setting name (key)
    //value: string - value
    var db = getDatabase();
    var res = "";
    db.transaction(function(tx) {
        var rs = tx.executeSql('INSERT OR REPLACE INTO settings VALUES (?,?);',[setting,value]);
        //console.log(rs.rowsAffected)
        if(rs.rowsAffected > 0) {
            res = "OK";
        } else {
            res = "Error";
        }
    })
    return res;
    }

    //Read setting from DB
    function getSetting(setting) {
       var db = getDatabase();
       var res="";
       db.transaction(function(tx) {
     var rs = tx.executeSql('SELECT value FROM settings WHERE setting=?;', [setting]);
     if (rs.rows.length > 0) {
          res = rs.rows.item(0).value;
     } else {
         res = "Unknown";
     }
      })
      // The function returns “Unknown” if the setting was not found in the database
      // For more advanced projects, this should probably be handled through error codes
      return res;
    }

    function saveFeed(feedName, feedURL) {
    var db = getDatabase();
    var res = "";
    db.transaction(function(tx){
        var rs = tx.executeSql('INSERT OR REPLACE INTO feeds VALUES (?,?)',[feedName,feedURL]);
        //console.log(rs.rowsAffected)
        if (rs.rowsAffected > 0) {
            res = "OK";
        } else {
            res = "Error";
        }
    })
    return res;
    }

    //Return a single feed
    function getFeed(feedName) {
    var db = getDatabase();
    var res = "";
    db.transaction(function(tx) {
        var rs = tx.executeSql('SELECT feedURL FROM feeds WHERE feedName=?;', [feedName]);
        if (rs.rows.length > 0) {
            res = rs.rows.item(0).feedURL;
        } else {
            res = "Unknown";
        }

    })
    return res;
    }

    //Return all feeds and urls
    function getFeeds() {
    var db = getDatabase();
    var res = "";
    db.transaction(function(tx) {
        var rs = tx.executeSql('SELECT * FROM feeds;');
        if (rs.rows.length > 0) {
            return rs;
        } else {
            res = "Unknown";
        }
        })
    return res;
    }
}
Morchuboo
la source