タブをタブに動的に追加するにはどうすればよいですか?


10

以下のコードを使用して、tabsコンポーネントに新しいタブを追加しようとしています。

実行時にエラーは報告されませんが、追加のタブは表示されません。tabsとtabs .__ 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;
    }
}

1
この質問は、ここでは少し外れているかもしれません。StackOverflowでこれを確認するための迅速で優れた応答をお勧めします。
lordqwerty 2013

3
質問は完全にトピックです。アプリ開発の質問にAsk Ubuntuを使用してかなり長い間成功しています。
David Planella、2013

また、この問題は特にubuntuコンポーネントに関連している可能性があります
Morchuboo

誤って投票を終了しました。ごめんなさい。
rɑːdʒɑ

回答:


5

動的にタブを追加することは現在不可能です。

SDKチームは、子を動的に追加することを許可していないため、これは(タブコンポーネントが使用する)VisualItemModelタイプの制限であると私に言っています。

この問題を追跡するための未解決のバグがあります。


まだいくつかの作業が必要です;-)
NilsB 2013

追跡できるチケットはありますか?
2013

私は同じくらい考えました。タブコンテナーコンポーネント全体と含まれるすべてのタブコンポーネントを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 2013

0

これは回避策の例です。

このメソッドを使用すると、ほぼすべてのGUIが文字列で指定され、乱雑になりますが、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;
    }
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.