Question

将Titanium用于课程。我有一个函数可以提取我的JSON数据并创建标签和eventListeners。我需要将这个项目变成一个与标签相对的表格，但是我很难做到并且无法弄明白。这是我带有标签的工作代码。这只是我的第二个编码课程，所以任何耐心和内幕提示和技巧将不胜感激！

谢谢你们

Ti.UI.setBackgroundImage("347.png");

var bands = {
    "sevenfold": {
        "headTitle": "Avenged Sevenfold",
        "footTitle": "Orange County Metal Band",
        "members": [
            {
                "name": "M. Shadows", 
                "info": "Lead Singer.  Known for his raspy yet powerful vocals"
            }, 
            {
                "name": "Synyster Gates", 
                "info": "Lead guitarist and backup vocalist.  Known for technical        solos and melodic riffs."
            }, 
            {
                "name": "Zacky Vengeance",
                "info": "Rhythm guitarist and backup vocalist.  Capable of tight and fast riffs and harmonizing with lead guitar parts. "
            }, 
            {
                "name": "Johnny Christ",
                "info": "Bassist.  Contributes heavy grooves as well as intricate undertones to the rhythm section."
            }, 
            {
                "name": "Arin Iljey", 
                "info": "Drummer.  New-comer to the band.  Filled in for the late Jimmy 'The Rev' Sullivan."
            }, 
        ]
    },
    "adtr": {
        "headTitle": "A Day To Remember",
        "footTitle": "Ocala Based Pop-Punk Band",
        "members":  [
            {
                "name": "Jeremey McKinnon", 
                "info": "Lead Singer.  Capable of hitting clean high notes as well as low screams."
            }, 
            {
                "name": "Neil Westfall",
                "info": "Rhythm guitarist and backup vocalist.  Plays fast punk inspired rhythm sections while contributing back up screams during live shows."
            },
            {
                "name": "Joshua Woodard",
                "info": "Bassist.  Contributes to the heavy tones of the rhythm section."
            },
            {
                "name": "Kevin Skaff", 
                "info": "Lead guitarist and backup vocalist.  Plays the melodic section of songs and aids Jeremy with clean vocals both in the studio and on live shows."
            },
            {
                "name": "Alex Shelnut", 
                "info": "Drummer.  Adds fast punk fills with metal influenced double bass beats."
            }
        ]
    }
};


var mainWindow = Ti.UI.createWindow({
    title: "Band Members",
    backgroundImage: "347.png"
});

var navWindow = Ti.UI.iOS.createNavigationWindow({
    window: mainWindow  
});


var getDetail = function(){
    var detailWindow = Ti.UI.createWindow({
        title: this.text,
        backgroundColor: "white"
    });
    var detailText = Ti.UI.createLabel({
        text: this.details,
        top: 30,
        left: 15,
        right: 15
    });
    detailWindow.add(detailText);
    navWindow.openWindow(detailWindow);
};

var makeUI = function(){
    var spacing = 30;
    for(n in bands){
        var titleLabel = Ti.UI.createLabel({
            text: bands[n].headTitle,
            left: 30,
            right: 30,
            borderRadius: 5,
            top: spacing,
            height: 25,
            textAlign: "center",
            backgroundColor: "#333",
            font: {fontSize: 22, fontFamily: "Verdana", fontWeight: "bold"},
            color: "#fafafa"
        });
        spacing = titleLabel.top + titleLabel.height + 10;
        for(m in bands[n].members){
            var itemLabel = Ti.UI.createLabel({
                text: bands[n].members[m].name,
                details: bands[n].members[m].info,
                left: 30,
                right: 30,
                borderRadius: 5,
                textAlign: "center",
                top: spacing,
                height: 25,
                backgroundColor: "#ffffff",
                font: {fontSize: 22, fontFamily: "Verdana"},
                color: "#333"
            });
            mainWindow.add(itemLabel);
            spacing = itemLabel.top + itemLabel.height + 10;
            itemLabel.addEventListener("click", getDetail);
        }
        mainWindow.add(titleLabel);
        spacing = itemLabel.top + itemLabel.height + 40;
    }
};



makeUI();


navWindow.open();

Answer 1

请参阅Titanium Kitchen接收器应用程序，其中包含所有不同UI元素的模板和示例。应用程序本身不是如何构建整个应用程序的一个很好的例子，但它提供了一些如何构建tableViews的优秀示例。

Titanium Kitchen Sink

下载它，将其作为现有项目导入Ti Studio，构建并在模拟器或设备上查看它。找到所需的控件，查看选项并按照代码示例。

在现有应用中，您要为窗口添加标签，然后保留间距计数器，以便布置下一个标签的位置。

tableView是要使用的正确UI控件。

创建一个tableView对象（位置，样式等）。
创建一个tableRow对象数组（就像现在的标签一样）
tableView.data = myTableRowsArray;
将tableView添加到您的窗口
你已经开始运行

使用JSON数据将createLabel函数转换为表视图

1 个答案: