I have a Titanium Alloy view called overlay.xml
that doesn't have a controller. I am creating it in another controller called episode.js
and adding it to a container in episode.xml
. I'm doing this in order to make overlay.xml
into reusable view that can be added anywhere.
For example
episode.js
// create the overlay view
var overlay = Alloy.createController("overlay").getView();
// add it somewhere in episode.xml
$.episodeImage.add(overlay);
Inside overlay.xml
I have several components, like buttons and labels, that I'd like to access in Episode View
to add event listeners to. For example:
overlay.xml
<Alloy>
<View id="overlay">
<Button id="theButton" title="Click Me!" />
<Label id="theLabel" text="I am a label" />
</View>
</Alloy>
And then in episode.js for example:
var overlay = Alloy.createController("overlay").getView();
$.episodeImage.add(overlay);
// EXAMPLE: Get the button from overlay.xml and add an event listener
$.theButtonFromOverlayXML.addEventListener("click", function () {
alert("You clicked the button from overlay.xml!"):
});
Is it possible to do this?
Yes, you can access views through their ids in another controller. The only need to assign controller object and view object to two different variables:
episode.js
var overlay = Alloy.createController("overlay");
overlay.theButton.addEventListener('click', function() {
alert('You clicked the button from overlay.xml!');
});
var overlayView = overlay.getView();
$.episodeImage.add(overlayView);
// shorter version
$.episodeImage.add( overlay.getView() );