修改合金项目中的小部件 [英] Modifying widgets in an alloy project

问题描述

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

I have a widget which is a photo gallery. It's basic functionality means that it only allows the user to click on a thumbnail and then enlarge/de enlarge upon an onclick event.

我需要展开窗口小部件，以便有一个按钮，允许用户相应地更改其个人资料图片(如果他们选择了该图片).

I need to expand the widget so that there is a button which allows the user to change their profile pictures accordingly (if they select that picture).

默认情况下，此代码在widget.js中的显示方式如下:

Here is how the code looks by default in 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中:

Now to add a button, I can add the following into 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.然后，我可以使用它，并通过在相关控制器中调用它来将图片更改为新图片.

This will close the pop up and return the url of that image by putting it inside a global variable. I can then use this and change my the picture to the new one by calling that in the relevant controller.

问题是，扩展widget.js代码的最佳方法是什么，并且以这种方式使用全局变量的最佳方法是什么?

The question is, what is the best way expand the widget.js code and is using a global variable this way the best way to do this?

推荐答案

我经常使用自定义窗口小部件添加回调，以便您可以直接返回值.

What I often do with custom widgets is adding a callback, so you can return values directly.

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

这篇关于修改合金项目中的小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！