【５日】fireEvent の使い所

app.js

(function(){

    var Window = require('Window');

    var tab_group = Ti.UI.createTabGroup();
    var win = new Window();

    var tab = Titanium.UI.createTab({
        title: 'Window',
        window: win
    });

    tab_group.addTab(tab);
    tab_group.open();

})();

Container.js

var Container = function(){
    var self = Ti.UI.createScrollableView({
        top: 100,
        right: 20,
        bottom: 20,
        left: 20,
        backgroundColor: '#999'
    });

    var pane_red = Ti.UI.createView({
        backgroundColor: '#f00'
    });

    var button_red = Ti.UI.createButton({
        top: 50,
        right: 50,
        bottom: 50,
        left: 50,
        title: 'red',
    });

    var pane_green = Ti.UI.createView({
        backgroundColor: '#0f0'
    });

    var button_green = Ti.UI.createButton({
        top: 50,
        right: 50,
        bottom: 50,
        left: 50,
        title: 'green',
    });

    var pane_blue = Ti.UI.createView({
        backgroundColor: '#00f'
    });

    var button_blue = Ti.UI.createButton({
        top: 50,
        right: 50,
        bottom: 50,
        left: 50,
        title: 'blue',
    });


    button_red.addEventListener('click', function(e){
        // text_field.value = 'red';
        self.fireEvent('colorButtonClick', { value: 'red' });
    });

    button_green.addEventListener('click', function(e){
        // text_field.value = 'green';
        self.fireEvent('colorButtonClick', { value: 'green' });
    });

    button_blue.addEventListener('click', function(e){
        // text_field.value = 'blue';
        self.fireEvent('colorButtonClick', { value: 'blue' });
    });


    pane_red.add(button_red);
    pane_green.add(button_green);
    pane_blue.add(button_blue);

    self.views = [pane_red, pane_green, pane_blue];

    return self;
};

module.exports = Container;

Window.js

var Container = require('Container');

var Window = function(){
    var self = Ti.UI.createWindow({  
        title: 'Tab 1',
        backgroundColor: '#fff'
    });

    var text_field = Ti.UI.createTextField({
        top: 50,
        right: 20,
        left: 20,
        height: 30,
        color: '#999',
        font: {
            fontSize: 20,
            fontFamily: 'Helvetica Neue'
        },
        borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
    });

    var container = Container();

    container.addEventListener('colorButtonClick', function(e){
        text_field.value = e.value;
    });

    self.add(text_field);
    self.add(container);

    return self;
};

module.exports = Window;