Модификация виджетов в проекте сплава

Question

У меня есть виджет, который представляет собой фотогалерею. Его базовая функциональность означает, что он позволяет пользователю только нажимать на миниатюру, а затем увеличивать / уменьшать ее при событии щелчка.

Мне нужно расширить виджет так, чтобы была кнопка, которая позволяет пользователю соответствующим образом изменять изображения своего профиля (если они выбирают это изображение).

Вот как выглядит код по умолчанию в widget.js:

var topView = Ti.UI.createView({
    width:Ti.UI.FILL,
    height: Ti.UI.FILL,
    zIndex:1200,
    visible:false
});

// this gets image , adds it to top view
var imgView = Ti.UI.createImageView({
    image: url,
    width:Ti.UI.SIZE,
    height: Ti.UI.SIZE
});

//add it
topView.add(imgView);

Теперь, чтобы добавить кнопку, я могу добавить следующее в widget.js:

var button = Titanium.UI.createButton({
    title : 'Use Picture',
    top : 10,
    width : 100,
    height : 50
}); 

button.addEventListener('click', function(e) {
    Alloy.Global.Image = url;
});

topView.add(button);

Это закроет всплывающее окно и вернет URL этого изображения, поместив его в глобальную переменную. Затем я могу использовать это и изменить свое изображение на новое, вызвав его в соответствующем контроллере.

Вопрос в том, как лучше всего расширить код widget.js и лучше ли использовать для этого глобальную переменную?

Answer 1

Что я часто делаю с пользовательскими виджетами, так это добавление обратного вызова, чтобы вы могли возвращать значения напрямую.

widget.xml

<Alloy>
    <Button title="Click me!" onTouchend="buttonClicked" />
</Alloy>

widget.js

// This will hold our callback
var onClickCallback;

// The button has been clicked, call callback
function buttonClicked(e) {
    if(typeof(onClickCallback) === 'function') {
        onClickCallback({ type:'clicked!' }); }
   }
}

// Assign our callback
function onClick(callback) {
    onClickCallback = callback;
}

// Make the onClick function public
exports.onClick = onClick;

index.xml

<Alloy>
    <Window>
        <Widget id="myWidget" src="myWidget" />
    </Window>
</Alloy>

index.js

// Now we can intercept the click within the widget
// and use the values passed
$.myWidget.onClick(function(e) {
    alert(e.type);
});