How to add a label to a referenced view?

Question

How to add a label to a referenced view?

You must Login before you can answer or comment on any questions.

Hi all,

I am kinda stuck with a problem in my app. I have created a scrollview in a js file and I have referenced it in another js file using the require method. But I am unable to add content to this view and update the same. There is no syntax error in the code. I have tried using the updateLayout() method of the view but to no avail. The label added in FirstView.js renders fine, but I am unable to append any labels to the scrollview after referencing it in SecondFile.js. Would be grateful if someone could help me out here.

FirstView.js

function NotificationsView() {
    Ti.API.info("NOTIFICATIONS VIEW CALLED");
 
    var notificationScrollView = Ti.UI.createScrollView({
        top: 10,
        height: 130,
        width: 300,
        layout: 'vertical',
        contentHeight: 'auto',
        borderWidth: 3,
        borderColor: '#336699',
        backgroundColor: 'red',
        showVerticalScrollIndicator: true
    });
 
    var updateLabel = Ti.UI.createLabel({
        left: 5,
        text: "- Hello world! \n",
        top: 5
    });
 
    notificationScrollView.add(updateLabel);
 
    return notificationScrollView;
}
 
module.exports = NotificationsView;

SecondFile.js

var NotificationView = require('ui/common/Notifications');
var notificationview = new NotificationView();
 
// Notification Area update
var updateLabel = Ti.UI.createLabel({
    left: 5,
    text: "- Notified of Payment 2022 \n",
    top: 5
});
 
notificationview.add(updateLabel);
// notificationview.startLayout();
// notificationview.updateLayout(notificationview.add(updateLabel));
// notificationview.finishLayout();

EXTRA DETAILS - Application type: mobile, Titanium SDK: 2.1.1 (07/27/12 14:01 0fd84a2), Platform & version: iOS 5.0, Device: iPad2 running iOS 5.0, Host Operating System: OS X 10.6, Titanium Studio: 2.1.1.201207271312

1 Answer

Your Answer

Think you can help? Login to answer this question!

Accepted Answer

Accepted Answer

The code works for me. I used your Notifications.js and created an app.js like this:

var win = Ti.UI.createWindow ({backgroundColor: '#fff'});
 
var NotificationView = require('/NotificationsView');
var notificationview = new NotificationView();
 
win.add (notificationview);
 
win.open ();
 
setTimeout (function () {
    // Notification Area update
    var updateLabel = Ti.UI.createLabel({
        left: 5,
        text: "- Notified of Payment 2022 \n",
        top: 5
    });
 
    notificationview.add(updateLabel);
}, 5000);

The "Payment 2022" label shows up after 5 seconds.

But what I noticed in your code is that you have not added notificationview to any other view or window. So I suspect that you've created a notificationview in some other module (a third file that you don't show us here). And maybe you thought that requiring NotificationsView.js gives you a reference to that same notificationview?

Each time you do this:

var NotificationView = require('ui/common/Notifications');
var notificationview = new NotificationView();

you're creating a new scrollview. If you want multiple modules to be able to modify a single NotificationView, you need to save a reference to it somewhere . You could define a module to hold the reference. See this thread for an example.

A few other random tips:

be consistent in your filename and class naming conventions. You call your class NotificationView, but you put it in a file called NotificationsView (with an "s").
you should probably create a new method in your NotificationView class to add a notification, rather than creating views externally and adding them
have a look at the CommonJS articles here; I think they'll really help you understand module design.