Require a view and add with a variable (Appcelerator Alloy)

Question

I do not know if I am doing it right or using any good practices, but I am trying to require and add views on my view.

but here I have a view container in my index.xml

<View id="containerDays" layout="vertical" height="Titanium.UI.SIZE">
    <Require id="requiredDay" src="NewDay"/>
</View>
<Label id="buttonAddDay"  class="button" >Adicionar outro dia</Label>

also on the index.js I have:

$.buttonAddDay.addEventListener("click", addNewDay);
function addNewDay () {
  var novoDia  = $.getView("NewDay");
  $.containerDays.add(novoDia);
}

also I have the view here in another folder on:

/app/views/NewDay.xml

and inside that view is a simple input

<Alloy>
  <View class="containerNewDay" layout="vertical" height="Titanium.UI.SIZE">
    <TextField id="Day" >write a new day</TextField>
  </View>
</Alloy>

so summing everything up,

1. I am trying to add my $.containerNewDay inside my $.containerDay, but I am not having any success with the getView() or the .open()

2. I will have to use all the textfield items to send it to a server, how can I set the ids but unfortunately I have no Idea how to do that on appcelerator.

Answer 1

Re the answer above, are you including the .add method from your original block of code? so it should be:

$.buttonAddDay.addEventListener("click", addNewDay);

function addNewDay () {
  var novoDia  = Alloy.createController("NewDay").getView();
  $.containerDays.add(novoDia);
}

or better, would be:

function addNewDay () {
  $.containerDays.add(Alloy.createController("NewDay").getView());
}

as this doesn't leave a pointer open to the view.

if you wanted to make it even cleaner:

$.buttonAddDay.addEventListener("click",  function addNewDay () {
  $.containerDays.add(Alloy.createController("NewDay").getView());
});

or if you want to stick to a "pure" Alloy way, then leave the addNewDay function in place and just add an onClick="addNewDay" handler in the button XML.

Crucially, remember that you'll need your containing view ContainerDays to have a layout of horizontal or your added views will simply sit on-top of each other.

Answer 2

Change:

$.buttonAddDay.addEventListener("click", addNewDay);
    function addNewDay () {
      var novoDia  = $.getView("NewDay");
    }

To:

$.buttonAddDay.addEventListener("click", addNewDay);
function addNewDay () {
  var novoDia  = Alloy.createController("NewDay").getView();
}