Estou tentando adicionar uma nova guia ao componente de guias com o código abaixo.
Ao executar, não há erros reportados, mas nenhuma guia adicional é mostrada. Eu tentei usar ambas as abas e abas .__ tabsModel como pai, mas nenhuma abas adicionais são mostradas.
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;
}
}
Temo que adicionar guias dinamicamente não é possível no momento
A equipe do SDK me diz que essa é uma limitação do VisualItemModel (que o componente Tabs usa ), pois não permite adicionar crianças dinamicamente.
Existe um bug aberto para acompanhar esse problema .
Aqui está um exemplo de solução alternativa.
Esse método resulta em quase todo o gui sendo especificado em uma string e se torna confuso rapidamente, mas funcionará até que o recurso a ser anexado ao VisualItemModel seja implementado pelo autor.
Este é o começo de um leitor de RSS com quem estou mexendo. Se você colá-lo em um arquivo qml vazio, ele deverá ser executado corretamente. (talvez seja necessário instalar o libqt5sql5-sqlite e o qtdeclarative5-localstorage-plugin. Eles estão nas imagens do telefone, mas não foram instalados com a instalação do 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;
}
}