修改合金项目中的小部件

Question

我有一个小部件，它是一个照片库。它的基本功能意味着它只允许用户单击缩略图，然后在 onclick 事件时放大/缩小。

我需要展开小部件，以便有一个按钮允许用户相应地更改他们的个人资料图片（如果他们选择了该图片）。

下面是代码在 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);
});