0

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).

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

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

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.

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?

mwfire
  • 1,657
  • 13
  • 21
bobo2000
  • 1,779
  • 7
  • 31
  • 54

1 Answers1

1

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);
});
mwfire
  • 1,657
  • 13
  • 21
  • Thanks, is editing the widget directly, a good way to add buttons other ui features the right way to do things? I am concerned that by doing it that way, I may end up turning the widget into something that is not generic, but specific - making it harder to reuse. – bobo2000 Apr 29 '14 at 16:01
  • I don't see why you should not edit the widget itself. You can decide yourself how much of the widget you want to keep or make 'multi-purpose', that is customizable. Take care, however: I have written large modules to cover every use case one can think of, only to find myself using only a few features of it... Time is money ;) With this answer I rather wanted to illustrate how to receive feedback from your widget without using Alloy.Globals, which I would consider bad practice. – mwfire Apr 29 '14 at 16:31
  • I see, chances are I will probably have to reuse it i.e. without the button, is there way i can extend the widget and add the extra ui features in? – bobo2000 Apr 30 '14 at 10:37
  • Copy/paste and rename the widget in the widgets folder. Also change name and version in `widget.json` accordingly. Add your widget to the dependencies in your apps `config.json`. Now modify your widget to your needs. – mwfire May 01 '14 at 13:08
  • by the way, if you don't mind mwfire - could you have a look at this question for me http://stackoverflow.com/questions/23430778/titanium-mobile-image-processing . Cheers – bobo2000 May 02 '14 at 14:39
  • Tried your code, didn't work - the onTouchEnd event did not fire – bobo2000 May 10 '14 at 17:12