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);
});

修改合金项目中的小部件

1 个答案: