Wie füge ich Registerkarten dynamisch hinzu?


10

Ich versuche, der Registerkarte-Komponente mit dem folgenden Code eine neue Registerkarte hinzuzufügen.

Beim Ausführen wird kein Fehler gemeldet, es werden jedoch keine zusätzlichen Registerkarten angezeigt. Ich habe versucht, sowohl Registerkarten als auch Registerkarten zu verwenden .__ tabsModel als übergeordnetes Element, aber es werden keine zusätzlichen Registerkarten angezeigt.

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;
    }
}

1
Diese Frage kann hier etwas vom Thema abweichen. Ich würde für eine schnellere und bessere Antwort empfehlen, dies auf StackOverflow zu fragen.
Lordqwerty

3
Die Frage ist ganz zum Thema. Wir verwenden Ask Ubuntu seit einiger Zeit recht erfolgreich für Fragen zur App-Entwicklung.
David Planella

Auch - das Problem kann sich speziell auf die Ubuntu-Komponenten beziehen
Morchuboo

enge Abstimmung versehentlich gemacht, es tut mir leid Freunde.
rɑːdʒɑ

Antworten:


5

Ich befürchte, dass das dynamische Hinzufügen von Registerkarten derzeit nicht möglich ist

Das SDK-Team teilt mir mit, dass dies eine Einschränkung des VisualItemModel- Typs ist (den die Tabs- Komponente verwendet), da das dynamische Hinzufügen von untergeordneten Elementen nicht möglich ist.

Es gibt einen offenen Fehler, um dieses Problem im Auge zu behalten .


noch einige Arbeiten vor
uns ;-)

Gibt es ein Ticket, das man verfolgen kann?
Nutzlast

Das habe ich mir gedacht. Ich habe es umgangen, indem ich die gesamte Tabs-Container-Komponente und alle enthaltenen Tab-Komponenten in einer Javascript-Funktion erstellt und sie dann mit mainView als übergeordnetem Element hinzugefügt habe. Schrecklich hackey, aber es funktioniert: P
Morchuboo

1
@payload, es gibt derzeit keinen Fehler, mit dem Sie den Überblick behalten können. Sie können jedoch einen Fehler für das SDK-Team öffnen, um einen Blick darauf zu werfen
David Planella

@payload, Jemand hatte bereits ein Ticket mit diesem Problem angemeldet: bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1124071 . Meine Problemumgehung für die Verwendung der Qt.createQmlObject-Funktion mit der Tabs-Auflistung und allen untergeordneten Elementen ist hier zu sehen: pastebin.com/dmyPkyyX Es ist wirklich nicht sehr elegant und die Zeichenfolge wird schnell nicht mehr verwaltbar, funktioniert aber. Siehe die Funktion fillTabs ().
Morchuboo

0

Hier ist eine Beispielumgehung.

Diese Methode führt dazu, dass fast die gesamte GUI in einer Zeichenfolge angegeben wird und schnell unübersichtlich wird. Sie funktioniert jedoch so lange, bis die an VisualItemModel anhängende Funktion vorgelagert implementiert ist.

Dies ist der Beginn eines RSS-Readers, an dem ich bastele. Wenn Sie es in eine leere qml-Datei einfügen, sollte es einwandfrei funktionieren. (Möglicherweise müssen Sie libqt5sql5-sqlite und qtdeclarative5-localstorage-plugin installieren. Sie befinden sich auf den Telefonabbildern, wurden jedoch nicht mit der SDK-Installation installiert.)

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;
    }
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.