Как динамически добавить вкладку к вкладкам?

10

Я пытаюсь добавить новую вкладку в компонент вкладки с кодом ниже.

При запуске не сообщается об ошибке, но дополнительные вкладки не отображаются. Я попытался использовать вкладки и вкладки .__ tabsModel в качестве родителя, но дополнительные вкладки не отображаются.

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
источник
1
Этот вопрос может быть немного не по теме здесь. Я бы порекомендовал для более быстрого и лучшего ответа спросить об этом на StackOverflow.
lordqwerty
3
Вопрос полностью по теме. Уже довольно давно мы успешно используем Ask Ubuntu для вопросов по разработке приложений.
Дэвид Планелла
Кроме того - проблема может быть конкретно связана с компонентами ubuntu
Morchuboo
близкое голосование сделано случайно, извините друзья.
2013 года

Ответы:

5

Боюсь, что добавлять вкладки динамически в данный момент невозможно

Команда SDK говорит мне, что это ограничение типа VisualItemModel (который использует компонент Tabs ), поскольку он не позволяет динамически добавлять дочерние элементы.

Существует открытая ошибка, чтобы отслеживать эту проблему .

Дэвид Планелла
источник
впереди еще немного работы ;-)
NilsB
есть ли билет, который можно отследить?
полезная нагрузка
Я так и думал. Я обошел это, создав целый контейнерный компонент tabs и все содержащиеся компоненты Tab в функции javascript, а затем добавив его с mainView в качестве родителя. Ужасно хаккей но это работает: P
Morchuboo
1
@payload, сейчас нет ошибки для отслеживания этого права, но, пожалуйста, не стесняйтесь открыть ее для команды SDK, чтобы посмотреть: bugs.launchpad.net/ubuntu-ui-toolkit/+filebug
Дэвид Планелла
@payload, кто-то уже зарегистрировал тикет с этой проблемой: bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1124071 . Мой обходной путь использования функции Qt.createQmlObject с коллекцией вкладок и всеми дочерними элементами можно увидеть здесь: pastebin.com/dmyPkyyX Это действительно не очень элегантно, и строка становится неуправляемой быстро, но работает. Смотрите функцию fillTabs ().
Morchuboo
0

Вот пример обходного пути.

Этот метод приводит к тому, что почти весь графический интерфейс указывается в строке, и быстро становится беспорядочным, но будет работать до тех пор, пока функция добавления в VisualItemModel не будет реализована в восходящем направлении.

Это начало чтения RSS, с которым я возился. Если вы вставите его в пустой файл qml, он должен работать нормально. (Вам может потребоваться установить libqt5sql5-sqlite и qtdeclarative5-localstorage-plugin. Они находятся на образах телефона, но не были установлены при установке 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
источник